fix : 修复列表页面搜索框排版
This commit is contained in:
@@ -1,36 +1,47 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-form :model="queryParams" inline class="query-form" ref="queryForm">
|
||||
<el-form-item label="参数名称" prop="configName">
|
||||
<el-input v-model="queryParams.configName" placeholder="请输参数名称"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="参数键名" prop="configKey">
|
||||
<el-input v-model="queryParams.configKey" placeholder="请输参数键名"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="系统内置" prop="configType">
|
||||
<el-select v-model="queryParams.configType" placeholder="请选择系统内置" clearable filterable>
|
||||
<el-option
|
||||
v-for="dict in cacheStore.getDict('yes_no')"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button color="#DED0B2" @click="getList" :icon="Search">搜索</el-button>
|
||||
<el-button @click="handleReset" :icon="Refresh">重置</el-button>
|
||||
</el-form-item>
|
||||
<el-form :model="queryParams" ref="queryForm" class="search-form select-form"
|
||||
style="margin-top: 18px;margin-left: 16px">
|
||||
<el-row>
|
||||
<el-col :span="5">
|
||||
<el-form-item label="参数名称" prop="configName">
|
||||
<el-input v-model="queryParams.configName" placeholder="请输入参数名称" clearable @keyup.enter.native="getList"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="5" :offset="1">
|
||||
<el-form-item label="参数键名" prop="configKey">
|
||||
<el-input v-model="queryParams.configKey" placeholder="请输入参数键名" clearable @keyup.enter.native="getList"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="5" :offset="1">
|
||||
<el-form-item label="系统内置" prop="configType">
|
||||
<el-select v-model="queryParams.configType" placeholder="请选择系统内置" clearable filterable remote @change="getList">
|
||||
<el-option
|
||||
v-for="dict in cacheStore.getDict('yes_no')"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6" :offset="1">
|
||||
<el-form-item>
|
||||
<el-button color="#DED0B2" @click="getList" :icon="Search">搜索</el-button>
|
||||
<el-button @click="handleReset" :icon="Refresh">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<div class="query-btn">
|
||||
<el-button color="#DED0B2" v-perm="['admin:config:add']" @click="handleAdd" >新增</el-button>
|
||||
<el-button color="#DED0B2" v-perm="['admin:config:add']" @click="handleAdd">新增</el-button>
|
||||
<el-button type="danger" v-perm="['admin:config:del']" @click="handleMoreDelete(configIds,configNameList)"
|
||||
:disabled="disabled">删除
|
||||
</el-button>
|
||||
<!-- <el-button type="warning" v-perm="['admin:config:export']" @click="handleExport" :icon="Download" plain>导出-->
|
||||
<!-- </el-button>-->
|
||||
<!-- <el-button type="warning" v-perm="['admin:config:export']" @click="handleExport" :icon="Download" plain>导出-->
|
||||
<!-- </el-button>-->
|
||||
</div>
|
||||
<div class="table">
|
||||
<div class="fv-table">
|
||||
<el-table
|
||||
:data="list"
|
||||
row-key="configId"
|
||||
@@ -41,7 +52,7 @@
|
||||
v-tabh
|
||||
>
|
||||
<el-table-column type="selection" width="55"/>
|
||||
<el-table-column label="序号" type="index" width="60"/>
|
||||
<el-table-column label="序号" type="index" width="60" align="center"/>
|
||||
<el-table-column prop="configName" label="参数名称" align="center"/>
|
||||
<el-table-column prop="configKey" label="参数键名" align="center"/>
|
||||
<el-table-column prop="configValue" label="参数键值" align="center"/>
|
||||
@@ -51,7 +62,7 @@
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="remark" label="备注" align="center"/>
|
||||
<el-table-column label="操作">
|
||||
<el-table-column label="操作" align="center">
|
||||
<template #default="scope">
|
||||
<el-button type="primary" size="mini" v-perm="['admin:config:edit']"
|
||||
@click="handleEdit(scope.row.configId)" link>编辑
|
||||
|
||||
@@ -1,19 +1,28 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-form :model="queryParams" label-width="70px" class="query-form" inline ref="queryInstance">
|
||||
<el-form-item label="菜单名称" prop="menuName">
|
||||
<el-input v-model="queryParams.menuName" placeholder="菜单名称" clearable></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="状态" prop="state">
|
||||
<el-select v-model="queryParams.state" placeholder="菜单状态" clearable filterable>
|
||||
<el-option v-for="item in cacheStore.getDict('normal_disable')" :key="item.value" :label="item.label"
|
||||
:value="item.value"/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button color="#DED0B2" @click="getList">搜索</el-button>
|
||||
<el-button @click="handleReset(queryInstance)">重置</el-button>
|
||||
</el-form-item>
|
||||
<el-form :model="queryParams" class="search-form select-form" ref="queryInstance"
|
||||
style="margin-top: 18px;margin-left: 16px">
|
||||
<el-row>
|
||||
<el-col :span="5">
|
||||
<el-form-item label="菜单名称" prop="menuName">
|
||||
<el-input v-model="queryParams.menuName" placeholder="请输入菜单名称" clearable @keyup.enter.native="getList"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="5" :offset="1">
|
||||
<el-form-item label="状态" prop="state">
|
||||
<el-select v-model="queryParams.state" placeholder="请选择菜单状态" clearable remote filterable style="width: 100%" @change="getList">
|
||||
<el-option v-for="item in cacheStore.getDict('normal_disable')" :key="item.value" :label="item.label"
|
||||
:value="item.value"/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6" :offset="1">
|
||||
<el-form-item>
|
||||
<el-button color="#DED0B2" @click="getList" :icon="Search">搜索</el-button>
|
||||
<el-button @click="handleReset(queryInstance)" :icon="Refresh">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<div class="table-header-btn">
|
||||
<el-button color="#DED0B2" @click="handleAdd" v-perm="['admin:menu:add']">新增</el-button>
|
||||
@@ -45,11 +54,14 @@
|
||||
<el-table-column prop="createTime" label="创建时间"/>
|
||||
<el-table-column label="操作" prop="operation" align="right">
|
||||
<template #default="scope">
|
||||
<el-button type="primary" v-if="scope.row.menuType!=='B'" @click="handleAdd(scope.row)" link v-perm="['admin:menu:add']">新增
|
||||
<el-button type="primary" v-if="scope.row.menuType!=='B'" @click="handleAdd(scope.row)" link
|
||||
v-perm="['admin:menu:add']">新增
|
||||
</el-button>
|
||||
<el-button type="primary" @click="handleEdit(scope.row.menuId)" link v-perm="['admin:menu:edit']">修改
|
||||
</el-button>
|
||||
<el-button type="primary" @click="handleEdit(scope.row.menuId)" link v-perm="['admin:menu:edit']">修改</el-button>
|
||||
<!-- <el-button type="primary" @click="handleAssignRoles(scope.row)" link>分配角色</el-button> -->
|
||||
<popover-delete :name="scope.row.menuName" :type="'菜单'" @delete="handleDel(scope.row.menuId)" :perm="['admin:menu:del']" />
|
||||
<popover-delete :name="scope.row.menuName" :type="'菜单'" @delete="handleDel(scope.row.menuId)"
|
||||
:perm="['admin:menu:del']"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
@@ -92,15 +104,15 @@
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="是否外链">
|
||||
<el-radio-group v-model="form.isFrame">
|
||||
<el-radio v-for="item in cacheStore.getDict('is_frame')"
|
||||
:label="item.value"
|
||||
:key="item.value">
|
||||
{{ item.label }}
|
||||
</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="是否外链">
|
||||
<el-radio-group v-model="form.isFrame">
|
||||
<el-radio v-for="item in cacheStore.getDict('is_frame')"
|
||||
:label="item.value"
|
||||
:key="item.value">
|
||||
{{ item.label }}
|
||||
</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="11" :offset="1" v-if="form.menuType === 'B'">
|
||||
<el-form-item label="权限字符" prop="perms" required>
|
||||
@@ -185,6 +197,7 @@ import Tag from '@/components/Tag.vue'
|
||||
import SvgIcon from '@/components/svgIcon/index.vue'
|
||||
import IconSelect from '@/components/iconSelect/index.vue'
|
||||
import PopoverDelete from "@/components/PopoverDelete.vue";
|
||||
import {Refresh, Search} from '@element-plus/icons-vue'
|
||||
|
||||
const cacheStore = useCacheStore()
|
||||
const queryParams = reactive({
|
||||
@@ -263,8 +276,8 @@ const restFrom = () => {
|
||||
}
|
||||
}
|
||||
|
||||
const cellClick = (row,column) => {
|
||||
if ("operation" !== column.property){
|
||||
const cellClick = (row, column) => {
|
||||
if ("operation" !== column.property) {
|
||||
tableTree.value.toggleRowExpansion(row)
|
||||
}
|
||||
}
|
||||
@@ -312,16 +325,16 @@ const handleEdit = async (menuId) => {
|
||||
title.value = '修改菜单'
|
||||
restFrom()
|
||||
await getMenuInfo(menuId).then(res => {
|
||||
if(res.data.isFrame==false){
|
||||
res.data.isFrame='0'
|
||||
}else {
|
||||
res.data.isFrame='1'
|
||||
}
|
||||
if(res.data.isCache==false){
|
||||
res.data.isCache='0'
|
||||
}else {
|
||||
res.data.isCache='1'
|
||||
}
|
||||
if (res.data.isFrame == false) {
|
||||
res.data.isFrame = '0'
|
||||
} else {
|
||||
res.data.isFrame = '1'
|
||||
}
|
||||
if (res.data.isCache == false) {
|
||||
res.data.isCache = '0'
|
||||
} else {
|
||||
res.data.isCache = '1'
|
||||
}
|
||||
form.value = {...res.data}
|
||||
})
|
||||
await getMenuOpt(menuId).then(res => {
|
||||
@@ -402,7 +415,30 @@ const handleCancel = () => {
|
||||
|
||||
getList()
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.select-form {
|
||||
.el-select {
|
||||
|
||||
.el-select__wrapper {
|
||||
.el-select__suffix::before {
|
||||
content: "";
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border: solid #a8abb2;
|
||||
border-width: 0 0 1px 1px;
|
||||
transform: translate(-50%, -50%) rotate(-45deg);
|
||||
}
|
||||
}
|
||||
|
||||
.is-focused {
|
||||
.el-select__suffix::before {
|
||||
margin-top: 10px;
|
||||
transform: translate(-50%, -50%) rotate(-225deg) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<style lang="scss" scoped>
|
||||
.el-input-number {
|
||||
width: 100%;
|
||||
@@ -413,4 +449,20 @@ getList()
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.el-table__header) {
|
||||
.is-leaf:first-child {
|
||||
.cell {
|
||||
margin-left: 5px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.el-table__body) {
|
||||
.el-table__cell:first-child {
|
||||
.cell {
|
||||
margin-left: -13px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<fvSearchForm :searchConfig="searchConfig" @search="search"></fvSearchForm>
|
||||
<fvSearchForm :searchConfig="searchConfig" @search="search" style="margin-left: 16px"></fvSearchForm>
|
||||
<fvTable ref="tableIns" :tableConfig="tableConfig" @headBtnClick="headBtnClick"></fvTable>
|
||||
</template>
|
||||
|
||||
@@ -50,7 +50,7 @@ const searchConfig = ref([
|
||||
prop: 'subCompanyId',
|
||||
component: 'el-tree-select',
|
||||
props: {
|
||||
placeholder: '请输入',
|
||||
placeholder: '请选择公司名称',
|
||||
clearable: true,
|
||||
data: [],
|
||||
filterable: true,
|
||||
@@ -63,7 +63,7 @@ const searchConfig = ref([
|
||||
prop: 'roleName',
|
||||
component: 'el-input',
|
||||
props: {
|
||||
placeholder: '请输入',
|
||||
placeholder: '请输入角色名称',
|
||||
clearable: true
|
||||
}
|
||||
},
|
||||
@@ -72,7 +72,7 @@ const searchConfig = ref([
|
||||
prop: 'roleKey',
|
||||
component: 'el-input',
|
||||
props: {
|
||||
placeholder: '请输入',
|
||||
placeholder: '请输入权限字符',
|
||||
clearable: true
|
||||
}
|
||||
},
|
||||
@@ -81,27 +81,27 @@ const searchConfig = ref([
|
||||
prop: 'state',
|
||||
component: shallowRef(fvSelect),
|
||||
props: {
|
||||
placeholder: '请选择',
|
||||
placeholder: '请选择状态',
|
||||
clearable: true,
|
||||
cacheKey: 'normal_disable',
|
||||
remote: true,
|
||||
filterable: true
|
||||
}
|
||||
},
|
||||
{
|
||||
label: '登录时间',
|
||||
prop: 'dateValue',
|
||||
component: 'el-date-picker',
|
||||
props: {
|
||||
placeholder: '请选择',
|
||||
clearable: true,
|
||||
type: 'datetimerange',
|
||||
startPlaceholder: '开始日期',
|
||||
endPlaceholder: '结束日期',
|
||||
valueFormat: 'YYYY-MM-DD HH:mm:ss',
|
||||
shortcuts: shortcuts
|
||||
}
|
||||
},
|
||||
// {
|
||||
// label: '登录时间',
|
||||
// prop: 'dateValue',
|
||||
// component: 'el-date-picker',
|
||||
// props: {
|
||||
// placeholder: '请选择',
|
||||
// clearable: true,
|
||||
// type: 'datetimerange',
|
||||
// startPlaceholder: '开始日期',
|
||||
// endPlaceholder: '结束日期',
|
||||
// valueFormat: 'YYYY-MM-DD HH:mm:ss',
|
||||
// shortcuts: shortcuts
|
||||
// }
|
||||
// },
|
||||
])
|
||||
|
||||
const tableIns = ref()
|
||||
@@ -114,6 +114,13 @@ const auths = {
|
||||
|
||||
const tableConfig = reactive({
|
||||
columns: [
|
||||
{
|
||||
prop: 'index',
|
||||
type: 'index',
|
||||
label: '序号',
|
||||
align: 'center',
|
||||
width:85
|
||||
},
|
||||
{
|
||||
prop: 'roleName',
|
||||
label: '角色名称',
|
||||
@@ -133,26 +140,30 @@ const tableConfig = reactive({
|
||||
prop: 'template',
|
||||
label: '是否为模版角色',
|
||||
align: 'center',
|
||||
width:150,
|
||||
showOverflowTooltip: false,
|
||||
currentRender: ({row, index}) => (<Tag dictType={'yes_no'} value={row.template ? '1' : '0'} />)
|
||||
},
|
||||
{
|
||||
prop: 'roleSort',
|
||||
label: '显示顺序',
|
||||
align: 'center'
|
||||
align: 'center',
|
||||
width:100,
|
||||
},
|
||||
{
|
||||
prop: 'state',
|
||||
label: '状态',
|
||||
showOverflowTooltip: false,
|
||||
align: 'center',
|
||||
width:100,
|
||||
currentRender: ({row, index}) => (<Tag dictType={'normal_disable'} value={row.state} />)
|
||||
},
|
||||
{
|
||||
prop: 'oper',
|
||||
label: '操作',
|
||||
align: 'right',
|
||||
align: 'center',
|
||||
fixed: 'right',
|
||||
width:150,
|
||||
showOverflowTooltip: false,
|
||||
currentRender: ({row, index}) => {
|
||||
let btn = [{label: '修改', auth: auths.edit, func: ()=>handleEdit(row) , type: 'primary'}]
|
||||
@@ -270,7 +281,24 @@ const init = async () => {
|
||||
init()
|
||||
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
:deep(.el-table__header) {
|
||||
.is-leaf:first-child {
|
||||
.cell {
|
||||
margin-left: -25px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
:deep(.el-table__body) {
|
||||
.el-table__cell:first-child {
|
||||
.cell {
|
||||
margin-left: -13px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
:deep(.el-col-5:nth-child(4).el-col-offset-1){
|
||||
margin-left: 35px !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<fvSearchForm ref="form" :searchConfig="searchConfig" @search="search"></fvSearchForm>
|
||||
<fvSearchForm ref="form" :searchConfig="searchConfig" @search="search" style="margin-left: 16px"></fvSearchForm>
|
||||
<fvTable ref="tableIns" :tableConfig="tableConfig" @headBtnClick="headBtnClick"></fvTable>
|
||||
<user-picker :multiple="true" ref="userPicker" title="请选择研发人员" v-model:value="userList" @ok="selected"/>
|
||||
</template>
|
||||
@@ -21,7 +21,7 @@ const searchConfig = ref([
|
||||
prop: 'subCompanyId',
|
||||
component: 'el-tree-select',
|
||||
props: {
|
||||
placeholder: '请输入',
|
||||
placeholder: '请选择公司名称',
|
||||
clearable: true,
|
||||
data: [],
|
||||
filterable: true,
|
||||
@@ -40,7 +40,7 @@ const searchConfig = ref([
|
||||
prop: 'departmentId',
|
||||
component: 'el-tree-select',
|
||||
props: {
|
||||
placeholder: '请选择',
|
||||
placeholder: '请选择部门名称',
|
||||
clearable: true,
|
||||
data: [],
|
||||
filterable: true,
|
||||
@@ -53,7 +53,7 @@ const searchConfig = ref([
|
||||
prop: 'nickName',
|
||||
component: 'el-input',
|
||||
props: {
|
||||
placeholder: '请输入',
|
||||
placeholder: '请输入用户名称',
|
||||
clearable: true
|
||||
}
|
||||
},
|
||||
@@ -62,7 +62,7 @@ const searchConfig = ref([
|
||||
prop: 'userName',
|
||||
component: 'el-input',
|
||||
props: {
|
||||
placeholder: '请输入',
|
||||
placeholder: '请输入用户账号',
|
||||
clearable: true
|
||||
}
|
||||
},
|
||||
@@ -71,7 +71,7 @@ const searchConfig = ref([
|
||||
prop: 'state',
|
||||
component: shallowRef(fvSelect),
|
||||
props: {
|
||||
placeholder: '请输入',
|
||||
placeholder: '请选择状态',
|
||||
cacheKey: 'normal_disable',
|
||||
clearable: true,
|
||||
remote: true,
|
||||
@@ -93,6 +93,13 @@ const auths = {
|
||||
|
||||
const tableConfig = reactive({
|
||||
columns: [
|
||||
{
|
||||
prop: 'index',
|
||||
type: 'index',
|
||||
label: '序号',
|
||||
align: 'center',
|
||||
width:85
|
||||
},
|
||||
{
|
||||
prop: 'userName',
|
||||
label: '用户账号',
|
||||
@@ -127,12 +134,14 @@ const tableConfig = reactive({
|
||||
prop: 'accountType',
|
||||
label: '主子账号',
|
||||
align: 'center',
|
||||
width: 100,
|
||||
showOverflowTooltip: false,
|
||||
currentRender: ({row, index}) => (<Tag dictType={'account_type'} value={row.accountType} />)
|
||||
},
|
||||
{
|
||||
prop: 'state',
|
||||
label: '状态',
|
||||
width: 80,
|
||||
align: 'center',
|
||||
showOverflowTooltip: false,
|
||||
currentRender: ({row, index}) => (<Tag dictType={'normal_disable'} value={row.state} />)
|
||||
@@ -146,7 +155,7 @@ const tableConfig = reactive({
|
||||
prop: 'oper',
|
||||
label: '操作',
|
||||
fixed: 'right',
|
||||
width: '150',
|
||||
width: 180,
|
||||
align: 'center',
|
||||
showOverflowTooltip: false,
|
||||
currentRender: ({row, index}) => {
|
||||
@@ -270,7 +279,23 @@ const headBtnClick = (key) => {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
:deep(.el-table__header) {
|
||||
.is-leaf:first-child {
|
||||
.cell {
|
||||
margin-left: -25px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
:deep(.el-table__body) {
|
||||
.el-table__cell:first-child {
|
||||
.cell {
|
||||
margin-left: -13px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
:deep(.el-col-5:nth-child(4).el-col-offset-1){
|
||||
margin-left: 35px !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user