odjbin/mosr-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
odjbin
2024-08-12 00:04:31 +08:00
parent 3e3d738362
commit 83af021d33
15 changed files with 434 additions and 175 deletions
Download Patch File Download Diff File Expand all files Collapse all files

128
src/views/system/menu/index.vue
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>