Merge pull request #736 from xinnan-tech/web-vue-parameterization

Web vue parameterization

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

@@ -57,10 +57,12 @@ export default {
                 })
             }).send()
     },
+    // 获取参数列表
     getParamsList(params, callback) {
         const queryParams = new URLSearchParams({
             page: params.page,
-            limit: params.limit
+            limit: params.limit,
+            paramCode: params.paramCode || ''
         }).toString();
 
         RequestService.sendRequest()
@@ -77,6 +79,7 @@ export default {
                 })
             }).send()
     },
+    // 保存
     addParam(data, callback) {
         RequestService.sendRequest()
             .url(`${getServiceUrl()}/admin/params`)
@@ -93,6 +96,7 @@ export default {
                 })
             }).send()
     },
+    // 修改
     updateParam(data, callback) {
         RequestService.sendRequest()
             .url(`${getServiceUrl()}/admin/params`)
@@ -109,36 +113,23 @@ export default {
                 })
             }).send()
     },
-    deleteParam(id, callback) {
+    // 删除
+    deleteParam(ids, callback) {
+        console.log(4444,ids )
         RequestService.sendRequest()
-            .url(`${getServiceUrl()}/admin/params`)
-            .method('DELETE')
-            .data({ ids: [id] })
+            .url(`${getServiceUrl()}/admin/params/delete`)
+            .method('POST')
+            .data(ids)
             .success((res) => {
                 RequestService.clearRequestTime()
-                callback(res)
+                callback(res);
             })
             .fail((err) => {
                 console.error('删除参数失败:', err)
                 RequestService.reAjaxFun(() => {
-                    this.deleteParam(id, callback)
+                    this.deleteParam(ids, callback)
                 })
             }).send()
     },
-    batchDeleteParams(ids, callback) {
-        RequestService.sendRequest()
-            .url(`${getServiceUrl()}/admin/params`)
-            .method('DELETE')
-            .data({ ids })
-            .success((res) => {
-                RequestService.clearRequestTime()
-                callback(res)
-            })
-            .fail((err) => {
-                console.error('批量删除参数失败:', err)
-                RequestService.reAjaxFun(() => {
-                    this.batchDeleteParams(ids, callback)
-                })
-            }).send()
-    }
+
 }

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

@@ -106,7 +106,8 @@ export default {
     },
     // 修改用户状态
     changeUserStatus(status, userIds, successCallback) {
-        return RequestService.sendRequest()
+        console.log(555,userIds)
+        RequestService.sendRequest()
             .url(`${getServiceUrl()}/admin/users/changeStatus/${status}`)
             .method('put')
             .data(userIds)

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

@@ -0,0 +1,347 @@
+<template>
+  <el-dialog :title="title"
+    :visible.sync="visible"
+    width="520px"
+    class="param-dialog-wrapper"
+    :append-to-body="true"
+    :close-on-click-modal="false"
+    :key="dialogKey"
+    custom-class="custom-param-dialog"
+    :show-close="false"
+  >
+    <div class="dialog-container">
+      <div class="dialog-header">
+        <h2 class="dialog-title">{{ title }}</h2>
+        <button class="custom-close-btn" @click="cancel">
+          <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M13 1L1 13M1 1L13 13" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+          </svg>
+        </button>
+      </div>
+
+      <el-form :model="form" :rules="rules" ref="form" label-width="110px" label-position="left" class="param-form">
+        <el-form-item label="参数编码" prop="paramCode" class="form-item">
+          <el-input v-model="form.paramCode" placeholder="请输入参数编码" class="custom-input"></el-input>
+        </el-form-item>
+
+        <el-form-item label="参数值" prop="paramValue" class="form-item">
+          <el-input v-model="form.paramValue" placeholder="请输入参数值" class="custom-input"></el-input>
+        </el-form-item>
+
+        <el-form-item label="值类型" prop="valueType" class="form-item">
+          <el-select v-model="form.valueType" placeholder="请选择值类型" class="custom-select">
+            <el-option v-for="item in valueTypeOptions" :key="item.value" :label="item.label" :value="item.value"/>
+          </el-select>
+        </el-form-item>
+
+        <el-form-item label="备注" prop="remark" class="form-item remark-item">
+          <el-input type="textarea" v-model="form.remark" placeholder="请输入备注" :rows="3" class="custom-textarea"></el-input>
+        </el-form-item>
+      </el-form>
+
+      <div class="dialog-footer">
+        <el-button type="primary" @click="submit" class="save-btn">
+          保存
+        </el-button>
+        <el-button @click="cancel" class="cancel-btn">
+          取消
+        </el-button>
+      </div>
+    </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: '',
+        valueType: 'string',
+        remark: ''
+      })
+    }
+  },
+  data() {
+    return {
+      dialogKey: Date.now(),
+      valueTypeOptions: [
+        { value: 'string', label: '字符串(string)' },
+        { value: 'number', label: '数字(number)' },
+        { value: 'boolean', label: '布尔值(boolean)' },
+        { value: 'array', label: '数组(array)' },
+        { value: 'json', label: 'JSON对象(json)' }
+      ],
+      rules: {
+        paramCode: [
+          { required: true, message: "请输入参数编码", trigger: "blur" }
+        ],
+        paramValue: [
+          { required: true, message: "请输入参数值", trigger: "blur" }
+        ],
+        valueType: [
+          { required: true, message: "请选择值类型", trigger: "change" }
+        ]
+      }
+    };
+  },
+  methods: {
+    submit() {
+      this.$refs.form.validate((valid) => {
+        if (valid) {
+          this.$emit('submit', this.form);
+        }
+      });
+    },
+    cancel() {
+      this.$emit('cancel');
+    }
+  },
+  watch: {
+    visible(newVal) {
+      if (newVal) {
+        this.dialogKey = Date.now();
+      }
+    }
+  }
+};
+</script>
+
+<style>
+.custom-param-dialog {
+  border-radius: 16px !important;
+  overflow: hidden;
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15) !important;
+  border: none !important;
+
+  .el-dialog__header {
+    display: none;
+  }
+
+  .el-dialog__body {
+    padding: 0 !important;
+    border-radius: 16px;
+  }
+}
+</style>
+
+<style scoped lang="scss">
+.param-dialog-wrapper {
+  .dialog-container {
+    padding: 24px 32px;
+    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
+  }
+
+  .dialog-header {
+    position: relative;
+    margin-bottom: 24px;
+    text-align: center;
+  }
+
+  .dialog-title {
+    font-size: 20px;
+    color: #1e293b;
+    margin: 0;
+    padding: 0;
+    font-weight: 600;
+    letter-spacing: 0.5px;
+  }
+
+  .custom-close-btn {
+    position: absolute;
+    top: -8px;
+    right: -8px;
+    width: 32px;
+    height: 32px;
+    border-radius: 50%;
+    border: none;
+    background: #f1f5f9;
+    color: #64748b;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+    outline: none;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+
+    &:hover {
+      color: #ffffff;
+      background: #ef4444;
+      transform: rotate(90deg);
+      box-shadow: 0 4px 6px rgba(239, 68, 68, 0.2);
+    }
+
+    svg {
+      transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    }
+  }
+
+  .param-form {
+    .form-item {
+      margin-bottom: 20px;
+
+      :deep(.el-form-item__label) {
+        color: #475569;
+        font-weight: 500;
+        padding-right: 12px;
+        text-align: right;
+        font-size: 14px;
+        letter-spacing: 0.2px;
+      }
+    }
+
+    .custom-input {
+      :deep(.el-input__inner) {
+        background-color: #ffffff;
+        border-radius: 8px;
+        border: 1px solid #e2e8f0;
+        height: 42px;
+        padding: 0 14px;
+        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+        font-size: 14px;
+        color: #334155;
+        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+
+        &:focus {
+          border-color: #3b82f6;
+          box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
+          background-color: #ffffff;
+        }
+
+        &::placeholder {
+          color: #94a3b8;
+          font-weight: 400;
+        }
+      }
+    }
+
+    .custom-select {
+      width: 100%;
+
+      :deep(.el-input__inner) {
+        background-color: #ffffff;
+        border-radius: 8px;
+        border: 1px solid #e2e8f0;
+        height: 42px;
+        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+        font-size: 14px;
+        color: #334155;
+        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+
+        &:focus {
+          border-color: #3b82f6;
+          box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
+          background-color: #ffffff;
+        }
+
+        &::placeholder {
+          color: #94a3b8;
+          font-weight: 400;
+        }
+      }
+    }
+
+    .custom-textarea {
+      :deep(.el-textarea__inner) {
+        background-color: #ffffff;
+        border-radius: 8px;
+        border: 1px solid #e2e8f0;
+        padding: 12px 14px;
+        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+        font-size: 14px;
+        color: #334155;
+        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+        line-height: 1.5;
+
+        &:focus {
+          border-color: #3b82f6;
+          box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
+          background-color: #ffffff;
+        }
+
+        &::placeholder {
+          color: #94a3b8;
+          font-weight: 400;
+        }
+      }
+    }
+
+    .remark-item :deep(.el-form-item__label) {
+      margin-top: -4px;
+    }
+  }
+
+  .dialog-footer {
+    display: flex;
+    justify-content: center;
+    padding: 16px 0 0;
+    margin-top: 16px;
+
+    .save-btn {
+      width: 120px;
+      height: 42px;
+      font-size: 14px;
+      font-weight: 500;
+      border-radius: 8px;
+      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+      background: #3b82f6;
+      color: white;
+      border: none;
+      letter-spacing: 0.5px;
+      box-shadow: 0 2px 4px rgba(59, 130, 246, 0.2);
+
+      &:hover {
+        background: #2563eb;
+        transform: translateY(-1px);
+        box-shadow: 0 4px 6px rgba(59, 130, 246, 0.3);
+      }
+
+      &:active {
+        transform: translateY(0);
+        box-shadow: 0 2px 3px rgba(59, 130, 246, 0.2);
+      }
+    }
+
+    .cancel-btn {
+      width: 120px;
+      height: 42px;
+      font-size: 14px;
+      font-weight: 500;
+      border-radius: 8px;
+      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+      background: #ffffff;
+      color: #64748b;
+      border: 1px solid #e2e8f0;
+      margin-left: 16px;
+      letter-spacing: 0.5px;
+      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+
+      &:hover {
+        background: #f8fafc;
+        color: #475569;
+        border-color: #cbd5e1;
+        transform: translateY(-1px);
+        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+      }
+
+      &:active {
+        transform: translateY(0);
+        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+      }
+    }
+  }
+}
+</style>

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

@@ -6,9 +6,8 @@
             <h2 class="page-title">参数管理</h2>
             <div class="right-operations">
                 <el-input placeholder="请输入参数编码查询" v-model="searchCode" class="search-input"
-                    @keyup.enter.native="handleSearch" />
+                    @keyup.enter.native="handleSearch" clearable />
                 <el-button class="btn-search" @click="handleSearch">搜索</el-button>
-                <el-button type="primary" @click="showAddDialog">新增参数</el-button>
             </div>
         </div>
 
@@ -34,8 +33,9 @@
                             <div class="ctrl_btn">
                                 <el-button size="mini" type="primary" class="select-all-btn"
                                     @click="handleSelectAll">全选</el-button>
+                                <el-button size="mini" type="success" @click="showAddDialog">新增</el-button>
                                 <el-button size="mini" type="danger" icon="el-icon-delete"
-                                    @click="batchDelete">删除</el-button>
+                                   @click="deleteParam($refs.paramsTable.selection)">删除</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">
-            <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>
+        <param-dialog :title="dialogTitle" :visible.sync="dialogVisible" :form="paramForm" @submit="handleSubmit" @cancel="dialogVisible = false"/>
 
         <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: "",
@@ -103,14 +88,6 @@ export default {
                 paramValue: "",
                 remark: ""
             },
-            rules: {
-                paramCode: [
-                    { required: true, message: "请输入参数编码", trigger: "blur" }
-                ],
-                paramValue: [
-                    { required: true, message: "请输入参数值", trigger: "blur" }
-                ]
-            }
         };
     },
     created() {
@@ -148,6 +125,8 @@ export default {
                     if (data.code === 0) {
                         this.paramsList = data.data.list;
                         this.total = data.data.total;
+                    } else {
+                        this.$message.error(data.msg || '获取参数列表失败');
                     }
                 }
             );
@@ -174,69 +153,79 @@ export default {
             this.paramForm = { ...row };
             this.dialogVisible = true;
         },
-        submitForm() {
-            this.$refs.paramForm.validate((valid) => {
-                if (valid) {
-                    if (this.paramForm.id) {
-                        // 编辑
-                        Api.admin.updateParam(this.paramForm, ({ data }) => {
-                            if (data.code === 0) {
-                                this.$message.success("修改成功");
-                                this.dialogVisible = false;
-                                this.fetchParams();
-                            }
-                        });
-                    } else {
-                        // 新增
-                        Api.admin.addParam(this.paramForm, ({ data }) => {
-                            if (data.code === 0) {
-                                this.$message.success("新增成功");
-                                this.dialogVisible = false;
-                                this.fetchParams();
-                            }
-                        });
+        handleSubmit(form) {
+            if (form.id) {
+                // 编辑
+                Api.admin.updateParam(form, ({ 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("确定要删除该参数吗？", "警告", {
-                confirmButtonText: "确定",
-                cancelButtonText: "取消",
-                type: "warning",
-            })
-                .then(() => {
-                    Api.admin.deleteParam(row.id, ({ data }) => {
-                        if (data.code === 0) {
-                            this.$message.success("删除成功");
-                            this.fetchParams();
-                        }
-                    });
-                })
-                .catch(() => { });
-        },
-        batchDelete() {
-            const selectedParams = this.$refs.paramsTable.selection;
-            if (selectedParams.length === 0) {
+            // 处理单个参数或参数数组
+            const params = Array.isArray(row) ? row : [row];
+
+            if (Array.isArray(row) && row.length === 0) {
                 this.$message.warning("请先选择需要删除的参数");
                 return;
             }
 
-            this.$confirm(`确定要删除选中的${selectedParams.length}个参数吗？`, "警告", {
-                confirmButtonText: "确定",
-                cancelButtonText: "取消",
-                type: "warning",
-            })
-                .then(() => {
-                    const ids = selectedParams.map(item => item.id);
-                    Api.admin.batchDeleteParams(ids, ({ data }) => {
-                        if (data.code === 0) {
-                            this.$message.success("删除成功");
-                            this.fetchParams();
-                        }
+
+            const paramCount = params.length;
+            this.$confirm(`确定要删除选中的${paramCount}个参数吗？`, '警告', {
+                confirmButtonText: '确定',
+                cancelButtonText: '取消',
+                type: 'warning',
+                distinguishCancelAndClose: true
+            }).then(() => {
+                const ids = params.map(param => param.id);
+                if (ids.some(id => isNaN(id))) {
+                    this.$message.error('存在无效的参数ID');
+                    return;
+                }
+
+                Api.admin.deleteParam(ids, ({ data }) => {
+                    if (data.code === 0) {
+                        this.$message.success({
+                            message: `成功删除${paramCount}个参数`,
+                            showClose: true
+                        });
+                        this.fetchParams(); // 刷新参数列表
+                    } else {
+                        this.$message.error({
+                            message: data.msg || '删除失败，请重试',
+                            showClose: true
+                        });
+                    }
+                });
+            }).catch(action => {
+                if (action === 'cancel') {
+                    this.$message({
+                        type: 'info',
+                        message: '已取消删除操作',
+                        duration: 1000
                     });
-                })
-                .catch(() => { });
+                } else {
+                    this.$message({
+                        type: 'info',
+                        message: '操作已关闭',
+                        duration: 1000
+                    });
+                }
+            });
         },
         headerCellClassName({ columnIndex }) {
             if (columnIndex === 0) {
@@ -513,24 +502,36 @@ export default {
 }
 
 @media (min-width: 1144px) {
-    .table_bottom {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        margin-top: 40px;
-    }
+  .table_bottom {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-top: 40px;
+  }
 
-    :deep(.transparent-table) {
-        .el-table__body tr {
-            td {
-                padding-top: 16px;
-                padding-bottom: 16px;
-            }
+  :deep(.transparent-table) {
+    .el-table__body tr {
+      td {
+        padding-top: 16px;
+        padding-bottom: 16px;
+      }
 
-            &+tr {
-                margin-top: 10px;
-            }
-        }
+      & + tr {
+        margin-top: 10px;
+      }
     }
+  }
 }
-</style>
+  :deep(.el-table .el-button--text) {
+  color: #7079aa;
+  }
+
+  :deep(.el-table .el-button--text:hover) {
+    color: #5a64b5;
+  }
+
+  .el-button--success {
+    background: #5bc98c;
+    color: white;
+  }
+</style>