feat: 系统管理 字典管理页面
JINGYJ
11 months ago
parent
af67f7414f
commit
2c78f0852b
@ -1,5 +1,394 @@
|
||||
<script setup lang="ts"></script>
|
||||
<script setup lang="ts">
|
||||
import { reactive, ref, watch } from "vue";
|
||||
import type { CheckboxValueType } from "element-plus";
|
||||
defineOptions({
|
||||
name: "AccountManagement"
|
||||
});
|
||||
const seachForm = reactive({
|
||||
title: "",
|
||||
publishDeptName: "",
|
||||
status: "1"
|
||||
});
|
||||
const accountForm = reactive({
|
||||
userName: "",
|
||||
role: "",
|
||||
department: ""
|
||||
});
|
||||
const tabList = ref([
|
||||
{
|
||||
title: "账号管理",
|
||||
id: "1"
|
||||
},
|
||||
{
|
||||
title: "部门管理",
|
||||
id: "2"
|
||||
},
|
||||
{
|
||||
title: "角色权限",
|
||||
id: "3"
|
||||
}
|
||||
]);
|
||||
const pagination = reactive({
|
||||
total: 0,
|
||||
pageSize: 10,
|
||||
currentPage: 1,
|
||||
background: true
|
||||
});
|
||||
const columns: TableColumnList = [
|
||||
{
|
||||
label: "序号",
|
||||
prop: "diseaseName"
|
||||
},
|
||||
{
|
||||
label: "用户名",
|
||||
prop: "diseaseName"
|
||||
},
|
||||
{
|
||||
label: "姓名",
|
||||
prop: "diseaseName"
|
||||
},
|
||||
{
|
||||
label: "角色",
|
||||
prop: "diseaseName"
|
||||
},
|
||||
{
|
||||
label: "所属部门",
|
||||
prop: "diseaseName"
|
||||
},
|
||||
{
|
||||
label: "状态",
|
||||
prop: "diseaseName"
|
||||
},
|
||||
{
|
||||
label: "备注",
|
||||
prop: "diseaseName"
|
||||
},
|
||||
{
|
||||
label: "最新时间",
|
||||
prop: "diseaseName"
|
||||
},
|
||||
{
|
||||
label: "操作",
|
||||
fixed: "right",
|
||||
width: 350,
|
||||
slot: "operation"
|
||||
}
|
||||
];
|
||||
const dataList = ref([]);
|
||||
const search = () => {
|
||||
pagination.currentPage = 1;
|
||||
pagination.pageSize = 10;
|
||||
};
|
||||
|
||||
const reset = () => {
|
||||
seachForm.title = "";
|
||||
seachForm.publishDeptName = "";
|
||||
// search();
|
||||
};
|
||||
const createFlag = ref(false);
|
||||
|
||||
// const create = () => {
|
||||
// createFlag.value = true;
|
||||
// // search();
|
||||
// };
|
||||
// const changeStatus = item => {
|
||||
// seachForm.status = item.id;
|
||||
// };
|
||||
const checkAll = ref(false);
|
||||
const indeterminate = ref(false);
|
||||
const value = ref<CheckboxValueType[]>([]);
|
||||
const cities = ref([
|
||||
{
|
||||
value: "Beijing",
|
||||
label: "Beijing"
|
||||
},
|
||||
{
|
||||
value: "Shanghai",
|
||||
label: "Shanghai"
|
||||
},
|
||||
{
|
||||
value: "Nanjing",
|
||||
label: "Nanjing"
|
||||
},
|
||||
{
|
||||
value: "Chengdu",
|
||||
label: "Chengdu"
|
||||
},
|
||||
{
|
||||
value: "Shenzhen",
|
||||
label: "Shenzhen"
|
||||
},
|
||||
{
|
||||
value: "Guangzhou",
|
||||
label: "Guangzhou"
|
||||
}
|
||||
]);
|
||||
const options = [
|
||||
{
|
||||
value: "Option1",
|
||||
label: "Option1"
|
||||
},
|
||||
{
|
||||
value: "Option2",
|
||||
label: "Option2"
|
||||
},
|
||||
{
|
||||
value: "Option3",
|
||||
label: "Option3"
|
||||
},
|
||||
{
|
||||
value: "Option4",
|
||||
label: "Option4"
|
||||
},
|
||||
{
|
||||
value: "Option5",
|
||||
label: "Option5"
|
||||
}
|
||||
];
|
||||
|
||||
watch(value, val => {
|
||||
if (val.length === 0) {
|
||||
checkAll.value = false;
|
||||
indeterminate.value = false;
|
||||
} else if (val.length === cities.value.length) {
|
||||
checkAll.value = true;
|
||||
indeterminate.value = false;
|
||||
} else {
|
||||
indeterminate.value = true;
|
||||
}
|
||||
});
|
||||
|
||||
const handleCheckAll = (val: CheckboxValueType) => {
|
||||
indeterminate.value = false;
|
||||
if (val) {
|
||||
value.value = cities.value.map(_ => _.value);
|
||||
} else {
|
||||
value.value = [];
|
||||
}
|
||||
};
|
||||
const changeStatus = item => {
|
||||
seachForm.status = item.id;
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>11111</div>
|
||||
<div class="sublibrary_management app-main-content">
|
||||
<!-- <div class="seach">
|
||||
<div class="seach-title"><span>子库管理</span></div>
|
||||
<el-form :model="seachForm">
|
||||
<el-row>
|
||||
<el-form-item label="子库名称">
|
||||
<el-input v-model="seachForm.title" />
|
||||
</el-form-item>
|
||||
<el-button class="ml-8" @click="search" type="primary"
|
||||
>搜索</el-button
|
||||
>
|
||||
<el-button @click="reset">重置</el-button>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</div> -->
|
||||
<div class="main-table">
|
||||
<div class="main-table-header">
|
||||
<div class="tab-list">
|
||||
<div
|
||||
class="tab-list-item"
|
||||
:class="[seachForm.status === item.id ? 'actived' : '']"
|
||||
v-for="(item, index) in tabList"
|
||||
:key="index"
|
||||
@click="changeStatus(item)"
|
||||
>
|
||||
<span>{{ item.title }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="header-btn">
|
||||
<el-button @click="search" type="primary">新建账号</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="account_seach" v-if="seachForm.status === '1'">
|
||||
<el-form :model="accountForm">
|
||||
<el-row>
|
||||
<el-form-item label="用户名">
|
||||
<el-input v-model="accountForm.userName" />
|
||||
</el-form-item>
|
||||
<el-form-item class="ml-4" label="角色">
|
||||
<el-input v-model="accountForm.role" />
|
||||
</el-form-item>
|
||||
<el-form-item class="ml-4" label="所属部门">
|
||||
<el-select
|
||||
v-model="accountForm.department"
|
||||
clearable
|
||||
placeholder="请选择"
|
||||
style="width: 240px"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in options"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-button class="ml-8" @click="search" type="primary"
|
||||
>搜索</el-button
|
||||
>
|
||||
<el-button @click="reset">重置</el-button>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</div>
|
||||
<pure-table
|
||||
showOverflowTooltip
|
||||
alignWhole="center"
|
||||
:data="dataList"
|
||||
:columns="columns"
|
||||
:header-cell-style="{
|
||||
background: 'var(--el-table-row-hover-bg-color)',
|
||||
color: 'var(--el-text-color-primary)'
|
||||
}"
|
||||
>
|
||||
<template #operation="{ row }">
|
||||
<el-button link type="danger" @click="handleDelete(row)">
|
||||
删除
|
||||
</el-button>
|
||||
</template></pure-table
|
||||
>
|
||||
</div>
|
||||
<el-drawer
|
||||
v-model="createFlag"
|
||||
modal-class="drawer_content"
|
||||
:with-header="false"
|
||||
>
|
||||
<div class="drawer_header">
|
||||
<span>新建子库</span>
|
||||
</div>
|
||||
<div class="drawer_box">
|
||||
<el-form :model="accountForm">
|
||||
<el-form-item label="子库名称">
|
||||
<el-input v-model="accountForm.title" autocomplete="off" />
|
||||
</el-form-item>
|
||||
<el-form-item label="子库编码">
|
||||
<el-input v-model="accountForm.title" autocomplete="off" />
|
||||
</el-form-item>
|
||||
<el-form-item label="关联部门">
|
||||
<el-select
|
||||
v-model="value"
|
||||
multiple
|
||||
clearable
|
||||
collapse-tags
|
||||
placeholder="Select"
|
||||
popper-class="custom-header"
|
||||
:max-collapse-tags="3"
|
||||
style="width: 240px"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in cities"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
<el-checkbox
|
||||
v-model="checkAll"
|
||||
:indeterminate="indeterminate"
|
||||
@change="handleCheckAll"
|
||||
>
|
||||
All
|
||||
</el-checkbox>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div class="drawer_footer">
|
||||
<el-button plain>重置</el-button>
|
||||
<el-button type="primary">确定</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</el-drawer>
|
||||
</div>
|
||||
</template>
|
||||
<style lang="scss" scoped>
|
||||
.sublibrary_management {
|
||||
.main-table {
|
||||
border-radius: 6px;
|
||||
|
||||
.main-table-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 24px;
|
||||
border-bottom: 1px solid #dfe1e2;
|
||||
|
||||
.tab-list {
|
||||
position: relative;
|
||||
top: 1px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.tab-list-item {
|
||||
padding: 16px 34px;
|
||||
font-size: 18px;
|
||||
color: #333;
|
||||
cursor: pointer;
|
||||
background: #f5f7f9;
|
||||
border: 1px solid #dfe1e2;
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
.actived {
|
||||
color: #0052d9;
|
||||
background: #fff;
|
||||
border: 0;
|
||||
border-top: 3px solid #0052d9;
|
||||
}
|
||||
}
|
||||
|
||||
.header-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.main-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 142px;
|
||||
height: 32px;
|
||||
font-size: 14px;
|
||||
color: #fff;
|
||||
background: #0052d9;
|
||||
border-radius: 6px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.el-drawer__body) {
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
.drawer_content {
|
||||
.drawer_header {
|
||||
box-sizing: border-box;
|
||||
height: 96px;
|
||||
padding: 24px;
|
||||
line-height: 65px;
|
||||
border-bottom: 1px solid #e9e9e9;
|
||||
|
||||
span {
|
||||
padding-left: 8px;
|
||||
font-size: 20px;
|
||||
border-left: 6px solid #0052d9;
|
||||
}
|
||||
}
|
||||
|
||||
.drawer_box {
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
height: calc(100vh - 96px);
|
||||
padding: 24px;
|
||||
|
||||
.drawer_footer {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -0,0 +1,260 @@
|
||||
<script setup lang="ts">
|
||||
import { reactive, ref, watch } from "vue";
|
||||
import type { CheckboxValueType } from "element-plus";
|
||||
defineOptions({
|
||||
name: "DictionaryManagement"
|
||||
});
|
||||
const seachForm = reactive({
|
||||
title: "",
|
||||
publishDeptName: "",
|
||||
status: ""
|
||||
});
|
||||
const dictionaryForm = reactive({
|
||||
title: "",
|
||||
publishDeptName: "",
|
||||
status: ""
|
||||
});
|
||||
const pagination = reactive({
|
||||
total: 0,
|
||||
pageSize: 10,
|
||||
currentPage: 1,
|
||||
background: true
|
||||
});
|
||||
const columns: TableColumnList = [
|
||||
{
|
||||
label: "序号",
|
||||
prop: "diseaseName"
|
||||
},
|
||||
{
|
||||
label: "字典名称",
|
||||
prop: "diseaseName"
|
||||
},
|
||||
{
|
||||
label: "字典编码",
|
||||
prop: "diseaseName"
|
||||
},
|
||||
{
|
||||
label: "备注",
|
||||
prop: "diseaseName"
|
||||
},
|
||||
{
|
||||
label: "最新时间",
|
||||
prop: "diseaseName"
|
||||
},
|
||||
{
|
||||
label: "操作",
|
||||
fixed: "right",
|
||||
width: 350,
|
||||
slot: "operation"
|
||||
}
|
||||
];
|
||||
const dataList = ref([]);
|
||||
const search = () => {
|
||||
pagination.currentPage = 1;
|
||||
pagination.pageSize = 10;
|
||||
};
|
||||
|
||||
const reset = () => {
|
||||
seachForm.title = "";
|
||||
seachForm.publishDeptName = "";
|
||||
// search();
|
||||
};
|
||||
const createFlag = ref(false);
|
||||
|
||||
const create = () => {
|
||||
createFlag.value = true;
|
||||
// search();
|
||||
};
|
||||
// const changeStatus = item => {
|
||||
// seachForm.status = item.id;
|
||||
// };
|
||||
const checkAll = ref(false);
|
||||
const indeterminate = ref(false);
|
||||
const value = ref<CheckboxValueType[]>([]);
|
||||
const cities = ref([
|
||||
{
|
||||
value: "Beijing",
|
||||
label: "Beijing"
|
||||
},
|
||||
{
|
||||
value: "Shanghai",
|
||||
label: "Shanghai"
|
||||
},
|
||||
{
|
||||
value: "Nanjing",
|
||||
label: "Nanjing"
|
||||
},
|
||||
{
|
||||
value: "Chengdu",
|
||||
label: "Chengdu"
|
||||
},
|
||||
{
|
||||
value: "Shenzhen",
|
||||
label: "Shenzhen"
|
||||
},
|
||||
{
|
||||
value: "Guangzhou",
|
||||
label: "Guangzhou"
|
||||
}
|
||||
]);
|
||||
|
||||
watch(value, val => {
|
||||
if (val.length === 0) {
|
||||
checkAll.value = false;
|
||||
indeterminate.value = false;
|
||||
} else if (val.length === cities.value.length) {
|
||||
checkAll.value = true;
|
||||
indeterminate.value = false;
|
||||
} else {
|
||||
indeterminate.value = true;
|
||||
}
|
||||
});
|
||||
|
||||
const handleCheckAll = (val: CheckboxValueType) => {
|
||||
indeterminate.value = false;
|
||||
if (val) {
|
||||
value.value = cities.value.map(_ => _.value);
|
||||
} else {
|
||||
value.value = [];
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="sublibrary_management app-main-content">
|
||||
<div class="seach">
|
||||
<div class="seach-title"><span>字典管理</span></div>
|
||||
<el-form :model="seachForm">
|
||||
<el-row>
|
||||
<el-form-item label="字典名称">
|
||||
<el-input v-model="seachForm.title" />
|
||||
</el-form-item>
|
||||
<el-button class="ml-8" @click="search" type="primary"
|
||||
>搜索</el-button
|
||||
>
|
||||
<el-button @click="reset">重置</el-button>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</div>
|
||||
<div class="main-table">
|
||||
<div class="main-table-header">
|
||||
<div class="header-btn">
|
||||
<el-button @click="create" type="primary">新建子库</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<pure-table
|
||||
showOverflowTooltip
|
||||
alignWhole="center"
|
||||
:data="dataList"
|
||||
:columns="columns"
|
||||
:header-cell-style="{
|
||||
background: 'var(--el-table-row-hover-bg-color)',
|
||||
color: 'var(--el-text-color-primary)'
|
||||
}"
|
||||
>
|
||||
<template #operation="{ row }">
|
||||
<el-button link type="danger" @click="handleDelete(row)">
|
||||
删除
|
||||
</el-button>
|
||||
</template></pure-table
|
||||
>
|
||||
</div>
|
||||
<el-drawer
|
||||
v-model="createFlag"
|
||||
modal-class="drawer_content"
|
||||
:with-header="false"
|
||||
>
|
||||
<div class="drawer_header">
|
||||
<span>新建字典</span>
|
||||
</div>
|
||||
<div class="drawer_box">
|
||||
<el-form :model="dictionaryForm">
|
||||
<el-form-item label="字典名称">
|
||||
<el-input v-model="dictionaryForm.title" autocomplete="off" />
|
||||
</el-form-item>
|
||||
<el-form-item label="字典编码">
|
||||
<el-input v-model="dictionaryForm.title" autocomplete="off" />
|
||||
</el-form-item>
|
||||
<el-form-item label="关联部门">
|
||||
<el-select
|
||||
v-model="value"
|
||||
multiple
|
||||
clearable
|
||||
collapse-tags
|
||||
placeholder="Select"
|
||||
popper-class="custom-header"
|
||||
:max-collapse-tags="3"
|
||||
style="width: 240px"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in cities"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
<el-checkbox
|
||||
v-model="checkAll"
|
||||
:indeterminate="indeterminate"
|
||||
@change="handleCheckAll"
|
||||
>
|
||||
All
|
||||
</el-checkbox>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div class="drawer_footer">
|
||||
<el-button plain>重置</el-button>
|
||||
<el-button type="primary">确定</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</el-drawer>
|
||||
</div>
|
||||
</template>
|
||||
<style lang="scss" scoped>
|
||||
.sublibrary_management {
|
||||
.main-table {
|
||||
border-radius: 6px;
|
||||
|
||||
.main-table-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.el-drawer__body) {
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
.drawer_content {
|
||||
.drawer_header {
|
||||
box-sizing: border-box;
|
||||
height: 96px;
|
||||
padding: 24px;
|
||||
line-height: 65px;
|
||||
border-bottom: 1px solid #e9e9e9;
|
||||
|
||||
span {
|
||||
padding-left: 8px;
|
||||
font-size: 20px;
|
||||
border-left: 6px solid #0052d9;
|
||||
}
|
||||
}
|
||||
|
||||
.drawer_box {
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
height: calc(100vh - 96px);
|
||||
padding: 24px;
|
||||
|
||||
.drawer_footer {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue