fix : 修复列表页面搜索框排版

This commit is contained in:
2024-08-12 00:04:31 +08:00
parent 3e3d738362
commit 83af021d33
15 changed files with 434 additions and 175 deletions

View File

@@ -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>编辑

View File

@@ -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>

View File

@@ -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>

View File

@@ -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>