mec-cloud_-intelligent-manufacturing_crm/ruoyi-ui/src/views/relateTable/index.vue

<template>
  <div class="app-container">
    <el-form
      :model="queryParams"
      ref="queryForm"
      size="small"
      :inline="true"
      v-show="showSearch"
      label-width="68px"
    >
      <el-form-item label="表格组名" prop="dtName">
        <el-input
          v-model="queryParams.dtName"
          placeholder="请输入表格组名"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="handleQuery"
          >搜索</el-button
        >
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
          >重置</el-button
        >
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          >新增123</el-button
        >
      </el-col>

      <el-col :span="1.5">
        <el-button
          type="danger"
          plain
          icon="el-icon-delete"
          size="mini"
          :disabled="multiple"
          @click="handleDelete"
          >删除</el-button
        >
      </el-col>
      <el-col :span="1.5">
        <el-button type="danger" plain size="mini" @click="handlePreview"
          >动态页面</el-button
        >
      </el-col>
    </el-row>

    <el-table
      v-loading="loading"
      :data="tableGroupList"
      ref="tableRef"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="表格组名" align="center" prop="groupname" />
      <el-table-column label="描述" align="center" prop="groupdescribe" />
      <el-table-column label="表格数" align="center" prop="groupcount" />

      <el-table-column
        label="成员表格"
        width="180"
        >
        <template slot-scope="scope">
          <el-popover trigger="hover" placement="top">
            <p v-for="(item,index) in scope.row.contentList"> {{ item.tableName }}</p>
            
            <div slot="reference" class="name-wrapper">
            <el-tag size="medium">{{ scope.row.tableKey }}</el-tag>
            </div>
          </el-popover>
        </template>
      </el-table-column>

      <el-table-column
        label="操作"
        align="center"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="scope">
          <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="UpdateTableGroup(scope.row)"
                  >修改
                </el-button>
              </el-dropdown-item>
              <el-dropdown-item>
                <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-delete"
                  @click="handleDelete(scope.row)"
                  >删除
                </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="getList"
    />
    <!-- 新增联动表格组弹窗 -->
    <el-dialog :title="groupTitle ? '新增动态表格组' : '修改动态表格组'" :visible.sync="isShowTable">
      <div class="dialog_wrap">
        <el-button
          type="primary"
          size="small"
          icon="el-icon-plus"
          @click="addOneTable"
          class="mb10"
          >新增</el-button
        >
        <el-form :model="groupForm" :rules="grouprules" ref="groupForm" label-width="100px" class="demo-ruleForm">
          <el-form-item label="表格组名" prop="groupname">
            <el-input v-model="groupForm.groupname" placeholder="请输入表格组名"></el-input>
          </el-form-item>
          <el-form-item label="表格描述" prop="groupdescribe">
            <el-input v-model="groupForm.groupdescribe" placeholder="请输入表格描述"></el-input>
          </el-form-item>
          <el-form-item label="菜单路由" prop="routePath">
          <div class="treeselect">
            <treeselect
              :append-to-body="true"
              v-model="groupForm.routePath"
              :options="menus"
              :normalizer="normalizer"
              :show-count="true"
              placeholder="请选择父级路由"
            />
          </div>
           
          </el-form-item>
        <el-form-item>
          <el-table
          :data="tableDataList"
          border
          stripe
          @selection-change="handleSelectionChange"
        >
          <el-table-column label="序号" type="index" />
          <el-table-column label="表格标题" prop="title" />
          <el-table-column
            label="表格名称"
            prop="tableName"
          ></el-table-column>
          <el-table-column label="关联字段" prop="selectFields">
            <template slot-scope="scope">
              {{ scope.row.selectFields }}
            </template>
          </el-table-column>

          <el-table-column
            label="操作"
            align="center"
            class-name="small-padding fixed-width"
          >
            <template slot-scope="scope">
              <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="relateOne(scope.row)"
                      >修改
                    </el-button>
                  </el-dropdown-item>
                  <el-dropdown-item>
                    <el-button
                      size="mini"
                      type="text"
                      icon="el-icon-delete"
                      @click="handleDelete(scope.row)"
                      >删除
                    </el-button>
                  </el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </template>
          </el-table-column>
          </el-table>
        </el-form-item>
        
        <el-form-item class="btn">
          <el-button @click="isShowTable = false">取消</el-button>
          <el-button type="primary" @click="addTableGroup('groupForm')">确认</el-button>
        </el-form-item>
        </el-form>
      </div>
    </el-dialog>

    <!-- 编辑某一条表格数据弹窗 -->
    <el-dialog :title="relateTitle ? '添加关联表格' :'修改关联表格' " :visible.sync="isShowForm" >
      <div class="formWrap">
        <el-form
          :rules="tableItemRules"
          ref="tableItemForm"
          style="max-width: 750px; width: 1000px"
          :model="tableItemForm"
          label-width="100px"
        >
          <el-form-item label="表格标题:" prop="title">
            <el-input
              v-model="tableItemForm.title"
              style="max-width: 221px"
            ></el-input>
          </el-form-item>
          <el-form-item label="表格名称:" prop="tableName">
            <el-select
              v-model="tableItemForm.tableName"
              @change="getList()"
              placeholder="请选择表格名称"
            >
              <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="关联字段:" prop="selectFields">
            <el-select
              v-model="tableItemForm.selectFields"
              placeholder="请选择关联字段"
            >
            <el-option
              v-for="item in tableFieldList"
              :key="item.fieldName"
              :label="item.fieldDescription"
              :value="item.fieldName"
            >
              <span style="float: left">{{ item.fieldDescription }}</span>
              <span style="float: right; color: #8492a6; font-size: 13px">{{
                item.fieldName
              }}</span>
            </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="展示字段:" prop="FieldList">
            <el-table
            :data="tableFieldList"
            border
            ref="dragTable"
            row-key="id"
            max-height="500px"
            class="tablefiled"
            >
            
            <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 width="95px" 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, index) in scope.row.relationTableList"
                    :key="index"
                    :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 width="95px" 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, index) in scope.row.relaFieldNameList"
                    :key="index"
                    :label="item.fieldDescription"
                    :value="item.fieldName"
                  >
                  </el-option>
                </el-select>
              </template>
            </el-table-column>
            <el-table-column width="95px" 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, index) in relaTypeList"
                    :key="index"
                    :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-column prop="isSearch" label="是否包含查询">
              <template slot-scope="scope">
                <el-switch v-model="scope.row.isSearch"> </el-switch>
              </template>
            </el-table-column>
          </el-table>
          </el-form-item>
          <el-form-item class="btn">
            <el-button @click="cancelAddHandler">取消</el-button>
            <el-button type="primary" @click="confirmAddHandler('tableItemForm')">确认</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-dialog>
  </div>
</template>
<script>
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 } from "@/api/menu.js";
import { addGroup, listGroup } from '@/api/relateTable/index.js'
import { addDragTable } from "@/api/tablelist/commonTable.js";
import { mapGetters, mapState } from "vuex";
import DictData from "@/components/DictData";
import { FastBackwardFill, async } from "@/components/updateModule/k-form-design/lib/k-form-design.common";
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";

export default {
  name: "relateTable",
  components: { Treeselect },

  data() {
    return {
      addDragData:[],
      // 创建data需要的参数
      // data: {
      //   tId:'',
      //   dtName: '表格标题',
      //   tableKey: 'uuid随机生成',
      //   dtTableName: '表格名称',
      //   primaryKey: '关联字段',
      //   // 排序依赖字段可以为空
      //   orderByColumn: '',
      //   sortOrder: false,
      //   sqlKey:'uuid随机生成',
      //   // getcol递归获取
      //   dtColumnName: 'columns',
      //   timeFormat: 'yyyy-MM-dd',
      //   // 是否包含查询['表格名称.包含查询得数据字段']
      //   searchFieldList: [],
      //   tableSql: this.getSQLStr(),
      //   echoData: JSON.stringify()
      // },
      groupList:[],
      menus: [], //路由列表数据
      // 添加关联表格校验规则
      tableItemRules:{
        title:[{ required: true, message: '请输入表格标题', trigger: 'blur' }],
        tableName:[{ required: true, message: '请选择表格名称', trigger: 'change' }],
        selectFields: [{ required: true, message: '请选择关联字段', trigger: 'change' }],
      },
      groupForm: {
        groupname: '',
        groupdescribe:'',
        routePath: undefined,
      },
      grouprules:{
        groupname:[{ required: true, message: '请输入表格组名', trigger: 'blur' }],
        groupdescribe:[{ required: true, message: '请输入表格描述', trigger: 'blur' }],
        routePath: [
          { required: true, message: "请选择路由", trigger: "change" },
        ],
      },
      menuOrderNum: 0,
      // 关联方式
      relaTypeList: [
        {
          label: "等值连接",
          value: "INNER JOIN",
        },
        {
          label: "左连接",
          value: "LEFT JOIN",
        },
        {
          label: "右连接",
          value: "RIGHT JOIN",
        },
      ],
      searchFieldList: [],
      // 修改row
      updataGroupRow:{},
      // 遮罩层
      loading: false,
      // 选中数组
      ids: [],
      // 选中数组(包含所有数据)
      selection: [],
      Keys: [],
      menuIds: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      tableList: [], //所有表格列表
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        dtName: null,
        dtNickname: null,
        tableKey: null,
        sqlKey: null,
        dtTableName: null,
        dtNotes: null,
        dtColumnName: null,
        timeFormat: null,
        spare: null,
        spare1: null,
        isSelection: null,
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {},

      // dialog弹窗数据
      isShowTable: false,
      isShowForm: false,
      // 新增关联表数据
      tableDataList: [],

      tableFieldList: [], // 当前表格字段数据
      tableName: "", // 当前表名称
      selectFields: '', //关联字段
      relateTitle: true,
      relateTableName: "", //关联表名称
      relateFields: "", //子集关联字段
      relateFieldList: [], //子集关联字段数据
      groupTitle: true,
      tableItemForm: {
        rowId: "",
        title: "",
        tableName: "",
        selectFields: "",
      },
      tableGroupList: [],
      // 成员表格提示
      tableKeyContent: '',

    };
  },
  created() {},
    // this.getList();
  async mounted() {
    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,
      databaseType: (state) => state.user.dataSource.databaseType,
      username: (state) => state.user.dataSource.username,
    }),
  },
  watch: {
    'tableItemForm.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 = [];
      }
    },
    'groupForm.routePath'(nval, oval) {
      let targetMenu = this.getTargetMenu(this.menus);
      this.menuOrderNum = targetMenu.children ? targetMenu.children.length : 0;
    },
  },
  methods: {
    // 获取路由表单数据
    async getMenuList() {
    let res = await listGroup();
    console.log('res',  res);
    this.menus = this.handleTree(res.data, "menuId");
    },
    // 递归拼接查询语句
    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) {
          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
          );
        }
      }
      // 如果主键不包含显示,则添加至sql语句中
      let isNotInclude = this.tableFieldList.find(
        (val) => !val.isShow && val.fieldName == this.tableItemForm.selectFields
      );
      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
      );
      let isNeedUsername = sqlType == "oracle" ? this.username + "." : "";
      let asOrSpace = sqlType == "oracle" ? " " : " AS ";
      sql +=
        fieldNameArr.join(",") +
        " FROM " +
        isNeedUsername +
        prefix +
        this.tableItemForm.tableName +
        asOrSpace +
        this.tableItemForm.tableName;
      if (relaTypeArr.length) {
        sql += " " + relaTypeArr.join(" ");
      }
      return sql;
    },
    /** 查询列表 */
    getList(queryParams) {
      if (!this.tableItemForm.tableName) return;
      let data = {
        databaseName: this.databaseName,
        databaseType: this.databaseType,
        tableName: this.tableItemForm.tableName,
      };
      
      // 获取当前表单结构信息
      getListName(data).then((res) => {
        this.tableFieldList = res.map((item, index) => {
          return {
            id: this.tableItemForm.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.tableItemForm.tableName,
            relationFieldList: [],
          };
        });
      });

    },
    // 关联表变化回调
    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,
        };
      });
      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;
    },
    // 递归获取列表信息
    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 = {};
          tempObj[tempFieldName] = temp.fieldDescription;
          columns.push(tempObj);
        }
        if (temp.isSearch) {
          searchFieldList.push(temp.tableName + "." + temp.fieldName);
        }

        if (temp.isExport) {
          tableExportField[exportFieldName] = temp.fieldDescription;
        }
      }
    },
     // 获取所有表格
    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()
        );
      });
    },
    // 确认添加一个表格
    confirmAddHandler(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let columns = [],
            searchFieldList = []
            this.getCol(
              this.tableFieldList,
              columns,
              searchFieldList,
            );
          // 判断是否有包含查询字段
          if (!searchFieldList.length) {
          this.$message.warning("请至少选择一个包含查询字段");
          return false;
          }
          // 判断是新增还是修改 true新增
          let echoData = {
            tableName: this.tableItemForm.tableName,
            tableFieldData: this.tableFieldList,
            formData: this.groupForm,
          }
          // 判断修改还是新增
          if(this.relateTitle){    
            this.tableItemForm.rowId = Date.now();
                       
            this.groupList.push({tableFieldList: this.tableFieldList, tableItemForm: this.tableItemForm})

            this.tableDataList.push(this.tableItemForm);

            let tableKey = uuidv4();
            let sqlKey = uuidv4();
            this.addDragData.push({
            rowId: this.tableItemForm.rowId,
            tId: this.tId,
            dtName: this.tableItemForm.title,
            tableKey: tableKey,
            dtTableName: this.tableItemForm.tableName,
            primaryKey: this.tableItemForm.selectFields,
            orderByColumn: '',
            sortOrder: false,
            sqlKey: sqlKey,
            dtColumnName: columns, 
            timeFormat: 'yyyy-MM-dd',
            searchFieldList: searchFieldList, 
            tableSql: this.getSQLStr(), 
            tableExportField: '',
            echoData: JSON.stringify(echoData),
            })

          } else {
            let columns = [],
            searchFieldList = []
            this.getCol(
              this.tableFieldList,
              columns,
              searchFieldList,
            );
            let echoData = {
              tableName: this.tableItemForm.tableName,
              tableFieldData: this.tableFieldList,
              formData: this.groupForm,
            }
            console.log(this.tableDataList)
            console.log('修改')
          }
          console.log(this.addDragData);

          this.isShowForm = false
          this.tableItemForm = {}
          this.tableFieldList = []

        } else {
          this.$message.error("请完善表单信息");
          return false;
        }
      });
    },
    // 修改一个表格数据
    relateOne(row){
      // console.log(row);
      // console.log('修改', this.groupList);
      // 展示字段的回显
      console.log(this.addDragData);
      this.groupList.forEach(item => {
        if(item.tableItemForm.rowId == row.rowId) {
          this.tableFieldList = item.tableFieldList
        }
      })
      this.relateTitle = false
      this.isShowForm = true;
      this.tableItemForm = row
    },
    // 取消新增
    cancelAddHandler(){
      this.isShowForm = false;
      this.tableItemForm = {}
      this.tableFieldList = []
    },
    // 更新路由
    reloadRouter() {
      this.$store.dispatch("GenerateRoutes").then((accessRoutes) => {
        this.$router.addRoutes(accessRoutes); // 动态添加可访问路由表
      });
    },
    // 获取目标menu
    getTargetMenu(menus) {
      for (let i = 0; i < menus.length; i++) {
        if (menus[i].menuId == this.groupForm.routePath) {
          return menus[i];
        } else if (menus.children?.length) {
          return this.getTargetMenu(menus.children);
        }
      }
      return false;
    },
    // 获取父级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;
    },
    // 新增动态表格组
    addTableGroup(formName){
      this.$refs[formName].validate(async (valid) => {
          if (valid) {
            // console.log('groupList', this.groupList);
            let groupKeyObj = {
              groupKey: uuidv4(),
            };
            let payLoad = {
              component: "relateTable/relateTableEdit",
              icon: "",
              isCache: "0",
              isFrame: "1",
              menuName: this.groupForm.groupname,
              menuType: "C",
              orderNum: this.menuOrderNum,
              parentId: this.groupForm.routePath,
              path: groupKeyObj.groupKey,
              query: JSON.stringify(groupKeyObj),
              status: "0",
              visible: "0",
            };
            let result;
            result = await addMenu(payLoad);

            if(result.code == 200){
              this.reloadRouter();
              let data = {
                groupKey: groupKeyObj.groupKey,
                groupName: '',
                groupDescription: '',
                groupTableInfo: [],
                dragTables:[]
              }
              this.addDragData.forEach((item, index) => {
              item.menuId = result.data;
              // item.sqlKey = tableKeyObj.tableKey
              let echo = JSON.parse(item.echoData)
              echo.formData = this.groupForm
              item.echoData = JSON.stringify(echo)
              data.groupTableInfo.push({
                tableKey: item.tableKey,
                sort: index
              })
              })
            data.groupName = this.groupForm.groupname
            data.groupDescription = this.groupForm.groupdescribe
            data.groupTableInfo = JSON.stringify(data.groupTableInfo)
            data.dragTables = this.addDragData

            // 添加表格组
            let res = await addGroup(data)

            if(res.code == 200){
              this.$message.success("创建成功");

              this.isShowTable = false
              this.groupForm = {}
            } else {
              this.$message.success("创建失败");
              }
            }
          
          } else {
            this.$message.error("请完善表单信息");
            return false;
          }
      });
    },
    /** 新增按钮操作 */
    async handleAdd() {
      // this.$router.push({
      //   path: "/system/fromModel/index/relateMange",
      // });
      await this.getMenuList();

      if (this.$route.query.tId) {
        this.tId = this.$route.query.tId;
        // 修改表格回显数据
        // this.initTableData(this.tId);
      }
      this.groupTitle = true
      this.isShowTable=true
    },
    // 获取路由表单数据
    async getMenuList() {
      let res = await getMenuList();
      this.menus = this.handleTree(res.data, "menuId");
      console.log(this.menus);
    },
    /** 转换菜单数据结构 */
    normalizer(node) {
      if (node.children && !node.children.length) {
        delete node.children;
      }
      return {
        id: node.menuId,
        label: node.menuName,
        children: node.children,
      };
    },
    // 修改动态表格组
    UpdateTableGroup(row){
      console.log(row);
      this.updataGroupRow = row
      console.log(this.tableGroupList);
      this.groupname = row.groupname
      this.groupdescribe = row.groupdescribe
      this.tableDataList = row.tableDataList
      this.groupTitle = false
      this.isShowTable = true 
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        tId: null,
        dtName: null,
        dtNickname: null,
        tableKey: null,
        sqlKey: null,
        dtTableName: null,
        dtNotes: null,
        dtColumnName: null,
        timeFormat: null,
        spare: null,
        spare1: null,
        delFlag: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null,
        isSelection: null,
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.tId);
      this.Keys = selection.map((item) => item.sqlKey);
      this.menuIds = selection.map((item) => item.menuId);
      this.selection = selection;
      this.single = selection.length !== 1;
      this.multiple = !selection.length;
    },
    
    /** 修改按钮操作 */
    async handleUpdate(row) {
      // 兼容勾选单个的修改
      let tId = row?.tId || this.ids[0];
      // this.$router.push({
      //   path: "/system/fromModel/index/tableMange",
      //   query: {
      //     tId: tId,
      //   },
      // });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          if (this.form.tId != null) {
            updateTable(this.form).then((response) => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            addTable(this.form).then((response) => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      let data = {},
        menuIdList = [];
      if (row.tId && row.sqlKey) {
        data.tIds = [row.tId];
        data.sqlKeys = [row.sqlKey];
        menuIdList.push(row.menuId);
      } else {
        data.tIds = this.ids;
        data.sqlKeys = this.Keys;
        menuIdList = this.menuIds;
      }
      // console.log(data);
      this.$modal
        .confirm(
          '是否确认删除动态格编号为"' +
            data.tIds.join(",") +
            '"的数据项？删除后菜单中相关数据也将删除!'
        )
        .then(async function () {
          let res = await delMenu(row.menuId);
          if (res.code == 200) {
            await removeTableList(data);
          } else {
            return Promise.reject();
          }
        })
        .then(() => {
          this.getList();
          this.reloadRouter();
          this.$modal.msgSuccess("删除成功");
        })
        .catch(() => {});
    },
    // 更新路由
    reloadRouter() {
      this.$store.dispatch("GenerateRoutes").then((accessRoutes) => {
        this.$router.addRoutes(accessRoutes); // 动态添加可访问路由表
      });
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download(
        process.env.VUE_APP_BASE_API3 + "system/table/export",
        {
          ...this.queryParams,
        },
        `table_${new Date().getTime()}.xlsx`
      );
    },
    // 新增一个联动表格
    addOneTable() {
      this.relateTitle = true
      if(this.relateTitle == true){
        this.tableItemForm = {}
        this.tableFieldList = []
      }
      this.getAllTable()
      // 注意校验最后一条数据是否合法
      this.isShowForm = true;
    },

    // 重置表单
    // tableItemFormReset() {
    //   Object.assign(this.tableItemForm, {
    //     title: "",
    //     tableId: "",
    //     tableName: "",
    //     showFields: [],
    //     theRelateField: "",
    //     executeOptions: [],
    //   });
    // },
    handlePreview() {
      this.$router.push({
        path: "/system/fromModel/index/relateTableEdit",
      });
    },
  },
};
</script>
<style scoped lang="scss">
::v-deep .el-dialog:not(.is-fullscreen){
  width: 900px !important;
}
.tablefiled{
  ::v-deep .el-input--medium .el-input__inner{
    width: 70px !important;
  }
}
::v-deep .el-input--medium .el-input__inner{
  width: 230px !important;
}
::v-deep .btn{
  text-align: right !important;
}
.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 .vue-treeselect--has-value .vue-treeselect__input {
  vertical-align: middle !important;
}
.formWrap {
  display: flex;
  justify-content: center;
}

::v-deep .el-table{
  margin-top: 10px;
}
.nameipt{
  display: inline;
  margin-left: 10px;
  ::v-deep .el-input--medium .el-input__inner{
  width: 30%;
  }
  ::v-deep .el-input--medium{
  display: inline;
  }
}
.desc{
  margin-left: 10px;
}
::v-deep .vue-treeselect--has-value .vue-treeselect__input {
  vertical-align: middle !important;

}
.treeselect{
   .vue-treeselect{
    width: 230px !important;
  }
}
</style>

<style lang="scss">
 
.vue-treeselect{
  z-index: 9999 !important;
}
</style>