补充提交

ruoyi-ui/src/views/dialogMange/components/relayTable.vue

@@ -0,0 +1,379 @@
+<template>
+  <div class="style-wrap">
+    <el-form
+      ref="formData"
+      :model="formData"
+      label-width="100px"
+      :rules="rules"
+    >
+      <el-form-item label="表格名称" prop="menuName">
+        <el-input v-model="formData.menuName" @input="iptChange()"></el-input>
+      </el-form-item>
+      <el-form-item label="时间格式" prop="timeFormate">
+        <el-select
+        @input="iptChange()"
+          v-model="formData.timeFormate"
+          placeholder="请选择时间格式"
+        >
+          <el-option
+            v-for="val in dict.type.sys_time_format"
+            :key="val.value"
+            :label="val.label"
+            :value="val.value"
+          ></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="表格主键" prop="primaryKey">
+        <el-select
+        @input="iptChange()"
+          v-model="formData.primaryKey"
+          placeholder="请选择表格主键"
+        >
+          <el-option
+            v-for="val in primaryKeyList"
+            :key="val.fieldName"
+            :label="val.fieldDescription"
+            :value="val.fieldName"
+          ></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="操作列按钮" prop="btnGroupList">
+        <el-select
+        @input="iptChange()"
+          v-model="formData.btnGroupList"
+          placeholder="请选择按钮组"
+          clearable
+          multiple
+        >
+          <el-option
+            v-for="val in btnGroupOptions"
+            :key="val.btnKey"
+            :label="val.btnGroupName"
+            :value="val.btnKey"
+          ></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="排序依赖字段">
+        <el-select
+        @input="iptChange()"
+          v-model="formData.orderByColumn"
+          placeholder="请选择排序依赖"
+        >
+          <el-option
+            v-for="val in orderByFieldList"
+            :key="val.fieldName"
+            :label="val.fieldDescription"
+            :value="val.tableName + '.' + val.fieldName"
+          ></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="排序方式" v-show="formData.orderByColumn">
+        <el-radio v-model="formData.isAsc" :label="false"
+          >升序</el-radio
+        >
+        <el-radio v-model="formData.isAsc" :label="true"
+          >降序</el-radio
+        >
+      </el-form-item>
+      <el-form-item label="当前表字段">
+        <el-select v-model="formData.relyFile" placeholder="请选择当前表字段">
+          <el-option
+            v-for="item in orderByFieldList"
+            :key="item.fieldName"
+            :label="item.fieldDescription"
+            :value="item.tableName + '.' + item.fieldName">
+          </el-option>
+        </el-select>
+      </el-form-item> 
+      
+      <!-- <el-form-item label="依赖表格">
+        <el-select
+          v-model="formData.relytableName"
+          placeholder="请选择依赖表"
+          filterable
+          @change="getrelyList"
+          class="mb10"
+        >
+          <el-option
+            v-for="item in dragTableList"
+            :key="item.dtName"
+            :label="item.dtName"
+            :value="item.dtName"
+          >
+            <span style="float: left">{{ item.dtName }}</span>
+            <span style="float: right; color: #8492a6; font-size: 13px">{{
+              item.dtTableName
+            }}</span>
+          </el-option>
+        </el-select>
+      </el-form-item>
+
+      <el-form-item label="依赖表格字段">
+        <el-select
+            v-model="formData.relaykey"
+            placeholder="请选择依赖字段"
+          >
+          <el-option
+            v-for="item in dragTableFilds"
+            :key="item.keu"
+            :label="item.val"
+            :value="item.key"
+          ></el-option>
+        </el-select>
+      </el-form-item> -->
+    
+      <el-form-item label="依赖表">
+        <el-select
+          v-model="formData.relytableName"
+          placeholder="请选择依赖表"
+          filterable
+          @change="getrelalist"
+          class="mb10"
+        >
+        <el-option
+          v-for="item in tableList"
+          :key="item.tableName"
+          :label="item.tableComment"
+          :value="item.tableName"
+          >
+          <span style="float: left">{{ item.tableComment }}</span>
+          <span style="float: right; color: #8492a6; font-size: 13px">{{
+            item.tableName
+          }}</span>
+        </el-option>
+        </el-select>
+
+      </el-form-item>
+        <el-form-item label="依赖表字段">
+          <el-select
+              v-model="formData.relaykey"
+              placeholder="请选择依赖字段"
+            >
+            <el-option
+              v-for="val in relayTableList"
+              :key="val.fieldName"
+              :label="val.fieldDescription"
+              :value="val.fieldName"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+    </el-form>
+  </div>
+</template>
+
+<script>
+import { listType } from "@/api/system/tenant/type";
+import { getDicts } from "@/api/system/dict/data";
+import {
+  getFormName,
+  getListName,
+  dragTablePreview,
+} from "@/api/dragform/form.js";
+import { mapState } from "vuex";
+import { listTable, removeTableList } from "@/api/dragform/tableList";
+export default {
+  name: "StyleFormPanel",
+  dicts: ["sys_time_format", "table_statistic_type"],
+  props: {
+    subFieldList: {
+      default: [],
+      type: Array,
+    },
+    btnGroupOptions: {
+      default: [],
+      type: Array,
+    },
+    echoData:{
+      default: {},
+    },
+    tableList:{
+      default: [],
+      type: Array,
+    }
+  },
+  components: {},
+  data() {
+    return {
+      relaytableField:[],
+      dragTableList:[],
+      dragTableFilds:[],
+      rules: {},
+      formData: {
+        timeFormate:'',
+        relytableName:'',
+        isAsc: false,
+        primaryKey: "",
+        btnGroupList: [],
+      },
+      relyFileds: {},
+      relyOptions:[
+        {
+         value: '0',
+         label: '自定义依赖值'
+        },
+        {
+          value: '1',
+          label: '依赖其他字段'
+        }
+      ],
+      tableList: []
+    }
+  },
+  computed: {
+    ...mapState({
+      databaseName: (state) => state.user.dataSource.databaseName,
+      databaseType: (state) => state.user.dataSource.databaseType,
+      username: (state) => state.user.dataSource.username,
+      tenantId: (state) => state.user.tenant.tenantId,
+    }),
+    // 表格主鍵
+    primaryKeyList() {
+      // console.log(this.subFieldList)
+      return this.subFieldList.filter((item) => !item.isChildren);
+    },
+    // 当前表字段
+    orderByFieldList() {
+      return this.subFieldList;
+    },
+    relayKeyList(){
+      return this.subFieldList.filter((item) => !item.isChildren);
+    },
+    // 依赖表字段
+    relayTableList(){
+      return this.relaytableField.filter((item) => !item.isChildren);
+    },
+  },
+  watch: {
+    formData:{
+      handler(nval){
+        this.$emit('subFormData', this.formData)
+      },
+      immediate: true,
+      deep: true,
+    },
+    // 回显数据
+    echoData:{
+      handler(nval){
+          let {
+            menuName,
+            timeFormate,
+            orderByColumn,
+            isAsc,
+            primaryKey,
+            btnGroupList,
+            relyFile,
+            relytableName,
+            relaykey,
+            relyOption
+          } = nval.formData;
+          Object.assign(this.formData, {
+            menuName,
+            timeFormate,
+            orderByColumn,
+            isAsc,
+            primaryKey,
+            btnGroupList,
+            relyFile,
+            relytableName,
+            relaykey,
+            relyOption
+
+          });
+        
+        this.getdragTable()
+        this.getrelyList()
+      },
+      // immediate: true,
+      deep: true,
+    }
+  },
+  methods: {
+    // 依赖表字段
+    getrelalist(){
+      if (!this.formData.relytableName) return;
+      let data = {
+        databaseName: this.databaseName,
+        databaseType: this.databaseType,
+        tableName:this.formData.relytableName,
+      };
+      let tableComment = this.getTableCommont(this.formData.relytableName, this.tableList);
+      // 获取当前表单结构信息
+      getListName(data).then((res) => {
+        // console.log(res);
+        this.relaytableField = res.map((item, index) => {
+          return {
+            id: this.formData.relytableName + "_" + item.fieldName,
+            fieldName: item.fieldName,
+            fieldDescription: item.fieldDescription,
+            relationTable: "",
+            relationFieldName: "",
+            relaFieldNameList: [],
+            disableRelaFieldName: false,
+            relationType: "",
+            relationShowField: [],
+            relationShowFiledList: [],
+            disableRelaType: false,
+            isShow: true,
+            isSearch: false,
+            isExport: true,
+            relationTableList: this.relationTableList,
+            tableName: this.formData.relytableName,
+            tableComment,
+            relationFieldList: [],
+          };
+        });
+      });
+    },
+    iptChange(){
+	    this.$forceUpdate();  //强制刷新
+    },
+    // 依赖表格
+    getdragTable(){
+       let queryParams = {
+        isEnablePaging:false,
+        dtType: 0
+      }
+      listTable(queryParams).then(res => {
+        this.dragTableList = res.rows
+      })
+    },
+    // 依赖表格字段
+    getrelyList() {
+      this.dragTableList.forEach(item => {
+        if(this.formData.relytableName == item.dtName){
+          this.dragTableFilds = JSON.parse(item.dtColumnName)
+        }
+      })
+      this.dragTableFilds.forEach(item => {
+        for(let val in item){
+          item.key = val
+          item.val = item[val]
+        }
+      })
+    },
+    // 获取当前表描述
+    getTableCommont(tableName, tableList) {
+      return tableList.find((item) => item.tableName == tableName).tableComment;
+    },
+  },
+  async mounted() {
+    this.getdragTable()
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.style-wrap {
+  .condition-table-wrap {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    .table-title {
+      margin-bottom: 10px;
+      font-size: 16px;
+      font-weight: 600;
+    }
+  }
+}
+</style>

ruoyi-ui/src/views/dialogMange/relayTableMange/tablelist.vue

@@ -0,0 +1,1127 @@
+<template>
+  <div>
+    <el-card shadow="always" :body-style="{ padding: '20px' }">
+          <template #header>
+            <div>
+              <span>关联子表</span>
+            </div>
+          </template>
+          <el-select
+            v-model="tableName"
+            placeholder="请选择数据表"
+            filterable
+            @change="getList"
+            class="mb10"
+          >
+          <el-option
+            v-for="item in tableList"
+            :key="item.tableName"
+            :label="item.tableComment"
+            :value="item.tableName"
+          >
+            <span style="float: left">{{ item.tableComment }}</span>
+            <span style="float: right; color: #8492a6; font-size: 13px">{{
+              item.tableName
+            }}</span>
+          </el-option>
+          </el-select>
+          <el-table
+            :data="tableFieldList"
+            border
+            ref="dragTable"
+            row-key="id"
+            max-height="500px"
+          >
+            >
+            <el-table-column
+              type="index"
+              label="序号"
+              width="50"
+              class-name="allowDrag"
+            >
+            </el-table-column>
+            <el-table-column prop="fieldName" label="数据字段">
+            </el-table-column>
+            <el-table-column prop="fieldDescription" label="字段描述">
+              <template slot-scope="scope">
+                <input
+                @input="iptChange()"
+                  :class="{
+                    isNullDesc:
+                      scope.row.fieldDescription == '' &&
+                      scope.row.isShow &&
+                      isInputInvalid
+                        ? true
+                        : false,
+                    ipt: true,
+                  }"
+                  v-model="scope.row.fieldDescription"
+                />
+              </template>
+            </el-table-column>
+            <el-table-column prop="relationTable" label="关联表">
+              <template slot-scope="scope">
+                <el-select
+                @input="iptChange()"
+                  v-model="scope.row.relationTable"
+                  :disabled="
+                    !scope.row.relationTableList ||
+                    !scope.row.relationTableList.length
+                  "
+                  placeholder="请选择关联的表"
+                  clearable
+                  filterable
+                  @change="ralationTableChange(scope.row)"
+                >
+                  <el-option
+                    v-for="item in scope.row.relationTableList"
+                    :key="item.tableName"
+                    :label="item.tableComment"
+                    :value="item.tableName"
+                  >
+                    <span style="float: left">{{ item.tableComment }}</span>
+                    <span
+                      style="float: right; color: #8492a6; font-size: 13px"
+                      >{{ item.tableName }}</span
+                    >
+                  </el-option>
+                </el-select>
+              </template>
+            </el-table-column>
+            <el-table-column prop="relationFieldName" label="关联条件字段">
+              <template slot-scope="scope">
+                <el-select
+                  v-model="scope.row.relationFieldName"
+                  @change="relationFieldChange(scope.row)"
+                  :disabled="!scope.row.disableRelaFieldName"
+                  placeholder="关联字段"
+                  filterable
+                >
+                  <el-option
+                    v-for="item in scope.row.relaFieldNameList"
+                    :key="item.fieldName"
+                    :label="item.fieldDescription"
+                    :value="item.fieldName"
+                  >
+                  </el-option>
+                </el-select>
+              </template>
+            </el-table-column>
+            <el-table-column prop="relationType" label="关联方式">
+              <template slot-scope="scope">
+                <el-select
+                  v-model="scope.row.relationType"
+                  placeholder="请选择关联方式"
+                  :disabled="!scope.row.disableRelaType"
+                  @change="relationTypeChangeHandler(scope.row)"
+                  filterable
+                >
+                  <el-option
+                    v-for="item in relaTypeList"
+                    :key="item.value"
+                    :label="item.label"
+                    :value="item.value"
+                  >
+                  </el-option>
+                </el-select>
+              </template>
+            </el-table-column>
+            <el-table-column prop="isShow" label="是否显示">
+              <template slot-scope="scope">
+                <el-switch v-model="scope.row.isShow"> </el-switch>
+              </template>
+            </el-table-column>
+           
+          </el-table>
+    </el-card>
+  </div>
+</template>
+
+<script>
+import {
+  delTableData,
+  dragTableInfo,
+  listTable,
+  unionListTableData,
+  getInfoBySqlKey,
+  addTableData,
+  addStatistic,
+  updateStatistic,
+} from "@/api/tablelist/commonTable";
+import { getDicts } from "@/api/system/dict/data";
+import {
+  getFormName,
+  getListName,
+  dragTablePreview,
+} from "@/api/dragform/form.js";
+import { getTableInfo, editTable } from "@/api/system/table.js";
+import { addDragTable } from "@/api/tablelist/commonTable.js";
+import { getParticMenu, updateMenu } from "@/api/system/menu.js";
+import { addGroup, listGroup, getTable, delGroup, updataGroup} from '@/api/relateTable/index.js'
+import { getMenuList, addMenu } from "@/api/menu.js";
+import Queryfrom from "@/views/tablelist/commonTable/queryfrom.vue";
+import { mapState } from "vuex";
+import Sortable from "sortablejs";
+import Treeselect from "@riophae/vue-treeselect";
+import "@riophae/vue-treeselect/dist/vue-treeselect.css";
+import { v4 as uuidv4 } from "uuid";
+import { listBtn } from "@/api/system/btn";
+export default {
+  name: "SubList",
+  dicts: ["sys_time_format", "table_statistic_type"],
+  props: ['menudata','echoName','echoList'],
+  components: { Queryfrom, Treeselect },
+  data() {
+    return {
+      staictitle: "添加统计数据字段",
+      isInputInvalid: false,
+      // 修改表格时的menuId
+      menuId: "",
+      // 修改表格的id
+      tId: "",
+      // 当前模板信息
+      templateInfo: {},
+      // 排序方式 默认降序
+      sortState: true,
+      // 列信息
+      columns: {},
+      // 查询条件
+      queryFromWhere: {},
+      // 当前table唯一标识
+      sqlKey: "",
+      // 动态数据sqlkey
+      staticSqlKey: "",
+      // 表格的高度
+      tableKey: "",
+      // tableHeight: document.documentElement.scrollHeight - 245 + "px",
+      tableList: [], //所有表格列表
+      tableFieldList: [], // 当前表格字段数据
+      tableName: "", // 当前表名称
+
+      relationTableList: [], //关联表格列表
+      relationFieldList: [], //关联字段列表
+      relationTypeList: [], //关联方式列表
+      total: 0, //表格数据总数
+      relyOptions:[
+        {
+         value: '0',
+         label: '自定义依赖值'
+        },
+        {
+          value: '1',
+          label: '依赖其他字段'
+        }
+      ],
+      relyFileds: {},
+      relaTypeList: [
+        {
+          label: "等值连接",
+          value: "INNER JOIN",
+        },
+        {
+          label: "左连接",
+          value: "LEFT JOIN",
+        },
+        {
+          label: "右连接",
+          value: "RIGHT JOIN",
+        },
+      ],
+      headerList: [
+        {
+          prop: "fieldName",
+          label: "数据字段",
+        },
+        {
+          prop: "fieldDescription",
+          label: "字段描述",
+        },
+        {
+          prop: "relationTable",
+          label: "关联表",
+        },
+        {
+          prop: "relationFieldName",
+          label: "关联字段",
+        },
+        {
+          prop: "relationType",
+          label: "关联方式",
+        },
+        {
+          prop: "isShow",
+          label: "是否显示",
+        },
+        {
+          prop: "isSearch",
+          label: "是否包含查询",
+        },
+        {
+          prop: "isExport",
+          label: "是否导出",
+        },
+        {
+          prop: "isCount",
+          label: "是否统计",
+        },
+      ], //表头列表
+
+      // 基础信息编辑
+      formData: {
+        menuName: "",
+        routePath: undefined,
+        isShowList: true,
+        timeFormate: "",
+        orderByColumn: "",
+        isAsc: false,
+        primaryKey: "",
+        btnGroupList: [],
+      },
+      // 统计信息
+      countData: {},
+      rules: {
+        menuName: [
+          { required: true, message: "请输入菜单名称", trigger: "blur" },
+        ],
+        routePath: [
+          { required: true, message: "请选择路由", trigger: "change" },
+        ],
+        timeFormate: [
+          { required: true, message: "请选择时间格式", trigger: "change" },
+        ],
+        primaryKey: [
+          { required: true, message: "请选择表格主键", trigger: "blur" },
+        ],
+        fieldDescription: [
+          { required: true, message: "请输入字段描述", trigger: "blur" },
+        ],
+      },
+      menus: [], //路由列表数据
+
+      // 预览弹窗相关
+      isShowPreview: false, //弹窗显示与隐藏
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        orderByColumn: "",
+        isAsc: false,
+        basicMap: {
+          sql: "",
+        },
+      },
+      loading: false, //表格加载
+      tableDataList: [], //数据
+      editData: {},
+      menuOrderNum: 0,
+      // tab动态切换
+      activeName: "menuedit",
+      // 数据统计对象
+      dataCountFormData: {},
+      // 添加数据统计表格
+      dragTableStatisticList: [],
+      deepragTableStatisticList: [],
+      tableSqlList: [],
+      searchFieldList: [],
+      // // 是否切换到数据统计
+      // menudata: false,
+      // 显示添加字段对话框dataArr
+      isShowAddData: false,
+      dataType: [],
+      uuid: "",
+
+      // 样式编辑tab数据
+      // dragTableStyleList: [],
+
+      //操作列按钮组数据
+      btnGroupOptions: [],
+    };
+  },
+  async mounted() {
+    this.getAllTable();
+    this.initDragTable();
+    this.getBtnList();
+    if (this.$route.query.tId) {
+      this.tId = this.$route.query.tId;
+      this.initTableData(this.tId);
+    }
+  },
+  computed: {
+    ...mapState({
+      databaseName: (state) => state.user.dataSource.databaseName,
+      databaseType: (state) => state.user.dataSource.databaseType,
+      username: (state) => state.user.dataSource.username,
+      tenantId: (state) => state.user.tenant.tenantId,
+    }),
+    searchArr() {
+      if (!this.templateInfo?.where?.length) return [];
+      return this.templateInfo.where.map((item) => item.conditionName);
+    },
+    checkedWhere() {
+      if (!this.templateInfo?.where?.length) return [];
+      return this.templateInfo?.where.filter((item) => {
+        return this.checkedList.includes(item.conditionName);
+      });
+    },
+    orderByFieldList() {
+      return this.tableFieldList;
+    },
+    primaryKeyList() {
+      return this.tableFieldList.filter((item) => !item.isChildren);
+    },
+
+  },
+  watch: {
+    tableName: function (val) {
+      if (val) {
+        this.relationTableList = this.tableList
+          .filter((item) => item.tableName != val)
+          .map((item) => {
+            return {
+              tableName: item.tableName,
+              tableComment: item.tableComment,
+            };
+          });
+
+          this.$emit('tableNameChange', 
+          this.tableName)
+      } else {
+        this.relationTableList = [];
+      }
+    },
+    echoName: function(val){
+      if(val){
+        console.log(val);
+        this.tableName = this.echoName
+        this.tableFieldList = this.echoList
+      }
+    }
+  },
+  methods: {
+    /** 查询列表 */
+    getList(queryParams) {
+      if (!this.tableName) return;
+      let data = {
+        databaseName: this.databaseName,
+        databaseType: this.databaseType,
+        tableName: this.tableName,
+      };
+      let tableComment = this.getTableCommont(this.tableName, this.tableList);
+      // 获取当前表单结构信息
+      getListName(data).then((res) => {
+        // console.log(res);
+        this.tableFieldList = res.map((item, index) => {
+          return {
+            id: this.tableName + "_" + item.fieldName,
+            fieldName: item.fieldName,
+            fieldDescription: item.fieldDescription,
+            relationTable: "",
+            relationFieldName: "",
+            relaFieldNameList: [],
+            disableRelaFieldName: false,
+            relationType: "",
+            relationShowField: [],
+            relationShowFiledList: [],
+            disableRelaType: false,
+            isShow: true,
+            isSearch: false,
+            isExport: true,
+            relationTableList: this.relationTableList,
+            tableName: this.tableName,
+            tableComment,
+            relationFieldList: [],
+          };
+        });
+
+        this.$emit('fieldListChange', 
+          this.tableFieldList)
+
+        // console.log(this.tableFieldList);
+      });
+    },
+    // 关联表变化回调
+    async ralationTableChange(row) {
+      this.tableFieldList = this.tableFieldList.filter((item) => {
+        return !row.relationFieldList.some((val) => {
+          return val.id == item.id;
+        });
+      });
+      row.relationFieldName = "";
+      row.relationType = "";
+      row.disableRelaFieldName = false;
+      row.disableRelaType = false;
+      row.relationFieldList = [];
+      if (!row.relationTable) {
+        return;
+      }
+      // 获取关联表的字段
+      let data = {
+        databaseName: this.databaseName,
+        databaseType: this.databaseType,
+        tableName: row.relationTable,
+      };
+      let tableComment = this.getTableCommont(
+        row.relationTable,
+        this.tableList
+      );
+      let res = await getListName(data);
+      // 关联字段下拉列表数据
+      row.relaFieldNameList = res.map((item) => {
+        return {
+          fieldName: item.fieldName,
+          fieldDescription: item.fieldDescription,
+        };
+      });
+      let relationTableList = row.relationTableList.filter(
+        (item) => row.relationTable != item.tableName
+      );
+      row.relationFieldList = row.relaFieldNameList.map((item, index) => {
+        return {
+          id: row.relationTable + "_" + item.fieldName,
+          fieldName: item.fieldName,
+          fieldDescription: item.fieldDescription,
+          relationTable: "",
+          relationFieldName: "",
+          relaFieldNameList: [],
+          disableRelaFieldName: false,
+          relationType: "",
+          relationShowField: [],
+          relationShowFiledList: [],
+          disableRelaType: false,
+          isShow: true,
+          isSearch: false,
+          isExport: true,
+          relationTableList,
+          tableName: row.relationTable,
+          tableComment,
+          relationFieldList: [],
+          isChildren: true,
+        };
+      });
+      // this.tableFieldList = [...this.tableFieldList, ...row.relationFieldList];
+      row.disableRelaFieldName = true;
+    },
+    // 关联类型变化回调
+    relationTypeChangeHandler(row) {
+      let tempRelationFieldList = row.relationFieldList.filter((item) => {
+        return !this.tableFieldList.find((val) => val.id === item.id);
+      });
+      this.tableFieldList = [...this.tableFieldList, ...tempRelationFieldList];
+    },
+    // 关联字段回调
+    relationFieldChange(row) {
+      if (!row.relationFieldName) {
+        row.relationType = "";
+        row.disableRelaType = false;
+        row.relaFieldNameList = [];
+        return;
+      }
+      row.disableRelaType = true;
+    },
+     // 修改表格回显数据
+     async initTableData(tId) {
+      let res = await getTable({id : tId});
+      if (res.code == 200) {
+        let lists = res.data.dragTables
+        let groupInfo =JSON.parse(res.data.groupTableInfo)
+
+        lists.forEach(item => {
+          if(item.tableKey == groupInfo[1].tableKey){
+            let echoData = JSON.parse(item.echoData);
+              this.tableName = echoData.tableName;
+              this.tableFieldList = echoData.tableFieldData;
+
+              this.$emit('fieldListChange', this.tableFieldList)
+              this.editData = item;
+          }
+        })
+        console.log('info', groupInfo)
+      } else {
+        this.$message.error("数据回显失败");
+      }
+    },
+    // 勾选框回调
+    handleSelectionChange(selection) {
+      this.ids = selection.map((item) => item.id);
+      // this.single = selection.length != 1;
+      this.multiple = !selection.length;
+    },
+    // 分页查询
+    pageList(row) {
+      this.$refs.mychild.pageList(
+        row == undefined
+          ? {
+              limit: this.queryParams.pageSize,
+              page: this.queryParams.pageNum,
+            }
+          : row
+      );
+    },
+    // 多选框改变回调
+    checkedChangeHandle(val) {},
+    // 获取所有表格
+    async getAllTable() {
+      let data = {
+        databaseName: this.databaseName,
+        databaseType: this.databaseType,
+      };
+      let res = await getFormName(data);
+
+      const baseTable = await this.getDicts("base_table");
+
+      this.tableList = res.data.filter((item) => {
+        return !baseTable.data.some(
+          (value) =>
+            value.dictValue.toLowerCase() == item.tableName.toLowerCase()
+        );
+      });
+
+    },
+    //处理表格行拖拽
+    initDragTable() {
+      const el = this.$refs.dragTable.$el.querySelectorAll(
+        ".el-table__body-wrapper > table > tbody"
+      )[0];
+      const sortable = Sortable.create(el, {
+        handle: ".allowDrag",
+        onEnd: (evt) => {
+          const targetRow = this.tableFieldList.splice(evt.oldIndex, 1)[0];
+          this.tableFieldList.splice(evt.newIndex, 0, targetRow);
+          for (let index in this.tableFieldList) {
+            this.tableFieldList[index].sort = parseInt(index) + 1;
+          }
+        },
+      });
+    },
+    // 校验字段合法性(递归版)
+    validateField(tableFieldList, validateParams) {
+      if (!tableFieldList.length) {
+        return;
+      }
+      for (let i = 0; i < tableFieldList.length; i++) {
+        let temp = tableFieldList[i];
+        if (!temp.fieldDescription?.trim() && temp.isShow) {
+          //描述字段不能为空
+          validateParams.isFieldDescrib = true;
+        }
+        if (
+          temp.relationTable &&
+          (!temp.relationFieldName || !temp.relationType)
+        ) {
+          // 关联条件不足
+          validateParams.isRelationFieldAll = true;
+        }
+        if (temp.relationFieldList.length) {
+          this.validateField(temp.relationFieldList, validateParams);
+        }
+      }
+    },
+    // 校验字段合法性(非递归版)
+    validateTableData(tableFieldList) {
+      if (!tableFieldList.length) {
+        return {
+          val: false,
+          meg: "字段个数不能为空",
+        };
+      }
+      for (let i = 0; i < tableFieldList.length; i++) {
+        let temp = tableFieldList[i];
+        if (!temp.fieldDescription?.trim() && temp.isShow) {
+          return {
+            val: false,
+            msg: "显示的字段,字段描述不能为空",
+          };
+        }
+        if (
+          temp.relationTable &&
+          (!temp.relationFieldName || !temp.relationType)
+        ) {
+          return {
+            val: false,
+            msg: "关联条件不足,请完善关联条件",
+          };
+        }
+      }
+      if (tableFieldList.filter((item) => item.isShow).length == 0) {
+        return {
+          val: false,
+          msg: "显示的字段数不能为空",
+        };
+      }
+      if (
+        tableFieldList.filter((item) => item.isExport && !item.isChildren)
+          .length == 0
+      ) {
+        return {
+          val: false,
+          msg: "导出字段中至少应有一个主表字段",
+        };
+      }
+      // 导出的字段的描述不能重复
+      let describeArr = tableFieldList
+        .filter((item) => item.isExport)
+        .map((item) => item.fieldDescription);
+      let isRepeat = false;
+      describeArr.map((item) => {
+        if (describeArr.indexOf(item) != describeArr.lastIndexOf(item)) {
+          isRepeat = true;
+        }
+      });
+      if (isRepeat) {
+        return {
+          val: false,
+          msg: "导出的字段描述不能重复",
+        };
+      }
+
+      return {
+        val: true,
+        msg: "",
+      };
+    },
+    // 递归拼接查询语句
+    getSQLString(tableFieldList, fieldArr, tableArr, sqlType = "mysql") {
+      let prefix = "{DBNAME}.";
+      let asOrSpace = sqlType == "oracle" ? " " : " AS ";
+      for (let i = 0; i < tableFieldList.length; i++) {
+        let temp = tableFieldList[i];
+        if (temp.isShow) {
+          let tempArr = prefix + temp.tableName + "." + temp.fieldName;
+          // 给主表也加上表名前缀
+          // if (temp.isChildren) {
+          tempArr += asOrSpace + temp.tableName + "_" + temp.fieldName;
+          // }
+          fieldArr.push(tempArr);
+        }
+        if (temp.relationTable && temp.relationFieldName && temp.relationType) {
+          // fieldArr.push(temp.relationTable + "." + temp.relationFieldName);
+          let isNeedUsername = sqlType == "oracle" ? this.username + "." : "";
+          tableArr.push(
+            temp.relationType +
+              " " +
+              isNeedUsername +
+              prefix +
+              temp.relationTable +
+              asOrSpace +
+              temp.relationTable +
+              " ON " +
+              prefix +
+              temp.relationTable +
+              "." +
+              temp.relationFieldName +
+              " = " +
+              prefix +
+              temp.tableName +
+              "." +
+              temp.fieldName
+          );
+        }
+        // if (temp.relationFieldList.length) {
+        //   this.getSQLString(temp.relationFieldList, fieldArr, tableArr);
+        // }
+      }
+      // 如果主键不包含显示,则添加至sql语句中
+      let isNotInclude = this.primaryKeyList.find(
+        (val) => !val.isShow && val.fieldName == this.formData.primaryKey
+      );
+      if (isNotInclude) {
+        fieldArr.push(
+          prefix + isNotInclude.tableName + "." + isNotInclude.fieldName
+        );
+      }
+    },
+    // 拼接查询sql语句
+    getSQLStr() {
+      let prefix = "{DBNAME}.";
+      let sqlType = this.databaseType; //数据库类型
+      let asOrSpace = sqlType == "oracle" ? " " : " AS ";
+      // let sqlType = "oracle";
+      let sql = "";
+      // mysql
+      sql += "SELECT ";
+      let fieldNameArr = [],
+        relaTypeArr = [];
+      this.getSQLString(
+        this.tableFieldList,
+        fieldNameArr,
+        relaTypeArr,
+        sqlType
+      );
+      let styleFieldList = this.$refs.styleTableRef.getStyleTableField();
+      styleFieldList = styleFieldList.map((item) => {
+        return `${prefix}${item}${asOrSpace}${item.replace(".", "_")}`;
+      });
+      let set = new Set([...fieldNameArr, ...styleFieldList]);
+      fieldNameArr = [...set];
+      let isNeedUsername = sqlType == "oracle" ? this.username + "." : "";
+      sql +=
+        fieldNameArr.join(",") +
+        " FROM " +
+        isNeedUsername +
+        prefix +
+        this.tableName +
+        asOrSpace +
+        this.tableName;
+      if (relaTypeArr.length) {
+        sql += " " + relaTypeArr.join(" ");
+      }
+      return sql;
+    },
+    getStaticSQL(key) {
+      // let prefix = "{DBNAME}.";
+      let sqlType = this.databaseType; //数据库类型
+      // let sqlType = "oracle";
+      let sql = "";
+      // mysql
+      sql += "SELECT ";
+      let fieldNameArr = [],
+        relaTypeArr = [];
+      this.getSQLString(
+        this.tableFieldList,
+        fieldNameArr,
+        relaTypeArr,
+        sqlType
+      );
+      let isNeedUsername = sqlType == "oracle" ? this.username + "." : "";
+      let asOrSpace = sqlType == "oracle" ? " " : " AS ";
+
+      sql +=
+        key +
+        " FROM " +
+        isNeedUsername +
+        // prefix +
+        this.tableName +
+        asOrSpace +
+        this.tableName;
+      if (relaTypeArr.length) {
+        sql += " " + relaTypeArr.join(" ");
+      }
+      return sql;
+    },
+    // 处理列表信息
+    columnsHandler(columns) {
+      let resArr = [];
+      columns.forEach((item) => {
+        for (const key in item) {
+          let tempObj = {};
+          tempObj.key = key;
+          tempObj.value = item[key];
+          resArr.push(tempObj);
+        }
+      });
+      return resArr;
+    },
+    // 下划线命名转驼峰命名
+    toUpperCase(str) {
+      let nstr = str.replace(/(?:_)+([^_])/g, function ($0, $1) {
+        return $1.toUpperCase();
+      });
+      nstr = nstr.replace(nstr[0], nstr[0].toLowerCase());
+      return nstr;
+    },
+    // 递归获取列表信息
+    getCol(
+      tableFieldList,
+      columns,
+      searchFieldList = [],
+      tableExportField = {}
+    ) {
+      if (!tableFieldList.length) return;
+      for (let i = 0; i < tableFieldList.length; i++) {
+        let temp = tableFieldList[i];
+        let tempFieldName = "",
+          exportFieldName = "";
+        if (temp.isChildren) {
+          tempFieldName = temp.tableName + "_" + temp.fieldName;
+          exportFieldName = temp.tableName + "@" + temp.fieldName;
+        } else {
+          // tempFieldName = temp.fieldName;
+          tempFieldName = temp.tableName + "_" + temp.fieldName;
+          exportFieldName = temp.fieldName;
+        }
+        if (temp.isShow) {
+          let tempObj = {};
+          // if (temp.isChildren) {
+          //   tempObj[temp.tableName + "_" + temp.fieldName] =
+          //     temp.fieldDescription;
+          // } else {
+          //   tempObj[temp.fieldName] = temp.fieldDescription;
+          // }
+          tempObj[tempFieldName] = temp.fieldDescription;
+          columns.push(tempObj);
+        }
+        if (temp.isSearch) {
+          searchFieldList.push(temp.tableName + "." + temp.fieldName);
+        }
+
+        if (temp.isExport) {
+          tableExportField[exportFieldName] = temp.fieldDescription;
+        }
+        // 递归
+        // if (temp.relationFieldList) {
+        //   this.getCol(
+        //     temp.relationFieldList,
+        //     columns,
+        //     searchFieldList,
+        //     tableExportField
+        //   );
+        // }
+      }
+    },
+    // 更新路由
+    reloadRouter() {
+      this.$store.dispatch("GenerateRoutes").then((accessRoutes) => {
+        this.$router.addRoutes(accessRoutes); // 动态添加可访问路由表
+      });
+    },
+    // 预览结果回调
+    async previewHandle() {
+      this.$refs.formData.validate(async (valid) => {
+        // 至少包含一个查询项
+        if (valid) {
+          if (!this.tableName) {
+            this.$message.error("请选择数据表");
+            return;
+          }
+          // 检验表单合法性
+          let validRes = this.validateTableData(this.tableFieldList);
+          if (!validRes.val) {
+            this.$message.error(validRes.msg);
+            return;
+          }
+          // let validateParams = {
+          //   isFieldDescrib: false,
+          //   isRelationFieldAll: false,
+          // };
+          // this.validateField(this.tableFieldList, validateParams);
+          // console.log(validateParams);
+          // if (validateParams.isFieldDescrib) {
+          //   this.$message.error("需要显示的字段描述不能为空");
+          //   return;
+          // }
+          // if (validateParams.isRelationFieldAll) {
+          //   this.$message.error("请补全关联条件");
+          //   return;
+          // }
+          // 拼接预览的sql查询语句
+          this.queryParams.basicMap.sql = this.getSQLStr();
+          // 获取表头信息
+          let tempColumns = [],
+            searchFieldList = [];
+          this.getCol(this.tableFieldList, tempColumns, searchFieldList);
+          if (!searchFieldList.length) {
+            this.$message.warning("请至少选择一个包含查询字段");
+            return false;
+          }
+          const dataType = await this.getDicts("table_statistic_type");
+          this.deepragTableStatisticList = JSON.parse(
+            JSON.stringify(this.dragTableStatisticList)
+          );
+          this.deepragTableStatisticList.forEach((item) => {
+            dataType.data.forEach((val) => {
+              if (val.dictValue == item.statisticType) {
+                item.statisticType = val.dictLabel;
+              }
+            });
+          });
+          this.columns = this.columnsHandler(tempColumns);
+          this.queryParams.isAsc = this.formData.isAsc;
+          // 发送请求获取预览数据
+          let res = await dragTablePreview(this.queryParams);
+          this.tableDataList = [];
+          res.rows.forEach((item) => {
+            this.tableDataList.push(item.resultMap);
+          });
+          this.total = res.total;
+          this.isShowPreview = true;
+        } else {
+          this.$message.warning("请完善表单");
+          return false;
+        }
+      });
+
+      // this.$refs.tableForm.validate((val) => {
+      //   if (val) {
+
+      //   } else {
+      //     this.$message.warning("请完善表单");
+      //     return false;
+      //   }
+      // });
+    },
+    // 按钮数据
+    getBtnMapList(tableKey) {
+      let res = this.formData.btnGroupList.map((item) => {
+        return {
+          tableKey,
+          btnKey: item,
+        };
+      });
+      return res;
+    },
+    // tab切换
+    tabhandleClick() {
+      this.menudata = this.activeName != "menuedit" ? true : false;
+    },
+    // 添加数据字段对话框
+    async addDataDialog() {
+      this.staictitle = "添加统计数据字段";
+      this.isShowAddData = true;
+      this.dataType = await this.getDicts("table_statistic_type");
+      this.dataType = this.dataType.data;
+      // console.log(this.dataType)
+    },
+    async updataDialog() {
+      // console.log(this.dataType)
+    },
+    // 修改数据字段
+    upadtaData() {
+      this.dragTableStatisticList.forEach((item, index) => {
+        // console.log(this.dataCountFormData);
+        if (item.id !== undefined && item.id == this.dataCountFormData.id) {
+          this.dragTableStatisticList[index] = this.dataCountFormData;
+        } else if (item.xid == this.dataCountFormData.xid) {
+          this.dragTableStatisticList[index] = this.dataCountFormData;
+        }
+      });
+      this.isShowAddData = false;
+      // console.log(this.dragTableStatisticList)
+      this.dataCountFormData = {};
+    },
+    // 添加数据字段
+    addData() {
+      // console.log(this.dataCountFormData);
+      this.dataCountFormData.xid = Date.now();
+      this.dataCountFormData.tableKey = this.tableKey;
+      this.dragTableStatisticList.push(this.dataCountFormData);
+      this.isShowAddData = false;
+      this.dataCountFormData = {};
+    },
+    // 关闭添加数据字段
+    closeAddDialog() {
+      this.isShowAddData = false;
+      this.dataCountFormData = {};
+    },
+    // 修改统计信息
+    async handleUpdateStat(row) {
+      // console.log(row);
+      this.dataCountFormData = row;
+      this.dataCountFormData.xid = Date.now();
+      this.staictitle = "修改统计数据字段";
+      this.dataType = await this.getDicts("table_statistic_type");
+      this.dataType = this.dataType.data;
+      this.isShowAddData = true;
+      // console.log(this.dataCountFormData)
+      // console.log(this.dragTableStatisticList);
+    },
+    // 删除统计信息
+    handleDeleteStat(row) {
+      this.dragTableStatisticList.forEach((item, index) => {
+        if (item.id == row.id) {
+          this.dragTableStatisticList.splice(index, 1);
+        }
+      });
+    },
+    // 获取当前表描述
+    getTableCommont(tableName, tableList) {
+      return tableList.find((item) => item.tableName == tableName).tableComment;
+    },
+    // 获取按钮组数据
+    async getBtnList() {
+      let res = await listBtn({ isEnablePaging: false, btnParentId: 0 });
+      this.btnGroupOptions = res.rows;
+    },
+  },
+
+};
+</script>
+
+<style scoped lang="scss">
+.ipt {
+  height: 36px;
+  line-height: 36px;
+  font-size: 14px;
+  width: 100%;
+  outline: none;
+  text-align: center;
+  background-color: #fff;
+  border: 1px solid #dcdfe6;
+  color: #606266;
+  display: inline-block;
+  border-radius: 4px;
+}
+.isNullDesc {
+  border-color: #ff4949 !important;
+}
+
+.ipt:focus {
+  border-color: #1890ff;
+}
+::v-deep .right_card {
+  min-height: 500px !important;
+}
+::v-deep .vue-treeselect--has-value .vue-treeselect__input {
+  vertical-align: middle !important;
+}
+.menudata {
+  width: 30% !important;
+}
+.edit {
+  width: 70% !important;
+}
+.mb10 {
+  margin-top: 10px;
+}
+.cardBox {
+  display: flex;
+  align-content: space-between;
+  flex-wrap: wrap;
+  align-content: flex-start;
+}
+.card {
+  /* width:15%; */
+  height: 150px;
+  flex-basis: 15%;
+  margin-bottom: 10px;
+  margin-right: 15px;
+  min-width: 180px;
+  .title {
+    /* width:20%; */
+    font-size: 18px;
+    margin-bottom: 5px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  .description {
+    width: 70%;
+    font-size: 13px;
+    color: #9699a2;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 3;
+    word-break: break-all;
+    float: left;
+  }
+  .type {
+    float: right;
+    margin-top: 40px;
+    .statisticType {
+      font-size: 18px;
+    }
+  }
+  .count {
+    font-size: 25px;
+  }
+}
+.mb8 {
+  ::v-deep .el-col-18 {
+    width: 30% !important;
+    min-width: 220px !important;
+  }
+  ::v-deep .previewbtn {
+    min-width: 190px !important;
+  }
+}
+</style>

ruoyi-ui/src/views/relateTable/components/RelateTableCard.vue

@@ -196,6 +196,7 @@ export default {
       const res = await dragTableInfo({queryMap: {tableKey : tableKey }})
       this.getTableHandle(res, paramsContion = [],defaultVal = {})
     },
+    // 处理请求回来的数据
     async getTableHandle(res){
         this.columns = []
         // 得到当前模版信息 --- sql columns queryWhere

ruoyi-ui/src/views/relateTable/index.vue

@@ -471,7 +471,8 @@
   </div>
 </template>
 <script>
-import { getFormName, getListName, } from "@/api/dragform/form.js";
+import { listTable, removeTableList } from "@/api/dragform/tableList";
+import { getFormName, getListName, dragTablePreview, } from "@/api/dragform/form.js";
 import { delMenu } from "@/api/system/menu";
 import { getMenuList, addMenu, getRouters} from "@/api/menu.js";
 import { getParticMenu, updateMenu } from "@/api/system/menu.js";
@@ -480,6 +481,7 @@ import { mapGetters, mapState } from "vuex";
 import { v4 as uuidv4 } from "uuid";
 import Treeselect from "@riophae/vue-treeselect";
 import "@riophae/vue-treeselect/dist/vue-treeselect.css";
+import json from "highlight.js/lib/languages/json";
 import { getTableInfo } from "@/api/system/table.js";
 
 export default {
@@ -488,11 +490,10 @@ export default {
   dicts: ["sys_time_format", "table_statistic_type"],
   data() {
     return {
-      // 输入框验证规则
       isInputInvalid: false,
+
       // 包含查询依赖字段dialog
       isSearchDialog: false,
-      // 选择依赖条件
       isSearchIndex: null,
       // 依赖方式
       relyOption: null,
@@ -609,6 +610,9 @@ export default {
       tableName: "", // 当前表名称
       selectFields: '', //关联字段
       relateTitle: true,
+      relateTableName: "", //关联表名称
+      relateFields: "", //子集关联字段
+      relateFieldList: [], //子集关联字段数据
       groupTitle: true,
       tableItemForm: {
         tId: "",
@@ -640,6 +644,13 @@ export default {
     await this.getMenuList();
   },
   computed: {
+    selectRelate(){
+      if(this.tableItemForm.tableName =='') return
+      return this.tableList.filter(item => item.tableName !== this.tableItemForm.tableName)
+    },
+    dataArr() {
+      return this.tableFieldList.filter((item) => item.isShow);
+    },
     ...mapGetters(["addRoutes"]),
     ...mapState({
       databaseName: (state) => state.user.dataSource.databaseName,
@@ -672,11 +683,9 @@ export default {
     },
   },
   methods: {
-    // 解决回显数据输入框不能输入问题
     iptChange(){
 	    this.$forceUpdate();  //强制刷新
     },
-    // 表格列表
     async getTableList(){
       let res = await listGroup(this.queryParams);
       this.total = res.total;
@@ -710,7 +719,6 @@ export default {
       this.isSearchDialog = false
       this.tableFieldList[this.serachIndex].isSearch = false
     },
-    // 是否包含查询开关
     isSearchBtn(){
       if(this.relyOption == 0){
         this.conditionDefault[this.isSearchIndex] = this.conditionDefaultValueMap
@@ -1078,6 +1086,8 @@ export default {
     },
     // 修改一个表格数据
     relateOne(row){
+      // console.log(row)
+      // console.log(this.orderByFieldList)
       if(row.tableKey){
         this.menuId = row.menuId
         this.conditionDefault = row.conditionDefaultValueMap
@@ -1205,7 +1215,7 @@ export default {
     // 修改表格回显数据
     async initTableData(tId) {
       let res = await getTableInfo(tId);
-      // console.log('回显数据', res);
+      console.log('回显数据', res);
       if (res.code == 200) {
         if (!this.formData.routePath) {
           this.$message.warning("该表格菜单路由已经删除,请重新配置");
@@ -1222,6 +1232,7 @@ export default {
     },
     // 新增动态表格组
     addTableGroup(formName){
+      
       this.$refs[formName].validate(async (valid) => {
           if (valid) { 
             // console.log('groupList', this.groupList);
@@ -1252,7 +1263,6 @@ export default {
               };
               let result;
              
-              // 新增菜单
               result = await addMenu(payLoad);
 
               if(result.code == 200){
@@ -1284,7 +1294,7 @@ export default {
 
                 // 添加表格组
                 let res = await addGroup(data)
-                // console.log(res);
+                console.log(res);
                 if(res.code == 200){
                   this.$message.success("创建成功");
 
@@ -1306,7 +1316,10 @@ export default {
                 id: this.groupId
               }
               this.addDragData.forEach((item, index) => {
+                // item.sqlKey = tableKeyObj.tableKey
                 let echo = JSON.parse(item.echoData)
+                // echo.formData = this.groupForm
+                // console.log(echo);
                 item.echoData = JSON.stringify(echo)
                 data.groupTableInfo.push({
                   tableKey: item.tableKey,
@@ -1319,7 +1332,7 @@ export default {
                 data.groupDescription = this.groupForm.groupDescription
                 data.groupTableInfo = JSON.stringify(data.groupTableInfo)
                 data.dragTables = this.addDragData
-                // console.log(data);
+                console.log(data);
               let res = await updataGroup(data)
 
               if(res.code == 200){
@@ -1337,7 +1350,6 @@ export default {
                   visible: "0",
                   tenantId: this.tenantId,
               };
-              // 修改菜单
                 let result = await updateMenu(payLoad);
 
                 if(result.code == 200){
@@ -1411,11 +1423,11 @@ export default {
         this.menuId = res.data.dragTables[0].menuId
         
         this.groupForm = res.data
-        res.data.dragTables.forEach(item => {
-          if(item.orderByColumn.includes('.')){
-            item.orderByColumn = item.orderByColumn.split('.')[1]
-          }
-        })
+        // res.data.dragTables.forEach(item => {
+        //   if(item.orderByColumn.includes('.')){
+        //     item.orderByColumn = item.orderByColumn.split('.')[1]
+        //   }
+        // })
         this.addDragData = res.data.dragTables
         // 菜单路由回显
         this.tableDataList = this.groupForm.dragTables
@@ -1473,17 +1485,18 @@ export default {
     },
     // 多选框选中数据
     handleSelectionChange(selection) {
-      // console.log(selection);
+      console.log(selection);
       this.ids = selection.map((item) => item.id);
       this.Keys = selection.map((item) => item.sqlKey);
       selection.forEach(vals => {
         this.menuIds = vals.groupTableInfo.map(item => item.menuId)
-          // console.log( this.menuIds);
+          console.log( this.menuIds);
       })
       this.selection = selection;
       this.single = selection.length !== 1;
       this.multiple = !selection.length;
-    }, 
+    },
+    
     /** 修改按钮操作 */
     async handleUpdate(row) {
       // 兼容勾选单个的修改
@@ -1517,7 +1530,7 @@ export default {
     },
     /** 删除按钮操作 */
     handleDelete(row) {
-      // console.log(row);
+      console.log(row);
       this.tableDataList.forEach((item, index) => {
         if(row.tableKey == item.tableKey) {
           this.tableDataList.splice(index, 1);
@@ -1530,7 +1543,7 @@ export default {
         this.$router.addRoutes(accessRoutes); // 动态添加可访问路由表
       });
     },
-    // 新增一个表格
+    // 新增一个联动表格
     addOneTable() {
       this.relateTitle = true
       if(this.relateTitle){
@@ -1551,6 +1564,23 @@ export default {
       // 注意校验最后一条数据是否合法
       this.isShowForm = true;
     },
+
+    // 重置表单
+    // tableItemFormReset() {
+    //   Object.assign(this.tableItemForm, {
+    //     title: "",
+    //     tableId: "",
+    //     tableName: "",
+    //     showFields: [],
+    //     theRelateField: "",
+    //     executeOptions: [],
+    //   });
+    // },
+    // handlePreview() {
+    //   this.$router.push({
+    //     path: "/system/fromModel/index/relateTableEdit",
+    //   });
+    // },
   },
 };
 </script>

ruoyi-ui/src/views/relateTable/relateTableEdit.vue

@@ -22,6 +22,7 @@
           </div>
         </div>
       </template>
+      <!-- card body -->
     </el-card>
   </div>
 </template>
@@ -30,6 +31,7 @@
 import TableCard from "./components/RelateTableCard.vue";
 import {dragGroupTableInfo} from "@/api/relateTable/index"
 
+
 export default {
   name: "relateTableEdit",
   props: [],
@@ -66,7 +68,7 @@ export default {
     this.getLists()
   },
   methods: { 
-    // 根据groupkey获取表格key和排序
+    // 获取tableKey 和 sort
     async getLists(){
       let res = await dragGroupTableInfo({queryMap: {groupKey: this.groupKey}})
       this.tableLists = JSON.parse(res.msg)