From 15bfb77bbce8190992271b2c0ff2ea8ab2ba7996 Mon Sep 17 00:00:00 2001
From: autumnal_wind@yeah.net <autumnal_wind@yeah.net>
Date: 星期五, 24 五月 2024 15:53:30 +0800
Subject: [PATCH] feat: 参数管理功能改造
---
src/views/basis/sysParam/config/index.vue | 16 ++++----
src/views/basis/sysParam/config/DetailForm.vue | 68 +++++++++++++++++++++++++++-------
2 files changed, 62 insertions(+), 22 deletions(-)
diff --git a/src/views/basis/sysParam/config/DetailForm.vue b/src/views/basis/sysParam/config/DetailForm.vue
index 83adb36..a88a58e 100644
--- a/src/views/basis/sysParam/config/DetailForm.vue
+++ b/src/views/basis/sysParam/config/DetailForm.vue
@@ -1,7 +1,7 @@
<template>
<div class="p-2">
<dialog :title="dialog.title" :model="dialog.visible" width="500px">
- <el-form ref="configFormRef" :model="formData" :rules="rules" label-width="80px">
+ <el-form ref="formRef" :model="formData" :rules="formRules" label-width="80px" v-loading="formLoading">
<el-form-item label="参数名称" prop="configName">
<el-input v-model="formData.configName" placeholder="请输入参数名称"/>
</el-form-item>
@@ -22,8 +22,8 @@
</el-form>
<template #footer>
<div class="dialog-footer">
- <el-button type="primary" @click="submitForm">确 定</el-button>
- <el-button @click="cancel">取 消</el-button>
+ <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
+ <el-button @click="dialog.visible = false">取 消</el-button>
</div>
</template>
</dialog>
@@ -33,13 +33,14 @@
<script setup lang="ts">
// 模块导入
import {ConfigForm} from "@/api/system/config/types";
-import {getConfig} from "@/api/system/config";
+import {addConfig, getConfig, updateConfig} from "@/api/system/config";
// 接收父组件传入属性
// const props = defineProps({})
// 当前组件属性
+const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const dialog = reactive<DialogOption>({
visible: false,
title: ''
@@ -48,7 +49,7 @@
const formLoading = ref(false)
// 表单的类型：create - 新增；update - 修改
const formType = ref('')
-const configFormRef = ref<ElFormInstance>();
+const formRef = ref<ElFormInstance>();
const formData = ref<ConfigForm>({
configId: undefined,
configName: '',
@@ -57,12 +58,19 @@
configType: "Y",
remark: ''
})
-// 当前组件方法
+const formRules = reactive({
+ configName: [{ required: true, message: "参数名称不能为空", trigger: "blur" }],
+ configKey: [{ required: true, message: "参数键名不能为空", trigger: "blur" }],
+ configValue: [{ required: true, message: "参数键值不能为空", trigger: "blur" }]
+})
+
+/** 当前组件方法 */
+/** 窗体打开事件 */
const open = async (type: string, id?: number) => {
dialog.visible = true
dialog.title = type
formType.value = type
- // resetForm()
+ resetForm()
// 修改时，设置数据
if (id) {
formLoading.value = true
@@ -72,19 +80,51 @@
} finally {
formLoading.value = false
}
- // } else {
- // formData.value.ownerUserId = userId
- // }
}
}
-
+/** 重置表单 */
+const resetForm = () => {
+ formData.value = {
+ configId: undefined,
+ configName: '',
+ configKey: '',
+ configValue: '',
+ configType: "Y",
+ remark: ''
+ }
+ formRef.value?.resetFields()
+}
// 传回给父组件的属性与方法
// 提供 open 方法，用于打开弹窗
defineExpose({open})
-// 触发父组件的事件
-// const emits = defineEmits([])
-
+/** 触发父组件的事件 */
+/** 定义 success 事件，用于操作成功后的回调 */
+const emit = defineEmits(['success'])
+/** 提交窗体 */
+const submitForm = async () => {
+ // 校验表单
+ if (!formRef) return
+ const valid = await formRef.value?.validate()
+ if (!valid) return
+ // 提交请求
+ formLoading.value = true
+ try {
+ const data = formData.value as unknown as ConfigForm
+ if (formType.value === 'create') {
+ await addConfig(data)
+ proxy?.$modal.msgSuccess("新增参数成功");
+ } else {
+ await updateConfig(data)
+ proxy?.$modal.msgSuccess("修改参数成功");
+ }
+ dialog.visible = false
+ // 发送操作成功的事件
+ emit('success')
+ } finally {
+ formLoading.value = false
+ }
+}
// 初始化
</script>
diff --git a/src/views/basis/sysParam/config/index.vue b/src/views/basis/sysParam/config/index.vue
index a76030e..7e5a525 100644
--- a/src/views/basis/sysParam/config/index.vue
+++ b/src/views/basis/sysParam/config/index.vue
@@ -185,10 +185,10 @@
detailFormRef.value.open(type, id)
}
/** 取消按钮 */
-const cancel = () => {
- reset();
+// const cancel = () => {
+// reset();
// dialog.visible = false;
-}
+// }
/** 表单重置 */
const reset = () => {
form.value = { ...initFormData };
@@ -212,11 +212,11 @@
multiple.value = !selection.length;
}
/** 新增按钮操作 */
-const handleAdd = () => {
- reset();
+// const handleAdd = () => {
+// reset();
// dialog.visible = true;
// dialog.title = "添加参数";
-}
+// }
/** 修改按钮操作 */
const handleUpdate = async (row?: ConfigVO) => {
reset();
@@ -227,7 +227,7 @@
// dialog.title = "修改参数";
}
/** 提交按钮 */
-const submitForm = () => {
+// const submitForm = () => {
// configFormRef.value?.validate(async (valid: boolean) => {
// if (valid) {
// form.value.configId ? await updateConfig(form.value) : await addConfig(form.value);
@@ -236,7 +236,7 @@
// await getList();
// }
// });
-}
+// }
/** 删除按钮操作 */
const handleDelete = async (row?: ConfigVO) => {
const configIds = row?.configId || ids.value;
--
Gitblit v1.8.0