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

<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>{{ $t('tableMange.fieldEdit') }}</span>
            </div>
          </template>
          <!-- <Queryfrom
            :form-vals="checkedWhere"
            @getList="getList"
            ref="mychild"
          /> -->
          <el-select v-model="tableName" :placeholder="$t('tableMange.selectTable')" filterable @change="getList" class="mb10">
            <el-option v-for="item in tableList" :key="item.tableName" :label="item.tableComment"
              :value="item.tableName">
              <span class="discribe" 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="500px">
            <!--

              :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
            -->
            >
            <el-table-column type="index" :label="$t('tableMange.serialNumber')" width="50" class-name="allowDrag">
            </el-table-column>
            <el-table-column align="center" prop="fieldName" :label="$t('tableMange.dataField')">
            </el-table-column>
            <el-table-column align="center" prop="fieldDescription" :label="$t('tableMange.fieldDescription')">
              <template slot-scope="scope">
                <!-- <el-form-item size="normal" prop="fieldDescription"> -->
                <input :class="{
      isNullDesc:
        scope.row.fieldDescription == '' &&
          scope.row.isShow &&
          isInputInvalid
          ? true
          : false,
      ipt: true,
    }" v-model="scope.row.fieldDescription" />
                <!-- <el-input v-model="scope.row.fieldDescription" /> -->
                <!-- </el-form-item> -->
              </template>
            </el-table-column>
            <el-table-column align="center" prop="relationTable" :label="$t('tableMange.relatedTable')">
              <template slot-scope="scope">
                <el-select v-model="scope.row.relationTable" :disabled="!scope.row.relationTableList ||
      !scope.row.relationTableList.length
      " :placeholder="$t('tableMange.selectTable')" 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 align="center" prop="relationFieldName" :label="$t('tableMange.relatedField')">
              <template slot-scope="scope">
                <el-select v-model="scope.row.relationFieldName" @change="relationFieldChange(scope.row)"
                  :disabled="!scope.row.disableRelaFieldName" :placeholder="$t('tableMange.relatedField')" 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 align="center" prop="relationType" :label="$t('tableMange.relatedType')">
              <template slot-scope="scope">
                <el-select v-model="scope.row.relationType" :placeholder="$t('tableMange.relatedType')" :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 align="center" prop="isShow" :label="$t('tableMange.isShow')">
              <template slot-scope="scope">
                <el-switch v-model="scope.row.isShow"></el-switch>
              </template>
            </el-table-column>
            <el-table-column align="center" prop="isSearch" :label="$t('tableMange.isSearch')">
              <template slot-scope="scope">
                <el-switch v-model="scope.row.isSearch"></el-switch>
              </template>
            </el-table-column>
            <el-table-column align="center" prop="isExport" :label="$t('tableMange.isExport')">
              <template slot-scope="scope">
                <el-switch v-model="scope.row.isExport"></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="$t('tableMange.menuEdit')" name="menuedit">
            <el-card shadow="always" :body-style="{ padding: '10px' }">
              <el-form ref="formData" :model="formData" label-width="100px" :rules="rules">
                <el-form-item :label="$t('tableMange.menuType')" prop="dtType">
                  <el-select v-model="formData.dtType" :placeholder="$t('tableMange.menuType')">
                    <el-option :label="$t('tableMange.tableMenu')" value="0"></el-option>
                    <el-option :label="$t('tableMange.treeMenu')" value="3"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item :label="$t('tableMange.menuName')" prop="menuName">
                  <el-input v-model="formData.menuName"></el-input>
                </el-form-item>
                <el-form-item :label="$t('tableMange.menuRoute')" prop="routePath" v-if="formData.dtType === '0'">
                  <treeselect :append-to-body="true" v-model="formData.routePath" :options="menus"
                    :normalizer="normalizer" @change="treeSelectChange" @focus="treeSelectFocus" :show-count="true"
                    :placeholder="$t('tableMange.selectParentRoute')" />
                </el-form-item>
                <el-form-item :label="$t('tableMange.showList')" v-if="false">
                  <el-switch v-model="formData.isShowList"></el-switch>
                </el-form-item>
                <el-form-item :label="$t('tableMange.timeFormat')" prop="timeFormate">
                  <el-select v-model="formData.timeFormate" :placeholder="$t('tableMange.timeFormat')">
                    <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="$t('tableMange.tablePrimaryKey')" prop="primaryKey">
                  <el-select v-model="formData.primaryKey" :placeholder="$t('tableMange.tablePrimaryKey')">
                    <el-option v-for="val in primaryKeyList" :key="val.fieldName" :label="val.fieldDescription"
                      :value="val.fieldName"></el-option>
                  </el-select>
                </el-form-item>
                <!-- <el-form-item label="操作列按钮" prop="btnGroupList">
                  <el-select v-model="formData.btnGroupList" placeholder="请选择按钮组" clearable multiple>
                    <el-option v-for="val in btnGroupOptions" :key="val.btnKey" :label="val.btnGroupName"
                      :value="val.btnKey"></el-option>
                  </el-select>
                </el-form-item> -->
                <el-form-item :label="$t('tableMange.sortDependency')">
                  <el-select v-model="formData.orderByColumn" :placeholder="$t('tableMange.sortDependency')">
                    <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="$t('tableMange.sortMethod')" v-show="formData.orderByColumn">
                  <el-radio v-model="formData.isAsc" :label="false">{{ $t('tableMange.ascending') }}
                  </el-radio>
                  <el-radio v-model="formData.isAsc" :label="true">{{ $t('tableMange.descending') }}
                  </el-radio>
                </el-form-item>
                <el-form-item>
                  <el-button size="mini" @click="previewHandle">{{ $t('tableMange.preview') }}</el-button>
                  <el-button size="mini" type="primary" @click="createHandle">{{
      tId ? $t('tableMange.confirmModify') : $t('tableMange.confirmCreate')
    }}
                  </el-button>
                </el-form-item>
              </el-form>
            </el-card>
          </el-tab-pane>
          <el-tab-pane :label="$t('tableMange.dataStatistics')" name="datacount">
            <el-button type="primary" class="inline-large-button" icon="el-icon-plus" size="mini"
              @click="addDataDialog">
              {{ $t('tableMange.addDataField') }}
            </el-button>
            <el-table :data="dragTableStatisticList" border class="mb10" style="width: 100%">
              style="width: 100%">
              <el-table-column type="index" :label="$t('tableMange.serialNumber')" width="50" class-name="allowDrag">
              </el-table-column>
              <el-table-column prop="statisticTitle" :label="$t('tableMange.statisticTitle')">
              </el-table-column>
              <el-table-column prop="statisticField" :label="$t('tableMange.statisticData')">
              </el-table-column>
              <el-table-column prop="statisticType" :label="$t('tableMange.statisticType')">
              </el-table-column>

              <el-table-column :label="$t('tableMange.operation')" align="center" class-name="small-padding fixed-width">
                <template slot-scope="scope">
                  <el-dropdown>
                    <el-button type="warning" plain size="small">
                      {{ $t('tableMange.handle') }}<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="handleUpdateStat(scope.row)">{{ $t('tableMange.modify') }}
                        </el-button>
                      </el-dropdown-item>
                      <el-dropdown-item>
                        <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDeleteStat(scope.row)">{{ $t('tableMange.delete') }}
                        </el-button>
                      </el-dropdown-item>
                    </el-dropdown-menu>
                  </el-dropdown>
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>
          <el-tab-pane :label="$t('tableMange.styleEdit')" name="styleEdit">
            <StyleFormPanel ref="styleTableRef" :tableFieldList="tableFieldList"
              :dragTableStyleList="dragTableStyleList" />
          </el-tab-pane>
          <el-tab-pane :label="$t('tableMange.dataFilter')" name="dataFilter">
            <DataFilterPanel ref="dataFilterRef" :tableFieldList="tableFieldList" :filterDataEcho="filterDataEcho">
            </DataFilterPanel>
          </el-tab-pane>
          <el-tab-pane :label="$t('tableMange.classificationQuery')" name="classificationQuery">
            <ClassificationQueryPanel ref="classificationQueryRef" :tableFieldList="tableFieldList"
              :classificationDataEcho="classificationDataEcho"></ClassificationQueryPanel>
          </el-tab-pane>
        </el-tabs>
      </el-col>
    </el-row>

    <el-dialog :title="$t('tableMange.effectPreview')" :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>
          <div class="type">
            <div class="count">{{ $t('tableMange.statisticData') }}</div>
          </div>
        </el-card>
      </div>

      <el-row :gutter="10" class="mb8">
        <el-col :span="18">
          <el-input :placeholder="$t('tableMange.search')" clearable />
        </el-col>

        <el-col :span="6" class="previewbtn">
          <el-button type="primary" icon="el-icon-search" size="small" @click="() => { }">{{ $t('tableMange.search') }}
          </el-button>
          <el-button icon="el-icon-refresh" size="small" @click="() => { }">{{ $t('tableMange.reset') }}
          </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="() => { }">{{ $t('tableMange.add') }}
          </el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="false" @click="() => { }">{{ $t('tableMange.edit') }}
          </el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="false" @click="() => { }">{{ $t('tableMange.delete') }}
          </el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button plain icon="el-icon-upload2" size="mini" @click="() => { }">{{ $t('tableMange.import') }}
          </el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button type="warning" plain icon="el-icon-download" size="mini" @click="() => { }">{{ $t('tableMange.export') }}
          </el-button>
        </el-col>
      </el-row>
      <el-table :data="tableDataList" @selection-change="() => { }">
        <el-table-column type="selection" width="55" align="center"></el-table-column>
        <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="$t('tableMange.operation')" align="center" class-name="small-padding fixed-width">
          <template>
            <el-dropdown>
              <el-button type="warning" plain size="small">
                {{ $t('tableMange.handle') }}<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="() => { }">{{ $t('tableMange.modify') }}
                  </el-button>
                </el-dropdown-item>
                <el-dropdown-item>
                  <el-button size="mini" type="text" icon="el-icon-delete" @click="() => { }">{{ $t('tableMange.delete') }}
                  </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">{{ $t('tableMange.close') }}</el-button>
          <el-button type="primary" @click="createHandle">{{
      tId ? $t('tableMange.confirmModify') : $t('tableMange.confirmCreate')
    }}</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="$t('tableMange.statisticTitle')" prop="statisticTitle">
          <el-input v-model="dataCountFormData.statisticTitle"></el-input>
        </el-form-item>

        <el-form-item :label="$t('tableMange.statisticData')">
          <el-select v-model="dataCountFormData.statisticField" :placeholder="$t('tableMange.selectStatisticField')">
            <el-option v-for="item in dataArr" :key="item.id" :label="item.fieldName"
              :value="item.tableName + '.' + item.fieldName">
              <span class="discribe" style="float: left; margin-right: 5px">{{ isShowTableName }}
              </span>
              <span style="float: right; color: #8492a6; font-size: 13px">{{
      item.fieldName
    }}</span>
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('tableMange.statisticType')">
          <el-select v-model="dataCountFormData.statisticType" :placeholder="$t('tableMange.selectStatisticType')">
            <el-option v-for="item in dataType" :key="item.dictCode" :label="item.dictLabel"
              :value="item.dictValue"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="closeAddDialog">{{ $t('tableMange.cancel') }}</el-button>
        <el-button v-if="staictitle == $t('tableMange.modify')" type="primary" @click="upadtaData">{{ $t('tableMange.confirm') }}</el-button>

        <el-button v-else type="primary" @click="addData">{{ $t('tableMange.confirm') }}</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  delTableData,
  dragTableInfo,
  listTable,
  unionListTableData,
  getInfoBySqlKey,
  addTableData,
  addStatistic,
  updateStatistic,
  insertByDefaultBtn,
} 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, tbnHasPerms } from "@/api/menu.js";
import Queryfrom from "@/views/tablelist/commonTable/queryfrom.vue";
import { mapState } from "vuex";
import Sortable from "sortablejs";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import { v4 as uuidv4 } from "uuid";
import { listBtn } from "@/api/system/btn";
import StyleFormPanel from "./components/StyleFormPanel.vue";
import DataFilterPanel from "./components/DataFilterPanel.vue";
import ClassificationQueryPanel from "./components/ClassificationQueryPanel.vue";

export default {
  name: "tableMange",
  dicts: ["sys_time_format", "table_statistic_type"],
  props: [],
  components: {
    Queryfrom,
    Treeselect,
    StyleFormPanel,
    DataFilterPanel,
    ClassificationQueryPanel,
  },
  data() {
    return {
      menuList: [], //路由数组
      btnTemplate: [], //按钮模板
      isNeedNewMenu: false, //是否需要新菜单
      filterDataEcho: "", //数据过滤回显数据
      classificationDataEcho: "", //分类查询回显数据
      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: this.$t('tableMange.dataField')
        },
        {
          prop: "fieldDescription",
          label: this.$t('tableMange.fieldDescription')
        },
        {
          prop: "relationTable",
          label: this.$t('tableMange.relatedTable')
        },
        {
          prop: "relationFieldName",
          label: this.$t('tableMange.relatedField')
        },
        {
          prop: "relationType",
          label: this.$t('tableMange.relatedType')
        },
        {
          prop: "isShow",
          label: this.$t('tableMange.isShow')
        },
        {
          prop: "isSearch",
          label: this.$t('tableMange.isSearch')
        },
        {
          prop: "isExport",
          label: this.$t('tableMange.isExport')
        },
        {
          prop: "isCount",
          label: this.$t('tableMange.statisticData')
        }
      ], //表头列表

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

      // 右侧表单编辑
      formData: {
        menuName: "",
        routePath: undefined,
        isShowList: true,
        timeFormate: "",
        orderByColumn: "",
        isAsc: false,
        primaryKey: "",
        btnGroupList: [],
        dtType: "",
      },
      rules: {
        dtType: [
          { required: true, message: this.$t('tableMange.selectMenuType'), trigger: "change" }
        ],
        menuName: [
          { required: true, message: this.$t('tableMange.pleaseEnterMenuName'), trigger: "blur" }
        ],
        routePath: [
          { required: true, message: this.$t('tableMange.selectParentRoute'), trigger: "change" }
        ],
        timeFormate: [
          { required: true, message: this.$t('tableMange.selectTimeFormat'), trigger: "change" }
        ],
        primaryKey: [
          { required: true, message: this.$t('tableMange.selectTablePrimaryKey'), trigger: "blur" }
        ],
        fieldDescription: [
          { required: true, message: this.$t('tableMange.fieldDescriptionErrorNotNull'), trigger: "blur" }
        ]
      },
      menus: [], //路由列表数据

      // 预览弹窗相关
      isShowPreview: false, //弹窗显示与隐藏
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        orderByColumn: "",
        isAsc: false,
        basicMap: {
          sql: "",
        },
      },
      loading: false, //表格加载
      tableDataList: [], //数据
      editData: {},
      menuOrderNum: 0,
      // tab动态切换
      activeName: "menuedit",
      // 数据统计对象
      dataCountFormData: {},
      // 添加数据统计表格
      dragTableStatisticList: [],
      deepragTableStatisticList: [],
      tableSqlList: [],
      searchFieldList: [],
      // 是否切换到数据统计
      menudata: false,
      // 显示添加字段对话框dataArr
      isShowAddData: false,
      dataType: [],
      uuid: "",

      // 样式编辑tab数据
      dragTableStyleList: [],

      //操作列按钮组数据
      btnGroupOptions: [],
    };
  },
  computed: {
    ...mapState({
      databaseName: (state) => state.user.dataSource.databaseName,
      databaseType: (state) => state.user.dataSource.databaseType,
      username: (state) => state.user.dataSource.username,
      tenantId: (state) => state.user.tenant.tenantId,
      tenantName: (state) => state.user.tenant.tenantName,
    }),
    // 数据字段
    dataArr() {
      return this.tableFieldList.filter((item) => item.isShow);
    },
    // 数据统计字段表名中文
    isShowTableName() {
      let tableComment;
      this.tableList.forEach((item) => {
        if (item.tableName === this.tableName) {
          tableComment = item.tableComment;
        }
      });
      return tableComment;
    },
    ...mapState({
      databaseName: (state) => state.user.dataSource.databaseName,
      databaseType: (state) => state.user.dataSource.databaseType,
      username: (state) => state.user.dataSource.username,
      tenantId: (state) => state.user.tenant.tenantId,
      tenantCode: (state) => state.user.tenant.tenantCode,
    }),
    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 = [];
      }
    },
    "formData.routePath"(nval, oval) {
      let targetMenu = this.getTargetMenu(this.menus);
      this.menuOrderNum = targetMenu.children ? targetMenu.children.length : 0;
    },
  },
  methods: {
    // 获取按钮模板数据
    async getBtnTemplate() {
      try {
        let res = await getDicts("drag_table_btn_template");
        if (res.code == 200) {
          this.btnTemplate = res.data.map((item) => JSON.parse(item.remark));
        } else {
          this.$message.error("获取按钮模板数据失败");
        }
      } catch (error) {
        this.$message.error("获取按钮模板数据失败");
      }
    },
    // 格式化按钮模板数据
    formateBtnTemplate() {
      let res = {
        hasPermiName: "",
        dragTableBtnTop: {},
        dragTableBtnRight: {},
      };
      let moduleName = this.menuList.find(
        (item) => item.menuId == this.formData.routePath
      )?.menuName;
      res.hasPermiName =
        this.tenantCode + ":" + moduleName + ":" + this.formData.menuName;
      let primaryKey = this.tableName + "." + this.formData.primaryKey;
      this.btnTemplate.forEach((item) => {
        item.children.forEach((i) => {
          if (i.btnType == "UPDATE" || i.btnType == "DELETE") {
            let btnParams = { commonFieldData: [], conditionData: [] };
            btnParams.conditionData.push({
              fieldName: primaryKey,
              fieldValue: "",
            });
            i.btnParams = JSON.stringify(btnParams);
          }
        });
      });

      res.dragTableBtnTop = this.btnTemplate[0];
      res.dragTableBtnRight = this.btnTemplate[1];
      return res;
    },
    // 字段描述验证规则
    // blurval(value){
    //   this.isInputInvalid = value == '' ?  true : false;
    // },
    // 树形控件change回调
    treeSelectChange(val) {
      // await this.getMenuList();
      //没有change事件
    },
    async treeSelectFocus() {
      await this.getMenuList();
    },
    // 获取目标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,
      };
      let tableComment = this.getTableCommont(this.tableName, this.tableList);
      // 获取当前表单结构信息
      getListName(data).then((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: false,
            relationTableList: this.relationTableList,
            tableName: this.tableName,
            tableComment,
            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 tableComment = this.getTableCommont(
        row.relationTable,
        this.tableList
      );
      let res = await getListName(data);
      // 关联字段下拉列表数据
      row.relaFieldNameList = res.map((item) => {
        return {
          fieldName: item.fieldName,
          fieldDescription: item.fieldDescription,
        };
      });
      let relationTableList = row.relationTableList.filter(
        (item) => row.relationTable != item.tableName
      );
      row.relationFieldList = row.relaFieldNameList.map((item, index) => {
        return {
          id: row.relationTable + "_" + item.fieldName,
          fieldName: item.fieldName,
          fieldDescription: item.fieldDescription,
          relationTable: "",
          relationFieldName: "",
          relaFieldNameList: [],
          disableRelaFieldName: false,
          relationType: "",
          relationShowField: [],
          relationShowFiledList: [],
          disableRelaType: false,
          isShow: true,
          isSearch: false,
          isExport: false,
          relationTableList,
          tableName: row.relationTable,
          tableComment,
          relationFieldList: [],
          isChildren: true,
        };
      });
      // this.tableFieldList = [...this.tableFieldList, ...row.relationFieldList];
      row.disableRelaFieldName = true;
    },
    // 关联类型变化回调
    relationTypeChangeHandler(row) {
      let tempRelationFieldList = row.relationFieldList.filter((item) => {
        return !this.tableFieldList.find((val) => val.id === item.id);
      });
      this.tableFieldList = [...this.tableFieldList, ...tempRelationFieldList];
    },
    // 关联字段回调
    relationFieldChange(row) {
      if (!row.relationFieldName) {
        row.relationType = "";
        row.disableRelaType = false;
        row.relaFieldNameList = [];
        return;
      }
      row.disableRelaType = true;
    },

    // 勾选框回调
    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();
      if (res.code == 200) {
        this.menuList = res.data;
        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 +
          asOrSpace +
          isNotInclude.tableName +
          "_" +
          isNotInclude.fieldName
        );
      }
    },
    // 拼接查询sql语句
    getSQLStr() {
      let classificationData =
        this.$refs.classificationQueryRef.getConditions(); //按钮中的查询条件
      let prefix = "{DBNAME}.";
      let sqlType = this.databaseType; //数据库类型
      let asOrSpace = sqlType == "oracle" ? " " : " AS ";
      // let sqlType = "oracle";
      let sql = "";
      // mysql
      sql += "SELECT ";
      let fieldNameArr = [],
        relaTypeArr = [];
      this.getSQLString(
        this.tableFieldList,
        fieldNameArr,
        relaTypeArr,
        sqlType
      );
      // if (discriISEmpty) {
      //   return false;
      // }
      let styleFieldList = this.$refs.styleTableRef.getStyleTableField();
      styleFieldList = styleFieldList.map((item) => {
        return `${prefix}${item}${asOrSpace}${item.replace(".", "_")}`;
      });
      let set = new Set([...fieldNameArr, ...styleFieldList]);
      fieldNameArr = [...set];
      let isNeedUsername = sqlType == "oracle" ? this.username + "." : "";
      sql +=
        fieldNameArr.join(",") +
        " FROM " +
        isNeedUsername +
        prefix +
        this.tableName +
        asOrSpace +
        this.tableName;
      if (relaTypeArr.length) {
        sql += " " + relaTypeArr.join(" ");
      }

      return sql;
    },
    getStaticSQL(key) {
      let prefix = "{DBNAME}.";
      let sqlType = this.databaseType; //数据库类型
      // let sqlType = "oracle";
      let sql = "";
      // mysql
      sql += "SELECT ";
      let fieldNameArr = [],
        relaTypeArr = [];
      this.getSQLString(
        this.tableFieldList,
        fieldNameArr,
        relaTypeArr,
        sqlType
      );
      let isNeedUsername = sqlType == "oracle" ? this.username + "." : "";
      let asOrSpace = sqlType == "oracle" ? " " : " AS ";

      sql +=
        key +
        " FROM " +
        isNeedUsername +
        prefix +
        this.tableName +
        asOrSpace +
        this.tableName;
      if (relaTypeArr.length) {
        sql += " " + relaTypeArr.join(" ");
      }
      return sql;
    },
    // 处理列表信息
    columnsHandler(columns) {
      let resArr = [];
      columns.forEach((item) => {
        for (const key in item) {
          let tempObj = {};
          tempObj.key = key;
          tempObj.value = item[key];
          resArr.push(tempObj);
        }
      });
      return resArr;
    },
    // 下划线命名转驼峰命名
    toUpperCase(str) {
      let nstr = str.replace(/(?:_)+([^_])/g, function ($0, $1) {
        return $1.toUpperCase();
      });
      nstr = nstr.replace(nstr[0], nstr[0].toLowerCase());
      return nstr;
    },

    // 递归获取列表信息
    getCol(
      tableFieldList,
      columns,
      searchFieldList = [],
      tableExportField = {},
      allColumns = []
    ) {
      if (!tableFieldList.length) return;
      for (let i = 0; i < tableFieldList.length; i++) {
        let temp = tableFieldList[i];
        let tempFieldName = "",
          exportFieldName = "";
        if (temp.isChildren) {
          tempFieldName = temp.tableName + "_" + temp.fieldName;
          exportFieldName = temp.tableName + "@" + temp.fieldName;
        } else {
          // tempFieldName = temp.fieldName;
          tempFieldName = temp.tableName + "_" + temp.fieldName;
          exportFieldName = temp.tableName + "_" + temp.fieldName;
        }
        // 保存所有字段
        let obj = {
          tableName: temp.tableName,
          fieldName: temp.fieldName,
          fieldDescription: temp.fieldDescription,
        };
        allColumns.push(obj);

        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;
        }
      }
    },
    // 更新路由
    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);
          // 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;
      //   }
      // });
    },

    // 联合查询条件
    getBtnData(searchArr = []) {
      // 按钮条件list
      let classificationData = this.$refs.classificationQueryRef.getConditions();
      let res = searchArr.map((item) => {
        return {
          conditionField: item,
          conditionName: "超级查询",
          conditionType: "SuperQuery",
        };
      })
      let list = Object.assign([], classificationData);
      // 校验 填写不完整删除查询条件
      classificationData.forEach((item, index) => {
        if (item.conditionName == "" || item.conditionField == "" || item.conditionType == "") {
          classificationData.splice(index, 1);
        }
      })
      return [...res, ...classificationData];
    },
    // 创建回调
    async createHandle() {
      // 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 = {},
            allColumns = [];

          this.getCol(
            this.tableFieldList,
            columns,
            searchFieldList,
            tableExportField,
            allColumns
          );

          let echoData = {
            tableName: this.tableName,
            tableFieldData: this.tableFieldList,
            formData: this.formData,
            filterData: encodeURIComponent(
              this.$refs.dataFilterRef?.getEchoData()
            ),
          };
          if (!searchFieldList.length) {
            this.$message.warning("请至少选择一个包含查询字段");
            return false;
          }
          this.uuid = uuidv4();
          this.tableKey = uuidv4();
          // 表单
          let result;
          let btnTemplate = this.formateBtnTemplate();

          // 如果是表格菜单，处理菜单路由和菜单名称
          if (this.formData.dtType === '0') {
            // if (this.tId && this.menuId) {
            if (this.menuId && !this.isNeedNewMenu) {
              //原菜单存在,仅需要修改菜单数据
              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",
                tenantId: this.tenantId,
              };
              result = await updateMenu(payLoad);
            } else if (this.isNeedNewMenu) {
              //给旧表格新增菜单
              let tableKeyObj = {
                tableKey: this.editData.tableKey,
              };
              let payLoad = {
                component: "tablelist/commonTable/listInfo",
                icon: "",
                isCache: "0",
                isFrame: "1",
                menuName: this.formData.menuName,
                // menuId: this.formData.routePath,
                menuType: "C",
                orderNum: this.menuOrderNum,
                parentId: this.formData.routePath,
                path: this.uuid,
                query: JSON.stringify(tableKeyObj),
                status: "0",
                visible: "0",
                tenantId: this.tenantId,
              };
              result = await addMenu(payLoad);
            } else {
              let tableKeyObj = {
                tableKey: this.uuid,
              };
              let payLoad = {
                component: "tablelist/commonTable/listInfo",
                icon: "",
                isCache: "0",
                isFrame: "1",
                menuName: this.formData.menuName,
                // menuId: this.formData.routePath,
                menuType: "C",
                orderNum: this.menuOrderNum,
                parentId: this.formData.routePath,
                path: this.uuid,
                query: JSON.stringify(tableKeyObj),
                status: "0",
                visible: "0",
                tenantId: this.tenantId,
              };
              result = await addMenu(payLoad);
            }
            if (result.code == 200) {
              // 更新路由
              this.reloadRouter();
            } else {
              this.$message.warning(result.msg);
              return;
            }
          }
          // 得到联合查询数组
          let conditions = this.$refs.dataFilterRef?.getConditions();
          let conditionDefaultValueMap = {};
          conditions.map((item) => {
            conditionDefaultValueMap[item.fieldName] = encodeURIComponent(
              " " + item.condition + " " + item.refValue
            );
          });
          // let isAsc = this.formData.isAsc == "ASC" ? 0 : 1;
          let btnData = this.getBtnData(searchFieldList);


          let data = {
            conditionDefaultValueMap, //数据筛选条件
            tId: this.tId,
            dtName: this.formData.menuName,
            menuId: this.formData.routePath,
            tableKey: this.uuid, //  暂定
            dtTableName: this.tableName,
            primaryKey: this.formData.primaryKey,
            orderByColumn: this.formData.orderByColumn,
            sortOrder: this.formData.isAsc,
            sqlKey: this.tableKey,
            dtColumnName: columns, //列字段标题名称(存储显示字段信息
            timeFormat: this.formData.timeFormate,
            // searchFieldList: searchFieldList, //搜索字段数组
            searchFieldList: btnData, //搜索字段数组
            tableSql: this.getSQLStr(), //  暂定
            tableExportField: tableExportField, //导出字段名及列名
            echoData: JSON.stringify(echoData),

            spare: JSON.stringify(allColumns), //所有字段数据

            // 样式相关数据
            dragTableStyleList: this.$refs.styleTableRef.getSaveData(),
            dtType: this.formData.dtType
          };

          this.dragTableStatisticList.forEach((item) => {
            if (this.tId == "") {
              item.tableKey = this.tableKey;
              this.staticSqlKey = uuidv4();
              item.sqlKey = this.staticSqlKey;
            }
            if (item.sqlKey) {
              this.staticSqlKey = item.sqlKey;
            } else {
              this.staticSqlKey = uuidv4();
              item.sqlKey = this.staticSqlKey;
            }

            let key =
              item.statisticType +
              "(" +
              item.statisticField +
              ")" +
              " as result";

            this.tableSqlList.push({
              tableSql: this.getStaticSQL(key),
              sqlKey: this.staticSqlKey,
            });
            this.searchFieldList = searchFieldList;
          });

          let res;
          let res1;
          // if (this.tId && this.menuId) {
          if (this.tId) {
            data.menuId = this.menuId || result?.data;
            data.sqlKey = this.editData.sqlKey;
            data.tableKey = this.editData.tableKey;
            data.dragTableBtnRelevanceList = this.getBtnMapList(
              data.tableKey
            );
            res = await editTable(data);
            this.dragTableStatisticList.forEach((item) => {
              item.tableKey = this.editData.tableKey;
            });
            res1 = await updateStatistic({
              tableKey: this.editData.tableKey,
              dragTableStatisticList: this.dragTableStatisticList,
              tableSqlList: this.tableSqlList,
              searchFieldList: this.searchFieldList,
              dtTableName: this.tableName,
            });
          } else {
            data.menuId = result?.data;
            data.dragTableBtnRelevanceList = this.getBtnMapList(
              data.tableKey
            );
            res = await addDragTable(data);
            this.dragTableStatisticList.forEach((item) => {
              item.tableKey = this.uuid;
            });
            if (res.code == 200 && this.dragTableStatisticList.length !== 0) {
              // 新增统计数据
              res1 = addStatistic({
                tableKey: this.uuid,
                dragTableStatisticList: this.dragTableStatisticList,
                tableSqlList: this.tableSqlList,
                searchFieldList: this.searchFieldList,
                dtTableName: this.tableName,
              });
            }
            if (res.code == 200) {
              // 新增默认按钮数据
              btnTemplate.tableKey = data.tableKey;
              btnTemplate.menuID = result?.data;
              let btnRes = await insertByDefaultBtn(btnTemplate);
              if (btnRes.code == 200) {
                // 发送权限请求
                let payload = btnRes.data.map((item) => {
                  return {
                    ...item,
                    tenantId: this.tenantId,
                  };
                });
                let btnPowerRes = await tbnHasPerms(payload);
              } else {
                console.error(btnRes);
              }
            }
          }

          // 关闭当前页面
          if (this.tId) {
            // console.log('---------------------修改成功',res)

            if (res.code == 200) {
              this.$message.success("修改成功");
              this.$tab.closePage();
              this.$router.push({
                path: "/system/fromModel/index/tablelist",
              });
            } else {
              this.$message.warning("修改失败");
            }
          } else {
            // console.log('---------------------创建成功',res)

            if (res.code == 200) {
              this.$message.success("创建成功");
              this.$tab.closePage();
              // console.log('---------------------创建成功-----------------------------')
              this.$router.push({
                path: "/system/fromModel/index/tablelist",
              });
            } else {
              this.$message.warning("创建失败");
            }
            this.isShowPreview = false;
          }
          // }
          // else {
          //   this.$message.warning(result.msg);
          //   return;
          // }
        } else {
          this.$message.warning("请完善表单");
          return false;
        }
      });
    },

    getBtnMapList(tableKey) {
      let res = this.formData.btnGroupList.map((item) => {
        return {
          tableKey,
          btnKey: item,
        };
      });
      return res;
    },
    // 修改表格回显数据
    async initTableData(tId) {
      let res = await getTableInfo(tId);
      if (res.code == 200) {
        this.dragTableStatisticList = res?.data?.dragTableStatisticList;
        this.dragTableStyleList = res?.data?.dragTableStyleList;
        let echoData = JSON.parse(res?.data?.echoData);
        this.tableName = echoData?.tableName;
        this.tableFieldList = echoData?.tableFieldData;
        this.filterDataEcho = echoData?.filterData;
        let {
          isShowList,
          timeFormate,
          orderByColumn,
          isAsc,
          primaryKey,
          menuName,
          btnGroupList,
          dtType
        } = echoData.formData;
        Object.assign(this.formData, {
          menuName,
          isShowList,
          timeFormate,
          orderByColumn,
          isAsc,
          primaryKey,
          btnGroupList,
          dtType
        });
        this.formData.routePath = this.getParentMenuId(
          res.data.menuId,
          this.menus,
          {}
        );
        // console.log('[传的res.data.menuId和返回的值]', res.data.menuId,this.formData.routePath)
        // console.log('[传的第二个值]',this.menus)

        //处理联合查询回显数据
        this.classificationDataEcho = res.data.searchFieldList.filter(
          (item) => item.conditionType != "SuperQuery" && item.conditionType != "DefaultQuery"
        );
        if (!this.formData.routePath && this.formData.dtType != '3') {
          this.$message.warning("该表格菜单路由已经删除,请重新配置");
          this.isNeedNewMenu = true;
        }
        // this.formData.routePath
        this.editData = res.data;
        let val = await getParticMenu(res.data.tableKey);
        if (val.code == 200) {
          this.menuId = val.data?.menuId;
        }
      } else {
        this.$message.error("数据回显失败");
      }
    },
    // 获取父级menuId
    getParentMenuId(menuId, menus) {
      // console.log('[menuId]',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 != "menuedit" ? true : false;
    },
    // 添加数据字段对话框
    async addDataDialog() {
      this.staictitle = "添加统计数据字段";
      this.isShowAddData = true;
      this.dataType = await this.getDicts("table_statistic_type");
      this.dataType = this.dataType.data;
    },
    async updataDialog() {
    },
    // 修改数据字段
    upadtaData() {
      this.dragTableStatisticList.forEach((item, index) => {
        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;
      this.dataCountFormData = {};
    },
    // 添加数据字段
    addData() {
      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) => {
      });
    },
    // 修改统计信息
    async handleUpdateStat(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;
    },
    // 删除统计信息
    handleDeleteStat(row) {
      this.dragTableStatisticList.forEach((item, index) => {
        if (item.id == row.id) {
          this.dragTableStatisticList.splice(index, 1);
        }
      });
    },

    // 获取当前表描述
    getTableCommont(tableName, tableList) {
      return tableList.find((item) => item.tableName == tableName).tableComment;
    },

    // 获取按钮组数据
    async getBtnList() {
      let res = await listBtn({ isEnablePaging: false, btnParentId: 0 });
      // this.btnGroupOption=res.rows
      // this.btnGroupOptions = res.rows.filter((item) => !item.whetherBind);
      this.btnGroupOptions = res.rows.filter((item) => {
        let isMyBtn = this.formData.btnGroupList.some(
          (val) => item.btnKey == val
        );
        return !item.whetherBind || isMyBtn;
      });
    },
  },
  created() {
  },
  async mounted() {
    this.getBtnTemplate();
    this.getAllTable();
    this.initDragTable();
    await this.getMenuList();
    if (this.$route.query.tId) {
      this.tId = this.$route.query.tId;
      await this.initTableData(this.tId);
    }
    this.getBtnList();
  },
};
</script>

<style scoped lang="scss">
.discribe {
  display: block;
  max-width: 200px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.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: 70% !important;
}

.edit {
  width: 30% !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>