重构递归设置板块

src/views/pri/priLoopSet/components/add/index.vue

@@ -35,10 +35,12 @@ const props = defineProps<{
 let UpdateForm = ref({
   listId: props.listId, //配置ID
   loopModel: "", //执行模式
-  tableEnName: "", //查询表
   parentField: "", //父ID字段
   sonField: "", //子ID字段
-  levelDiffFlag: "",//级差
+  tableEnName: "", //查询表
+  levelDiffFlag: "", //级差
+
+
 });
 // 表单实例
 const ruleFormRef = ref()
@@ -78,10 +80,10 @@ const submit = async (formEl) => {
         UpdateForm.value = {
           listId: props.listId, //配置ID
           loopModel: "", //执行模式
-          tableEnName: "", //查询表
           parentField: "", //父ID字段
           sonField: "", //子ID字段
-          levelDiffFlag: "",//级差
+          tableEnName: "", //查询表
+          levelDiffFlag: "", //级差
 
         };
         // 关闭新增弹窗;
@@ -100,100 +102,59 @@ const submit = async (formEl) => {
         type: "error"
       });
     }
-  }
-  // 配置ID选项数据
-const listIdOptionList = ref([]);
-  // 执行模式选项数据
-  const loopModelOptionList = [
-    { id: 'field', label: '父子关联字段' },
-  ]
-
-  // 选项卡参数(默认值为列表某项的id)
-  const activeId = ref('1')
-  // 提交函数
-  const submit = async (formEl) => {
-    // 表单校验拦截
-    if (!formEl) return
-    await formEl.validate(async (valid, fields) => {
-      if (valid) {
-        //表单校验成功回调
-        console.log('submit!')
-
-
-        // 需动态生成接口
-        const { status, msg }: any = await http.Request({
-          method: UrlList.prizeSet.priaddPriLoopSet.method,
-          url: UrlList.prizeSet.priaddPriLoopSet.url,
-          params: UpdateForm.value
-        });
-        if (status === 1) {
-          //业务成功回调
-          ElMessage({
-            message: "新增成功",
-            type: "success"
-          });
-          UpdateForm.value = {
-            listId: props.listId, //配置ID
-            loopModel: "", //执行模式
-            parentField: "", //父ID字段
-            sonField: "", //子ID字段
-            tableEnName: "", //查询表
-            levelDiffFlag: "", //级差
-
-          };
-          // 关闭新增弹窗;
-          closeVisible()
-        } else {
-          //业务失败回调
-          ElMessageBox.alert(msg, "提示", {
-            confirmButtonText: "关闭",
-            type: "warning"
-          });
-        }
-      } else {
-        //表单校验失败回调
-        ElMessage({
-          message: "请输入完整信息",
-          type: "error"
-        });
-      }
-    })
-  };
-
-  //获取配置ID数据
-  const listIdQuery = async () => {
-    const { status, data }: any = await http.Request({ method: UrlList.prizeSet.prigetPriListDic.method, url: UrlList.prizeSet.prigetPriListDic.url, params: {} });
-    if (status === 1) {
-      listIdOptionList.value = data.records;
-    }
-  };
-
+  })
+};
 
+//获取配置ID数据
+const listIdQuery = async () => {
+  const { status, data }: any = await http.Request({ method: UrlList.prizeSet.prigetPriListDic.method, url: UrlList.prizeSet.prigetPriListDic.url, params: {} });
+  if (status === 1) {
+    listIdOptionList.value = data.records;
+  }
+};
 
-  // 表单校验规则
-  const rules = reactive({
 
 
+// 表单校验规则
+const rules = reactive({
+  listId: [
+    { required: true, message: '请输入配置ID', trigger: 'blur' },
+  ],
+  loopModel: [
+    { required: true, message: '请输入执行模式', trigger: 'blur' },
+  ],
+  parentField: [
+    { required: true, message: '请输入父ID字段', trigger: 'blur' },
+  ],
+  sonField: [
+    { required: true, message: '请输入子ID字段', trigger: 'blur' },
+  ],
+  tableEnName: [
+    { required: true, message: '请输入查询表', trigger: 'blur' },
+  ],
+  levelDiffFlag: [
+    { required: true, message: '请输入级差', trigger: 'blur' },
+  ],
 
-  })
-  // 关闭弹窗回调函数
-  const closeFn: any = inject("closeAddVisible");
-  const closeVisible = () => {
-    // 清空表单项;
-    UpdateForm.value = {
-      listId: props.listId, //配置ID
-      loopModel: "", //执行模式
-      tableEnName: "", //查询表
-      parentField: "", //父ID字段
-      sonField: "", //子ID字段
-      levelDiffFlag: "",//级差
+})
+// 关闭弹窗回调函数
+const closeFn: any = inject("closeAddVisible");
+const closeVisible = () => {
+  // 清空表单项;
+  UpdateForm.value = {
+    listId: props.listId, //配置ID
+    loopModel: "", //执行模式
+    parentField: "", //父ID字段
+    sonField: "", //子ID字段
+    tableEnName: "", //查询表
+    levelDiffFlag: "", //级差
 
-    };
-    closeFn();
   };
+  closeFn();
+};
 
-  // 弹窗是否全屏
-  const isFullscreen = ref(false)
+// 弹窗是否全屏
+const isFullscreen = ref(false)
 </script>
 
 <template lang="pug">
@@ -214,18 +175,17 @@ const listIdOptionList = ref([]);
           clearable,
         )
           el-option(:label="item.label", :value="item.id" v-for="(item,index) in loopModelOptionList")
-      el-form-item(label='查询表' prop="tableEnName")
-        el-input(v-model='UpdateForm.tableEnName' autocomplete='off'
-          placeholder="请输入查询表")
       el-form-item(label='父ID字段' prop="parentField")
         el-input(v-model='UpdateForm.parentField' autocomplete='off'
           placeholder="请输入父ID字段")
-
-      el-form-item(label='级差' prop="levelDiffFlag")
-        el-switch(v-model="UpdateForm.levelDiffFlag")
       el-form-item(label='子ID字段' prop="sonField")
         el-input(v-model='UpdateForm.sonField' autocomplete='off'
           placeholder="请输入子ID字段")
+      el-form-item(label='查询表' prop="tableEnName")
+        el-input(v-model='UpdateForm.tableEnName' autocomplete='off'
+          placeholder="请输入查询表")
+      el-form-item(label='级差' prop="levelDiffFlag")
+        el-switch(v-model="UpdateForm.levelDiffFlag")
 
     .flex.justify-end
       el-button(

src/views/pri/priLoopSet/components/updatePriLoopSet/index.vue

@@ -32,12 +32,10 @@ const props = defineProps<{
 const UpdateForm: any = ref({
   id: null, //ID
   loopModel: "", //执行模式
-  tableEnName: "", //查询表
   parentField: "", //父ID字段
   sonField: "", //子ID字段
-  levelDiffFlag: "",//级差
-
-
+  tableEnName: "", //查询表
+  levelDiffFlag: "", //级差
 
 });
 // 执行模式选项数据
@@ -74,10 +72,10 @@ const submit = async (formEl) => {
         UpdateForm.value = {
           id: null, //ID
           loopModel: "", //执行模式
-          tableEnName: "", //查询表
           parentField: "", //父ID字段
           sonField: "", //子ID字段
-          levelDiffFlag: "",//级差
+          tableEnName: "", //查询表
+          levelDiffFlag: "", //级差
 
         };
         // 关闭修改弹窗;
@@ -102,11 +100,26 @@ const submit = async (formEl) => {
 
 
 
-
 // 表单校验规则
 const rules = reactive({
-
-
+  id: [
+    { required: true, message: '请输入ID', trigger: 'blur' },
+  ],
+  loopModel: [
+    { required: true, message: '请输入执行模式', trigger: 'blur' },
+  ],
+  parentField: [
+    { required: true, message: '请输入父ID字段', trigger: 'blur' },
+  ],
+  sonField: [
+    { required: true, message: '请输入子ID字段', trigger: 'blur' },
+  ],
+  tableEnName: [
+    { required: true, message: '请输入查询表', trigger: 'blur' },
+  ],
+  levelDiffFlag: [
+    { required: true, message: '请输入级差', trigger: 'blur' },
+  ],
 
 })
 // 关闭弹窗回调函数
@@ -124,10 +137,10 @@ const closeUpdatePriLoopSetVisible = () => {
   UpdateForm.value = {
     id: null, //ID
     loopModel: "", //执行模式
-    tableEnName: "", //查询表
     parentField: "", //父ID字段
     sonField: "", //子ID字段
-    levelDiffFlag: "",//级差
+    tableEnName: "", //查询表
+    levelDiffFlag: "", //级差
 
   };
   closeFn();
@@ -142,7 +155,7 @@ const isFullscreen = ref(false)
   el-dialog(v-model='props.editVisible' draggable width="50%" :fullscreen="isFullscreen" title="修改" @close="closeUpdatePriLoopSetVisible" @open="openVisible")
     el-form(:model='UpdateForm' label-position="right" ref="ruleFormRef" :rules="rules" label-width="100px")
       el-form-item(label='ID' prop="id")
-        el-input-number(v-model='UpdateForm.id' :min="1" :max="1000"
+        el-input-number(v-model='UpdateForm.id' :min="0" :max="100000"
           placeholder="请输入ID")
       el-form-item(label="执行模式", prop="loopModel")
         el-select(
@@ -151,21 +164,17 @@ const isFullscreen = ref(false)
           clearable,
         )
           el-option(:label="item.label", :value="item.id" v-for="(item,index) in loopModelOptionList")
-      el-form-item(label='查询表' prop="tableEnName")
-        el-input(v-model='UpdateForm.tableEnName' autocomplete='off'
-          placeholder="请输入查询表")
       el-form-item(label='父ID字段' prop="parentField")
         el-input(v-model='UpdateForm.parentField' autocomplete='off'
           placeholder="请输入父ID字段")
-
-      el-form-item(label='ID' prop="id")
-        el-input-number(v-model='UpdateForm.id' :min="0" :max="100000"
-          placeholder="请输入ID")
-      el-form-item(label='级差' prop="levelDiffFlag")
-        el-switch(v-model="UpdateForm.levelDiffFlag")
-          el-form-item(label='子ID字段' prop="sonField")
+      el-form-item(label='子ID字段' prop="sonField")
         el-input(v-model='UpdateForm.sonField' autocomplete='off'
           placeholder="请输入子ID字段")
+      el-form-item(label='查询表' prop="tableEnName")
+        el-input(v-model='UpdateForm.tableEnName' autocomplete='off'
+          placeholder="请输入查询表")
+      el-form-item(label='级差' prop="levelDiffFlag")
+        el-switch(v-model="UpdateForm.levelDiffFlag")
 
     .flex.justify-end
       el-button(

src/views/pri/priLoopSet/hook.tsx

@@ -1,6 +1,5 @@
 import { reactive, onMounted, ref, ElMessage, ElMessageBox, http, getGroupUrl, RegularVerification, verification, PaginationProps } from "@/utils/importUsed";
 import { useRoute } from "vue-router";
-import router from "@/router";
 // 表单实例
 const ruleFormRef = ref()
 export function usePriLoopSet() {
@@ -18,6 +17,8 @@ export function usePriLoopSet() {
   });
   let form = reactive({
     listId: null, //配置ID
+
+
   });
   const dataList = ref([]);
   const loading = ref(false);

src/views/pri/priLoopSet/index.vue

@@ -36,8 +36,6 @@ const {
   editUpdatePriLoopSetFormData,
   handleDelete,
 
-
-
 } = usePriLoopSet();
 // 关闭添加
 const closeAddVisible = () => {