From de658845a80a29d1ca0c77502a22bb060a8e00e0 Mon Sep 17 00:00:00 2001
From: autumnal_wind@yeah.net <autumnal_wind@yeah.net>
Date: 星期五, 24 五月 2024 15:08:25 +0800
Subject: [PATCH] feat: 参数管理功能改造
---
src/views/basis/sysParam/config/index.vue | 106 ++++++++++++++------------
src/views/basis/sysParam/config/DetailForm.vue | 93 +++++++++++++++++++++++
src/permission.ts | 1
3 files changed, 150 insertions(+), 50 deletions(-)
diff --git a/src/permission.ts b/src/permission.ts
index c819ff4..9cb12e6 100644
--- a/src/permission.ts
+++ b/src/permission.ts
@@ -8,6 +8,7 @@
import useUserStore from '@/store/modules/user';
import useSettingsStore from '@/store/modules/settings';
import usePermissionStore from '@/store/modules/permission';
+import {ElMessage} from "element-plus";
NProgress.configure({ showSpinner: false });
const whiteList = ['/login', '/register', '/social-callback'];
diff --git a/src/views/basis/sysParam/config/DetailForm.vue b/src/views/basis/sysParam/config/DetailForm.vue
new file mode 100644
index 0000000..83adb36
--- /dev/null
+++ b/src/views/basis/sysParam/config/DetailForm.vue
@@ -0,0 +1,93 @@
+<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-item label="参数名称" prop="configName">
+ <el-input v-model="formData.configName" placeholder="请输入参数名称"/>
+ </el-form-item>
+ <el-form-item label="参数键名" prop="configKey">
+ <el-input v-model="formData.configKey" placeholder="请输入参数键名"/>
+ </el-form-item>
+ <el-form-item label="参数键值" prop="configValue">
+ <el-input v-model="formData.configValue" placeholder="请输入参数键值"/>
+ </el-form-item>
+ <el-form-item label="系统内置" prop="configType">
+ <el-radio-group v-model="formData.configType">
+ <el-radio v-for="dict in sys_yes_no" :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="formData.remark" type="textarea" placeholder="请输入内容"/>
+ </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>
+ </dialog>
+ </div>
+</template>
+
+<script setup lang="ts">
+// 模块导入
+import {ConfigForm} from "@/api/system/config/types";
+import {getConfig} from "@/api/system/config";
+
+
+// 接收父组件传入属性
+// const props = defineProps({})
+
+// 当前组件属性
+const dialog = reactive<DialogOption>({
+ visible: false,
+ title: ''
+});
+// 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
+const formLoading = ref(false)
+// 表单的类型：create - 新增；update - 修改
+const formType = ref('')
+const configFormRef = ref<ElFormInstance>();
+const formData = ref<ConfigForm>({
+ configId: undefined,
+ configName: '',
+ configKey: '',
+ configValue: '',
+ configType: "Y",
+ remark: ''
+})
+// 当前组件方法
+const open = async (type: string, id?: number) => {
+ dialog.visible = true
+ dialog.title = type
+ formType.value = type
+ // resetForm()
+ // 修改时，设置数据
+ if (id) {
+ formLoading.value = true
+ try {
+ const res = await getConfig(id);
+ Object.assign(formData.value, res.data);
+ } finally {
+ formLoading.value = false
+ }
+ // } else {
+ // formData.value.ownerUserId = userId
+ // }
+ }
+}
+
+// 传回给父组件的属性与方法
+// 提供 open 方法，用于打开弹窗
+ defineExpose({open})
+
+// 触发父组件的事件
+// const emits = defineEmits([])
+
+// 初始化
+</script>
+
+<style scoped lang="scss">
+
+</style>
diff --git a/src/views/basis/sysParam/config/index.vue b/src/views/basis/sysParam/config/index.vue
index 7e2e161..a76030e 100644
--- a/src/views/basis/sysParam/config/index.vue
+++ b/src/views/basis/sysParam/config/index.vue
@@ -38,7 +38,7 @@
<template #header>
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
- <el-button type="primary" plain icon="Plus" @click="handleAdd" v-hasPermi="['system:config:add']">新增</el-button>
+ <el-button type="primary" plain icon="Plus" @click="openForm('create')" v-hasPermi="['system:config:add']">新增</el-button>
</el-col>
<el-col :span="1.5">
<el-button type="success" plain icon="Edit" :disabled="single" @click="handleUpdate()" v-hasPermi="['system:config:edit']">
@@ -92,39 +92,41 @@
</el-card>
<!-- 添加或修改参数配置对话框 -->
- <el-dialog :title="dialog.title" v-model="dialog.visible" width="500px" append-to-body>
- <el-form ref="configFormRef" :model="form" :rules="rules" label-width="80px">
- <el-form-item label="参数名称" prop="configName">
- <el-input v-model="form.configName" placeholder="请输入参数名称" />
- </el-form-item>
- <el-form-item label="参数键名" prop="configKey">
- <el-input v-model="form.configKey" placeholder="请输入参数键名" />
- </el-form-item>
- <el-form-item label="参数键值" prop="configValue">
- <el-input v-model="form.configValue" placeholder="请输入参数键值" />
- </el-form-item>
- <el-form-item label="系统内置" prop="configType">
- <el-radio-group v-model="form.configType">
- <el-radio v-for="dict in sys_yes_no" :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-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>
+<!-- <el-dialog :title="dialog.title" v-model="dialog.visible" width="500px" append-to-body>-->
+<!-- <el-form ref="configFormRef" :model="form" :rules="rules" label-width="80px">-->
+<!-- <el-form-item label="参数名称" prop="configName">-->
+<!-- <el-input v-model="form.configName" placeholder="请输入参数名称" />-->
+<!-- </el-form-item>-->
+<!-- <el-form-item label="参数键名" prop="configKey">-->
+<!-- <el-input v-model="form.configKey" placeholder="请输入参数键名" />-->
+<!-- </el-form-item>-->
+<!-- <el-form-item label="参数键值" prop="configValue">-->
+<!-- <el-input v-model="form.configValue" placeholder="请输入参数键值" />-->
+<!-- </el-form-item>-->
+<!-- <el-form-item label="系统内置" prop="configType">-->
+<!-- <el-radio-group v-model="form.configType">-->
+<!-- <el-radio v-for="dict in sys_yes_no" :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-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>-->
+ <detail-form ref="detailFormRef" @success="getList"/>
</div>
</template>
<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 DetailForm from "@/views/basis/sysParam/config/DetailForm.vue";
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { sys_yes_no } = toRefs<any>(proxy?.useDict("sys_yes_no"));
@@ -138,12 +140,13 @@
const total = ref(0);
const dateRange = ref<[DateModelType, DateModelType]>(['', '']);
+const detailFormRef = ref();
const queryFormRef = ref<ElFormInstance>();
-const configFormRef = ref<ElFormInstance>();
-const dialog = reactive<DialogOption>({
- visible: false,
- title: ''
-});
+// const configFormRef = ref<ElFormInstance>();
+// const dialog = reactive<DialogOption>({
+// visible: false,
+// title: ''
+// });
const initFormData: ConfigForm = {
configId: undefined,
configName: '',
@@ -178,15 +181,18 @@
total.value = res.total;
loading.value = false;
}
+const openForm = (type: string, id?: number) => {
+ detailFormRef.value.open(type, id)
+}
/** 取消按钮 */
const cancel = () => {
reset();
- dialog.visible = false;
+ // dialog.visible = false;
}
/** 表单重置 */
const reset = () => {
form.value = { ...initFormData };
- configFormRef.value?.resetFields();
+ // configFormRef.value?.resetFields();
}
/** 搜索按钮操作 */
const handleQuery = () => {
@@ -208,28 +214,28 @@
/** 新增按钮操作 */
const handleAdd = () => {
reset();
- dialog.visible = true;
- dialog.title = "添加参数";
+ // dialog.visible = true;
+ // dialog.title = "添加参数";
}
/** 修改按钮操作 */
const handleUpdate = async (row?: ConfigVO) => {
reset();
- const configId = row?.configId || ids.value[0];
- const res = await getConfig(configId);
- Object.assign(form.value, res.data);
- dialog.visible = true;
- dialog.title = "修改参数";
+ // const configId = row?.configId || ids.value[0];
+ // const res = await getConfig(configId);
+ // Object.assign(form.value, res.data);
+ // dialog.visible = true;
+ // dialog.title = "修改参数";
}
/** 提交按钮 */
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;
- await 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) => {
--
Gitblit v1.8.0