自定义组件计算表格，新增关联表字段，条件表、条件表字段。

zkqy-ui/node_modules/k-form-design/packages/components/KFormDesign/module/formItemProperties.vue

@@ -10,14 +10,6 @@
 
         <!-- +++ -->
         <a-form-item v-if="!hideModel && isDefined(selectItem.model)" label="表名">
-          <!-- <Select
-            v-model="formList.tableName"
-            :fieldNames="{
-              'label': tableComment, 'value': tableName
-            }"
-            @change="getFormList"
-            mode="tags"
-          /> -->
           <el-select v-model="selectItem.tableName" placeholder="请选择" filterable @change="getListName(selectItem)">
             <el-option v-for="item in formList.formName" :key="item.tableName" :label="item.tableComment"
               :value="item.tableName">
@@ -26,6 +18,38 @@
             </el-option>
           </el-select>
         </a-form-item>
+        <!-- 其中，selectItem.tableName是下拉框的value，有一个监听change的方法getListName(selectItem)，
+            下拉框的数据从formList.formName中获取，现在来梳理这些数据都做了什么，
+      -->
+        <!-- +++ -->
+        <a-form-item v-if="isDefined(options.jsTableFlag) && !hideModel && isDefined(selectItem.model)" label="关联表字段">
+          <el-select v-model="options.mainTableCondition" placeholder="请选择关联表字段" filterable>
+            <el-option v-for="item in this.formList.listName" :key="item.value" :label="item.label" :value="item.value"
+              @change="getOptionsGLZD(options)">
+              <span class="discribe" style="float: left">{{ item.label }}</span>
+              <span style="float: right; color: #8492a6; font-size: 13px">{{ item.fieldDescription }}</span>
+            </el-option>
+          </el-select>
+        </a-form-item>
+        <a-form-item v-if="isDefined(options.jsTableFlag) && !hideModel && isDefined(selectItem.model)" label="条件表">
+          <el-select v-model="selectItem.joinTableName" placeholder="请选择" filterable @change="getListName2(selectItem)">
+            <el-option v-for="item in formList2.formName" :key="item.tableName" :label="item.tableComment"
+              :value="item.tableName">
+              <span class="discribe" style="float: left">{{ item.tableComment }}</span>
+              <span style="float: right; color: #8492a6; font-size: 13px">{{ item.tableName }}</span>
+            </el-option>
+          </el-select>
+        </a-form-item>
+        <a-form-item v-if="isDefined(options.jsTableFlag) && !hideModel && isDefined(selectItem.model)" label="条件表字段">
+          <el-select v-model="options.joinTableCondition" placeholder="请选择条件表字段" filterable>
+            <el-option v-for="item in this.formList2.listName" :key="item.value" :label="item.label" :value="item.value"
+              @change="getOptionsGLZD(options)">
+              <span class="discribe" style="float: left">{{ item.label }}</span>
+              <span style="float: right; color: #8492a6; font-size: 13px">{{ item.fieldDescription }}</span>
+            </el-option>
+          </el-select>
+        </a-form-item>
+
         <a-form-item v-if="!hideModel && isDefined(selectItem.model) && isNeedColumn(selectItem)" label="列名">
           <el-select v-model="selectItem.model" @change="changeModel" filterable placeholder="请选择">
             <el-option v-for="item in formList.listName" :key="item.value" :label="item.label" :value="item.value">
@@ -36,18 +60,7 @@
         </a-form-item>
         <a-form-item v-if="!hideModel && isDefined(selectItem.columns)" label="编辑列">
           <el-button type="primary" icon="el-icon-edit" @click="editTableColumns(selectItem)">编辑</el-button>
-          <!-- <el-select v-model="selectItem.model" @change="changeModel" filterable placeholder="请选择">
-            <el-option
-              v-for="item in formList.listName"
-              :key="item.value"
-              :label="item.label"
-              :value="item.value">
-              <span style="float: left">{{ item.label }}</span>
-      <span style="float: right; color: #8492a6; font-size: 13px">{{ item.fieldDescription }}</span>
-            </el-option>
-          </el-select> -->
         </a-form-item>
-
         <!-- input type start -->
         <a-form-item v-if="selectItem.type === 'input'" label="输入框type">
           <Input v-model="options.type" placeholder="请输入" />
@@ -58,7 +71,6 @@
           <Input placeholder="请输入" v-model="options.rangePlaceholder[0]" />
           <Input placeholder="请输入" v-model="options.rangePlaceholder[1]" />
         </a-form-item>
-
         <a-form-item v-else-if="isDefined(options.placeholder)" label="占位内容">
           <Input placeholder="请输入" v-model="options.placeholder" />
         </a-form-item>
@@ -577,6 +589,11 @@ export default {
         listName: [],
         tableName: ""
       },
+      formList2: { // 新增的第二个下拉框数据
+        formName: [],
+        listName: [],
+        tableName: ""
+      },
       tableShowData: {
         isShow: false,
         columns: []
@@ -587,12 +604,18 @@ export default {
     options() {
       if (!this.selectItem.tableName) {
         this.formList.listName = [];
+
+      }
+      if (!this.selectItem.joinTableName) {
+        this.formList2.listName = [];
       }
+
       return this.selectItem.options || {};
     },
 
   },
   props: {
+    // selectItem从props获取，
     selectItem: {
       type: Object,
       required: true
@@ -604,14 +627,17 @@ export default {
 
   },
   methods: {
+    getOptionsGLZD(options) {
+      console.log('glzd----', options)
+    },
     delectTableColumns(item) {
-      console.log('item00000000',item)
+      console.log('item00000000', item)
       this.options.tableColumns = this.options.tableColumns.filter(column => column.prop !== item);
 
       console.log('------0000', this.options.tableColumns); // 输出更新后的 tableColumns 数组
     },
     addTableColumns(item) {
-      console.log('add---',item)
+      console.log('add---', item)
 
       this.options.tableColumns = item
 
@@ -673,10 +699,8 @@ export default {
       }
       let res = await getUncommonTable()
       this.formList.formName = res
-      // console.log(res);
-      // getFormName(par).then(res=>{
-      //   this.formList.formName = res.data
-      // });
+      this.formList2.formName = res
+      console.log
     },
     getListName(item = {}) {
       let notNeedColumnList = ['batch', 'selectInputList'];
@@ -690,6 +714,10 @@ export default {
       } else {
         item.model = ''
       }
+      if (this.options) {
+        this.options.mainTableCondition = '';
+      }
+
       let par2 = {
         ... this.$store.state.user.dataSource,
         'tableName': this.selectItem.tableName
@@ -703,7 +731,35 @@ export default {
           }
         });
       })
-      // console.log('[this.formList.listName]',t?is.formList.listName)
+    },
+    getListName2(item = {}) {
+      let notNeedColumnList = ['batch', 'selectInputList'];
+      let flag = notNeedColumnList.includes(item.type);
+      if (flag) {
+        item.model = 'batch.' + item.joinTableName; // 注意：这里使用 tableName2
+      } else if (item.type) {
+        item.model = 'tableShow.' + item.joinTableName; // 注意：这里使用 tableName2
+      } else {
+        item.model = '';
+      }
+      // 清空条件表字段
+      if (this.options) {
+        this.options.joinTableCondition = '';
+      }
+      let par2 = {
+        ...this.$store.state.user.dataSource,
+        tableName: this.selectItem.joinTableName // 注意：这里使用 tableName2
+      };
+
+      getListName(par2).then(res => {
+        this.formList2.listName = res.map(item => {
+          return {
+            label: item.fieldName,
+            value: item.fieldName,
+            fieldDescription: item.fieldDescription
+          };
+        });
+      });
     }
   },
   mounted() {
@@ -712,6 +768,9 @@ export default {
     if (this.selectItem.tableName) {
       this.getListName()
     }
+    if (this.selectItem.joinTableName) {
+      this.getListName2();
+    }
   },
 
 };

zkqy-ui/src/assets/js/kFormDesign.js

@@ -702,6 +702,14 @@ let tempData = [
           "formula":'sum',
           "tableColor": "#fafafa",
           "tableTextColor": "#000",
+          "jsTableFlag":true,
+          // 表关联
+          "mainTableCondition":'',
+          // 条件表字段
+          "joinTableCondition":'',
+
+          // "jsTableValue":'',
+          // "tjbzdTableValue":'',
           "eventAttribute":true,
           "eventAttributeList":[
             {

zkqy-ui/vue.config.js

@@ -52,7 +52,7 @@ module.exports = {
       },
       '/DB': {
         // target: `http://192.168.110.59:8099`,
-        target: `http://175.27.169.173:8099`,
+        target: `http://192.168.10.8:8099`,
         changeOrigin: true,
         pathRewrite: {
           ['^' + '/DB']: ''