update:将“新增参数”和“编辑参数”以组件的形式分离出父组件

main/manager-web/src/apis/module/admin.js

@@ -57,6 +57,7 @@ export default {
                 })
             }).send()
     },
+    // 获取参数列表
     getParamsList(params, callback) {
         const queryParams = new URLSearchParams({
             page: params.page,
@@ -77,6 +78,7 @@ export default {
                 })
             }).send()
     },
+    // 保存
     addParam(data, callback) {
         RequestService.sendRequest()
             .url(`${getServiceUrl()}/admin/params`)
@@ -93,6 +95,7 @@ export default {
                 })
             }).send()
     },
+    // 修改
     updateParam(data, callback) {
         RequestService.sendRequest()
             .url(`${getServiceUrl()}/admin/params`)
@@ -109,6 +112,7 @@ export default {
                 })
             }).send()
     },
+    // 删除
     deleteParam(id, callback) {
         RequestService.sendRequest()
             .url(`${getServiceUrl()}/admin/params`)
@@ -125,6 +129,7 @@ export default {
                 })
             }).send()
     },
+    // 批量删除
     batchDeleteParams(ids, callback) {
         RequestService.sendRequest()
             .url(`${getServiceUrl()}/admin/params`)

main/manager-web/src/components/ParamDialog.vue

@@ -0,0 +1,73 @@
+<template>
+  <el-dialog :title="title" :visible.sync="visible" width="500px">
+    <el-form :model="form" :rules="rules" ref="form" label-width="100px">
+      <el-form-item label="参数编码" prop="paramCode">
+        <el-input v-model="form.paramCode" placeholder="请输入参数编码"></el-input>
+      </el-form-item>
+      <el-form-item label="参数值" prop="paramValue">
+        <el-input v-model="form.paramValue" placeholder="请输入参数值"></el-input>
+      </el-form-item>
+      <el-form-item label="备注" prop="remark">
+        <el-input type="textarea" v-model="form.remark" placeholder="请输入备注"></el-input>
+      </el-form-item>
+    </el-form>
+    <div slot="footer" class="dialog-footer">
+      <el-button @click="cancel">取 消</el-button>
+      <el-button type="primary" @click="submit">确 定</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+export default {
+  props: {
+    title: {
+      type: String,
+      default: '新增参数'
+    },
+    visible: {
+      type: Boolean,
+      default: false
+    },
+    form: {
+      type: Object,
+      default: () => ({
+        id: null,
+        paramCode: '',
+        paramValue: '',
+        remark: ''
+      })
+    }
+  },
+  data() {
+    return {
+      rules: {
+        paramCode: [
+          { required: true, message: "请输入参数编码", trigger: "blur" }
+        ],
+        paramValue: [
+          { required: true, message: "请输入参数值", trigger: "blur" }
+        ]
+      }
+    };
+  },
+  methods: {
+    submit() {
+      this.$refs.form.validate((valid) => {
+        if (valid) {
+          this.$emit('submit', this.form);
+        }
+      });
+    },
+    cancel() {
+      this.$emit('cancel');
+    }
+  }
+};
+</script>
+
+<style scoped>
+.dialog-footer {
+  text-align: right;
+}
+</style>

main/manager-web/src/views/ParamsManagement.vue

@@ -8,7 +8,6 @@
                 <el-input placeholder="请输入参数编码查询" v-model="searchCode" class="search-input"
                     @keyup.enter.native="handleSearch" />
                 <el-button class="btn-search" @click="handleSearch">搜索</el-button>
-                <el-button type="primary" @click="showAddDialog">新增参数</el-button>
             </div>
         </div>
 
@@ -36,6 +35,7 @@
                                     @click="handleSelectAll">全选</el-button>
                                 <el-button size="mini" type="danger" icon="el-icon-delete"
                                     @click="batchDelete">删除</el-button>
+                                <el-button size="mini" type="primary" @click="showAddDialog">新增参数</el-button>
                             </div>
                             <div class="custom-pagination">
                                 <button class="pagination-btn" :disabled="currentPage === 1" @click="goFirst">
@@ -60,23 +60,7 @@
         </div>
 
         <!-- 新增/编辑参数对话框 -->
-        <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="500px">
+        <param-dialog :title="dialogTitle" :visible.sync="dialogVisible" :form="paramForm" @submit="handleSubmit" @cancel="dialogVisible = false"/>
-            <el-form :model="paramForm" :rules="rules" ref="paramForm" label-width="100px">
-                <el-form-item label="参数编码" prop="paramCode">
-                    <el-input v-model="paramForm.paramCode" placeholder="请输入参数编码"></el-input>
-                </el-form-item>
-                <el-form-item label="参数值" prop="paramValue">
-                    <el-input v-model="paramForm.paramValue" placeholder="请输入参数值"></el-input>
-                </el-form-item>
-                <el-form-item label="备注" prop="remark">
-                    <el-input type="textarea" v-model="paramForm.remark" placeholder="请输入备注"></el-input>
-                </el-form-item>
-            </el-form>
-            <div slot="footer" class="dialog-footer">
-                <el-button @click="dialogVisible = false">取 消</el-button>
-                <el-button type="primary" @click="submitForm">确 定</el-button>
-            </div>
-        </el-dialog>
 
         <div class="copyright">©2025 xiaozhi-esp32-server</div>
     </div>
@@ -85,9 +69,10 @@
 <script>
 import Api from "@/apis/api";
 import HeaderBar from "@/components/HeaderBar.vue";
+import ParamDialog from "@/components/ParamDialog.vue";
 
 export default {
-    components: { HeaderBar },
+    components: { HeaderBar, ParamDialog },
     data() {
         return {
             searchCode: "",
@@ -102,14 +87,6 @@ export default {
                 paramCode: "",
                 paramValue: "",
                 remark: ""
-            },
-            rules: {
-                paramCode: [
-                    { required: true, message: "请输入参数编码", trigger: "blur" }
-                ],
-                paramValue: [
-                    { required: true, message: "请输入参数值", trigger: "blur" }
-                ]
             }
         };
     },
@@ -174,30 +151,26 @@ export default {
             this.paramForm = { ...row };
             this.dialogVisible = true;
         },
-        submitForm() {
+        handleSubmit(form) {
-            this.$refs.paramForm.validate((valid) => {
+            if (form.id) {
-                if (valid) {
+                // 编辑
-                    if (this.paramForm.id) {
+                Api.admin.updateParam(form, ({ data }) => {
-                        // 编辑
+                    if (data.code === 0) {
-                        Api.admin.updateParam(this.paramForm, ({ data }) => {
+                        this.$message.success("修改成功");
-                            if (data.code === 0) {
+                        this.dialogVisible = false;
-                                this.$message.success("修改成功");
+                        this.fetchParams();
-                                this.dialogVisible = false;
-                                this.fetchParams();
-                            }
-                        });
-                    } else {
-                        // 新增
-                        Api.admin.addParam(this.paramForm, ({ data }) => {
-                            if (data.code === 0) {
-                                this.$message.success("新增成功");
-                                this.dialogVisible = false;
-                                this.fetchParams();
-                            }
-                        });
                     }
-                }
+                });
-            });
+            } else {
+                // 新增
+                Api.admin.addParam(form, ({ data }) => {
+                    if (data.code === 0) {
+                        this.$message.success("新增成功");
+                        this.dialogVisible = false;
+                        this.fetchParams();
+                    }
+                });
+            }
         },
         deleteParam(row) {
             this.$confirm("确定要删除该参数吗？", "警告", {
@@ -533,4 +506,4 @@ export default {
         }
     }
 }
-</style>
+</style>