kformdesign树形下拉框数据绑定

ruoyi-ui/src/api/tablelist/commonTable.js

@@ -211,7 +211,7 @@ export function getStatisticList(query) {
 // 按钮组操作统一请求
 export function btnCommonApi(data) {
   return request({
-    url: '/dragform/common/commonBtnHandle',
+    url: '/dragform/commonbtn/commonBtnHandle',
     method: 'post',
     data: data,
     baseURL: process.env.VUE_APP_BASE_API3

ruoyi-ui/src/components/kFormDesign/OptionsEdit.vue

@@ -4,9 +4,36 @@
       type="info"
       size="small"
       icon="el-icon-edit"
-      @click="editHandler"
+      @click="editHandler(0)"
+      v-if="selectItem.type == 'select'"
     >
     </el-button>
+    <div class="btn-list" v-else>
+      <el-button
+        type="primary"
+        size="small"
+        icon="el-icon-plus"
+        @click="addHandler"
+        circle
+      >
+      </el-button>
+      <el-button
+        v-for="(btnData, index) in btnList"
+        :key="index"
+        type="info"
+        size="small"
+        icon="el-icon-edit"
+        @click="editHandler(index)"
+      ></el-button>
+      <el-button
+        circle
+        type="danger"
+        size="small"
+        icon="el-icon-minus"
+        @click="minusHandler"
+      >
+      </el-button>
+    </div>
     <!-- 按钮 -->
     <el-dialog
       title="设置下拉选项数据"
@@ -381,6 +408,14 @@ export default {
           label: "当前用户相关数据",
         },
       ],
+      //树形数据
+      btnList: [
+        // {
+        //   sql: "",
+        //   echoData: "",
+        // },
+      ],
+      editIndex: "", //当前编辑层级
     };
   },
   watch: {
@@ -405,6 +440,17 @@ export default {
     },
   },
   methods: {
+    // 添加一级回调
+    addHandler() {
+      this.btnList.push({
+        sql: "",
+        echoData: "",
+      });
+    },
+    minusHandler() {
+      this.btnList.pop();
+    },
+
     // 重置条件表单数据
     resetFlagFormData() {
       Object.assign(this.flagFormData, {
@@ -418,13 +464,29 @@ export default {
       });
     },
     // 开始编辑回调
-    async editHandler() {
+    async editHandler(editIndex) {
       await this.getAllTable();
-      if (this.domType == "select") {
-        this.isShow = true;
+      // if (this.domType == "select") {
+      //   this.isShow = true;
+      // } else {
+      //   this.relateOptionShow = true;
+      // }
+      this.editIndex = editIndex;
+      let currentItem = this.btnList[editIndex];
+      if (currentItem?.echoData) {
+        let { formData, filterTableData, flagFormData } = JSON.parse(
+          currentItem.echoData
+        );
+        this.filterTableData = filterTableData;
+        this.formData = formData;
+        // this.flagFormData = flagFormData;
       } else {
-        this.relateOptionShow = true;
+        this.btnList[editIndex] = {
+          sql: "",
+          echoData: "",
+        };
       }
+      this.isShow = true;
     },
     // 弹窗取消回调
     cancleHandler() {
@@ -434,9 +496,26 @@ export default {
     conformHandler() {
       console.log(this.formData, this.filterTableData);
       let sql = getOptionsSqlString(this.formData, this.filterTableData);
+      // let sqlData = {};
+      // sqlData[this.formData.dynamicName] = sql;
+      let echoData = {
+        formData: {},
+        filterTableData: [],
+        // flagFormData: {},
+      };
+      Object.assign(echoData.formData, this.formData);
+      Object.assign(echoData.filterTableData, this.filterTableData);
+      // Object.assign(echoData.flagFormData, this.flagFormData);
+      echoData.filterTableData.forEach((item) => {
+        delete item.flagFormData.tableField.fieldOptions;
+      });
+      this.btnList[this.editIndex].sql = sql;
+      this.btnList[this.editIndex].echoData = JSON.stringify(echoData);
       let sqlData = {};
-      sqlData[this.formData.dynamicName] = sql;
-      this.$emit("setDynamicKey", this.formData.dynamicName, sqlData);
+      sqlData.dynamicName = this.formData.dynamicName;
+      sqlData.sqls = this.btnList.map((item) => item.sql);
+      sqlData.echoDatas = this.btnList.map((item) => item.echoData);
+      this.$emit("setDynamicKey", sqlData);
 
       console.log(sql);
       this.isShow = false;
@@ -506,6 +585,15 @@ export default {
   },
   async mounted() {
     console.log(this.options, this.selectItem);
+    if (this.selectItem.options.sqlData) {
+      this.btnList = this.selectItem.options.sqlData.echoDatas.map((item) => {
+        return {
+          sql: "",
+          echoData: item,
+        };
+      });
+      console.log(this.btnList);
+    }
   },
 };
 </script>
@@ -516,4 +604,7 @@ export default {
   flex-direction: column;
   align-items: center;
 }
+.btn-list {
+  display: flex;
+}
 </style>

ruoyi-ui/src/views/system/fromModel/index.vue

@@ -84,11 +84,16 @@ export default {
       });
       let formSQL = {};
       selectArr.forEach((item) => {
+        console.log(item);
         // formSQL = {
         //   ...formSQL,
         //   ...item.options.sqlData,
         // };
-        Object.assign(formSQL, item.options.sqlData);
+        // Object.assign(formSQL, item.options.sqlData);
+        let sqlList = item.options.sqlData.sqls;
+        formSQL[item.options.dynamicKey] = {};
+        formSQL[item.options.dynamicKey].sqls =
+          item.type == "select" ? sqlList[0] : sqlList;
       });
 
       let {

ruoyi-ui/src/views/tablelist/commonTable/listInfo.vue

@@ -631,7 +631,16 @@ export default {
         res.data.template.dfFormSql &&
           (this.dynamicData = JSON.parse(res.data.template.dfFormSql));
         this.addRealFieldName(res.data.result.resultMap);
-        Object.assign(this.defaultValue, res.data.result.resultMap);
+        let resultMap = res.data.result.resultMap;
+        // let fieldList = Object.keys(resultMap);
+        // let tableName = this.longestCommonSubstring(fieldList);
+        // fieldList.forEach((field) => {
+        //   let realField = field.replace(tableName, "");
+        //   realField = realField[0].toLocaleLowerCase() + realField.substring(1);
+        //   resultMap[realField] = resultMap[field];
+        // });
+        console.log(resultMap);
+        Object.assign(this.defaultValue, resultMap);
         this.jsonData = JSON.parse(res.data.template.dfVueTemplate);
         this.open = true;
         this.title = "修改信息";