From c13c622eac5551c6f099f148feb5256711ca34de Mon Sep 17 00:00:00 2001 From: 疯狂的狮子Li <15040126243@163.com> Date: 星期二, 11 七月 2023 21:03:01 +0800 Subject: [PATCH] !25 部分优化以及新增功能 Merge pull request !25 from ahaos/tspr --- src/views/system/config/index.vue | 208 ++++++++++++++++++++++++++-------------------------- 1 files changed, 104 insertions(+), 104 deletions(-) diff --git a/src/views/system/config/index.vue b/src/views/system/config/index.vue index 2f3efe0..8ed9f79 100644 --- a/src/views/system/config/index.vue +++ b/src/views/system/config/index.vue @@ -1,38 +1,40 @@ <template> <div class="p-2"> <transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave"> - <div class="search" v-show="showSearch"> - <el-form :model="queryParams" ref="queryFormRef" :inline="true" label-width="68px"> - <el-form-item label="鍙傛暟鍚嶇О" prop="configName"> - <el-input v-model="queryParams.configName" placeholder="璇疯緭鍏ュ弬鏁板悕绉�" clearable style="width: 240px" @keyup.enter="handleQuery" /> - </el-form-item> - <el-form-item label="鍙傛暟閿悕" prop="configKey"> - <el-input v-model="queryParams.configKey" placeholder="璇疯緭鍏ュ弬鏁伴敭鍚�" clearable style="width: 240px" @keyup.enter="handleQuery" /> - </el-form-item> - <el-form-item label="绯荤粺鍐呯疆" prop="configType"> - <el-select v-model="queryParams.configType" placeholder="绯荤粺鍐呯疆" clearable> - <el-option v-for="dict in sys_yes_no" :key="dict.value" :label="dict.label" :value="dict.value" /> - </el-select> - </el-form-item> - <el-form-item label="鍒涘缓鏃堕棿" style="width: 308px;"> - <el-date-picker - v-model="dateRange" - value-format="YYYY-MM-DD HH:mm:ss" - type="daterange" - range-separator="-" - start-placeholder="寮�濮嬫棩鏈�" - end-placeholder="缁撴潫鏃ユ湡" - :default-time="[new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 1, 1, 23, 59, 59)]" - ></el-date-picker> - </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> + <div class="mb-[10px]" v-show="showSearch"> + <el-card shadow="hover"> + <el-form :model="queryParams" ref="queryFormRef" :inline="true" label-width="68px"> + <el-form-item label="鍙傛暟鍚嶇О" prop="configName"> + <el-input v-model="queryParams.configName" placeholder="璇疯緭鍏ュ弬鏁板悕绉�" clearable style="width: 240px" @keyup.enter="handleQuery" /> + </el-form-item> + <el-form-item label="鍙傛暟閿悕" prop="configKey"> + <el-input v-model="queryParams.configKey" placeholder="璇疯緭鍏ュ弬鏁伴敭鍚�" clearable style="width: 240px" @keyup.enter="handleQuery" /> + </el-form-item> + <el-form-item label="绯荤粺鍐呯疆" prop="configType"> + <el-select v-model="queryParams.configType" placeholder="绯荤粺鍐呯疆" clearable> + <el-option v-for="dict in sys_yes_no" :key="dict.value" :label="dict.label" :value="dict.value" /> + </el-select> + </el-form-item> + <el-form-item label="鍒涘缓鏃堕棿" style="width: 308px;"> + <el-date-picker + v-model="dateRange" + value-format="YYYY-MM-DD HH:mm:ss" + type="daterange" + range-separator="-" + start-placeholder="寮�濮嬫棩鏈�" + end-placeholder="缁撴潫鏃ユ湡" + :default-time="[new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 1, 1, 23, 59, 59)]" + ></el-date-picker> + </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="never"> + <el-card shadow="hover"> <template #header> <el-row :gutter="10" class="mb8"> <el-col :span="1.5"> @@ -123,8 +125,6 @@ <script setup name="Config" lang="ts"> import { listConfig, getConfig, delConfig, addConfig, updateConfig, refreshCache } from "@/api/system/config"; import { ConfigForm, ConfigQuery, ConfigVO } from "@/api/system/config/types"; -import { ComponentInternalInstance } from "vue"; -import { DateModelType } from 'element-plus'; const { proxy } = getCurrentInstance() as ComponentInternalInstance; const { sys_yes_no } = toRefs<any>(proxy?.useDict("sys_yes_no")); @@ -138,124 +138,124 @@ const total = ref(0); const dateRange = ref<[DateModelType, DateModelType]>(['', '']); -const queryFormRef = ref(ElForm); -const configFormRef = ref(ElForm); +const queryFormRef = ref<ElFormInstance>(); +const configFormRef = ref<ElFormInstance>(); const dialog = reactive<DialogOption>({ - visible: false, - title: '' + visible: false, + title: '' }); const initFormData: ConfigForm = { - configId: undefined, - configName: '', - configKey: '', - configValue: '', - configType: "Y", - remark: '' + configId: undefined, + configName: '', + configKey: '', + configValue: '', + configType: "Y", + remark: '' } const data = reactive<PageData<ConfigForm, ConfigQuery>>({ - form: {...initFormData}, - queryParams: { - pageNum: 1, - pageSize: 10, - configName: '', - configKey: '', - configType: '', - }, - rules: { - configName: [{ required: true, message: "鍙傛暟鍚嶇О涓嶈兘涓虹┖", trigger: "blur" }], - configKey: [{ required: true, message: "鍙傛暟閿悕涓嶈兘涓虹┖", trigger: "blur" }], - configValue: [{ required: true, message: "鍙傛暟閿�间笉鑳戒负绌�", trigger: "blur" }] - } + form: { ...initFormData }, + queryParams: { + pageNum: 1, + pageSize: 10, + configName: '', + configKey: '', + configType: '', + }, + rules: { + configName: [{ required: true, message: "鍙傛暟鍚嶇О涓嶈兘涓虹┖", trigger: "blur" }], + configKey: [{ required: true, message: "鍙傛暟閿悕涓嶈兘涓虹┖", trigger: "blur" }], + configValue: [{ required: true, message: "鍙傛暟閿�间笉鑳戒负绌�", trigger: "blur" }] + } }); const { queryParams, form, rules } = toRefs(data); /** 鏌ヨ鍙傛暟鍒楄〃 */ const getList = async () => { - loading.value = true; - const res = await listConfig(proxy?.addDateRange(queryParams.value, dateRange.value)); - configList.value = res.rows; - total.value = res.total; - loading.value = false; + loading.value = true; + const res = await listConfig(proxy?.addDateRange(queryParams.value, dateRange.value)); + configList.value = res.rows; + total.value = res.total; + loading.value = false; } /** 鍙栨秷鎸夐挳 */ const cancel = () => { - reset(); - dialog.visible = false; + reset(); + dialog.visible = false; } /** 琛ㄥ崟閲嶇疆 */ const reset = () => { - form.value = {...initFormData}; - configFormRef.value.resetFields(); + form.value = { ...initFormData }; + configFormRef.value?.resetFields(); } /** 鎼滅储鎸夐挳鎿嶄綔 */ const handleQuery = () => { - queryParams.value.pageNum = 1; - getList(); + queryParams.value.pageNum = 1; + getList(); } /** 閲嶇疆鎸夐挳鎿嶄綔 */ const resetQuery = () => { - dateRange.value = ['', '']; - queryFormRef.value.resetFields(); - handleQuery(); + dateRange.value = ['', '']; + queryFormRef.value?.resetFields(); + handleQuery(); } /** 澶氶�夋閫変腑鏁版嵁 */ const handleSelectionChange = (selection: ConfigVO[]) => { - ids.value = selection.map(item => item.configId); - single.value = selection.length != 1; - multiple.value = !selection.length; + ids.value = selection.map(item => item.configId); + single.value = selection.length != 1; + multiple.value = !selection.length; } /** 鏂板鎸夐挳鎿嶄綔 */ const handleAdd = () => { - dialog.visible = true; - dialog.title = "娣诲姞鍙傛暟"; - nextTick(() => { - reset(); - }) + dialog.visible = true; + dialog.title = "娣诲姞鍙傛暟"; + nextTick(() => { + reset(); + }) } /** 淇敼鎸夐挳鎿嶄綔 */ const handleUpdate = (row?: ConfigVO) => { - dialog.visible = true; - dialog.title = "淇敼鍙傛暟"; - const configId = row?.configId || ids.value[0]; - nextTick(async () => { - reset(); - const res = await getConfig(configId); - form.value = res.data; - }) + dialog.visible = true; + dialog.title = "淇敼鍙傛暟"; + const configId = row?.configId || ids.value[0]; + nextTick(async () => { + reset(); + const res = await getConfig(configId); + form.value = res.data; + }) } /** 鎻愪氦鎸夐挳 */ const submitForm = () => { - configFormRef.value.validate(async (valid: boolean) => { - if (valid) { - form.value.configId ? await updateConfig(form.value) : await addConfig(form.value); - proxy?.$modal.msgSuccess("鎿嶄綔鎴愬姛"); - dialog.visible = false; - getList(); - } - }); + configFormRef.value?.validate(async (valid: boolean) => { + if (valid) { + form.value.configId ? await updateConfig(form.value) : await addConfig(form.value); + proxy?.$modal.msgSuccess("鎿嶄綔鎴愬姛"); + dialog.visible = false; + await getList(); + } + }); } /** 鍒犻櫎鎸夐挳鎿嶄綔 */ const handleDelete = async (row?: ConfigVO) => { - const configIds = row?.configId || ids.value; - await proxy?.$modal.confirm('鏄惁纭鍒犻櫎鍙傛暟缂栧彿涓�"' + configIds + '"鐨勬暟鎹」锛�'); - await delConfig(configIds); - getList(); - proxy?.$modal.msgSuccess("鍒犻櫎鎴愬姛"); + const configIds = row?.configId || ids.value; + await proxy?.$modal.confirm('鏄惁纭鍒犻櫎鍙傛暟缂栧彿涓�"' + configIds + '"鐨勬暟鎹」锛�'); + await delConfig(configIds); + await getList(); + proxy?.$modal.msgSuccess("鍒犻櫎鎴愬姛"); } /** 瀵煎嚭鎸夐挳鎿嶄綔 */ const handleExport = () => { - proxy?.download("system/config/export", { - ...queryParams.value - }, `config_${new Date().getTime()}.xlsx`); + proxy?.download("system/config/export", { + ...queryParams.value + }, `config_${new Date().getTime()}.xlsx`); } /** 鍒锋柊缂撳瓨鎸夐挳鎿嶄綔 */ const handleRefreshCache = async () => { - await refreshCache(); - proxy?.$modal.msgSuccess("鍒锋柊缂撳瓨鎴愬姛"); + await refreshCache(); + proxy?.$modal.msgSuccess("鍒锋柊缂撳瓨鎴愬姛"); } onMounted(() => { - getList(); + getList(); }) </script> -- Gitblit v1.9.3