From bbe94610a28e72414df1fb2b36a6d11385873e54 Mon Sep 17 00:00:00 2001 From: 疯狂的狮子Li <15040126243@163.com> Date: 星期一, 20 一月 2025 11:30:16 +0800 Subject: [PATCH] update 优化 parseTime 提示报错问题 --- src/views/system/dict/data.vue | 545 +++++++++++++++++++++++++----------------------------- 1 files changed, 252 insertions(+), 293 deletions(-) diff --git a/src/views/system/dict/data.vue b/src/views/system/dict/data.vue index fb97c60..3e9b0a1 100644 --- a/src/views/system/dict/data.vue +++ b/src/views/system/dict/data.vue @@ -1,350 +1,309 @@ <template> - <div class="app-container"> - <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch"> - <el-form-item label="瀛楀吀鍚嶇О" prop="dictType"> - <el-select v-model="queryParams.dictType" style="width: 200px"> - <el-option - v-for="item in typeOptions" - :key="item.dictId" - :label="item.dictName" - :value="item.dictType" - /> - </el-select> - </el-form-item> - <el-form-item label="瀛楀吀鏍囩" prop="dictLabel"> - <el-input - v-model="queryParams.dictLabel" - placeholder="璇疯緭鍏ュ瓧鍏告爣绛�" - clearable - style="width: 200px" - @keyup.enter="handleQuery" - /> - </el-form-item> - <el-form-item label="鐘舵��" prop="status"> - <el-select v-model="queryParams.status" placeholder="鏁版嵁鐘舵��" clearable style="width: 200px"> - <el-option - v-for="dict in sys_normal_disable" - :key="dict.value" - :label="dict.label" - :value="dict.value" - /> - </el-select> - </el-form-item> - <el-form-item> - <el-button type="primary" icon="Search" @click="handleQuery">鎼滅储</el-button> - <el-button icon="Refresh" @click="resetQuery">閲嶇疆</el-button> - </el-form-item> - </el-form> - - <el-row :gutter="10" class="mb8"> - <el-col :span="1.5"> - <el-button - type="primary" - plain - icon="Plus" - @click="handleAdd" - v-hasPermi="['system:dict:add']" - >鏂板</el-button> - </el-col> - <el-col :span="1.5"> - <el-button - type="success" - plain - icon="Edit" - :disabled="single" - @click="handleUpdate" - v-hasPermi="['system:dict:edit']" - >淇敼</el-button> - </el-col> - <el-col :span="1.5"> - <el-button - type="danger" - plain - icon="Delete" - :disabled="multiple" - @click="handleDelete" - v-hasPermi="['system:dict:remove']" - >鍒犻櫎</el-button> - </el-col> - <el-col :span="1.5"> - <el-button - type="warning" - plain - icon="Download" - @click="handleExport" - v-hasPermi="['system:dict:export']" - >瀵煎嚭</el-button> - </el-col> - <el-col :span="1.5"> - <el-button - type="warning" - plain - icon="Close" - @click="handleClose" - >鍏抽棴</el-button> - </el-col> - <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar> - </el-row> + <div class="p-2"> + <transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave"> + <div v-show="showSearch" class="mb-[10px]"> + <el-card shadow="hover"> + <el-form ref="queryFormRef" :model="queryParams" :inline="true"> + <el-form-item label="瀛楀吀鍚嶇О" prop="dictType"> + <el-select v-model="queryParams.dictType"> + <el-option v-for="item in typeOptions" :key="item.dictId" :label="item.dictName" :value="item.dictType" /> + </el-select> + </el-form-item> + <el-form-item label="瀛楀吀鏍囩" prop="dictLabel"> + <el-input v-model="queryParams.dictLabel" placeholder="璇疯緭鍏ュ瓧鍏告爣绛�" clearable @keyup.enter="handleQuery" /> + </el-form-item> + <el-form-item> + <el-button type="primary" icon="Search" @click="handleQuery">鎼滅储</el-button> + <el-button icon="Refresh" @click="resetQuery">閲嶇疆</el-button> + </el-form-item> + </el-form> + </el-card> + </div> + </transition> + <el-card shadow="hover"> + <template #header> + <el-row :gutter="10" class="mb8"> + <el-col :span="1.5"> + <el-button v-hasPermi="['system:dict:add']" type="primary" plain icon="Plus" @click="handleAdd">鏂板</el-button> + </el-col> + <el-col :span="1.5"> + <el-button v-hasPermi="['system:dict:edit']" type="success" plain icon="Edit" :disabled="single" @click="handleUpdate()">淇敼</el-button> + </el-col> + <el-col :span="1.5"> + <el-button v-hasPermi="['system:dict:remove']" type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete()"> + 鍒犻櫎 + </el-button> + </el-col> + <el-col :span="1.5"> + <el-button v-hasPermi="['system:dict:export']" type="warning" plain icon="Download" @click="handleExport">瀵煎嚭</el-button> + </el-col> + <el-col :span="1.5"> + <el-button type="warning" plain icon="Close" @click="handleClose">鍏抽棴</el-button> + </el-col> + <right-toolbar v-model:show-search="showSearch" @query-table="getList"></right-toolbar> + </el-row> + </template> <el-table v-loading="loading" :data="dataList" @selection-change="handleSelectionChange"> - <el-table-column type="selection" width="55" align="center" /> - <el-table-column label="瀛楀吀缂栫爜" align="center" prop="dictCode" v-if="false" /> - <el-table-column label="瀛楀吀鏍囩" align="center" prop="dictLabel"> - <template #default="scope"> - <span v-if="scope.row.listClass == '' || scope.row.listClass == 'default'">{{ scope.row.dictLabel }}</span> - <el-tag v-else :type="scope.row.listClass == 'primary' ? '' : scope.row.listClass">{{ scope.row.dictLabel }}</el-tag> - </template> - </el-table-column> - <el-table-column label="瀛楀吀閿��" align="center" prop="dictValue" /> - <el-table-column label="瀛楀吀鎺掑簭" align="center" prop="dictSort" /> - <el-table-column label="鐘舵��" align="center" prop="status"> - <template #default="scope"> - <dict-tag :options="sys_normal_disable" :value="scope.row.status" /> - </template> - </el-table-column> - <el-table-column label="澶囨敞" align="center" prop="remark" :show-overflow-tooltip="true" /> - <el-table-column label="鍒涘缓鏃堕棿" align="center" prop="createTime" width="180"> - <template #default="scope"> - <span>{{ parseTime(scope.row.createTime) }}</span> - </template> - </el-table-column> - <el-table-column label="鎿嶄綔" align="center" width="160" class-name="small-padding fixed-width"> - <template #default="scope"> - <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:dict:edit']">淇敼</el-button> - <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['system:dict:remove']">鍒犻櫎</el-button> - </template> - </el-table-column> + <el-table-column type="selection" width="55" align="center" /> + <el-table-column v-if="false" label="瀛楀吀缂栫爜" align="center" prop="dictCode" /> + <el-table-column label="瀛楀吀鏍囩" align="center" prop="dictLabel"> + <template #default="scope"> + <span + v-if="(scope.row.listClass === '' || scope.row.listClass === 'default') && (scope.row.cssClass === '' || scope.row.cssClass == null)" + >{{ scope.row.dictLabel }}</span + > + <el-tag + v-else + :type="scope.row.listClass === 'primary' || scope.row.listClass === 'default' ? 'primary' : scope.row.listClass" + :class="scope.row.cssClass" + >{{ scope.row.dictLabel }}</el-tag + > + </template> + </el-table-column> + <el-table-column label="瀛楀吀閿��" align="center" prop="dictValue" /> + <el-table-column label="瀛楀吀鎺掑簭" align="center" prop="dictSort" /> + <el-table-column label="澶囨敞" align="center" prop="remark" :show-overflow-tooltip="true" /> + <el-table-column label="鍒涘缓鏃堕棿" align="center" prop="createTime" width="180"> + <template #default="scope"> + <span>{{ proxy.parseTime(scope.row.createTime) }}</span> + </template> + </el-table-column> + <el-table-column label="鎿嶄綔" align="center" width="160" class-name="small-padding fixed-width"> + <template #default="scope"> + <el-tooltip content="淇敼" placement="top"> + <el-button v-hasPermi="['system:dict:edit']" link type="primary" icon="Edit" @click="handleUpdate(scope.row)"></el-button> + </el-tooltip> + <el-tooltip content="鍒犻櫎" placement="top"> + <el-button v-hasPermi="['system:dict:remove']" link type="primary" icon="Delete" @click="handleDelete(scope.row)"></el-button> + </el-tooltip> + </template> + </el-table-column> </el-table> - <pagination - v-show="total > 0" - :total="total" - v-model:page="queryParams.pageNum" - v-model:limit="queryParams.pageSize" - @pagination="getList" - /> - - <!-- 娣诲姞鎴栦慨鏀瑰弬鏁伴厤缃璇濇 --> - <el-dialog :title="title" v-model="open" width="500px" append-to-body> - <el-form ref="dataRef" :model="form" :rules="rules" label-width="80px"> - <el-form-item label="瀛楀吀绫诲瀷"> - <el-input v-model="form.dictType" :disabled="true" /> - </el-form-item> - <el-form-item label="鏁版嵁鏍囩" prop="dictLabel"> - <el-input v-model="form.dictLabel" placeholder="璇疯緭鍏ユ暟鎹爣绛�" /> - </el-form-item> - <el-form-item label="鏁版嵁閿��" prop="dictValue"> - <el-input v-model="form.dictValue" placeholder="璇疯緭鍏ユ暟鎹敭鍊�" /> - </el-form-item> - <el-form-item label="鏍峰紡灞炴��" prop="cssClass"> - <el-input v-model="form.cssClass" placeholder="璇疯緭鍏ユ牱寮忓睘鎬�" /> - </el-form-item> - <el-form-item label="鏄剧ず鎺掑簭" prop="dictSort"> - <el-input-number v-model="form.dictSort" controls-position="right" :min="0" /> - </el-form-item> - <el-form-item label="鍥炴樉鏍峰紡" prop="listClass"> - <el-select v-model="form.listClass"> - <el-option - v-for="item in listClassOptions" - :key="item.value" - :label="item.label + '(' + item.value + ')'" - :value="item.value" - ></el-option> - </el-select> - </el-form-item> - <el-form-item label="鐘舵��" prop="status"> - <el-radio-group v-model="form.status"> - <el-radio - v-for="dict in sys_normal_disable" - :key="dict.value" - :label="dict.value" - >{{ dict.label }}</el-radio> - </el-radio-group> - </el-form-item> - <el-form-item label="澶囨敞" prop="remark"> - <el-input v-model="form.remark" type="textarea" placeholder="璇疯緭鍏ュ唴瀹�"></el-input> - </el-form-item> - </el-form> - <template #footer> - <div class="dialog-footer"> - <el-button type="primary" @click="submitForm">纭� 瀹�</el-button> - <el-button @click="cancel">鍙� 娑�</el-button> - </div> - </template> - </el-dialog> - </div> + <pagination v-show="total > 0" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" :total="total" @pagination="getList" /> + </el-card> + <!-- 娣诲姞鎴栦慨鏀瑰弬鏁伴厤缃璇濇 --> + <el-dialog v-model="dialog.visible" :title="dialog.title" width="500px" append-to-body> + <el-form ref="dataFormRef" :model="form" :rules="rules" label-width="80px"> + <el-form-item label="瀛楀吀绫诲瀷"> + <el-input v-model="form.dictType" :disabled="true" /> + </el-form-item> + <el-form-item label="鏁版嵁鏍囩" prop="dictLabel"> + <el-input v-model="form.dictLabel" placeholder="璇疯緭鍏ユ暟鎹爣绛�" /> + </el-form-item> + <el-form-item label="鏁版嵁閿��" prop="dictValue"> + <el-input v-model="form.dictValue" placeholder="璇疯緭鍏ユ暟鎹敭鍊�" /> + </el-form-item> + <el-form-item label="鏍峰紡灞炴��" prop="cssClass"> + <el-input v-model="form.cssClass" placeholder="璇疯緭鍏ユ牱寮忓睘鎬�" /> + </el-form-item> + <el-form-item label="鏄剧ず鎺掑簭" prop="dictSort"> + <el-input-number v-model="form.dictSort" controls-position="right" :min="0" /> + </el-form-item> + <el-form-item label="鍥炴樉鏍峰紡" prop="listClass"> + <el-select v-model="form.listClass"> + <el-option + v-for="item in listClassOptions" + :key="item.value" + :label="item.label + '(' + item.value + ')'" + :value="item.value" + ></el-option> + </el-select> + </el-form-item> + <el-form-item label="澶囨敞" prop="remark"> + <el-input v-model="form.remark" type="textarea" placeholder="璇疯緭鍏ュ唴瀹�"></el-input> + </el-form-item> + </el-form> + <template #footer> + <div class="dialog-footer"> + <el-button type="primary" @click="submitForm">纭� 瀹�</el-button> + <el-button @click="cancel">鍙� 娑�</el-button> + </div> + </template> + </el-dialog> + </div> </template> -<script setup name="Data"> -import useDictStore from '@/store/modules/dict' -import { optionselect as getDictOptionselect, getType } from "@/api/system/dict/type"; -import { listData, getData, delData, addData, updateData } from "@/api/system/dict/data"; +<script setup name="Data" lang="ts"> +import useDictStore from '@/store/modules/dict'; +import { optionselect as getDictOptionselect, getType } from '@/api/system/dict/type'; +import { listData, getData, delData, addData, updateData } from '@/api/system/dict/data'; +import { DictTypeVO } from '@/api/system/dict/type/types'; +import { DictDataForm, DictDataQuery, DictDataVO } from '@/api/system/dict/data/types'; +import { RouteLocationNormalized } from 'vue-router'; -const { proxy } = getCurrentInstance(); -const { sys_normal_disable } = proxy.useDict("sys_normal_disable"); +const { proxy } = getCurrentInstance() as ComponentInternalInstance; +const route = useRoute(); -const dataList = ref([]); -const open = ref(false); +const dataList = ref<DictDataVO[]>([]); const loading = ref(true); const showSearch = ref(true); -const ids = ref([]); +const ids = ref<Array<string | number>>([]); const single = ref(true); const multiple = ref(true); const total = ref(0); -const title = ref(""); -const defaultDictType = ref(""); -const typeOptions = ref([]); -const route = useRoute(); +const defaultDictType = ref(''); +const typeOptions = ref<DictTypeVO[]>([]); + +const dataFormRef = ref<ElFormInstance>(); +const queryFormRef = ref<ElFormInstance>(); + +const dialog = reactive<DialogOption>({ + visible: false, + title: '' +}); + // 鏁版嵁鏍囩鍥炴樉鏍峰紡 -const listClassOptions = ref([ - { value: "default", label: "榛樿" }, - { value: "primary", label: "涓昏" }, - { value: "success", label: "鎴愬姛" }, - { value: "info", label: "淇℃伅" }, - { value: "warning", label: "璀﹀憡" }, - { value: "danger", label: "鍗遍櫓" } +const listClassOptions = ref<Array<{ value: string; label: string }>>([ + { value: 'default', label: '榛樿' }, + { value: 'primary', label: '涓昏' }, + { value: 'success', label: '鎴愬姛' }, + { value: 'info', label: '淇℃伅' }, + { value: 'warning', label: '璀﹀憡' }, + { value: 'danger', label: '鍗遍櫓' } ]); -const data = reactive({ - form: {}, +const initFormData: DictDataForm = { + dictCode: undefined, + dictLabel: '', + dictValue: '', + cssClass: '', + listClass: 'primary', + dictSort: 0, + remark: '' +}; +const data = reactive<PageData<DictDataForm, DictDataQuery>>({ + form: { ...initFormData }, queryParams: { pageNum: 1, pageSize: 10, - dictName: undefined, - dictType: undefined, - status: undefined + dictName: '', + dictType: '', + dictLabel: '' }, rules: { - dictLabel: [{ required: true, message: "鏁版嵁鏍囩涓嶈兘涓虹┖", trigger: "blur" }], - dictValue: [{ required: true, message: "鏁版嵁閿�间笉鑳戒负绌�", trigger: "blur" }], - dictSort: [{ required: true, message: "鏁版嵁椤哄簭涓嶈兘涓虹┖", trigger: "blur" }] + dictLabel: [{ required: true, message: '鏁版嵁鏍囩涓嶈兘涓虹┖', trigger: 'blur' }], + dictValue: [{ required: true, message: '鏁版嵁閿�间笉鑳戒负绌�', trigger: 'blur' }], + dictSort: [{ required: true, message: '鏁版嵁椤哄簭涓嶈兘涓虹┖', trigger: 'blur' }] } }); const { queryParams, form, rules } = toRefs(data); /** 鏌ヨ瀛楀吀绫诲瀷璇︾粏 */ -function getTypes(dictId) { - getType(dictId).then(response => { - queryParams.value.dictType = response.data.dictType; - defaultDictType.value = response.data.dictType; - getList(); - }); -} +const getTypes = async (dictId: string | number) => { + const { data } = await getType(dictId); + queryParams.value.dictType = data.dictType; + defaultDictType.value = data.dictType; + getList(); +}; /** 鏌ヨ瀛楀吀绫诲瀷鍒楄〃 */ -function getTypeList() { - getDictOptionselect().then(response => { - typeOptions.value = response.data; - }); -} +const getTypeList = async () => { + const res = await getDictOptionselect(); + typeOptions.value = res.data; +}; /** 鏌ヨ瀛楀吀鏁版嵁鍒楄〃 */ -function getList() { +const getList = async () => { loading.value = true; - listData(queryParams.value).then(response => { - dataList.value = response.rows; - total.value = response.total; - loading.value = false; - }); -} + const res = await listData(queryParams.value); + dataList.value = res.rows; + total.value = res.total; + loading.value = false; +}; /** 鍙栨秷鎸夐挳 */ -function cancel() { - open.value = false; +const cancel = () => { + dialog.visible = false; reset(); -} +}; /** 琛ㄥ崟閲嶇疆 */ -function reset() { - form.value = { - dictCode: undefined, - dictLabel: undefined, - dictValue: undefined, - cssClass: undefined, - listClass: "default", - dictSort: 0, - status: "0", - remark: undefined - }; - proxy.resetForm("dataRef"); -} +const reset = () => { + form.value = { ...initFormData }; + dataFormRef.value?.resetFields(); +}; /** 鎼滅储鎸夐挳鎿嶄綔 */ -function handleQuery() { +const handleQuery = () => { queryParams.value.pageNum = 1; getList(); -} +}; /** 杩斿洖鎸夐挳鎿嶄綔 */ -function handleClose() { - const obj = { path: "/system/dict" }; - proxy.$tab.closeOpenPage(obj); -} +const handleClose = () => { + const obj: RouteLocationNormalized = { + fullPath: '', + hash: '', + matched: [], + meta: undefined, + name: undefined, + params: undefined, + query: undefined, + redirectedFrom: undefined, + path: '/system/dict' + }; + proxy?.$tab.closeOpenPage(obj); +}; /** 閲嶇疆鎸夐挳鎿嶄綔 */ -function resetQuery() { - proxy.resetForm("queryRef"); - queryParams.value.dictType = defaultDictType; +const resetQuery = () => { + queryFormRef.value?.resetFields(); + queryParams.value.dictType = defaultDictType.value; handleQuery(); -} +}; /** 鏂板鎸夐挳鎿嶄綔 */ -function handleAdd() { +const handleAdd = () => { reset(); - open.value = true; - title.value = "娣诲姞瀛楀吀鏁版嵁"; form.value.dictType = queryParams.value.dictType; -} + dialog.visible = true; + dialog.title = '娣诲姞瀛楀吀鏁版嵁'; +}; /** 澶氶�夋閫変腑鏁版嵁 */ -function handleSelectionChange(selection) { - ids.value = selection.map(item => item.dictCode); +const handleSelectionChange = (selection: DictDataVO[]) => { + ids.value = selection.map((item) => item.dictCode); single.value = selection.length != 1; multiple.value = !selection.length; -} +}; /** 淇敼鎸夐挳鎿嶄綔 */ -function handleUpdate(row) { +const handleUpdate = async (row?: DictDataVO) => { reset(); - const dictCode = row.dictCode || ids.value; - getData(dictCode).then(response => { - form.value = response.data; - open.value = true; - title.value = "淇敼瀛楀吀鏁版嵁"; - }); -} + const dictCode = row?.dictCode || ids.value[0]; + const res = await getData(dictCode); + Object.assign(form.value, res.data); + dialog.visible = true; + dialog.title = '淇敼瀛楀吀鏁版嵁'; +}; /** 鎻愪氦鎸夐挳 */ -function submitForm() { - proxy.$refs["dataRef"].validate(valid => { +const submitForm = () => { + dataFormRef.value?.validate(async (valid: boolean) => { if (valid) { - if (form.value.dictCode != undefined) { - updateData(form.value).then(response => { - useDictStore().removeDict(queryParams.value.dictType); - proxy.$modal.msgSuccess("淇敼鎴愬姛"); - open.value = false; - getList(); - }); - } else { - addData(form.value).then(response => { - useDictStore().removeDict(queryParams.value.dictType); - proxy.$modal.msgSuccess("鏂板鎴愬姛"); - open.value = false; - getList(); - }); - } + form.value.dictCode ? await updateData(form.value) : await addData(form.value); + useDictStore().removeDict(queryParams.value.dictType); + proxy?.$modal.msgSuccess('鎿嶄綔鎴愬姛'); + dialog.visible = false; + await getList(); } }); -} +}; /** 鍒犻櫎鎸夐挳鎿嶄綔 */ -function handleDelete(row) { - const dictCodes = row.dictCode || ids.value; - proxy.$modal.confirm('鏄惁纭鍒犻櫎瀛楀吀缂栫爜涓�"' + dictCodes + '"鐨勬暟鎹」锛�').then(function() { - return delData(dictCodes); - }).then(() => { - getList(); - proxy.$modal.msgSuccess("鍒犻櫎鎴愬姛"); - useDictStore().removeDict(queryParams.value.dictType); - }).catch(() => {}); -} +const handleDelete = async (row?: DictDataVO) => { + const dictCodes = row?.dictCode || ids.value; + await proxy?.$modal.confirm('鏄惁纭鍒犻櫎瀛楀吀缂栫爜涓�"' + dictCodes + '"鐨勬暟鎹」锛�'); + await delData(dictCodes); + await getList(); + proxy?.$modal.msgSuccess('鍒犻櫎鎴愬姛'); + useDictStore().removeDict(queryParams.value.dictType); +}; /** 瀵煎嚭鎸夐挳鎿嶄綔 */ -function handleExport() { - proxy.download("system/dict/data/export", { - ...queryParams.value - }, `dict_data_${new Date().getTime()}.xlsx`); -} +const handleExport = () => { + proxy?.download( + 'system/dict/data/export', + { + ...queryParams.value + }, + `dict_data_${new Date().getTime()}.xlsx` + ); +}; -getTypes(route.params && route.params.dictId); -getTypeList(); +onMounted(() => { + getTypes(route.params && (route.params.dictId as string)); + getTypeList(); +}); </script> -- Gitblit v1.9.3