|
|
|
|
@ -1,50 +1,66 @@
|
|
|
|
|
<script setup lang="ts">
|
|
|
|
|
import { reactive, ref, watch } from "vue";
|
|
|
|
|
import type { CheckboxValueType } from "element-plus";
|
|
|
|
|
import { onMounted, reactive, ref, watch } from "vue";
|
|
|
|
|
import type { CheckboxValueType, FormInstance, FormRules } from "element-plus";
|
|
|
|
|
import { useColumns } from "./columns";
|
|
|
|
|
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
|
|
|
|
|
import {
|
|
|
|
|
getDicManageList,
|
|
|
|
|
createSaveDic,
|
|
|
|
|
queryDicDateList,
|
|
|
|
|
createSaveDicData,
|
|
|
|
|
deleteDicManage
|
|
|
|
|
} from "@/api/system";
|
|
|
|
|
import { message } from "@/utils/message";
|
|
|
|
|
import AddFill from "@iconify-icons/ep/plus";
|
|
|
|
|
import Delete from "@iconify-icons/ep/delete";
|
|
|
|
|
defineOptions({
|
|
|
|
|
name: "DictionaryManagement"
|
|
|
|
|
});
|
|
|
|
|
const { columns1, dataList1, onAdd, onDel } = useColumns();
|
|
|
|
|
const { columns1, dicDataReqVos, onAdd, onDel } = useColumns();
|
|
|
|
|
const seachForm = reactive({
|
|
|
|
|
title: "",
|
|
|
|
|
publishDeptName: "",
|
|
|
|
|
status: ""
|
|
|
|
|
dicName: "",
|
|
|
|
|
dicCode: ""
|
|
|
|
|
});
|
|
|
|
|
const dictionaryForm = reactive({
|
|
|
|
|
title: "",
|
|
|
|
|
code: "",
|
|
|
|
|
desc: ""
|
|
|
|
|
id: "",
|
|
|
|
|
dicName: "",
|
|
|
|
|
dicCode: "",
|
|
|
|
|
remark: ""
|
|
|
|
|
});
|
|
|
|
|
const rules = reactive<FormRules>({
|
|
|
|
|
dicName: [{ required: true, message: "请输入", trigger: "blur" }],
|
|
|
|
|
dicCode: [{ required: true, message: "请输入", trigger: "blur" }]
|
|
|
|
|
});
|
|
|
|
|
const ruleCreateFormRef = ref<FormInstance>();
|
|
|
|
|
const ruleConfigFormRef = ref<FormInstance>();
|
|
|
|
|
const pagination = reactive({
|
|
|
|
|
total: 0,
|
|
|
|
|
pageSize: 10,
|
|
|
|
|
currentPage: 1,
|
|
|
|
|
align: "center",
|
|
|
|
|
layout: "total, prev, pager, next, jumper",
|
|
|
|
|
background: true
|
|
|
|
|
});
|
|
|
|
|
const columns: TableColumnList = [
|
|
|
|
|
{
|
|
|
|
|
label: "序号",
|
|
|
|
|
prop: "diseaseName"
|
|
|
|
|
slot: "index"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
label: "字典名称",
|
|
|
|
|
prop: "diseaseName"
|
|
|
|
|
prop: "dicName"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
label: "字典编码",
|
|
|
|
|
prop: "diseaseName"
|
|
|
|
|
prop: "dicCode"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
label: "备注",
|
|
|
|
|
prop: "diseaseName"
|
|
|
|
|
prop: "remark"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
label: "最新时间",
|
|
|
|
|
prop: "diseaseName"
|
|
|
|
|
prop: "createTime"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
label: "操作",
|
|
|
|
|
@ -57,23 +73,51 @@ const dataList = ref([]);
|
|
|
|
|
const search = () => {
|
|
|
|
|
pagination.currentPage = 1;
|
|
|
|
|
pagination.pageSize = 10;
|
|
|
|
|
getTableData();
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
const reset = () => {
|
|
|
|
|
seachForm.title = "";
|
|
|
|
|
seachForm.publishDeptName = "";
|
|
|
|
|
// search();
|
|
|
|
|
seachForm.dicName = "";
|
|
|
|
|
seachForm.dicCode = "";
|
|
|
|
|
search();
|
|
|
|
|
};
|
|
|
|
|
const createFlag = ref(false);
|
|
|
|
|
const updateFlag = ref(false);
|
|
|
|
|
const deleteFormVisible = ref(false);
|
|
|
|
|
|
|
|
|
|
const create = () => {
|
|
|
|
|
updateFlag.value = true;
|
|
|
|
|
createFlag.value = true;
|
|
|
|
|
// search();
|
|
|
|
|
};
|
|
|
|
|
// const changeStatus = item => {
|
|
|
|
|
// seachForm.status = item.id;
|
|
|
|
|
// };
|
|
|
|
|
/**
|
|
|
|
|
* 字典列表查询
|
|
|
|
|
*/
|
|
|
|
|
const getTableData = async () => {
|
|
|
|
|
const res: any = await getDicManageList({
|
|
|
|
|
dicName: seachForm.dicName,
|
|
|
|
|
dicCode: seachForm.dicCode,
|
|
|
|
|
pageNum: pagination.currentPage,
|
|
|
|
|
pageSize: pagination.pageSize
|
|
|
|
|
});
|
|
|
|
|
if (res.code === 200) {
|
|
|
|
|
dataList.value = res.data.records;
|
|
|
|
|
pagination.total = res.data.total;
|
|
|
|
|
}
|
|
|
|
|
console.log(res);
|
|
|
|
|
};
|
|
|
|
|
const handleConfig = async (value: any) => {
|
|
|
|
|
console.log(value);
|
|
|
|
|
// updateFlag.value = true;
|
|
|
|
|
const res: any = await queryDicDateList({
|
|
|
|
|
dicId: value.id
|
|
|
|
|
});
|
|
|
|
|
if (res.code === 200) {
|
|
|
|
|
(dictionaryForm.id = value.id), (dictionaryForm.dicName = value.dicName);
|
|
|
|
|
dicDataReqVos.value = res.data;
|
|
|
|
|
updateFlag.value = true;
|
|
|
|
|
}
|
|
|
|
|
// console.log(res);
|
|
|
|
|
};
|
|
|
|
|
const checkAll = ref(false);
|
|
|
|
|
const indeterminate = ref(false);
|
|
|
|
|
const value = ref<CheckboxValueType[]>([]);
|
|
|
|
|
@ -115,6 +159,89 @@ watch(value, val => {
|
|
|
|
|
indeterminate.value = true;
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
const submitForm = async (formEl: FormInstance | undefined) => {
|
|
|
|
|
if (!formEl) return;
|
|
|
|
|
await formEl.validate((valid, fields) => {
|
|
|
|
|
if (valid) {
|
|
|
|
|
console.log(valid);
|
|
|
|
|
const createForm = {
|
|
|
|
|
id: "",
|
|
|
|
|
dicName: dictionaryForm.dicName,
|
|
|
|
|
dicCode: dictionaryForm.dicCode,
|
|
|
|
|
remark: dictionaryForm.remark
|
|
|
|
|
};
|
|
|
|
|
createSaveDic(createForm).then(res => {
|
|
|
|
|
if (res.code === 200) {
|
|
|
|
|
message("新建成功", { type: "success" });
|
|
|
|
|
createFlag.value = false;
|
|
|
|
|
search();
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
} else {
|
|
|
|
|
console.log("error submit!", fields);
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
};
|
|
|
|
|
const resetForm = (formEl: FormInstance | undefined) => {
|
|
|
|
|
if (!formEl) return;
|
|
|
|
|
formEl.resetFields();
|
|
|
|
|
};
|
|
|
|
|
const submitConfigForm = async (formEl: FormInstance | undefined) => {
|
|
|
|
|
if (!formEl) return;
|
|
|
|
|
await formEl.validate((valid, fields) => {
|
|
|
|
|
if (valid) {
|
|
|
|
|
// console.log(valid);
|
|
|
|
|
// console.log(dicDataReqVos.value);
|
|
|
|
|
const createForm = {
|
|
|
|
|
dicId: dictionaryForm.id,
|
|
|
|
|
dicDataReqVos: dicDataReqVos.value.map(item => {
|
|
|
|
|
return {
|
|
|
|
|
dicLabel: item.dicLabel,
|
|
|
|
|
dicValue: item.dicValue,
|
|
|
|
|
dicSort: item.dicSort
|
|
|
|
|
};
|
|
|
|
|
})
|
|
|
|
|
};
|
|
|
|
|
createSaveDicData(createForm).then(res => {
|
|
|
|
|
if (res.code === 200) {
|
|
|
|
|
message("保存成功", { type: "success" });
|
|
|
|
|
updateFlag.value = false;
|
|
|
|
|
search();
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
} else {
|
|
|
|
|
console.log("error submit!", fields);
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
};
|
|
|
|
|
const resetConfigForm = (formEl: FormInstance | undefined) => {
|
|
|
|
|
if (!formEl) return;
|
|
|
|
|
formEl.resetFields();
|
|
|
|
|
};
|
|
|
|
|
const handleDelete = (value: any) => {
|
|
|
|
|
deleteFormVisible.value = true;
|
|
|
|
|
dictionaryForm.id = value.id;
|
|
|
|
|
};
|
|
|
|
|
const deleteForm = () => {
|
|
|
|
|
deleteDicManage({
|
|
|
|
|
id: dictionaryForm.id
|
|
|
|
|
}).then(res => {
|
|
|
|
|
if (res.code === 200) {
|
|
|
|
|
message("删除成功", { type: "success" });
|
|
|
|
|
deleteFormVisible.value = false;
|
|
|
|
|
search();
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
};
|
|
|
|
|
function onCurrentChange(page: number) {
|
|
|
|
|
// console.log("onCurrentChange", page);
|
|
|
|
|
pagination.currentPage = page;
|
|
|
|
|
pagination.pageSize = 10;
|
|
|
|
|
getTableData();
|
|
|
|
|
}
|
|
|
|
|
onMounted(() => {
|
|
|
|
|
search();
|
|
|
|
|
});
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<template>
|
|
|
|
|
@ -124,7 +251,7 @@ watch(value, val => {
|
|
|
|
|
<el-form :model="seachForm">
|
|
|
|
|
<el-row>
|
|
|
|
|
<el-form-item label="字典名称">
|
|
|
|
|
<el-input v-model="seachForm.title" />
|
|
|
|
|
<el-input v-model="seachForm.dicName" />
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-button class="ml-8" @click="search" type="primary"
|
|
|
|
|
>搜索</el-button
|
|
|
|
|
@ -144,16 +271,26 @@ watch(value, val => {
|
|
|
|
|
alignWhole="center"
|
|
|
|
|
:data="dataList"
|
|
|
|
|
:columns="columns"
|
|
|
|
|
adaptive
|
|
|
|
|
:header-cell-style="{
|
|
|
|
|
background: 'var(--el-table-row-hover-bg-color)',
|
|
|
|
|
color: 'var(--el-text-color-primary)'
|
|
|
|
|
}"
|
|
|
|
|
:pagination="pagination"
|
|
|
|
|
@page-current-change="onCurrentChange"
|
|
|
|
|
>
|
|
|
|
|
<!-- <template #operation="{ row }">
|
|
|
|
|
<template #index="{ index }">
|
|
|
|
|
<span>{{ index + 1 }}</span>
|
|
|
|
|
</template>
|
|
|
|
|
<template #operation="{ row }">
|
|
|
|
|
<el-button link type="primary" @click="handleConfig(row)">
|
|
|
|
|
配置
|
|
|
|
|
</el-button>
|
|
|
|
|
<span>|</span>
|
|
|
|
|
<el-button link type="danger" @click="handleDelete(row)">
|
|
|
|
|
删除
|
|
|
|
|
</el-button>
|
|
|
|
|
</template> -->
|
|
|
|
|
</template>
|
|
|
|
|
</pure-table>
|
|
|
|
|
</div>
|
|
|
|
|
<el-drawer
|
|
|
|
|
@ -165,20 +302,29 @@ watch(value, val => {
|
|
|
|
|
<span>新建字典</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="drawer_box">
|
|
|
|
|
<el-form :model="dictionaryForm" label-width="auto">
|
|
|
|
|
<el-form-item label="字典名称">
|
|
|
|
|
<el-input v-model="dictionaryForm.title" autocomplete="off" />
|
|
|
|
|
<el-form
|
|
|
|
|
:model="dictionaryForm"
|
|
|
|
|
label-width="auto"
|
|
|
|
|
ref="ruleCreateFormRef"
|
|
|
|
|
:rules="rules"
|
|
|
|
|
>
|
|
|
|
|
<el-form-item label="字典名称" prop="dicName">
|
|
|
|
|
<el-input v-model="dictionaryForm.dicName" autocomplete="off" />
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item label="字典编码">
|
|
|
|
|
<el-input v-model="dictionaryForm.code" autocomplete="off" />
|
|
|
|
|
<el-form-item label="字典编码" prop="dicCode">
|
|
|
|
|
<el-input v-model="dictionaryForm.dicCode" autocomplete="off" />
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item label="备注">
|
|
|
|
|
<el-input v-model="dictionaryForm.desc" type="textarea" />
|
|
|
|
|
<el-input v-model="dictionaryForm.remark" type="textarea" />
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</el-form>
|
|
|
|
|
<div class="drawer_footer">
|
|
|
|
|
<el-button plain>重置</el-button>
|
|
|
|
|
<el-button type="primary">确定</el-button>
|
|
|
|
|
<el-button plain @click="resetForm(ruleCreateFormRef)"
|
|
|
|
|
>重置</el-button
|
|
|
|
|
>
|
|
|
|
|
<el-button type="primary" @click="submitForm(ruleCreateFormRef)"
|
|
|
|
|
>确定</el-button
|
|
|
|
|
>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</el-drawer>
|
|
|
|
|
@ -188,12 +334,21 @@ watch(value, val => {
|
|
|
|
|
:with-header="false"
|
|
|
|
|
>
|
|
|
|
|
<div class="drawer_header">
|
|
|
|
|
<span>新建字典</span>
|
|
|
|
|
<span>配置字典</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="drawer_box">
|
|
|
|
|
<el-form :model="dictionaryForm" label-width="auto">
|
|
|
|
|
<el-form-item label="字典名称">
|
|
|
|
|
<el-input v-model="dictionaryForm.title" autocomplete="off" />
|
|
|
|
|
<el-form
|
|
|
|
|
:model="dictionaryForm"
|
|
|
|
|
label-width="auto"
|
|
|
|
|
:rules="rules"
|
|
|
|
|
ref="ruleConfigFormRef"
|
|
|
|
|
>
|
|
|
|
|
<el-form-item label="字典名称" prop="dicName">
|
|
|
|
|
<el-input
|
|
|
|
|
v-model="dictionaryForm.dicName"
|
|
|
|
|
autocomplete="off"
|
|
|
|
|
disabled
|
|
|
|
|
/>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<div>
|
|
|
|
|
<pure-table
|
|
|
|
|
@ -203,7 +358,7 @@ watch(value, val => {
|
|
|
|
|
background: 'var(--el-fill-color-light)',
|
|
|
|
|
color: 'var(--el-text-color-primary)'
|
|
|
|
|
}"
|
|
|
|
|
:data="dataList1"
|
|
|
|
|
:data="dicDataReqVos"
|
|
|
|
|
:columns="columns1"
|
|
|
|
|
>
|
|
|
|
|
<!-- <template #empty>
|
|
|
|
|
@ -232,11 +387,38 @@ watch(value, val => {
|
|
|
|
|
</div>
|
|
|
|
|
</el-form>
|
|
|
|
|
<div class="drawer_footer">
|
|
|
|
|
<el-button plain>重置</el-button>
|
|
|
|
|
<el-button type="primary">确定</el-button>
|
|
|
|
|
<el-button plain @click="resetConfigForm(ruleConfigFormRef)"
|
|
|
|
|
>重置</el-button
|
|
|
|
|
>
|
|
|
|
|
<el-button type="primary" @click="submitConfigForm(ruleConfigFormRef)"
|
|
|
|
|
>确定</el-button
|
|
|
|
|
>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</el-drawer>
|
|
|
|
|
<!-- 删除弹框 -->
|
|
|
|
|
<el-dialog
|
|
|
|
|
v-model="deleteFormVisible"
|
|
|
|
|
title="Shipping address"
|
|
|
|
|
width="500"
|
|
|
|
|
:show-close="false"
|
|
|
|
|
>
|
|
|
|
|
<template #header="{ titleId, titleClass }">
|
|
|
|
|
<div class="my-header_delete">
|
|
|
|
|
<h4 :id="titleId" :class="titleClass">
|
|
|
|
|
<div class="my_delete_icon" />
|
|
|
|
|
确认删除【字典】？
|
|
|
|
|
</h4>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
<div class="my_delete_body">删除后无法找回，此操作不可逆，请谨慎处理</div>
|
|
|
|
|
<template #footer>
|
|
|
|
|
<div class="dialog-footer_delete">
|
|
|
|
|
<el-button @click="deleteFormVisible = false">取消</el-button>
|
|
|
|
|
<el-button type="primary" @click="deleteForm"> 确定 </el-button>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
</el-dialog>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
|
@ -252,6 +434,10 @@ watch(value, val => {
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
:deep(.el-dialog) {
|
|
|
|
|
background: linear-gradient(180deg, #e1ecfe 0%, #fff 30%);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
:deep(.el-drawer__body) {
|
|
|
|
|
padding: 0 !important;
|
|
|
|
|
}
|
|
|
|
|
@ -285,5 +471,45 @@ watch(value, val => {
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
:deep(.el-dialog__body) {
|
|
|
|
|
padding: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.my-header_delete {
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: row;
|
|
|
|
|
gap: 16px;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
height: 74px;
|
|
|
|
|
padding: 24px 24px 0;
|
|
|
|
|
// border-bottom: 1px solid rgb(91 139 255 / 30%);
|
|
|
|
|
|
|
|
|
|
h4 {
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
|
|
|
|
|
.my_delete_icon {
|
|
|
|
|
display: block;
|
|
|
|
|
width: 28px;
|
|
|
|
|
height: 28px;
|
|
|
|
|
margin-right: 10px;
|
|
|
|
|
background-image: url("@/assets/home/tishi@2x.png");
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.my_delete_body {
|
|
|
|
|
text-align: center;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.dialog-footer_delete {
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
justify-content: flex-end;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
|
JINGYJ
11 months ago