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

<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :span="18">
        <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-form
            :model="tableFieldList"
            ref="tableForm"
            :rules="rules"
            :inline="false"
            size="normal"
          > -->
          <el-table
            :data="tableFieldList"
            border
            ref="dragTable"
            row-key="id"
            :max-height="tableHeight"
          >
            <!--

              :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
            -->
            >
            <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">
                <!-- <el-form-item size="normal" prop="fieldDescription"> -->
                <el-input v-model="scope.row.fieldDescription"></el-input>
                <!-- </el-form-item> -->
              </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="relationType" label="关联方式">
              <template slot-scope="scope">
                <el-select
                  v-model="scope.row.relationType"
                  placeholder="请选择关联方式"
                  :disabled="!scope.row.disableRelaType"
                  @change="relationTypeChangeHandler(scope.row)"
                  filterable
                >
                  <el-option
                    v-for="item in relaTypeList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </template>
            </el-table-column>
            <!-- <el-table-column prop="relationShowField" label="关联显示字段">
              <template slot-scope="scope">
                <el-select
                  v-model="scope.row.relationShowField"
                  :disabled="!scope.row.disableRelaFieldName"
                  placeholder="请选择"
                  clearable
                  filterable
                  multiple
                >
                  <el-option
                    v-for="item in scope.row.relaFieldNameList"
                    :key="item.fieldName"
                    :label="item.fieldDescription"
                    :value="item.fieldName + ' ' + item.fieldDescription"
                  >
                  </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-column prop="isExport" label="是否导出">
              <template slot-scope="scope">
                <el-switch v-model="scope.row.isExport"> </el-switch>
              </template>
            </el-table-column>
            <!-- <el-table-column
          label="操作"
          align="center"
          class-name="small-padding fixed-width"
        >
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              icon="el-icon-edit"
              @click="handleUpdate(scope.row)"
              >修改
            </el-button>
            <el-button
              size="mini"
              type="text"
              icon="el-icon-delete"
              @click="handleDelete(scope.row)"
              >删除
            </el-button>
          </template>
        </el-table-column> -->
          </el-table>
          <!-- </el-form> -->
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="always" :body-style="{ padding: '5px' }">
          <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"
                :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="ASC">升序</el-radio>
              <el-radio v-model="formData.isAsc" label="DESC">降序</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-col>
    </el-row>
    <el-dialog title="效果预览" :visible.sync="isShowPreview" width="50%">
      <el-row :gutter="10" class="mb8">
        <el-col :span="18">
          <el-input placeholder="请输入" clearable />
        </el-col>

        <el-col :span="6">
          <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"
          :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>
  </div>
</template>

<script>
import {
  delTableData,
  dragTableInfo,
  listTable,
  unionListTableData,
  getInfoBySqlKey,
  addTableData,
} 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"],
  props: [],
  components: { Queryfrom, Treeselect },
  data() {
    return {
      // 修改表格时的menuId
      menuId: "",
      // 修改表格的id
      tId: "",
      // 当前模板信息
      templateInfo: {},
      // 排序方式 默认降序
      sortState: true,
      // 列信息
      columns: {},
      // 查询条件
      queryFromWhere: {},
      // 当前table唯一标识
      sqlkey: "",
      // 表格的高度
      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: "是否导出",
        },
      ], //表头列表

      // 右侧筛选条件勾选数据
      // checkedList: [], //勾选的查询框
      // checkedWhere:[],//需要渲染的查询表单

      // 右侧表单编辑
      formData: {
        menuName: "",
        routePath: undefined,
        isShowList: true,
        timeFormate: "",
        orderByColumn: "",
        isAsc: "ASC",
        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: "DESC",
        basicMap: {
          sql: "",
        },
      },
      loading: false, //表格加载
      tableDataList: [], //数据
      editData: {},
    };
  },
  computed: {
    ...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);
      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 = [];
      }
    },
  },
  methods: {
    // 获取目标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,
      };

      // 获取当前表单结构信息
      getListName(data).then((res) => {
        this.tableFieldList = res.map((item, index) => {
          return {
            id: 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: [],
          };
        });
      });
    },
    // 关联表变化回调
    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 asOrSpace = sqlType == "oracle" ? " " : " AS ";
      for (let i = 0; i < tableFieldList.length; i++) {
        let temp = tableFieldList[i];
        if (temp.isShow) {
          let tempArr = 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 +
              temp.relationTable +
              asOrSpace +
              temp.relationTable +
              " ON " +
              temp.relationTable +
              "." +
              temp.relationFieldName +
              " = " +
              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(isNotInclude.tableName + "." + isNotInclude.fieldName);
      }
    },

    // 拼接查询sql语句
    getSQLStr() {
      let sqlType = this.databaseType; //数据库类型
      // let sqlType = "oracle";
      let sql = "";
      // mysql
      sql += "SELECT ";
      let fieldNameArr = [],
        relaTypeArr = [];
      this.getSQLString(
        this.tableFieldList,
        fieldNameArr,
        relaTypeArr,
        sqlType
      );
      // console.log("discriISEmpty:", discriISEmpty);
      // if (discriISEmpty) {
      //   return false;
      // }
      let isNeedUsername = sqlType == "oracle" ? this.username + "." : "";
      let asOrSpace = sqlType == "oracle" ? " " : " AS ";
      sql +=
        fieldNameArr.join(",") +
        " FROM " +
        isNeedUsername +
        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;
          }
          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() {
      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;
          // }
          let uuid = 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: 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: 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.formData.routePath, //  暂定
              dtTableName: this.tableName,
              primaryKey: this.formData.primaryKey,
              orderByColumn: this.formData.orderByColumn,
              sortOrder: this.formData.isAsc,
              sqlKey: 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);
            }

            // 关闭当前页面
            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",
              });
              return;
            }
            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) {
        let echoData = JSON.parse(res.data.echoData);
        this.tableName = echoData.tableName;
        this.tableFieldList = echoData.tableFieldData;
        this.formData = echoData.formData;
        this.editData = res.data;
        let val = await getParticMenu(res.data.sqlKey);
        if (val.code == 200) {
          this.menuId = val.data.menuId;
        }
      } else {
        this.$message.error("数据回显失败");
      }
    },
  },
  created() {},
  mounted() {
    this.getAllTable();
    this.initDragTable();
    this.getMenuList();
    if (this.$route.query.tId) {
      this.tId = this.$route.query.tId;
      this.initTableData(this.tId);
    }
  },
};
</script>

<style scoped lang="scss">
::v-deep .right_card {
  min-height: 500px !important;
}
::v-deep .vue-treeselect--has-value .vue-treeselect__input {
  vertical-align: middle !important;
}
</style>