<template>
  <el-container class="custom-query-list fullheight" form-manager>
    <ht-aside-tree cat-id="17" @node-click="handleNodeClick" @check="check" />
    <el-container>
      <el-main>
        <!-- 对话框数据 -->
        <ht-table
          @load="loadData"
          :data="data"
          :pageResult="pageResult"
          quick-search-props="name,alias"
          :show-export="false"
          :defaultSorter="[{property: 'CREATE_TIME_', direction: 'DESC'}]"
          ref="htTable"
          @row-click="rowClick"
          :header-cell-class-name="headerCellClassName"
          @selection-change="handleSelectionChanges"
        >
          <template v-slot:toolbar>
            <el-button
              size="small"
              @click="showDialog('add')"
              icon="el-icon-plus"
              type="primary"
              >添加</el-button
            >
            <el-button icon="el-icon-back" @click="importDialogVisible = true"
              >导入</el-button
            >
            <el-button
              icon="el-icon-right"
              @click="handleExport"
              :disabled="isDisabled"
              >导出</el-button
            >

            <ht-delete-button
              :url="deleteUrl"
              :htTable="$refs.htTable"
              style="margin-left: 10"
              :disabled="isDisabled"
              :checkRight="true"
              >删除</ht-delete-button
            >
            <el-button
              @click="openTypeSetDialog()"
              icon="icon-shezhifenlei"
              :disabled="isDisabled"
              >设置分类</el-button
            >
          </template>
          <template v-slot:search>
            <ht-table-search-panel :divide="3" :label-width="120">
              <ht-table-search-field label="名称" prop="name" />
              <ht-table-search-field label="别名" prop="alias" />
            </ht-table-search-panel>
          </template>
          <template>
            <ht-table-column
              type="index"
              width="50"
              align="center"
              label="序号"
            />
            <ht-table-column
              label="名称"
              prop="name"
              :sortable="true"
              :show-overflow-tooltip="true"
            >
              <template v-slot="{row}">
                <el-link
                  @click="showDialog('edit', row)"
                  v-if="$checkRight(row, '3')"
                  type="primary"
                  title="编辑详情"
                  >{{ row.name }}</el-link
                >
                <template v-else>{{ row.name }}</template>
              </template>
            </ht-table-column>
            <ht-table-column prop="alias" label="别名" :sortable="true" />
            <ht-table-column
              prop="style"
              label="显示样式"
              :render-header="renderHeaderMethod"
              :filters="[
                {text: '列表', value: 0},
                {text: '树形', value: 1},
                {text: '组合', value: 2}
              ]"
            >
              <template v-slot="{row}">
                <el-tag type="info" v-if="row.style == '0'">列表</el-tag>
                <el-tag type="success" v-if="row.style == '1'">树形</el-tag>
                <el-tag type="primary" v-if="row.style == '2'">组合</el-tag>
              </template>
            </ht-table-column>
            <ht-table-column
              prop="dsType"
              label="数据来源"
              :render-header="renderHeaderMethod"
              :filters="[
                {text: '数据源', value: 'dataSource'},
                {text: 'REST接口', value: 'restful'},
                {text: '选择接口', value: 'selectedApi'}
              ]"
            >
              <template v-slot="{row}">
                <el-tag type="info" v-if="row.dsType == 'dataSource'"
                  >数据源</el-tag
                >
                <el-tag type="success" v-if="row.dsType == 'restful'"
                  >REST接口</el-tag
                >
                <el-tag v-if="row.dsType == 'selectedApi'">选择接口</el-tag>
              </template>
            </ht-table-column>
            <ht-table-column prop="objName" label="对象名称" :sortable="true" />
            <ht-table-column
              prop="dsalias"
              label="数据源的别名"
              :sortable="true"
            />
            <ht-table-column prop="typeName" label="分类" :sortable="true" />
            <ht-table-column width="200" label="操作" align="left">
              <template v-slot="{row}">
                <el-button
                  type="text"
                  @click="handleCommond({row: row, command: 'preview'})"
                  >预览</el-button
                >
                <el-button
                  type="text"
                  @click="handleCommond({row: row, command: 'relation'})"
                  v-if="row.style == '0'"
                  >添加为关联查询</el-button
                >
                <!-- <el-dropdown
                  size="mini"
                  split-button
                  @command="handleCommond"
                  @click="handleCommond({row: row, command: 'preview'})"
                >
                  <span> <i class="el-icon-view"></i>预览 </span>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item
                      icon="el-icon-plus"
                      v-if="row.style == '0'"
                      :command="{row: row, command: 'relation'}"
                      >添加为关联查询</el-dropdown-item
                    >
                  </el-dropdown-menu>
                </el-dropdown> -->
              </template>
            </ht-table-column>
          </template>
        </ht-table>
      </el-main>
    </el-container>

    <eip-sys-type-dialog
      ref="typeSetDialog"
      name="typeSetDialog"
      :cat-id="'17'"
      @onConfirm="sysTypeDialogOnConfirm"
    />

    <!-- 添加编辑对话框 -->
    <el-dialog
      width="40%"
      top="6vh"
      :title="title"
      :visible="dialogVisible"
      v-if="dialogVisible"
      :before-close="handleClose"
      :close-on-click-modal="false"
      append-to-body
      :close-on-press-escape="true"
      custom-class="editCustomDialog"
    >
      <el-form
        style="width: 100%; height: 500px"
        :model="treeSidebarData"
        data-vv-scope="editCustomDialogList"
      >
        <ht-form-item label="对话框分类" label-width="120px">
          <eip-sys-type-selector
            placeholder="请选择分类"
            type-key="DIALOG_TYPE"
            v-model="treeSidebarData.typeName"
            :sys-type-id.sync="treeSidebarData.typeId"
            :validate="{required: true}"
          />
        </ht-form-item>
        <ht-form-item label="名称" label-width="120px">
          <ht-input
            v-model="treeSidebarData.name"
            class="ht"
            placeholder="请输入名称"
            autocomplete="off"
            validate="required"
            :maxlength="50"
            :showWordLimit="true"
          ></ht-input>
        </ht-form-item>
        <ht-form-item label="别名" label-width="120px">
          <ht-input
            v-model="treeSidebarData.alias"
            class="ht"
            v-pinyin="treeSidebarData.name"
            placeholder="请输入别名"
            autocomplete="off"
            :validate="{
              required: true,
              regex: {
                exp: '^[a-zA-Z][a-zA-Z0-9_]*$',
                message: '只能输入字母、数字、下划线，且以字母开头'
              }
            }"
            :disabled="!!treeSidebarData.id"
            :maxlength="50"
            :showWordLimit="true"
          ></ht-input>
        </ht-form-item>
        <ht-form-item label="样式" label-width="120px" class="style-form-item">
          <ht-radio
            v-model="treeSidebarData.style"
            class="ht"
            :options="[
              {key: 0, value: '列表'},
              {key: 1, value: '树形'},
              {key: 2, value: '组合'}
            ]"
            :readonly="disabled"
          />
        </ht-form-item>

        <ht-form-item
          label="分页"
          v-if="
            treeSidebarData.style == 0 &&
              !(
                treeSidebarData.dsType == 'restful' &&
                treeSidebarData.requestType == 'GET'
              ) &&
              treeSidebarData.dsType !== 'selectedApi'
          "
          label-width="120px"
        >
          <ht-radio
            v-model="treeSidebarData.needPage"
            class="ht"
            :options="[
              {key: true, value: '是'},
              {key: false, value: '否'}
            ]"
          />
        </ht-form-item>
        <ht-form-item
          label="单选多选"
          label-width="120px"
          v-if="treeSidebarData.style != 2"
        >
          <ht-radio
            v-model="treeSidebarData.selectNum"
            class="ht"
            :options="[
              {key: 1, value: '单选'},
              {key: -1, value: '多选'}
            ]"
          />
        </ht-form-item>
        <ht-form-item
          label="数据模式"
          label-width="120px"
          v-if="treeSidebarData.style == 1"
        >
          <!-- :readonly="disabled" -->
          <ht-radio
            v-model="treeSidebarData.treeDataMode"
            style="width:100%"
            :options="[
              {key: 0, value: '全部展示'},
              {key: 1, value: '逐级展示'}
            ]"
          />
          <!-- {key: 2, value: '不允许选择父级'} -->
        </ht-form-item>
        <div v-if="treeSidebarData.style == 2"><br /></div>
        <ht-form-item
          label="左树型对话框"
          v-if="treeSidebarData.style == 2"
          label-width="120px"
        >
          <ht-select
            class="ht"
            v-model="combinationRule.leftTree"
            :options="leftTreeDialogList"
            :props="{key: 'alias', value: 'name'}"
            @change="loadDialogFields"
          ></ht-select>
        </ht-form-item>
        <ht-form-item
          label="右列表对话框"
          v-if="treeSidebarData.style == 2"
          label-width="120px"
        >
          <ht-select
            class="ht"
            v-model="combinationRule.rightDialog"
            :options="rightDialogList"
            :props="{key: 'alias', value: 'name'}"
            @change="loadDialogFields"
          ></ht-select>
        </ht-form-item>
        <template
          v-if="
            treeSidebarData.style == 2 &&
              combinationRule.leftTree &&
              combinationRule.rightDialog
          "
        >
          <el-divider>设置组合规则</el-divider>
          <el-link type="primary" @click="addCombinationRule"
            >添加组合规则</el-link
          ><br />
          <template v-for="(rule, index) in combinationRule.rules">
            <ht-form-item
              :label="combinationRule.leftTree"
              label-width="120px"
              :key="index"
            >
              <ht-select
                class="ht"
                v-model="combinationRule.rules[index].treeField"
                :options="treeDialogFields"
                :props="{key: 'alias', value: 'name'}"
              ></ht-select>
            </ht-form-item>
            <ht-form-item
              :label="combinationRule.rightDialog"
              label-width="120px"
              :key="index"
            >
              <ht-select
                class="ht"
                v-model="combinationRule.rules[index].listField"
                :options="listDialogFields"
                :props="{key: 'alias', value: 'name'}"
                @change="
                  item => {
                    setCondition(item, index)
                  }
                "
              ></ht-select>
              <el-link @click="deleteRule(index)" type="primary">删除</el-link>
            </ht-form-item>
          </template>
        </template>

        <ht-form-item
          label="数据来源"
          label-width="120px"
          v-if="treeSidebarData.style != 2"
        >
          <ht-radio
            v-model="treeSidebarData.dsType"
            style="width:400px;"
            :readonly="disabled"
            :options="[
              {key: 'dataSource', value: '数据源'},
              {key: 'restful', value: 'REST接口'},
              {key: 'selectedApi', value: '选择接口'}
            ]"
          />
        </ht-form-item>

        <div
          v-show="
            treeSidebarData.dsType == 'selectedApi' &&
              treeSidebarData.style != 2
          "
        >
          <ht-form-item label="接口" label-width="120px">
            <ht-select
              v-model="treeSidebarData.apiAlias"
              :options="apiOptions"
              :props="apiProps"
              filterable
              clearable
              placeholder="请选择接口"
              @change="selectedApiChange()"
            ></ht-select>
          </ht-form-item>
          <ht-form-item label="数据源" label-width="120px">
            <el-button type="primary" @click="showSettingDialog"
              >设置列</el-button
            >
          </ht-form-item>
        </div>
        <!-- 数据源配置 -->
        <div
          v-show="
            treeSidebarData.dsType == 'dataSource' && treeSidebarData.style != 2
          "
        >
          <div>
            <ht-form-item
              label="数据源"
              v-if="!treeSidebarData.id"
              label-width="120px"
            >
              <ht-select
                class="ht"
                v-model="treeSidebarData.dsalias"
                :options="dataSourcesInBean"
                :props="{key: 'alias', value: 'name'}"
              />
            </ht-form-item>
          </div>
          <div>
            <ht-form-item
              label="查询表(视图)"
              v-if="!treeSidebarData.id && treeSidebarData.style != 2"
              label-width="120px"
            >
              <div class="flex_wrap">
                <ht-radio
                  v-model="treeSidebarData.isTable"
                  style="width: 170px;flex-shrink: 0;"
                  :options="isTableList"
                />
                <ht-input
                  v-model="objName"
                  placeholder="请输入表或视图名称"
                  autocomplete="off"
                ></ht-input>
                <el-button
                  type="primary"
                  @click="getByDsObjectName"
                  style="margin-left: 22px;"
                  >查 询</el-button
                >
              </div>
            </ht-form-item>
          </div>
          <div>
            <ht-form-item label="选择表或视图" label-width="120px">
              <div class="flex_wrap">
                <ht-select
                  v-show="!treeSidebarData.id"
                  v-model="treeSidebarData.objName"
                  :options="tableOrViewList"
                  :remote-method="getByDsObjectName"
                  :props="{key: 'name', value: 'comment'}"
                  v-if="treeSidebarData.style != 2"
                />
                <span v-if="treeSidebarData.id"
                  >对象名称：{{
                    treeSidebarData.objName
                  }}&nbsp;&nbsp;所属数据源：{{ treeSidebarData.dsalias }}</span
                >
                <el-button
                  type="primary"
                  @click="showSettingDialog"
                  style="margin-left: 22px;"
                  >设置列</el-button
                >
              </div>
            </ht-form-item>
          </div>
        </div>
        <!-- restful配置 -->
        <div
          v-if="
            treeSidebarData.dsType == 'restful' && treeSidebarData.style != 2
          "
        >
          <ht-form-item label="请求地址" label-width="120px">
            <ht-input
              v-model="treeSidebarData.url"
              class="ht"
              placeholder="请输入请求地址"
              autocomplete="off"
              validate="required"
            >
              <template slot="append">
                <el-tooltip
                  slot="label"
                  effect="dark"
                  content="Restful接口地址，若要请求当前系统的某个微服务，以${服务名称}为前缀，如：${form}/base/tools/v1/getPinyin"
                >
                  <i class="icon-question"></i>
                </el-tooltip> </template
            ></ht-input>
          </ht-form-item>
          <ht-form-item
            label="请求类型"
            label-width="120px"
            class="request-type"
          >
            <el-radio
              v-model="treeSidebarData.requestType"
              label="POST"
              class="post-radio"
              >POST</el-radio
            >
            <el-tooltip
              class="item"
              effect="dark"
              content="可在数据源的【post请求参数】配置查询条件"
              placement="top"
            >
              <i class="el-icon-question"></i>
            </el-tooltip>
            <el-radio
              v-model="treeSidebarData.requestType"
              label="GET"
              class="get-radio"
              >GET</el-radio
            >
          </ht-form-item>
          <ht-form-item
            label="页号(key)"
            label-width="120px"
            v-if="
              treeSidebarData.requestType == 'POST' &&
                treeSidebarData.needPage &&
                treeSidebarData.style != 1
            "
          >
            <ht-input
              v-model="treeSidebarData.pageKey"
              class="ht"
              placeholder="请输入页号"
              autocomplete="off"
              validate="required"
            ></ht-input>
          </ht-form-item>
          <ht-form-item
            label="分页大小(key)"
            label-width="120px"
            v-if="
              treeSidebarData.requestType == 'POST' &&
                treeSidebarData.needPage &&
                treeSidebarData.style != 1
            "
          >
            <ht-input
              v-model="treeSidebarData.pageSizeKey"
              class="ht"
              placeholder="请输入分页大小"
              autocomplete="off"
              validate="required"
            ></ht-input>
          </ht-form-item>
          <ht-form-item
            label="总条数(key)"
            label-width="120px"
            v-if="
              treeSidebarData.requestType == 'POST' &&
                treeSidebarData.needPage &&
                treeSidebarData.style != 1
            "
          >
            <ht-input
              v-model="treeSidebarData.totalKey"
              class="ht"
              placeholder="请输入总条数"
              autocomplete="off"
              validate="required"
            ></ht-input>
          </ht-form-item>
          <ht-form-item
            label="列表(key)"
            label-width="120px"
            v-if="
              treeSidebarData.requestType == 'POST' &&
                treeSidebarData.needPage &&
                treeSidebarData.style != 1
            "
          >
            <ht-input
              v-model="treeSidebarData.listKey"
              class="ht"
              placeholder="请输入列表"
              autocomplete="off"
              validate="required"
            ></ht-input>
          </ht-form-item>
          <ht-form-item label="数据源" label-width="120px">
            <el-button type="primary" @click="showSettingDialog"
              >设置列</el-button
            >
          </ht-form-item>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <ht-submit-button
          :url="saveUrl"
          :model="treeSidebarData"
          scope-name="editCustomDialogList"
          @before-save-data="beforeSaveData"
          @after-save-data="afterSaveData"
          :isSubmit="isSubmit"
          >{{ $t('eip.common.save') }}</ht-submit-button
        >
      </div>
    </el-dialog>

    <!-- 设置列 -->
    <ht-sidebar-dialog
      width="100%"
      class="cd-column__dialog"
      :visible="dialogVisibleSetting"
      :before-close="close"
      :close-on-click-modal="false"
      :show-close="false"
      append-to-body
    >
      <template v-slot:title>
        <div class="flex" style="justify-content: space-between; width: 100%">
          <div style="float: left; width: 100%">
            <el-page-header
              style="float: left"
              @back="close"
              :content="titleSetting"
            ></el-page-header>
            <el-button
              style="float: left; margin-left: 20px"
              type="success"
              @click="addFields"
              v-if="treeSidebarData.dsType == 'restful'"
              icon="el-icon-plus"
              >添加字段</el-button
            >
            <el-button
              style="float: right"
              type="primary"
              @click="save"
              icon="el-icon-check"
              >保 存</el-button
            >
          </div>
        </div>
      </template>
      <el-form data-vv-scope="settingSave" class="custom-dialog__wrap">
        <el-row :gutter="20" class="custom-dialog__row">
          <el-col :span="7" class="custom-dialog__row_left">
            <el-table
              :data="table.columnList"
              @selection-change="handleSelectionChange"
              border
              ref="htTableSetting"
              @row-dblclick="fillColumn"
              @row-click="clickRow"
            >
              <el-table-column type="selection" width="40" />
              <el-table-column
                v-if="treeSidebarData.dsType == 'dataSource'"
                prop="fieldName"
                :key="1"
                label="字段"
                width="150"
              />
              <el-table-column
                v-if="treeSidebarData.dsType != 'dataSource'"
                :key="1"
                label="字段"
                width="150"
              >
                <template v-slot="{row}">
                  <ht-input
                    v-model="row.fieldName"
                    placeholder="请输入字段"
                    autocomplete="off"
                    style="width:220px"
                    validate="required"
                  ></ht-input>
                </template>
              </el-table-column>
              <el-table-column label="字段说明" :key="2">
                <template v-slot="{row}">
                  <ht-input
                    v-model="row.comment"
                    style="width: 100%"
                    placeholder="请输入字段说明"
                    autocomplete="off"
                    validate="required"
                    :maxlength="50"
                  ></ht-input>
                </template>
              </el-table-column>
              <el-table-column
                label="类型"
                prop="columnType"
                width="80"
                :key="3"
              />
              <el-table-column
                label="操作"
                width="90"
                v-if="treeSidebarData.dsType != 'dataSource'"
                :key="4"
              >
                <template v-slot="{row, $index}">
                  <el-button
                    size="mini"
                    type="text"
                    @click="deleteSetting(table.columnList, $index)"
                    >删除</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
          </el-col>
          <el-col :span="1" style="text-align:center">
            <el-button
              type="primary"
              icon="el-icon-arrow-right"
              :title="addColumnsTitle"
              style="
                height: 32px;
              "
              v-if="!showOnlyDisplayField"
              @click="addColumns"
            />
          </el-col>
          <el-col :span="16" class="custom-dialog__row_right">
            <el-tabs
              v-model="tabStatus"
              @tab-click="handleTabSwitch"
              type="border-card"
            >
              <el-tab-pane label="显示字段" name="display">
                <!-- 列表 -->
                <div class="manage-setting__header">
                  <el-form
                    v-form
                    data-vv-scope="dialogForm"
                    size="mini"
                    ref="form"
                  >
                    <ht-form-item
                      label="弹窗高度(px)"
                      align="left"
                      label-width="110px"
                      style="display: inline-block;"
                    >
                      <ht-input
                        v-model="treeSidebarData.height"
                        type="number"
                        :controls="false"
                      />
                    </ht-form-item>
                    <ht-form-item
                      label="弹窗宽度(px)"
                      align="left"
                      label-width="110px"
                      style="display: inline-block;margin-left: 60px;"
                    >
                      <ht-input
                        v-model="treeSidebarData.width"
                        type="number"
                        :controls="false"
                      />
                    </ht-form-item>
                  </el-form>
                </div>
                <el-table
                  :data="treeSidebarData.displayfield"
                  border
                  v-if="treeSidebarData.style == 0"
                >
                  <el-table-column prop="field" label="字段名" width="280" />
                  <el-table-column label="显示名">
                    <template v-slot="{row}">
                      <ht-input
                        v-model="row.comment"
                        placeholder="请输入显示名"
                        style="width: 100%"
                        autocomplete="off"
                        validate="required"
                        :maxlength="50"
                        :showWordLimit="true"
                        :readonly="showOnlyDisplayField"
                      ></ht-input>
                    </template>
                  </el-table-column>
                  <el-table-column label="宽度(px)" width="180">
                    <template v-slot="{row}">
                      <ht-input
                        v-model="row.width"
                        placeholder="请输入宽度"
                        style="width: 100%"
                        autocomplete="off"
                        :maxlength="50"
                        :showWordLimit="true"
                      ></ht-input>
                    </template>
                  </el-table-column>
                  <el-table-column
                    label="操作"
                    width="90"
                    v-if="!showOnlyDisplayField"
                  >
                    <template v-slot="{row, $index}">
                      <el-button
                        size="mini"
                        type="text"
                        @click="
                          deleteSetting(treeSidebarData.displayfield, $index)
                        "
                        >删除</el-button
                      >
                    </template>
                  </el-table-column>
                </el-table>

                <!-- 树形 -->
                <el-form
                  :model="displayfieldTree"
                  data-vv-scope="editSysTypeForm"
                  v-show="treeSidebarData.style == 1"
                >
                  <ht-form-item label="ID" label-width="120px">
                    <ht-input
                      v-model="displayfieldTree.id"
                      placeholder="请输入ID"
                      autocomplete="off"
                      validate="required"
                      :maxlength="50"
                      :showWordLimit="true"
                    ></ht-input>
                  </ht-form-item>
                  <ht-form-item label="父ID" label-width="120px">
                    <ht-input
                      v-model="displayfieldTree.pid"
                      placeholder="请输入父ID"
                      autocomplete="off"
                      validate="required"
                      :maxlength="50"
                      :showWordLimit="true"
                    ></ht-input>
                  </ht-form-item>
                  <ht-form-item label="父ID初始值" label-width="120px">
                    <ht-input
                      type="textarea"
                      :autosize="{minRows: 4, maxRows: 6}"
                      v-model="displayfieldTree.pvalue"
                      placeholder="请输入父ID初始值"
                      validate="required|max:200"
                      autocomplete="off"
                      :maxlength="200"
                      :showWordLimit="true"
                    ></ht-input>
                    &nbsp;&nbsp;
                    <div style="display: inline-block">
                      <el-button
                        @click="showScriptDialog(displayfieldTree)"
                        v-if="displayfieldTree.isScript"
                        >选择脚本</el-button
                      ><br />
                      <el-checkbox v-model="displayfieldTree.isScript"
                        >脚本
                      </el-checkbox>
                    </div>
                  </ht-form-item>
                  <ht-form-item label="显示名" label-width="120px">
                    <ht-input
                      v-model="displayfieldTree.displayName"
                      placeholder="请输入显示名"
                      autocomplete="off"
                      validate="required"
                      :maxlength="50"
                      :showWordLimit="true"
                    ></ht-input>
                  </ht-form-item>
                </el-form>
              </el-tab-pane>
              <el-tab-pane label="条件字段" name="condition">
                <el-table :data="treeSidebarData.conditionfield" border>
                  <el-table-column prop="field" label="字段名" width="150" />
                  <el-table-column label="显示名" width="200">
                    <template v-slot="{row}">
                      <ht-input
                        v-model="row.comment"
                        placeholder="请输入显示名"
                        autocomplete="off"
                        style="width:170px"
                        validate="required"
                        :maxlength="50"
                        :readonly="showOnlyDisplayField"
                      ></ht-input>
                    </template>
                  </el-table-column>
                  <el-table-column label="条件" width="140">
                    <template v-slot="{row}">
                      <ht-select
                        style="width:106px"
                        v-show="row.dbType == 'number' || row.dbType == 'int'"
                        v-model="row.condition"
                        :options="number_opList"
                        :validate="{required: true}"
                        :readonly="showOnlyDisplayField"
                      />
                      <ht-select
                        style="width:106px"
                        v-show="row.dbType == 'varchar' || row.dbType == 'clob'"
                        v-model="row.condition"
                        :options="string_opList"
                        :validate="{required: true}"
                        :readonly="showOnlyDisplayField"
                      />
                      <ht-select
                        style="width:106px"
                        v-show="row.dbType == 'date'"
                        v-model="row.condition"
                        :options="date_opList"
                        :validate="{required: true}"
                        :readonly="showOnlyDisplayField"
                      />
                    </template>
                  </el-table-column>
                  <el-table-column label="值来源" width="140">
                    <template v-slot="{row}">
                      <ht-select
                        style="width:106px"
                        v-show="
                          treeSidebarData.style != '1' &&
                            row.condition != 'NOTNULL' &&
                            row.condition != 'ISNULL'
                        "
                        v-model="row.defaultType"
                        :options="value_sourceList_list"
                        :validate="{required: true}"
                        :readonly="showOnlyDisplayField"
                        @change="controllerTypeChange(row)"
                      />
                      <ht-select
                        style="width:106px"
                        v-show="
                          treeSidebarData.style == '1' &&
                            row.condition != 'NOTNULL' &&
                            row.condition != 'ISNULL'
                        "
                        v-model="row.defaultType"
                        :options="value_sourceList_tree"
                        :validate="{required: true}"
                        :readonly="showOnlyDisplayField"
                        @change="controllerTypeChange(row)"
                      />
                    </template>
                  </el-table-column>
                  <el-table-column label="默认值">
                    <template v-slot="{row}">
                      <!-- <ht-select
                          v-if="row.defaultType == '5'"
                          :options="scriptOptions"
                          style="width:100%"
                          placeholder="选择常用脚本"
                          filterable
                          @change="handleScriptSelect($event, row)"
                          v-model="row.selectScript"></ht-select> -->
                      <el-button
                        @click="showScriptDialog(row)"
                        v-if="
                          row.defaultType == '5' &&
                            row.condition != 'NOTNULL' &&
                            row.condition != 'ISNULL'
                        "
                        size="mini"
                        style="margin-bottom: 8px;display: block;"
                        >选择脚本
                      </el-button>
                      <ht-input
                        type="textarea"
                        class="textarea-input"
                        v-if="
                          (row.defaultType == '2' || row.defaultType == '5') &&
                            row.dbType != 'date' &&
                            row.condition != 'NOTNULL' &&
                            row.condition != 'ISNULL'
                        "
                        :autosize="{minRows: 4, maxRows: 6}"
                        v-model="row.defaultValue"
                        placeholder="请输入默认值"
                        autocomplete="off"
                        validate="required"
                        :maxlength="200"
                        :showWordLimit="true"
                      ></ht-input>
                      <span style="line-height: 32px">
                        <el-select
                          @change="
                            val => {
                              paramChange(val, row)
                            }
                          "
                          v-if="
                            (row.defaultType == '1' &&
                              row.condition != 'NOTNULL' &&
                              row.condition != 'ISNULL' &&
                              row.dbType != 'date') ||
                              (row.defaultType == '1' &&
                                row.dbType == 'date' &&
                                row.condition == 'BETWEEN')
                          "
                          v-model="row.controllerType"
                          placeholder="请选择"
                        >
                          <el-option
                            v-for="item in param_ctList.filter(item => {
                              return row.dbType == 'date'
                                ? item.key == '2'
                                : item.key != '2'
                            })"
                            :key="item.value"
                            :label="item.value"
                            :value="item.key"
                          >
                            <span>{{ item.value }}</span>
                          </el-option>
                        </el-select>
                        <param-setting-dialog
                          ref="paramSettingDialog"
                          :key="new Date().getTime()"
                          v-if="
                            row.defaultType === '1' &&
                              row.controllerType > 3 &&
                              row.condition != 'NOTNULL' &&
                              row.condition != 'ISNULL'
                          "
                          @returnVal="
                            val => {
                              returnVal(val, row)
                            }
                          "
                          :config="row"
                          :dsType="treeSidebarData.dsType"
                          :conditionColumnList="treeSidebarData.conditionfield"
                          :fieldList="table.columnList"
                          :resultList="treeSidebarData.resultfield"
                          @selectFieldChange="
                            val => {
                              selectFieldChange(
                                val,
                                treeSidebarData.conditionfield
                              )
                            }
                          "
                        ></param-setting-dialog>
                      </span>
                      <ht-date
                        v-if="
                          row.defaultType == '2' &&
                            row.dbType == 'date' &&
                            row.condition != 'BETWEEN'
                        "
                        v-model="row.defaultValue"
                        :validate="{required: true}"
                        format="yyyy-MM-dd"
                        style="width: calc(100% - 70px);min-width: 140px;"
                      />
                      <div
                        v-if="
                          row.defaultType == '2' &&
                            row.dbType == 'date' &&
                            row.condition == 'BETWEEN'
                        "
                      >
                        <ht-date-picker
                          v-model="row.endDate"
                          :validate="{required: true}"
                          format="yyyy-MM-dd"
                          value-format="yyyy-MM-dd"
                          style="width: calc(100% - 70px);min-width: 140px;"
                        />
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column
                    label="操作"
                    width="90"
                    v-if="!showOnlyDisplayField"
                  >
                    <template v-slot="{row, $index}">
                      <el-button
                        size="mini"
                        type="text"
                        @click="
                          deleteSetting(treeSidebarData.conditionfield, $index)
                        "
                        >删除</el-button
                      >
                    </template>
                  </el-table-column>
                </el-table>
              </el-tab-pane>
              <el-tab-pane label="返回字段" name="return">
                <el-table :data="treeSidebarData.resultfield" border>
                  <el-table-column prop="field" label="字段名" width="200" />
                  <el-table-column label="返回名称">
                    <template v-slot="{row}">
                      <ht-input
                        v-model="row.comment"
                        style="width: 100%"
                        placeholder="请输入返回名称"
                        autocomplete="off"
                        validate="required"
                        :maxlength="50"
                        :showWordLimit="true"
                        :readonly="showOnlyDisplayField"
                      ></ht-input>
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="columnType"
                    label="字段类型"
                    width="100"
                  />
                  <el-table-column
                    label="设为选项"
                    width="90"
                    v-if="treeSidebarData.style != 1"
                  >
                    <template v-slot="{row}">
                      <el-switch
                        v-model="row.isPK"
                        :active-value="true"
                        :inactive-value="false"
                        @change="handleIsPKChange(row)"
                      ></el-switch>
                    </template>
                  </el-table-column>
                  <!-- <el-table-column
                    label="设为标签"
                    width="90"
                    v-if="treeSidebarData.style != 1"
                  >
                    <template v-slot="{row}">
                      <el-switch
                        v-model="row.isTag"
                        :active-value="true"
                        :inactive-value="false"
                        @change="handleIsTagChange(row)"
                      ></el-switch>
                    </template>
                  </el-table-column> -->
                  <el-table-column
                    label="操作"
                    width="90"
                    v-if="!showOnlyDisplayField"
                  >
                    <template v-slot="{row, $index}">
                      <el-button
                        size="mini"
                        type="text"
                        @click="
                          deleteSetting(treeSidebarData.resultfield, $index)
                        "
                        >删除</el-button
                      >
                    </template>
                  </el-table-column>
                </el-table>
              </el-tab-pane>
              <el-tab-pane
                label="排序字段"
                name="order"
                v-if="treeSidebarData.dsType == 'dataSource'"
              >
                <el-table :data="treeSidebarData.sortfield" border>
                  <el-table-column prop="field" label="字段名" width="200" />
                  <el-table-column
                    prop="comment"
                    label="字段说明"
                    width="200"
                  />
                  <el-table-column label="排序类型">
                    <template v-slot="{row}">
                      <ht-select
                        v-model="row.sortType"
                        :options="sort_typeList"
                        :validate="{required: true}"
                      />
                    </template>
                  </el-table-column>
                  <el-table-column label="操作" width="90">
                    <template v-slot="{row, $index}">
                      <el-button
                        size="mini"
                        type="text"
                        @click="
                          deleteSetting(treeSidebarData.sortfield, $index)
                        "
                        >删除</el-button
                      >
                    </template>
                  </el-table-column>
                </el-table>
              </el-tab-pane>
              <el-tab-pane label="自定义SQL" name="custom">
                <el-checkbox
                  v-model="isSqlBuildType"
                  v-if="!showOnlyDisplayField"
                >
                  自定义SQL
                  <el-tooltip class="item" effect="dark" placement="top">
                    <div slot="content">
                      <ul>
                        <li>
                          自定义SQL
                          <ul>
                            <li>if(map.get('ACTDEFID')!=null){</li>
                            <li>
                              return "select * from UC_USER where ACTDEFID like
                              '%"+map.get("ACTDEFID")+"%'";
                            </li>
                            <li>}</li>
                            <li>其中的map为系统所封装的一个参数</li>
                            <li>
                              在脚本中使用map.get('ACTDEFID')可以获取表单提交时所携带的ACTDEFID参数值，
                              脚本应拼接并返回任意的可执行的sql语句;同时，sql语句字段返回应该包含我们定义的
                              返回字段，和显示字段，通常使用select *
                              from的方式保证需求字段都在这个查询里面
                            </li>
                          </ul>
                        </li>
                      </ul>
                    </div>
                    <i class="icon-question" style="margin-right: 8px" />
                  </el-tooltip>
                </el-checkbox>
                <ht-select
                  v-model="selectOp"
                  :options="selectOptions"
                  @change="changeOptions()"
                  :props="{key: 'field', value: 'comment'}"
                  :readonly="showOnlyDisplayField"
                ></ht-select>
                <br />
                <br />
                <el-input
                  type="textarea"
                  :validate="{required: true}"
                  :autosize="{minRows: 12}"
                  placeholder="请输入内容"
                  v-model="treeSidebarData.diySql"
                  :readonly="showOnlyDisplayField"
                ></el-input>
              </el-tab-pane>

              <el-tab-pane
                label="POST请求参数"
                name="dataParam"
                v-if="
                  treeSidebarData.dsType != 'dataSource' &&
                    treeSidebarData.requestType == 'POST'
                "
              >
                <div :style="{height: `${postParamsHeight}px`}">
                  <el-tag type="warning"
                    >以POST方式请求接口时传入的参数，参数中可以通过${field}传入条件字段中定义的参数。</el-tag
                  >
                  <VariablesSelector
                    :data="treeSidebarData.conditionfield"
                    node-key="field"
                    :props="{label: 'comment', children: 'children'}"
                    v-if="!showOnlyDisplayField"
                    @node-click="handleVarSelectorClick"
                  />
                  <codemirror
                    ref="dataParamCode"
                    v-model="treeSidebarData.dataParam"
                    :options="cmOptions"
                    class="code"
                    style="width: 100%;height:calc(100% - 50px)"
                    :editable="!showOnlyDisplayField"
                  >
                  </codemirror>
                </div>
              </el-tab-pane>
            </el-tabs>
          </el-col>
        </el-row>
      </el-form>
    </ht-sidebar-dialog>
    <ht-custom-dialog-model
      :custdialog="customDialogPreview"
      :key="aliasPreview"
      :model-name="titlePreview"
      :isPreview="true"
      ref="customDialogShow"
    ></ht-custom-dialog-model>
    <el-dialog
      title="导入对话框"
      :visible.sync="importDialogVisible"
      width="40%"
      top="30vh"
      :close-on-click-modal="false"
      name="uploadDialog"
      custom-class="upload-dialog"
      v-if="importDialogVisible"
    >
      <div style="height: 150px; padding-left: 20px">
        <eip-sys-type-selector
          placeholder="请选择分类"
          type-key="DIALOG_TYPE"
          v-model="formTypeSelectorCatName"
          :sys-type-id.sync="formTypeSelectorCatId"
          :validate="{required: true}"
        />
        <br />
        <br />
        <el-upload
          style="display: inline-block"
          :action="uploadUrl"
          :on-success="handleUploadResult"
          :on-error="handleUploadResult"
          :headers="uploadHeaders"
          :on-exceed="onExceed"
          accept=".zip"
          :before-upload="beforeUpload"
          :limit="1"
          :auto-upload="false"
          ref="upload"
        >
          <el-button size="small" icon="el-icon-upload">选择对话框</el-button>
        </el-upload>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="importDialogVisible = false">取 消</el-button>
        <el-button
          type="primary"
          @click="uploadSubmit"
          element-loading-text="导入中..."
          v-loading.fullscreen.lock="fullscreenLoading"
          >确 定</el-button
        >
      </span>
    </el-dialog>

    <el-dialog
      title="温馨提示"
      :visible="myDialogVisible"
      :before-close="beforeClose2"
      name="myDialogVisible"
      width="30%"
      custom-class="upload-dialog"
      top="30vh"
    >
      <span>部分对话框已存在，请确认重复项的导入操作！</span>
      <span slot="footer" class="dialog-footer">
        <el-button type="default" @click="beforeClose2">取消</el-button>
        <el-button type="primary" @click="confirmSubmit('jump')"
          >跳过重复项</el-button
        >
        <el-button type="primary" @click="confirmSubmit('cover')"
          >覆盖更新</el-button
        >
      </span>
    </el-dialog>

    <!-- 脚本选择对话框 -->
    <eip-script-dialog
      :appendToBody="true"
      ref="eipScriptDialog"
      @onConfirm="handleScriptSelected"
    ></eip-script-dialog>
  </el-container>
</template>

<script>
import {Message, TableColumn} from 'element-ui'
import req from '@/request.js'
import form from '@/api/form.js'
import portal from '@/api/portal.js'
const paramSettingDialog = () =>
  import('@/views/form/customDialog/ParamSettingDialog.vue')
const VariablesSelector = () =>
  import('@/components/common/VariablesSelector.vue')
const EipScriptDialog = () => import('@/components/dialog/EipScriptDialog.vue')
const htAsideTree = () => import('@/components/common/HtAsideTree.vue')
const EipSysTypeSelector = () =>
  import('@/components/selector/EipSysTypeSelector.vue')

const eipSysTypeDialog = () =>
  import('@/components/dialog/EipSysTypeDialog.vue')
import deepmerge from 'deepmerge'
import {mapState} from 'vuex'
import tableHeaderFilter from '@/mixins/tableHeaderFilter.js'
export default {
  components: {
    paramSettingDialog,
    VariablesSelector,
    EipScriptDialog,
    htAsideTree,
    EipSysTypeSelector,
    eipSysTypeDialog
  },
  mixins: [tableHeaderFilter],
  computed: {
    //删除对话框数据的URL
    deleteUrl: function() {
      return window.context.form + '/form/customDialog/v1/removes'
    },
    //保存对话框数据的URL （对话框新增修改时）
    saveUrl: function() {
      return window.context.form + '/form/customDialog/v1/save'
    },
    addColumnsTitle: function() {
      let statusWord = ''
      switch (this.tabStatus) {
        case 'display':
          statusWord = '显示'
          break
        case 'condition':
          statusWord = '条件'
          break
        case 'return':
          statusWord = '返回'
          break
        case 'order':
          statusWord = '排序'
          break
      }
      return `将左侧所选字段添加到${statusWord}字段中`
    },
    ...mapState({
      uploadHeaders: function(mapState) {
        return {Authorization: 'Bearer ' + mapState.login.currentUser.token}
      },
      uploadUrl: function(mapState) {
        return (
          window.context.form +
          '/form/customDialog/v1/import?typeId=' +
          this.formTypeSelectorCatId
        )
      }
    })
  },
  data() {
    return {
      showOnlyDisplayField: false,
      apiOptions: [],
      apiProps: {key: 'alias', value: 'name'},
      formTypeSelectorCatId: '',
      formTypeSelectorCatName: '',
      typeIdQuery: null,
      selectOp: '',
      selectOptions: [],
      isSqlBuildType: false,
      customDialogPreview: {}, //自定义对话框预览配置参数
      aliasPreview: '', //自定义对话框预览别名参数
      titlePreview: '', //自定义对话框预览标题参数
      isSubmit: true, //侧边栏是否提交
      number_opList: [
        {value: '等于', key: 'EQ'},
        {value: '大于等于', key: 'GE'},
        {value: '大于', key: 'GT'},
        {value: '小于', key: 'LT'},
        {value: '小于等于', key: 'LE'},
        {value: 'in', key: 'IN'},
        {value: '等于空', key: 'ISNULL'},
        {value: '不等于空', key: 'NOTNULL'}
      ], //运算条件数组-number
      string_opList: [
        {value: '等于', key: 'EQ'},
        {value: 'like', key: 'LK'},
        {value: 'likeEnd', key: 'LFK'},
        {value: 'in', key: 'IN'},
        {value: '等于空', key: 'ISNULL'},
        {value: '不等于空', key: 'NOTNULL'}
      ], //运算条件数组-varchar
      date_opList: [
        {value: '等于', key: 'EQ'},
        {value: '日期范围', key: 'BETWEEN'},
        {value: '大于等于', key: 'GE'},
        {value: '小于等于', key: 'LE'},
        {value: '等于空', key: 'ISNULL'},
        {value: '不等于空', key: 'NOTNULL'}
      ], //运算条件数组-日期
      value_sourceList_list: [
        {value: '参数传入', key: '3'},
        {value: '用户输入', key: '1'},
        {value: '固定值', key: '2'},
        {value: '脚本', key: '5'}
      ], //值来源数组_列表
      value_sourceList_tree: [
        {value: '参数传入', key: '3'},
        {value: '固定值', key: '2'},
        {value: '用户输入', key: '4'},
        {value: '脚本', key: '5'}
      ], //值来源数组_树
      sort_typeList: [
        {value: '升序', key: 'asc'},
        {value: '降序', key: 'desc'}
      ], //排序字段升序还是降序
      param_ctList: [
        {value: '文本框', key: '1', config: '{"type":"text"}'},
        {value: '日期范围', key: '2', config: '{"type":"daterange"}'},
        // {value: '数字', key: '3', config: '{"type":"text"}'},
        {value: '下拉框', key: '4', config: ''},
        // {value: '对话框', key: '5', config: ''},
        {value: '用户选择器', key: '6', config: ''},
        {value: '组织选择器', key: '7', config: ''},
        {value: '岗位选择器', key: '8', config: ''},
        {value: '职位选择器', key: '9', config: ''},
        {value: '维度选择器', key: '10', config: ''},
        {value: '角色选择器', key: '11', config: ''},
        {value: '单选框', key: '12', config: ''},
        {value: '复选框', key: '13', config: ''},
        {value: '数据字典', key: '14', config: ''}
      ], //控制器的类型
      displayfieldTree: {isScript: false, pvalue: ''}, //用来存储对话框为树形时的显示字段
      tabStatus: 'display', //设置列的条件字段、显示字段、返回字段等的tabs标签页
      table: {}, //获取设置列获取字段信息
      titleSetting: '未命名-设置列', //设置列侧边栏的名称
      dialogVisibleSetting: false, //是否显示可配置设置列
      disabled: false, //是否禁止操作
      // dialogVisiblePost:false,//参数模板设置弹框
      tableOrViewList: [], //数据源表
      objName: '', //查询数据源时表或视图名称
      title: '添加对话框',
      data: [], //列表数据
      treeSidebarData: {
        diySql: ''
      }, //对话框的新增修改数据
      pageResult: {
        page: 1,
        pageSize: 20,
        total: 0
      },
      dataSourcesInBean: [], //数据源池
      isTableList: [
        {
          key: 0,
          value: '视图'
        },
        {
          key: 1,
          value: '表'
        }
      ], //表和视图
      dialogVisible: false, //侧边栏是否显示
      importDialogVisible: false,
      // uploadUrl: window.context.form + '/form/customDialog/v1/import?typeId='+this.formTypeSelectorCatId,
      fullscreenLoading: false,
      leftTreeDialogList: [],
      rightDialogList: [],
      treeDialogFields: [],
      listDialogFields: [],
      combinationRule: {
        leftTree: '',
        rightDialog: '',
        rules: []
      },
      cmOptions: {
        showCursorWhenSelecting: true,
        value: '',
        mode: 'application/json',
        readOnly: false,
        smartIndent: true,
        autofocus: true,
        tabSize: 2,
        theme: 'eclipse',
        lineNumbers: true,
        line: true,
        inputStyle: 'textarea'
      },
      uploadAddress: '',
      myDialogVisible: false,
      innerValidation: true,
      scriptOptions: [],
      editConditionRow: {},
      selectedColumn: [],
      // 禁用
      isDisabled: true,
      selectedList: [],
      postParamsHeight: 0,
      itemRow: {}
    }
  },
  watch: {
    selectedList: {
      handler(val) {
        this.isDisabled = val.length < 1 ? true : false
      },
      deep: true
    }
  },
  methods: {
    //设置分类
    openTypeSetDialog() {
      let selection = this.$refs.htTable.$refs.htTable.selection
      if (!selection || selection.length == 0) {
        this.$message({type: 'warning', message: '请先选择需要设置分类的数据'})
        return
      }
      var ids = this.getHasRightIds(false)
      if (!ids || ids.length == 0) {
        return
      }
      this.$refs.typeSetDialog.showDialog({})
    },
    getHasRightIds(alertMessage = true) {
      let selection = this.$refs.htTable.$refs.htTable.selection
      if (selection.length == 0) {
        this.$message.warning('请选择至少一项记录')
        return
      }
      let ids = []
      let notRightNames = []
      for (let item of selection) {
        if (this.$checkRight(item, '3')) {
          ids.push(item['id'])
        } else {
          notRightNames.push(item.name)
        }
      }
      if (notRightNames.length > 0) {
        if (alertMessage || notRightNames.length == selection.length) {
          this.$message.error(
            '以下数据无权限更新,已跳过：[' + notRightNames.join(',') + ']'
          )
        }

        if (notRightNames.length == selection.length) {
          return null
        }
      }
      return ids
    },
    sysTypeDialogOnConfirm(data) {
      var id = this.getHasRightIds()
      let this_ = this
      this.$http
        .get(
          '${portal}/sys/sysType/v1/updateEntitySysType?typeID=' +
            data.id +
            '&entityIds=' +
            id.join(',')
        )
        .then(function(resp) {
          if (resp.data && resp.data.state) {
            this_.$message({message: resp.data.message, type: 'success'})
            this_.updateTableData = []
            setTimeout(function() {
              this_.dialogVisible = false
              this_.$refs.htTable.load()
            }, 3000)

            return
          }
          this_.$message.error(resp.data.message)
        })
    },
    loadInterfaceList() {
      portal.getApiList().then(data => {
        this.apiOptions = data
      })
    },
    handleNodeClick(node) {
      if (node.typeKey == 'FORM_TYPE') {
        this.typeIdQuery = null
      } else {
        // this.bpmForm.typeName = node.name
        // this.bpmForm.typeId = node.id
        this.typeIdQuery = {
          property: 'typeId',
          value: node.id,
          group: 'typeId',
          operation: 'EQUAL',
          relation: 'AND'
        }
      }
      this.$refs.htTable.load()
    },
    check(data, checkObj) {
      if (checkObj.checkedKeys.length == 0) {
        this.typeIdQuery = null
      } else {
        this.typeIdQuery = {
          property: 'typeId',
          value: checkObj.checkedKeys.join(','),
          group: 'typeId',
          operation: 'IN',
          relation: 'AND'
        }
      }
      this.$refs.htTable.load()
    },
    handleSelectionChanges(selection) {
      this.selectedList = selection
    },
    beforeClose2() {
      this.myDialogVisible = false
      this.fullscreenLoading = false
    },
    confirmSubmit(arg) {
      const this_ = this
      let url =
        window.context.form +
        '/form/customDialog/v1/importData?unZipFilePath=' +
        this.uploadAddress +
        '&status=' +
        arg +
        '&typeId=' +
        this.formTypeSelectorCatId
      req.post(url).then(function(rep) {
        rep = rep.data
        if (rep && rep.state) {
          Message.success(rep.message)
        } else {
          Message.error(rep.message || '保存失败')
        }
        this_.myDialogVisible = false
        this_.$refs.htTable.querys = []
        this_.$refs.htTable.load()
        this_.importDialogVisible = false
        this_.fullscreenLoading = false
      })
    },
    handleTabSwitch(m) {
      if (m.name == 'dataParam') {
        this.$refs.dataParamCode && this.$refs.dataParamCode.refresh()
      }
    },
    handleVarSelectorClick(s, n) {
      if (n && n.data && n.data.field) {
        const fieldExp = '${' + n.data.field + '}'
        this.$refs.dataParamCode &&
          this.$refs.dataParamCode.codemirror.replaceSelection(fieldExp)
      }
    },
    //鼠标选中行改变复选框
    rowClick(row) {
      this.$refs.htTable.$refs.htTable.toggleRowSelection(row)
    },
    returnVal(val, row) {
      row.config = val
    },
    itemChange(row, item) {
      row.config = item.config
    },
    paramChange(val, row) {
      this.param_ctList.forEach(item => {
        if (item.key == val) {
          row.config = item.config
          // if (val == 2) {
          //   row.condition = 'EQ'
          // }
        }
      })
      //重置config
      if (this.$refs.paramSettingDialog) {
        this.$refs.paramSettingDialog.setConfig(false)
      }
    },
    changeOptions() {
      let diySql = this.treeSidebarData.diySql
      if (diySql) {
        diySql = diySql + this.selectOp
      } else {
        diySql = this.selectOp
      }
      this.$set(this.treeSidebarData, 'diySql', diySql)
    },
    //监听列表预览页面的确认事件
    handleSavePreview(data) {
      Message.success('返回数据为：' + JSON.stringify(data))
    },
    //预览
    preview(data) {
      let item = {
        name: '请选择',
        custDialog: {
          selectNum: 1,
          conditions: '',
          custQueryJson: '',
          alias: data.alias,
          type: 'custDialog'
        },
        resultField: data.resultField,
        allowInput: false
      }
      this.customDialogPreview = item
      this.aliasPreview = data.alias
      setTimeout(() => {
        this.$refs.customDialogShow.showDialog() //显示自定义对话框列表预览弹框
      })
    },
    //判断数据是否包含某个对象，并返回数据包含对象的下标
    indexArray(array, item) {
      if (array.length == 0) {
        return -1
      }
      for (let i = 0; i < array.length; i++) {
        if (JSON.stringify(array[i]) == JSON.stringify(item)) {
          return i
        }
      }
      return -1
    },
    //批量勾选设置列的字段
    handleSelectionChange(rows) {
      //先把所有选择的字段设置为未选中
      for (let i = 0; i < this.table.columnList.length; i++) {
        if (this.table.columnList[i] && this.table.columnList[i].selected) {
          this.table.columnList[i].selected = false
        }
      }
      if (rows && rows.length > 0) {
        //再根据勾选的字段设置为选中
        for (let i = 0; i < rows.length; i++) {
          let res = this.indexArray(this.table.columnList, rows[i])
          if (this.table.columnList[res]) {
            this.table.columnList[res].selected = true
          }
        }
      }
      this.selectedColumn = rows
    },
    //保存设置列的内容
    save() {
      const this_ = this
      if (this_.treeSidebarData.style == '1') {
        this_.$validator.validateAll('editSysTypeForm').then(result => {
          if (result) {
            this_.doSave()
          } else {
            this_.$message({
              showClose: true,
              message: `有字段未通过校验，请正确填写表单内容。`,
              type: 'warning'
            })
          }
        })
      } else {
        this.doSave()
      }
    },
    doSave() {
      const this_ = this
      // if (
      //   this.treeSidebarData.resultfield &&
      //   this.treeSidebarData.resultfield.length
      // ) {
      //   let isSetPK = this.treeSidebarData.resultfield.findIndex(item => {
      //     return item.isPK == true
      //   })
      //   let isSetTag = this.treeSidebarData.resultfield.findIndex(item => {
      //     return item.isTag == true
      //   })
      //   if (isSetPK != -1 && isSetTag == -1) {
      //     this_.$message({
      //       showClose: true,
      //       message: `设为标签未设置`,
      //       type: 'warning'
      //     })
      //     return
      //   }
      // }
      this_.$validator.validateAll('settingSave').then(result => {
        if (result) {
          //如果是树形对话框则给显示字段重新赋值，把显示字段的数组格式设置为对象格式
          if (this_.treeSidebarData.style == '1') {
            this_.treeSidebarData.displayfield = {}
            this_.treeSidebarData.displayfield = {...this_.displayfieldTree}
          }
          if (!this_.treeSidebarData.diySql && this_.isSqlBuildType) {
            Message.warning('请添加sql语句')
            return
          }
          this_.treeSidebarData.conditionfield.forEach(column => {
            if (column.dbType == 'date' && column.condition == 'BETWEEN') {
              column.defaultValue = column.endDate
            }
          })
          if (
            this_.treeSidebarData.sortfield &&
            this_.treeSidebarData.sortfield.length > 3
          ) {
            Message.warning('您添加的排序字段太多，最多只能添加3个排序字段！')
            return
          }
          this_.innerValidation = true
          this_.dialogVisibleSetting = false
        } else {
          let arr = this_.$validator.errors.items.filter(
            item => item.scope == 'settingSave'
          )
          this_.$message({
            showClose: true,
            message: `有字段未通过校验，请正确填写表单内容。`,
            type: 'warning'
          })
        }
      })
    },
    //关闭设置列弹框
    close() {
      let this_ = this
      if (this_.treeSidebarData.style == '1') {
        this.$validator.validateAll('settingSave').then(result => {
          if (!result) {
            this_.innerValidation = false
            this_.doClose()
          } else {
            this_.doNextValidate()
          }
        })
      } else {
        this_.doNextValidate()
      }
    },
    doClose() {
      this.dialogVisibleSetting = false
      this.displayfieldTree.isScript = false

      this.treeSidebarData = this.itemRow
    },
    doNextValidate() {
      let this_ = this
      this_.$validator.validateAll('settingSave').then(result => {
        if (!result) {
          this_.innerValidation = false
          this.doClose()
        } else {
          if (this_.treeSidebarData.style == '1') {
            this_.treeSidebarData.displayfield = {}

            this_.treeSidebarData.displayfield = {...this_.displayfieldTree}
          }
          if (!this_.treeSidebarData.diySql && this_.isSqlBuildType) {
            //Message.warning("请添加sql语句");
            this_.innerValidation = false
            this_.doClose()
            return
          }
          for (let i in this_.treeSidebarData.conditionfield) {
            let column = this_.treeSidebarData.conditionfield[i]
            if (column.dbType == 'date' && column.condition == 'BETWEEN') {
              column.defaultValue = column.endDate
            }
          }
          if (
            this_.treeSidebarData.sortfield &&
            this_.treeSidebarData.sortfield.length > 3
          ) {
            //Message.warning("您添加的排序字段太多，最多只能添加3个排序字段！");
            this_.innerValidation = false
            this_.doClose()
            return
          }
          this_.innerValidation = true
          this_.doClose()
        }
      })
    },
    //添加设置列的字段
    addFields() {
      let column = {}
      column.fieldName = ''
      column.comment = ''
      column.columnType = 'varchar'
      this.table.columnList.push(column)
    },
    //把设置列的字段新增到条件字段、显示字段、返回字段等
    addColumns() {
      let _this = this
      //检查是否选择了列
      // for (let i in this.table.columnList) {
      //   let c = this.table.columnList[i]
      //   if (c.selected) break
      //   if (i == this.table.columnList.length - 1) {
      //     if (i == this.table.columnList.length - 1) {
      //       Message.warning('请选择左边的列')
      //     }
      //   }
      // }
      if (this.selectedColumn.length < 1) {
        return Message.warning('请选择左边的列')
      }
      //判断tabs标签页是否选择了显示字段
      if (this.tabStatus == 'display') {
        for (let i in this.table.columnList) {
          let c = this.table.columnList[i]
          if (!c.selected) continue
          let column = this.getDisplayColumn(c)
          if (this.treeSidebarData.style == '0') {
            let show = this.judgeAryData(
              this.treeSidebarData.displayfield,
              column
            )
            if (show) {
              this.treeSidebarData.displayfield.push(column)
            }
          } else if (this.treeSidebarData.style == '1') {
            eval('this.' + this.activeModelStr + "='" + c.fieldName + "'")
          }
        }
        //判断tabs标签页是否选择了条件字段
      } else if (this.tabStatus == 'condition') {
        this.selectFieldChange(
          '',
          this.treeSidebarData.conditionfield,
          this.selectedColumn
        )
        for (let i in this.table.columnList) {
          let c = this.table.columnList[i]
          if (!c.selected) continue
          let column = this.getConditionColumn(c)
          let show = this.judgeAryData(
            this.treeSidebarData.conditionfield,
            column
          )
          if (show) {
            this.treeSidebarData.conditionfield.push(column)
          }
        }
        //去除重复项
        this.treeSidebarData.resultfield.unique(function(a, b) {
          return a.field == b.field
        })
        //判断tabs标签页是否选择了返回字段
      } else if (this.tabStatus == 'return') {
        for (let i in this.table.columnList) {
          let c = this.table.columnList[i]

          if (!c.selected) continue
          let column = this.getReturnColumn(c)
          let show = this.judgeAryData(this.treeSidebarData.resultfield, column)
          if (show) {
            this.treeSidebarData.resultfield.push(column)
          }
        }
        //去除重复项
        this.treeSidebarData.resultfield.unique(function(a, b) {
          return a.field == b.field
        })
        //判断tabs标签页是否选择了排序字段
      } else if (this.tabStatus == 'order') {
        let errorMsg = ''
        for (let i in this.table.columnList) {
          let c = this.table.columnList[i]
          if (!c.selected) continue
          //大文本类型与一些未明确的字段类型不可作为排序字段
          if (c.columnType == 'clob' || !c.columnType) {
            errorMsg += c.fieldName + '  '
            continue
          }
          let column = this.getOrderColumn(c)

          let show = this.judgeAryData(this.treeSidebarData.sortfield, column)
          if (show) {
            this.treeSidebarData.sortfield.push(column)
          }
        }
        if (errorMsg) {
          this.$message.error(
            '字段:' + errorMsg + '的字段类型不支持作为排序字段'
          )
        }
        //去除重复项
        this.treeSidebarData.sortfield.unique(function(a, b) {
          return a.field == b.field
        })
      }
    },
    getDisplayColumn(c) {
      let column = {}
      column.field = c.fieldName
      column.comment = c.comment
      column.nameKey = '0'
      return column
    },
    getConditionColumn(c) {
      let column = {}
      column.field = c.fieldName
      column.comment = c.comment
      column.condition = 'EQ'
      column.dbType = c.columnType
      column.defaultType = '2'
      column.defaultValue = ''
      return column
    },
    getReturnColumn(c) {
      let column = {}
      column.field = c.fieldName
      column.comment = c.comment
      column.idKey = '0'
      column.AggFuncOp = '' //合计函数运算符
      column.columnType = c.columnType //字段类型
      return column
    },
    getOrderColumn(c) {
      let column = {}
      column.field = c.fieldName
      column.sortType = 'asc'
      column.comment = c.comment
      return column
    },
    //判断是否存在重复字段
    judgeAryData(data, column) {
      let show = true
      for (let i = 0; i < data.length; i++) {
        if (
          data[i].field == column.field &&
          data[i].comment == column.comment
        ) {
          show = false
          break
        }
      }
      return show
    },
    fillColumn(row, event, column) {
      if (this.tabStatus == 'display') {
        let column = this.getDisplayColumn(row)
        if (!this.judgeAryData(this.treeSidebarData.displayfield, column)) {
          this.handleWarningFieldExists()
          return
        }
        this.treeSidebarData.displayfield.push(column)
      } else if (this.tabStatus == 'condition') {
        let column = this.getConditionColumn(row)
        if (!this.judgeAryData(this.treeSidebarData.conditionfield, column)) {
          this.handleWarningFieldExists()
          return
        }
        this.treeSidebarData.conditionfield.push(column)
      } else if (this.tabStatus == 'return') {
        let column = this.getReturnColumn(row)
        if (!this.judgeAryData(this.treeSidebarData.resultfield, column)) {
          this.handleWarningFieldExists()
          return
        }
        this.treeSidebarData.resultfield.push(column)
      } else if (this.tabStatus == 'order') {
        let column = this.getOrderColumn(row)
        if (!this.judgeAryData(this.treeSidebarData.sortfield, column)) {
          this.handleWarningFieldExists()
          return
        }
        this.treeSidebarData.sortfield.push(column)
      } else {
        this.$message.warning('请选择要添加的字段类型')
      }
    },
    handleWarningFieldExists() {
      this.$message.warning(`该字段已存在`)
    },
    //删除字段
    deleteSetting(list, index) {
      for (let i = this.selectOptions.length - 1; i >= 0; i--) {
        if (this.selectOptions[i].field === list[index].field) {
          this.selectOptions.splice(i, 1)
          break
        }
      }
      list.splice(index, 1)
    },
    //打开设置列弹框
    showSettingDialog() {
      if (
        !this.treeSidebarData.id &&
        this.treeSidebarData.dsType === 'dataSource' &&
        this.treeSidebarData.style != 2 &&
        !this.treeSidebarData.objName
      ) {
        return this.$message.warning('请先查询表(视图)后，再进行设置！')
      }

      this.tabStatus = 'display' //默认打开显示字段
      //设置是否仅可修改显示字段
      this.showOnlyDisplayField = this.treeSidebarData.dsType == 'selectedApi'
      this.cmOptions.readOnly = this.showOnlyDisplayField
      if (this.treeSidebarData.style == 1) {
        //树形

        this.displayfieldTree = {
          ...this.treeSidebarData.displayfield,
          isScript: false
        }
      }
      if (
        this.treeSidebarData.conditionfield &&
        this.treeSidebarData.conditionfield.length > 0 &&
        this.selectOptions.length == 0
      ) {
        this.treeSidebarData.conditionfield.forEach(item => {
          if (item.defaultType == '1') {
            let selectOp = {}
            selectOp.field = item.field
            selectOp.comment = item.comment
            this.selectOptions.push(selectOp)
          }
          // if(!item.config){
          //   item.config = false;
          // }
        })
      }
      if (
        this.treeSidebarData.sqlBuildType === 0 ||
        !this.treeSidebarData.sqlBuildType
      ) {
        //如果点击详情页有勾选上，则说明此时isSqlBuildType有值，如果没值则进行初始化
        if (!this.isSqlBuildType) {
          this.isSqlBuildType = false
        }
      } else {
        this.isSqlBuildType = true
      }
      if (this.treeSidebarData.name) {
        this.titleSetting = this.treeSidebarData.name + '-设置列'
      } else {
        this.titleSetting = '未命名-设置列'
      }
      //打开设置如果是数据源，先获取数据源的字段
      if (this.treeSidebarData.dsType == 'dataSource') {
        let params = {
          dsalias: this.treeSidebarData.dsalias,
          isTable: this.treeSidebarData.isTable,
          objName: this.treeSidebarData.objName
        }
        const this_ = this
        //获取数据源的字段
        let url = window.context.form + '/form/customQuery/v1/getTable'
        req.post(url, params).then(function(data) {
          this_.dialogVisibleSetting = true
          this_.table = data.data.table
          this_.handleFilterColumn()
        })
      }
      //打开设置列如果不是数据源
      if (this.treeSidebarData.dsType != 'dataSource') {
        this.dialogVisibleSetting = true
        //值来源数组_树改变如下
        this.value_sourceList_tree = [{value: '固定值', key: '2'}]
        //判断REST接口是否是GET请求
        if (this.treeSidebarData.requestType == 'GET') {
          //运算条件数组-varchar改变如下
          this.string_opList = [{value: '等于', key: 'EQ'}]
        } else {
          //运算条件数组-varchar改变如下
          this.string_opList = [
            {value: '等于', key: 'EQ'},
            {value: 'like', key: 'LK'},
            {value: 'likeEnd', key: 'LFK'},
            {value: 'in', key: 'IN'},
            {value: '等于空', key: 'ISNULL'},
            {value: '不等于空', key: 'NOTNULL'}
          ]
        }
        //字段设置为空
        this.table = {columnList: []}
      } else {
        this.string_opList = [
          {value: '等于', key: 'EQ'},
          {value: 'like', key: 'LK'},
          {value: 'likeEnd', key: 'LFK'},
          {value: 'in', key: 'IN'},
          {value: '等于空', key: 'ISNULL'},
          {value: '不等于空', key: 'NOTNULL'}
        ]
      }
      this.itemRow = _.cloneDeep(this.treeSidebarData)
    },
    // //保存参数模板设置
    // handleSave(){
    //   this.treeSidebarData.dataParam = this.treeSidebarData.dataParam=="{}"?"":this.treeSidebarData.dataParam;
    //   if(this.treeSidebarData.dataParam){
    //     Message.success("设置成功");
    //   }
    //   this.dialogVisiblePost=false;
    // },
    // //打开参数模板设置
    // showSetParamDialog(){
    //   this.dialogVisiblePost=true;
    // },
    // //关闭参数模板设置
    // handleClosePost(){
    //   this.dialogVisiblePost=false;
    // },
    //查询数据源表或视图
    getByDsObjectName() {
      if (this.treeSidebarData.id) {
        return
      }
      if (this.treeSidebarData.dsalias == null) {
        Message.warning('请选择数据源')
        return
      }
      this.params = {}
      this.params.dsalias = this.treeSidebarData.dsalias
      this.params.isTable = this.treeSidebarData.isTable
      this.params.objName = this.objName
      const this_ = this
      let url = window.context.form + '/form/customQuery/v1/getByDsObjectName'
      req.post(url, this_.params).then(function(data) {
        this_.tableOrViewList = [] //每次查询前先设置为空
        if (!data || data.data.length == 0) {
          Message.warning('该数据源中未查询到表或视图')
          return
        }
        Message.success('查询成功')
        for (let i = 0; i < data.data.length; i++) {
          data.data[i].comment =
            data.data[i].name + '(' + data.data[i].comment + ')'
          this_.tableOrViewList.push(data.data[i])
        }
        //选择表或视图时默认选择第一个
        this_.treeSidebarData.objName = this_.tableOrViewList[0].name
      })
    },
    //关闭侧边栏
    handleClose() {
      this.itemRow = {}
      this.treeSidebarData = {} //清除保存过的数据
      this.isSqlBuildType = false
      this.dialogVisible = false
      this.displayfieldTree.isScript = false
      this.combinationRule = {
        leftTree: '',
        rightDialog: '',
        rules: []
      }
    },
    //对话框新增修改保存后操作
    afterSaveData() {
      if (this.treeSidebarData.conditionfield.length == 0) {
        this.selectOptions = []
      }
      this.dialogVisible = false
      this.$refs.htTable.load() //重新加载列表数据
      this.$store.dispatch('form/clearCustomDialog', this.treeSidebarData.alias)
      this.combinationRule = {
        leftTree: '',
        rightDialog: '',
        rules: []
      }
    },
    //对话框新增修改保存前操作
    beforeSaveData() {
      if (!this.innerValidation) {
        Message.warning(
          '设置列校验失败，请进入设置列中完善信息并点击右上角保存按钮'
        )
        this.isSubmit = false
        return
      }
      //如果数据来源不是数据源则没有所属数据源
      if (this.treeSidebarData.dsType != 'dataSource') {
        this.treeSidebarData.dsalias = ''
      }
      //sql生成的方式(0:页面设置 1:diy)
      if (this.isSqlBuildType) {
        this.treeSidebarData.sqlBuildType = 1
      } else {
        this.treeSidebarData.sqlBuildType = 0
      }
      if (
        this.treeSidebarData.dsType == 'dataSource' &&
        !this.treeSidebarData.id
      ) {
        if (
          this.treeSidebarData.objName == '' &&
          this.treeSidebarData.style != 2
        ) {
          Message.warning('请选择表或视图')
          this.isSubmit = false
          return
        }
      }
      if (this.treeSidebarData.dsType == 'selectedApi') {
        if (
          !this.treeSidebarData.apiAlias ||
          this.treeSidebarData.apiAlias == ''
        ) {
          Message.warning('请选择接口')
          this.isSubmit = false
          return
        }
      } else {
        //树形
        if (this.treeSidebarData.style == 1) {
          if (
            this.treeSidebarData.displayfield.length == 0 ||
            this.treeSidebarData.resultfield.length == 0
          ) {
            Message.warning('请设置需要显示和返回的字段')
            this.isSubmit = false
            return
          }
        } else if (this.treeSidebarData.style != 2) {
          if (this.treeSidebarData.displayfield.length == 0) {
            Message.warning('请设置需要显示的字段')
            this.isSubmit = false
            return
          }
        } else if (this.treeSidebarData.style == 2) {
          //校验数据
          if (!this.combinationRule.leftTree) {
            Message.warning('请设置树对话框')
            this.isSubmit = false
            return
          }
          if (!this.combinationRule.rightDialog) {
            Message.warning('请设置列表对话框')
            this.isSubmit = false
            return
          }
          if (!this.combinationRule.rules || this.combinationRule.rules == 0) {
            Message.warning('请添加组合规则')
            this.isSubmit = false
            return
          }
          for (let i = 0; i < this.combinationRule.rules.length; i++) {
            if (
              !this.combinationRule.rules[i].treeField ||
              !this.combinationRule.rules[i].listField
            ) {
              Message.warning('请完善组合规则')
              this.isSubmit = false
              return
            }
          }
          //保存组合规则
          this.treeSidebarData.combinationRule = this.combinationRule
        }
      }
      this.isSubmit = true
    },
    //如果是选择接口方式，获取接口信息
    selectedApiChange() {
      if (this.treeSidebarData.dsType != 'selectedApi') {
        return
      }
      portal
        .getApiDetailByAlias(this.treeSidebarData.apiAlias)
        .then(apiDetail => {
          if (
            apiDetail.connectionType &&
            apiDetail.connectionType == 'dataSource' &&
            apiDetail.dbDetail
          ) {
            //数据源
            const {conditionfield, resultfield, diySql} = apiDetail.dbDetail
            this.treeSidebarData.conditionfield = this.convertDefaultType(
              JSON.parse(conditionfield)
            )
            this.treeSidebarData.resultfield = JSON.parse(resultfield)
            this.treeSidebarData.diySql = diySql
            //
          }

          if (
            apiDetail.connectionType &&
            apiDetail.connectionType == 'restful' &&
            apiDetail.restfulDetail
          ) {
            //restful接口
            const {
              conditionfield,
              resultfield,
              dataParam
            } = apiDetail.restfulDetail
            this.treeSidebarData.conditionfield = this.convertDefaultType(
              JSON.parse(conditionfield)
            )
            this.treeSidebarData.resultfield = JSON.parse(resultfield)
            this.treeSidebarData.dataParam = dataParam
          }
          this.treeSidebarData.listKey = ''
          //如果是选择接口类型，将显示字段设置为返回字段
          if (this.treeSidebarData.style === 0) {
            this.treeSidebarData.displayfield = this.treeSidebarData.resultfield
          }
        })
    },
    //conditionfield 参数传入类型 在集成接口中为4，而元件中为3
    convertDefaultType(conditionFields) {
      if (
        conditionFields &&
        conditionFields.constructor == Array &&
        conditionFields.length > 0
      ) {
        conditionFields.forEach(c => {
          // 参数传入时获取传入的params中的同名参数值
          if (c.defaultType == '4') {
            c.defaultType = '3'
            c.controllerType = '1'
          }
        })
      }
      return conditionFields
    },
    //添加为关联查询
    saveQueryByDialog(id) {
      this.$confirm('确认添加为关联查询？')
        .then(_ => {
          this.getDialogById(id, 'add')
        })
        .catch(_ => {})
    },
    //点击按钮打开侧边栏
    showDialog(action, row) {
      this.table.columnList = []
      this.loadDialogData()
      this.dialogVisible = false
      this.$nextTick(() => {
        this.dialogVisible = true
      })

      if (action) {
        this.objName = ''
        if (action == 'add') {
          this.title = '添加对话框'
          this.disabled = false
          this.treeSidebarData = {
            objName: '',
            displayfield: [],
            conditionfield: [],
            resultfield: [],
            sortfield: [],
            style: 0,
            needPage: true,
            selectNum: 1,
            dsType: 'dataSource',
            treeDataMode: 0,
            width: 1580,
            height: 740,
            isTable: 1,
            dsalias: 'LOCAL',
            alias: '',
            requestType: 'POST',
            pageKey: 'page',
            pageSizeKey: 'pageSize',
            totalKey: 'total',
            listKey: 'rows',
            apiAlias: ''
          }
    
          this.displayfieldTree = {}
        } else if (action == 'edit') {
          this.disabled = true
          this.title = '编辑对话框'
          let this_ = this
          let data = deepmerge({}, row, {clone: true})
          this_.treeSidebarData = data
          if (!this.treeSidebarData.treeDataMode) {
            this.treeSidebarData.treeDataMode = 0
          }
          this_.treeSidebarData.displayfield = data.displayfield
            ? JSON.parse(data.displayfield)
            : {}
          this_.treeSidebarData.resultfield = data.resultfield
            ? JSON.parse(data.resultfield)
            : []
          this_.treeSidebarData.sortfield = JSON.parse(data.sortfield)
          this_.treeSidebarData.conditionfield = JSON.parse(data.conditionfield)

          this_.displayfieldTree = {
            ...this_.treeSidebarData.displayfield,
            isScript: false
          }

          if (data.style == 2) {
            this_.combinationRule = JSON.parse(data.combinationRule)
            this_.loadDialogFields(this_.combinationRule.leftTree, true)
            this_.loadDialogFields(this_.combinationRule.rightDialog, true)
          }
          //如果是选择接口类型，更新数据 resultfield和conditionfield
          this_.selectedApiChange()
        }
      }
    },
    //根据对话框信息ID查询对话框所有信息
    getDialogById(id, action) {
      const this_ = this
      if (!id) return
      let url = window.context.form + '/form/customDialog/v1/' + id
      req.get(url).then(function(data) {
        data = data.data
        this_.treeSidebarData = data
        this_.treeSidebarData.displayfield = JSON.parse(data.displayfield)
        this_.treeSidebarData.resultfield = JSON.parse(data.resultfield)
        this_.treeSidebarData.sortfield = JSON.parse(data.sortfield)
        this_.treeSidebarData.conditionfield = JSON.parse(data.conditionfield)
        this_.displayfieldTree = {...this_.treeSidebarData.displayfield}
        if (data.style == 2) {
          this_.combinationRule = JSON.parse(data.combinationRule)
          this_.loadDialogFields(this_.combinationRule.leftTree, true)
          this_.loadDialogFields(this_.combinationRule.rightDialog, true)
        }

        //添加为关联查询
        if (action && action == 'add') {
          for (
            let i = 0;
            i < this_.treeSidebarData.conditionfield.length;
            i++
          ) {
            //如果对话框的条件字段有为参数传入的即对应关联查询的参数传入
            //并且对话框的条件字段有为用户输入的即对应关联查询的参数传入
            //（defaultType：1：用户输入，2：固定值 ，3：参数传入 ）
            if (this_.treeSidebarData.conditionfield[i].defaultType == '3') {
              this_.treeSidebarData.conditionfield[i].defaultType = '1'
            }
          }
          if (!this_.treeSidebarData.needPage) {
            this_.treeSidebarData.needPage = 0
          } else {
            this_.treeSidebarData.needPage = 1
          }
          for (let i = 0; i < this_.treeSidebarData.displayfield.length; i++) {
            this_.treeSidebarData.displayfield[i].idKey = '0'
            this_.treeSidebarData.displayfield[i].AggFuncOp = '' //合计函数运算符
          }
          let url =
            window.context.form + '/form/customQuery/v1/saveQueryByDialog'
          req.post(url, this_.treeSidebarData).then(function(rep) {
            rep = rep.data
            if (rep && rep.state) {
              Message.success(rep.message)
            }
          })
        }
      })
    },
    //页面加载显示数据
    loadData(param, cb) {
      let _param = {querys: []}
      _param = {..._param, ...param}
      if (this.typeIdQuery && this.typeIdQuery.value != '17') {
        const typeIdObj = _param.querys.find(item => item.property === 'typeId')
        if (typeIdObj) {
          _param.querys = _param.querys.filter(
            item => item.property !== 'typeId'
          )
        }
        _param.querys.push(this.typeIdQuery)
      } else {
        _param.querys = _param.querys.filter(item => item.property !== 'typeId')
      }
      this.$addRightMarkIntoFilter(_param)
      req
        .post(window.context.form + '/form/customDialog/v1/list', _param)
        .then(response => {
          this.data = response.data.rows
          this.pageResult = {
            page: response.data.page,
            pageSize: response.data.pageSize,
            total: response.data.total
          }
        })
        .finally(() => cb())
    },
    handleCommond(param) {
      switch (param.command) {
        case 'preview':
          this.preview(param.row)
          break
        case 'relation':
          this.saveQueryByDialog(param.row.id)
          break
      }
    },
    controllerTypeChange(row) {
      if (row.defaultType == '1') {
        let options = {}
        options.comment = row.comment
        options.field = row.field

        let isExist = false
        for (let index = 0; index < this.selectOptions.length; index++) {
          if (
            this.selectOptions[index].field === options.field &&
            this.selectOptions[index].comment === options.comment
          ) {
            isExist = true
          }
        }
        if (!isExist) {
          this.selectOptions.push(options)
        }
        if (row.dbType == 'date') {
          if (row.condition == 'BETWEEN') {
            this.$set(row, 'controllerType', '2')
            this.$set(
              row,
              'config',
              '{"type":"daterange","valueFormat":"yyyy-MM-dd"}'
            )
          } else {
            this.$set(
              row,
              'config',
              '{"type":"date","valueFormat":"yyyy-MM-dd"}'
            )
          }
        } else {
          this.$set(row, 'controllerType', '1')
        }
      }
      //如果选中了脚本类型，则加载脚本对话框
      if (row.defaultType == '5' && this.scriptOptions.length == 0) {
        row.defaultValue = ''
        //this.loadScriptOptions();
      }
      row.defaultValue = ''
    },
    handleExport() {
      let selection = this.$refs.htTable.$refs.htTable.selection
      if (selection && selection.length == 0) {
        this.$message.warning('请选择至少一项记录')
        return
      }
      let ids = selection.map(item => item.id)
      let url = `${window.context.form}/form/customDialog/v1/export?ids=${ids}`
      req.download(url)
    },
    handleUploadResult(data) {
      if (data.state) {
        if (data.message && data.message == 'confirmUpload') {
          this.uploadAddress = data.value
          this.myDialogVisible = true
          return
        } else {
          this.$message({type: 'success', message: data.message})
        }
      } else {
        //t
        this.$message({type: 'error', message: data.message})
      }
      this.$refs.htTable.querys = []
      this.$refs.htTable.load()
      this.importDialogVisible = false
      this.fullscreenLoading = false
    },
    beforeUpload(file) {
      if (!file.name.endsWith('.zip')) {
        this.$message.warning('只能导入zip文件!')
        return false
      }
      this.fullscreenLoading = true
    },
    onExceed(file) {
      this.$message.warning('只能选择一个zip文件!')
    },
    uploadSubmit() {
      if (
        !this.$refs.upload.uploadFiles ||
        this.$refs.upload.uploadFiles.length == 0
      ) {
        this.$message.warning('请选择要导入的对话框!')
        return false
      }
      this.$refs.upload.submit()
    },
    //加载对话框数据
    loadDialogData() {
      this.leftTreeDialogList = []
      this.rightDialogList = []
      req
        .get(window.context.form + '/form/customDialog/v1/getAll')
        .then(resp => {
          let data = resp.data
          data.forEach(item => {
            if (item.style == 1) {
              this.leftTreeDialogList.push({
                alias: item.alias,
                name: item.name
              })
            } else if (item.style == 0) {
              this.rightDialogList.push({
                alias: item.alias,
                name: item.name
              })
            }
          })
        })
    },
    addCombinationRule() {
      this.combinationRule.rules.push({
        treeField: '',
        listField: '',
        condition: ''
      })
    },
    //加载对话框数据
    loadDialogFields(alias, isInit) {
      //清空旧数据
      let this_ = this
      //初始化时不清空
      if (!isInit) {
        this_.combinationRule.rules.splice(0)
      }
      form.getCustomDialogByAlias(alias).then(data => {
        //如果是树形对话框，则加载返回值字段
        if (data.style == 1) {
          this_.treeDialogFields.splice(0)
          JSON.parse(data.resultfield).forEach(item => {
            this_.treeDialogFields.push({
              name: item.comment,
              alias: item.field
            })
          })
        } else if (data.style == 0) {
          //列表对话框，加载条件字段
          this_.listDialogFields.splice(0)
          JSON.parse(data.conditionfield).forEach(item => {
            if (item.defaultType == 3) {
              this_.listDialogFields.push({
                name: item.comment,
                alias: item.field,
                condition: item.condition
              })
            }
          })
        }
      })
    },
    setCondition(alias, index) {
      let this_ = this
      this_.listDialogFields.forEach(item => {
        if (item.alias == alias) {
          this_.combinationRule.rules[index].condition = item.condition
        }
      })
    },
    deleteRule(index) {
      this.combinationRule.rules.splice(index, 1)
    },
    handleFilterColumn() {
      for (let i = this.table.columnList.length - 1; i >= 0; i--) {
        if (
          this.table.columnList[i].fieldName &&
          this.table.columnList[i].fieldName.toLowerCase() == 'f_form_data_rev_'
        ) {
          this.table.columnList.splice(i, 1)
        }
      }
    },
    // loadScriptOptions(){
    //   this.scriptOptions.splice(0);
    //   this.$http.get("${bpmRunTime}/runtime/script/v1/getAllScript").then(resp=>{
    //     resp.data.forEach(item=>{
    //       this.scriptOptions.push({
    //         value: item.name,
    //         key: item.id,
    //         script: item.script
    //       })
    //     })
    //   })
    // },
    // handleScriptSelect(id, row){
    //   let script = this.scriptOptions.filter(item=>{
    //     return item.key === id
    //   })[0].script;
    //   row.defaultValue = row.defaultValue + script;
    //   this.$nextTick(()=>{
    //     row.selectScript = "";
    //   })
    // },
    // handleInitScriptOptions(){
    //   if(!this.treeSidebarData.conditionfield
    //     || this.treeSidebarData.conditionfield.length == 0
    //     || this.scriptOptions.length !==0){
    //     return ;
    //   }
    //   let hasScript = false;
    //   this.treeSidebarData.conditionfield.forEach(row=>{
    //     if(row.defaultType === "5"){
    //       hasScript = true;
    //     }
    //   })
    //   if(!hasScript){
    //     return ;
    //   }
    //   this.loadScriptOptions();
    // }
    handleScriptSelected(script, name) {
      if (this.tabStatus == 'condition') {
        this.editConditionRow.defaultValue =
          this.editConditionRow.defaultValue + script
      } else {
        this.$set(
          this.editConditionRow,
          'pvalue',
          this.editConditionRow.pvalue + script
        )
        // this.editConditionRow.pvalue = this.editConditionRow.pvalue + script
      }
    },
    showScriptDialog(row, tabName) {
      this.$refs.eipScriptDialog.showDialog()
      this.editConditionRow = row
    },
    // 表格单击切换选中状态
    clickRow(row) {
      this.selectedColumn.push(row)
      this.$refs.htTableSetting.toggleRowSelection(row)
    },
    //表格选中数据
    tableSelect(selection) {
      this.updateTableData = selection
    },
    //选择器出现重复赋值问题
    selectFieldChange(val, condition, selectedColumn) {
      let config = {}
      if (val) {
        config = JSON.parse(val)
        condition = condition.filter(i => config.bind != i.field)
      }
      let exist = []
      condition.forEach(item => {
        if (item.config && item.config !== '') {
          let con = JSON.parse(item.config)
          if (con.parameter) {
            let bind = con.bind
            for (let key in con.parameter) {
              exist.push({
                bind: bind,
                value: con.parameter[key]
              })
            }
          }
        }
      })
      if (val && config.parameter) {
        for (let key in config.parameter) {
          exist.forEach(item => {
            if (item.value === config.parameter[key]) {
              setTimeout(() => {
              return Message.error(
                item.value + ' 在字段 ' + item.bind + ' 中已经赋值'
              )},50)
            }
          })
        }
      }

      if (selectedColumn) {
        selectedColumn.forEach(col => {
          exist.forEach(item => {
            if (item.value === col.fieldName) {
              setTimeout(() => {
              return Message.error(
                item.value + ' 在字段 ' + item.bind + ' 中已经赋值'
              )},50)
            }
          })
        })
      }
    },
    handleIsPKChange(row) {
      this.treeSidebarData.resultfield.forEach(item => {
        if (row.field == item.field && row.idKey == item.idKey) {
          item.isPK = row.isPK
        } else {
          item.isPK = false
        }
      })
    },
    // handleIsTagChange(row) {
    //   this.treeSidebarData.resultfield.forEach(item => {
    //     if (row.field == item.field && row.idKey == item.idKey) {
    //       item.isTag = row.isTag
    //     } else {
    //       item.isTag = false
    //     }
    //   })
    // }
  },
  mounted() {
    this.$validator = this.$root.$validator
    const this_ = this
    this_.postParamsHeight = document.body.clientHeight - 250
    //获取数据源池
    req
      .get(window.context.portal + '/sys/sysDataSource/v1/getDataSources')
      .then(function(data) {
        this_.dataSourcesInBean = data.data
      })
    //获取集成管理的接口列表
    this.loadInterfaceList()
  }
}
</script>

<style lang="scss" scoped>
::v-deep {
  .cell > .el-table__column-filter-trigger {
    display: none;
  }
  .textarea-input {
    margin-bottom: 18px;
    .field-tail__wrap {
      .el-form-item__error {
        bottom: -24px;
      }
    }
  }
}

.style-form-item {
  ::v-deep {
    .inputs.ht-form-inputs__inline {
      width: 264px;
    }
  }
}

///deep/ .inputs .ht-form-inputs__inline {
//  width: 538px;
//  position: relative;
//}
::v-deep .editCustomDialog {
  label.el-radio-horizontal {
    margin-bottom: 0;
  }
  .inputs {
    width: 100%;
  }

  .flex_wrap {
    display: flex;
    align-items: center;
  }
}

.request-type {
  ::v-deep {
    .el-form-item__content {
      width: 220px;
    }
  }

  .get-radio {
    margin-left: 26px;
  }
}

.post-radio {
  margin-right: 4px;
}

.custom-dialog__wrap,
.custom-dialog__row {
  height: 100%;

  .custom-dialog__row_left,
  .custom-dialog__row_right {
    height: 100%;
    overflow-y: auto;
  }
}

.custom-dialog__row_left,
.custom-dialog__row_right {
  ::v-deep {
    .el-table__cell {
      padding: 0 !important;
      .cell {
        padding: 12px 10px;
      }
    }
    .el-form-item__error {
      top: calc(100% - 3px);
    }
  }
}
.todo-subject {
  cursor: pointer;
}

.todo-subject:hover {
  color: #2761ff;
}

.ht {
  width: 320px;
}

.cd-column__dialog /deep/ .el-dialog > .el-dialog__header {
  padding: 8px 20px;
}

@media (max-width: 1024px) {
  /deep/ .search-container__col {
    flex-wrap: wrap;

    .el-button-group {
      margin-top: 10px;
    }
  }
}

/deep/.el-dialog__wrapper {
  overflow: unset !important;
}

/deep/.el-dialog__body {
  padding: 10px 20px;
  color: #606266;
  font-size: 14px;
  word-break: break-all;
  height: calc(100% - 140px);
  overflow-y: auto;
}

.custom-dialog-show,
.custom-dialog-show-tree,
.eip-tree-dialog {
  /deep/.el-dialog {
    height: 100%;
    width: 100%;
    margin: 0 !important;
  }
}

/deep/.el-dialog__body .selector-table {
  height: 100% !important;
}

/deep/.el-dialog .el-dialog__body .select-tree-div {
  height: calc(100% - 60px);
  min-height: unset;
}

@media (max-height: 960px) {
  /deep/.el-dialog__body .el-container {
    height: 100% !important;
  }
}

/deep/ .el-dialog.upload-dialog {
  height: unset;

  /deep/.el-dialog__body {
    height: unset;
  }

  .upload-dialog__content {
    height: 150px;
  }

  min-height: unset;
}

.manage-setting__header {
  height: 64px;
  line-height: 64px;
  margin-bottom: 24px;
  background: #f9f9f9;
  padding-left: 16px;
}

::v-deep .el-tabs__content {
  padding: 24px;
}

::v-deep .el-table td.el-table__cell div {
  width: 100%;
}
::v-deep .CodeMirror {
  height: 100%;
}
</style>