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

<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :span="18" :class="{ edit: menudata }">
        <el-card
          v-show="tabIndex == '0'"
          shadow="always"
          :body-style="{ padding: '20px' }"
        >
          <template #header>
            <div>
              <span>基础信息</span>
            </div>
          </template>
          <el-select
            v-model="tableName"
            placeholder="请选择数据表"
            filterable
            @change="getList"
            class="mb10"
          >
            <el-option
              v-for="item in tableList"
              :key="item.tableName"
              :label="item.tableComment"
              :value="item.tableName"
            >
              <span style="float: left">{{ item.tableComment }}</span>
              <span style="float: right; color: #8492a6; font-size: 13px">{{
                item.tableName
              }}</span>
            </el-option>
          </el-select>
          <el-table
            :data="tableFieldList"
            border
            ref="dragTable"
            row-key="id"
            max-height="500px"
          >
            >
            <el-table-column
              type="index"
              label="序号"
              width="50"
              class-name="allowDrag"
            >
            </el-table-column>
            <el-table-column prop="fieldName" label="数据字段">
            </el-table-column>
            <el-table-column prop="fieldDescription" label="字段描述">
              <template slot-scope="scope">
                <input
                  :class="{
                    isNullDesc:
                      scope.row.fieldDescription == '' &&
                      scope.row.isShow &&
                      isInputInvalid
                        ? true
                        : false,
                    ipt: true,
                  }"
                  v-model="scope.row.fieldDescription"
                />
              </template>
            </el-table-column>
            <el-table-column prop="relationTable" label="关联表">
              <template slot-scope="scope">
                <el-select
                  v-model="scope.row.relationTable"
                  :disabled="
                    !scope.row.relationTableList ||
                    !scope.row.relationTableList.length
                  "
                  placeholder="请选择关联的表"
                  clearable
                  filterable
                  @change="ralationTableChange(scope.row)"
                >
                  <el-option
                    v-for="item in scope.row.relationTableList"
                    :key="item.tableName"
                    :label="item.tableComment"
                    :value="item.tableName"
                  >
                    <span style="float: left">{{ item.tableComment }}</span>
                    <span
                      style="float: right; color: #8492a6; font-size: 13px"
                      >{{ item.tableName }}</span
                    >
                  </el-option>
                </el-select>
              </template>
            </el-table-column>
            <el-table-column prop="relationFieldName" label="关联条件字段">
              <template slot-scope="scope">
                <el-select
                  v-model="scope.row.relationFieldName"
                  @change="relationFieldChange(scope.row)"
                  :disabled="!scope.row.disableRelaFieldName"
                  placeholder="关联字段"
                  filterable
                >
                  <el-option
                    v-for="item in scope.row.relaFieldNameList"
                    :key="item.fieldName"
                    :label="item.fieldDescription"
                    :value="item.fieldName"
                  >
                  </el-option>
                </el-select>
              </template>
            </el-table-column>
            <el-table-column prop="relationType" label="关联方式">
              <template slot-scope="scope">
                <el-select
                  v-model="scope.row.relationType"
                  placeholder="请选择关联方式"
                  :disabled="!scope.row.disableRelaType"
                  @change="relationTypeChangeHandler(scope.row)"
                  filterable
                >
                  <el-option
                    v-for="item in relaTypeList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </template>
            </el-table-column>
            <el-table-column prop="isShow" label="是否显示">
              <template slot-scope="scope">
                <el-switch v-model="scope.row.isShow"> </el-switch>
              </template>
            </el-table-column>
            <el-table-column prop="isShowRelaDialog" label="添加依赖关系">
              <template slot-scope="scope">
                <el-switch
                  v-model="scope.row.isShowRelaDialog"
                  @change="isShowRelaDialogHandler(scope.row)"
                >
                </el-switch>
              </template>
            </el-table-column>
          </el-table>
        </el-card>

        <SubList
          ref="subList"
          v-show="tabIndex == '1'"
          :tableListName="'tableList1'"
          :menudata="menudata"
          :tableList="tableList"
          :echoData="subEchoData.echoData"
          :btnGroupOptions="btnGroupOptions"
          @tableNameChange="subNameHandler"
          @fieldListChange="filedListHandler"
        />
        <SubList
          ref="StatusTable"
          v-show="tabIndex == '2'"
          :tableListName="'tableList2'"
          :menudata="menudata"
          :tableList="tableList"
          :echoData="countEchoData.echoData"
          :btnGroupOptions="btnGroupOptions"
          @tableNameChange="statusTableHandler"
          @fieldListChange="statusFieldListHandler"
        />
      </el-col>

      <el-col :span="6" :class="{ menudata: menudata }">
        <el-tabs v-model="activeName" @tab-click="tabhandleClick">
          <el-tab-pane label="基础信息" name="menuedit">
            <el-card shadow="always" :body-style="{ padding: '10px' }">
              <el-form
                ref="formData"
                :model="formData"
                label-width="100px"
                :rules="rules"
              >
                <el-form-item label="组名称" prop="groupName">
                  <el-input v-model="formData.groupName"></el-input>
                </el-form-item>
                <el-form-item label="组描述" prop="groupDescription">
                  <el-input v-model="formData.groupDescription"></el-input>
                </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"
                    >
                      <span style="float: left">{{
                        val.fieldDescription
                      }}</span>
                      <span
                        style="float: right; color: #8492a6; font-size: 13px"
                        >{{ val.fieldName }}</span
                      >
                    </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="排序依赖字段">
                  <el-select
                    v-model="formData.orderByColumn"
                    placeholder="请选择排序依赖"
                  >
                    <el-option
                      v-for="val in primaryKeyList"
                      :key="val.fieldName"
                      :label="val.fieldDescription"
                      :value="val.fieldName"
                    >
                      <span style="float: left">{{
                        val.fieldDescription
                      }}</span>
                      <span
                        style="float: right; color: #8492a6; font-size: 13px"
                        >{{ val.fieldName }}</span
                      >
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="排序方式" v-show="formData.orderByColumn">
                  <el-radio v-model="formData.isAsc" :label="false"
                    >升序</el-radio
                  >
                  <el-radio v-model="formData.isAsc" :label="true"
                    >降序</el-radio
                  >
                </el-form-item>
                <!-- <el-form-item label="当前表字段">
                  <el-select
                    v-model="formData.relyFile"
                    placeholder="请选择当前表字段"
                  >
                    <el-option
                      v-for="item in orderByFieldList"
                      :key="item.fieldName"
                      :label="item.fieldDescription"
                      :value="item.tableName + '.' + item.fieldName"
                    >
                    </el-option>
                  </el-select>
                </el-form-item> -->

                <!-- <el-form-item label="依赖表格">
                  <el-select
                    v-model="formData.relytableName"
                    placeholder="请选择依赖表"
                    filterable
                    @change="getrelyList"
                    class="mb10"
                  >
                    <el-option
                      v-for="item in dragTableList"
                      :key="item.dtName"
                      :label="item.dtName"
                      :value="item.dtName"
                    >
                      <span style="float: left">{{ item.dtName }}</span>
                    </el-option>
                  </el-select>
                </el-form-item>

                <el-form-item label="依赖表格字段">
                  <el-select
                    v-model="formData.relaykey"
                    placeholder="请选择依赖字段"
                  >
                    <el-option
                      v-for="item in dragTableFilds"
                      :key="item.keu"
                      :label="item.val"
                      :value="item.key"
                    ></el-option>
                  </el-select>
                </el-form-item> -->

                <!-- <el-form-item label="依赖表">
                  <el-select
                    v-model="formData.relytableName"
                    placeholder="请选择依赖表"
                    filterable
                    @change="getrelalist"
                    class="mb10"
                  >
                    <el-option
                      v-for="item in tableList"
                      :key="item.tableName"
                      :label="item.tableComment"
                      :value="item.tableName"
                    >
                      <span style="float: left">{{ item.tableComment }}</span>
                      <span
                        style="float: right; color: #8492a6; font-size: 13px"
                        >{{ item.tableName }}</span
                      >
                    </el-option>
                  </el-select>
                </el-form-item>

                <el-form-item label="依赖表字段">
                  <el-select
                    v-model="formData.relaykey"
                    placeholder="请选择依赖字段"
                  >
                    <el-option
                      v-for="val in relayTableList"
                      :key="val.fieldName"
                      :label="val.fieldDescription"
                      :value="val.fieldName"
                    >
                      <span style="float: left">{{
                        val.fieldDescription
                      }}</span>
                      <span
                        style="float: right; color: #8492a6; font-size: 13px"
                        >{{ val.fieldName }}</span
                      >
                    </el-option>
                  </el-select>
                </el-form-item> -->
                <el-form-item>
                  <el-button size="mini" @click="previewHandle">预览</el-button>
                  <el-button size="mini" type="primary" @click="createHandle">{{
                    tId ? "确认修改" : "确认创建"
                  }}</el-button>
                </el-form-item>
              </el-form>
            </el-card>
          </el-tab-pane>
          <el-tab-pane label="关联子表" name="styleEdit">
            <el-card shadow="always" :body-style="{ padding: '10px' }">
              <relayTable
                ref="styleTableRef"
                :echoData="echoData"
                :btnGroupOptions="btnGroupOptions"
                :subFieldList="subFiledList"
                @subFormData="subFormDataHandler"
                :dragTableList="dragTableList"
                :tableList="tableList"
              />
              <el-button
                type="primary"
                class="inline-large-button addcount"
                icon="el-icon-plus"
                size="mini"
                @click="addDataDialog"
              >
                添加数据字段
              </el-button>
              <el-table
                :data="dragTableStatisticList"
                border
                class="mb10"
                style="width: 100%"
              >
                <!-- <el-table-column prop="number" label="序号" width="50"> -->
                <!-- style="width: 100%"> -->
                <el-table-column
                  type="index"
                  label="序号"
                  width="50"
                  class-name="allowDrag"
                >
                </el-table-column>

                <el-table-column
                  prop="statisticTitle"
                  label="统计标题"
                  width="83"
                >
                </el-table-column>
                <el-table-column
                  prop="statisticField"
                  label="统计数据"
                  width="80"
                >
                </el-table-column>
                <el-table-column
                  prop="statisticType"
                  label="统计类型"
                  width="50"
                >
                </el-table-column>
                <el-table-column
                  label="操作"
                  align="center"
                  class-name="small-padding fixed-width"
                >
                  <template slot-scope="scope">
                    <el-dropdown>
                      <el-button type="warning" plain size="small">
                        处理<i class="el-icon-arrow-down el-icon--right"></i>
                      </el-button>
                      <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item>
                          <el-button
                            size="mini"
                            type="text"
                            icon="el-icon-edit"
                            @click="handleUpdateStat(scope.row)"
                            >修改
                          </el-button>
                        </el-dropdown-item>
                        <el-dropdown-item>
                          <el-button
                            size="mini"
                            type="text"
                            icon="el-icon-delete"
                            @click="handleDeleteStat(scope.row)"
                            >删除
                          </el-button>
                        </el-dropdown-item>
                      </el-dropdown-menu>
                    </el-dropdown>
                  </template>
                </el-table-column>
              </el-table>
            </el-card>
          </el-tab-pane>
          <el-tab-pane label="数据统计" name="datacount">
            <el-card shadow="always" :body-style="{ padding: '10px' }">
              <el-form ref="countData" :model="countData" label-width="100px">
                <el-form-item label="按钮组" prop="btnGroupList">
                  <el-select
                    v-model="countData.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="状态展示标题" prop="title">
                  <el-input
                    @input="iptChange()"
                    v-model="countData.title"
                    placeholder="请输入展示标题"
                  ></el-input>
                </el-form-item> -->

                <!-- <el-form-item label="选择数据表" prop="table">
                  <el-select
                    @input="iptChange()"
                    v-model="countData.countName"
                    placeholder="请选择数据表"
                    filterable
                    @change="getCountList"
                    class="mb10"
                  >
                    <el-option
                      v-for="item in countList"
                      :key="item.tableName"
                      :label="item.tableComment"
                      :value="item.tableName"
                    >
                      <span style="float: left">{{ item.tableComment }}</span>
                      <span
                        style="float: right; color: #8492a6; font-size: 13px"
                        >{{ item.tableName }}</span
                      >
                    </el-option>
                  </el-select>
                </el-form-item> -->

                <el-form-item label="表格主键" prop="primaryKey">
                  <el-select
                    @input="iptChange()"
                    v-model="countData.primaryKey"
                    placeholder="请选择表格主键"
                  >
                    <el-option
                      v-for="val in countPrimaryKeyList"
                      :key="val.fieldName"
                      :label="val.fieldDescription"
                      :value="val.fieldName"
                    >
                      <span style="float: left">{{
                        val.fieldDescription
                      }}</span>
                      <span
                        style="float: right; color: #8492a6; font-size: 13px"
                        >{{ val.fieldName }}</span
                      >
                    </el-option>
                  </el-select>
                </el-form-item>

                <!-- <el-form-item label="统计字段">
                  <el-select
                    v-model="countData.countFile"
                    placeholder="请选择统计字段"
                    @input="iptChange()"
                  >
                    <el-option
                      v-for="item in countByFieldList"
                      :key="item.fieldName"
                      :label="item.fieldDescription"
                      :value="item.fieldName"
                    >
                      <span style="float: left">{{
                        item.fieldDescription
                      }}</span>
                      <span
                        style="float: right; color: #8492a6; font-size: 13px"
                        >{{ item.fieldName }}</span
                      >
                    </el-option>
                  </el-select>
                </el-form-item> -->
              </el-form>
            </el-card>
          </el-tab-pane>
        </el-tabs>
      </el-col>
    </el-row>

    <el-dialog title="效果预览" :visible.sync="isShowPreview" width="50%">
      <div class="cardBox">
        <el-card
          shadow="hover"
          :body-style="{ padding: '20px' }"
          class="card"
          v-for="(item, index) in deepragTableStatisticList"
          :key="index"
        >
          <el-tooltip
            class="item"
            effect="dark"
            :content="item.statisticTitle"
            placement="top-start"
          >
            <div class="title">
              {{
                item.statisticTitle
                  ? item.statisticTitle
                  : item.statisticDescription
              }}
            </div>
          </el-tooltip>

          <div class="type">
            <div class="count">统计结果</div>
          </div>
        </el-card>
      </div>

      <el-row :gutter="10" class="mb8">
        <el-col :span="18">
          <el-input placeholder="请输入" clearable />
        </el-col>

        <el-col :span="6" class="previewbtn">
          <el-button
            type="primary"
            icon="el-icon-search"
            size="small"
            @click="() => {}"
            >搜索</el-button
          >
          <el-button icon="el-icon-refresh" size="small" @click="() => {}"
            >重置</el-button
          >
        </el-col>
      </el-row>

      <el-row :gutter="10" class="mb8">
        <el-col :span="1.5">
          <el-button
            type="primary"
            plain
            icon="el-icon-plus"
            size="mini"
            @click="() => {}"
            >新增
          </el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button
            type="success"
            plain
            icon="el-icon-edit"
            size="mini"
            :disabled="false"
            @click="() => {}"
            >修改
          </el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button
            type="danger"
            plain
            icon="el-icon-delete"
            size="mini"
            :disabled="false"
            @click="() => {}"
            >删除
          </el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button plain icon="el-icon-upload2" size="mini" @click="() => {}"
            >导入
          </el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button
            type="warning"
            plain
            icon="el-icon-download"
            size="mini"
            @click="() => {}"
            >导出
          </el-button>
        </el-col>
      </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="操作"
          align="center"
          class-name="small-padding fixed-width"
        >
          <template>
            <el-dropdown>
              <el-button type="warning" plain size="small">
                处理<i class="el-icon-arrow-down el-icon--right"></i>
              </el-button>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item
                  ><el-button
                    size="mini"
                    type="text"
                    icon="el-icon-edit"
                    @click="() => {}"
                    >修改</el-button
                  ></el-dropdown-item
                >
                <el-dropdown-item
                  ><el-button
                    size="mini"
                    type="text"
                    icon="el-icon-delete"
                    @click="() => {}"
                    >删除</el-button
                  >
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="pageList"
      />
      <template #footer>
        <span>
          <el-button @click="isShowPreview = false">关闭</el-button>
          <el-button type="primary" @click="createHandle">{{
            tId ? "确认修改" : "确认关联"
          }}</el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 添加数据统计对话框 -->
    <el-dialog :title="staictitle" :visible.sync="isShowAddData" width="30%">
      <el-form label-width="100px" :model="dataCountFormData">
        <el-form-item label="统计标题" prop="statisticTitle">
          <el-input v-model="dataCountFormData.statisticTitle"></el-input>
        </el-form-item>

        <el-form-item label="统计数据">
          <el-select
            v-model="dataCountFormData.statisticField"
            placeholder="请选择统计字段"
          >
            <el-option
              v-for="item in dataArr"
              :key="item.id"
              :label="item.fieldDescription"
              :value="item.tableName + '.' + item.fieldName"
            >
              <span style="float: left; margin-right: 5px"
                >{{ item.fieldDescription }}
              </span>
              <span style="float: right; color: #8492a6; font-size: 13px">{{
                item.fieldName
              }}</span>
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="统计类型">
          <el-select
            v-model="dataCountFormData.statisticType"
            placeholder="请选择统计类型"
          >
            <el-option
              v-for="item in dataType"
              :key="item.dictCode"
              :label="item.dictLabel"
              :value="item.dictValue"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="closeAddDialog">取 消</el-button>
        <el-button
          v-if="staictitle == '修改统计数据字段'"
          type="primary"
          @click="upadtaData"
          >确 定</el-button
        >

        <el-button v-else type="primary" @click="addData">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 添加依赖关系 -->
    <RelayDialog ref="relayRef" @saveRelayRes="saveRelayRes"></RelayDialog>
  </div>
</template>

<script>
import { getTableInfo } from "@/api/system/table.js";
import {
  dragTableInfo,
  addStatistic,
  updateStatistic,
  addGroupTableStatistic,
  updateGroupTableStatistic,
} from "@/api/tablelist/commonTable";
import { listTable } from "@/api/dragform/tableList";
import {
  getFormName,
  getListName,
  dragTablePreview,
} from "@/api/dragform/form.js";
import { getTable } from "@/api/relateTable/index.js";
import { addDialogGroup, undataDialogGroup } from "@/api/dialogMange/index.js";
import { listType } from "@/api/system/dict/type.js";
import { mapState } from "vuex";
import Sortable from "sortablejs";
import { v4 as uuidv4 } from "uuid";
import { listBtn } from "@/api/system/btn";
import relayTable from "./components/relayTable.vue";
import SubList from "./relayTableMange/tablelist.vue";
import RelayDialog from "./components/RelayDialog.vue";

export default {
  name: "tableMange",
  dicts: ["sys_time_format", "table_statistic_type"],
  props: [],
  components: { relayTable, SubList, RelayDialog },
  data() {
    return {
      // 关联子表数据回显
      echoData: {},
      dragTableList: [],
      countdragTableList: [],
      dragTableFilds: {},
      // 统计子表
      countdragTableFilds: [],
      // 子表tablename
      subTableName: "",
      subFiledList: [],
      statusFieldList: [], //状态按钮 字段数据
      // 依赖表名称
      // relytableName: '',
      staictitle: this.$t('dialog.addStatisticField'),
      isInputInvalid: false,
      // 修改表格时的menuId
      menuId: "",
      // 修改表格的id
      tId: "",
      // 当前模板信息
      templateInfo: {},
      // 排序方式 默认降序
      sortState: true,
      // 列信息
      columns: {},
      // 查询条件
      queryFromWhere: {},
      // 当前table唯一标识
      sqlKey: "",
      // 动态数据sqlkey
      staticSqlKey: "",
      // 表格的高度
      tableKey: "",
      // tableHeight: document.documentElement.scrollHeight - 245 + "px",
      tableList: [], //所有表格列表
      tableFieldList: [], // 当前表格字段数据
      relayFieldList: [],
      tableName: "", // 当前表名称

      relationTableList: [], //关联表格列表
      relationFieldList: [], //关联字段列表
      relationTypeList: [], //关联方式列表
      total: 0, //表格数据总数
      relyOptions: [
        {
          value: "0",
          label: this.$t('dialog.customDependency'),
        },
        {
          value: "1",
          label: this.$t('dialog.dependOnOtherField'),
        }
      ],
      // 依赖值
      relayValue: "",
      // 依赖字段
      relyFileds: {},
      relaTypeList: [
        {
          label: this.$t('dialog.equalJoin'),
          value: "INNER JOIN",
        },
        {
          label: this.$t('dialog.leftJoin'),
          value: "LEFT JOIN",
        },
        {
          label: this.$t('dialog.rightJoin'),
          value: "RIGHT JOIN",
        }
      ],
      headerList: [
        {
          prop: "fieldName",
          label: "数据字段",
        },
        {
          prop: "fieldDescription",
          label: "字段描述",
        },
        {
          prop: "relationTable",
          label: "关联表",
        },
        {
          prop: "relationFieldName",
          label: "关联字段",
        },
        {
          prop: "relationType",
          label: "关联方式",
        },
        {
          prop: "isShow",
          label: "是否显示",
        },
        {
          prop: "isSearch",
          label: "是否包含查询",
        },
        {
          prop: "isExport",
          label: "是否导出",
        },
        {
          prop: "isCount",
          label: "是否统计",
        },
      ], //表头列表

      // 基础信息编辑
      formData: {
        groupName: "",
        groupDescription: "",
        routePath: undefined,
        isShowList: true,
        timeFormate: "",
        orderByColumn: "",
        isAsc: false,
        primaryKey: "",
        btnGroupList: [],
      },
      // 统计信息
      countData: {},
      rules: {
        groupName: [
          { required: true, message: "请输入组名称", trigger: "blur" },
        ],
        groupDescription: [
          { required: true, message: "请输入组描述", trigger: "blur" },
        ],
        timeFormate: [
          { required: true, message: "请选择时间格式", trigger: "change" },
        ],
        primaryKey: [
          { required: true, message: "请选择表格主键", trigger: "blur" },
        ],
        fieldDescription: [
          { required: true, message: "请输入字段描述", trigger: "blur" },
        ],
      },
      // tab切换
      tabIndex: "0",
      menus: [], //路由列表数据

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

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

      //操作列按钮组数据
      btnGroupOptions: [],

      // 统计展示字段
      countFiledsList: [
        {
          label: "直接展示",
          value: "0",
        },
        {
          label: "字段关联展示",
          value: "1",
        },
      ],
      // 关联字段字典
      countDicts: [],
      // 子表表单数据
      subformData: {},
      // 数据统计
      countName: "",
      countFieldList: [],
      // 统计状态信息回显
      statusCount: [],
      // 回显数据单表列表
      lists: [],
      relayField: [],
      countrelayFieldList: [],
      relaytableField: [],

      // 依赖相关数据
      row: null,
    };
  },
  computed: {
    // 数据字段
    dataArr() {
      // console.log(this.subFiledList);
      return this.subFiledList?.filter((item) => item.isShow);
    },
    // 数据表
    countList() {
      return this.tableList;
    },
    // 统计数据依赖表
    countRelayList() {
      return this.tableList;
    },
    // 依赖表
    relayList() {
      return this.tableList;
    },
    infoTableList() {
      return this.tableList;
    },
    // 数据统计字段表名中文
    isShowTableName() {
      let tableComment;
      this.subFiledList.forEach((item) => {
        if (item.tableName === this.subTableName) {
          tableComment = item.tableComment;
        }
      });
      // console.log(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,
    }),
    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;
    },
    // 统计字段
    countByFieldList() {
      return this.countFieldList;
    },
    // 表格主键
    primaryKeyList: {
      get() {
        return this.tableFieldList.filter((item) => !item.isChildren);
      },
    },
    // 数据统计表格主键
    countPrimaryKeyList() {
      // console.log(this.countFieldList);
      return this.countFieldList.filter((item) => !item.isChildren);
    },
    // 依赖表字段
    relayTableList() {
      return this.relaytableField.filter((item) => !item.isChildren);
    },
    relayKeyList() {
      return this.relayFieldList.filter((item) => !item.isChildren);
    },
    // 数据统计依赖表字段
    countRelayField() {
      return this.countrelayFieldList.filter((item) => !item.isChildren);
    },
  },
  watch: {
    tableName: function (val) {
      if (val) {
        this.relationTableList = this.tableList
          .filter((item) => item.tableName != val)
          .map((item) => {
            return {
              tableName: item.tableName,
              tableComment: item.tableComment,
            };
          });
      } else {
        this.relationTableList = [];
      }
    },
  },
  methods: {
    // 数据统计tag选择数据表
    getCountList() {
      if (!this.countData.countName) return;
      let data = {
        databaseName: this.databaseName,
        databaseType: this.databaseType,
        tableName: this.countData.countName,
      };
      let tableComment = this.getTableCommont(
        this.countData.countName,
        this.tableList
      );
      // 获取当前表单结构信息
      getListName(data).then((res) => {
        // console.log(res);
        this.countFieldList = res.map((item, index) => {
          return {
            id: this.countData.countName + "_" + item.fieldName,
            fieldName: item.fieldName,
            fieldDescription: item.fieldDescription,
            relationTable: "",
            relationFieldName: "",
            relaFieldNameList: [],
            disableRelaFieldName: false,
            relationType: "",
            relationShowField: [],
            relationShowFiledList: [],
            disableRelaType: false,
            isShowRelaDialog: false, //关联关系弹窗
            relaData: {}, //关联数据
            isShow: false,
            isSearch: false,
            isExport: true,
            relationTableList: this.relationTableList,
            tableName: this.tableName,
            tableComment,
            relationFieldList: [],
          };
        });
      });
    },
    // 数据统计依赖表
    getCountrelayList() {
      if (!this.countData.relytableName) return;
      let data = {
        databaseName: this.databaseName,
        databaseType: this.databaseType,
        tableName: this.countData.relytableName,
      };
      let tableComment = this.getTableCommont(
        this.countData.relytableName,
        this.tableList
      );
      // 获取当前表单结构信息
      getListName(data).then((res) => {
        // console.log(res);
        this.countrelayFieldList = res.map((item, index) => {
          return {
            id: this.countData.countName + "_" + item.fieldName,
            fieldName: item.fieldName,
            fieldDescription: item.fieldDescription,
            relationTable: "",
            relationFieldName: "",
            relaFieldNameList: [],
            disableRelaFieldName: false,
            relationType: "",
            relationShowField: [],
            relationShowFiledList: [],
            isShowRelaDialog: false, //关联关系弹窗
            relaData: {}, //关联数据
            disableRelaType: false,
            isShow: false,
            isSearch: false,
            isExport: true,
            relationTableList: this.relationTableList,
            tableName: this.countData.relytableName,
            tableComment,
            relationFieldList: [],
          };
        });
      });
    },
    // 关联字典字段
    async getDictType() {
      let data = {
        isEnablePaging: false,
      };
      let res = await listType(data);
      // console.log('字典数据', res);
      this.countDicts = res.rows;
    },
    // 关联子表名
    subNameHandler(val) {
      this.subTableName = val;
    },
    // 统计状态  表名
    statusTableHandler(val) {
      this.countData.countName = val;
    },
    // 关联子表字段
    filedListHandler(list) {
      this.subFiledList = list;
    },
    // 数据统计字段
    statusFieldListHandler(list) {
      this.statusFieldList = list;
      this.countFieldList = list;
    },
    // 关联子表
    subFormDataHandler(data) {
      this.subformData = data;
    },
    /** 查询列表 */
    getList(queryParams) {
      if (!this.tableName) return;
      let data = {
        databaseName: this.databaseName,
        databaseType: this.databaseType,
        tableName: this.tableName,
      };
      let tableComment = this.getTableCommont(this.tableName, this.tableList);
      // 获取当前表单结构信息
      getListName(data).then((res) => {
        // console.log(res);
        this.tableFieldList = res.map((item, index) => {
          return {
            id: this.tableName + "_" + item.fieldName,
            fieldName: item.fieldName,
            fieldDescription: item.fieldDescription,
            relationTable: "",
            relationFieldName: "",
            relaFieldNameList: [],
            disableRelaFieldName: false,
            relationType: "",
            relationShowField: [],
            relationShowFiledList: [],
            disableRelaType: false,
            isShow: false,
            isShowRelaDialog: false, //关联关系弹窗
            relaData: "", //关联数据
            isSearch: false,
            isExport: true,
            relationTableList: this.relationTableList,
            tableName: this.tableName,
            tableComment,
            relationFieldList: [],
          };
        });
        // console.log(this.tableFieldList);
      });
    },
    // 依赖表字段
    getrelalist() {
      if (!this.formData.relytableName) return;
      let data = {
        databaseName: this.databaseName,
        databaseType: this.databaseType,
        tableName: this.formData.relytableName,
      };
      let tableComment = this.getTableCommont(
        this.formData.relytableName,
        this.tableList
      );
      // 获取当前表单结构信息
      getListName(data).then((res) => {
        // console.log(res);
        this.relaytableField = res.map((item, index) => {
          return {
            id: this.formData.relytableName + "_" + item.fieldName,
            fieldName: item.fieldName,
            fieldDescription: item.fieldDescription,
            relationTable: "",
            relationFieldName: "",
            relaFieldNameList: [],
            disableRelaFieldName: false,
            relationType: "",
            relationShowField: [],
            relationShowFiledList: [],
            disableRelaType: false,
            isShow: false,
            isShowRelaDialog: false, //关联关系弹窗
            relaData: "", //关联数据
            isSearch: false,
            isExport: true,
            relationTableList: this.relationTableList,
            tableName: this.formData.relytableName,
            tableComment,
            relationFieldList: [],
          };
        });
        // console.log(this.relayField);
      });
    },
    // 依赖表格
    getrelyList() {
      // console.log(this.formData.relytableName);
      this.dragTableList.forEach((item) => {
        if (this.formData.relytableName == item.dtName) {
          this.dragTableFilds = JSON.parse(item.dtColumnName);
        }
      });
      this.dragTableFilds.forEach((item) => {
        for (let val in item) {
          item.key = val;
          item.val = item[val];
        }
      });
    },
    // 依赖表格
    getCountrelyList() {
      if (this.countdragTableList) {
        this.countdragTableList?.forEach((item) => {
          // console.log(this.countData.relytableName);
          if (this.countData.relytableName == item.dtName) {
            this.countdragTableFilds = JSON.parse(item.dtColumnName);
          }
        });

        this.countdragTableFilds?.forEach((item) => {
          for (let val in item) {
            item.key = val;
            item.val = item[val];
          }
        });
      }
    },
    // 依赖表格列表数据
    getdragTable() {
      let queryParams = {
        isEnablePaging: false,
        dtType: 0,
      };
      listTable(queryParams).then((res) => {
        this.dragTableList = res.rows;
        this.countdragTableList = res.rows;
      });
    },
    // 关联表变化回调
    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,
          isShowRelaDialog: false, //关联关系弹窗
          relaData: "", //关联数据
          isShow: false,
          isSearch: false,
          isExport: true,
          relationTableList,
          tableName: row.relationTable,
          tableComment,
          relationFieldList: [],
          isChildren: true,
        };
      });
      // this.tableFieldList = [...this.tableFieldList, ...row.relationFieldList];
      row.disableRelaFieldName = true;
    },
    // 关联类型变化回调
    relationTypeChangeHandler(row) {
      let tempRelationFieldList = row.relationFieldList.filter((item) => {
        return !this.tableFieldList.find((val) => val.id === item.id);
      });
      this.tableFieldList = [...this.tableFieldList, ...tempRelationFieldList];
    },
    // 关联字段回调
    relationFieldChange(row) {
      if (!row.relationFieldName) {
        row.relationType = "";
        row.disableRelaType = false;
        row.relaFieldNameList = [];
        return;
      }
      row.disableRelaType = true;
    },
    // 勾选框回调
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.id);
      // this.single = selection.length != 1;
      this.multiple = !selection.length;
    },
    // 分页查询
    pageList(row) {
      this.$refs.mychild.pageList(
        row == undefined
          ? {
              limit: this.queryParams.pageSize,
              page: this.queryParams.pageNum,
            }
          : row
      );
    },
    // 多选框改变回调
    checkedChangeHandle(val) {},
    // 获取所有表格
    async getAllTable() {
      let data = {
        databaseName: this.databaseName,
        databaseType: this.databaseType,
      };
      let res = await getFormName(data);
      const baseTable = await this.getDicts("base_table");

      this.tableList = res.data.filter((item) => {
        return !baseTable.data.some(
          (value) =>
            value.dictValue.toLowerCase() == item.tableName.toLowerCase()
        );
      });
    },
    //处理表格行拖拽
    initDragTable() {
      const el = this.$refs.dragTable.$el.querySelectorAll(
        ".el-table__body-wrapper > table > tbody"
      )[0];
      const sortable = Sortable.create(el, {
        handle: ".allowDrag",
        onEnd: (evt) => {
          const targetRow = this.tableFieldList.splice(evt.oldIndex, 1)[0];
          this.tableFieldList.splice(evt.newIndex, 0, targetRow);
          for (let index in this.tableFieldList) {
            this.tableFieldList[index].sort = parseInt(index) + 1;
          }
        },
      });
    },
    // 校验字段合法性(递归版)
    validateField(tableFieldList, validateParams) {
      if (!tableFieldList.length) {
        return;
      }
      for (let i = 0; i < tableFieldList.length; i++) {
        let temp = tableFieldList[i];
        if (!temp.fieldDescription?.trim() && temp.isShow) {
          //描述字段不能为空
          validateParams.isFieldDescrib = true;
        }
        if (
          temp.relationTable &&
          (!temp.relationFieldName || !temp.relationType)
        ) {
          // 关联条件不足
          validateParams.isRelationFieldAll = true;
        }
        if (temp.relationFieldList.length) {
          this.validateField(temp.relationFieldList, validateParams);
        }
      }
    },
    // 校验字段合法性(非递归版)
    validateTableData(tableFieldList) {
      if (!tableFieldList.length) {
        return {
          val: false,
          meg: "字段个数不能为空",
        };
      }
      for (let i = 0; i < tableFieldList.length; i++) {
        let temp = tableFieldList[i];
        if (!temp.fieldDescription?.trim() && temp.isShow) {
          return {
            val: false,
            msg: "显示的字段,字段描述不能为空",
          };
        }
        if (
          temp.relationTable &&
          (!temp.relationFieldName || !temp.relationType)
        ) {
          return {
            val: false,
            msg: "关联条件不足,请完善关联条件",
          };
        }
      }
      if (tableFieldList.filter((item) => item.isShow).length == 0) {
        return {
          val: false,
          msg: "显示的字段数不能为空",
        };
      }
      // if (
      //   tableFieldList.filter((item) => item.isExport && !item.isChildren)
      //     .length == 0
      // ) {
      //   return {
      //     val: false,
      //     msg: "导出字段中至少应有一个主表字段",
      //   };
      // }
      // 导出的字段的描述不能重复
      // let describeArr = tableFieldList
      //   .filter((item) => item.isExport)
      //   .map((item) => item.fieldDescription);
      // let isRepeat = false;
      // describeArr.map((item) => {
      //   if (describeArr.indexOf(item) != describeArr.lastIndexOf(item)) {
      //     isRepeat = true;
      //   }
      // });
      // if (isRepeat) {
      //   return {
      //     val: false,
      //     msg: "导出的字段描述不能重复",
      //   };
      // }

      return {
        val: true,
        msg: "",
      };
    },
    // 递归拼接查询语句
    getSQLString(
      tableFieldList,
      fieldArr,
      tableArr,
      sqlType = "mysql",
      formData
    ) {
      let prefix = "{DBNAME}.";
      let asOrSpace = sqlType == "oracle" ? " " : " AS ";
      for (let i = 0; i < tableFieldList.length; i++) {
        let temp = tableFieldList[i];
        if (temp.isShow) {
          let tempArr = prefix + temp.tableName + "." + temp.fieldName;
          if (temp.isChildren) {
            tempArr += asOrSpace + temp.tableName + "_" + temp.fieldName;
          }
          fieldArr.push(tempArr);
        }
        if (temp.relationTable && temp.relationFieldName && temp.relationType) {
          let isNeedUsername = sqlType == "oracle" ? this.username + "." : "";
          tableArr.push(
            temp.relationType +
              " " +
              isNeedUsername +
              prefix +
              temp.relationTable +
              asOrSpace +
              temp.relationTable +
              " ON " +
              prefix +
              temp.relationTable +
              "." +
              temp.relationFieldName +
              " = " +
              prefix +
              temp.tableName +
              "." +
              temp.fieldName
          );
        }
      }
      // 如果主键不包含显示,则添加至sql语句中
      let isNotInclude = formData.primaryKeyList.find(
        (val) => !val.isShow && val.fieldName == formData.primaryKey
      );
      if (isNotInclude) {
        fieldArr.push(
          prefix + isNotInclude.tableName + "." + isNotInclude.fieldName
        );
      }
    },
    // 递归拼接查询语句
    getSQLCountString(tableFieldList, fieldArr, tableArr, sqlType = "mysql") {
      let prefix = "{DBNAME}.";
      let asOrSpace = sqlType == "oracle" ? " " : " AS ";
      for (let i = 0; i < tableFieldList.length; i++) {
        let temp = tableFieldList[i];
        if (temp.isShow) {
          let tempArr = prefix + temp.tableName + "." + temp.fieldName;
          if (temp.isChildren) {
            tempArr += asOrSpace + temp.tableName + "_" + temp.fieldName;
          }
          fieldArr.push(tempArr);
        }
        if (temp.relationTable && temp.relationFieldName && temp.relationType) {
          let isNeedUsername = sqlType == "oracle" ? this.username + "." : "";
          tableArr.push(
            temp.relationType +
              " " +
              isNeedUsername +
              prefix +
              temp.relationTable +
              asOrSpace +
              temp.relationTable +
              " ON " +
              prefix +
              temp.relationTable +
              "." +
              temp.relationFieldName +
              " = " +
              prefix +
              temp.tableName +
              "." +
              temp.fieldName
          );
        }
      }
      // 如果主键不包含显示,则添加至sql语句中
      let isNotInclude = this.countPrimaryKeyList.find(
        (val) => !val.isShow && val.fieldName == this.countData.primaryKey
      );
      if (isNotInclude) {
        fieldArr.push(
          prefix + isNotInclude.tableName + "." + isNotInclude.fieldName
        );
      }
    },
    // 拼接查询sql语句
    getSQLStr() {
      let prefix = "{DBNAME}.";
      let sqlType = this.databaseType; //数据库类型
      // let sqlType = "oracle";
      let sql = "";
      // mysql
      sql += "SELECT ";
      let fieldNameArr = [],
        relaTypeArr = [];
      this.getSQLString(
        this.tableFieldList,
        fieldNameArr,
        relaTypeArr,
        sqlType,
        {
          ...this.formData,
          primaryKeyList: this.primaryKeyList,
        }
      );
      let isNeedUsername = sqlType == "oracle" ? this.username + "." : "";
      let asOrSpace = sqlType == "oracle" ? " " : " AS ";
      sql +=
        fieldNameArr.join(",") +
        " FROM " +
        isNeedUsername +
        prefix +
        this.tableName +
        asOrSpace +
        this.tableName;
      if (relaTypeArr.length) {
        sql += " " + relaTypeArr.join(" ");
      }
      return sql;
    },
    // 拼接查询sql语句
    getSQLStr2() {
      let prefix = "{DBNAME}.";
      let sqlType = this.databaseType; //数据库类型
      // let sqlType = "oracle";
      let sql = "";
      // mysql
      sql += "SELECT ";
      let fieldNameArr = [],
        relaTypeArr = [];
      console.log(this.subFiledList);
      this.getSQLString(
        this.subFiledList,
        fieldNameArr,
        relaTypeArr,
        sqlType,
        this.subformData
      );
      console.log(fieldNameArr);
      let isNeedUsername = sqlType == "oracle" ? this.username + "." : "";
      let asOrSpace = sqlType == "oracle" ? " " : " AS ";
      sql +=
        fieldNameArr.join(",") +
        " FROM " +
        isNeedUsername +
        prefix +
        this.subTableName +
        asOrSpace +
        this.subTableName;
      if (relaTypeArr.length) {
        sql += " " + relaTypeArr.join(" ");
      }
      return sql;
    },
    // 拼接数据统计查询sql
    getSQLStr3(fieldList, tableName) {
      let prefix = "{DBNAME}.";
      let sqlType = this.databaseType; //数据库类型
      // let sqlType = "oracle";
      let sql = "";
      // mysql
      sql += "SELECT ";
      let fieldNameArr = [],
        relaTypeArr = [];
      this.countData.primaryKeyList = fieldList.filter(
        (item) => !item.isChildren
      );
      this.getSQLString(
        fieldList,
        fieldNameArr,
        relaTypeArr,
        sqlType,
        this.countData
      );
      console.log(fieldNameArr);
      let isNeedUsername = sqlType == "oracle" ? this.username + "." : "";
      let asOrSpace = sqlType == "oracle" ? " " : " AS ";
      sql +=
        fieldNameArr.join(",") +
        " FROM " +
        isNeedUsername +
        prefix +
        tableName +
        asOrSpace +
        tableName;
      if (relaTypeArr.length) {
        sql += " " + relaTypeArr.join(" ");
      }
      return sql;
    },
    // 数据统计sql
    countGetSQLStr(countByFieldList, tableName) {
      let prefix = "{DBNAME}.";
      let sqlType = this.databaseType; //数据库类型
      // let sqlType = "oracle";
      let sql = "";
      // mysql
      sql += "SELECT ";
      let fieldNameArr = [],
        relaTypeArr = [];
      console.log(countByFieldList);
      this.getSQLCountString(
        countByFieldList,
        fieldNameArr,
        relaTypeArr,
        sqlType
      );
      let isNeedUsername = sqlType == "oracle" ? this.username + "." : "";
      let asOrSpace = sqlType == "oracle" ? " " : " AS ";
      sql +=
        fieldNameArr.join(",") +
        " FROM " +
        isNeedUsername +
        prefix +
        tableName +
        asOrSpace +
        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.subFiledList, fieldNameArr, relaTypeArr, sqlType, {
        ...this.countData,
        primaryKeyList: this.primaryKeyList,
      });
      let isNeedUsername = sqlType == "oracle" ? this.username + "." : "";
      let asOrSpace = sqlType == "oracle" ? " " : " AS ";

      sql +=
        key +
        " FROM " +
        isNeedUsername +
        prefix +
        this.subTableName +
        asOrSpace +
        this.subTableName;
      if (relaTypeArr.length) {
        sql += " " + relaTypeArr.join(" ");
      }
      return sql;
    },
    // 统计状态
    getstateSQL(formName, fieldName) {
      let prefix = "{DBNAME}.";
      let sqlType = this.databaseType; //数据库类型
      // let sqlType = "oracle";
      let sql = "";
      // mysql
      sql += "SELECT ";
      let fieldNameArr = [],
        relaTypeArr = [];
      this.getSQLString(this.subFiledList, fieldNameArr, relaTypeArr, sqlType, {
        ...this.formData,
        primaryKeyList: this.primaryKeyList,
      });
      let isNeedUsername = sqlType == "oracle" ? this.username + "." : "";
      let asOrSpace = sqlType == "oracle" ? " " : " AS ";

      sql +=
        fieldName +
        " FROM " +
        isNeedUsername +
        prefix +
        formName +
        asOrSpace +
        formName;
      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;
    },
    // 依赖关系改变回调
    isShowRelaDialogHandler(row) {
      let isShow = row.isShowRelaDialog;
      if (isShow) {
        console.log(isShow);
        this.row = row;
        this.$refs.relayRef.openHandlder();
      } else {
        this.row = null;
      }
      console.log(row);
    },
    // 保存依赖结果
    saveRelayRes(res) {
      if (res.flag) {
        this.row.relaData = res.data;
      } else {
        this.row.isShowRelaDialog = false;
      }
    },
    // 下划线命名转驼峰命名
    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 = {};
          tempObj[tempFieldName] = temp.fieldDescription;
          columns.push(tempObj);
        }
        if (temp.isSearch) {
          searchFieldList.push(temp.tableName + "." + temp.fieldName);
        }

        if (temp.isExport) {
          tableExportField[exportFieldName] = temp.fieldDescription;
        }
      }
    },
    // 预览结果回调
    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;
          }
          // 拼接预览的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;
        }
      });
    },
    // 获取依赖条件对象
    getRelaObjAndSearchList(fieldList = []) {
      console.log(fieldList);
      let res = {
        relaObj: {},
        searchList: [],
      };
      fieldList.forEach((item) => {
        if (item.isShowRelaDialog) {
          // let { tableName as tName,fieldName} = item;
          let { tableName, fieldName } = item.relaData;
          res.relaObj[item.tableName + "." + item.fieldName] =
            "#{" + tableName + "." + fieldName;
          res.searchList.push(item.tableName + "." + item.fieldName);
        }
      });
      return res;
    },
    // 创建回调
    async createHandle() {
      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 relyName = "";
          let subrelayName = "";
          // 基础信息关联
          let searchData = this.getRelaObjAndSearchList(this.tableFieldList);
          let conditionDefault = searchData.relaObj;
          // 基础信息tableKey
          let table1tableKey = uuidv4();
          // 处理基础信息列数据
          let columns1 = [];
          // 基础信息查询条件
          let searchFieldList1 = searchData.searchList;

          this.getCol(this.tableFieldList, columns1);

          // 基础信息回显
          let echoData = {
            tableName: this.tableName,
            tableFieldData: this.tableFieldList,
            formData: this.formData,
          };
          // 处理基础信息依赖表
          // this.dragTableList.forEach((item) => {
          //   if (item.dtName == this.formData.relytableName) {
          //     relyName = item.dtTableName;
          //   }
          // });
          // console.log(this.dragTableList);
          // return;

          // 基础信息判断表格依赖方式
          // if (this.formData.relyOption === "0") {
          //   conditionDefault[this.formData.relyFile] = this.relayValue;
          // } else {
          //   conditionDefault[this.formData.relyFile] =
          //     "#{" + relyName + "." + this.formData.relaykey;
          // }

          // 基础信息查询条件
          // searchFieldList1.push(this.formData.relyFile);
          // 基础信息请求数据接口
          let tableList1 = {
            tId: this.tId,
            tableKey: table1tableKey, //  暂定
            dtTableName: this.tableName,
            primaryKey: this.formData.primaryKey,
            orderByColumn: this.formData.orderByColumn,
            sortOrder: this.formData.isAsc,
            sqlKey: uuidv4(),
            dtColumnName: columns1, //列字
            timeFormat: this.formData.timeFormate,
            searchFieldList: searchFieldList1, //搜索字段数组
            tableSql: this.getSQLStr(), //  暂定
            echoData: JSON.stringify(echoData),
            conditionDefaultValueMap: conditionDefault,
          };
          console.log(tableList1.tableKey, this.formData.btnGroupList);
          // 基础信息绑定按钮
          tableList1.dragTableBtnRelevanceList = this.getBtnMapList(
            tableList1.tableKey,
            this.formData.btnGroupList
          );

          // 关联子表回显
          let subTableData = this.$refs.subList.getTableInfo();
          this.subFiledList = subTableData.fieldInfo;
          let echoData2 = {
            tableName: subTableData.tableName,
            tableFieldData: subTableData.fieldInfo,
            // tableName: this.subTableName,
            // tableFieldData: this.subFiledList,
            formData: this.subformData,
          };
          // 处理关联子表依赖表
          this.dragTableList.forEach((item) => {
            if (item.dtName == this.subformData.relytableName) {
              subrelayName = item.dtTableName;
            }
          });
          let tempSubData = this.getRelaObjAndSearchList(
            subTableData.fieldInfo
          );
          let subCondition = tempSubData.relaObj;
          // 判断表格依赖方式
          // if (this.subformData.relyOption === "0") {
          //   subCondition[this.subformData.relyFile] =
          //     this.subformData.relayValue;
          // } else {
          //   subCondition[this.subformData.relyFile] =
          //     "#{" + subrelayName + "." + this.subformData.relaykey;
          // }

          // 关联子表类信息
          let columns2 = [],
            searchFieldList2 = tempSubData.searchList;
          this.getCol(this.subFiledList, columns2);
          let table2tableKey = uuidv4();
          // searchFieldList2.push(this.subformData.relyFile);

          // 关联子表请求数据
          let tableList2 = {
            tId: this.tId,
            tableKey: table2tableKey, //  暂定
            dtTableName: subTableData.tableName,
            primaryKey: this.subformData.primaryKey,
            orderByColumn: this.subformData.orderByColumn,
            sortOrder: this.subformData.isAsc,
            statisticTitle: this.subformData.title,
            sqlKey: uuidv4(),
            dtColumnName: columns2, //列字
            timeFormat: this.subformData.timeFormate,
            searchFieldList: searchFieldList2, //搜索字段数组
            tableSql: this.getSQLStr2(), //  暂定
            echoData: JSON.stringify(echoData2),
            conditionDefaultValueMap: subCondition,
          };
          console.log(2, tableList2.tableKey, this.subformData.btnGroupList);
          tableList2.dragTableBtnRelevanceList = this.getBtnMapList(
            tableList2.tableKey,
            this.subformData.btnGroupList
          );

          // 统计信息
          let countData = this.$refs.StatusTable?.getTableInfo();

          let countEchoData = {
            formData: this.countData,
            // tableFieldData: this.countFieldList,
            tableFieldData: countData.fieldInfo,
            tableName: countData.tableName,
          };
          let conutrelayName = "";

          // 处理关联子表依赖表
          this.dragTableList.forEach((item) => {
            if (item.dtName == this.countData.relytableName) {
              conutrelayName = item.dtTableName;
            }
          });
          let tempconut = this.getRelaObjAndSearchList(countData.fieldInfo);
          let countFieldLists = tempconut.searchList;
          // countFieldLists.push(this.countData.relyFile);
          let countTableKey = uuidv4();

          let conutCondition = tempconut.relaObj;
          let countColumnName = [];
          this.getCol(countData.fieldInfo, countColumnName);
          // 数据统计表格参数
          let countTableList = {
            tId: this.tId,
            tableKey: countTableKey, //  暂定
            dtTableName: countData.tableName,
            primaryKey: this.countData.primaryKey,
            orderByColumn: "",
            sortOrder: "",
            sqlKey: uuidv4(),
            dtColumnName: countColumnName, //列字
            timeFormat: "",
            searchFieldList: countFieldLists, //搜索字段数组
            // tableSql: this.countGetSQLStr(
            //   countData.fieldInfo,
            //   countData.tableName
            // ),
            tableSql: this.getSQLStr3(countData.fieldInfo, countData.tableName),
            echoData: JSON.stringify(countEchoData),
            conditionDefaultValueMap: conutCondition,
          };
          // return;
          console.log(3, countTableList.tableKey, this.countData.btnGroupList);
          countTableList.dragTableBtnRelevanceList = this.getBtnMapList(
            countTableList.tableKey,
            this.countData.btnGroupList
          );
          let stateSqlkey = uuidv4();
          let stateList = [
            {
              sqlKey: stateSqlkey,
              statisticTitle: this.countData.title,
              statisticField: this.countData.relaykey,
              statisticType: "等值",
            },
          ];
          let stateSql;
          let stateSqlList = [];
          let stateName = "";
          // console.log(this.dragTableList)
          // console.log(this.dragTableList);
          // 统计状态信息
          let search = [];
          let conditionDefaultValueMap = {};
          stateSqlList.push({
            sqlKey: stateSqlkey,
            tableSql: this.getCountSqlStr(
              this.countGetSQLStr(countData.fieldInfo, countData.tableName),
              countData.tableName
            ),
          });
          this.dragTableList.forEach(async (item) => {
            console.log(item.dtName, this.countData.relytableName);
            if (item.dtName == this.countData.relytableName) {
              // console.log(123);
              const info = await dragTableInfo({
                queryMap: { tableKey: item.tableKey },
              });
              // console.log('info', info);
              let infoSql = info.data.resultMap.querySql.tableSql;

              let state = this.getTableSql(infoSql, this.countData.relaykey);

              // stateSql = state + ' where ' + item.dtTableName + '.' + item.primaryKey + ' = #{' + item.dtTableName + '.' +  item.primaryKey

              stateSql = state;
              search.push(item.dtTableName + "." + item.primaryKey);
              // console.log('sql', stateSql);
              conditionDefaultValueMap[
                item.dtTableName + "." + item.primaryKey
              ] = " #{" + item.dtTableName + "." + item.primaryKey;
              stateSqlList = [
                {
                  sqlKey: stateSqlkey,
                  tableSql: stateSql,
                },
              ];

              stateName = item.dtTableName;
            }
          });
          // return;
          // 统计信息
          this.dragTableStatisticList.forEach((item) => {
            if (this.tId == "") {
              item.tableKey = tableList2.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) {
            // console.log('修改');
            // console.log(this.editData);
            // 基础信息
            tableList1.sqlKey = this.editData.sqlKey;
            tableList1.tableKey = this.editData.tableKey;
            tableList1.tId = this.lists[0].tId;
            console.log(tableList1.dragTableBtnRelevanceList);
            let btnTempList1 = tableList1.dragTableBtnRelevanceList.map(
              (item) => item.btnKey
            );
            tableList1.dragTableBtnRelevanceList = this.getBtnMapList(
              this.editData.tableKey,
              btnTempList1
            );
            // 关联子表
            tableList2.tableKey = this.subEchoData.tableKey;
            tableList2.sqlKey = this.subEchoData.sqlKey;
            tableList2.tId = this.lists[1].tId;
            let btnTempList2 = tableList2.dragTableBtnRelevanceList.map(
              (item) => item.btnKey
            );
            tableList2.dragTableBtnRelevanceList = this.getBtnMapList(
              this.subEchoData.tableKey,
              btnTempList2
            );
            // 数据统计
            console.log(this.countEchoData);
            countTableList.tableKey = this.countEchoData.tableKey;
            countTableList.sqlKey = this.countEchoData.sqlKey;
            let btnTempList3 = countTableList.dragTableBtnRelevanceList.map(
              (item) => item.btnKey
            );
            countTableList.dragTableBtnRelevanceList = this.getBtnMapList(
              this.countEchoData.tableKey,
              btnTempList3
            );
            countTableList.tId = this.lists[2].tId;

            let data = {
              id: this.tId,
              groupType: 1,
              groupKey: this.groupKey,
              groupName: this.formData.groupName,
              groupDescription: this.formData.groupDescription,
              groupTableInfo: [],
              dragTables: [],
            };
            data.groupTableInfo.push(
              {
                tableKey: tableList1.tableKey,
                sort: 0,
              },
              {
                tableKey: tableList2.tableKey,
                sort: 1,
              },
              {
                tableKey: countTableList.tableKey,
                sort: 2,
              }
            );
            data.groupTableInfo = JSON.stringify(data.groupTableInfo);
            data.dragTables.push(tableList1, tableList2, countTableList);

            res = await undataDialogGroup(data);

            this.dragTableStatisticList.forEach((item) => {
              item.tableKey = this.subEchoData.tableKey;
            });

            console.log("回显", this.statusCount);
            // stateList.forEach((item) => {
            //   item.id = this.statusCount.id;
            //   item.sqlKey = this.statusCount.sqlKey;
            //   item.tableKey = this.statusCount.tableKey;
            // });

            // stateSqlList.forEach((item) => {
            //   item.sqlKey = this.statusCount.sqlKey;
            // });
            // 修改统计数据

            await updateGroupTableStatistic({
              tableKey: this.subEchoData.tableKey,
              dragTableStatisticList: this.dragTableStatisticList,
              tableSqlList: this.tableSqlList,
              searchFieldList: searchFieldList2,
              conditionDefaultValueMap: subCondition,
              dtTableName: subTableData.tableName,
            });

            // 修改统计状态
            // await updateGroupTableStatistic({
            //   tableKey: this.countEchoData.tableKey,
            //   dragTableStatisticList: stateList,
            //   tableSqlList: stateSqlList,
            //   searchFieldList: countFieldLists,
            //   dtTableName: countData.tableName,
            //   conditionDefaultValueMap: conutCondition,
            // });
          } else {
            // 统计信息
            let graguuid = uuidv4();
            let statusuuid = uuidv4();
            let uuid = uuidv4();
            this.dragTableStatisticList.forEach((item) => {
              item.tableKey = tableList2.tableKey;
            });
            stateList.forEach((item) => {
              item.tableKey = countTableList.tableKey;
            });
            // 新增操作
            let groupKeyObj = { groupKey: uuid };
            let data = {
              groupType: 1,
              groupKey: groupKeyObj.groupKey,
              groupName: this.formData.groupName,
              groupDescription: this.formData.groupDescription,
              groupTableInfo: [],
              dragTables: [],
              templateType: "composeForm",
            };
            data.groupTableInfo.push(
              {
                tableKey: tableList1.tableKey,
                sort: 0,
              },
              {
                tableKey: tableList2.tableKey,
                sort: 1,
              },
              {
                tableKey: countTableList.tableKey,
                sort: 2,
              }
            );
            data.groupTableInfo = JSON.stringify(data.groupTableInfo);
            data.dragTables.push(tableList1, tableList2, countTableList);

            res = await addDialogGroup(data);
            //  统计数据
            await addGroupTableStatistic({
              tableKey: tableList2.tableKey,
              dragTableStatisticList: this.dragTableStatisticList,
              tableSqlList: this.tableSqlList,
              searchFieldList: searchFieldList2,
              dtTableName: subTableData.tableName,
              conditionDefaultValueMap: subCondition,
            });
            // console.log(stateList);
            // 统计状态
            // await addGroupTableStatistic({
            //   tableKey: countTableList.tableKey,
            //   dragTableStatisticList: stateList,
            //   tableSqlList: stateSqlList,
            //   searchFieldList: countFieldLists,
            //   dtTableName: countData.tableName,
            //   conditionDefaultValueMap: conutCondition,
            // });
          }

          if (this.tId) {
            if (res.code == 200) {
              this.$message.success("修改成功");
            } else {
              this.$message.warning("修改失败");
            }
            this.$tab.closePage();
            this.$router.push({
              path: "/system/fromModel/index/tableDialog",
            });
          } else {
            if (res.code == 200) {
              this.$message.success("创建成功");
            } else {
              this.$message.warning("创建失败");
            }
            this.isShowPreview = false;
          }
        } else {
          this.$message.warning("请完善表单");
          return false;
        }
      });
    },
    // 获取数据统计的sql
    getCountSqlStr(sql, tableName) {
      let tempList = sql.split("FROM");
      return (
        "SELECT " +
        tableName +
        "." +
        this.countData.countFile +
        " as result " +
        " FROM" +
        tempList[1]
      );
    },
    // 按钮
    getBtnMapList(tableKey, btnGroupList) {
      let res = btnGroupList.map((item) => {
        return {
          tableKey,
          btnKey: item,
        };
      });
      return res;
    },
    // 解决回显input不能输入问题
    iptChange() {
      this.$forceUpdate(); //强制刷新
    },
    // 处理统计sql语句
    getTableSql(sql, key, tableName) {
      // console.log(key);
      let Sql;
      let arrSql = sql.split("FROM");
      // console.log(arrSql);

      let fromFields = arrSql[1].split("AS");

      let tableArr = [];
      fromFields.forEach((item, index) => {
        if (index !== 0) {
          let arr = item.trim().split(" ");
          tableArr.push(arr[0]);
        }
      });
      tableArr.forEach((item, index) => {
        if (key.includes(item)) {
          // let keyfileld = keyarr[keyarr]
          let str = key.substring(item.length + 1);
          // Sql = 'SELECT ' + item +'.' + str + 'as result ' + ' FROM' + arrSql[1]
          console.log("表名", this.countData.countName);
          console.log("zidaun", this.countData.countFile);
          Sql =
            "SELECT " +
            tableName +
            "." +
            this.countData.countFile +
            " as result " +
            " FROM" +
            arrSql[1];
        }
      });
      console.log("sql", Sql);
      return Sql;
    },
    // 修改表格回显数据
    async initTableData(tId) {
      let res = await getTable({ id: tId });
      // console.log(res);
      if (res.code == 200) {
        this.groupKey = res.data.groupKey;
        this.lists = res.data.dragTables;

        this.formData.groupName = res.data.groupName;
        this.formData.groupDescription = res.data.groupDescription;

        let groupInfo = JSON.parse(res.data.groupTableInfo);

        this.lists.forEach(async (item) => {
          if (item.tableKey == groupInfo[0].tableKey) {
            this.editData = item;
            // console.log('123',this.editData);
            let echoData = JSON.parse(item.echoData);
            this.tableName = echoData.tableName;
            this.tableFieldList = echoData.tableFieldData;
            let {
              timeFormate,
              orderByColumn,
              isAsc,
              primaryKey,
              btnGroupList,
              relyFile,
              relytableName,
              relaykey,
              relyOption,
            } = echoData.formData;
            Object.assign(this.formData, {
              timeFormate,
              orderByColumn,
              isAsc,
              primaryKey,
              btnGroupList,
              relyFile,
              relytableName,
              relaykey,
              relyOption,
            });
          } else if (item.tableKey == groupInfo[1].tableKey) {
            let res = await getTableInfo(item.tId);

            // console.log('tji', res);
            this.subEchoData = item;
            this.echoData = JSON.parse(item.echoData);
            console.log(this.echoData);
            this.subTableName = this.echoData.tableName;
            this.subFiledList = this.echoData.tableFieldData;
            this.dragTableStatisticList = res.data.dragTableStatisticList;
          } else if (item.tableKey == groupInfo[2].tableKey) {
            let res = await getTableInfo(item.tId);
            console.log("统计", res.data);
            this.statusCount = res.data.dragTableStatisticList[0];
            console.log(this.statusCount);

            // console.log('zhuangt', res);
            let echoData = JSON.parse(item.echoData);
            this.countFieldList = echoData.tableFieldData;

            this.countData.title = this.statusCount?.statisticTitle;
            // this.countData.relaykey = this.statusCount.statisticField
            this.countEchoData = item;
            console.log(JSON.parse(this.countEchoData.echoData));
            // this.dragTableStatisticList = []
            let {
              relaykey,
              btnGroupList,
              countName,
              primaryKey,
              relyFile,
              countFile,
              relytableName,
            } = echoData.formData;
            Object.assign(this.countData, {
              relaykey,
              btnGroupList,
              countName,
              primaryKey,
              relyFile,
              countFile,
              relytableName,
            });
          }

          await this.getdragTable();
        });

        // this.getrelyList();

        // this.getCountrelyList();
      } else {
        this.$message.error("数据回显失败");
      }
    },

    // tab切换
    tabhandleClick(tab, event) {
      this.tabIndex = tab.index;
      console.log(this.tabIndex);
      if (this.tabIndex == "2") {
        // this.getCountrelyList();
      }
      this.menudata = this.activeName != "menuedit" ? true : false;
    },
    // 添加数据字段对话框
    async addDataDialog() {
      this.staictitle = "添加统计数据字段";
      this.isShowAddData = true;
      this.dataType = await this.getDicts("table_statistic_type");

      this.dataType = this.dataType.data;
      // console.log(this.dataType)
    },
    async updataDialog() {
      // console.log(this.dataType)
    },
    // 修改数据字段
    upadtaData() {
      this.dragTableStatisticList.forEach((item, index) => {
        // console.log(this.dataCountFormData);
        if (item.id !== undefined && item.id == this.dataCountFormData.id) {
          this.dragTableStatisticList[index] = this.dataCountFormData;
        } else if (item.xid == this.dataCountFormData.xid) {
          this.dragTableStatisticList[index] = this.dataCountFormData;
        }
      });
      this.isShowAddData = false;
      // console.log(this.dragTableStatisticList)
      this.dataCountFormData = {};
    },
    // 添加数据字段
    addData() {
      // console.log(this.dataCountFormData);
      this.dataCountFormData.xid = Date.now();
      this.dataCountFormData.tableKey = this.tableKey;
      this.dragTableStatisticList.push(this.dataCountFormData);
      this.isShowAddData = false;
      this.dataCountFormData = {};
    },
    // 关闭添加数据字段
    closeAddDialog() {
      this.isShowAddData = false;
      this.dataCountFormData = {};
    },
    // 修改统计信息
    async handleUpdateStat(row) {
      // console.log(row);
      this.dataCountFormData = row;
      this.dataCountFormData.xid = Date.now();
      this.staictitle = "修改统计数据字段";
      this.dataType = await this.getDicts("table_statistic_type");
      this.dataType = this.dataType.data;
      this.isShowAddData = true;
      // console.log(this.dataCountFormData)
      // console.log(this.dragTableStatisticList);
    },
    // 删除统计信息
    handleDeleteStat(row) {
      this.dragTableStatisticList.forEach((item, index) => {
        if (item.id == row.id) {
          this.dragTableStatisticList.splice(index, 1);
        }
      });
    },
    // 获取当前表描述
    getTableCommont(tableName, tableList) {
      return tableList.find((item) => item.tableName == tableName).tableComment;
    },
    // 获取按钮组数据
    async getBtnList() {
      let res = await listBtn({ isEnablePaging: false, btnParentId: 0 });
      this.btnGroupOptions = res.rows.filter((item) => !item.whetherBind);
    },
  },
  created() {},
  async mounted() {
    await this.getAllTable();
    this.getdragTable();
    this.initDragTable();
    this.getBtnList();
    this.getDictType();
    // await this.getMenuList();
    if (this.$route.query.tId) {
      this.tId = this.$route.query.tId;
      this.initTableData(this.tId);
    }
  },
};
</script>

<style scoped lang="scss">
.ipt {
  height: 36px;
  line-height: 36px;
  font-size: 14px;
  width: 100%;
  outline: none;
  text-align: center;
  background-color: #fff;
  border: 1px solid #dcdfe6;
  color: #606266;
  display: inline-block;
  border-radius: 4px;
}
.isNullDesc {
  border-color: #ff4949 !important;
}

.ipt:focus {
  border-color: #1890ff;
}
::v-deep .right_card {
  min-height: 500px !important;
}
::v-deep .vue-treeselect--has-value .vue-treeselect__input {
  vertical-align: middle !important;
}
.menudata {
  width: 30% !important;
}
.edit {
  width: 70% !important;
}
.mb10 {
  margin-top: 10px;
}
.cardBox {
  display: flex;
  align-content: space-between;
  flex-wrap: wrap;
  align-content: flex-start;
}
.card {
  /* width:15%; */
  height: 150px;
  flex-basis: 15%;
  margin-bottom: 10px;
  margin-right: 15px;
  min-width: 180px;
  .title {
    /* width:20%; */
    font-size: 18px;
    margin-bottom: 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .description {
    width: 70%;
    font-size: 13px;
    color: #9699a2;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    word-break: break-all;
    float: left;
  }
  .type {
    float: right;
    margin-top: 40px;
    .statisticType {
      font-size: 18px;
    }
  }
  .count {
    font-size: 25px;
  }
}
.mb8 {
  ::v-deep .el-col-18 {
    width: 30% !important;
    min-width: 220px !important;
  }
  ::v-deep .previewbtn {
    min-width: 190px !important;
  }
}
.addcount {
  margin-bottom: 5px;
}
</style>