<template>
  <el-form data-vv-scope="field" v-form size="small" inline class="basics-form">
    <!-- 相关流程控件配置 -->
    <!-- <template v-if="field.ctrlType == 'related-process'">
      <ht-form-item label="选择范围" label-width="100px">
        <div>
          <el-button type="text" @click="openFlowRange">选择</el-button>
          <el-button
            type="text"
            v-if="field.options.flowRange && field.options.flowRange.length"
            @click="clearFlowRange"
            >清空选择</el-button
          >
        </div>
        <template
          v-if="field.options.flowRange && field.options.flowRange.length"
        >
          <div
            v-for="item in field.options.flowRange.filter(
              (item, index) => index < 3
            )"
            :key="item.defKey"
            class="process-line"
          >
            <div>
              <el-tooltip
                effect="dark"
                :content="`${item.name}(${item.defKey})`"
                placement="top"
              >
                <span
                  >{{ item.name }}(<span style="color: #666">{{
                    item.defKey
                  }}</span
                  >)</span
                >
              </el-tooltip>
            </div>
            <i class="el-icon-close" @click="deleteFlowRange(item)"></i>
          </div>
          <div>
            共 {{ field.options.flowRange.length }} 条流程
            <el-button type="text" @click="lookAllFlow">查看全部</el-button>
          </div>
        </template>
      </ht-form-item>
      <flow-range-dialog
        ref="flowRange"
        @confirmSelect="confirmDeleteFlow"
      ></flow-range-dialog> -->
    <!-- 流程选择对话框  -->
    <!-- <eip-flow-dialog
        ref="eipFlowDialog"
        name="eipFlowDialog"
        @onConfirm="confirmFlowRange"
        append-to-body
      /> -->
    <!-- </template> -->
    <!-- 子表联动设置 目前只支持单行文本框配置 -->
    <template
      v-if="
        (field.ctrlType == 'input' || field.ctrlType == 'button') &&
          field.parentNodeType == 'sub' &&
          field.options.showCondition
      "
    >
      <ht-form-item
        label="显示设置"
        label-width="100px"
        style="margin-bottom: -10px"
      >
        <template slot="label">
          显示设置
          <el-tooltip content="为true时,绑定字段显示">
            <i class="property-tip icon-notes" />
          </el-tooltip>
        </template>
        <ht-select
          clearable
          v-model="field.options.showCondition.target"
          :options="mainBoFields"
          :props="{key: 'name', value: 'desc'}"
          filterable
          style="width: 100px"
          @change="changeShowCondition"
        >
          <template slot-scope="{options, propKey, propValue}">
            <el-option-group
              v-for="group in options"
              :key="group.name"
              :label="group.desc"
            >
              <el-option
                v-for="item in group.children.filter(obj => {
                  return filterFields(obj)
                })"
                :key="item[propKey]"
                :label="item[propValue]"
                :value="item[propKey]"
              ></el-option>
            </el-option-group>
          </template>
        </ht-select>
        <ht-input
          style="width: 204px"
          v-model="field.options.showCondition.value"
          placeholder="请输入值"
        />
      </ht-form-item>
      <pre
        style="color: red"
      ><span v-if="field.options.showCondition.fieldPath">{{field.options.showCondition.fieldPath+'=='+field.options.showCondition.value}}</span> 为true时，显示绑定的字段</pre>
    </template>
    <!-- 下拉框基本属性 -->
    <template
      v-if="isBasicsProperty(field.options.basicsProperty, 'selectConfig')"
    >
      <ht-form-item
        label="参数配置"
        label-width="100px"
        v-if="
          field.ctrlType != 'eip-cascader' && field.ctrlType != 'autocomplete'
        "
      >
        <el-checkbox
          v-model="field.options.multiple"
          label="isMultiple"
          v-if="
            field.ctrlType != 'eip-cascader' && field.ctrlType != 'autocomplete'
          "
          >多选</el-checkbox
        >
        <el-checkbox
          v-model="field.options.filterable"
          label="filterable"
          v-if="
            field.ctrlType != 'eip-cascader' && field.ctrlType != 'autocomplete'
          "
          >可搜索</el-checkbox
        >
        <el-checkbox
          v-if="field.options.filterable && field.ctrlType != 'dropdown'"
          v-model="field.options.allowCreate"
          label="allowCreate"
          >是否可创建条目</el-checkbox
        >
      </ht-form-item>
      <ht-form-item v-if="field.options.multiple">
        <template slot="label">
          <el-tooltip
            :content="
              `为0时下拉${
                field.ctrlType == 'dropdown' ? '树' : '框'
              }选择数量没有上限`
            "
          >
            <i class="property-tip icon-question" />
          </el-tooltip>
          <el-tooltip
            :content="
              `下拉${field.ctrlType == 'dropdown' ? '树' : '框'}可选数量`
            "
          >
            <span
              >下拉{{
                field.ctrlType == 'dropdown' ? '树' : '框'
              }}可选数量</span
            >
          </el-tooltip>
        </template>
        <ht-input
          validate="numeric"
          v-model="field.options.limitCount"
          :min="0"
          :max="99999"
          style="width:310px"
          type="number"
        ></ht-input>
      </ht-form-item>
    </template>

    <!-- 下拉框 下拉树固态|动态选项配置 choiceType -->
    <div v-show="isBasicsProperty(field.options.basicsProperty, 'choiceType')">
      <ht-form-item
        v-if="field.options.type == 'radio' || field.options.type == 'checkbox'"
        class="form-inline-item"
      >
        <template slot="label">
          换行显示
          <el-tooltip content="是否换行显示">
            <i class="property-tip icon-notes" />
          </el-tooltip>
        </template>
        <el-switch v-model="field.options.inline"> </el-switch>
      </ht-form-item>
      <ht-form-item label="选项配置" label-width="100px">
        <div class="radio4">
          <el-radio-group
            @change="dynamicClick"
            v-model="field.options.choiceType"
            size="small"
          >
            <el-radio-button
              label="static"
              :disabled="
                field.ctrlType == 'cascader' ||
                  field.ctrlType == 'dropdown' ||
                  field.ctrlType == 'eip-cascader'
              "
              >固定选项</el-radio-button
            >
            <!-- 输入建议隐藏动态选项按钮，v-if不起效，用样式控制隐藏 -->
            <el-radio-button
              label="dynamic"
              :style="field.ctrlType === 'autocomplete' ? 'display: none' : ''"
              >动态选项</el-radio-button
            >
          </el-radio-group>
        </div>
        <div v-if="field.options.choiceType == 'static'">
          <div v-if="field.ctrlType == 'autocomplete'">
            <draggable
              tag="ul"
              class="column-ul autocomplete-list"
              :list="field.options.options"
              v-bind="{
                group: {name: 'options'},
                ghostClass: 'ghost',
                handle: '.drag-item'
              }"
              handle=".drag-item"
            >
              <li v-for="(item, index) in field.options.options" :key="index">
                <i class="drag-item icon-drag1"></i>
                <el-input
                  size="small"
                  placeholder="请填写输入建议"
                  v-model="item.value"
                  style="width: 220px"
                ></el-input>
                <el-button
                  @click="field.options.options.remove(item)"
                  type="text"
                  size="mini"
                  >删除</el-button
                >
              </li>
            </draggable>
          </div>

          <div v-if="field.ctrlType != 'autocomplete'">
            <draggable
              tag="ul"
              class="column-ul autocomplete-list"
              :list="field.options.options"
              v-bind="{
                group: {name: 'options'},
                ghostClass: 'ghost',
                handle: '.drag-item'
              }"
              handle=".drag-item"
            >
              <li v-for="(data, index) in field.options.options" :key="index">
                <i class="drag-item icon-drag1"></i>
                <ht-input
                  size="mini"
                  placeholder="选项值"
                  v-model="data.key"
                  style="width: 75px"
                  @change="handleInputChange"
                  :validate="{required: true}"
                ></ht-input>
                <ht-input
                  size="mini"
                  class="option-item-value"
                  placeholder="选项标签"
                  :title="data.value"
                  v-model="data.value"
                  style="width: 165px"
                  :validate="{required: true}"
                >
                  <el-button
                    icon="icon-guojihua"
                    slot="append"
                    style="width: 50px"
                    @click="optionEditI18n(data)"
                  ></el-button>
                </ht-input>
                <el-button
                  @click="field.options.options.remove(data)"
                  type="text"
                  size="mini"
                  >删除</el-button
                >
              </li>
            </draggable>
          </div>
          <el-button
            v-if="field.ctrlType == 'autocomplete'"
            type="primary"
            @click="field.options.options.push({value: ''})"
            plain
            class="style__tabs-btn"
            >添加选项</el-button
          >
          <el-button
            v-else
            plain
            class="style__tabs-btn"
            type="primary"
            @click="field.options.options.push({key: '', value: ''})"
            >添加选项</el-button
          >
        </div>
        <el-button
          v-if="
            field.options.choiceType == 'static' &&
              field.ctrlType != 'autocomplete'
          "
          icon="el-icon-setting"
          style="width: 100%; margin-top: 10px; margin-bottom: 5px"
          @click="openLinkage"
          >联动设置</el-button
        >
        <div
          v-if="field.options.choiceType == 'dynamic'"
          class="customQuery-inputs"
        >
          <div class="select-dialog-line" style="margin-top: 10px">
            <ht-select
              clearable
              filterable
              :key="field.key"
              @change="setCurrentCustomQuery()"
              @clear="clearCurrentCustomQuery()"
              v-model="field.options.customQuery.alias"
              :options="customQuerys"
              :props="{key: 'alias', value: 'name'}"
            />
            <el-button
              icon="el-icon-refresh"
              @click="setCurrentCustomQuery('refresh')"
            ></el-button>
          </div>
        </div>
      </ht-form-item>
      <div
        v-if="field.options.choiceType == 'dynamic'"
        class="customQuery-inputs"
      >
        <ht-form-item
          label
          label-width="100px"
          v-if="field.options.bind && field.options.bind.length > 0"
          class="basics-property"
        >
          <template slot="label">
            参数绑定
            <el-tooltip content="自定义查询需要的参数传入">
              <i class="property-tip icon-notes" />
            </el-tooltip>
          </template>
          <template v-if="field.ctrlType == 'eip-cascader'">
            <table
              class="form-table custDialog-table"
              cellspacing="0"
              cellpadding="0"
              border="0"
            >
              <tbody>
                <tr class="linkageTable-tr linkageTable-title">
                  <td width="80px;">参数名</td>
                  <td>取值对象</td>
                </tr>
                <tr
                  class="linkageTable-tr"
                  style="text-align: center"
                  v-for="(bind, indexBind) in field.options.bind"
                  :key="indexBind"
                >
                  <td>{{ bind.comment }}</td>
                  <td>
                    <ht-select
                      clearable
                      v-model="bind.fieldPath"
                      :options="field.options.customQuery.resultfield"
                      :props="{key: 'field', value: 'comment'}"
                    ></ht-select>
                    <ht-input
                      style="padding-top: 5px"
                      v-model="bind.default"
                      placeholder="为空时默认值"
                      autocomplete="off"
                    ></ht-input>
                  </td>
                </tr>
              </tbody>
            </table>
          </template>
          <template v-else>
            <table
              class="form-table custDialog-table"
              cellspacing="0"
              cellpadding="0"
              border="0"
            >
              <tbody>
                <tr class="linkageTable-tr linkageTable-title">
                  <td width="80px;">参数名</td>
                  <td>取值对象</td>
                </tr>
                <tr
                  style="text-align: center"
                  v-for="(bind, index) in field.options.bind"
                  :key="index"
                >
                  <td>{{ bind.comment }}</td>
                  <td>
                    <ht-select
                      clearable
                      v-if="field.ctrlType == 'dropdown'"
                      v-model="bind.fieldPath"
                      :options="allBoData"
                      :props="{key: 'name', value: 'desc'}"
                    >
                      <template slot-scope="{options}">
                        <el-option-group
                          v-for="(group, idenx) in filterOptions(options)"
                          :key="idenx"
                          :label="group.desc"
                        >
                          <el-option
                            v-for="item in group.children.filter(
                              i => i.name !== field.name
                            )"
                            :key="item.id"
                            :label="item.desc"
                            :value="'data.' + item.path + '.' + item.name"
                          ></el-option>
                        </el-option-group>
                      </template>
                    </ht-select>
                    <ht-select
                      clearable
                      v-if="field.ctrlType != 'dropdown'"
                      v-model="bind.bindType"
                      :options="bindTypeOptions"
                      :props="{key: 'key', value: 'val'}"
                      @change="val => handleBindChange(val, bind)"
                    />
                    <el-button
                      @click="showScriptDialog(bind)"
                      type="text"
                      style="float: left"
                      v-if="field.ctrlType != 'dropdown' && bind.bindType == 3"
                      >选择脚本
                      <i class="el-icon-search"></i>
                    </el-button>
                    <ht-input
                      v-model="bind.fieldPath"
                      type="textarea"
                      v-if="field.ctrlType != 'dropdown' && bind.bindType == 3"
                    >
                    </ht-input>
                    <ht-input
                      style="padding-top: 5px"
                      v-if="bind.bindType == 2 && field.ctrlType != 'dropdown'"
                      v-model="bind.fieldPath"
                      placeholder="请输入内容"
                      autocomplete="off"
                    ></ht-input>
                    <ht-select
                      clearable
                      v-if="bind.bindType == 1 && field.ctrlType != 'dropdown'"
                      v-model="bind.fieldPath"
                      filterable
                      :options="customDialogParamOption"
                      :props="{key: 'name', value: 'desc'}"
                    >
                      <template slot-scope="{options}">
                        <el-option-group
                          v-for="(group, idenx) in options"
                          :key="idenx"
                          :label="group.desc"
                        >
                          <el-option
                            v-for="item in group.children"
                            :key="item.id"
                            :label="item.desc"
                            :value="'data.' + item.path + '.' + item.name"
                          ></el-option>
                        </el-option-group>
                      </template>
                    </ht-select>
                  </td>
                </tr>
              </tbody>
            </table>
          </template>
        </ht-form-item>
        <ht-form-item
          v-if="field.ctrlType != 'eip-cascader'"
          class="form-inline-item"
        >
          <template slot="label">
            初始化时不加载选项
            <el-tooltip>
              <div slot="content">
                初始化时不加载动态选项，当展开下拉框时再加载。
                <br />注意勾选该选项后：
                <br />1.只读时只会显示下拉框的选项值，不会显示值所对应的标签值；
                <br />2.下拉框多选、可创建条目时数据不会及时回显。
              </div>
              <i class="property-tip icon-notes" />
            </el-tooltip>
          </template>
          <el-switch v-model="field.options.customQuery.noInit"></el-switch>
        </ht-form-item>
        <ht-form-item label label-width>
          <template slot="label">
            选项绑定
            <el-tooltip content="返回值作为选项时的绑定">
              <i class="property-tip icon-notes" />
            </el-tooltip>
          </template>
          <div v-if="field.ctrlType == 'autocomplete'" class="flex-line">
            <label style="width: 80px">输入建议候选</label>
            <ht-select
              clearable
              v-model="field.options.customQuery.valueBind"
              :options="field.options.customQuery.resultfield"
              :props="{key: 'field', value: 'comment'}"
            />
          </div>
          <div v-else>
            <div class="mix_select_box">
              <span class="btn-pre">值</span>
              <ht-select
                :validate="
                  field.options.customQuery.treeDataMode === 1 ? 'required' : ''
                "
                clearable
                v-model="field.options.customQuery.valueBind"
                :options="field.options.customQuery.resultfield"
                :props="{key: 'field', value: 'comment'}"
              />
            </div>
            <div class="mix_select_box" style="margin:16px 0">
              <span class="btn-pre">标签</span>
              <ht-select
                :validate="
                  field.options.customQuery.treeDataMode === 1 ? 'required' : ''
                "
                clearable
                v-model="field.options.customQuery.labelBind"
                :options="field.options.customQuery.resultfield"
                :props="{key: 'field', value: 'comment'}"
              />
            </div>
            <div class="mix_select_box" v-if="field.ctrlType == 'dropdown'">
              <span class="btn-pre">Pid</span>
              <ht-select
                :validate="
                  field.options.customQuery.treeDataMode === 1 ? 'required' : ''
                "
                clearable
                v-model="field.options.customQuery.PId"
                :options="field.options.customQuery.resultfield"
                :props="{key: 'field', value: 'comment'}"
              />
            </div>
          </div>
        </ht-form-item>
        <ht-form-item
          v-if="field.ctrlType == 'dropdown'"
          label="数据模式"
          label-width="120px"
        >
          <ht-radio
            v-model="field.options.customQuery.treeDataMode"
            style="width:100%"
            :options="[
              {key: 0, value: '全部展示'},
              {key: 1, value: '逐级展示'}
            ]"
          />
        </ht-form-item>
        <ht-form-item
          label-width
          v-if="field.options.customQuery.treeDataMode == 1"
        >
          <template slot="label">
            父ID初始值
            <el-tooltip content="为空时默认为0">
              <i class="property-tip icon-notes" />
            </el-tooltip>
          </template>
          <ht-input
            v-model="field.options.customQuery.pvalue"
            placeholder="请输入父ID初始值"
            validate="max:30"
            autocomplete="off"
            :maxlength="30"
            :showWordLimit="true"
          ></ht-input>
        </ht-form-item>
      </div>
      <!-- 下拉框动态查询绑定关联查询 -->
      <el-button
        style="width: 100%; margin-left: 0px !important; margin-bottom: 5px"
        class="custDialog-btn"
        icon="icon-list2"
        size="mini"
        v-if="
          field.options.choiceType == 'dynamic' &&
            field.options.customQuery.custQueryJson &&
            field.options.customQuery.custQueryJson.length > 0 &&
            !field.isMultiple &&
            field.ctrlType != 'autocomplete' &&
            field.ctrlType != 'eip-cascader'
        "
        @click="
          showSelectQueryDialog(
            field.options.customQuery.custQueryJson,
            'select'
          )
        "
        >查看关联查询</el-button
      >
      <select-query-dialog
        ref="selectQueryDialog"
        @saveCustQueryJson="saveCustQueryJson"
        :customQuerys="customQuerys"
        :returnData="returnData"
        :queryEntMap="queryEntMap"
        :allowAdd="true"
      />

      <el-dialog
        top="8vh"
        width="850"
        title="字段联动设置"
        append-to-body
        class="urgent-text"
        :visible.sync="dialogLinkageVisible"
        :close-on-click-modal="false"
      >
        <div style="width: 100%; overflow-x: auto">
          <el-button
            icon="el-icon-plus"
            size="mini"
            @click="addRows()"
            style="margin-bottom: 5px"
            plain
            >添加</el-button
          >
          <table class="form-table" cellspacing="0" cellpadding="0" border="0">
            <tbody>
              <tr class="linkageTable-tr">
                <td>所选值</td>
                <td>变换条件</td>
                <td>变换字段</td>
                <td>变换类型</td>
                <!-- <td width="460px">
                  <span>字段验证</span>
                  <el-tooltip effect="light">
                    <div slot="content">
                      <h3>校验规则：</h3>
                      <div style="margin-top: 15px; margin-bottom: 25px">
                        <span style="color: red">*正则表达式：</span>
                        <span
                          >两个参数，第一个参数为正则表达式，第二个参数为校验未通过时的提示信息</span
                        >
                        <br />
                        <span style="color: red">例如：</span>
                        <span>"^[0-9]+$","校验失败，请输入数字"</span>
                        <br />
                        <span style="color: red">注意：</span>
                        <span>字符串格式的表达式以英文逗号‘,’来分割参数</span>
                      </div>
                    </div>
                    <i class="property-tip icon-notes" />
                  </el-tooltip>
                </td> -->
                <td width="100px">操作</td>
              </tr>

              <tr v-for="(column, index) in linkage" :key="index">
                <td>
                  <ht-select
                    v-model="column.value"
                    :options="field.options.options"
                    :filterable="true"
                    style="width: 180px"
                  />
                </td>
                <td colspan="3">
                  <table
                    cellspacing="0"
                    cellpadding="0"
                    border="0"
                    style="width: 100%"
                  >
                    <tr
                      v-for="(effects, index1) in column.effect"
                      :key="index1"
                    >
                      <td>
                        <ht-select
                          v-model="effects.linkageType"
                          :options="getLinkageTypeList(effects)"
                          clearable
                          @change="handleLinkageTypeChange(effects, index1)"
                          :props="{key: 'key', value: 'desc'}"
                          style="width: 180px; padding: 10px"
                        />
                      </td>
                      <td>
                        <ht-select
                          v-if="effects.linkageType == 'subTable'"
                          v-model="effects.targetSub"
                          :options="subTables"
                          clearable
                          :props="{key: 'name', value: 'desc'}"
                          style="width: 180px; margin: 0 20px"
                        />

                        <ht-select
                          v-if="effects.linkageType == 'field'"
                          v-model="effects.target"
                          :options="getEffectsTargetOptions()"
                          clearable
                          :filterable="true"
                          :props="{key: 'name', value: 'desc'}"
                          style="width: 180px; margin: 0 20px"
                        >
                          <template slot-scope="{options}">
                            <el-option-group
                              v-for="(group, idenx) in options"
                              :key="idenx"
                              :label="group.desc"
                            >
                              <el-option
                                v-for="item in group.children"
                                :key="item.id"
                                :label="item.desc"
                                :value="getEffectsTarget(group, item)"
                              ></el-option>
                            </el-option-group>
                          </template>
                        </ht-select>
                      </td>
                      <td>
                        <ht-select
                          v-model="effects.type"
                          :options="items"
                          style="width: 180px"
                        />
                      </td>
                      <td width="40px" style="text-align: center">
                        <el-button
                          type="text"
                          icon="el-icon-delete"
                          @click="column.effect.splice(index1, 1)"
                        ></el-button>
                      </td>
                      <!-- <td width="460px">
                        <div style="margin-left: 30px" class="basics-property">
                          <ValidataProperty
                            :data="effects.validateObj"
                            :boData.sync="mainBoFields"
                          />
                        </div>
                      </td> -->
                      <!-- <td width="120px" style="text-align: center"></td> -->
                    </tr>
                  </table>
                </td>
                <td width="100px">
                  <div style="display: flex; justify-content: center">
                    <el-button
                      class="btn-padding"
                      style="margin-left: 5px"
                      icon="el-icon-plus"
                      @click="addEffectObj(column.effect, effectObj)"
                    ></el-button>
                    <el-button
                      icon="el-icon-document-copy"
                      class="btn-padding"
                      @click="copyEffect(column)"
                    ></el-button>
                    <el-button
                      icon="el-icon-delete"
                      class="btn-padding"
                      @click="linkage.remove(column)"
                    ></el-button>
                  </div>
                </td>
              </tr>
            </tbody>
          </table>
        </div>

        <div slot="footer" class="dialog-footer">
          <el-button
            @click="
              dialogLinkageVisible = false
              linkage.length = 0
            "
            >取 消</el-button
          >
          <el-button type="primary" @click="linkageOk">确 定</el-button>
        </div>
      </el-dialog>
    </div>
    <!-- DIY组件属性 -->
    <template
      v-if="isBasicsProperty(field.options.basicsProperty, 'htCustomComponent')"
    >
      <ht-load-data
        url="/formCustomComponent/v1/getAll"
        requestMethod="post"
        context="form"
        @after-load-data="afterCustomComponentLoadData"
      ></ht-load-data>
      <ht-form-item
        label-width="110px"
        class="customQuery-inputs custDialog-item"
      >
        <template slot="label">
          <el-tooltip content="选择一个DIY组件">
            <i class="property-tip icon-question" />
          </el-tooltip>
          <span>选择DIY组件</span>
        </template>
        <ht-select
          validate="required"
          clearable
          filterable
          v-model="field.options.alias"
          :options="customComponents"
          :props="{key: 'alias', value: 'name'}"
        />
      </ht-form-item>
    </template>
    <template
      v-if="
        isBasicsProperty(field.options.basicsProperty, 'historicalApproval')
      "
    >
      <ht-form-item
        label-width="110px"
        class="customQuery-inputs custDialog-item"
      >
        <template slot="label">
          <span>排序规则</span>
        </template>
        <el-switch
          v-model="field.options.order"
          active-text="节点排序"
          inactive-text="时间排序"
        ></el-switch>
      </ht-form-item>
    </template>
    <!-- 复选单选 选项配置 choiceType -->
    <div
      v-show="isBasicsProperty(field.options.advancedProperty, 'choiceType')"
    >
      <ht-form-item label-width="100px" class="form-inline-item">
        <template slot="label">
          换行显示
          <el-tooltip content="是否换行显示">
            <i class="property-tip icon-notes" />
          </el-tooltip>
        </template>
        <el-switch v-model="field.options.inline"> </el-switch>
      </ht-form-item>
      <ht-form-item
        label="多选框可被勾选的最大数量"
        label-width="100px"
        v-if="field.ctrlType === 'checkbox'"
      >
        <template slot="label">
          <el-tooltip content="多选框可被勾选的最大数量">
            <span>多选框可被勾选的最大数量</span>
          </el-tooltip>
        </template>
        <ht-input
          validate="numeric"
          v-model="field.options.checkboxMax"
          :min="0"
          :max="99999"
          type="number"
          style="width:310px"
        ></ht-input>
      </ht-form-item>
      <ht-form-item label="选项配置" label-width="100px">
        <div class="radio4">
          <el-radio-group
            @change="dynamicClick"
            v-model="field.options.choiceType"
            size="small"
            style="margin-bottom: 10px"
          >
            <el-radio-button label="static">固定选项</el-radio-button>
            <el-radio-button label="dynamic">动态选项</el-radio-button>
          </el-radio-group>
        </div>
        <div
          v-if="field.options.choiceType == 'static'"
          style="margin-bottom: 10px"
        >
          <draggable
            tag="ul"
            class="column-ul autocomplete-list"
            :list="field.options.options"
            v-bind="{
              group: {name: 'options'},
              ghostClass: 'ghost',
              handle: '.drag-item'
            }"
            handle=".drag-item"
          >
            <li v-for="(data, index) in field.options.options" :key="index">
              <i class="drag-item icon-drag1"></i>
              <el-input
                size="mini"
                placeholder="选项值"
                v-model="data.key"
                @change="handleInputChange"
                style="width: 75px"
              ></el-input>
              <el-input
                size="mini"
                placeholder="选项标签"
                :title="data.value"
                v-model="data.value"
                style="width: 165px"
              >
                <el-button
                  icon="icon-guojihua"
                  slot="append"
                  style="width: 50px"
                  @click="optionEditI18n(data)"
                ></el-button>
              </el-input>
              <el-button
                @click="field.options.options.remove(data)"
                type="text"
                size="mini"
                >删除</el-button
              >
            </li>
          </draggable>

          <el-button
            style="width: 100%"
            type="primary"
            plain
            @click="field.options.options.push({key: '', value: ''})"
            size="small"
            class="style__tabs-btn"
            >添加选项</el-button
          >
        </div>
        <div
          v-if="field.options.choiceType == 'dynamic'"
          class="customQuery-inputs"
        >
          <div class="select-dialog-line">
            <ht-select
              filterable
              @change="setCurrentCustomQuery()"
              v-model="field.options.customQuery.alias"
              :options="customQuerys"
              :props="{key: 'alias', value: 'name'}"
            />
            <el-button
              icon="el-icon-refresh"
              @click="setCurrentCustomQuery('refresh')"
            ></el-button>
          </div>
        </div>
      </ht-form-item>
      <div
        v-if="field.options.choiceType == 'dynamic'"
        class="customQuery-inputs"
      >
        <ht-form-item
          label
          label-width
          v-if="field.options.bind && field.options.bind.length > 0"
          class="choiceType-bottom"
        >
          <template slot="label">
            <!-- 单选框 -->
            参数绑定
            <el-tooltip content="自定义查询需要的参数传入">
              <i class="property-tip icon-notes" />
            </el-tooltip>
          </template>
          <template>
            <table
              class="form-table custDialog-table"
              cellspacing="0"
              cellpadding="0"
              border="0"
            >
              <tbody>
                <tr class="linkageTable-tr linkageTable-title">
                  <td width="60px">参数名</td>
                  <td>取值对象</td>
                </tr>
                <tr
                  class="linkageTable-tr"
                  style="text-align: center"
                  v-for="(bind, indexBind) in field.options.bind"
                  :key="indexBind"
                >
                  <td class="table-first-col">{{ bind.comment }}</td>
                  <td>
                    <ht-select
                      clearable
                      v-model="bind.bindType"
                      :options="bindTypeOptions"
                      :props="{key: 'key', value: 'val'}"
                      @change="handleBindTypeChange(bind)"
                    />
                    <el-button
                      @click="showScriptDialog(bind)"
                      v-if="bind.bindType == 3"
                      type="text"
                      style="float: left"
                      >选择脚本
                      <i class="el-icon-search"></i>
                    </el-button>
                    <ht-input
                      v-model="bind.fieldPath"
                      type="textarea"
                      v-if="bind.bindType == 3"
                    >
                    </ht-input>
                    <ht-input
                      style="padding-top: 5px"
                      v-if="bind.bindType == 2"
                      v-model="bind.fieldPath"
                      placeholder="请输入内容"
                      autocomplete="off"
                    ></ht-input>
                    <ht-select
                      v-if="bind.bindType == 1"
                      v-model="bind.fieldPath"
                      :options="allBoData"
                      filterable
                      :props="{key: 'name', value: 'desc'}"
                    >
                      <template slot-scope="{options}">
                        <el-option-group
                          v-for="(group, idenx) in filterOptions(options)"
                          :key="idenx"
                          :label="group.desc"
                        >
                          <el-option
                            v-for="item in group.children"
                            :key="item.id"
                            :label="item.desc"
                            :value="'data.' + item.path + '.' + item.name"
                          ></el-option>
                        </el-option-group>
                      </template>
                    </ht-select>
                  </td>
                </tr>
              </tbody>
            </table>
          </template>
        </ht-form-item>
        <ht-form-item label label-width>
          <template slot="label">
            选项绑定
            <el-tooltip content="返回值作为选项时的绑定">
              <i class="property-tip icon-notes" />
            </el-tooltip>
          </template>
          <div class="mix_select_box" style="margin-bottom:8px">
            <span class="btn-pre">值</span>
            <ht-select
              v-model="field.options.customQuery.valueBind"
              :options="field.options.customQuery.resultfield"
              :props="{key: 'field', value: 'comment'}"
            />
          </div>
          <div class="mix_select_box">
            <span class="btn-pre">标签</span>
            <ht-select
              v-model="field.options.customQuery.labelBind"
              :options="field.options.customQuery.resultfield"
              :props="{key: 'field', value: 'comment'}"
            />
          </div>
        </ht-form-item>
      </div>
      <ht-form-item
        label="联动设置"
        label-width="100px"
        v-if="field.options.choiceType == 'static'"
      >
        <el-button
          icon="el-icon-setting"
          style="width: 100%"
          type="primary"
          plain
          @click="openLinkage"
          size="small"
          >联动设置</el-button
        >
      </ht-form-item>
      <el-dialog
        top="8vh"
        width="54%"
        title="字段联动设置"
        append-to-body
        class="urgent-text"
        :visible.sync="dialogLinkageVisible"
        :before-close="closeDialogLinkage"
        :close-on-click-modal="false"
      >
        <div style="width: 100%; overflow-x: auto">
          <el-button
            icon="el-icon-plus"
            size="mini"
            @click="addRows()"
            style="margin-bottom: 5px"
            plain
            >添加</el-button
          >
          <table class="form-table" cellspacing="0" cellpadding="0" border="0">
            <tbody>
              <tr class="linkageTable-tr">
                <td width="180px">所选值</td>
                <td width="180px">变换条件</td>
                <td width="180px">变换字段</td>
                <td width="180px">变换类型</td>
                <td width="100px">操作</td>
              </tr>

              <tr v-for="(column, index) in linkage" :key="index">
                <td width="180px">
                  <ht-select
                    v-model="column.value"
                    :filterable="true"
                    :options="field.options.options"
                    style="width: 180px"
                  />
                </td>
                <td colspan="3">
                  <table
                    cellspacing="0"
                    cellpadding="0"
                    border="0"
                    style="width: 100%"
                  >
                    <tr
                      v-for="(effects, index1) in column.effect"
                      :key="index1"
                    >
                      <td width="180px">
                        <ht-select
                          v-model="effects.linkageType"
                          :options="getLinkageTypeList(effects)"
                          clearable
                          @change="handleLinkageTypeChange(effects, index1)"
                          :props="{key: 'key', value: 'desc'}"
                          style="width: 180px; padding: 10px"
                        />
                      </td>
                      <td width="180px">
                        <ht-select
                          v-if="effects.linkageType == 'subTable'"
                          v-model="effects.targetSub"
                          :options="subTables"
                          :filterable="true"
                          clearable
                          :props="{key: 'name', value: 'desc'}"
                          style="width: 180px; margin: 0 20px"
                        />

                        <ht-select
                          v-if="effects.linkageType == 'field'"
                          v-model="effects.target"
                          filterable
                          :options="getEffectsTargetOptions()"
                          clearable
                          :props="{key: 'name', value: 'desc'}"
                          style="width: 180px; margin: 0 20px"
                        >
                          <template slot-scope="{options}">
                            <el-option-group
                              v-for="(group, idenx) in options"
                              :key="idenx"
                              :label="group.desc"
                            >
                              <el-option
                                v-for="item in group.children"
                                :key="item.id"
                                :label="item.desc"
                                :value="getEffectsTarget(group, item)"
                              ></el-option>
                            </el-option-group>
                          </template>
                        </ht-select>
                      </td>
                      <td width="150px">
                        <ht-select
                          v-model="effects.type"
                          :options="items"
                          clearable
                          style="width: 150px"
                        />
                      </td>
                      <td width="40px" style="text-align: center">
                        <el-button
                          type="text"
                          icon="el-icon-delete"
                          @click="column.effect.splice(index1, 1)"
                        ></el-button>
                      </td>
                    </tr>
                  </table>
                </td>
                <td width="100px">
                  <div style="display: flex; justify-content: center">
                    <el-button
                      class="btn-padding"
                      style="margin-left: 5px"
                      icon="el-icon-plus"
                      @click="column.effect.push({...effectObj})"
                    ></el-button>
                    <el-button
                      icon="el-icon-document-copy"
                      class="btn-padding"
                      @click="copyEffect(column)"
                    ></el-button>
                    <el-button
                      icon="el-icon-delete"
                      class="btn-padding"
                      @click="linkage.remove(column)"
                    ></el-button>
                  </div>
                </td>
              </tr>
            </tbody>
          </table>
        </div>

        <div slot="footer" class="dialog-footer">
          <el-button @click="closeDialogLinkage">取 消</el-button>
          <el-button type="primary" @click="linkageOk">确 定</el-button>
        </div>
      </el-dialog>
    </div>

    <!-- 是否分页显示 目前只有相关流程用到  isPaging-->
    <!-- <template v-if="isBasicsProperty(field.options.basicsProperty, 'isPaging')">
      <ht-form-item label-width="100px">
        <el-checkbox v-model="field.options.isPaging">是否分页</el-checkbox>
        <span style="margin-left:96px"></span>
        <ht-form-item
          v-if="field.options.isPaging"
          label="分页大小"
          label-width="100px"
        >
          <el-input-number
            v-model="field.options.pageSize"
            placeholder="分页大小"
            controls-position="right"
            :min="10"
            :max="1000"
            :step="10"
          ></el-input-number>
        </ht-form-item>
      </ht-form-item>
    </template>-->
    <!-- 选择器设置  selector-->
    <template v-if="isBasicsProperty(field.options.basicsProperty, 'selector')">
      <ht-form-item
        label-width="100px"
        label="选择器设置"
        class="customQuery-inputs"
      >
        <div class="isSingle-class">
          <el-radio-group
            v-if="field.options.selector.type.alias"
            v-model="field.options.selector.isSingle"
            size="mini"
          >
            <el-radio-button :label="true">单选</el-radio-button>
            <el-radio-button :label="false">多选</el-radio-button>
          </el-radio-group>
        </div>

        <ht-select
          @change="changeFieldBind"
          v-model="field.options.selector.type.alias"
          :options="selectors"
          validate="required"
          :props="{key: 'alias', value: 'name'}"
        />
      </ht-form-item>
      <ht-form-item
        v-if="false"
        label="选择范围设置"
        label-width="100px"
        v-show="isShowOrgSelector"
      >
        <ht-org-selector-input
          v-model="field.options.org"
          :appendToBody="true"
          name="org"
          @select-data="handleSelected"
        ></ht-org-selector-input>
      </ht-form-item>
      <ht-form-item
        label="当前用户"
        :key="`${field.key}_user`"
        v-if="'eip-user-selector' == field.options.selector.type.alias"
      >
        <el-checkbox v-model="field.options.selector.selectCurrent"
          >当前用户</el-checkbox
        >
      </ht-form-item>
      <ht-form-item
        label="当前组织"
        :key="`${field.key}_org`"
        v-if="'eip-org-selector' == field.options.selector.type.alias"
      >
        <el-checkbox v-model="field.options.selector.selectCurrent"
          >当前组织</el-checkbox
        >
      </ht-form-item>
      <ht-form-item
        label="当前岗位"
        :key="`${field.key}_post`"
        v-if="'eip-post-selector' == field.options.selector.type.alias"
      >
        <el-checkbox v-model="field.options.selector.selectCurrent"
          >当前岗位</el-checkbox
        >
      </ht-form-item>
      <template
        v-if="
          [
            'eip-user-selector',
            'eip-org-selector',
            'eip-post-selector'
          ].includes(field.options.selector.type.alias)
        "
      >
        <ht-form-item label="限定选择范围" :key="field.key">
          <el-radio-group
            v-model="field.options.limitSelectionRange"
            @change="handleLimitRange"
          >
            <el-radio :label="true">是</el-radio>
            <el-radio :label="false">否</el-radio>
          </el-radio-group>
        </ht-form-item>
        <template v-if="field.options.limitSelectionRange">
          <ht-form-item label="按组织" class="horizontal-form-item">
            <template slot="label">
              <el-radio
                :key="field.key"
                v-model="field.options.range.type"
                label="org"
                @change="handleRangeTypeChange"
                >按组织</el-radio
              >
            </template>
            <custom-select-tree
              ref="selectTree"
              :key="field.key"
              :treeData="orgTreeData"
              multiple
              showCheckbox
              :selectedOrg="selectedOrg"
              :disabled="field.options.range.type !== 'org'"
              @check="handleChecked"
            ></custom-select-tree>
          </ht-form-item>
          <ht-form-item
            label="按策略"
            class="horizontal-form-item hide-validate-start"
          >
            <template slot="label">
              <el-radio
                :key="field.key"
                v-model="field.options.range.type"
                label="policy"
                @change="handleRangeTypeChange"
                >按策略</el-radio
              >
            </template>
            <ht-select
              :key="field.key"
              v-model="field.options.range.policy"
              style="width:100%"
              :disabled="field.options.range.type !== 'policy'"
              clearable
              :options="policyOptions"
              :validate="
                field.options.range.type === 'policy' ? 'required' : ''
              "
              :props="{key: 'value', value: 'label'}"
            >
            </ht-select>
          </ht-form-item>
          <ht-form-item
            label="按角色"
            class="horizontal-form-item hide-validate-start"
            v-if="'eip-user-selector' == field.options.selector.type.alias"
          >
            <template slot="label">
              <el-radio
                :key="field.key"
                v-model="field.options.range.type"
                label="role"
                @change="handleRangeTypeChange"
                >按角色</el-radio
              >
            </template>
            <ht-select
              :key="field.key"
              v-model="field.options.range.roles"
              :disabled="field.options.range.type !== 'role'"
              clearable
              multiple
              :collapse-tags="collapseTags"
              style="width:100%"
              class="role-select"
              ref="roleSelect"
              :options="roleOptions"
              :validate="field.options.range.type === 'role' ? 'required' : ''"
              :props="{key: 'code', value: 'name'}"
              @visible-change="handleVisibleChange"
              @change="handleRoleChange"
              @remove-tag="handleRemoveTag"
              @clear="clear"
            >
            </ht-select>
          </ht-form-item>
        </template>
      </template>
      <template v-if="field.options.bind && field.options.bind.length > 0">
        <div class="selector-return">
          <span>返回值</span>
          <el-tooltip
            content="选择器的返回值绑定的属性，选择器控件绑定的属性不能作为返回值绑定"
          >
            <i class="property-tip icon-notes" />
          </el-tooltip>
        </div>
        <ht-form-item v-for="(bind, index) in field.options.bind" :key="index">
          <div class="mix_select_box">
            <span class="btn-pre">{{ bind.value }}</span>
            <!-- 主表选择器 -->
            <ht-select
              v-if="!field.parentNodeType"
              v-model="bind.jsonPath"
              :options="allBoData.filter(tab => tab.type == 'main')"
              :props="{key: 'name', value: 'desc'}"
              clearable
              filterable
            >
              <template slot-scope="{options}">
                <el-option key="0" label="请选择" :value="''" />
                <el-option-group
                  v-for="(group, idenx) in options"
                  :key="Math.random() + idenx"
                  :label="group.desc"
                >
                  <el-option
                    v-for="item in group.children"
                    :disabled="item.name == field.name"
                    :key="item.id"
                    :label="item.desc"
                    :value="item.path + '.' + item.name"
                  ></el-option>
                </el-option-group>
              </template>
            </ht-select>
            <!-- 子表选择器 -->
            <ht-select
              v-if="field.parentNodeType && field.parentNodeType == 'sub'"
              v-model="bind.jsonPath"
              :options="
                allBoData.filter(
                  tab => tab.nodeType == 'sub' && tab.name == field.tableName
                )
              "
              :props="{key: 'name', value: 'desc'}"
              clearable
              filterable
            >
              <template slot-scope="{options}">
                <el-option key="0" label="请选择" :value="''" />
                <el-option-group
                  v-for="(group, idenx) in options"
                  :key="Math.random() + idenx"
                  :label="group.desc"
                >
                  <el-option
                    v-for="item in group.children"
                    :disabled="item.name == field.name"
                    :key="item.id"
                    :label="item.desc"
                    :value="item.path + '.' + item.name"
                  ></el-option>
                </el-option-group>
              </template>
            </ht-select>
            <!-- 孙表选择器 -->
            <ht-select
              v-if="field.parentNodeType && field.parentNodeType == 'sun'"
              v-model="bind.jsonPath"
              :options="allBoData.filter(item => item.show === '孙实体')"
              :props="{key: 'name', value: 'desc'}"
              clearable
              filterable
            >
              <template slot-scope="{options}">
                <el-option key="0" label="请选择" :value="''" />
                <el-option-group
                  v-for="(group, idenx) in options"
                  :key="Math.random() + idenx"
                  :label="group.desc"
                >
                  <el-option
                    v-for="item in group.children"
                    :disabled="item.name == field.name"
                    :key="item.id"
                    :label="item.desc"
                    :value="item.path + '.' + item.name"
                  ></el-option>
                </el-option-group>
              </template>
            </ht-select>
          </div>
        </ht-form-item>
      </template>
    </template>

    <!-- 对话框基本属性  custDialog -->
    <template
      v-if="isBasicsProperty(field.options.basicsProperty, 'custDialog')"
    >
      <ht-form-item
        v-if="formType == 'pc'"
        label-width="100px"
        class="form-inline-item"
      >
        <template slot="label">
          允许手动输入
          <el-tooltip
            content="设置允许输入，点击对话框左边会变成可编辑，点右边图标时弹出下拉框，下拉框选中后覆盖当前值"
          >
            <i class="property-tip icon-notes" />
          </el-tooltip>
        </template>
        <el-switch v-model="field.options.customDialogjson.allowInput"
          >允许手动输入</el-switch
        >
      </ht-form-item>
      <ht-form-item label="按钮名称/图标" label-width="100px">
        <div style="display: flex; justify-content: start">
          <ht-input v-model="field.options.customDialogjson.name"></ht-input>
          <div class="icon-selected">
            <div class="icon">图标</div>
            <div class="icon-box" @click="iconSelected('custDialog')">
              <i :class="field.options.customDialogjson.icon"></i>
            </div>
            <i
              class="el-icon-caret-bottom"
              @click="iconSelected('custDialog')"
            ></i>
            <!-- 图标 -->
            <IconDialog @selected="icons" ref="custDialog" v-show="false" />
          </div>
        </div>
      </ht-form-item>
      <ht-form-item label-width="100px">
        <template slot="label">
          选择对话框
          <el-tooltip
            content="所选择的自定义查询作为选项时的绑定,对话框配置发生变更，需点击【刷新】更新配置后保存表单才能生效。"
          >
            <i class="icon-notes" />
          </el-tooltip>
        </template>
        <div class="select-dialog-line">
          <ht-select
            clearable
            filterable
            @change="changeCustDialog"
            v-model="field.options.customDialogjson.custDialog.alias"
            :options="customDialogs"
            :props="{key: 'alias', value: 'name'}"
          />
          <el-button
            icon="el-icon-refresh"
            @click="refreshDialogConfig"
          ></el-button>
        </div>
      </ht-form-item>
      <div
        v-if="
          field.options.customDialogjson.custDialog.conditions &&
            field.options.customDialogjson.custDialog.conditions.length > 0
        "
        class="params-box"
      >
        <ht-form-item label label-width>
          <template slot="label">
            参数绑定
            <el-tooltip content="自定义对话框需要的参数传入">
              <i class="property-tip icon-notes" />
            </el-tooltip>
          </template>
          <table
            v-if="
              field.options.customDialogjson.custDialog.conditions &&
                field.options.customDialogjson.custDialog.conditions.length > 0
            "
            class="form-table custDialog-table"
            cellspacing="0"
            cellpadding="0"
            border="0"
          >
            <tbody>
              <tr class="linkageTable-tr linkageTable-title">
                <td>参数名</td>
                <td>取值对象</td>
              </tr>
              <tr
                class="linkageTable-tr"
                v-for="(condition, indexCondition) in field.options
                  .customDialogjson.custDialog.conditions"
                :key="indexCondition"
              >
                <td class="table-first-col">{{ condition.comment }}</td>
                <td>
                  <ht-select
                    clearable
                    v-model="condition.bindType"
                    :options="bindTypeOptions"
                    :props="{key: 'key', value: 'val'}"
                    @change="val => handleDialogConfigChange(val, condition)"
                  />
                  <el-button
                    @click="showScriptDialog(condition, 'dialog')"
                    v-if="condition.bindType == 3"
                    type="text"
                    style="float: left"
                    >选择脚本
                    <i class="el-icon-search"></i>
                  </el-button>
                  <ht-input
                    v-model="condition.bind"
                    type="textarea"
                    v-if="condition.bindType == 3"
                  >
                  </ht-input>
                  <ht-input
                    style="padding-top: 5px"
                    v-if="condition.bindType == 2"
                    v-model="condition.bind"
                    placeholder="请输入内容"
                    autocomplete="off"
                  ></ht-input>
                  <ht-select
                    clearable
                    style="padding-top: 5px"
                    v-if="condition.bindType == 1"
                    v-model="condition.bind"
                    filterable
                    :options="customDialogParamOption"
                    :props="{key: 'name', value: 'desc'}"
                  >
                    <template slot-scope="{options}">
                      <el-option-group
                        v-for="(group, idenxOptions) in options"
                        :key="idenxOptions"
                        :label="group.desc"
                      >
                        <el-option
                          v-for="item in group.children"
                          :key="item.id"
                          :label="item.desc"
                          :value="'data.' + item.path + '.' + item.name"
                        ></el-option>
                      </el-option-group>
                    </template>
                  </ht-select>
                </td>
              </tr>
            </tbody>
          </table>
        </ht-form-item>
      </div>
      <el-button
        style="width: 100%; margin-top: 5px; margin-bottom: 5px"
        class="custDialog-btn"
        v-if="field.options.customDialogjson.custDialog.alias"
        icon="el-icon-setting"
        size="small"
        type="primary"
        plain
        @click="custDialogClick"
        >设置返回值</el-button
      >
      <!-- 对话框绑定关联查询 -->
      <!-- <el-button
        style="width: 100%; margin-top: 5px; margin-left: 0px !important"
        class="custDialog-btn"
        icon="icon-list2"
        size="mini"
        v-if="field.options.customDialogjson.custDialog.selectNum == '1'"
        @click="showDialogQuery"
        >绑定关联查询</el-button
      > -->
      <el-dialog
        title="对话框添加关联查询"
        width="60%"
        append-to-body
        top="8vh"
        :visible.sync="dialogQuery"
        :close-on-click-modal="false"
      >
        <el-button
          class="btn-padding"
          icon="el-icon-plus"
          style="margin-bottom: 5px"
          @click="
            field.options.customDialogjson.custDialog.custQueryJson.push({})
          "
          >添加关联查询</el-button
        >
        <div style="width: 100%; height: 550px; overflow: auto">
          <div
            v-for="(condition, indexCondition) in field.options.customDialogjson
              .custDialog.custQueryJson"
            :key="indexCondition"
          >
            <table
              class="form-table choiceType-table"
              style="margin-bottom: 1px"
              cellspacing="0"
              cellpadding="0"
              border="0"
            >
              <tbody>
                <tr>
                  <th width="110px">关联查询:</th>
                  <td>
                    <ht-select
                      clearable
                      @change="setDialogQuery(condition.alias, indexCondition)"
                      v-model="condition.alias"
                      :options="customQuerys"
                      :props="{key: 'alias', value: 'name'}"
                    />
                    <el-button
                      class="btn-padding"
                      icon="el-icon-delete"
                      style="margin-left: 10px"
                      @click="
                        field.options.customDialogjson.custDialog.custQueryJson.remove(
                          condition
                        )
                      "
                    ></el-button>
                  </td>
                </tr>
              </tbody>
            </table>
            <el-tabs type="border-card" style="margin-bottom: 20px">
              <el-tab-pane label="参数绑定">
                <table
                  class="form-table choiceType-table"
                  cellspacing="0"
                  cellpadding="0"
                  border="0"
                >
                  <tbody>
                    <tr
                      v-for="(bind, indexBind) in field.options.customDialogjson
                        .custDialog.custQueryJson[indexCondition]
                        .conditionfield"
                      :key="indexBind"
                    >
                      <th width="110px">{{ bind.comment }}:</th>
                      <td>
                        <ht-select
                          clearable
                          v-model="bind.fieldPath"
                          :options="returnData"
                          :props="{key: 'name', value: 'desc'}"
                        >
                          <template slot-scope="{options}">
                            <el-option-group
                              v-for="(group, idenxOptions) in options"
                              :key="idenxOptions"
                              :label="group.desc"
                            >
                              <el-option
                                v-for="item in group.children"
                                :key="item.id"
                                :label="item.desc"
                                :value="'data.' + item.path + '.' + item.name"
                              ></el-option>
                            </el-option-group>
                          </template>
                        </ht-select>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </el-tab-pane>
              <el-tab-pane label="设置返回值">
                <table
                  class="form-table choiceType-table"
                  cellspacing="0"
                  cellpadding="0"
                  border="0"
                >
                  <tbody>
                    <tr
                      v-for="(bind, indexBind) in field.options.customDialogjson
                        .custDialog.custQueryJson[indexCondition].resultfield"
                      :key="indexBind"
                    >
                      <th width="110px">{{ bind.comment }}:</th>
                      <td>
                        <ht-select
                          clearable
                          v-model="bind.fieldPath"
                          :options="returnData"
                          :props="{key: 'name', value: 'desc'}"
                        >
                          <template slot-scope="{options}">
                            <el-option-group
                              v-for="(group, idenxOptions) in options"
                              :key="idenxOptions"
                              :label="group.desc"
                            >
                              <el-option
                                v-for="item in group.children"
                                :key="item.id"
                                :label="item.desc"
                                :value="'data.' + item.path + '.' + item.name"
                              ></el-option>
                            </el-option-group>
                          </template>
                        </ht-select>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </el-tab-pane>
            </el-tabs>
          </div>
        </div>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="dialogQuery = false" size="small"
            >确 定</el-button
          >
        </div>
      </el-dialog>
      <!-- 获取对话框选项列表-->
      <ht-load-data
        url="/form/customDialog/v1/getAll"
        requestMethod="get"
        context="form"
        ref="htLoadData"
        @after-load-data="afterCustomDialogLoadData"
      ></ht-load-data>
      <el-dialog
        title="设置对话框返回值"
        v-if="dialogcustDialogVisible"
        :visible.sync="dialogcustDialogVisible"
        append-to-body
        class="urgent-text"
        :close-on-click-modal="false"
        width="800px"
      >
        <table class="form-table" cellspacing="0" cellpadding="0" border="0">
          <tbody>
            <tr class="linkageTable-th">
              <td width="200px">返回结果字段</td>
              <td width="250px">绑定显示的属性</td>
              <td>回填模式</td>
            </tr>

            <tr
              class="linkageTable-tr"
              v-for="(field, index) in field.options.customDialogjson
                .resultField"
              :key="index"
            >
              <td>{{ field.comment }}</td>
              <td>
                <ht-select
                  v-model="custDialogprop[field.comment]"
                  :options="mainBoFields"
                  :props="{key: 'name', value: 'desc'}"
                  clearable
                  filterable
                  @change="updateCustDialogprop()"
                >
                  <template slot-scope="{options}">
                    <el-option-group
                      v-for="(group, idenx) in options"
                      :key="idenx"
                      :label="group.desc"
                    >
                      <el-option
                        v-for="item in group.children"
                        :key="item.id"
                        :label="item.desc"
                        :value="item.path + '.' + item.name"
                      ></el-option>
                    </el-option-group>
                  </template>
                </ht-select>
              </td>
              <td>
                <ht-radio
                  v-model="field.fillBackType"
                  @change="$forceUpdate()"
                  :options="[
                    {key: 1, value: '覆盖回填'},
                    {key: 2, value: '有值不覆盖'}
                  ]"
                  style="width:100%"
                  optionLayout="horizontal"
                />
              </td>
            </tr>
          </tbody>
        </table>
        <div slot="footer" class="dialog-footer">
          <el-button @click="closeCustDialog">取 消</el-button>
          <el-button type="primary" @click="custDialogOk">确 定</el-button>
        </div>
      </el-dialog>
    </template>

    <!-- 关联数据设置  relation -->
    <template v-if="isBasicsProperty(field.options.basicsProperty, 'relation')">
      <div class="custDialog-div">
        <span>关联数据设置</span>
        <el-button
          class="custDialog-btn"
          v-if="field.options.customQuery.alias"
          icon="el-icon-setting"
          size="small"
          type="primary"
          plain
          @click="custDialogClick"
          >设置返回值</el-button
        >
      </div>
      <div
        class="customQuery-inputs custDialog-item"
        style="margin-right: 15px"
      >
        <ht-select
          clearable
          @change="setCurrentCustomQuery()"
          v-model="field.options.customQuery.alias"
          :options="customQuerys"
          :props="{key: 'alias', value: 'name'}"
        />
      </div>
      <ht-form-item
        label
        label-width
        v-if="field.options.bind && field.options.bind.length > 0"
        class="basics-property"
      >
        <template slot="label">
          参数绑定
          <el-tooltip content="自定义查询需要的参数传入">
            <i class="property-tip icon-notes" />
          </el-tooltip>
        </template>
        <ht-form-item
          :label="bind.comment"
          label-width="80px"
          class="customQuery-inputs"
          v-for="(bind, index) in field.options.bind"
          :key="index"
        >
          <ht-select
            clearable
            v-model="bind.fieldPath"
            :options="allBoData"
            :props="{key: 'name', value: 'desc'}"
          >
            <template slot-scope="{options}">
              <el-option-group
                v-for="(group, idenx) in options"
                :key="idenx"
                :label="group.desc"
              >
                <el-option
                  v-for="item in group.children"
                  :key="item.id"
                  :label="item.desc"
                  :value="'data.' + item.path + '.' + item.name"
                ></el-option>
              </el-option-group>
            </template>
          </ht-select>
        </ht-form-item>
      </ht-form-item>
      <ht-form-item label label-width class="basics-property">
        <template slot="label">
          选项绑定
          <el-tooltip content="返回值作为选项时的绑定">
            <i class="property-tip icon-notes" />
          </el-tooltip>
        </template>
        <ht-form-item label="值" label-width="37px" class="customQuery-inputs">
          <ht-select
            :validate="{required: true}"
            clearable
            style="width: 103px"
            v-model="field.options.customQuery.valueBind"
            :options="field.options.customQuery.resultfield"
            :props="{key: 'field', value: 'comment'}"
          />
        </ht-form-item>
        <ht-form-item
          label="标签"
          label-width="50px"
          class="customQuery-inputs"
        >
          <ht-select
            :validate="{required: true}"
            clearable
            style="width: 110px"
            v-model="field.options.customQuery.labelBind"
            :options="field.options.customQuery.resultfield"
            :props="{key: 'field', value: 'comment'}"
          />
        </ht-form-item>
      </ht-form-item>

      <el-dialog
        title="设置关联数据返回值"
        :visible.sync="dialogcustDialogVisible"
        append-to-body
        class="urgent-text"
        :close-on-click-modal="false"
        width="600px"
      >
        <table class="form-table" cellspacing="0" cellpadding="0" border="0">
          <tbody>
            <tr class="linkageTable-tr">
              <td width="150px">返回结果字段</td>
              <td width="220px">绑定显示的属性</td>
              <td width="80px">解除绑定</td>
            </tr>

            <tr
              class="linkageTable-tr"
              v-for="(field, index) in field.options.customQuery.resultfield"
              :key="index"
            >
              <td>{{ field.comment }}</td>
              <td>
                <ht-select
                  v-model="custDialogprop[field.comment]"
                  :options="allBoData"
                  :props="{key: 'name', value: 'desc'}"
                >
                  <template slot-scope="{options}">
                    <el-option-group
                      v-for="(group, idenx) in options"
                      :key="idenx"
                      :label="group.desc"
                    >
                      <el-option
                        v-for="item in group.children"
                        :key="item.id"
                        :label="item.desc"
                        :value="item.tableName + '.' + item.name"
                      ></el-option>
                    </el-option-group>
                  </template>
                </ht-select>
              </td>
              <td>
                <el-button
                  icon="el-icon-delete"
                  @click="unbind(field.comment)"
                ></el-button>
              </td>
            </tr>
          </tbody>
        </table>

        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogcustDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="custDialogOk">确 定</el-button>
        </div>
      </el-dialog>
    </template>

    <!-- 文件上传 fileupload -->
    <template
      v-if="isBasicsProperty(field.options.basicsProperty, 'fileupload')"
    >
      <ht-form-item label="文件上传配置" class="custDialog-item">
        <el-checkbox v-model="field.options.file.multiple">
          多选
          <el-tooltip content="是否可同时选择多个文件上传">
            <i class="property-tip icon-notes" />
          </el-tooltip>
        </el-checkbox>
        <el-checkbox
          v-model="field.options.file.simplicity"
          v-if="formType !== 'mobile'"
        >
          简版
          <el-tooltip content="附件上传后以简约方法显示">
            <i class="property-tip icon-notes" />
          </el-tooltip>
        </el-checkbox>
      </ht-form-item>
      <ht-form-item label="最多上传个数" label-width="100px">
        <el-input-number
          style="width: 100%"
          v-model="field.options.file.limit"
          value="5"
          placeholder="最多上传个数"
          controls-position="right"
          :min="1"
          :max="20"
        ></el-input-number>
      </ht-form-item>
      <ht-form-item label="限制大小（M）" label-width="100px">
        <el-input-number
          style="width: 100%"
          v-model="field.options.file.size"
          value="50"
          placeholder="单个文件限制大小（M）"
          controls-position="right"
          :min="1"
          :max="1024"
        ></el-input-number>
      </ht-form-item>
      <ht-form-item label="支持的类型">
        <div class="radio4">
          <el-radio-group v-model="field.options.file.acceptType">
            <el-radio-button label="any">任意类型</el-radio-button>
            <el-radio-button label="custom">自定义类型</el-radio-button>
          </el-radio-group>
        </div>
      </ht-form-item>
      <ht-form-item v-if="field.options.file.acceptType == 'custom'">
        <template slot="label">
          选择类型
          <el-tooltip>
            <i class="property-tip icon-notes" />
            <div slot="content">
              全不选,可上传任意类型
            </div>
          </el-tooltip>
        </template>
        <div
          v-if="field.options.file.acceptType == 'custom'"
          style="position: absolute; top: -40px; right: 0"
        >
          <el-button-group>
            <el-button
              :class="{changeColor: typeFieldActive === 'qx'}"
              type="primary"
              plain
              size="mini"
              @click="selectAll"
              >全选</el-button
            >
            <el-button
              :class="{changeColor: typeFieldActive === 'qbx'}"
              type="primary"
              plain
              size="mini"
              @click="selectNotAll"
              >全不选</el-button
            >
            <el-button type="primary" plain size="mini" @click="counterSelect"
              >反选</el-button
            >
          </el-button-group>
        </div>

        <el-checkbox
          v-model="upLoadAcceptItemCheck.doc"
          @change="handleCheckAllChange('doc')"
          :indeterminate="indeterminateMeth('doc')"
          >文档类型</el-checkbox
        >
        <el-checkbox-group
          v-if="field.options.file.acceptType == 'custom'"
          v-model="field.options.file.accept"
          class="file-checkbox"
        >
          <el-checkbox
            v-for="accept in upLoadAcceptList.doc"
            :label="accept"
            :key="accept"
            >{{ accept }}</el-checkbox
          >
        </el-checkbox-group>
        <el-checkbox
          v-model="upLoadAcceptItemCheck.img"
          @change="handleCheckAllChange('img')"
          :indeterminate="indeterminateMeth('img')"
          >图片类型</el-checkbox
        >
        <el-checkbox-group
          v-if="field.options.file.acceptType == 'custom'"
          v-model="field.options.file.accept"
          class="file-checkbox"
        >
          <el-checkbox
            v-for="accept in upLoadAcceptList.img"
            :label="accept"
            :key="accept"
            >{{ accept }}</el-checkbox
          >
        </el-checkbox-group>
        <el-checkbox
          v-model="upLoadAcceptItemCheck.vido"
          @change="handleCheckAllChange('vido')"
          :indeterminate="indeterminateMeth('vido')"
          >视频类型</el-checkbox
        >
        <el-checkbox-group
          v-if="field.options.file.acceptType == 'custom'"
          v-model="field.options.file.accept"
          class="file-checkbox"
        >
          <el-checkbox
            v-for="accept in upLoadAcceptList.vido"
            :label="accept"
            :key="accept"
            >{{ accept }}</el-checkbox
          >
        </el-checkbox-group>
      </ht-form-item>
      <ht-form-item v-if="field.options.file.acceptType == 'custom'">
        <template slot="label">
          扩展类型
          <el-tooltip>
            <i class="property-tip icon-notes" />
            <div slot="content">
              配置扩展类型的后缀名，多个用逗号隔开，如：DOC,DOCX。
              <br />同步维护到后端部署包对应配置文件中的属性eip.allowFileSuffix，作为支持的文件后缀白名单
            </div>
          </el-tooltip>
        </template>
        <ht-input
          type="textarea"
          :rows="5"
          style="width: 100%"
          v-model="field.options.file.acceptStr"
        ></ht-input>
      </ht-form-item>
      <!-- <H3 style="margin-bottom: 0px;">附件扩展属性配置</H3> -->
      <ht-form-item>
        <template slot="label">
          附件拓展
          <el-tooltip content="附件拓展属性配置">
            <i class="property-tip icon-notes" />
          </el-tooltip>
        </template>
        <div v-for="(conf, index) in field.options.propConf" :key="index">
          <div style="display: flex; margin-bottom: 10px">
            <el-input v-model="conf.desc"
              ><template slot="prepend">{{ conf.name }}</template></el-input
            >
            <el-checkbox v-model="conf.requried" style="margin-left: 15px"
              >必填</el-checkbox
            >
          </div>
        </div>
      </ht-form-item>
    </template>

    <!-- officeupload上传 officeupload -->
    <template
      v-if="isBasicsProperty(field.options.basicsProperty, 'officesign')"
    >
      <ht-form-item label="是否多选">
        <el-checkbox v-model="field.options.file.multiple">
          是否多选
          <el-tooltip content="是否可同时选择多个文件上传">
            <i class="property-tip icon-notes" />
          </el-tooltip>
        </el-checkbox>
      </ht-form-item>
      <ht-form-item label="最多上传个数" label-width="100px">
        <el-input-number
          style="width: 100%"
          v-model="field.options.file.limit"
          value="5"
          placeholder="最多上传个数"
          controls-position="right"
          :min="1"
          :max="20"
        ></el-input-number>
      </ht-form-item>
      <ht-form-item
        class="custDialog-item"
        label="限制大小（M）"
        label-width="100px"
      >
        <el-input-number
          style="width: 200px"
          v-model="field.options.file.size"
          value="50"
          placeholder="单个文件限制大小（M）"
          controls-position="right"
          :min="1"
          :max="1024"
        ></el-input-number>
      </ht-form-item>
    </template>

    <!--属性文本内容 textValue -->
    <template
      v-if="isBasicsProperty(field.options.basicsProperty, 'property-text')"
    >
      <ht-form-item label="是否显示边框" label-width="100px">
        <el-radio v-model="field.options.isShowBorder" :label="1">是</el-radio>
        <el-radio v-model="field.options.isShowBorder" :label="0">否</el-radio>
      </ht-form-item>
      <ht-form-item
        label="设置边框颜色"
        label-width="100px"
        v-if="field.options.isShowBorder == SHOW"
      >
        <el-color-picker
          v-model="field.options.borderColor"
          size="mini"
        ></el-color-picker>
      </ht-form-item>
      <ht-form-item label="文本内容">
        <el-button @click="textPropertyClick">属性文本内容</el-button>
      </ht-form-item>
      <el-dialog
        title="属性文本内容"
        :visible.sync="dialogPropertyVisible"
        append-to-body
        class="urgent-text"
        :close-on-click-modal="false"
        width="60%"
        v-if="dialogPropertyVisible"
      >
        <FormVarSelector
          type="1"
          :boData="formVarData"
          @node-click="textClick"
        />
        <!--<el-tag type="warning" style="margin-left: 30px">
          <span v-pre>在子表中使用当前行数据的其他字段时，请修改为{{ item.字段名 }}</span>
        </el-tag>-->
        <vue-ueditor-wrap
          v-model="textValue"
          :config="config"
        ></vue-ueditor-wrap>
        <div slot="footer" class="dialog-footer">
          <el-button
            @click="
              dialogPropertyVisible = false
              textValue = ''
            "
            >取 消</el-button
          >
          <el-button
            type="primary"
            @click="
              dialogPropertyVisible = false
              field.options.textValue = textValue
            "
            >确 定</el-button
          >
        </div>
      </el-dialog>
    </template>

    <!--文本内容 textValue -->
    <template
      v-if="isBasicsProperty(field.options.basicsProperty, 'textValue')"
    >
      <!--<ht-form-item
        label-width="50px"
        class="custDialog-item"
        label="字段"
      >
        <ht-input v-model="field.name" validate="alpha_num"></ht-input>
      </ht-form-item>-->
      <ht-form-item label="是否显示边框" label-width="100px">
        <el-radio v-model="field.options.isShowBorder" label="0">是</el-radio>
        <el-radio v-model="field.options.isShowBorder" label="1">否</el-radio>
      </ht-form-item>
      <ht-form-item
        label="设置边框颜色"
        label-width="100px"
        v-if="field.options.isShowBorder == 0"
      >
        <el-color-picker
          v-model="field.options.borderColor"
          size="mini"
        ></el-color-picker>
      </ht-form-item>
      <ht-form-item label="文本内容">
        <el-button
          @click="
            textValue = field.options.textValue
            dialogTextVisible = true
          "
          >文本内容</el-button
        >
      </ht-form-item>
    </template>
    <el-dialog
      title="文本内容"
      :visible.sync="dialogTextVisible"
      append-to-body
      class="urgent-text"
      :close-on-click-modal="false"
      width="60%"
    >
      <FormVarSelector type="1" :boData="allBoData" @node-click="textClick" />
      <vue-ueditor-wrap v-model="textValue" :config="config"></vue-ueditor-wrap>
      <div slot="footer" class="dialog-footer">
        <el-button
          @click="
            dialogTextVisible = false
            textValue = ''
          "
          >取 消</el-button
        >
        <el-button
          type="primary"
          @click="
            dialogTextVisible = false
            field.options.textValue = textValue
          "
          >确 定</el-button
        >
      </div>
    </el-dialog>

    <!-- 日期基本属性 -->
    <template v-if="isBasicsProperty(field.options.basicsProperty, 'date')">
      <ht-form-item
        label="指定日期输入框的格式"
        label-width
        title="指定日期输入框的格式"
      >
        <ht-select
          :options="setOptionsByFormat(field.options.format)"
          :disabled="disabledSelect"
          v-model="field.options.inputFormat"
          style="width: 100%"
          placeholder="请选择日期格式"
          @change="handleSelectChange"
        />
      </ht-form-item>
    </template>

    <template v-if="isBasicsProperty(field.options.basicsProperty, 'time')">
      <ht-form-item label="时间设置" label-width>
        <div class="radio4">
          <el-radio-group v-model="field.options.type">
            <el-radio-button label="select" title="时间不包含年月日"
              >固定时间点</el-radio-button
            >
            <el-radio-button label="picker" title="时间包含当前年月日"
              >任意时间点</el-radio-button
            >
          </el-radio-group>
        </div>
      </ht-form-item>
    </template>
    <!-- 公式计算 -->
    <div
      v-if="
        field.options.formulasDiyJs !== undefined &&
          !(
            field.ctrlType == 'button' &&
            field.options.bindEventjson &&
            field.options.bindEventjson.isShowInput == false
          ) &&
          field.ctrlType !== 'property-text' &&
          field.ctrlType !== 'switch' &&
          field.ctrlType !== 'richText'
      "
    >
      <template>
        <ht-form-item
          label="默认值"
          label-width="100px"
          style="margin-top: 10px"
        >
          <el-select
            v-model="field.options.custDefaultSelectVal"
            clearable
            style="width: 100%"
            @change="handleChange"
          >
            <el-option
              v-for="item in defaultOptionsFilter"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
          <div class="default-operate">
            <div v-if="field.options.custDefaultSelectVal === 'custom'">
              <el-input-number
                v-model="field.options.formulasDiyJs"
                :min="0"
                style="width: 310px"
                v-if="field.ctrlType === 'number'"
              ></el-input-number>
              <ht-date
                v-else-if="field.ctrlType === 'date'"
                v-model="field.options.customInput"
                style="width: 310px"
                :format="field.options.inputFormat || field.options.format"
                :value-format="field.options.format"
              />
              <template v-else-if="field.ctrlType === 'time'">
                <ht-time-select
                  v-if="field.options.type === 'select'"
                  style="width: 310px"
                  v-model="field.options.customInput"
                  @input="changeTime"
                ></ht-time-select>
                <ht-time-picker
                  v-if="field.options.type === 'picker'"
                  v-model="field.options.customInput"
                  style="width: 310px"
                  @input="changeTime"
                ></ht-time-picker>
              </template>
              <el-input
                v-else
                v-model="field.options.customInput"
                clearable
                style="width: 100%"
                @input="customValueChange"
              ></el-input>
            </div>
            <el-button
              class="default-operate__btn"
              :type="btnType"
              plain
              @click="formulasDialog"
              v-else-if="field.options.custDefaultSelectVal === 'formulaScript'"
              >公式脚本</el-button
            >
            <el-button
              class="default-operate__btn"
              icon="el-icon-search"
              plain
              type="primary"
              v-else-if="field.options.custDefaultSelectVal === 'linkedQuery'"
              @click="
                showSelectQueryDialog(
                  field.options.custQueryJson,
                  'linkedQuery'
                )
              "
              >关联查询</el-button
            >
          </div>
        </ht-form-item>
        <template
          v-if="
            field.ctrlType === 'date' &&
              field.options.custDefaultSelectVal === 'custom'
          "
        >
          <ht-form-item
            label="日期绑定值设置"
            label-width="100px"
            style="margin-top: 10px"
          >
            <ht-checkbox
              v-model="field.options.showCurrentDate"
              :options="[{key: 'true', value: '当前时间'}]"
            />
            <ht-checkbox
              v-if="field.options.showCurrentDate"
              v-model="field.options.isServerDate"
              :options="[{key: 'true', value: '获取服务器当前时间'}]"
            />
          </ht-form-item>
          <ht-form-item
            v-if="field.options.showCurrentDate"
            label="与当前日期相差的天数:"
            title="与当前日期相差的天数"
          >
            <ht-input
              :min="0"
              type="number"
              style="width:340px"
              v-model.number="field.options.day"
            />
          </ht-form-item>
        </template>
        <select-query-dialog
          ref="linkedQueryDialog"
          @saveCustQueryJson="saveLinkedQueryCustQueryJson"
          :customQuerys="[]"
          :returnData="mainBoFields"
          :queryEntMap="queryEntMap"
          :allowAdd="true"
        />
      </template>
    </div>

    <!--日期计算-->
    <template
      v-if="isBasicsProperty(field.options.basicsProperty, 'dateCount')"
    >
      <ht-form-item label-width="100px" label="值来源" class="form-inline-item">
        <el-checkbox v-model="field.options.isCountDate">
          日期计算
          <el-tooltip content="文本框内容是否由日期计算得出">
            <i class="property-tip icon-notes" />
          </el-tooltip>
        </el-checkbox>
      </ht-form-item>
      <ht-form-item
        v-if="field.options.isCountDate"
        label="开始时间"
        label-width="100px"
      >
        <ht-select
          validate="required"
          v-model="field.options.isStartDate"
          :options="mainBoFields"
          :props="{key: 'name', value: 'desc'}"
          style="width: 100%"
        >
          <template slot-scope="{options, propKey, propValue}">
            <el-option-group
              v-for="group in options"
              :key="group.name"
              :label="group.desc"
            >
              <template
                v-if="
                  field.parentNodeType == 'sub' || field.parentNodeType == 'sun'
                "
              >
                <el-option
                  v-for="obj in group.children.filter(item => {
                    return item.dataType == 'date'
                  })"
                  :key="'item.' + obj[propKey]"
                  :label="obj[propValue]"
                  :value="'item.' + obj[propKey]"
                ></el-option>
              </template>
              <template v-else>
                <el-option
                  v-for="obj in group.children.filter(item => {
                    return item.dataType == 'date'
                  })"
                  :key="'data.' + group.path + '.' + obj[propKey]"
                  :label="obj[propValue]"
                  :value="'data.' + group.path + '.' + obj[propKey]"
                ></el-option>
              </template>
            </el-option-group>
          </template>
        </ht-select>
      </ht-form-item>
      <ht-form-item
        v-if="field.options.isCountDate"
        label="结束时间"
        label-width="100px"
      >
        <ht-select
          validate="required"
          v-model="field.options.isEndDate"
          :options="mainBoFields"
          :props="{key: 'name', value: 'desc'}"
          style="width: 100%"
        >
          <template slot-scope="{options, propKey, propValue}">
            <el-option-group
              v-for="group in options"
              :key="group.name"
              :label="group.desc"
            >
              <template
                v-if="
                  field.parentNodeType == 'sub' || field.parentNodeType == 'sun'
                "
              >
                <el-option
                  v-for="obj in group.children.filter(item => {
                    return item.dataType == 'date'
                  })"
                  :key="'item.' + obj[propKey]"
                  :label="obj[propValue]"
                  :value="'item.' + obj[propKey]"
                ></el-option>
              </template>
              <template v-else>
                <el-option
                  v-for="obj in group.children.filter(item => {
                    return item.dataType == 'date'
                  })"
                  :key="'data.' + group.path + '.' + obj[propKey]"
                  :label="obj[propValue]"
                  :value="'data.' + group.path + '.' + obj[propKey]"
                ></el-option>
              </template>
            </el-option-group>
          </template>
        </ht-select>
      </ht-form-item>
      <ht-form-item
        v-if="field.options.isCountDate"
        label="计算周期"
        label-width="100px"
      >
        <ht-select
          placeholder="请选择计算周期"
          v-model="field.options.countFormat"
          style="width: 100%"
          :options="[
            {key: 'year', value: '年'},
            {key: 'month', value: '月份'},
            {key: 'day', value: '天数'},
            {key: 'hour', value: '小时'},
            {key: 'minute', value: '分钟'},
            {key: 'second', value: '秒'}
          ]"
          :props="{key: 'key', value: 'value'}"
        ></ht-select>
      </ht-form-item>
    </template>
    <template v-if="isBasicsProperty(field.ctrlType, 'slider')">
      <ht-form-item label="数据格式" label-width="100px">
        <div class="min-max_box">
          <span class="btn-pre">最小值</span>
          <el-input-number
            v-model="field.options.min"
            placeholder="最小值"
            controls-position="right"
            :min="field.options.numberMin"
            type="number"
          ></el-input-number>
        </div>
        <div class="min-max_box" style="margin: 8px 0">
          <span class="btn-pre">最大值</span>
          <el-input-number
            v-model="field.options.max"
            placeholder="最大值"
            controls-position="right"
            type="number"
            :max="field.options.numberMax"
          ></el-input-number>
        </div>
        <div class="min-max_box" style="margin-bottom:8px;">
          <span class="btn-pre">步长</span>
          <el-input-number
            v-model="field.options.step"
            placeholder="步长"
            controls-position="right"
            type="number"
          ></el-input-number>
        </div>
      </ht-form-item>
    </template>
    <template v-if="isBasicsProperty(field.options.basicsProperty, 'currency')">
      <h4>控件设置</h4>

      <ht-form-item label="数字格式" label-width="100px">
        <template v-if="field.ctrlType !== 'number'">
          <div class="min-max_box">
            <span class="btn-pre">最小值</span>
            <el-input-number
              v-model="field.options.min"
              placeholder="最小值"
              controls-position="right"
              :min="field.options.numberMin"
              type="number"
            ></el-input-number>
          </div>
          <div class="min-max_box" style="margin: 8px 0">
            <span class="btn-pre">最大值</span>
            <el-input-number
              v-model="field.options.max"
              placeholder="最大值"
              controls-position="right"
              type="number"
              :max="field.options.numberMax"
            ></el-input-number>
          </div>
        </template>
        <div class="min-max_box" style="margin-bottom:8px;">
          <span class="btn-pre">步长</span>
          <el-input-number
            v-model="field.options.step"
            placeholder="步长"
            controls-position="right"
            type="number"
          ></el-input-number>
        </div>
        <div class="min-max_box" style="margin-bottom:8px;">
          <span class="btn-pre">小数位</span>
          <el-input-number
            v-model="field.options.decimalDigits"
            placeholder="小数位"
            controls-position="right"
            :min="0"
            :max="!field.options.noBindModel ? getMaxDecimalDigits() : Infinity"
          ></el-input-number>
        </div>
        <div class="min-max_box " style="margin-bottom:8px;">
          <span class="btn-pre">单位</span>
          <el-select
            v-model="field.options.company"
            filterable
            allow-create
            clearable
            default-first-option
            style="width: 100%"
            placeholder="请选择单位(其他输入即可)"
            class="elSelect"
          >
            <el-option
              v-for="(item, index) in companys"
              :key="index"
              :label="item.label"
              :value="item.label"
            ></el-option>
          </el-select>
        </div>
      </ht-form-item>
      <ht-form-item label="格式化显示设置" label-width="150px">
        <el-select
          v-model="field.options.showCompanys"
          filterable
          allow-create
          clearable
          default-first-option
          style="width: 100%"
          placeholder="请选择"
          @change="changeShowCompanys"
        >
          <el-option
            v-for="(item, index) in showCompanys"
            :key="index"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
        <!-- <el-checkbox-button
          v-model="field.options.filterthousandBit"
          @change="handleFormat('filterthousandBit')"
          >千分位</el-checkbox-button
        >
        <el-checkbox-button
          @change="handleFormat('filtercurrency')"
          v-model="field.options.filtercurrency"
          >货币(大写)</el-checkbox-button
        > -->
      </ht-form-item>

      <ht-form-item
        label="数据对齐方式"
        label-width="100px"
        class="dataAlign"
        v-if="field.ctrlType !== 'number'"
      >
        <el-radio-group
          v-model="field.options.contentAlign"
          size="small"
          class="grid-radio-group"
        >
          <el-tooltip
            class="item"
            effect="light"
            content="左对齐"
            placement="top"
          >
            <el-radio-button label="left" class="position-checkbox"
              ><i class="icon-juzuoduiqi label-align-size position-icon"></i
            ></el-radio-button>
          </el-tooltip>
          <el-tooltip
            class="item"
            effect="light"
            content="居中"
            placement="top"
          >
            <el-radio-button label="center" class="position-checkbox"
              ><i class="icon-juzhongduiqi- label-align-size position-icon"></i
            ></el-radio-button>
          </el-tooltip>
          <el-tooltip
            class="item"
            effect="light"
            content="右对齐"
            placement="top"
          >
            <el-radio-button label="right" class="position-checkbox"
              ><i class="icon-juyouduiqi label-align-size position-icon"></i
            ></el-radio-button>
          </el-tooltip>
        </el-radio-group>
      </ht-form-item>
      <!--  表单设计为pc时则显示switch    -->
      <template v-if="field.options.showCompanys !== 'filterthousandBit'">
        <ht-form-item label="是否显示快捷加减操作" class="dataAlign">
          <ht-switch v-model="field.options.controls"></ht-switch>
        </ht-form-item>
        <ht-form-item
          label="位置"
          label-width="100px"
          class="location"
          v-if="
            formType == 'pc' &&
              field.options.controls &&
              $route.hash !== '#mobileFormManager'
          "
        >
          <el-radio-group v-model="field.options.controlsPosition">
            <el-radio-button label="">两侧</el-radio-button>
            <el-radio-button label="right">右侧</el-radio-button>
          </el-radio-group>
        </ht-form-item>
      </template>
      <!-- <ht-form-item
        label="单位"
        label-width="100px"
        v-if="!field.options.filtercurrency"
      >
        <el-select
          v-model="field.options.company"
          filterable
          allow-create
          clearable
          default-first-option
          style="width: 100%"
          placeholder="请选择(其他输入即可)"
        >
          <el-option
            v-for="(item, index) in companys"
            :key="index"
            :label="item.label"
            :value="item.label"
          ></el-option>
        </el-select>
      </ht-form-item> -->
    </template>
    <!-- 背景图片 -->
    <template v-if="isBasicsProperty(field.options.basicsProperty, 'img')">
      <ht-form-item>
        <template slot="label">
          图片配置
          <el-tooltip content="可以上传本地图片和输入网络图片地址">
            <i class="property-tip icon-notes" />
          </el-tooltip>
        </template>
        <el-row>
          <el-col :span="24">
            <div class="radio4">
              <el-radio-group
                v-model="field.options.isDisplay"
                @change="handleImgTypeChange"
              >
                <el-radio-button :label="false">图片地址</el-radio-button>
                <el-radio-button :label="true">本地上传</el-radio-button>
              </el-radio-group>
            </div>
          </el-col>
        </el-row>
        <el-row v-show="field.options.isDisplay">
          <el-col :span="24">
            <img-file-upload
              v-model="field.options.fileJson"
              :fileJson="field.options.fileJson"
            ></img-file-upload>
          </el-col>
        </el-row>
        <el-row v-show="!field.options.isDisplay" style="margin-top: 8px">
          <el-col :span="24" v-if="!field.options.isDisplay">
            <ht-input
              type="textarea"
              :rows="8"
              width="310px"
              placeholder="请输入图片地址链接"
              v-model="field.options.imgSrc"
            ></ht-input>
          </el-col>
        </el-row>
      </ht-form-item>

      <ht-form-item>
        <template slot="label">
          图片宽高
          <el-tooltip content="默认为原始图片宽高">
            <i class="property-tip icon-notes" />
          </el-tooltip>
        </template>
        <div class="form-inline-item">
          <div class="width-height_box" style="margin-right: 10px">
            <span class="btn-pre">宽</span>
            <el-input-number
              v-model="field.options.size.width"
              placeholder="宽度：默认图片宽度"
              :min="0"
              :max="999"
              type="number"
              controls-position="right"
            ></el-input-number>
          </div>
          <div class="width-height_box">
            <span class="btn-pre">高</span>
            <el-input-number
              v-model="field.options.size.height"
              type="number"
              :min="0"
              :max="999"
              controls-position="right"
              placeholder="高度：默认图片高度"
            ></el-input-number>
          </div>
        </div>
      </ht-form-item>
      <template v-if="field.options.imgSrc || field.options.fileJson">
        <ht-form-item>
          <template slot="label">
            <el-tooltip content="内部地址只能输入系统路由，外部地址正确的网址">
              <i class="property-tip icon-question" />
            </el-tooltip>
            <span>跳转方式</span>
          </template>
          <el-radio-group
            v-model="field.options.urlType"
            size="mini"
            @change="field.options.openUrl = ''"
          >
            <el-radio label="1" border class="margin-right">内部地址</el-radio>
            <el-radio label="2" border>外部地址 </el-radio>
          </el-radio-group>
        </ht-form-item>
        <ht-form-item label="跳转地址">
          <ht-input
            v-model="field.options.openUrl"
            placeholder="跳转地址"
            clearable
            controls-position="right"
            style="width:100%"
          ></ht-input>
        </ht-form-item>
      </template>
    </template>
    <!-- 图片 -->
    <template
      v-if="isBasicsProperty(field.options.basicsProperty, 'imageViewer')"
    >
      <ht-form-item>
        <template slot="label">
          上传方式
          <el-tooltip content="图片的上传方式">
            <i class="property-tip icon-notes" />
          </el-tooltip>
        </template>
        <el-radio
          v-model="field.options.uploadType"
          label="local"
          border
          class="margin-right"
          >本地上传</el-radio
        >
        <el-radio v-model="field.options.uploadType" label="web" border
          >网络图片</el-radio
        >
      </ht-form-item>
      <ht-form-item
        v-if="field.options.uploadType === 'local'"
        class="form-inline-item"
      >
        <template slot="label">
          批量选择多个文件上传
          <el-tooltip content="是否可同时选择多个文件上传">
            <i class="property-tip icon-notes" />
          </el-tooltip>
        </template>
        <el-switch v-model="field.options.file.multiple"></el-switch>
      </ht-form-item>
      <ht-form-item
        class="custDialog-item"
        label="图片最大上传个数"
        label-width="100px"
      >
        <el-input-number
          v-model="field.options.file.limit"
          value="3"
          placeholder="最大上传个数"
          controls-position="right"
          :min="1"
          :max="20"
          style="width: 100%"
        ></el-input-number>
      </ht-form-item>
      <ht-form-item>
        <template slot="label">
          超链接
          <el-tooltip
            content="${fvue}/前端路由地址或者${mvue}/后端路由地址或者正确的网址"
          >
            <i class="property-tip icon-notes" />
          </el-tooltip>
        </template>
        <ht-input
          v-model="field.options.openUrl"
          placeholder="超链接"
          style="width: 100%"
          controls-position="right"
        ></ht-input>
      </ht-form-item>
      <ht-form-item label="图片压缩上传" class="form-inline-item">
        <el-switch v-model="field.options.file.compress"> </el-switch>
      </ht-form-item>
    </template>
    <!-- iframe -->
    <template v-if="isBasicsProperty(field.options.basicsProperty, 'iframe')">
      <ht-form-item label="链接类型">
        <ht-radio
          v-model="data.options.iframeType"
          :options="[
            {key: 'static', value: '静态url'},
            {key: 'dynamic', value: '动态url'}
          ]"
        ></ht-radio>
      </ht-form-item>
      <ht-form-item
        label-width
        v-if="data.options.iframeType === 'dynamic'"
        label="iframeUrl"
      >
        <el-button type="primary" @click="setIframeUrl">设置url</el-button>
      </ht-form-item>
      <ht-form-item label-width v-else>
        <template slot="label">
          <el-tooltip content="Iframe标签链接地址">
            <i class="property-tip icon-question" />
          </el-tooltip>
          Iframe标签链接地址
        </template>
        <ht-input
          type="textarea"
          :rows="8"
          v-model="data.options.iframeSrc"
        ></ht-input>
      </ht-form-item>

      <ht-form-item label="iframe宽高" label-width>
        <!-- config.labelWidth  -->
        <div class="flex-line">
          <label>高：</label>
          <el-input
            v-model="data.options.iframeSrcHeight"
            placeholder="高度：500px"
          />
        </div>
        <div class="flex-line">
          <label>宽：</label>
          <el-input
            v-model="data.options.iframeSrcWidth"
            placeholder="宽度：100%"
          />
        </div>
      </ht-form-item>
      <ht-form-item label="iframe样式" label-width v-if="formType != 'mobile'">
        <ht-radio
          v-model="data.options.frameborder"
          :options="[
            {key: '0', value: '无边框'},
            {key: '1', value: '有边框'}
          ]"
        ></ht-radio>
        <div
          v-if="data.options.frameborder"
          style="display: flex; align-items: center"
        >
          <label>颜色：</label>
          <el-color-picker
            v-model="data.options.lableColor"
            size="mini"
          ></el-color-picker>
        </div>
      </ht-form-item>
      <el-dialog
        title="设置iframe地址"
        :visible.sync="isIframeConfigShow"
        v-if="isIframeConfigShow"
        append-to-body
        :close-on-click-modal="false"
      >
        <div style="margin-top: 15px; margin-bottom: 25px">
          <code>
            <span style="color: red; margin-left: 15px">
              编辑的脚本内容会直接填充到function(_this,data,currentUserDetail,userId,account,token,isMobile){...}里面；
              data是表单数据对象,
              currentUserDetail当前用户信息，userId用户id,account用户账号,isMobile是否移动端
            </span>
            <br />
            <span style="color: red; margin-left: 15px"
              >如需使用到表单BO数据例：data.实体表名.实体表字段(可以直接选择表单变量)</span
            >
            <br />
            <span style="color: red; margin-left: 15px">
              返回值是一个字符串，代表iframe的访问地址
            </span>
          </code>
        </div>
        <el-form :inline="true">
          <el-row :gutter="20">
            <el-col :span="12">
              <ht-form-item style="width: 100%" label="表单变量" label-width>
                <ht-select
                  clearable
                  placeholder="选择表单变量"
                  v-model="diyScript"
                  :options="allBoData"
                  :props="{key: 'name', value: 'desc'}"
                  @change="diyScriptChange"
                >
                  <template slot-scope="{options}">
                    <el-option-group
                      v-for="(group, idenx) in options"
                      :key="idenx"
                      :label="group.desc"
                    >
                      <el-option
                        v-for="item in group.children"
                        :key="item.id"
                        :label="item.desc"
                        :value="
                          'data.' +
                            item.path +
                            (group.nodeType == 'sub' ? '[0]' : '') +
                            '.' +
                            item.name
                        "
                      ></el-option>
                    </el-option-group>
                  </template>
                </ht-select>
              </ht-form-item>
            </el-col>
            <el-col :span="12">
              <ht-form-item style="width: 100%" label="外部系统" label-width>
                <el-select
                  style="width: 100%"
                  v-model="extSys"
                  @change="diyScriptChange"
                >
                  <el-option
                    v-for="item in extSysList"
                    :key="item.sysCode"
                    :label="item.sysName"
                    :value="`extSys.${item.sysCode}`"
                  >
                  </el-option>
                </el-select>
              </ht-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div style="width: 100%; height: 100%">
          <textarea
            v-model="scriptText"
            type="textarea"
            :rows="15"
            autocomplete="off"
            ref="scriptText"
            style="width: 99%; height: 100%"
          ></textarea>
        </div>
        <div slot="footer" class="dialog-footer">
          <el-button @click="isIframeConfigShow = false">取 消</el-button>
          <el-button type="primary" @click="confirmIframeConfig()"
            >确 定</el-button
          >
        </div>
      </el-dialog>
    </template>

    <!-- contract -->
    <template v-if="isBasicsProperty(field.options.basicsProperty, 'contract')">
      <ht-form-item label="合同预览宽高" label-width>
        <!-- config.labelWidth  -->
        <el-input
          v-model="data.options.iframeSrcHeight"
          placeholder="高度：500px"
          style="width: 150px"
        />
        <el-input
          v-model="data.options.iframeSrcWidth"
          placeholder="宽度：100%"
          style="width: 150px; float: left"
        />
      </ht-form-item>
      <ht-form-item label="合同预览样式" label-width>
        <ht-radio
          v-model="data.options.frameborder"
          :options="[
            {key: '0', value: '无边框'},
            {key: '1', value: '有边框'}
          ]"
        ></ht-radio>
        <div v-if="data.options.frameborder">
          <div class="color-selected" style="width: 148px">
            <div class="color">颜色</div>
            <el-color-picker
              v-model="data.options.lableColor"
              size="mini"
            ></el-color-picker>
            <i class="el-icon-caret-bottom"></i>
          </div>
        </div>
      </ht-form-item>
    </template>

    <!-- 设置自定义脚本  script-->
    <!-- <template v-if="isBasicsProperty(field.options.basicsProperty,'script')">
      <H3 style="margin-bottom: 0px;">设置控件执行的方法</H3>
      <el-button class="btn-padding" icon="el-icon-plus" @click="autoRunJSScript">设置自定义脚本</el-button>
    </template>-->

    <!-- placeholder 填写说明 placeholder-->
    <template
      v-if="
        isBasicsProperty(field.options.basicsProperty, 'placeholder') &&
          !field.noPlaceholder &&
          !field.options.isEditor
      "
    >
      <ht-form-item label-width="100px">
        <template slot="label">
          填写说明
          <el-tooltip content="字段没有内容时显示的文本（placeholder）">
            <i class="property-tip icon-my-todo-comment" />
          </el-tooltip>
        </template>
        <ht-input v-model="field.options.placeholder" style="width: 100%">
          <el-button
            icon="icon-guojihua"
            slot="append"
            @click="editI18nMessage('placeholder')"
            >国际化</el-button
          >
        </ht-input>
      </ht-form-item>
    </template>
    <!-- 长度限制 -->
    <template
      v-if="
        isBasicsProperty(field.options.basicsProperty, 'placeholder') &&
          !field.noPlaceholder &&
          !field.options.isEditor &&
          field.options.hasOwnProperty('showWordLimit')
      "
    >
      <div>
        <ht-form-item label-width="100px">
          <template slot="label">
            长度限制
            <el-tooltip content="输入长度限制">
              <i class="property-tip icon-my-todo-comment" />
            </el-tooltip>
          </template>
          <div class="length-wrap">
            <div style="width:75px;">显示长度:</div>
            <ht-switch
              v-model="field.options.showWordLimit"
              style="width: 20%"
            ></ht-switch>
            <template v-if="field.options.showWordLimit">
              <div style="width:50px;">长度：</div>
              <ht-input
                type="number"
                v-model="field.options.maxlength"
                style="width: 40%"
              ></ht-input>
            </template>
          </div>
        </ht-form-item>
      </div>
    </template>
    <!-- 按钮基础属性  onetextBtn-->
    <template
      v-if="isBasicsProperty(field.options.basicsProperty, 'onetextBtn')"
    >
      <ht-form-item>
        <template slot="label">
          按钮事件绑定
          <el-tooltip
            content="目前只添加系统中需使用到的事件，如果不满足需求，需自行扩展事件。"
          >
            <i class="property-tip icon-my-todo-comment" />
          </el-tooltip>
        </template>
        <el-checkbox v-model="field.options.isBindBtn"
          >绑定按钮调用JS方法</el-checkbox
        >
        <el-button
          v-if="field.options.isBindBtn"
          icon="icon-set"
          type="primary"
          size="small"
          plain
          style="margin-left: 10px"
          @click="autoRunJSScript(true)"
          >设置自定义脚本</el-button
        >
      </ht-form-item>
      <ht-form-item class="form-inline-item">
        <template slot="label">
          显示输入框
          <el-tooltip
            content="是否显示输入框,如果显示需要绑定属性,js方法返回的值将填写到输入框中"
          >
            <i class="property-tip icon-notes" />
          </el-tooltip>
        </template>
        <el-switch
          v-model="field.options.bindEventjson.isShowInput"
          @change="clickNoBindModel"
        ></el-switch>
      </ht-form-item>
      <!-- <ht-form-item v-if="!field.options.bindEventjson.isShowInput">
        <template slot="label">
          <el-tooltip content="是否将按钮用于套打表单">
            <i class="property-tip icon-notes" />
            <label>套打表单</label>
          </el-tooltip>
        </template>
        <el-checkbox
          v-model="field.options.showPrint"
          @change="clickShowPrintModel"
          >套打表单</el-checkbox
        >
      </ht-form-item>
      <ht-form-item label="套打模板" label-width v-if="field.options.showPrint">
        <ht-select
          clearable
          filterable
          placeholder="请选择套打模板"
          v-model="field.options.wordPrintConf.fileId"
          :options="wordPrintTemplateList"
          :props="{key: 'fileId', value: 'fileName'}"
          @change="wordPrintTemplateChange"
        ></ht-select>
      </ht-form-item>
      <ht-form-item v-if="field.options.showPrint">
        <template slot="label">
          <el-tooltip content="是否允许下载套打原件">
            <i class="property-tip icon-notes" />
          </el-tooltip>
          <label>下载套打原件</label>
        </template>
        <el-checkbox v-model="field.options.wordPrintConf.download"
          >允许下载套打原件</el-checkbox
        >
      </ht-form-item>-->
      <ht-form-item label="按钮名称/图标" label-width="100px">
        <div style="display: flex; justify-content: start">
          <ht-input v-model="field.options.bindEventjson.name"></ht-input>
          <div class="icon-selected">
            <div class="icon">图标</div>
            <div class="icon-box" @click="iconSelected('bindEventjson')">
              <i :class="field.options.bindEventjson.icon"></i>
            </div>
            <i
              class="el-icon-caret-bottom"
              @click="iconSelected('bindEventjson')"
            ></i>
            <!-- 图标 -->
            <IconDialog @selected="icons" ref="bindEventjson" v-show="false" />
          </div>
        </div>
      </ht-form-item>
    </template>

    <!-- 里程碑配置基本属性  script-->
    <template
      v-if="isBasicsProperty(field.options.basicsProperty, 'stepControl')"
    >
      <ht-form-item label="里程碑样式">
        <div class="radio4">
          <el-radio-group v-model="field.options.direction" size="mini">
            <el-radio-button label="horizontal">横向</el-radio-button>
            <el-radio-button label="vertical">纵向</el-radio-button>
          </el-radio-group>
        </div>
      </ht-form-item>
      <ht-form-item label="里程碑内容设置">
        <ul class="autocomplete-list">
          <li v-for="(item, index) in field.options.steps" :key="index">
            <el-input
              size="mini"
              placeholder="名称"
              v-model="item.title"
              style="width: 75px"
            ></el-input>
            <el-input
              size="mini"
              placeholder="描述"
              :title="item.description"
              v-model="item.description"
              style="width: 165px"
            ></el-input>
            <el-button
              @click="field.options.steps.remove(item)"
              v-if="field.options.steps.length > 1"
              type="text"
              size="mini"
              >删除</el-button
            >
          </li>
        </ul>
        <el-button
          type="primary"
          @click="field.options.steps.push({title: '', description: ''})"
          plain
          class="style__tabs-btn"
          >添加选项</el-button
        >
      </ht-form-item>
    </template>

    <!--数据字典基本配置 dic -->
    <template
      v-if="isBasicsProperty(field.options.basicsProperty, 'dicConfig')"
    >
      <!-- <H3 style="margin-bottom: 0px;">数据字典</H3> -->
      <ht-form-item label="数据字典">
        <div class="customQuery-inputs">
          <el-select
            @visible-change="dicClick"
            clearable
            v-model="field.options.dic"
            placeholder="请选择数据字典"
            style="width: 100%"
            ref="dicSelect"
          >
            <el-option
              :value="field.options.dic"
              :label="field.options.dicName"
              style="
                width: 100%;
                height: 100%;
                overflow: auto;
                background-color: #fff;
              "
            >
              <el-tree
                :data="dicData"
                :props="defaultPropsShow"
                @node-click="dicNodeClick"
                :load="loadNode"
                lazy
              ></el-tree>
            </el-option>
          </el-select>
        </div>
      </ht-form-item>
      <!-- <div class="customQuery-inputs">
        <el-select
          @visible-change="dicClick"
          clearable
          v-model="field.options.dic"
          placeholder="请选择数据字典"
          style="width: 100%"
          ref="dicSelect"
        >
          <el-option
            :value="field.options.dic"
            :label="field.options.dicName"
            style="width: 100%;height:100%;overflow: auto;background-color:#fff">
            <el-tree :data="dicData" :props="dicDefaultProps" @node-click="dicNodeClick"></el-tree>
          </el-option>
        </el-select>
      </div> -->
      <ht-form-item label="字典是否可搜索" class="form-inline-item">
        <el-switch v-model="field.options.filterable"> </el-switch>
      </ht-form-item>
    </template>

    <template
      v-if="isBasicsProperty(field.options.basicsProperty, 'tagConfig')"
    >
      <ht-form-item label="标签选择">
        <template slot="label">
          <span class="is-required">标签选择</span>
        </template>
        <div class="customQuery-inputs">
          <el-select
            @visible-change="tagClick"
            v-model="field.options.tag"
            placeholder="请选择标签"
            style="width: 100%"
            ref="tagSelect"
            @change="handleTagChange"
          >
            <el-option
              :value="field.options.tag"
              :label="field.options.tagName"
              style="
                width: 100%;
                height: 100%;
                overflow: auto;
                background-color: #fff;    
              "
            >
              <el-tree
                :data="tagData"
                :props="dicDefaultProps"
                @node-click="tagNodeClick"
              ></el-tree>
            </el-option>
          </el-select>
        </div>
      </ht-form-item>
      <ht-form-item
        label="是否可搜索"
        class="form-inline-item"
        v-if="!field.options.expand"
      >
        <el-switch v-model="field.options.filterable"> </el-switch>
      </ht-form-item>
      <ht-form-item class="form-inline-item">
        <template slot="label">
          是否可扩展
          <el-tooltip content="配置可扩展关闭时，会导致是否可搜索配置项初始化">
            <i class="property-tip icon-question" />
          </el-tooltip>
          <span></span>
        </template>
        <el-switch
          v-model="field.options.expand"
          @change="handleExpandValChange"
        >
        </el-switch>
      </ht-form-item>
      <ht-form-item label="单选/多选">
        <div class="radio4">
          <el-radio-group
            v-model="field.isMultiple"
            class="style-radio-group"
            size="small"
          >
            <el-radio-button :label="false">单选</el-radio-button>
            <el-radio-button :label="true">多选</el-radio-button>
          </el-radio-group>
        </div>
      </ht-form-item>
    </template>

    <template
      v-if="isBasicsProperty(field.options.basicsProperty, 'officeConfig')"
    >
      <ht-form-item>
        <el-switch
          v-model="field.options.isRevision"
          active-color="#13ce66"
          inactive-color="#ff4949"
          active-text="显示痕迹"
          inactive-text="隐藏痕迹"
        >
        </el-switch>
      </ht-form-item>
    </template>
    <template v-if="isBasicsProperty(field.ctrlType, 'urlParameter')">
      <ht-form-item label="绑定key">
        <ht-input v-model="field.options.bindKey" validate="required" />
      </ht-form-item>
    </template>
    <!--开关配置 switch -->
    <template v-if="isBasicsProperty(field.ctrlType, 'switch')">
      <ht-form-item label="值设置">
        <el-input
          placeholder="请输入内容"
          style="width: 48%; margin-right: 10px"
          v-model="field.options.activeValue"
          @input="field.options.defaultValue = field.options.activeValue"
        >
          <template slot="prepend">打开</template>
        </el-input>
        <el-input
          placeholder="请输入内容"
          style="width: 48%"
          v-model="field.options.inactiveValue"
        >
          <template slot="prepend">关闭</template>
        </el-input>
      </ht-form-item>
      <ht-form-item label="打开时文字描述">
        <el-input v-model="field.options.activeText" />
      </ht-form-item>
      <ht-form-item label="关闭时文字描述">
        <el-input v-model="field.options.inactiveText" />
      </ht-form-item>
    </template>

    <!-- 签章 暂时屏蔽-->
    <!-- <template v-if="isBasicsProperty(field.ctrlType, 'signature')">
      <ht-form-item label="最大签章人数">
        <el-input-number :min="1" v-model="field.options.maxPeople" />
      </ht-form-item>
    </template> -->
    <!-- 大标题 小标题  简单文字 -->
    <template
      v-if="
        isBasicsProperty(field.ctrlType, 'big-title') ||
          isBasicsProperty(field.ctrlType, 'small-title') ||
          isBasicsProperty(field.ctrlType, 'simple-text')
      "
    >
      <ht-form-item
        :label="
          isBasicsProperty(field.ctrlType, 'simple-text')
            ? '文字内容'
            : '标题内容'
        "
      >
        <el-input v-model="field.options.textValue"></el-input>
      </ht-form-item>
      <ht-form-item label="字体样式">
        <el-row type="flex" justify="space-between">
          <el-col :span="12" style="margin-right: 10px"
            ><el-input v-model="field.options.fontSize" placeholder="格式:10px">
              <template slot="prepend">大小</template></el-input
            >
          </el-col>
          <el-col :span="12"
            ><el-input v-model="field.options.fontWeight">
              <template slot="prepend">粗细</template></el-input
            ></el-col
          >
        </el-row>
        <el-row type="flex" justify="space-between" style="margin-top: 8px">
          <el-col :span="12">
            <div class="color-selected" style="width: 148px">
              <div class="color">颜色</div>
              <el-color-picker
                v-model="field.options.color"
                size="mini"
              ></el-color-picker>
              <i class="el-icon-caret-bottom"></i>
            </div>
          </el-col>
          <el-col :span="12" style="margin-left: 5px">
            <el-radio-group
              v-model="field.options.textAlign"
              size="small"
              class="grid-radio-group"
            >
              <el-radio-button label="left"
                ><i class="icon-juzuoduiqi label-align-size"></i
              ></el-radio-button>
              <el-radio-button label="center"
                ><i class="icon-juzhongduiqi- label-align-size"></i
              ></el-radio-button>
              <el-radio-button label="right"
                ><i class="icon-juyouduiqi label-align-size"></i
              ></el-radio-button> </el-radio-group
          ></el-col>
        </el-row>
      </ht-form-item>
      <ht-form-item label="间距">
        <el-row type="flex" justify="space-between">
          <el-col :span="12" style="margin-right: 10px">
            <el-input
              v-model="field.options.paddingTop"
              placeholder="格式:10px"
            >
              <template slot="prepend">上间距</template></el-input
            >
          </el-col>
          <el-col :span="12">
            <el-input
              v-model="field.options.paddingBottom"
              placeholder="格式:10px"
              ><template slot="prepend">下间距</template></el-input
            ></el-col
          >
        </el-row>
        <el-row type="flex" justify="space-between" style="margin-top: 8px">
          <el-col :span="12" style="margin-right: 10px">
            <el-input
              v-model="field.options.paddingLeft"
              placeholder="格式:10px"
              ><template slot="prepend">左间距</template></el-input
            >
          </el-col>
          <el-col :span="12">
            <el-input
              v-model="field.options.paddingRight"
              placeholder="格式:10px"
              ><template slot="prepend">右间距</template></el-input
            ></el-col
          >
        </el-row>
      </ht-form-item>
    </template>
    <!-- 说明 -->
    <template v-if="isBasicsProperty(field.ctrlType, 'explain')">
      <ht-form-item label="说明文字内容">
        <el-button
          type="primary"
          plain
          class="el-icon-edit"
          @click="openExplainDia"
          style="width: 100%"
        >
          编辑说明内容
        </el-button>
      </ht-form-item>
      <ht-form-item label="间距" v-if="formType == 'pc'">
        <div class="form-inline-item">
          <el-input
            v-model="field.options.marginTop"
            placeholder="格式:10px"
            style="margin-right: 10px"
          >
            <template slot="prepend">上间距</template></el-input
          >
          <el-input v-model="field.options.marginBottom" placeholder="格式:10px"
            ><template slot="prepend">下间距</template></el-input
          >
        </div>
      </ht-form-item>
      <ht-form-item
        label="显示说明"
        class="form-inline-item"
        v-if="formType == 'pc'"
      >
        <el-switch
          v-model="field.options.isLabelShow"
          :active-value="true"
          :inactive-value="false"
        >
        </el-switch>
      </ht-form-item>
    </template>
    <el-dialog
      title="说明内容"
      :visible.sync="dialogExplainVisible"
      append-to-body
      class="urgent-text"
      :close-on-click-modal="false"
      width="60%"
      custom-class="custom-header explain-dialog"
    >
      <FormVarSelector
        type="1"
        :boData="ExplainFormVarData"
        @node-click="textClick"
        class="form-var-select"
      />
      <ht-editor
        v-model="explainContent"
        v-if="dialogExplainVisible"
      ></ht-editor>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogExplainVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirmExplainDia">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 自定义视图属性 -->
    <template v-if="isBasicsProperty(field.ctrlType, 'customChart')">
      <ht-form-item>
        <template slot="label">
          选择自定义图表
          <el-tooltip content="选择自定义图表,所选择的表单列表作为选项时的绑定">
            <i class="property-tip icon-notes" />
          </el-tooltip>
        </template>
        <ht-select
          clearable
          filterable
          @change="setCurrentCustomChart()"
          v-model="field.options.alias"
          :options="customCharts"
          :props="{key: 'alias', value: 'name'}"
          style="width: 100%"
        />
      </ht-form-item>

      <ht-form-item
        label="设置参数绑定"
        v-if="field.options.alias && field.options.alias != ''"
      >
        <el-button
          icon="icon-set"
          type="primary"
          size="small"
          plain
          style="width: 100%"
          @click="chartClick()"
          >设置参数绑定</el-button
        >
      </ht-form-item>

      <ht-form-item label="图表尺寸" label-width>
        <div class="form-inline-item">
          <div class="width-height_box" style="margin-right: 10px">
            <span class="btn-pre">宽</span>
            <el-input-number
              v-model="field.options.chartWidth"
              placeholder="宽度(px)"
              controls-position="right"
              :min="1"
              :max="1000"
              type="number"
            ></el-input-number>
          </div>
          <div class="width-height_box">
            <span class="btn-pre">高</span>
            <el-input-number
              type="number"
              v-model="field.options.chartHeight"
              placeholder="高度(px)"
              controls-position="right"
              :min="1"
              :max="1000"
            ></el-input-number>
          </div>
        </div>
      </ht-form-item>

      <!-- 获取单选复选控件动态值选项 @change="setCurrentCustomQuery()"-->
      <ht-load-data
        url="/form/customChart/v1/list"
        requestMethod="post"
        context="form"
        :isPagination="false"
        @after-load-data="afterCustomChartLoadData"
      ></ht-load-data>
      <dir>
        <div class="params-box">
          <ht-form-item
            label
            label-width
            v-if="field.options.bind && field.options.bind.length > 0"
            class="basics-property"
          >
            <template slot="label">
              参数绑定
              <el-tooltip content="自定义图表查询需要的参数传入">
                <i class="property-tip icon-notes" />
              </el-tooltip>
            </template>
            <template>
              <table
                class="form-table custDialog-table"
                cellspacing="0"
                cellpadding="0"
                border="0"
              >
                <tbody>
                  <tr class="linkageTable-tr linkageTable-title">
                    <td>参数名</td>
                    <td>取值对象</td>
                  </tr>
                  <tr
                    style="text-align: center"
                    v-for="(bind, index) in field.options.bind"
                    :key="index"
                  >
                    <td class="table-first-col">{{ bind.comment }}</td>
                    <td>
                      <ht-select
                        clearable
                        v-model="bind.fieldPath"
                        :options="allBoData"
                        :props="{key: 'name', value: 'desc'}"
                      >
                        <template slot-scope="{options}">
                          <el-option-group
                            v-for="(group, idenx) in options"
                            :key="idenx"
                            :label="group.desc"
                          >
                            <el-option
                              v-for="item in group.children.filter(
                                i => i.name !== field.name
                              )"
                              :key="item.id"
                              :label="item.desc"
                              :value="'data.' + item.path + '.' + item.name"
                            ></el-option>
                          </el-option-group>
                        </template>
                      </ht-select>
                    </td>
                  </tr>
                </tbody>
              </table>
            </template>
          </ht-form-item>
        </div>
      </dir>
    </template>
    <!-- 流水号配置 -->
    <template v-if="isBasicsProperty(field.ctrlType, 'identity')">
      <ht-form-item>
        <template slot="label">
          <el-tooltip placement="bottom" effect="light">
            <span slot="content">
              <strong>关于初始化生成编号</strong>
              <br />
              <span>
                此属性用于生成自动编号是否进入界面初始化生成编号，还是提交后台后生成编号。
                <br />
                启动时，在打开表单后就获取流水号。关闭时，在提交表单后，后台自动生成
              </span>
            </span>
            <i class="property-tip icon-notes" />
          </el-tooltip>
          是否初始化
        </template>
        <el-switch
          v-model="field.options.init"
          active-value="true"
          inactive-value="false"
        ></el-switch>
      </ht-form-item>
      <ht-form-item label="选择流水号">
        <ht-select
          validate="required"
          v-model="field.options.alias"
          clearable
          :options="identitys"
          :props="{key: 'alias', value: 'name'}"
        >
        </ht-select>
      </ht-form-item>
      <!-- 获取单选复选控件动态值选项 @change="setCurrentCustomQuery()"-->
      <ht-load-data
        :url="identityUrl"
        requestMethod="post"
        context="portal"
        @after-load-data="
          val => {
            identitys = val
          }
        "
      ></ht-load-data>
    </template>

    <!-- 评分控件配置rate -->
    <template v-if="isBasicsProperty(field.ctrlType, 'rate')">
      <ht-form-item label="最大分值">
        <el-input-number
          v-model="field.options.max"
          :min="0"
          :max="100"
          type="number"
          style="width:310px"
        ></el-input-number>
      </ht-form-item>
      <ht-form-item class="form-inline-item">
        <template slot="label">
          允许半选
          <el-tooltip content="所绑定属性的小数位为0时，会导致半选失效">
            <i class="property-tip icon-my-todo-comment" />
          </el-tooltip>
        </template>
        <el-switch v-model="field.options.allowHalf"> </el-switch>
      </ht-form-item>
      <ht-form-item label="显示分值" class="form-inline-item">
        <el-switch v-model="field.options.showScore"> </el-switch>
      </ht-form-item>
      <ht-form-item label="样式设置">
        <div style="display: flex; justify-content: start" class="score-set">
          <div class="color-selected" style="width: 158px">
            <div class="color2">激活颜色</div>
            <el-color-picker
              v-model="field.options.activeColor"
              size="mini"
            ></el-color-picker>
            <i class="el-icon-caret-bottom"></i>
          </div>
          <div class="icon-selected">
            <div class="icon">图标</div>
            <div class="icon-box" @click="iconSelected('rateIcons')">
              <i :class="field.options.iconClass"></i>
            </div>
            <i
              class="el-icon-circle-close close-icon"
              v-if="field.options.iconClass"
              @click="field.options.iconClass = ''"
            ></i>
            <i
              v-else
              class="el-icon-caret-bottom"
              @click="iconSelected('rateIcons')"
            ></i>
            <!-- 图标 -->
            <IconDialog @selected="rateIcons" ref="rateIcons" v-show="false" />
          </div>
          <!-- <el-button
            size="mini"
            v-if="field.options.iconClass"
            @click="field.options.iconClass = ''"
            type="text"
            >删除</el-button
          > -->
        </div>
      </ht-form-item>
    </template>
    <!-- 审批预测 -->
    <template v-if="field.ctrlType == 'processForecast'">
      <div class="processForecast">
        <ht-form-item label="展示类型" label-width="100px">
          <ht-radio
            v-model="field.options.showType"
            :options="[
              {key: '1', value: '以文本展示'},
              {key: '2', value: '以图片展示'}
            ]"
          />
        </ht-form-item>
        <ht-form-item label="宽高" label-width="100px">
          <div>
            <div>宽：</div>
            <ht-input
              type="number"
              v-model="field.options.width"
              placeholder="0为自适应"
            ></ht-input>
            <div>高：</div>
            <ht-input
              type="number"
              v-model="field.options.height"
              placeholder="0为自适应"
            ></ht-input>
          </div>
        </ht-form-item>
      </div>
    </template>
    <!-- 通用的不放在 template中-->
    <el-dialog
      title="自定义运行脚本设置"
      :visible.sync="dialogScriptVisible"
      append-to-body
      class="urgent-text"
      :close-on-click-modal="false"
    >
      <div>
        <p>
          <span>
            <strong>备注：</strong>
          </span>
        </p>
        <p>只需要填写function内的业务逻辑 内置参数有</p>
        <code>
          function(req,data,i18n,Message,Loading,formVm,_this){
          <br />// 业务逻辑代码 <br />// req 异步请求封装
          可以查看带中的request.js <br />// i18n 国际化对象
          i18n.t('login.login'); // data 在线表单数据对象 <br />// Message,
          Loading 分别ElementUI 的message 和 loading组件 <br />// formVm
          form的vue实例对象 使用如下 <br />// formVm.data 表单数据 <br />//
          formVm.$t('login.login') 国际化 <br />// _this 当前控件的vue对象
          _this.inputVal 控件绑定的model值 <br />} // 如果是设置树控件的脚本
          多三个参数 nodeData节点数据 ,node节点对象,treeComponent 树组件对象
        </code>
        <p>如果设置了输入框 返回值将直接绑带到输入框中</p>
      </div>
      <ht-form-item label="自定义JS脚本" label-width>
        <ht-select
          clearable
          placeholder="选择表单变量"
          v-model="diyScript"
          :options="allBoData"
          :props="{key: 'name', value: 'desc'}"
          @change="diyScriptVarChange"
        >
          <template slot-scope="{options}">
            <el-option-group
              v-for="(group, idenx) in options"
              :key="idenx"
              :label="group.desc"
            >
              <el-option
                v-for="item in group.children"
                :key="item.id"
                :label="item.desc"
                :value="
                  'data.' +
                    item.path +
                    (group.nodeType == 'sub' ? '[0]' : '') +
                    '.' +
                    item.name
                "
              ></el-option>
            </el-option-group>
          </template>
        </ht-select>
      </ht-form-item>
      <HtMonacoEditor ref="myEditor" v-model="scriptText" height="300px" />
      <div slot="footer" class="dialog-footer">
        <el-button
          @click="
            dialogScriptVisible = false
            scriptText = ''
          "
          >取 消</el-button
        >
        <el-button type="primary" @click="scriptOk">确 定</el-button>
      </div>
    </el-dialog>
    <i18n-message-edit ref="i18nMessageEdit" :messageKey="i18nMessageKey" />
    <!-- 脚本选择对话框 -->
    <eip-script-dialog
      :appendToBody="true"
      ref="eipScriptDialog"
      @onConfirm="handleScriptSelected"
    ></eip-script-dialog>
    <!--公式脚本对话框 -->
    <formulas-dialog
      ref="formulasDialog"
      :boDefData="boDefData"
      :allBoData="allBoData"
      :subTableLayoutType="subTableLayoutType"
      :linkageNoAttrFieldList="linkageNoAttrFieldList"
      :field="field"
    />

    <el-dialog
      title="设置图表参数"
      :visible.sync="dialogChartVisible"
      append-to-body
      class="urgent-text"
      :close-on-click-modal="false"
      width="800px"
    >
      <table class="form-table" cellspacing="0" cellpadding="0" border="0">
        <tbody>
          <tr class="linkageTable-tr">
            <td width="180px"></td>
            <td width="240px">表单字段</td>
            <td width="240px">图表查询字段</td>
            <td width="80px">操作</td>
          </tr>
          <tr class="linkageTable-tr">
            <td width="180px">
              <el-tooltip
                content="表单参数绑定,可根据绑定表单字段对数据报表数据进行过滤展示;不绑定则显示所有数据"
              >
                <i class="property-tip icon-notes" />
              </el-tooltip>
              <span>关联查询字段</span>
              <el-button
                class="btn-padding"
                style="margin-left: 5px"
                icon="el-icon-plus"
                @click="addSelectList"
              ></el-button>
            </td>
            <td colspan="6">
              <table class cellspacing="0" cellpadding="0" border="0">
                <tr v-for="(item, index) in selectList" :key="index">
                  <td width="240px">
                    <ht-select
                      v-model="item.selectField"
                      :options="tablefields"
                      :props="{key: 'name', value: 'desc'}"
                      :clearable="true"
                      filterable
                      style="margin: 10px 20px"
                    >
                      <template slot-scope="{options}">
                        <el-option-group
                          v-for="group in options"
                          :key="group.desc"
                          :label="group.desc"
                        >
                          <el-option
                            v-for="item in group.children.filter(obj => {
                              return filterFields(obj)
                            })"
                            :key="item.name"
                            :label="item.desc"
                            :value="item.path + '.' + item.name"
                          ></el-option>
                        </el-option-group>
                      </template>
                    </ht-select>
                  </td>
                  <td width="240px">
                    <el-select
                      v-model="item.bindSelectd"
                      clearable
                      placeholder="请选择"
                      style="margin: 10px 10px 10px 30px"
                    >
                      <el-option
                        v-for="item in chartConditionfield"
                        :key="item.field"
                        :label="item.comment"
                        :value="item.field"
                      ></el-option>
                    </el-select>
                  </td>
                  <td width="80px" style="text-align: center">
                    <el-button
                      class="btn-padding"
                      style="margin-left: 20px"
                      icon="el-icon-delete"
                      @click="selectList.remove(item)"
                    ></el-button>
                  </td>
                </tr>
              </table>
            </td>
          </tr>
        </tbody>
      </table>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogChartVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirmChart()">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 获取关联查询下拉选项"-->
    <ht-load-data
      ref="basicsCustomQueryRef"
      url="/form/customQuery/v1/list"
      requestMethod="post"
      context="form"
      @after-load-data="afterCustomQueryLoadData"
    ></ht-load-data>
  </el-form>
</template>

<script>
import Draggable from 'vuedraggable'
import ValidataProperty from '@/components/form/ValidataProperty.vue'
import FormVarSelector from '@/components/form/FormVarSelector.vue'
import ImgFileUpload from '@/components/common/ImgFileUpload.vue'
import IconDialog from '@/components/dialog/IconDialog.vue'
import {Base64} from 'js-base64'
import form from '@/api/form.js'
import i18nMessageEdit from '@/components/system/I18nMessageEdit.vue'
import FormulasDialog from '@/components/form/customView/FormulasDialog.vue'
import SelectQueryDialog from '@/components/form/customView/SelectQueryDialog.vue'
import EipScriptDialog from '@/components/dialog/EipScriptDialog.vue'
import EipOrgSelector from '@/components/selector/EipOrgSelector'
const FlowRangeDialog = () => import('@/components/dialog/FlowRangeDialog.vue')
const eipFlowDialog = () => import('@/components/dialog/EipFlowDialog.vue')
// import TreeSelect from '@riophae/vue-treeselect'
// import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import uc from '@/api/uc.js'
import flow from '@/api/flow.js'
import org from '@/api/org.js'
import utils from '@/hotent-ui-util.js'
import CustomSelectTree from '@/components/common/CustomSelectTree.vue'
import {uniqueArrayObject} from '@/utils'
import req from '@/request.js'
const SHOW = 1 //显示border
const DEFAULT_OPTIONS = [
  {
    value: 'custom',
    label: '自定义'
  },
  {
    value: 'formulaScript',
    label: '公式脚本'
  },
  {
    value: 'linkedQuery',
    label: '关联查询'
  }
]
export default {
  name: 'basics-property',
  props: [
    'data',
    'mainBoFields',
    'boDefData',
    'allBoData',
    'formVarData',
    'returnData',
    'formType',
    'tablefields',
    'linkageNoAttrFieldList',
    'subTableLayoutType', //子表布局类型（table子表或div子表）
    'allModelingData'
  ],
  components: {
    ValidataProperty,
    IconDialog,
    FormVarSelector,
    ImgFileUpload,
    i18nMessageEdit,
    SelectQueryDialog,
    FormulasDialog,
    EipScriptDialog,
    EipOrgSelector,
    FlowRangeDialog,
    eipFlowDialog,
    CustomSelectTree,
    Draggable
  },
  data() {
    return {
      extSys: '',
      extSysList: [],
      isIframeConfigShow: false, // ifram jsurl设置页面显示

      customComponents: [], //DIY组件列表数据
      explainContent: '', // 说明控件编辑框内容
      dialogExplainVisible: false, // 说明控件内容编辑弹框
      dateType: 'date',
      isShowOrgSelector: true,
      SHOW,
      selectVal: 'custom',
      customValue: '',
      defaultOptions: DEFAULT_OPTIONS,
      disabledSelect: true,
      bindTypeOptions: [
        {key: 1, val: '表单字段'},
        {key: 2, val: '固定值'},
        {key: 3, val: '脚本'}
      ],
      selectQueryDialog: false,
      dialogQuery: false,
      dialogImageUrl: '',
      dialogVisible: false,
      effectObj: {
        linkageType: 'field',
        validateObj: {
          fieldPath: this.data.fieldPath,
          options: {
            validateList: [],
            validate: '',
            validateType:
              'confirmed|email|regex|id_card|min|max|min_value|max_value|isAfter|isBefore|isStart|isEnd|numeric|between|is|digits|mobile|required|alpha_spaces|alpha_dash|alpha_num|alpha|method'
          }
        }
      },
      field: this.data,
      customQuerys: [],
      customQueryUrl: '',
      fields: [],
      filterListType: ['number', 'currency', 'date', 'amap','tianditu'],
      dialogLinkageVisible: false, //联动设置对话框
      linkage: [
        {
          value: '',
          effect: [
            {
              validateObj: {
                fieldPath: this.data.fieldPath,
                options: {
                  validateList: [],
                  validate: '',
                  validateType:
                    'confirmed|email|regex|id_card|min|max|min_value|max_value|isAfter|isBefore|isStart|isEnd|numeric|between|is|digits|mobile|required|alpha_spaces|alpha_dash|alpha_num|alpha|method'
                }
              }
            }
          ]
        }
      ], //联动表达式
      items: [
        //联动校验显示隐藏
        {key: 'n', value: '隐藏'},
        {key: 'w', value: '显示'},
        {key: 'b', value: '必填'}
      ],
      selectors: [
        //选择器数组
        {
          name: '用户选择器',
          alias: 'eip-user-selector',
          fields: [
            {key: 'id', value: '用户ID'},
            {key: 'account', value: '用户账号'},
            {key: 'fullname', value: '用户姓名'}
            //{ key: "mobile", value: "用户手机" },
            //{ key: "email", value: "用户邮箱" }
          ]
        },
        {
          name: '组织选择器',
          alias: 'eip-org-selector',
          fields: [
            {key: 'id', value: '组织ID'},
            {key: 'code', value: '组织代码'},
            {key: 'name', value: '组织名称'},
            {key: 'pathName', value: '组织路径'}
          ]
        },
        {
          name: '角色选择器',
          alias: 'eip-role-selector',
          fields: [
            {key: 'id', value: '角色ID'},
            {key: 'code', value: '角色代码'},
            {key: 'name', value: '角色名称'}
          ]
        },
        {
          name: '职务选择器',
          alias: 'eip-job-selector',
          fields: [
            {key: 'id', value: '职务ID'},
            {key: 'code', value: '职务代码'},
            {key: 'name', value: '职务名称'}
          ]
        },
        {
          name: '岗位选择器',
          alias: 'eip-post-selector',
          fields: [
            {key: 'id', value: '岗位ID'},
            {key: 'code', value: '岗位代码'},
            {key: 'name', value: '岗位名称'}
          ]
        },
        {
          name: '维度选择器',
          alias: 'ht-dimension-selector-input',
          fields: [
            {key: 'id', value: '维度ID'},
            {key: 'code', value: '维度代码'},
            {key: 'demName', value: '维度名称'}
          ]
        }
      ],
      dialogcustDialogVisible: false, //对话框
      customDialogs: [], //对话框列表数据
      custDialogprop: {}, //对话框返回值对象
      config: {
        initialFrameHeight: 240,
        UEDITOR_HOME_URL:
          window.location.origin +
          '/' +
          window.location.pathname.split('/')[1] +
          '/static/ueditor/',
        toolbars: [
          [
            // 'source', //源代码
            'undo', //撤销
            'bold', //加粗
            'indent', //首行缩进
            'italic', //斜体
            'underline', //下划线
            'strikethrough', //删除线
            'subscript', //下标
            'fontborder', //字符边框
            'superscript', //上标
            'formatmatch', //格式刷
            'forecolor', //字体颜色
            'justifyleft', //居左对齐
            'justifycenter', //居中对齐
            'justifyright', //居右对齐
            'justifyjustify', //两端对齐
            'fontfamily', //字体
            'fontsize', //字号
            'insertorderedlist', //有序列表
            'insertunorderedlist', //无序列表
            'lineheight', //行间距
            'inserttable' //插入表格
          ]
        ],
        // 初始容器宽度
        initialFrameWidth: '100%',
        zIndex: 9999,
        enableAutoSave: false,
        readonly: false
      },
      upLoadAcceptItemCheck: {
        doc: true,
        img: true,
        vido: true
      },
      upLoadAcceptList: {
        doc: [
          'doc',
          'docx',
          'xls',
          'xlsx',
          'ppt',
          'pptx',
          'rtf',
          'txt',
          'zip',
          'rar',
          'vsd',
          'dwg'
        ],
        img: ['jpg', 'jpeg', 'png', 'bmp', 'pdf'],
        vido: ['mp4', 'avi', '3gp', 'rmvb', 'rm', 'wmv']
      },
      typeFieldActive: 'qx',
      //附件上传支持的类型
      dialogPropertyVisible: false, // 属性文本对话框
      dialogTextVisible: false, // 文本对话框
      textValue: '', //属性文本值
      dialogScriptVisible: false, //自定义js脚本对话框
      diyScript: '', //自定义js脚本对话框表单值
      scriptText: '', //自定义js脚本对话框值
      isBnt: false, //是否按钮脚本
      dicData: [],
      tagData: [],
      dicDefaultProps: {
        children: 'children',
        label: 'name'
      },
      defaultPropsShow: {
        children: 'children',
        label: 'name',
        isLeaf: 'leaf'
      },
      custDialogpropKey: 1,
      i18nMessageKey: '',
      createKeyMap: {
        text: true,
        image: true,
        'immediate-single': true,
        'immediate-textarea': true
      },
      companys: [
        {
          label: '台'
        },
        {
          label: '件'
        },
        {
          label: '元'
        }
      ],
      showCompanys: [
        {
          label: '千分位',
          value: 'filterthousandBit'
        },
        {
          label: '货币（大写）',
          value: 'filtercurrency'
        },
        {
          label: '美元（$）',
          value: '$ '
        },
        {
          label: '欧元（€）',
          value: '€ '
        }
      ],
      subTables: [], //子表对象
      linkageTypeList: [
        {key: 'field', desc: '字段'},
        {key: 'subTable', desc: '子表'}
      ], //联动类型列表
      wordPrintTemplateList: [], //word套打模板列表
      bindField: '',
      selectType: '',
      customCharts: [],
      linkedQueryType: 'linkedQuery',
      queryEntMap: {},
      allowAdd: false,
      identitys: [],
      identityUrl: '/sys/identity/v1/getAll',
      dialogChartVisible: false,
      selectList: [],
      chartConditionfield: [],
      boAttributeMap: {},
      orgTreeData: [],
      policyList: [],
      policyOptions: [
        {
          label: '我的主部门',
          value: '1'
        },
        {
          label: '我的主部门及下属部门',
          value: '2'
        },
        {
          label: '我的所有部门',
          value: '3'
        },
        {
          label: '我的所有部门及下属部门',
          value: '4'
        }
      ],
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      roleOptions: [],
      dimensionId: '', //当前维度id
      selectedOrg: [],
      dialogRebackValDefaultData: [],
      collapseTags: true,
      initialInputHeight: 0,
      selectedRole: [],
      deleteRoleCodeList: []
    }
  },
  created() {
    //得到所有外部系统数据
    this.$http
      .post(window.context.portal + '/portalBizSystem/v1/queryData', {})
      .then(res => {
        this.extSysList = res.data.rows
      })
  },
  computed: {
    // 对话框和下拉框options
    customDialogParamOption() {
      if (this.field.parentNodeType && this.field.parentNodeType === 'sub') {
        return this.allBoData.filter(item => {
          return item.nodeType === 'main' || item.name === this.field.tableName
        })
      }
      if (this.field.parentNodeType && this.field.parentNodeType === 'sun') {
        const subTableName =
          this.field.fieldPath &&
          this.field.fieldPath.split('.')[1].replace('sub_', '')
        return this.allModelingData.filter(item => {
          return (
            item.nodeType !== 'main' &&
            (item.name === this.field.tableName || item.name === subTableName)
          )
        })
      }
      return this.allBoData.filter(item => item.nodeType === 'main')
    },
    defaultOptionsFilter() {
      if (this.field.ctrlType === 'currency') {
        return this.defaultOptions.filter(item => {
          return item.value !== 'custom'
        })
      }
      if (this.field.ctrlType === 'button') {
        return this.defaultOptions.filter(item => {
          return item.value === 'custom'
        })
      }
      if (this.field.ctrlType === 'textarea' && this.field.options.isEditor) {
        return this.defaultOptions.filter(item => {
          return item.value === 'custom'
        })
      }
      if (
        ['immediate-single', 'immediate-textarea'].includes(this.field.ctrlType)
      ) {
        return this.defaultOptions.filter(item => {
          return item.value !== 'linkedQuery'
        })
      }
      return this.defaultOptions
    },
    btnType() {
      return this.field.options.formulasDiyJs ? 'success' : 'primary'
    },
    filterOptions() {
      return data => {
        let options = data
        if (data && data.length > 0 && !this.field.parentNodeType) {
          options = data.filter(item => item.nodeType === 'main') || []
        }
        return options
      }
    },
    ExplainFormVarData() {
      return (
        this.formVarData &&
        this.formVarData.filter(item => item.nodeType === 'main')
      )
    },
    treeUrl() {
      return (
        window.context.portal +
        '/sys/sysType/v1/getByParentIdOrLikeName?catId=5'
      )
    }
  },
  mounted() {
    if (this.field.options.range) {
      this.$nextTick(() => {
        this.selectedRole = this.field.options.roleSelectedList || []
        if (this.$refs.roleSelect) {
          const input = this.$refs.roleSelect.$el.querySelector('input')
          this.initialInputHeight = input.getBoundingClientRect().height
        }
      })
    }
  },
  methods: {
    //懒加载
    loadNode(node, resolve) {
      if (
        node &&
        node.data &&
        node.data instanceof Object &&
        node.data.parentId == 5
      ) {
        req.get(this.treeUrl + '&parentId=' + node.data.id).then(res => {
          if (res && res.status == 200) {
            let list = res.data
            list.forEach(item => {
              item.leaf = true
            })
            resolve(res.data)
          } else {
            resolve([])
          }
        })
      }
    },
    getMaxDecimalDigits() {
      let attr = this.getBoAttributeByFieldPath(this.field.fieldPath)
      if (attr && attr.decimalLen) {
        return attr.decimalLen
      }
      return this.field.options.maxDecimalDigits
    },
    allowDrop(draggingNode, dropNode, type) {
      // 是否允许放下
      // 字段不能移动到字段下
      if (dropNode.data && type == 'inner') {
        return false
      }
      return true
    },

    // ifram url设置确认
    confirmIframeConfig() {
      this.isIframeConfigShow = false
      if (!this.scriptText) {
        this.field.options.iframeSrcJs = ''
        return
      }
      this.field.options.iframeSrcJs = Base64.encode(this.scriptText)
    },
    // 打开弹窗
    setIframeUrl() {
      this.isIframeConfigShow = true
      if (!this.field.options.iframeSrcJs) {
        this.scriptText = ''
        return
      }
      this.scriptText = Base64.decode(this.field.options.iframeSrcJs)
    },
    handleVisibleChange(val) {
      this.collapseTags = !val
      this.setDeleteRoleStyle()
      this.$nextTick(() => {
        const input = this.$refs.roleSelect.$el.querySelector('input')
        const tags = this.$refs.roleSelect.$refs.htSelect.$refs.tags
        tags.style.flexWrap = val ? 'wrap' : 'nowrap'
        const tagsHeight = tags
          ? Math.round(tags.getBoundingClientRect().height)
          : 0
        const sizeInMap = this.initialInputHeight || 40
        input.style.height = !val
          ? '32px'
          : Math.max(
              tags ? tagsHeight + (tagsHeight > 32 ? 6 : 0) : 0,
              sizeInMap
            ) + 'px'
        const deleteRoleCode = this.field.options.deleteRoleCodeList || []
        const tagSpans = Array.from(tags.getElementsByClassName('el-tag'))
        tagSpans.forEach(item => {
          if (deleteRoleCode.includes(item.innerText)) {
            item.className = 'el-tag el-tag--danger el-tag--mini el-tag--light'
            item.title = '该角色已被删除'
          } else {
            item.className = 'el-tag el-tag--info el-tag--mini el-tag--light'
            item.title = ''
          }
        })
      })
    },
    setDeleteRoleStyle() {
      const tags = this.$refs.roleSelect.$refs.htSelect.$refs.tags
      const tagSpans = Array.from(tags.getElementsByClassName('el-tag'))
      const deleteRoleCode = this.field.options.deleteRoleCodeList || []
      tagSpans.forEach(item => {
        if (deleteRoleCode.includes(item.innerText)) {
          item.className = 'el-tag el-tag--danger el-tag--mini el-tag--light'
          item.title = '该角色已被删除'
        } else {
          item.className = 'el-tag el-tag--info el-tag--mini el-tag--light'
          item.title = ''
        }
      })
    },
    getDeleteRoleCode() {
      const checkedCode = this.selectedRole.map(item => item.code)
      const selectedRoleCode = this.roleOptions
        .filter(item => checkedCode.includes(item.code))
        .map(it => it.code)
      const deleteRoleCodeList = this.selectedRole
        .filter(item => !selectedRoleCode.includes(item.code))
        .map(it => it.code)
      this.$set(this.field.options, 'deleteRoleCodeList', deleteRoleCodeList)
      this.setDeleteRoleStyle()
    },
    handleRoleChange(val) {
      const selectedRoleList = this.roleOptions.filter(item =>
        val.includes(item.code)
      )
      this.$set(this.field.options, 'roleSelectedList', selectedRoleList)
    },
    handleRemoveTag(code) {
      const deleteRoleCodeList = this.field.options.deleteRoleCodeList || []
      const currentDeleteCode = deleteRoleCodeList.filter(item => item !== code)
      this.$set(this.field.options, 'deleteRoleCodeList', currentDeleteCode)
      this.$nextTick(() => {
        this.setDeleteRoleStyle()
      })
    },
    clear() {
      this.selectedRole = []
      this.$set(this.field.options, 'deleteRoleCodeList', [])
    },
    afterCustomComponentLoadData(data) {
      this.customComponents = data
    },
    getDimension() {
      uc.getAllDimension().then(res => {
        if (res && res.length) {
          const defaultDimension = res.find(item => item.isDefault === 1)
          this.dimensionId = defaultDimension ? defaultDimension.id : res[0].id
          this.getOrgListByDimensionId(this.dimensionId)
        }
      })
    },
    getOrgListByDimensionId(dimId) {
      const param = {
        demId: dimId
      }
      org.getByParentAndDemToTree(param).then(res => {
        if (res && res.length) {
          res.forEach(item => {
            if (!item.code && item.id == '0') {
              item.code = 'dimension'
              item.disabled = true
            }
          })
          this.orgTreeData = utils.tile2nest(res)
        }
      })
    },
    getRoleList() {
      const param = {
        pageBean: {
          pageSize: -1
        }
      }
      uc.getRolePage(param).then(res => {
        if (res && res.rows) {
          this.roleOptions = res.rows
          this.getDeleteRoleCode()
        }
      })
    },
    handleLimitRange(val) {
      if (!val) {
        this.$set(this.field.options, 'range', {
          type: '',
          orgs: [],
          policy: [],
          roles: []
        })
      }
    },
    handleRangeTypeChange(val) {
      this.$set(this.field.options, 'range', {
        type: val,
        orgs: [],
        policy: [],
        roles: []
      })
      if (val !== 'org') {
        this.$refs.selectTree.clear()
      }
    },
    handleChecked(data) {
      const orgs = data.map(item => {
        return {
          code: item.code,
          name: item.name,
          isCurrentAndLowerLevel: item.isCurrentAndLowerLevel ? true : false
        }
      })
      this.$set(this.field.options.range, 'orgs', orgs)
    },
    handleBindTypeChange(bind) {
      this.$set(bind, 'fieldPath', '')
    },
    handleInputChange(val) {
      if (
        val &&
        this.field.options.options &&
        this.field.options.options.length
      ) {
        const newList = this.field.options.options
        const uniqueList = uniqueArrayObject(newList, 'key')

        if (uniqueList.length !== newList.length) {
          this.$message.warning(`选项中有重复的key，请重新输入`)
        }
      }
    },
    validateKey() {
      if (this.field.options.options && this.field.options.options.length) {
        //获取下拉选项值的key并去掉无效值
        const keyList = this.field.options.options
          .map(item => item.key)
          .filter(Boolean)
        const keySet = new Set(keyList)
        const result = keySet.size == keyList.length ? false : true
        return result
      } else {
        return false
      }
    },
    validateFilterRange() {
      if (this.field.options.limitSelectionRange) {
        const {type, orgs} = this.field.options.range
        if (!type) {
          return true
        } else if (type === 'org' && orgs.length < 1) {
          return true
        } else {
          return false
        }
      }
    },
    textPropertyClick() {
      if (!this.field.name) {
        this.$message.warning('控件还未绑定属性，请先绑定属性。')
        return
      }
      this.textValue = this.field.options.textValue
      this.dialogPropertyVisible = true
    },
    handleDialogConfigChange(val, condition) {
      this.$set(condition, 'bind', '')
    },
    handleExpandValChange(val) {
      this.field.options.filterable = val
    },
    handleBindChange(val, bind) {
      // if(this.field.ctrlType === 'select'&&val){
      this.$set(bind, 'fieldPath', '')
      // }
    },
    handleDeleteItem(data, effects) {},
    handleImgTypeChange(val) {
      if (val) {
        this.field.options.imgSrc = ''
      } else {
        this.field.options.fileJson = ''
      }
      this.field.options.openUrl = ''
    },
    rateIcons(icon) {
      this.field.options.iconClass = icon
    },
    handleFormat(val) {
      if (val === 'filterthousandBit') {
        this.field.options.filtercurrency = false
      } else if (val === 'filtercurrency') {
        this.field.options.filterthousandBit = false
      }
    },
    handleChange() {
      this.field.options.customInput = ''
      this.field.options.formulasDiyJs = ''
    },
    // 确认说明内容
    confirmExplainDia() {
      this.field.options.textValue = Base64.encode(this.explainContent)
      this.dialogExplainVisible = false
    },
    // 打开说明内容编辑框
    openExplainDia() {
      this.explainContent = Base64.decode(this.field.options.textValue)
      this.dialogExplainVisible = true
    },
    handleSelected(data) {
      const selected =
        data &&
        data.length &&
        data.map(item => {
          return {
            id: item.id,
            demId: item.demId,
            parentId: item.parentId
          }
        })
      this.field.options.selectedData = JSON.stringify(selected)
    },
    setOptionsByFormat(format) {
      if (this.field.fieldPath) {
        let attr = this.getBoAttributeByFieldPath(this.field.fieldPath)
        if (attr && attr.format) {
          format = attr.format
        }
      }
      let options = []
      if (format === 'yyyy-MM-dd HH:mm:ss') {
        this.disabledSelect = false
        options = [
          {key: 'yyyy-MM-dd', value: 'yyyy-MM-dd'},
          {key: 'yyyy-MM-dd HH:mm:ss', value: 'yyyy-MM-dd HH:mm:ss'}
        ]
      } else {
        this.disabledSelect = true
        options = [{key: 'yyyy-MM-dd', value: 'yyyy-MM-dd'}]
      }
      return options
    },
    handleSelectChange(val) {
      if (val === 'yyyy-MM-dd') {
        this.dateType = 'date'
      } else {
        this.dateType = 'datetime'
      }
    },
    //半选
    indeterminateMeth(type) {
      let daList = []
      if (
        this.field.options &&
        this.field.options.file &&
        this.field.options.file.accept &&
        this.field.options.file.accept.length > 0
      ) {
        this.field.options.file.accept.forEach(item => {
          if (this.upLoadAcceptList[type].includes(item)) {
            daList.push(item)
          }
        })

        if (
          daList.length > 0 &&
          daList.length < this.upLoadAcceptList[type].length
        ) {
          return true
        }
      }
    },
    //范围全选
    handleCheckAllChange(type) {
      //不选
      let list = []
      let data = _.cloneDeep(this.field.options.file.accept)
      data.forEach((item, index) => {
        if (!this.upLoadAcceptList[type].includes(item)) {
          list.push(item)
        }
      })
      this.field.options.file.accept = list
      //全选
      if (this.upLoadAcceptItemCheck[type]) {
        this.field.options.file.accept.push(...this.upLoadAcceptList[type])
      }
    },
    //附件类型全选
    selectAll() {
      this.field.options.file.accept = [
        ...this.upLoadAcceptList['doc'],
        ...this.upLoadAcceptList['img'],
        ...this.upLoadAcceptList['vido']
      ]
      for (let i in this.upLoadAcceptItemCheck) {
        this.upLoadAcceptItemCheck[i] = true
      }
      this.typeFieldActive = 'qx'
    },
    //附件类型全不选
    selectNotAll() {
      this.field.options.file.accept = []
      for (let i in this.upLoadAcceptItemCheck) {
        this.upLoadAcceptItemCheck[i] = false
      }
      this.typeFieldActive = 'qbx'
    },
    //附件类型反选
    counterSelect() {
      let list = [
        ...this.upLoadAcceptList['doc'],
        ...this.upLoadAcceptList['img'],
        ...this.upLoadAcceptList['vido']
      ]
      for (var i = 0; i < this.field.options.file.accept.length; i++) {
        for (var j = 0; j < list.length; j++) {
          if (list[j] == this.field.options.file.accept[i]) {
            list.splice(j, 1)
            break
          }
        }
      }
      for (let i in this.upLoadAcceptItemCheck) {
        this.upLoadAcceptItemCheck[i] = !this.upLoadAcceptItemCheck[i]
      }
      this.field.options.file.accept = list
    },
    changeShowCondition(value) {
      if (value) {
        this.field.options.showCondition.fieldPath =
          'item.' + this.field.options.showCondition.target
      } else {
        this.field.options.showCondition.fieldPath = ''
      }
    },
    filterFields(obj) {
      if (this.filterListType.indexOf(this.field.ctrlType) > -1) {
        return obj.dataType == this.field.options.dataType
      } else if (obj.nodeType == 'sub') {
        return false
      } else {
        return true
      }
    },
    formulasDialog() {
      //兼容无属性字段
      if (
        !this.field.fieldPath &&
        !(
          this.field.options.noBindModel &&
          this.field.name === 'c_' + this.field.key
        )
      ) {
        this.$message('请选择需要修改的组件或绑定属性')
        return
      }
      this.$refs.formulasDialog.handleOpen()
    },
    //选择子表，控制子表权限
    subTableChange(value, data) {},
    afterSaveI18n(data) {
      data.key = data.key.replace('$', '#')
      if (data.prop.endsWith('placeholder')) {
        this.field.options.placeholder = data.key
        this.field.options.placeholder_zh = data.desc
      } else if (data.prop.endsWith('tip')) {
        this.tooltip = data.key
      } else {
        this.field.desc = data.key
        this.field.desc_zh = data.desc
      }
    },
    editI18nMessage(after) {
      this.i18nMessageKey = this.field.fieldPath || this.field.path
      if (this.createKeyMap[this.field.ctrlType]) {
        this.i18nMessageKey =
          this.formData.formKey +
          '.' +
          this.field.ctrlType +
          Math.random() * 5000
      }
      if (this.i18nMessageKey && after) {
        this.i18nMessageKey += after
      }
      this.$refs.i18nMessageEdit.handleOpen()
    },
    //关闭联动设置对话框
    closeDialogLinkage() {
      this.dialogLinkageVisible = false
      this.linkage.length = 0
    },
    getEffectsTargetOptions() {
      let boDataList = []
      if (this.field.parentNodeType) {
        if (this.field.parentNodeType === 'sun') {
          boDataList = this.allModelingData.filter(
            item => item.name === this.field.tableName
          )
        } else {
          boDataList = this.allBoData.filter(
            tab => tab.name == this.field.boSubEntity
          )
        }
      } else {
        boDataList = this.allBoData.filter(
          item => item.name == this.field.tableName
        )
      }
      let linkageBoDataList = JSON.parse(JSON.stringify(boDataList))
      //处理联动无属性字段
      try {
        if (
          this.effectObj.linkageType == 'field' &&
          this.linkageNoAttrFieldList &&
          this.linkageNoAttrFieldList.length > 0
        ) {
          let tableName = this.field.parentNodeType
            ? this.field.boSubEntity
            : ''
          let noAttrObj = {
            name: 'noAttrField',
            desc: '无属性字段',
            children: []
          }
          this.linkageNoAttrFieldList.forEach(item => {
            if (!tableName || item.tableName === tableName) {
              if (item.ctrlType == 'button') {
                item.desc = item.options.bindEventjson.name
              }
              noAttrObj.children.push(item)
            }
          })
          if (noAttrObj.children.length > 0) {
            linkageBoDataList.push(noAttrObj)
          }
        }
      } catch (error) {}
      return JSON.parse(JSON.stringify(linkageBoDataList))
    },
    getLinkageTypeList(effects) {
      if (this.field.parentNodeType) {
        effects.boType = this.field.parentNodeType
          ? this.field.parentNodeType
          : 'sub'
        return this.linkageTypeList.filter(type => type.key == 'field')
      } else {
        effects.boType = 'main'
        return this.linkageTypeList
      }
    },
    //按钮控件如果选择了不显示输入框,可以不用绑定属性
    clickNoBindModel(value) {
      if (!value) {
        // this.field.fieldPath = "";
        this.field.options.noBindModel = true
        this.field.noTitle = true
        this.field.noPlaceholder = true
        this.field.noTooltip = true
      } else {
        this.field.options.noBindModel = false
        this.field.noTitle = false
        this.field.noPlaceholder = false
        this.field.noTooltip = false
        if (this.field.options.showPrint) {
          this.$set(this.field.options, 'showPrint', false)
        }
      }
    },
    lookAllFlow() {
      this.$refs.flowRange.showDialog(this.field.options.flowRange)
    },
    clearFlowRange() {
      this.field.options.flowRange = []
      this.field.options.flowRangeKey = ''
    },
    deleteFlowRange(item) {
      let index = this.field.options.flowRange.findIndex(sub => {
        return sub.defKey === item.defKey
      })
      this.field.options.flowRange.splice(index, 1)
      this.setFlowKey()
    },
    confirmDeleteFlow(data) {
      this.field.options.flowRange = data
      this.setFlowKey()
    },
    confirmFlowRange(data) {
      if (!this.field.options.flowRange) {
        this.$set(this.field.options, 'flowRange', [])
      }
      data.forEach(item => {
        let index = this.field.options.flowRange.findIndex(sub => {
          return sub.defKey === item.defKey
        })
        if (index === -1) {
          this.field.options.flowRange.push({
            name: item.name,
            defKey: item.defKey,
            typeId: item.typeId,
            typeName: item.typeName
          })
        }
      })
      this.setFlowKey()
    },
    setFlowKey() {
      let arr = []
      this.field.options.flowRange.forEach(item => {
        arr.push(item.defKey)
      })
      this.field.options.flowRangeKey = arr.join(',')
    },
    openFlowRange() {
      this.$refs.eipFlowDialog.showDialog()
    },
    clickShowPrintModel(value) {
      if (value) {
        if (!this.field.options.wordPrintConf) {
          const wordPrintConf = {
            templateId: '',
            fileId: '',
            fileName: '',
            download: true,
            templateName: ''
          }
          this.$set(this.field.options, 'wordPrintConf', wordPrintConf)
        }
        if (this.allBoData) {
          let boDefIds = ''
          this.allBoData.forEach(boData => {
            if (boDefIds) {
              boDefIds += ','
            }
            boDefIds += boData.boDefId
          })
          //根据当前表单bo获取对应套打模板列表
          this.$http
            .get(
              window.context.form +
                '/form/printTemplate/v1/getPrintListByBoDefIds?boDefIds=' +
                boDefIds
            )
            .then(res => {
              this.wordPrintTemplateList = res.data
            })
        }
      }
    },
    wordPrintTemplateChange(value, data) {
      if ((value, data)) {
        // this.field.options.wordPrintConf.templateId = data.templateId
        // this.field.options.wordPrintConf.templateName = data.templateName
        this.field.options.wordPrintConf.fileId = data.fileId
        this.field.options.wordPrintConf.fileName = data.fileName
      }
    },
    icons(icon) {
      if (this.field.ctrlType == 'button') {
        this.field.options.bindEventjson.icon = icon
      } else {
        this.field.options.customDialogjson.icon = icon
      }
    },
    scriptOk() {
      this.dialogScriptVisible = false
      if (!this.scriptText) {
        this.field.options.script = ''
        return
      }
      if (!this.isBnt) {
        this.field.options.script = Base64.encode(this.scriptText)
      } else {
        this.field.options.script = Base64.encode(this.scriptText)
      }
    },
    diyScriptVarChange(myValue) {
      this.$refs.myEditor.insertValue(myValue)
    },
    async diyScriptChange(myValue) {
      const myField = this.$refs.scriptText
      var value = myValue
      if (myField.selectionStart || myField.selectionStart === 0) {
        var startPos = myField.selectionStart
        var endPos = myField.selectionEnd
        this.scriptText =
          myField.value.substring(0, startPos) +
          value +
          myField.value.substring(endPos, myField.value.length)
        await this.$nextTick() // 这句是重点, 圈起来
        myField.focus()
        myField.setSelectionRange(endPos + value.length, endPos + value.length)
      } else {
        this.scriptText += value
      }
      if (this.diyScript) {
        this.diyScript = ''
      }
      if (this.extSys) {
        this.extSys = ''
      }
    },
    autoRunJSScript(isBnt) {
      if (isBnt) {
        this.isBnt = true
      }
      this.dialogScriptVisible = true
      if (!this.field.options.script) return
      this.scriptText = Base64.decode(this.field.options.script)
    },
    textClick(node) {
      var value = ''
      if (node.nodeType == 'field') {
        value = '{{data.' + node.path + '.' + node.name + '}}'
      } else if (node.nodeType == 'var') {
        value = '{' + node.desc + ':' + node.name + '}'
      }
      this.textValue = this.textValue + value
      this.explainContent = this.explainContent + value
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    // 对话框确定事件
    custDialogOk(isDialog) {
      //对话框返回值
      if (this.custDialogprop && this.field.ctrlType == 'dialog') {
        var mappingConf = []

        for (var key in this.custDialogprop) {
          mappingConf.push({
            from: key,
            target: [this.custDialogprop[key]],
            targetSub: [this.custDialogprop[key]]
          })
        }

        this.field.options.customDialogjson.custDialog.mappingConf = mappingConf

        //关联数据返回值对象
      } else if (this.custDialogprop && this.field.ctrlType == 'relation') {
        this.field.options.gangedBind = this.custDialogprop
      }
      this.dialogcustDialogVisible = false
    },
    closeCustDialog() {
      this.custDialogprop = {}
      if (this.custDialogprop && this.field.ctrlType == 'dialog') {
        this.field.options.customDialogjson.custDialog.mappingConf = this.dialogRebackValDefaultData
      } else if (this.custDialogprop && this.field.ctrlType == 'relation') {
        this.field.options.gangedBind = []
      }
      this.dialogcustDialogVisible = false
    },
    //对话框返回值解除绑定事件
    unbind(key) {
      for (var item in this.custDialogprop) {
        if (key == item) {
          this.$set(this.custDialogprop, key, '')
          delete this.custDialogprop[key]
        }
      }
    },
    //对话框change事件
    changeCustDialog() {
      const this_ = this
      this_.custDialogprop = {}
      this_.field.options.customDialogjson.custDialog.conditions = []
      this_.field.options.customDialogjson.custDialog.mappingConf = []
      this_.field.options.customDialogjson.custDialog.custQueryJson = []
      this_.field.options.customDialogjson.custDialog.selectNum = ''
      if (this_.customDialogs.length == 0) return
      if (this_.field.options.customDialogjson.custDialog.alias == null) {
        this_.field.options.customDialogjson.custDialog.conditions = []
        return
      }
      for (var i = 0, d; (d = this_.customDialogs[i++]); ) {
        if (d.alias == this_.field.options.customDialogjson.custDialog.alias) {
          this_.field.options.customDialogjson.custDialog.selectNum =
            d.selectNum //单选多选  1：单选。-1：多选
          let treeData
          if (d.style === 2) {
            let combineConfig = JSON.parse(d.combinationRule)
            let listDialog = this_.customDialogs.filter(
              item => item.alias === combineConfig.rightDialog
            )
            treeData = JSON.parse(listDialog[0].resultfield)
            this_.field.options.customDialogjson.custDialog.type = 'combiDialog'
          }
          if (d.listDialog && d.listDialog.resultfield) {
            treeData = eval('(' + d.listDialog.resultfield + ')')
            this_.field.options.customDialogjson.custDialog.type = 'combiDialog'
          }
          if (d.resultfield && d.resultfield !== '[]') {
            treeData = eval('(' + d.resultfield + ')')
            this_.field.options.customDialogjson.custDialog.type = 'custDialog'
          }
          for (let q = 0, f; (f = treeData[q++]); ) {
            f.field = f.comment
          }
          this_.field.options.customDialogjson.resultField = treeData
          let conditionList = eval('(' + d.conditionfield + ')')
          this_.field.options.customDialogjson.custDialog.conditions = []
          //只处理类型等于1的对话框参数（defaultType：1：用户输入，2：固定值 ，3：参数传入）
          if (conditionList && conditionList.length > 0) {
            for (let j = 0, c; (c = conditionList[j++]); ) {
              if (c.defaultType == '3') {
                let has = false
                if (!has)
                  this_.field.options.customDialogjson.custDialog.conditions.push(
                    c
                  )
              }
            }
          }
        }
      }
    },
    // 刷新对话框配置
    refreshDialogConfig() {
      this.$refs.htLoadData.getData()
      if (this.customDialogs.length == 0) return
      if (this.field.options.customDialogjson.custDialog.alias == null) {
        this.field.options.customDialogjson.custDialog.conditions = []
        return
      }
      let currentDialog = this.customDialogs.find(item => {
        return (
          item.alias === this.field.options.customDialogjson.custDialog.alias
        )
      })
      if (!currentDialog) {
        return
      }
      this.field.options.customDialogjson.custDialog.selectNum =
        currentDialog.selectNum //单选多选  1：单选。-1：多选
      let treeData
      if (currentDialog.style === 2) {
        let combineConfig = JSON.parse(currentDialog.combinationRule)
        let listDialog = this.customDialogs.filter(
          item => item.alias === combineConfig.rightDialog
        )
        treeData = JSON.parse(listDialog[0].resultfield)
        this.field.options.customDialogjson.custDialog.type = 'combiDialog'
      }
      if (currentDialog.listDialog && currentDialog.listDialog.resultfield) {
        treeData = eval('(' + currentDialog.listDialog.resultfield + ')')
        this.field.options.customDialogjson.custDialog.type = 'combiDialog'
      }
      if (currentDialog.resultfield && currentDialog.resultfield !== '[]') {
        treeData = eval('(' + currentDialog.resultfield + ')')
        this.field.options.customDialogjson.custDialog.type = 'custDialog'
      }
      for (let q = 0, f; (f = treeData[q++]); ) {
        f.field = f.comment
      }
      this.field.options.customDialogjson.resultField = treeData
      let conditionList = eval('(' + currentDialog.conditionfield + ')')
      let newCondition = []
      //只处理类型等于1的对话框参数（defaultType：1：用户输入，2：固定值 ，3：参数传入）
      if (conditionList && conditionList.length > 0) {
        for (let j = 0, c; (c = conditionList[j++]); ) {
          if (c.defaultType == '3') {
            newCondition.push(c)
          }
        }
      }
      newCondition.forEach((item, index) => {
        let oldItem = this.field.options.customDialogjson.custDialog.conditions.find(
          sub => {
            return (
              sub.field === item.field && sub.defaultType === item.defaultType
            )
          }
        )
        if (oldItem) {
          newCondition[index] = oldItem
        }
      })
      this.field.options.customDialogjson.custDialog.conditions = newCondition
      this.$message.info('更新配置成功！点击保存表单后生效。')
    },
    custDialogClick() {
      this.dialogcustDialogVisible = true
      var initConf = this.field.options.customDialogjson.custDialog.mappingConf
      this.custDialogprop = {}
      if (initConf) {
        for (var i = 0, c; (c = initConf[i++]); ) {
          if (!c) continue
          var target = c.target
          if (target) target = target.join(',')
          this.custDialogprop[c.from] = target

          var targetSub = c.targetSub
          if (targetSub) targetSub = targetSub.join(',')
          this.custDialogprop[c.from] = targetSub
        }

        this.dialogRebackValDefaultData = initConf
      }
      this.field.options.customDialogjson.resultField.forEach(item => {
        if (item.hasOwnProperty('fillBackType') && item.fillBackType) {
          item.fillBackType = item.fillBackType
        } else {
          this.$set(item, 'fillBackType', 1)
        }
      })
    },
    changeFieldBind(val) {
      this.isShowOrgSelector = [
        'eip-user-selector',
        'eip-org-selector',
        'eip-post-selector'
      ].includes(val)
      if (
        !this.field ||
        !this.field.options ||
        !this.field.options.selector ||
        !this.field.options.selector.type
      )
        return
      var alias = this.field.options.selector.type.alias,
        oldBind = this.field.options.bind
      if (!alias) {
        this.field.options.bind = []
        return
      }
      if (
        oldBind &&
        oldBind.length > 0 &&
        this.field.options.bind[0].alias == alias
      )
        return
      var keyValues = []
      for (var i = 0; i < this.selectors.length; i++) {
        if (alias == this.selectors[i].alias) {
          var fields = this.selectors[i].fields
          for (var j = 0; j < fields.length; j++) {
            keyValues.push({
              alias: alias,
              key: fields[j].key,
              value: fields[j].value
            })
          }
        }
      }
      this.field.options.bind = []
      this.field.options.bind = keyValues
      //切换选择器类型时清空过滤范围配置信息
      this.$set(this.field.options, 'limitSelectionRange', false)
      this.$set(this.field.options, 'range', {
        type: '',
        orgs: [],
        policy: [],
        roles: []
      })
      this.$set(
        this.field.options,
        'filterRange',
        JSON.stringify({
          type: '',
          orgs: [],
          policy: [],
          roles: []
        })
      )
      this.selectedOrg = []
    },
    linkageOk() {
      if (this.field.ctrlType == 'select') {
        if (this.linkage.length == 0) {
          this.dialogLinkageVisible = false
          this.field.options.linkage = []
        } else {
          try {
            this.linkage.forEach(column => {
              column.effect.forEach(effects => {
                if (effects.type && (effects.target || effects.targetSub)) {
                  this.dialogLinkageVisible = false
                  this.field.options.linkage = [...this.linkage]
                  // Object.assign(this.field.options.linkage, this.linkage);
                } else {
                  this.$message({message: '请将信息填写完整', type: 'warning'})
                  throw new Error('breakForEach')
                  return false
                }
              })
            })
          } catch (e) {
            if (e.message != 'breakForEach') throw e
          }
        }
      } else {
        this.dialogLinkageVisible = false
        this.field.options.linkage = [...this.linkage]
        // Object.assign(this.field.options.linkage, this.linkage);
      }
    },
    addRows() {
      this.linkage.push({
        value: '',
        effect: [
          {
            linkageType: 'field',
            validateObj: {
              fieldPath: this.field.fieldPath,
              options: {
                validateList: [],
                validate: '',
                validateType:
                  'confirmed|email|regex|id_card|min|max|min_value|max_value|isAfter|isBefore|isStart|isEnd|numeric|between|is|digits|mobile|required|alpha_spaces|alpha_dash|alpha_num|alpha|method'
              }
            }
          }
        ]
      })
    },
    //打开联动设置对话框
    openLinkage() {
      this.subTables = []
      for (let i = 0; i < this.allBoData.length; i++) {
        if (
          this.allBoData[i].childType &&
          this.allBoData[i].childType == 'sub'
        ) {
          this.subTables.push(this.allBoData[i])
        }
      }
      if (this.field.options.linkage && this.field.options.linkage.length > 0) {
        this.linkage = [...this.field.options.linkage]
      } else {
        this.linkage = []
      }
      this.dialogLinkageVisible = true
    },
    // 当字段与关联查询绑定后，将关联查询中多余的属性删除
    slimCustomQuery(customQuery) {
      if (customQuery && customQuery.constructor == Object) {
        // 删除多余的属性
        delete customQuery['id']
        delete customQuery['createTime']
        delete customQuery['pkVal']
        delete customQuery['objName']
        delete customQuery['needPage']
        delete customQuery['pageSize']
        delete customQuery['dsalias']
        delete customQuery['dataParam']
        delete customQuery['sortfield']
        delete customQuery['diySql']
        delete customQuery['isTable']
        delete customQuery['sqlBuildType']
        // delete customQuery["dsType"];
        delete customQuery['url']
        delete customQuery['header']
        delete customQuery['requestType']
        delete customQuery['pageKey']
        delete customQuery['pageSizeKey']
        delete customQuery['totalKey']
        delete customQuery['listKey']
      }
    },
    //选择下拉框控件并绑定关联查询
    setSelectQuery(alias, index) {
      const _this = this
      _this.customQuerys.forEach(item => {
        //判断选择的关联查询是否存在
        if (alias == item.alias) {
          if (typeof item.conditionfield == 'string') {
            item.conditionfield = JSON.parse(item.conditionfield) //parseToJson(item.customQuery.conditionfield);
            item.resultfield = JSON.parse(item.resultfield) // parseToJson(item.customQuery.resultfield);
            item.conditionfield.forEach(res => {
              _this.$set(res, 'fieldPath', '') //关联查询条件字段绑定的表单参数路径
            })
            item.resultfield.forEach(res => {
              _this.$set(res, 'fieldPath', '') //关联查询返回字段绑定的表单参数路径
            })
          }
          //把当前对象克隆一份到控件属性配置
          Object.assign(
            _this.field.options.customQuery.custQueryJson[index],
            item
          )
          // 删除多余属性
          _this.slimCustomQuery(
            _this.field.options.customQuery.custQueryJson[index]
          )
        }
      })
    },
    //打开下拉框绑定关联查询弹框
    showSelectQueryDialog(custQueryJson, type) {
      this.$emit('basicsPropertyShowSelectQueryDialog')
      return
      //初始化关联查询用到的实体map
      type === 'linkedQuery' && this.initQueryEntMap()
      this.$nextTick(() => {
        if (type === 'linkedQuery') {
          this.$refs.linkedQueryDialog.showDialog(custQueryJson)
        } else {
          this.$refs.selectQueryDialog.showDialog(custQueryJson)
        }
      })
    },
    //保存关联查询数据
    saveCustQueryJson(json) {
      this.field.options.customQuery.custQueryJson = json
    },
    saveLinkedQueryCustQueryJson(json) {
      this.$set(this.field.options.customQuery, 'custQueryJson', json)
    },
    initQueryEntMap() {
      if (this.mainBoFields && this.mainBoFields.length > 0) {
        this.queryEntMap['main'] = this.mainBoFields
      }
      if (this.subTables && this.subTables.length > 0) {
        this.queryEntMap['sub'] = this.subTables
      }
      if (this.sunTablesMap && Object.keys(this.sunTablesMap).length !== 0) {
        let sunTables = []
        for (var key in this.sunTablesMap) {
          if (this.sunTablesMap.hasOwnProperty(key)) {
            sunTables.push(...this.sunTablesMap[key])
          }
        }
        this.queryEntMap['sun'] = sunTables
      }
    },
    //打开对话框绑定关联查询弹框
    showDialogQuery() {
      // this.dialogQuery = true
      this.$emit('basicsPropertyShowSelectQueryDialog')
    },
    //选择对话框控件并绑定关联查询
    setDialogQuery(alias, index) {
      const _this = this
      _this.customQuerys.forEach(item => {
        //判断选择的关联查询是否存在
        if (alias == item.alias) {
          if (typeof item.conditionfield == 'string') {
            item.conditionfield = JSON.parse(item.conditionfield) //parseToJson(item.customQuery.conditionfield);
            item.resultfield = JSON.parse(item.resultfield) // parseToJson(item.customQuery.resultfield);
            item.conditionfield.forEach(res => {
              _this.$set(res, 'fieldPath', '') //关联查询条件字段绑定的表单参数路径
            })
            item.resultfield.forEach(res => {
              _this.$set(res, 'fieldPath', '') //关联查询返回字段绑定的表单参数路径
            })
          }
          //把当前对象克隆一份到控件属性配置
          Object.assign(
            _this.field.options.customDialogjson.custDialog.custQueryJson[
              index
            ],
            item
          )
          _this.slimCustomQuery(
            _this.field.options.customDialogjson.custDialog.custQueryJson[index]
          )
        }
      })
    },
    //选择动态选项
    async setCurrentCustomQuery(type = '') {
      if (type == 'refresh') {
        // 获取关联查询配置
        await this.$refs.basicsCustomQueryRef.getData()
      }
      if (type != 'refresh') {
        this.field.options.bind = this.field.options.bind.map(item => {
          item.bindType && delete item.bindType
          return {
            ...item,
            fieldPath: ''
          }
        })
      }
      if (
        !this.field.options.customQuery.alias ||
        !this.customQuerys ||
        !this.customQuerys.length
      ) {
        return
      }
      const _this = this
      if (type != 'refresh') {
        _this.field.options.customQuery.custQueryJson = []
      }
      const cloneCurrentQuery = _.cloneDeep(this.customQuerys)
      let currentQuery = cloneCurrentQuery.find(item => {
        return item.alias === this.field.options.customQuery.alias
      })
      if (!currentQuery) {
        return
      }
      if (typeof currentQuery.conditionfield == 'string') {
        currentQuery.conditionfield =
          JSON.parse(currentQuery.conditionfield) || [] //parseToJson(item.customQuery.conditionfield);
        currentQuery.resultfield = JSON.parse(currentQuery.resultfield) // parseToJson(item.customQuery.resultfield);
      }
      var bind = []
      currentQuery.conditionfield.forEach(res => {
        _this.$set(res, 'fieldPath', '') //关联查询条件字段绑定的表单参数路径
        if (res.defaultType == 1) {
          bind.push(res)
        }
      })
      currentQuery.resultfield.forEach(res => {
        _this.$set(res, 'fieldPath', '') //关联查询返回字段绑定的表单参数路径
      })
      // 如果是刷新配置时
      if (type === 'refresh') {
        currentQuery.conditionfield.forEach((k, i) => {
          let oldItem = this.field.options.customQuery.conditionfield.find(
            sub => {
              return sub.field === k.field
            }
          )
          if (oldItem) {
            currentQuery.conditionfield[i] = oldItem
          }
        })
        currentQuery.resultfield.forEach((k, i) => {
          let oldItem = this.field.options.customQuery.resultfield.find(sub => {
            return sub.field === k.field
          })
          if (oldItem) {
            currentQuery.resultfield[i] = oldItem
          }
        })
        bind.forEach((k, i) => {
          let oldItem = this.field.options.bind.find(sub => {
            return sub.field === k.field
          })
          if (oldItem) {
            bind[i] = oldItem
          }
        })
        this.field.options.customQuery.conditionfield =
          currentQuery.conditionfield
        this.field.options.customQuery.resultfield = currentQuery.resultfield
        this.field.options.customQuery.name = currentQuery.name
        this.field.options.bind = bind
        this.$message.info('更新配置成功！点击保存表单后生效。')
        return
      }
      //把当前对象克隆一份到控件属性配置
      this.$set(_this.field.options, 'customQuery', {
        ..._this.field.options.customQuery,
        ...currentQuery
      })
      // Object.assign(_this.field.options.customQuery, currentQuery)
      //删除掉无效的参数
      _this.slimCustomQuery(_this.field.options.customQuery)

      this.field.options.bind = bind
      //切换关联数据设置项或下拉框动态值 同时清空绑定返回值、参数绑定、选项绑定
      this.custDialogprop = {}
      this.field.options.gangedBind = {}
      this.field.options.customQuery.valueBind = ''
      this.field.options.customQuery.labelBind = ''
      if (this.field.options.customQuery.PId) {
        this.field.options.customQuery.PId = ''
      }
    },
    //清除动态选项关联配置
    clearCurrentCustomQuery() {
      this.field.options.bind = []
    },
    //切换固定选项和动态选项时
    dynamicClick() {
      this.customQueryUrl = '/form/customQuery/v1/list'
      this.field.options.customQuery = {
        valueBind: '',
        labelBind: '',
        conditionfield: [],
        custQueryJson: []
      }
      this.field.options.bind = []
      this.field.options.options = []
      if (this.field.options.choiceType == 'dynamic') {
        this.field.options.linkage = []
      }
    },
    //数据字典列表
    afterDicLoadData(data) {
      this.dicData = data.rows
    },
    dicClick(visible) {
      if (this.dicData && this.dicData.length > 0) {
        this.dicData = Object.assign([], this.dicData)
      }

      // form.getCategory('DIC', data => {
      //   this.dicData = data.data
      // })
      req
        .get(
          window.context.portal +
            '/sys/sysType/v1/getByParentIdOrLikeName?catId=5'
        )
        .then(res => {
          if (res && res.status == 200) {
            this.dicData = res.data
          } else {
            this.$message({
              type: 'error',
              message: '分类加载失败'
            })
          }
        })
    },
    tagClick(visible) {
      if (this.tagData && this.tagData.length > 0) return
      form.getCategory('TAG', data => {
        const currentObj = data.data.filter(item => item.typeKey === 'bdbq')[0]
        if (currentObj) {
          this.tagData = currentObj.children
        }
      })
    },
    handleTagChange(val) {
      if (!this.field.options.tag) {
        this.$set(this.field.options, 'tagName', '')
      }
    },
    dicNodeClick(data) {
      //由于只有一个分类，系统默认字典分类就是5
      if (data.parentId == '5') {
        return
      }
      this.field.options.dic = data.typeKey
      this.field.options.dicName = data.name
      this.$refs.dicSelect.blur()
    },
    tagNodeClick(data) {
      this.field.options.tag = data.typeKey
      this.field.options.tagName = data.name
      this.$refs.tagSelect.blur()
    },
    afterCustomQueryLoadData(data) {
      this.customQuerys = data.rows
    },
    afterCustomDialogLoadData(data) {
      this.customDialogs = data
    },
    afterCustomChartLoadData(data) {
      this.customCharts = data.rows
    },
    //判断控件是否有特殊基础属性
    isBasicsProperty(basicsProperty, alias) {
      if (basicsProperty && alias) {
        const basicsPropertys = basicsProperty.split('|')
        if (basicsPropertys.includes(alias)) {
          return true
        } else {
          return false
        }
      }
      return false
    },
    clearFunction() {
      this.field.options.mathExp = undefined
    },
    updateCustDialogprop() {
      this.$forceUpdate()
    },
    addEffectObj(effect, effectObj) {
      let cloneObj = JSON.parse(JSON.stringify(effectObj))
      if (cloneObj.validateObj) {
        if (cloneObj.validateObj.options) {
          cloneObj.validateObj.options.validateList = []
        }
      }
      effect.push(cloneObj)
    },
    copyEffectObj(effect, effectObj) {
      effect.push(JSON.parse(JSON.stringify(effectObj)))
    },
    copyEffect(column) {
      this.linkage.push(JSON.parse(JSON.stringify(column)))
    },
    filteredAllBoData() {
      this.field
    },
    getEffectsTarget(group, item) {
      let groupName = group.name === 'noAttrField' ? item.tableName : group.name
      return item.path + '.' + item.name + '|' + groupName + '.' + item.name
    },
    handleLinkageTypeChange(ev) {
      if (ev.linkageType == 'field') {
        delete ev.targetSub
      } else if (ev.linkageType == 'subTable') {
        delete ev.target
        delete ev.validateObj.fieldPath
      }
    },
    showScriptDialog(bind, selectType) {
      this.selectType = selectType
      this.bindField = bind

      this.$refs.eipScriptDialog.showDialog()
    },
    handleScriptSelected(script, name) {
      let field
      if (this.selectType == 'dialog') {
        field = 'bind'
      } else {
        field = 'fieldPath'
      }

      this.bindField[field]
        ? (this.bindField[field] += script)
        : (this.bindField[field] = script)

      this.$forceUpdate()
    },
    //选择动态选项
    setCurrentCustomChart() {
      const _this = this
      _this.field.options.customQuery.custQueryJson = []
      for (const item of _this.customCharts) {
        if (_this.field.options.chartAlias === item.alias) {
          if (typeof item.conditionfield === 'string') {
            item.conditionfield = JSON.parse(item.conditionfield) //parseToJson(item.customQuery.conditionfield);
          }
          //把当前对象克隆一份到控件属性配置
          Object.assign(_this.field.options.customQuery, item)
          _this.slimCustomQuery(_this.field.options.customQuery)
          break
        }
      }
      //删除掉无效的参数
      var bind = []
      this.field.options.customQuery.conditionfield.forEach(item => {
        if (item.defaultType === '1') {
          bind.push(item)
        }
      })
      this.field.options.bind = bind
      //切换关联数据设置项或下拉框动态值 同时清空绑定返回值、参数绑定、选项绑定
      this.custDialogprop = {}
      this.field.options.gangedBind = {}
      this.field.options.customQuery.valueBind = ''
      this.field.options.customQuery.labelBind = ''
      if (this.field.options.customQuery.conditionfield) {
        this.field.options.customQuery.conditionfield.forEach(element => {
          this.$set(element, 'fieldPath', '')
        })
      }
    },

    chartClick() {
      if (!this.field.options.alias || this.field.options.alias == '') {
        this.$message.warning('请先选择自定义图表')
        return
      }
      if (this.data.options.selectList) {
        this.selectList = JSON.parse(
          JSON.stringify(this.data.options.selectList)
        )
      }
      this.chartConditionfield = []
      form.getCustomChartById(this.field.options.alias).then(res => {
        if (res.conditionfield) {
          this.chartConditionfield = JSON.parse(res.conditionfield)
        } else {
          this.$message.warning('改图表没有查询设置')
          return
        }
        this.dialogChartVisible = true
      })
    },
    confirmChart() {
      if (this.selectList && this.selectList.length > 0) {
        for (var i = 0; i < this.selectList.length; i++) {
          if (
            this.selectList[i].selectField == '' ||
            this.selectList[i].bindSelectd == ''
          ) {
            this.$message.warning(
              '关联查询第' + (i + 1) + '行表单字段、数据报表字段为空！'
            )
            return false
          }
        }
      }
      let resField = this.isRepeat(this.selectList, 'selectField')
      if (!resField) {
        this.$message.warning('关联查询字段只能绑定唯一的表单字段')
        return false
      }
      let resultSelect = this.isRepeat(this.selectList, 'bindSelectd')
      if (!resultSelect) {
        this.$message.warning('关联查询字段只能绑定唯一的表单列表字段')
        return false
      }
      this.data.options.selectList = JSON.parse(JSON.stringify(this.selectList))
      this.dialogChartVisible = false
    },
    addSelectList() {
      if (this.tablefields) {
        for (let i = 0; i < this.tablefields.length; i++) {
          if (this.tablefields[i].nodeType == 'main') {
            let children = this.tablefields[i].children
            if (children) {
              if (this.selectList.length >= children.length) {
                this.$message.warning('不能添加更多的关联查询字段！')
                return false
              }
            }
          }
        }
      }
      let selectObj = {selectField: '', bindSelectd: ''}
      this.selectList.push(selectObj)
    },
    isRepeat(arr, key) {
      var obj = {}
      for (let i = 0; i < arr.length; i++) {
        if (obj[arr[i][key]]) {
          return false
        } else {
          obj[arr[i][key]] = arr[i]
        }
      }
      return true
    },
    // 自定义默认值是富文本时，需传入base64转换后的值
    customValueChange(value) {
      this.$forceUpdate()
      if (this.field.ctrlType === 'textarea' && this.field.options.isEditor) {
        this.field.options.customValueBase64 = Base64.encode(value)
      }
    },
    getBoAttributeByFieldPath(fieldPath) {
      if (this.boAttributeMap[fieldPath]) {
        return this.boAttributeMap[fieldPath]
      }
      try {
        let pathArr = fieldPath.split('.')
        const mainDefAlias = pathArr[0]
        const def = this.boDefData.children.find(
          item => item.boDefAlias == mainDefAlias
        )
        let result
        //主表
        if (pathArr.length == 2) {
          result = def.children.find(
            item => item.nodeType == 'field' && item.name == pathArr[1]
          )
        } else if (pathArr.length == 3) {
          let sub = def.children.find(
            item =>
              item.nodeType == 'sub' &&
              item.name == pathArr[1].replace('sub_', '')
          )
          result = sub.children.find(
            item => item.nodeType == 'field' && item.name == pathArr[2]
          )
        } else if (pathArr.length == 4) {
          let sub = def.children.find(
            item =>
              item.nodeType == 'sub' &&
              item.name == pathArr[1].replace('sub_', '')
          )
          let sun = sub.children.find(
            item =>
              item.nodeType == 'sub' &&
              item.name == pathArr[2].replace('sub_', '')
          )
          result = sun.children.find(
            item => item.nodeType == 'field' && item.name == pathArr[3]
          )
        }
        if (result) {
          this.boAttributeMap[fieldPath] = result
          return result
        }
      } catch (e) {
        return {}
      }
    },
    changeTime(val) {
      this.$forceUpdate() //需要使用强制更新
      this.field.options.customInput = val //赋值
    },
    iconSelected(data) {
      this.$refs[data].choiceIcon()
    },
    optionEditI18n(item) {
      if (!item.key) {
        this.$message.warning('请填写选项值，再配置国际化')
        return
      }
      this.i18nMessageKey =
        (this.field.fieldPath || this.field.path) +
        '.' +
        this.field.ctrlType +
        '.' +
        item.key
      item.i18nKey = this.i18nMessageKey
      this.$refs.i18nMessageEdit.handleOpen()
    },
    changeShowCompanys(val) {
      this.field.options.filterthousandBit = false
      this.field.options.filtercurrency = false

      if (val == 'filterthousandBit') {
        this.field.options.filterthousandBit = true
        this.field.options.controls = false
      }
      if (val == 'filtercurrency') {
        this.field.options.filtercurrency = true
      }
    }
  },
  watch: {
    data(val) {
      if (val.options && val.options.selector) {
        if (!val.options.selector.isSingle) {
          this.$set(val.options.selector, 'isSingle', false)
        }
        if (!val.options.selector.selectCurrent) {
          this.$set(val.options.selector, 'selectCurrent', false)
        }
      }

      if (val.options && !val.options.custDefaultSelectVal) {
        let value =
          val.ctrlType === 'number' || val.ctrlType === 'currency'
            ? 'formulaScript'
            : 'custom'
        this.$set(val.options, 'custDefaultSelectVal', value)
      }
      this.field = val
    },
    field: {
      handler(val) {
        this.$emit('update:data', val)
      },
      deep: true
    },
    'field.options.format': {
      handler(val) {
        if (val === 'yyyy-MM-dd') {
          this.dateType = 'date'
        } else {
          this.dateType = 'datetime'
        }
      },
      immediate: true
    },
    'field.options.wordPrintConf.templateId': {
      handler(val) {
        if (
          this.field.options.showPrint &&
          this.wordPrintTemplateList.length <= 0
        ) {
          //获取套打模板列表
          this.clickShowPrintModel('temp')
        }
      },
      immediate: true
    },
    'field.options.limitSelectionRange': {
      handler(val) {
        if (val) {
          this.getDimension()
          this.getRoleList()
        }
      },
      immediate: true
    },
    'field.options.range': {
      handler(val) {
        if (val) {
          const rangeConfig = _.cloneDeep(val)
          this.selectedOrg = val.type === 'org' ? rangeConfig.orgs : []
          let orgs = rangeConfig.orgs
          if (val.type === 'org') {
            orgs = rangeConfig.orgs.map(item => {
              return {
                code: item.code,
                isCurrentAndLowerLevel: item.isCurrentAndLowerLevel
              }
            })
          }

          this.$set(
            this.field.options,
            'filterRange',
            JSON.stringify({...rangeConfig, orgs})
          )
        }
      },
      immediate: true,
      deep: true
    },
    'field.ctrlType': {
      handler(val) {
        if (
          val === 'selector' &&
          this.field.options.selector &&
          !this.field.options.selector.isSingle
        )
          this.$set(this.field.options.selector, 'isSingle', false)
      }
    },
    'field.options.decimalDigits': {
      handler(val) {
        //為了動態添加校驗小數位
        let validate = this.field.options.validate || ''
        let decimalDigits = validate.indexOf('decimalDigits_Num:')

        let shu = validate.indexOf('|', decimalDigits)
        if (decimalDigits !== -1) {
          this.field.options.validate =
            validate.slice(0, decimalDigits + 18) + val + validate.slice(shu)
        }
      },
      immediate: true
    },
    'field.options.file.accept': {
      handler(val) {
        if (!val || val.length == 0) {
          this.typeFieldActive = 'qbx'
          Object.keys(this.upLoadAcceptItemCheck).forEach(item => {
            this.upLoadAcceptItemCheck[item] = false
          })
        }
        if (val && val.length > 0) {
          this.upLoadAcceptItemCheck = {
            doc: false,
            img: false,
            vido: false
          }
          this.typeFieldActive = ''
          let vido = []
          let img = []
          let doc = []
          val.forEach((item, index) => {
            if (['JPG', 'JPEG', 'PNG', 'BMP', 'PDF'].includes(item)) {
              val.splice(index, 1)
            }

            if (this.upLoadAcceptList.doc.includes(item)) {
              doc.push(item)
            }
            if (this.upLoadAcceptList.img.includes(item)) {
              img.push(item)
            }
            if (this.upLoadAcceptList.vido.includes(item)) {
              vido.push(item)
            }
          })

          if (vido.length == this.upLoadAcceptList.vido.length) {
            this.$set(this.upLoadAcceptItemCheck, 'vido', true)
          }
          if (img.length == this.upLoadAcceptList.img.length) {
            this.$set(this.upLoadAcceptItemCheck, 'img', true)
          }
          if (doc.length == this.upLoadAcceptList.doc.length) {
            this.$set(this.upLoadAcceptItemCheck, 'doc', true)
          }

          if (
            val.length ==
            this.upLoadAcceptList.doc.length +
              this.upLoadAcceptList.img.length +
              this.upLoadAcceptList.vido.length
          ) {
            this.typeFieldActive = 'qx'
          }
        }
      },
      immediate: true,
      deep: true
    },
    'field.options.customQuery.treeDataMode': {
      handler(val) {
        if (this.field.ctrlType == 'dropdown') {
          if (val == 1) {
            if (!this.field.options.customQuery.pvalue) {
              this.field.options.customQuery.pvalue = 0
            }
          } else {
            this.field.options.customQuery.pvalue = ''
          }
        }
      },
      immediate: true,
      deep: true
    }
  }
}
</script>
<style lang="scss" scoped>
@import '@/assets/css/element-variables.scss';
@import '@/assets/css/form-editor.scss';
::v-deep {
  .explain-dialog {
    .el-dialog__body {
      display: flex;
      flex-direction: column;
      .form-var-select {
        margin-bottom: 20px;
      }
    }
  }
  .min-max_box {
    display: flex;
    align-items: center;
    .btn-pre {
      display: inline-block;
      width: 72px;
      text-align: center;
      background: #f5f7fa;
      border: 1px solid #dcdee0;
      border-right: none;
      line-height: 30px;
      height: 30px;
      border-radius: 2px 0px 0px 2px;
      color: #666666;
    }
    .elSelect,
    .el-input-number--small {
      width: calc(100% - 73px) !important;
      .el-input__inner {
        border-radius: 0 2px 2px 0;
      }
      .el-input-number__increase,
      .el-input-number__decrease {
        background: #f5f7fa;
        color: #666666;
      }
    }
    .inputs.ht-form-inputs__inline {
      width: 100%;
      .el-input-number--small {
        width: 100%;
      }
    }
  }
  .mix_select_box {
    display: flex;
    align-items: center;
    .btn-pre {
      display: inline-block;
      width: 88px;
      text-align: center;
      background: #f5f7fa;
      border: 1px solid #dcdee0;
      border-right: none;
      line-height: 30px;
      height: 30px;
      border-radius: 2px 0px 0px 2px;
      color: #666666;
    }
    /deep/.inputs .el-select {
      width: 220px;
    }
  }
  .width-height_box {
    align-items: center;
    .btn-pre {
      display: inline-block;
      width: 36px;
      text-align: center;
      background: #f5f7fa;
      border: 1px solid #dcdee0;
      border-right: none;
      line-height: 30px;
      height: 30px;
      border-radius: 2px 0px 0px 2px;
      color: #666666;
    }
    .el-input-number--small {
      width: calc(100% - 38px);
      .el-input__inner {
        border-radius: 0 2px 2px 0;
      }
      .el-input-number__increase,
      .el-input-number__decrease {
        background: #f5f7fa;
        color: #666666;
      }
    }
  }
}
.set-font-color {
  ::v-deep {
    .el-form-item__content {
      display: flex;
    }
  }
}
.btn-radio >>> .el-radio-button__inner {
  padding: 5px;
}
.btn-padding {
  padding: 5px;
}
.btn-radio {
  margin-left: 14px;
}
.btn-radio >>> .el-radio-button__inner {
  padding: 5px;
}
.choiceType-table td {
  padding: 3px;
}
.customQuery-inputs >>> .inputs,
.customQuery-inputs >>> .inputs .el-select {
  width: 100%;
}
.customQuery-inputs >>> .el-tree-node__expand-icon {
  position: absolute;
  right: 2%;
  display: inline-block !important;
}
.basics-property .el-form-item {
  margin-bottom: 0px;
}
.linkageTable-tr td {
  text-align: center;
}
.basics-property >>> .el-form-item {
  margin-bottom: 0px;
}
.basics-label >>> .el-form-item__label {
  text-align: center;
}
.custDialog-div {
  height: 28px;
  line-height: 28px;
  margin-bottom: 3px;
}
.custDialog-div .custDialog-btn {
  float: right;
  margin-right: 15px;
}
.custDialog-table td {
  padding: 5px;
}
>>> .custDialog-item {
  margin-bottom: 5px;
}
.file-checkbox .el-checkbox {
  margin-right: 10px;
}
.file-checkbox {
  margin-bottom: 15px;
  &:last-child {
    margin-bottom: 0;
  }
}
code {
  background-color: #f9f2f4;
  border-radius: 4px;
  color: #ca4440;
  font-size: 90%;
  padding: 2px 4px;
  //white-space: nowrap;
}
>>> .el-dialog__body {
  padding: 0px 20px;
  color: #606266;
  font-size: 14px;
  word-break: break-all;
}
.flex-line {
  display: flex;
  margin-bottom: 10px;
  > label {
    width: 30px;
    color: #606266;
  }
  > div {
    flex: 1;
  }
}
.rate-flex {
  display: flex;
  align-items: center;
  > .el-container {
    flex: inherit;
  }
  > button {
    margin-left: 10px;
  }
}
.margin-right {
  margin-right: 0;
}
.default-operate {
  margin-top: 10px;
  .default-operate__btn {
    width: 100%;
  }
}
::v-deep .el-form .el-collapse-item__content {
  text-align: center;
}
::v-deep .el-form-item__content {
  width: 100%;
  .optionList {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
    padding-bottom: 10px;
    .optionList-item {
      width: 88px;
      height: 32px;
      padding-right: 12px;
      text-align: right;
      font-size: 12px;
    }
  }
}
.returnVal {
  .el-form-item {
    display: flex;
    align-items: center;
    > .el-container {
      flex: inherit;
    }
    > button {
      margin-left: 10px;
    }
  }
  .margin-right {
    margin-right: 0;
  }
  .default-operate {
    margin-top: 10px;
    flex-wrap: wrap;
  }
}
.params-box {
  ::v-deep {
    .ht-form-item {
      flex-direction: column;
    }
  }
  .table-first-col {
    color: #6c7995;
    font-size: 12px;
    width: 100px;
  }
}
.selector-setting {
  display: flex;
  > .inputs {
    flex: 1;
    margin-right: 10px;
  }
  ::v-deep .selector-setting_checkbox {
    .el-checkbox-button__inner {
      border-radius: 4px;
      border: 1px solid #dcdee0;
    }
  }
}
.selector-return {
  color: #6c7995;
  margin-bottom: 12px;
  > span {
    margin-right: 4px;
  }
}
.dynamic-table {
  > thead > tr > th {
    background: #f4f4f4;
    text-align: center;
    padding: 5px 0;
  }
  > tbody > tr > td {
    padding: 5px;
    text-align: center;
  }
}
.process-line {
  display: flex;
  align-items: center;
  background: #f2f2f2;
  margin-bottom: 10px;
  padding: 4px 8px;
  > div {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #333;
  }
  > i {
    cursor: pointer;
    width: 40px;
    text-align: center;
  }
}
::v-deep .process-line_item {
  .el-form-item__content {
    overflow: hidden;
  }
}
::v-deep .select-dialog-line {
  display: flex;
  align-items: center;
  .inputs.ht-form-inputs__inline {
    flex: 1;
    width: 180px;
  }
  .el-button {
    padding: 8px;
    margin-left: 2px;
  }
}
/* 不换行的表单项 */
.form-inline-item {
  display: flex;
  flex-wrap: nowrap !important;
  /deep/.el-form-item__label {
    text-align: left;
  }
}

.ht-form-item-colon ::v-deep .el-form-item__label::after {
  content: '';
}
.ht-form-item-colon >>> .el-form-item__label:after {
  content: '';
}
.style__tabs-btn {
  border-style: dashed !important;
  width: 100%;
}
.icon-selected {
  display: flex;
  align-items: center;
  border: 1px solid #dcdee0;
  text-align: center;
  height: 30px;
  line-height: 30px;
  width: 118px;
  margin-left: 14px;
  .icon {
    display: inline-block;
    width: 56px;
    background: #f5f7fa;
    height: 30px;
    line-height: 30px;
  }
  .icon-box {
    width: 16px;
    padding: 12px;
  }
}

.color-selected {
  display: flex;
  position: relative;
  align-items: center;
  border: 1px solid #dcdee0;
  text-align: center;
  height: 30px;
  line-height: 30px;
  margin-right: 10px;
  .color {
    display: inline-block;
    padding: 0 10px;
    background: #f5f7fa;
  }
  .color2 {
    display: inline-block;
    padding: 0 10px;
    background: #f5f7fa;
    width: 56px;
    height: 30px;
    line-height: 30px;
  }
  .el-icon-caret-bottom {
    position: absolute;
    right: 7px;
  }
  /deep/.el-color-picker--mini {
    height: 20px;
    margin: 0 12px;
  }
  /deep/.el-color-picker--mini .el-color-picker__trigger {
    height: 20px;
    width: 32px;
    padding: 0 !important;
  }
}
.score-set {
  .icon-selected {
    margin-left: 0;
    .close-icon {
      cursor: pointer;
    }
    .icon {
      height: 30px;
      line-height: 30px;
    }
  }
}

/deep/.el-input-group__append,
/deep/.el-input-group__prepend {
  padding: 0 10px;
}
.grid-radio-group {
  /deep/.el-radio-button__inner {
    width: 50px;
  }
}
.autocomplete-list {
  margin-top: 5px;
  li {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-around;
    flex-wrap: wrap;
    margin-bottom: 5px;
    padding: 8px;
    background: #f9f9f9;
  }
}
.linkageTable-title {
  background: #f5f7fa;
  color: rgb(51, 51, 51);
  font-weight: bold;
}
/deep/.el-date-editor.el-input,
.el-date-editor.el-input__inner {
  width: 100%;
}
/deep/.el-radio-button:first-child .el-radio-button__inner {
  border-radius: 2px 0 0 2px;
}

/deep/.el-radio-button:last-child .el-radio-button__inner {
  border-radius: 0 2px 2px 0;
}
/deep/.el-input-group__append,
.el-input-group__prepend {
  border-radius: 2px;
}
.radio4 .el-radio-group {
  width: 100%;
}
.radio4 .el-radio-group {
  /deep/.el-radio-button {
    width: 50% !important;
  }
  /deep/.el-radio-button__inner {
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    text-align: center;
  }
}
.isSingle-class {
  position: absolute;
  left: 200px;
  width: 120px;
  top: -40px;
}
.basics-form {
  ::v-deep {
    .el-form-item.el-form-item--small.horizontal-form-item {
      margin-bottom: 16px;
      .el-form-item__label {
        width: 100px !important;
      }
    }
    .hide-validate-start.is-required:not(.is-no-asterisk)
      > .el-form-item__label:before,
    .hide-validate-start.is-required:not(.is-no-asterisk)
      .el-form-item__label-wrap
      > .el-form-item__label:before {
      content: '';
    }
    .hide-validate-start {
      .el-input.is-disabled .el-input__inner {
        border-color: #e4e7ed;
      }
    }
    .role-select {
      .el-select__tags {
        max-width: 136px !important;
        flex-wrap: nowrap;
      }
    }
    .el-tag.el-tag--danger {
      .el-tag__close {
        background-color: rgba(229, 85, 85, 0.26);
        &:hover {
          background-color: rgba(229, 85, 85, 1);
        }
      }
    }
  }
}
.option-item-value {
  ::v-deep.el-input-group {
    vertical-align: middle;
  }
}
.processForecast {
  ::v-deep .el-radio-group {
    display: flex;
  }
  ::v-deep {
    .ht-form-inputs__inline,
    .el-input-number {
      width: 100%;
    }
  }
}
.dataAlign {
  display: block !important;
  position: relative;
  ::v-deep .el-form-item__content {
    position: absolute;
    right: 0;
    width: auto !important;
    top: 0;
  }
  .ht-form-inputs__inline {
    width: auto !important;
  }
  ::v-deep .grid-radio-group {
    .is-active {
      .el-radio-button__inner {
        color: #409eff;
      }
    }
    .el-radio-button__inner {
      background: #fff;
      padding: 6px 10px;
      color: #333;

      i {
        font-size: 20px;
        font-weight: bolder;
      }
    }
  }
}
.location {
  ::v-deep .el-radio-group {
    width: 100%;
    .el-radio-button {
      width: 50%;
    }
    .el-radio-button__inner {
      width: 100%;
      background: #fff;
      color: black;
    }

    .is-active {
      .el-radio-button__inner {
        color: #409eff;
      }
    }
    .el-radio-button__inner {
      font-size: 14px;
    }
  }
}
.length-wrap {
  display: flex;
  align-items: center;
}

/deep/.el-tree-node__content {
  padding: 12px 0;
}

/deep/.el-tree-node__content > li {
  cursor: move;
}

.icon-drag1 {
  color: #409eff;
  margin-right: 8px;
}
.changeColor {
  background: #409eff;
  border-color: #409eff;
  color: #fff;
}
</style>
