cardConfig

zkqy-ui/src/views/formCreate/layout/home/components/cardConfig.vue

@@ -0,0 +1,574 @@
+<template>
+  <div>
+    <!-- 主表配置 -->
+    <el-card class="box-card">
+      <div style="font-size: medium;">主表配置</div>
+      <div class="main-table-select">
+        <el-select v-model="selectedMainTable" placeholder="请选择主表" @change="handleMainTableChange" clearable>
+          <el-option v-for="item in mainTableOptions" :key="item.value" :label="item.label" :value="item.value" />
+        </el-select>
+      </div>
+
+      <!-- 主表展示列配置 -->
+      <div class="config-section">
+        <div class="config-title">主表展示列:</div>
+        <el-button type="primary" icon="el-icon-plus" circle size="mini" @click="addMainDisplayColumn"
+          :disabled="!selectedMainTable"></el-button>
+      </div>
+      <div v-for="(column, index) in mainDisplayColumns" :key="index" class="display-column-item">
+        <el-select v-model="column.selectedColumn" placeholder="请选择展示列" clearable>
+          <el-option v-for="col in availableMainColumns" :key="col.value" :label="col.label || col.fieldDescription"
+            :value="col.value" />
+        </el-select>
+        <el-button type="danger" icon="el-icon-delete" circle size="mini"
+          @click="removeMainDisplayColumn(index)"></el-button>
+      </div>
+    </el-card>
+
+    <!-- 子表配置 -->
+    <el-button type="primary" icon="el-icon-plus" plain style="margin-bottom: 20px;margin-top: 20px;"
+      @click="addSubTable" :disabled="!selectedMainTable">
+      添加子表
+    </el-button>
+
+    <!-- 动态添加的子表配置 -->
+    <div v-for="(subTable, subIndex) in subTables" :key="subIndex" class="sub-table-container">
+      <el-card class="box-card">
+        <div style="font-size: medium; margin-bottom: 15px;">
+          子表配置 {{ subIndex + 1 }}
+          <el-button type="danger" icon="el-icon-delete" circle size="mini" style="float: right;"
+            @click="removeSubTable(subIndex)"></el-button>
+        </div>
+
+        <!-- 子表选择 -->
+        <div class="sub-table-select">
+          <el-select v-model="subTable.tableName" placeholder="请选择子表"
+            @change="(val) => handleSubTableChange(subIndex, val)" clearable>
+            <el-option v-for="item in subTableOptions" :key="item.value" :label="item.label" :value="item.value" />
+          </el-select>
+        </div>
+
+        <!-- 子表主键选择 -->
+        <div class="config-item" v-if="subTable.tableName">
+          <div class="config-label">子表主键:</div>
+          <el-select v-model="subTable.primaryKey" placeholder="请选择子表主键" clearable style="width: 100%">
+            <el-option v-for="col in getSubTableColumns(subTable.tableName)" :key="col.value" :label="col.label"
+              :value="col.value" />
+          </el-select>
+        </div>
+
+        <!-- 主表关联字段选择 -->
+        <div class="config-item" v-if="subTable.tableName && mainTableColumns.length > 0">
+          <div class="config-label">关联主表字段:</div>
+          <el-select v-model="subTable.relationField" placeholder="请选择关联主表字段" clearable style="width: 100%">
+            <el-option v-for="col in mainTableColumns" :key="col.value" :label="col.label" :value="col.value" />
+          </el-select>
+        </div>
+
+        <!-- 子表展示列配置 -->
+        <div class="config-section">
+          <div class="config-title">子表展示列:</div>
+          <el-button type="primary" icon="el-icon-plus" circle size="mini" @click="addSubTableColumn(subIndex)"
+            :disabled="!subTable.tableName"></el-button>
+        </div>
+
+        <div v-for="(column, colIndex) in subTable.columns" :key="colIndex" class="display-column-item">
+          <el-select v-model="column.selectedColumn" placeholder="请选择展示列" clearable>
+            <el-option v-for="col in getAvailableSubTableColumns(subIndex, colIndex)" :key="col.value"
+              :label="col.label" :value="col.value" />
+          </el-select>
+          <el-button type="danger" icon="el-icon-delete" circle size="mini"
+            @click="removeSubTableColumn(subIndex, colIndex)"></el-button>
+        </div>
+      </el-card>
+    </div>
+
+    <!-- 底部按钮 -->
+    <div class="dialog-footer">
+      <el-button type="primary" @click="handleConfirm">确定</el-button>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getAllTable, getListName } from "@/api/formCreateMange/mobilePageDesignData.js";
+
+export default {
+  name: "CardConfig",
+  props: {
+    databaseName: {
+      type: String,
+      required: true
+    },
+    databaseType: {
+      type: String,
+      required: true
+    },
+    mode: {
+      type: String,
+      default: "2",
+    },
+    optionDataDisplay: {
+      type: Boolean,
+      default: true,
+    },
+    optionCardDataPz: {
+      type: Array,
+      default: () => [],
+    },
+  },
+  
+  data() {
+    return {
+      selectedMainTable: '',
+      mainTableOptions: [],
+      mainTableColumns: [], // 主表所有列
+      mainDisplayColumns: [], // 主表展示列
+      // 子表相关数据
+      subTables: [], // 所有子表配置
+      subTableOptions: [], // 子表下拉选项
+      subTableColumnCache: {}, // 子表列数据缓存
+    };
+  },
+  watch: {
+    optionDataDisplay: {
+      handler(newVal, oldVal) {
+        if (newVal !== oldVal || oldVal === undefined) {
+          console.log(`visible 值从 ${oldVal} 变为 ${newVal}`);
+          // if (newVal) {
+          //   // 判断传入值
+          //   let type = this.optionDataComponentType.type
+          //   let _fc_id = this.optionDataComponentType._fc_id
+          //   this.getAllTableApi(type, _fc_id);
+          //   this.checkAndAssignTableData();
+          } else {
+            // 清空
+            console.log('弹窗隐藏');
+          }
+        }
+      },
+      immediate: true // 初始化时立即调用一次
+    },
+  computed: {
+    // 可用的主表展示列（过滤已选的）
+    availableMainColumns() {
+      const selectedColumns = this.mainDisplayColumns.map(c => c.selectedColumn).filter(Boolean);
+      return this.mainTableColumns;
+    },
+  },
+  mounted() {
+    console.log('this.optionCardDataPz', this.optionCardDataPz);
+    if (this.optionCardDataPz && this.optionCardDataPz.length > 0) {
+      // 分离主表和子表数据
+      const primaryData = this.optionCardDataPz.filter(item => item.tableType === 'primary');
+      const subData = this.optionCardDataPz.filter(item => item.tableType === 'sub');
+      
+      // 转换数据格式
+      const config = {
+        mainTable: primaryData[0]?.tableName,
+        mainColumns: primaryData.map(item => ({
+          showValue: item.showValue,
+          columnName: item.columnName,
+          searchValue: item.searchValue
+        }))
+      };
+
+      // 处理子表数据
+      if (subData.length > 0) {
+        // 按表名分组
+        const subTableGroups = {};
+        subData.forEach(item => {
+          if (!subTableGroups[item.tableName]) {
+            subTableGroups[item.tableName] = {
+              tableName: item.tableName,
+              subKey: item.subKey,
+              primaryKey: item.primaryKey,
+              columns: []
+            };
+          }
+          subTableGroups[item.tableName].columns.push({
+            showValue: item.showValue,
+            columnName: item.columnName,
+            searchValue: item.searchValue
+          });
+        });
+        
+        config.subTables = Object.values(subTableGroups);
+      }
+      
+      // 调用初始化方法
+      this.initCardConfig(config);
+    }
+  },
+  methods: {
+    // 获取主表列标签
+    getMainColumnLabel(columnValue) {
+      const column = this.mainTableColumns.find(col => col.value === columnValue);
+      return column ? column.label : columnValue;
+    },
+    // 主表选择变化
+    async handleMainTableChange(val) {
+      this.mainDisplayColumns = [];
+
+      if (!val) return;
+
+      // 加载主表列数据
+      try {
+        let data = {
+          databaseName: this.databaseName,
+          databaseType: this.databaseType,
+          tableName: val,
+        };
+
+        // 使用 await 等待异步操作完成
+        const res = await getListName(data);
+
+        // 更新主表列数据
+        this.mainTableColumns = res.map(item => ({
+          ...item,
+          label: item.fieldDescription || item.fieldName, // 如果 fieldDescription 为空，使用 fieldName
+          value: item.fieldName,
+        }));
+
+        // 返回主表列数据，以便外部可以使用
+        return this.mainTableColumns;
+      } catch (error) {
+        this.$message.error('加载表列失败');
+        console.error(error);
+        throw error; // 抛出错误以确保外部可以捕获
+      }
+    },
+
+    // 添加主表展示列下拉框
+    addMainDisplayColumn() {
+      if (!this.selectedMainTable) {
+        this.$message.warning('请先选择主表');
+        return;
+      }
+      this.mainDisplayColumns.push({
+        selectedColumn: '',
+        options: this.mainTableColumns || []
+      });
+    },
+
+    // 移除主表展示列下拉框
+    removeMainDisplayColumn(index) {
+      this.mainDisplayColumns.splice(index, 1);
+    },
+
+    // 添加子表
+    addSubTable() {
+      if (!this.selectedMainTable) {
+        this.$message.warning('请先选择主表');
+        return;
+      }
+      // 如果没有加载子表选项，则先加载
+      if (this.subTableOptions.length === 0) {
+        this.loadSubTableOptions();
+        return;
+      }
+      this.subTables.push({
+        tableName: '', // 选中的子表
+        primaryKey: '', // 子表主键
+        relationField: '', // 关联主表字段
+        columns: [] // 子表展示列
+      });
+    },
+
+    // 加载子表选项
+    loadSubTableOptions() {
+      // 获取子表列表的接口
+      let data = {
+        databaseName: this.databaseName,
+        databaseType: this.databaseType,
+      };
+      // 替换为你的实际接口
+      getAllTable(data).then(response => {
+        if (response.code === 200) {
+          this.subTableOptions = response.data.map(item => ({
+            ...item,
+            label: item.tableComment || item.tableName,
+            value: item.tableName
+          }));
+          // 加载完选项后再添加子表
+          this.subTables.push({
+            tableName: '',
+            primaryKey: '',
+            relationField: '',
+            columns: []
+          });
+        } else {
+          this.$message.error('加载子表失败');
+        }
+      }).catch(error => {
+        this.$message.error('加载子表失败');
+        console.error(error);
+      });
+    },
+
+    // 子表选择变化
+    handleSubTableChange(subIndex, val) {
+      const subTable = this.subTables[subIndex];
+      // 清空该子表的所有列和主键
+      subTable.columns = [];
+      subTable.primaryKey = '';
+      subTable.relationField = '';
+      if (!val) return;
+      // 如果缓存中没有该子表的列数据，则加载
+      if (!this.subTableColumnCache[val]) {
+        this.loadSubTableColumns(val, subIndex);
+      }
+    },
+
+    // 加载子表列数据
+    loadSubTableColumns(tableName, subIndex) {
+      let data = {
+        databaseName: this.databaseName,
+        databaseType: this.databaseType,
+        tableName: tableName
+      };
+
+      // 显式返回 Promise
+      return getListName(data).then(res => {
+        this.$set(this.subTableColumnCache, tableName, res.map(item => ({
+          ...item,
+          label: item.fieldDescription || item.fieldName,
+          value: item.fieldName
+        })));
+
+        // 如果当前子表仍然选中这个表，则更新选项
+        if (this.subTables[subIndex]?.tableName === tableName) {
+          this.$set(this.subTables[subIndex], 'columnOptions', this.subTableColumnCache[tableName]);
+        }
+      }).catch(error => {
+        this.$message.error('加载子表列失败');
+        console.error(error);
+        // 抛出错误以确保外部可以捕获
+        throw error;
+      });
+    },
+
+    // 获取子表的所有列
+    getSubTableColumns(tableName) {
+      return this.subTableColumnCache[tableName] || [];
+    },
+
+    // 获取子表可用的列（过滤已选的）
+    getAvailableSubTableColumns(subIndex, colIndex) {
+      const subTable = this.subTables[subIndex];
+      if (!subTable.tableName) return [];
+
+      const allColumns = this.getSubTableColumns(subTable.tableName);
+      const selectedColumns = subTable.columns
+        .map((col, idx) => idx === colIndex ? null : col.selectedColumn)
+        .filter(Boolean);
+
+      return allColumns.filter(col =>
+        !selectedColumns.includes(col.value) ||
+        col.value === subTable.primaryKey
+      );
+    },
+
+    // 添加子表展示列
+    addSubTableColumn(subIndex) {
+      const subTable = this.subTables[subIndex];
+      if (!subTable.tableName) {
+        this.$message.warning('请先选择子表');
+        return;
+      }
+
+      subTable.columns.push({
+        selectedColumn: '',
+        options: this.getSubTableColumns(subTable.tableName)
+      });
+    },
+
+    // 移除子表展示列
+    removeSubTableColumn(subIndex, colIndex) {
+      this.subTables[subIndex].columns.splice(colIndex, 1);
+    },
+
+    // 移除整个子表配置
+    removeSubTable(subIndex) {
+      this.subTables.splice(subIndex, 1);
+    },
+    // 确定按钮处理方法
+    handleConfirm() {
+      // 验证必填项
+      if (!this.selectedMainTable) {
+        this.$message.warning('请选择主表');
+        return;
+      }
+
+      if (this.mainDisplayColumns.length === 0) {
+        this.$message.warning('请至少添加一个主表展示列');
+        return;
+      }
+
+      // 获取主表信息
+      const mainTableInfo = this.mainTableOptions.find(t => t.value === this.selectedMainTable);
+
+      // 收集所有字段配置
+      const columns = [];
+
+      // 添加主表字段
+      this.mainDisplayColumns
+        .filter(col => col.selectedColumn)
+        .forEach(col => {
+          const columnInfo = this.mainTableColumns.find(c => c.value === col.selectedColumn);
+          columns.push({
+            tableName: this.selectedMainTable,
+            tableType: "primary",
+            columnName: columnInfo?.label || col.selectedColumn,
+            showValue: col.selectedColumn,
+            searchValue: `${this.selectedMainTable}@${col.selectedColumn}`
+          });
+        });
+
+      // 添加子表字段
+      this.subTables
+        .filter(sub => sub.tableName && sub.primaryKey && sub.relationField)
+        .forEach(sub => {
+          const subTableInfo = this.subTableOptions.find(t => t.value === sub.tableName);
+          sub.columns
+            .filter(col => col.selectedColumn)
+            .forEach(col => {
+              const columnInfo = this.getSubTableColumns(sub.tableName)
+                .find(c => c.value === col.selectedColumn);
+              columns.push({
+                tableName: sub.tableName,
+                tableType: "sub",
+                primaryKey: sub.relationField, // 关联主表字段
+                subKey: sub.primaryKey,       // 子表主键
+                columnName: columnInfo?.label || col.selectedColumn,
+                showValue: col.selectedColumn,
+                searchValue: `${sub.tableName}@${col.selectedColumn}`
+              });
+            });
+        });
+
+      this.$emit('confirm', columns);
+    },
+
+    // 初始化卡片配置
+    async initCardConfig(config) {
+      console.log('config',config)
+      if (!config) return;
+      
+      // 设置主表
+      if (config.mainTable) {
+        this.selectedMainTable = config.mainTable;
+        // 加载主表列数据
+        await this.handleMainTableChange(config.mainTable);
+        
+        // 设置主表展示列
+        if (config.mainColumns && config.mainColumns.length > 0) {
+          this.mainDisplayColumns = config.mainColumns.map(col => ({
+            selectedColumn: col.showValue,
+            options: this.mainTableColumns
+          }));
+        }
+      }
+      
+      // 设置子表配置
+      if (config.subTables && config.subTables.length > 0) {
+        // 先加载子表选项
+        await this.loadSubTableOptions();
+        
+        // 设置每个子表
+        for (const subTableConfig of config.subTables) {
+          const subTable = {
+            tableName: subTableConfig.tableName,
+            primaryKey: subTableConfig.subKey,
+            relationField: subTableConfig.primaryKey,
+            columns: []
+          };
+          
+          // 加载子表列数据
+          if (subTableConfig.tableName) {
+            await this.loadSubTableColumns(subTableConfig.tableName, this.subTables.length);
+            
+            // 设置子表展示列
+            if (subTableConfig.columns && subTableConfig.columns.length > 0) {
+              subTable.columns = subTableConfig.columns.map(col => ({
+                selectedColumn: col.showValue,
+                options: this.getSubTableColumns(subTableConfig.tableName)
+              }));
+            }
+          }
+          
+          this.subTables.push(subTable);
+        }
+      }
+    }
+  },
+  created() {
+    // 初始化时加载主表选项
+    let data = {
+      databaseName: this.databaseName,
+      databaseType: this.databaseType,
+    };
+    getAllTable(data).then((response) => {
+      if (response.code == 200) {
+        this.mainTableOptions = response.data.map(item => {
+          return {
+            ...item,
+            label: item.tableComment,
+            value: item.tableName,
+          }
+        });
+      } else {
+        this.mainTableOptions = []
+      }
+    });
+  }
+};
+</script>
+
+<style scoped>
+.main-table-select {
+  margin-bottom: 20px;
+  margin-top: 20px;
+  display: flex;
+  align-items: center;
+}
+
+.main-table-select .el-select {
+  flex: 1;
+  margin-right: 10px;
+}
+
+.display-column-item {
+  display: flex;
+  align-items: center;
+  margin-bottom: 10px;
+}
+
+.display-column-item .el-select {
+  flex: 1;
+  margin-right: 10px;
+}
+
+.config-section {
+  display: flex;
+  align-items: center;
+  margin-bottom: 15px;
+}
+
+.config-title {
+  margin-right: 10px;
+}
+
+.config-item {
+  margin-bottom: 15px;
+}
+
+.config-label {
+  margin-bottom: 5px;
+}
+
+.dialog-footer {
+  margin-top: 20px;
+  text-align: right;
+}
+</style> 

zkqy-ui/src/views/formCreate/layout/home/formCreateMange.vue

@@ -259,7 +259,7 @@ export default {
         ...(hashData?.config || {}),
         fieldReadonly: false,  //配置field是否可以编辑,字段id，zh-cn.js的
         showSaveBtn: true,
-        appendConfigData: ['formCreateCardTable','formCreateCardColumn','formCreateCardSelect','formCreateCardSelectType','formCreateCardCycle','formCreateCardCallableInterface','formCreateCardButtonTable','formCreateCardButtonTZYM','formCreateCardButtonANSJ','formCreateCardButtonColumn','formCreateColumnItem','formCreateTableName', 'formCreateZkqyYMLX', 'formCreateZkqyAN', 'formCreateShowValue', 'addZkqyTableRow', 'updateZkqyTableRow'],
+        appendConfigData: ['formCreateItemDataSource','formCreateCardTable','formCreateCardColumn','formCreateCardSelect','formCreateCardSelectType','formCreateCardCycle','formCreateCardCallableInterface','formCreateCardButtonTable','formCreateCardButtonTZYM','formCreateCardButtonANSJ','formCreateCardButtonColumn','formCreateColumnItem','formCreateTableName', 'formCreateZkqyYMLX', 'formCreateZkqyAN', 'formCreateShowValue', 'addZkqyTableRow', 'updateZkqyTableRow'],
         showControl: false, // 隐藏组件的联动数据配置
         formRule: {
           prepend: true,
@@ -517,20 +517,6 @@ export default {
       cardCallableInterface: {
         // 调接口？
         handler(newVal, oldVal) {
-        console.log('elCardBoundfieldSelect变化发生了变化:-------1------------');
-        // 找到所有包含 formCreateColumnItem 的配置并更新
-        this.$refs.designer.setComponentRuleConfig(['input','textarea','rate','timePicker','timeRange','dateRange','datePicker','slider','upload','elImage'],  // id
-          () => [  
-            {
-              type: 'select',
-              field: 'formCreateColumnItem',
-              title: '绑定字段',
-              value: '',
-              options: newVal
-            },
-          ],
-          true,
-        )
         
       },
       deep: true
@@ -1242,8 +1228,19 @@ export default {
           ],
           true,
         )
-      });
-      
+      }); 
+      this.$refs.designer.setComponentRuleConfig(['input','textarea','rate','timePicker','timeRange','dateRange','datePicker','slider','upload','elImage'],  // id
+          () => [  
+            {
+              type: 'select',
+              field: 'formCreateItemDataSource',
+              title: '数据来源',
+              value: '',
+              options: []
+            },
+          ],
+          true,
+        )   
     },
     optionData(componentType) {
       console.log('当前组件类型:', componentType)