表格联动基本注释

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

@@ -2,7 +2,6 @@
   <el-card class="box-card" :body-style="{ padding: '0px' }">
     <div slot="header" class="clearfix">
       <el-tag class="tag_NO">{{ dtName }}</el-tag>
-      <!-- <span class="title">{{ cardData.title }}</span> -->
       <el-button icon="el-icon-plus" type="primary" @click="handleAdd">新增数据</el-button>
     </div>
     <!-- body -->
@@ -31,7 +30,6 @@
                     type="text"
                     icon="el-icon-edit"
                     @click="handleUpdate(scope.row)"
-
                   >修改
                   </el-button>
                 </el-dropdown-item>
@@ -87,15 +85,12 @@
 import {
   delTableData,
   dragTableInfo,
-  listTable,
   unionListTableData,
   getInfoBySqlKey,
   addTableData,
   batchEdit,
-  getStatisticList
 } from "@/api/tablelist/commonTable";
 import {inputDisableComplete} from "@/utils/other";
-import {dragGroupTableInfo} from "@/api/relateTable/index"
 
 import {camelCase} from "@/utils";
 export default {
@@ -150,9 +145,11 @@ export default {
       dtName: '',
       // 下拉框动态数据
       dynamicData: {},
+      row: null,
+      myContion:null,
+      preRow:{}
     };
   },
-
   computed: {
     // currentValues
     cardDataWatcher: function(){
@@ -194,7 +191,7 @@ export default {
   mounted() {
   },
   methods: {
-    // 请求数据
+    // 根据tablekey请求数据表头数据
     async gettableListHandler(tableKey, paramsContion = [], defaultVal ={}){
       const res = await dragTableInfo({queryMap: {tableKey : tableKey }})
       this.getTableHandle(res, paramsContion = [],defaultVal = {})
@@ -213,12 +210,12 @@ export default {
 
         // 得到查询条件
         this.queryFromWhere = res.data.resultMap.where;
-        //  得到当前列表信息
+        //  得到当前列表表头信息
         this.columns = this.columnsHandler(
           JSON.parse(this.templateInfo.template.dtColumnName)
         );
       
-        if (this.templateInfo !== {}) {
+        if (this.templateInfo) {
             this.tableCondition = this.templateInfo.querySql.tableCondition
             this.tableCondition = this.tableCondition.split('AND')
 
@@ -231,15 +228,21 @@ export default {
               this.queryParams.orderByColumn || ""
             );
             // 根据sql语句查询当前表数据
-           
-            if(this.newsort == 0){
-              this.getDataHandler()
-              // this.queryParams.queryMap.sqlkey = this.templateInfo.template.sqlKey;
+            this.contion = this.templateInfo.template.dtTableName + '.' + this.templateInfo.template.primaryKey
+
+            this.$nextTick(async ()=>{
+              if(this.newsort == 0){
+                // 第一张表请求表数据不需要条件
+             await this.getDataHandler()
+            }else{
+              if(this.myContion){
+                await this.getDataHandler(this.myContion,this.preRow)
+              }
             }
-            let k;
+            })
             
-            // console.log('conditions', this.tableCondition);
-           this.contion = this.templateInfo.template.dtTableName + '.' + this.templateInfo.template.primaryKey
+            //处理三张不同表的依赖关系
+            // let k;
             // this.tableCondition.forEach((item, i) => {
             //   let val = item.split('=')
             //   if(i!==0){
@@ -258,23 +261,25 @@ export default {
     // 获取表数据
     async getDataHandler(contion, list){
       // console.log(contion);
+      this.myContion=contion;
+      this.preRow=list;
       // console.log(list);
+      // 处理请求下一张表数据的依赖条件
       if(contion){
         let key = contion.split('.')
         this.queryParams.queryMap['#{' + contion] = "'" + list[key[1]] + "'";
       }
       this.queryParams.queryMap.sqlkey = this.templateInfo.template.sqlKey;
       
-      // contion?.forEach(item => {
-      //   this.queryParams.queryMap['#{' + item.key + '.' + item.value] = "'" + list[item.value] + "'";
-      // })
       this.tableList = [];
       let tableLists = await unionListTableData(this.queryParams)
       if(tableLists.code == 200){
-         
-          tableLists.rows.forEach((item) => {
-            this.tableList.push(item.resultMap);
-          });
+        // 默认根据这张表的第一条数据请求下一张表的数据
+        this.$emit('getDefaultCardData', this.index)
+
+        tableLists.rows.forEach((item) => {
+          this.tableList.push(item.resultMap);
+        });
         
           // 驼峰转换
           this.tableList = this.tableList.map((item) => {
@@ -304,6 +309,7 @@ export default {
     },
     // 调用父组件方法更新表格数据
     handleCurrentChange(row,event,column,val) {
+      this.row = row
       // console.log(row);
       this.$emit(
         "updateData",
@@ -334,6 +340,14 @@ export default {
         });
       });
     },
+    // 下一表数据
+    getNextCardData(){
+      this.handleCurrentChange(this.row)
+    },
+    // 根据表格第一条数据请求下一个表格的数据
+    getDefaultCard(){
+      this.handleCurrentChange(this.tableList[0])
+    },
     // 使用提交数据类型的按钮获取数据
     tempSubBtn(getData) {
       getData()
@@ -345,7 +359,7 @@ export default {
         });
     },
      //提交编辑结果按钮回调
-     editConfirmHandler() {
+    editConfirmHandler() {
       this.$refs.addFromRef
         .getData()
         .then(async (values) => {
@@ -388,10 +402,22 @@ export default {
               this.$modal.msgError("添加失败");
             }
           }
-          this.tableList = []
-          this.gettableListHandler(this.tableKey)
+          // this.tableList = []
+          if(this.index == 0){
+            this.getDataHandler()
+          } else {
+            // 判断修改是否点击了上一表格的数据
+            if(this.row){
+              this.$emit('getChildData', this.index)
+            } else {
+              this.$emit('getEditHandle', this.index)
+            }
+          }
+          // this.getDataHandler(this.contion, this.row)
+          // this.gettableListHandler(this.tableKey)
           this.defaultValue = {};
           this.open = false;
+
         })
         .catch((res) => {
           console.log(res)
@@ -401,25 +427,30 @@ export default {
     // 取消按钮
     cancel() {
       this.open = false;
+      this.defaultVal = {}
       // this.reset();
     },
     /** 修改按钮操作 */
     handleUpdate(row) {
-      console.log(row)
+      let obj = {}
+      for(let key in row) {
+        let modifiedTable = key.replace(/[A-Z]/g, (match) => `_${match}`).toLowerCase();
+        obj[modifiedTable] = row[key];
+      }
+
       getInfoBySqlKey(this.templateInfo.template.sqlKey).then(({data}) => {
         if (!data || !data.dfVueTemplate) {
           this.$message.error("当前表格未绑定表单!");
           return;
         }
-        Object.assign(this.defaultValue, row);
-
-        // console.log('123', this.defaultValue)
+        Object.assign(this.defaultValue, obj);
+        // console.log(this.defaultValue)
         this.jsonData = JSON.parse(data.dfVueTemplate);
         this.open = true;
         this.title = "修改信息";
         // this.form.password = this.initPassword;
         this.$nextTick(() => {
-          this.$refs.addFromRef.setData(row);
+          this.$refs.addFromRef.setData(obj);
         });
       });
       return;

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

@@ -471,8 +471,7 @@
   </div>
 </template>
 <script>
-import { listTable, removeTableList } from "@/api/dragform/tableList";
-import { getFormName, getListName, dragTablePreview, } from "@/api/dragform/form.js";
+import { getFormName, getListName, } 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";
@@ -481,7 +480,6 @@ 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 {
@@ -490,10 +488,11 @@ export default {
   dicts: ["sys_time_format", "table_statistic_type"],
   data() {
     return {
+      // 输入框验证规则
       isInputInvalid: false,
-
       // 包含查询依赖字段dialog
       isSearchDialog: false,
+      // 选择依赖条件
       isSearchIndex: null,
       // 依赖方式
       relyOption: null,
@@ -610,9 +609,6 @@ export default {
       tableName: "", // 当前表名称
       selectFields: '', //关联字段
       relateTitle: true,
-      relateTableName: "", //关联表名称
-      relateFields: "", //子集关联字段
-      relateFieldList: [], //子集关联字段数据
       groupTitle: true,
       tableItemForm: {
         tId: "",
@@ -644,13 +640,6 @@ 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,
@@ -683,9 +672,11 @@ export default {
     },
   },
   methods: {
+    // 解决回显数据输入框不能输入问题
     iptChange(){
 	    this.$forceUpdate();  //强制刷新
     },
+    // 表格列表
     async getTableList(){
       let res = await listGroup(this.queryParams);
       this.total = res.total;
@@ -719,6 +710,7 @@ export default {
       this.isSearchDialog = false
       this.tableFieldList[this.serachIndex].isSearch = false
     },
+    // 是否包含查询开关
     isSearchBtn(){
       if(this.relyOption == 0){
         this.conditionDefault[this.isSearchIndex] = this.conditionDefaultValueMap
@@ -1086,8 +1078,6 @@ export default {
     },
     // 修改一个表格数据
     relateOne(row){
-      // console.log(row)
-      // console.log(this.orderByFieldList)
       if(row.tableKey){
         this.menuId = row.menuId
         this.conditionDefault = row.conditionDefaultValueMap
@@ -1215,7 +1205,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("该表格菜单路由已经删除,请重新配置");
@@ -1232,7 +1222,6 @@ export default {
     },
     // 新增动态表格组
     addTableGroup(formName){
-      
       this.$refs[formName].validate(async (valid) => {
           if (valid) { 
             // console.log('groupList', this.groupList);
@@ -1263,6 +1252,7 @@ export default {
               };
               let result;
              
+              // 新增菜单
               result = await addMenu(payLoad);
 
               if(result.code == 200){
@@ -1294,7 +1284,7 @@ export default {
 
                 // 添加表格组
                 let res = await addGroup(data)
-                console.log(res);
+                // console.log(res);
                 if(res.code == 200){
                   this.$message.success("创建成功");
 
@@ -1316,10 +1306,7 @@ 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,
@@ -1332,7 +1319,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){
@@ -1350,6 +1337,7 @@ export default {
                   visible: "0",
                   tenantId: this.tenantId,
               };
+              // 修改菜单
                 let result = await updateMenu(payLoad);
 
                 if(result.code == 200){
@@ -1423,11 +1411,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
@@ -1485,18 +1473,17 @@ 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) {
       // 兼容勾选单个的修改
@@ -1530,7 +1517,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);
@@ -1543,7 +1530,7 @@ export default {
         this.$router.addRoutes(accessRoutes); // 动态添加可访问路由表
       });
     },
-    // 新增一个联动表格
+    // 新增一个表格
     addOneTable() {
       this.relateTitle = true
       if(this.relateTitle){
@@ -1564,23 +1551,6 @@ 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/relateMange.vue

@@ -1,1685 +0,0 @@
-<template>
-  <div class="app-container">
-    <el-row :gutter="20">
-      <el-col :span="18" :class="{ edit: menudata }">
-        <el-card shadow="always" :body-style="{ padding: '20px' }">
-          <template #header>
-            <div>
-              <span>字段编辑</span>
-            </div>
-          </template>
-          <!-- <Queryfrom
-            :form-vals="checkedWhere"
-            @getList="getList"
-            ref="mychild"
-          /> -->
-          <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
-                  :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
-                  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="isShow" label="是否显示">
-              <template slot-scope="scope">
-                <el-switch v-model="scope.row.isShow"> </el-switch>
-              </template>
-            </el-table-column>
-          </el-table>
-        </el-card>
-      </el-col>
-      <el-col :span="6" :class="{ menudata: menudata }">
-        <el-tabs v-model="activeName" @tab-click="tabhandleClick">
-          <el-tab-pane label="菜单编辑" name="menuedit">
-            <el-card shadow="always" :body-style="{ padding: '10px' }">
-              <!-- <template #header>
-                <div>
-                  <span>菜单编辑</span>
-                </div>
-              </template> -->
-              <el-form
-                ref="formData"
-                :model="formData"
-                label-width="100px"
-                :rules="rules"
-              >
-                <el-form-item label="菜单名称" prop="menuName">
-                  <el-input v-model="formData.menuName"></el-input>
-                </el-form-item>
-                <el-form-item label="菜单路由" prop="routePath">
-                  <!-- <el-select v-model="formData.routePath" placeholder="请选择路由">
-                    <el-option label="区域一" value="shanghai"></el-option>
-                    <el-option label="区域二" value="beijing"></el-option>
-                  </el-select> -->
-                  <treeselect
-                    :append-to-body="true"
-                    v-model="formData.routePath"
-                    :options="menus"
-                    :normalizer="normalizer"
-                    @change="treeSelectChange"
-                    :show-count="true"
-                    placeholder="请选择父级路由"
-                  />
-                </el-form-item>
-                <el-form-item label="是否显示列表" v-if="false">
-                  <el-switch v-model="formData.isShowList"></el-switch>
-                </el-form-item>
-                <el-form-item label="时间格式" prop="timeFormate">
-                  <el-select
-                    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
-                    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="排序依赖字段">
-                  <el-select
-                    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>
-                  <el-button size="mini" @click="previewHandle">预览</el-button>
-                  <el-button size="mini" type="primary" @click="createHandle">{{
-                    tId ? "确认修改" : "确认创建"
-                  }}</el-button>
-                </el-form-item>
-              </el-form>
-            </el-card>
-          </el-tab-pane>
-        </el-tabs>
-      </el-col>
-    </el-row>
-
-    <el-dialog title="效果预览" :visible.sync="isShowPreview" width="50%">
-      <div class="cardBox">
-        <el-card
-          shadow="hover"
-          :body-style="{ padding: '20px' }"
-          class="card"
-          v-for="(item, index) in deepragTableStatisticList"
-          :key="index"
-        >
-          <el-tooltip
-            class="item"
-            effect="dark"
-            :content="item.statisticTitle"
-            placement="top-start"
-          >
-            <div class="title">{{ item.statisticTitle ? item.statisticTitle : item.statisticDescription}}</div>
-          </el-tooltip>
-
-          <!-- <el-tooltip
-            class="item"
-            effect="dark"
-            :content="item.statisticDescription"
-            placement="top-start"
-          >
-            <div class="description">{{ item.statisticDescription }}</div>
-          </el-tooltip> -->
-
-          <div class="type">
-            <!-- <div class="statisticType">{{ item.statisticType }}</div> -->
-            <div class="count">统计结果</div>
-          </div>
-        </el-card>
-      </div>
-
-      <el-row :gutter="10" class="mb8">
-        <el-col :span="18">
-          <el-input placeholder="请输入" clearable />
-        </el-col>
-
-        <el-col :span="6" class="previewbtn">
-          <el-button
-            type="primary"
-            icon="el-icon-search"
-            size="small"
-            @click="() => {}"
-            >搜索</el-button
-          >
-          <el-button icon="el-icon-refresh" size="small" @click="() => {}"
-            >重置</el-button
-          >
-        </el-col>
-      </el-row>
-
-      <el-row :gutter="10" class="mb8">
-        <el-col :span="1.5">
-          <el-button
-            type="primary"
-            plain
-            icon="el-icon-plus"
-            size="mini"
-            @click="() => {}"
-            >新增
-          </el-button>
-        </el-col>
-        <el-col :span="1.5">
-          <el-button
-            type="success"
-            plain
-            icon="el-icon-edit"
-            size="mini"
-            :disabled="false"
-            @click="() => {}"
-            >修改
-          </el-button>
-        </el-col>
-        <el-col :span="1.5">
-          <el-button
-            type="danger"
-            plain
-            icon="el-icon-delete"
-            size="mini"
-            :disabled="false"
-            @click="() => {}"
-            >删除
-          </el-button>
-        </el-col>
-        <el-col :span="1.5">
-          <el-button plain icon="el-icon-upload2" size="mini" @click="() => {}"
-            >导入
-          </el-button>
-        </el-col>
-        <el-col :span="1.5">
-          <el-button
-            type="warning"
-            plain
-            icon="el-icon-download"
-            size="mini"
-            @click="() => {}"
-            >导出
-          </el-button>
-        </el-col>
-        <!-- <right-toolbar
-          showSearch.sync="true"
-          @queryTable="() => {}"
-        ></right-toolbar> -->
-      </el-row>
-      <el-table :data="tableDataList" @selection-change="() => {}">
-        <el-table-column
-          type="selection"
-          width="55"
-          align="center"
-        ></el-table-column>
-        <!-- <span v-for="(key, val) in columns" :key="key">
-          <el-table-column :label="key" align="center" :prop="val" />
-        </span> -->
-        <el-table-column
-          v-for="item in columns"
-          :key="item.key + item.value"
-          :label="item.value"
-          align="center"
-          :prop="toUpperCase(item.key)"
-        />
-        <el-table-column
-          label="操作"
-          align="center"
-          class-name="small-padding fixed-width"
-        >
-          <!-- <template slot-scope="scope"> -->
-          <template>
-            <!-- <el-button
-              size="mini"
-              type="text"
-              icon="el-icon-edit"
-              @click="() => {}"
-              >修改
-            </el-button>
-            <el-button
-              size="mini"
-              type="text"
-              icon="el-icon-delete"
-              @click="() => {}"
-              >删除
-            </el-button> -->
-            <el-dropdown>
-              <el-button type="warning" plain size="small">
-                处理<i class="el-icon-arrow-down el-icon--right"></i>
-              </el-button>
-              <el-dropdown-menu slot="dropdown">
-                <el-dropdown-item
-                  ><el-button
-                    size="mini"
-                    type="text"
-                    icon="el-icon-edit"
-                    @click="() => {}"
-                    >修改</el-button
-                  ></el-dropdown-item
-                >
-                <el-dropdown-item
-                  ><el-button
-                    size="mini"
-                    type="text"
-                    icon="el-icon-delete"
-                    @click="() => {}"
-                    >删除</el-button
-                  >
-                </el-dropdown-item>
-              </el-dropdown-menu>
-            </el-dropdown>
-          </template>
-        </el-table-column>
-      </el-table>
-      <pagination
-        v-show="total > 0"
-        :total="total"
-        :page.sync="queryParams.pageNum"
-        :limit.sync="queryParams.pageSize"
-        @pagination="pageList"
-      />
-      <template #footer>
-        <span>
-          <el-button @click="isShowPreview = false">关闭</el-button>
-          <el-button type="primary" @click="createHandle">{{
-            tId ? "确认修改" : "确认创建"
-          }}</el-button>
-        </span>
-      </template>
-    </el-dialog>
-
-    <!-- 添加数据统计对话框 -->
-    <el-dialog
-      :title="staictitle"
-      :visible.sync="isShowAddData"
-      width="30%">
-      
-      <el-form 
-      label-width="100px" 
-      :model="dataCountFormData">
-        <el-form-item label="统计标题" prop="statisticTitle">
-          <el-input v-model="dataCountFormData.statisticTitle"></el-input>
-        </el-form-item>
-
-        <el-form-item label="统计数据">
-          <el-select
-            v-model="dataCountFormData.statisticField"
-            placeholder="请选择统计字段"
-          >
-            <el-option
-              v-for="item in dataArr"
-              :key="item.id"
-              :label="item.fieldName"
-              :value="item.tableName + '.'  + item.fieldName"
-            >
-            <span style="float: left;margin-right: 5px">{{ item.tableName }}  </span>
-            <span style="float: right; color: #8492a6; font-size: 13px">{{ item.fieldName }}</span>
-            </el-option>
-          </el-select>
-        </el-form-item>
-        <!-- <el-form-item label="类型">
-          <el-select v-model="dataCountFormData.type" placeholder="请选择类型">
-            <el-option label="数量" value="num"></el-option>
-            <el-option label="状态" value="status"></el-option> -->
-        <el-form-item label="统计类型">
-          <el-select 
-          v-model="dataCountFormData.statisticType" 
-          placeholder="请选择统计类型">
-            <el-option v-for="item in dataType" :key="item.dictCode" :label="item.dictLabel" :value="item.dictValue"></el-option>
-            <!-- <el-option label="状态" value="status"></el-option> -->
-          </el-select>
-        </el-form-item>
-
-        <el-form-item label="统计描述" prop="statisticDescription">
-          <el-input v-model="dataCountFormData.statisticDescription"></el-input>
-        </el-form-item>
-        <el-form-item label="统计对象" prop="statisticObject">
-          <el-input v-model="dataCountFormData.statisticObject"></el-input>
-        </el-form-item>
-      </el-form>
-      <span slot="footer" class="dialog-footer">
-        <el-button @click="closeAddDialog">取 消</el-button>
-        <el-button v-if="staictitle == '修改统计数据字段'" type="primary" @click="upadtaData">确 定</el-button>
-
-        <el-button v-else type="primary" @click="addData">确 定</el-button>
-      </span>
-    </el-dialog>
-  </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 { 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";
-export default {
-  name: "tableMange",
-  dicts: ["sys_time_format", "table_statistic_type"],
-  props: [],
-  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, //表格数据总数
-      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: "是否统计",
-        },
-      ], //表头列表
-
-      // 右侧筛选条件勾选数据
-      // checkedList: [], //勾选的查询框
-      // checkedWhere:[],//需要渲染的查询表单
-
-      // 右侧表单编辑
-      formData: {
-        menuName: "",
-        routePath: undefined,
-        isShowList: true,
-        timeFormate: "",
-        orderByColumn: "",
-        isAsc: false,
-        primaryKey: "",
-      },
-      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,
-      // 显示添加字段对话框
-      isShowAddData: false,
-      dataType : [],
-      uuid: '',
-    };
-  },
-  computed: {
-    // 数据字段
-    dataArr() {
-      return this.tableFieldList.filter((item) => item.isShow);
-    },
-    ...mapState({
-      databaseName: (state) => state.user.dataSource.databaseName,
-      databaseType: (state) => state.user.dataSource.databaseType,
-      username: (state) => state.user.dataSource.username,
-    }),
-    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.filter((item) => item.isShow);
-      return this.tableFieldList;
-    },
-    primaryKeyList() {
-      return this.tableFieldList.filter((item) => !item.isChildren);
-    },
-    // menuOrderNum() {
-    //   if (!this.formData.routePath) return 0;
-    //   let targetMenu = this.getTargetMenu(this.menus);
-    //   console.log(targetMenu);
-    //   if (targetMenu.children?.length) {
-    //     return targetMenu.children.length;
-    //   } else {
-    //     return 0;
-    //   }
-    // },
-  },
-  watch: {
-    tableName: function (val) {
-      if (val) {
-        this.relationTableList = this.tableList
-          .filter((item) => item.tableName != val)
-          .map((item) => {
-            return {
-              tableName: item.tableName,
-              tableComment: item.tableComment,
-            };
-          });
-      } else {
-        this.relationTableList = [];
-      }
-    },
-    "formData.routePath"(nval, oval) {
-      let targetMenu = this.getTargetMenu(this.menus);
-      this.menuOrderNum = targetMenu.children ? targetMenu.children.length : 0;
-    },
-  },
-  methods: {
-    // 字段描述验证规则
-    // blurval(value){
-    //   this.isInputInvalid = value == '' ?  true : false;
-    // },
-    // 树形控件change回调
-    treeSelectChange(val) {
-      //没有change事件
-      console.log("val", val);
-    },
-    // 获取目标menu
-    getTargetMenu(menus) {
-      for (let i = 0; i < menus.length; i++) {
-        if (menus[i].menuId == this.formData.routePath) {
-          return menus[i];
-        } else if (menus.children?.length) {
-          return this.getTargetMenu(menus.children);
-        }
-      }
-      return false;
-    },
-
-    /** 查询列表 */
-    getList(queryParams) {
-      if (!this.tableName) return;
-      let data = {
-        databaseName: this.databaseName,
-        databaseType: this.databaseType,
-        tableName: this.tableName,
-      };
-      console.log(data);
-      // 获取当前表单结构信息
-      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,
-            relationFieldList: [],
-          };
-        });
-        // 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 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,
-          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;
-    },
-
-    // 勾选框回调
-    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;
-          }
-        },
-      });
-    },
-    /** 转换菜单数据结构 */
-    normalizer(node) {
-      if (node.children && !node.children.length) {
-        delete node.children;
-      }
-      return {
-        id: node.menuId,
-        label: node.menuName,
-        children: node.children,
-      };
-    },
-    // 获取路由表单数据
-    async getMenuList() {
-      let res = await getMenuList();
-      this.menus = this.handleTree(res.data, "menuId");
-    },
-    // 校验字段合法性(递归版)
-    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 sqlType = "oracle";
-      let sql = "";
-      // mysql
-      sql += "SELECT ";
-      let fieldNameArr = [],
-        relaTypeArr = [];
-      this.getSQLString(
-        this.tableFieldList,
-        fieldNameArr,
-        relaTypeArr,
-        sqlType
-      );
-      // if (discriISEmpty) {
-      //   return false;
-      // }
-      let isNeedUsername = sqlType == "oracle" ? this.username + "." : "";
-      let asOrSpace = sqlType == "oracle" ? " " : " AS ";
-      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;
-          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;
-      //   }
-      // });
-    },
-    // 创建回调
-    async createHandle() {
-      // console.log(123);
-      // this.sqlKey = uuidv4();
-      this.isInputInvalid = true
-      this.$refs.formData.validate(async (valid) => {
-        if (valid) {
-          // 检验表单合法性
-          let validRes = this.validateTableData(this.tableFieldList);
-          if (!validRes.val) {
-            this.$message.error(validRes.msg);
-            return;
-          }
-          let columns = [],
-            searchFieldList = [],
-            tableExportField = {};
-          this.getCol(
-            this.tableFieldList,
-            columns,
-            searchFieldList,
-            tableExportField
-          );
-
-          let echoData = {
-            tableName: this.tableName,
-            tableFieldData: this.tableFieldList,
-            formData: this.formData,
-          };
-          if (!searchFieldList.length) {
-            this.$message.warning("请至少选择一个包含查询字段");
-            return false;
-          }
-          // 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;
-          // }
-          this.uuid = uuidv4();
-          this.tableKey = uuidv4();
-          // 表单
-          let result;
-          if (this.tId) {
-            let payLoad = {
-              menuId: this.menuId,
-              menuName: this.formData.menuName,
-              parentId: this.formData.routePath,
-              component: "tablelist/commonTable/listInfo",
-              icon: "",
-              isCache: "0",
-              isFrame: "1",
-              menuType: "C",
-              orderNum: this.menuOrderNum,
-              status: "0",
-              visible: "0",
-            };
-            result = await updateMenu(payLoad);
-          } else {
-            let sqlKeyObj = {
-              sqlkey: this.uuid,
-            };
-            let payLoad = {
-              component: "tablelist/commonTable/listInfo",
-              icon: "",
-              isCache: "0",
-              isFrame: "1",
-              menuName: this.formData.menuName,
-              menuType: "C",
-              orderNum: this.menuOrderNum,
-              parentId: this.formData.routePath,
-              path: this.uuid,
-              query: JSON.stringify(sqlKeyObj),
-              status: "0",
-              visible: "0",
-            };
-            result = await addMenu(payLoad);
-          }
-
-          if (result.code == 200) {
-            // 更新路由
-            this.reloadRouter();
-
-            // let isAsc = this.formData.isAsc == "ASC" ? 0 : 1;
-            let data = {
-              tId: this.tId,
-              dtName: this.formData.menuName,
-              // menuId: this.formData.routePath,
-              tableKey: this.tableKey, //  暂定
-              dtTableName: this.tableName,
-              primaryKey: this.formData.primaryKey,
-              orderByColumn: this.formData.orderByColumn,
-              sortOrder: this.formData.isAsc,
-              sqlKey: this.uuid,
-              dtColumnName: columns, //列字段标题名称(存储显示字段信息
-              // dtColumnName: JSON.stringify(columns).replace(/"/g, "'"), //列字段标题名称(存储显示字段信息
-              timeFormat: this.formData.timeFormate,
-              searchFieldList: searchFieldList, //搜索字段数组
-              tableSql: this.getSQLStr(), //  暂定
-              tableExportField: tableExportField, //导出字段名及列名
-              echoData: JSON.stringify(echoData),
-            };
-            // this.tableFieldList.forEach((item) => {
-            //   if (item.isShow) {
-            //     let tempObj = {};
-            //     tempObj[item.fieldName] = item.fieldDescription;
-            //     data.dtColumnName.push(tempObj);
-            //     if (item.children.length) {
-            //       item.children.map((child) => {
-            //         let tempObj = {};
-            //         tempObj[child.fieldName] = child.fieldDescription;
-            //         data.dtColumnName.push(tempObj);
-            //       });
-            //     }
-            //   }
-            //   if (item.isSearch) {
-            //     data.searchFieldList.push(item.fieldName);
-            //   }
-            //   if (item.isExport) {
-            //     data.tableExportField[item.fieldName] = item.fieldDescription;
-            //   }
-            // });
-
-            let res;
-            if (this.tId) {
-              data.menuId = this.menuId;
-              data.sqlKey = this.editData.sqlKey;
-              res = await editTable(data);
-            } else {
-              data.menuId = result.data;
-              res = await addDragTable(data);
-            }
-            this.dragTableStatisticList?.forEach(item => {
-              this.staticSqlKey = uuidv4()
-              // console.log(item)
-              let key = item.statisticType + '(' + item.statisticField + ')'+ ' as result'
-              this.tableSqlList.push({
-                tableSql: this.getStaticSQL(key), 
-                sqlKey: this.staticSqlKey, 
-              })
-              this.searchFieldList = searchFieldList
-              item.sqlKey = this.staticSqlKey
-              item.tableKey = this.tableKey
-            })
-
-            if(res.code == 200 && this.dragTableStatisticList.length !== 0){
-              this.countHandle()
-            }
-            // 关闭当前页面
-            if (this.tId) {
-              if (res.code == 200) {
-                this.$message.success("修改成功");
-              } else {
-                this.$message.warning("修改失败");
-              }
-              this.$tab.closePage();
-              this.$router.push({
-                path: "/system/fromModel/index/tablelist",
-              });
-            } else {
-              if (res.code == 200) {
-                this.$message.success("创建成功");
-              } else {
-                this.$message.warning("创建失败");
-              }
-              this.isShowPreview = false;
-            }
-          }
-        } else {
-          this.$message.warning("请完善表单");
-          return false;
-        }
-      });
-    },
-    // 修改表格回显数据
-    async initTableData(tId) {
-      let res = await getTableInfo(tId);
-      if (res.code == 200) {
-        this.dragTableStatisticList = res.data.dragTableStatisticList
-        let echoData = JSON.parse(res.data.echoData);
-        this.tableName = echoData.tableName;
-        this.tableFieldList = echoData.tableFieldData;
-        let {
-          isShowList,
-          timeFormate,
-          orderByColumn,
-          isAsc,
-          primaryKey,
-          menuName,
-        } = echoData.formData;
-        Object.assign(this.formData, {
-          menuName,
-          isShowList,
-          timeFormate,
-          orderByColumn,
-          isAsc,
-          primaryKey,
-        });
-        this.formData.routePath = this.getParentMenuId(
-          res.data.menuId,
-          this.menus,
-          {}
-        );
-
-        if (!this.formData.routePath) {
-          this.$message.warning("该表格菜单路由已经删除,请重新配置");
-        }
-        // this.formData.routePath
-        this.editData = res.data;
-        let val = await getParticMenu(res.data.sqlKey);
-        if (val.code == 200) {
-          this.menuId = val.data.menuId;
-        }
-      } else {
-        this.$message.error("数据回显失败");
-      }
-    },
-    // 获取父级menuId
-    getParentMenuId(menuId, menus) {
-      let res;
-      for (let i = 0; i < menus.length; i++) {
-        let item = menus[i];
-        if (item.menuId == menuId) {
-          res = item.parentId;
-          break;
-        } else if (item.children?.length) {
-          if (
-            this.getParentMenuId(
-              menuId,
-              JSON.parse(JSON.stringify(item.children))
-            )
-          ) {
-            res = this.getParentMenuId(
-              menuId,
-              JSON.parse(JSON.stringify(item.children))
-            );
-          }
-        }
-      }
-      return res;
-    },
-    // tab切换
-    tabhandleClick() {
-      this.menudata = this.activeName === "datacount" ? 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 = {};
-    },
-    // 确定统计
-    countHandle(){
-      addStatistic({
-        dragTableStatisticList: this.dragTableStatisticList,
-        tableSqlList: this.tableSqlList,
-        searchFieldList: this.searchFieldList,
-        dtTableName: this.tableName
-      }).then(res=> {
-        // console.log(res)
-      })
-    },
-    // 修改统计信息
-    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) => {
-        // console.log(item);
-        if(item.id == row.id){
-          this.dragTableStatisticList.splice(index, 1);
-        }
-      })
-    },
-  },
-  created() {},
-    async mounted() {
-      this.getAllTable();
-      this.initDragTable();
-      await this.getMenuList();
-      if (this.$route.query.tId) {
-        this.tId = this.$route.query.tId;
-        this.initTableData(this.tId);
-      }
-  },
-};
-</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/relateTableEdit.vue

@@ -11,6 +11,9 @@
             <TableCard
               :ref="'childComponent' + index"
               @updateData="updateDataList"
+              @getChildData="getChildData"
+              @getDefaultCardData="getDefaultCardData"
+              @getEditHandle="getEditHandle"
               :tableKey="cardData.tableKey"
               :sort="cardData.sort"
               :cardData="cardData"
@@ -19,7 +22,6 @@
           </div>
         </div>
       </template>
-      <!-- card body -->
     </el-card>
   </div>
 </template>
@@ -27,17 +29,6 @@
 <script>
 import TableCard from "./components/RelateTableCard.vue";
 import {dragGroupTableInfo} from "@/api/relateTable/index"
-import {
-  delTableData,
-  dragTableInfo,
-  listTable,
-  unionListTableData,
-  getInfoBySqlKey,
-  addTableData,
-  batchEdit,
-  getStatisticList
-} from "@/api/tablelist/commonTable";
-import {camelCase} from "@/utils";
 
 export default {
   name: "relateTableEdit",
@@ -46,86 +37,6 @@ export default {
   data() {
     return {
       tableLists:[],
-      // dataList: [
-      //   {
-      //     tableId: "1",
-      //     title: "一级表格",
-      //     tableData: [
-      //       {
-      //         date: "2016-05-02",
-      //         name: "王小虎",
-      //         address: "上海市普陀区金沙江路 1518 弄",
-      //       },
-      //       {
-      //         date: "2016-05-04",
-      //         name: "王小虎",
-      //         address: "上海市普陀区金沙江路 1517 弄",
-      //       },
-      //       {
-      //         date: "2016-05-01",
-      //         name: "王小虎",
-      //         address: "上海市普陀区金沙江路 1519 弄",
-      //       },
-      //       {
-      //         date: "2016-05-03",
-      //         name: "王小虎",
-      //         address: "上海市普陀区金沙江路 1516 弄",
-      //       },
-      //     ],
-      //   },
-      //   {
-      //     tableId: "2",
-      //     title: "二级表格",
-      //     tableData: [
-      //       {
-      //         date: "2016-05-02",
-      //         name: "王小虎",
-      //         address: "上海市普陀区金沙江路 1518 弄",
-      //       },
-      //       {
-      //         date: "2016-05-04",
-      //         name: "王小虎",
-      //         address: "上海市普陀区金沙江路 1517 弄",
-      //       },
-      //       {
-      //         date: "2016-05-01",
-      //         name: "王小虎",
-      //         address: "上海市普陀区金沙江路 1519 弄",
-      //       },
-      //       {
-      //         date: "2016-05-03",
-      //         name: "王小虎",
-      //         address: "上海市普陀区金沙江路 1516 弄",
-      //       },
-      //     ],
-      //   },
-      //   {
-      //     tableId: "3",
-      //     title: "三级表格三级表格三级表格三级表格",
-      //     tableData: [
-      //       {
-      //         date: "2016-05-02",
-      //         name: "王小虎",
-      //         address: "上海市普陀区金沙江路 1518 弄",
-      //       },
-      //       {
-      //         date: "2016-05-04",
-      //         name: "王小虎",
-      //         address: "上海市普陀区金沙江路 1517 弄",
-      //       },
-      //       {
-      //         date: "2016-05-01",
-      //         name: "王小虎",
-      //         address: "上海市普陀区金沙江路 1519 弄",
-      //       },
-      //       {
-      //         date: "2016-05-03",
-      //         name: "王小虎",
-      //         address: "上海市普陀区金沙江路 1516 弄",
-      //       },
-      //     ],
-      //   },
-      // ],
       // 共通查询参数接受子组件的参数
       queryParams: {
         pageNum: 1, // 第几页
@@ -155,23 +66,62 @@ export default {
     this.getLists()
   },
   methods: { 
+    // 根据groupkey获取表格key和排序
     async getLists(){
       let res = await dragGroupTableInfo({queryMap: {groupKey: this.groupKey}})
       this.tableLists = JSON.parse(res.msg)
     },
+    // 子组件触发点击事件 获得下一表格数据
     updateDataList(row,index) {
-      // let tableKey = this.tableLists[index+1].tableKey
+      if(index == 0){
+        this.tableLists.forEach((item, i) => {
+          if(i !== 0){
+            this.$refs['childComponent'+i][0].tableList = []
+            this.$refs['childComponent'+i][0].total = 0
+          }
+        })
+      }
       let beforeChild = this.$refs['childComponent'+index][0]
       index++
-      console.log(beforeChild);
-      const chlid = this.$refs['childComponent'+index][0]
-      // console.log(chlid);
-      if(!chlid) return
-      // let contion = beforeChild.condition
-      // let tableList = beforeChild.tableList[0]
-      // console.log(contion,tableList);
-      chlid.getDataHandler(beforeChild.contion,row)
+      // 判断是不是最后一个表格触发点击事件
+      if(this.$refs['childComponent'+index]){
+        const chlid = this.$refs['childComponent'+index][0]
+        if(!chlid) return
+        chlid.getDataHandler(beforeChild.contion,row)
+      }
     },
+    // 新增数据调用
+    getChildData(index) {
+      // console.log(index);
+      let targetRef = 'childComponent'
+      if(index == 0){
+        targetRef += index
+      }else{
+        targetRef += (index - 1)
+      }
+      this.$nextTick(()=>{
+        this.$refs[targetRef][0].getNextCardData()
+      })
+    },
+    // 默认不点击获取表格数据
+    getDefaultCardData(index){
+      let currentChild = this.$refs['childComponent'+index][0]
+      this.$nextTick(() => {
+        if(this.$refs['childComponent' + (index+1)]){
+          let nextChild = this.$refs['childComponent' + (index+1)][0]
+          nextChild.getDataHandler(currentChild.contion, currentChild.tableList[0])
+        }
+
+      })
+    },
+    // 不点击上一表格数据时修改调用函数
+    getEditHandle(index){
+      let beforeChild = this.$refs['childComponent'+(index - 1)][0]
+
+      let currentRef = this.$refs['childComponent'+index][0]
+
+      currentRef.getDataHandler(beforeChild.contion, beforeChild.tableList[0])
+    }
   },
 };
 </script>