feat：模板管理新增参数

src/api/system/controlPlan.js

@@ -43,10 +43,19 @@ export function editTemplateDetail(form) {
 /**
  * 修改参数
  */
-export function deleteTemplateDetail(ids) {
+export function deleteTemplateDetail(id) {
     return request({
-        url: '/control/template/template-detail',
+        url: '/control/template/template-detail/' + id,
         method: 'delete',
-        params: {ids},
+    })
+}
+/**
+ * 新增参数
+ */
+export function addTemplateDetail(data) {
+    return request({
+        url: '/control/template/template-detail',
+        method: 'post',
+        params: data,
     })
 }
\ No newline at end of file

src/views/controlPlan/baseConfig/fillTemplate/edit.vue

+<template>
+  <div class="app-container">
+    <div class="component-selector">
+      <div class="top-header">
+        <el-button class="back-button" @click="handleBack">
+          <span class="back-icon"></span>
+          返回
+        </el-button>
+        <div class="button-group">
+          <el-button
+              type="primary"
+              @click="handleAdd"
+              v-hasPermi="['system:post:add']">
+            新增参数
+          </el-button>
+          <el-button
+              type="danger"
+              :disabled="selectedRows.length === 0"
+              @click="handleDelete"
+              v-hasPermi="['system:post:remove']">
+            批量删除参数
+          </el-button>
+        </div>
+      </div>
+      <el-tabs v-model="activeTab" class="demo-tabs">
+        <el-tab-pane
+            v-for="(item, index) in formList"
+            :key="index"
+            :label="item.formName"
+            :name="item.id">
+          <component>
+            <el-table
+                v-loading="loading"
+                :data="templateDetailList"
+                border
+                @selection-change="handleSelectionChange"
+            >
+              <el-table-column type="selection" width="55" align="center"/>
+              <el-table-column label="序号"  width="55" align="center" prop="seq" />
+              <el-table-column label="参数组" align="center" prop="parameterGroup" />
+              <el-table-column label="参数项" align="center"  prop="parameterItem" />
+              <el-table-column label="参数值类型" align="center" prop="parameterValueType" />
+              <el-table-column label="显示方式" align="center"  prop="displayMethod" />
+              <el-table-column label="填写方式" align="center"    prop="fillMethod"/>
+              <el-table-column
+                  label="操作"
+                  align="center"
+                  class-name="small-padding fixed-width"
+              >
+                <template #default="scope">
+                  <el-button
+                      v-hasPermi="['system:post:edit']"
+                      link
+                      type="primary"
+                      @click="handleEdit(scope.row)"
+                  >编辑参数</el-button>
+                  <el-button
+                      v-hasPermi="['system:post:edit']"
+                      link
+                      type="danger"
+                      @click="handleDelete(scope.row)"
+                  >删除参数</el-button>
+                </template>
+              </el-table-column>
+            </el-table>
+            <pagination
+                v-show="total > 0"
+                v-model:page="queryParams.pageNum"
+                v-model:limit="queryParams.pageSize"
+                :total="total"
+                @pagination="handlePagination"
+            />
+          </component>
+        </el-tab-pane>
+      </el-tabs>
+      <el-dialog
+          v-model="dialogVisible"
+          custom-class="right-dialog"
+          :title="`(${activeFormName}) - ${isEditMode ? '编辑' : '新增'}参数`"
+          width="600px"
+      >
+        <el-form :model="form" label-width="100px" :rules="rules" ref="formRef">
+          <el-form-item label="参数组：" prop="parameterGroup">
+            <el-input
+                v-model="form.parameterGroup"
+                placeholder="请输入"
+                clearable
+            />
+          </el-form-item>
+
+          <el-form-item label="参数项：" prop="parameterItem" required>
+            <el-input
+                v-model="form.parameterItem"
+                placeholder="请输入参数项"
+                clearable
+            />
+          </el-form-item>
+
+          <el-form-item label="参数值类型：" prop="parameterValueType" required>
+            <el-select
+                v-model="form.parameterValueType"
+                placeholder="请选择"
+                style="width: 100%"
+            >
+              <el-option label="文本框" value="文本框" />
+              <el-option label="文本域" value="文本域" />
+              <el-option label="下拉框" value="文本域" />
+            </el-select>
+          </el-form-item>
+
+          <el-form-item label="显示方式：" prop="displayMethod" required>
+            <el-select
+                v-model="form.displayMethod"
+                placeholder="请选择"
+                style="width: 100%"
+            >
+              <el-option label="显示" value="显示" />
+              <el-option label="隐藏" value="隐藏" />
+            </el-select>
+          </el-form-item>
+
+          <el-form-item label="填写方式：" prop="fillMethod" required>
+            <el-select
+                v-model="form.fillMethod"
+                placeholder="请选择"
+                style="width: 100%"
+            >
+              <el-option label="整行" value="整行" />
+              <el-option label="单列" value="单列" />
+            </el-select>
+          </el-form-item>
+        </el-form>
+
+        <template #footer>
+          <el-button @click="dialogVisible = false">取消</el-button>
+          <el-button type="primary" @click="handleSubmit">确定</el-button>
+        </template>
+      </el-dialog>
+    </div>
+  </div>
+</template>
+<script setup>
+import {editTemplateDetail, listTemplateDetail, listTemplateForm,deleteTemplateDetail,addTemplateDetail} from '@/api/system/controlPlan.js'
+const { proxy } = getCurrentInstance();
+import { ref, getCurrentInstance } from 'vue'
+import {ElMessageBox} from "element-plus";
+const isEditMode = ref(false) // true为编辑，false为新增
+const total = ref(0)
+const formList = ref([])
+const activeTab = ref(null) // 默认激活第一个标签页
+const templateDetailList = ref([])
+const single = ref(true);
+const multiple = ref(true);
+const selectedRows = ref([])
+const queryParams = ref({
+  pageNum: 1,
+  pageSize: 10
+})
+const dialogVisible = ref(false)
+const formRef = ref(null)
+const activeFormName = ref('') // 当前激活的表单名称
+const form = ref({
+  createBy:'',
+  createTime:'',
+  updateBy:'',
+  updateTime:'',
+  remark:'',
+  id:'',
+  delFlag:'',
+  formId:'',
+  templateId:'',
+  seq:'',
+  parameterGroup: '',
+  parameterItem: '',
+  parameterValueType: '',
+  displayMethod: '',
+  fillMethod: '',
+  isAllocationBasis:''
+})
+// 表单验证规则
+const rules = ref({
+  parameterItem: [
+    { required: true, message: '参数名不能为空', trigger: 'blur' },
+  ],
+  parameterValueType: [
+    { required: true, message: '文本框不能为空', trigger: 'blur' },
+  ],
+  displayMethod: [
+    { required: true, message: '显示方式不能为空', trigger: 'blur' },
+  ],
+  fillMethod: [
+    { required: true, message: '填写方式不能为空', trigger: 'blur' },
+  ]
+})
+
+
+// 新增选择事件
+const handleSelectionChange = (selection) => {
+  selectedRows.value = selection.map(item => item.id);
+  single.value = selection.length != 1;
+  multiple.value = !selection.length;
+}
+
+watch(activeTab, (newVal) => {
+  queryParams.value.pageNum = 1 // 切换标签时重置页码
+  getList(newVal)
+})
+
+const handlePagination = ({ page, limit }) => {
+  queryParams.value.pageNum = page
+  queryParams.value.pageSize = limit
+  getList(activeTab.value)
+}
+// 新增按钮方法
+const handleAdd = () => {
+  isEditMode.value = false
+  const activeForm = formList.value.find(item => item.id === activeTab.value)
+  activeFormName.value = activeForm?.formName || ''
+  // 初始化表单数据（保持与修改一致的字段结构）
+  form.value = {
+    formId: activeTab.value,
+    parameterGroup: '',
+    parameterItem: '',
+    parameterValueType: '',
+    displayMethod: '',
+    fillMethod: '',
+    templateId: proxy.$route.query.id
+  }
+  dialogVisible.value = true
+}
+const handleBack = () => {
+  proxy.$router.push({ path: '/control/baseConfig/fill'});
+}
+
+const handleEdit = (row) => {
+  isEditMode.value = true; // 明确标记为编辑模式
+  const activeForm = formList.value.find(item => item.id === activeTab.value);
+  activeFormName.value = activeForm?.formName || '';
+  form.value = { ...row };
+  dialogVisible.value = true;
+};
+// 统一提交方法
+const handleSubmit = () => {
+  formRef.value.validate(valid => {
+    if (valid) {
+      const apiMethod = isEditMode.value ? editTemplateDetail : addTemplateDetail
+      apiMethod(form.value).then(response => {
+        if (response.code === 200) {
+          proxy.$modal.msgSuccess(isEditMode.value ? "修改成功" : "新增成功")
+          dialogVisible.value = false
+          // 新增后重置页码到第一页
+          if (!isEditMode.value) queryParams.value.pageNum = 1
+          getList(activeTab.value)
+        } else {
+          proxy.$modal.msgError(response.msg || "操作失败")
+        }
+      }).catch(() => {})
+    }
+  })
+}
+// 监听弹窗关闭事件
+watch(dialogVisible, (val) => {
+  if (!val) {
+    formRef.value?.resetFields()
+  }
+})
+
+/** 删除按钮操作 */
+function handleDelete(row) {
+  const _ids = row.id || selectedRows.value;
+  proxy.$modal.confirm('是否确认删除备案参数总编号为"' + _ids + '"的数据项？').then(function() {
+    return deleteTemplateDetail(_ids);
+  }).then(() => {
+    getList(activeTab.value);
+    proxy.$modal.msgSuccess("删除成功");
+  }).catch(() => {});
+}
+function getFrom() {
+  const id = proxy.$route.query.id
+  listTemplateForm(id).then(response => {
+    formList.value = response.data
+    if (formList.value.length > 0) {
+      activeTab.value = formList.value[0].id // 默认第一个标签的id
+      getList(formList.value[0].id) // 初始化加载第一个标签的数据
+    }
+  })
+}
+function getList(formId){
+  listTemplateDetail({
+    id: formId,
+    pageNum: queryParams.value.pageNum,
+    pageSize: queryParams.value.pageSize
+  }).then(response => {
+    templateDetailList.value = response.rows
+    total.value = response.total
+  })
+}
+onMounted(() => {
+  getFrom();
+})
+</script>
+
+<style scoped lang="scss">
+.button-group {
+  display: flex;
+  justify-content: flex-end;
+  gap: 12px;
+  margin-bottom: 16px;
+
+  .el-button {
+    height: 32px;
+    padding: 8px 15px;
+  }
+}
+::v-deep .el-dialog__body {
+  padding: 20px;
+
+  .el-form-item {
+    margin-bottom: 18px;
+
+    .el-input__inner,
+    .el-select {
+      height: 32px;
+      line-height: 32px;
+    }
+  }
+}
+.top-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 16px;
+}
+</style>