vue2-client 1.16.25 → 1.16.27

package/src/base-client/components/common/CreateQuery/CreateQueryItem.vue

@@ -1,1014 +1,1014 @@
-<template>
-  <a-modal
-    :destroyOnClose="true"
-    :visible="visible"
-    :width="1250"
-    :zIndex="1001"
-    title="数据字段配置"
-    @cancel="modelCancel"
-    @ok="submitItem">
-    <a-form-model
-      ref="itemForm"
-      :model="item"
-      :rules="itemRules"
-      layout="vertical">
-      <a-row :gutter="16">
-        <a-col :span="6">
-          <a-card :bodyStyle="bodyStyle" title="基本属性">
-            <a-divider style="font-size: 14px;margin-top: 0">字段信息</a-divider>
-            <a-form-model-item label="标签名称" prop="title">
-              <a-input v-model="item.title" placeholder="请输入标签名称"/>
-            </a-form-model-item>
-            <a-form-model-item
-              label="字段名称"
-              prop="key">
-              <a-input ref="key" v-model="item.key" :disabled="keyDisabled" placeholder="请输入字段名">
-                <a-popover slot="suffix" placement="bottom" title="关于字段名称">
-                  <template slot="content">
-                    <p>设置数据字段的名称</p>
-                    <p>用作SQL查询时为<span style="font-weight: bold">表别名.数据列名</span>的格式，如：i.id</p>
-                    <p style="font-weight: bold">注意事项：</p>
-                    <p>由于v2和v3版本产品中一些数据字段有差异，为了增强查询配置在不同版本产品中的通用性，
-                      现在查询配置中的数据字段现在可以通过`$`前缀指定通用兼容名了</p>
-                    <p>通过指定数据字段为通用兼容名，查询配置将会在解析生成SQL时根据配置的产品版本自动适配实际的字段名。</p>
-                    <p>目前支持的兼容性字段见下表：</p>
-                    <table>
-                      <thead>
-                        <tr><th>数据表</th><th>字段含义</th><th>v2产品</th><th>v3产品</th><th>通用兼容名</th></tr>
-                      </thead>
-                      <tbody>
-                        <tr><td>t_userfiles</td><td>表档案主键</td><td>f_user_id</td><td>f_userfiles_id</td><td>$userid</td></tr>
-                      </tbody>
-                    </table>
-                  </template>
-                  <a-icon style="color: rgba(0,0,0,.45)" type="info-circle"/>
-                </a-popover>
-              </a-input>
-            </a-form-model-item>
-            <a-form-model-item
-              v-if="item.formType ==='addressSearch'"
-              label="坐标字段名">
-              <a-input :disabled="true" :value="`${item.key}_lng_lat`">
-                <a-popover slot="suffix" placement="bottom" title="坐标字段名">
-                  <template slot="content">
-                    <p>表单类型为地点搜索框时：</p>
-                    <p>新增/修改表单时,字段名称会存放地址名称,坐标字段名会存放坐标信息</p>
-                  </template>
-                  <a-icon style="color: rgba(0,0,0,.45)" type="info-circle"/>
-                </a-popover>
-              </a-input>
-            </a-form-model-item>
-            <a-divider style="font-size: 14px;margin-top: 0">数据模式</a-divider>
-            <a-form-model-item
-              prop="dataMode"
-              style="margin-top: 10px;">
-              <a-checkbox-group v-model="dataModeArrayData" :disabled="dataModeDisabled" @change="dataModeArrayDataChange" :options="dataModeTypeV"/>
-            </a-form-model-item>
-          </a-card>
-        </a-col>
-        <a-col v-show="!dataMode.group && (dataMode.queryForm || dataMode.addOrEditForm || dataMode.table || dataMode.sqlQueryCondition)" :span="9">
-          <a-card v-if="dataMode.queryForm || dataMode.addOrEditForm || dataMode.table || dataMode.sqlQueryCondition" :bodyStyle="bodyStyle" title="核心配置">
-            <template v-if="dataMode.queryForm || dataMode.addOrEditForm || dataMode.sqlQueryCondition">
-              <a-divider style="font-size: 14px;margin-top: 0">表单配置</a-divider>
-              <a-form-model-item label="表单类型" prop="formType">
-                <a-select v-model="item.formType" placeholder="请选择表单类型" @change="changeFormType(item)">
-                  <a-select-option v-for="formTypeItem in formType" :key="formTypeItem.key">{{ formTypeItem.label }}</a-select-option>
-                </a-select>
-              </a-form-model-item>
-              <a-form-model-item v-if="dataMode.sqlQueryCondition && item.formType !=='file' && item.formType !=='image' " label="表单查询方式" prop="queryType">
-                <a-select
-                  v-model="item.queryType"
-                  :disabled="formQueryTypeDisabled"
-                  :getPopupContainer=" triggerNode => { return triggerNode.parentNode } "
-                  placeholder="表单查询方式">
-                  <a-select-option v-for="queryTypeItem in queryTypeV" :key="queryTypeItem.key">{{ queryTypeItem.label }}</a-select-option>
-                </a-select>
-              </a-form-model-item>
-              <template v-if="item.formType">
-                <a-form-model-item v-if="dataMode.addOrEditForm || dataMode.queryForm" label="表单校验" prop="rule">
-                  <a-row :gutter="16">
-                    <a-col v-if="(item.formType === 'input' || item.formType === 'textarea' ) && item.formType !=='file' && item.formType !=='image' " :span="12" >
-                      <a-select v-model="item.rule.type" :getPopupContainer=" triggerNode => { return triggerNode.parentNode } " placeholder="校验类型">
-                        <a-select-option v-for="ruleTypeItem in formRuleType" :key="ruleTypeItem.key">{{ ruleTypeItem.label }}</a-select-option>
-                        <a-popover slot="suffixIcon" placement="bottom" title="关于表单校验类型">
-                          <template slot="content">
-                            <p>设置表单项的校验类型</p>
-                          </template>
-                          <a-icon style="color: rgba(0,0,0,.45)" type="info-circle"/>
-                        </a-popover>
-                      </a-select>
-                    </a-col>
-                    <a-col :span="12">
-                      <a-radio-group v-model="item.rule.required" button-style="solid" default-value="false">
-                        <a-radio-button value="true">
-                          必选项
-                        </a-radio-button>
-                        <a-radio-button value="false">
-                          非必选项
-                        </a-radio-button>
-                      </a-radio-group>
-                    </a-col>
-                  </a-row>
-                </a-form-model-item>
-                <a-form-model-item v-if="dataMode.addOrEditForm" label="新增/修改场景选择" prop="addOrEdit">
-                  <a-select v-model="item.addOrEdit" placeholder="请选择场景">
-                    <a-select-option v-for="addOrEditItem in addOrEditTypeV" :key="addOrEditItem.key">{{ addOrEditItem.label }}</a-select-option>
-                    <a-popover
-                      slot="suffixIcon"
-                      placement="bottom"
-                      title="关于新增/修改场景选择">
-                      <template slot="content">
-                        <p>设置表单项的新增/修改场景</p>
-                        <p>静默新增类型用于非人为新增的数据，不会生成表单项，且必须设置字段用途</p>
-                      </template>
-                      <a-icon style="color: rgba(0,0,0,.45)" type="info-circle"/>
-                    </a-popover>
-                  </a-select>
-                </a-form-model-item>
-                <a-form-model-item v-if="item.addOrEdit === 'silenceAdd'" label="字段用途" prop="silencePurpose">
-                  <a-select v-model="item.silencePurpose" :getPopupContainer=" triggerNode => { return triggerNode.parentNode } " placeholder="请选择字段用途">
-                    <a-select-option v-for="silencePurposeTypeItem in silencePurposeType" :key="silencePurposeTypeItem.key">{{ silencePurposeTypeItem.label }}</a-select-option>
-                    <a-popover
-                      slot="suffixIcon"
-                      placement="bottom"
-                      title="关于字段用途">
-                      <template slot="content">
-                        <p>用于静默新增时设置字段用途</p>
-                        <p>在新增数据的表单提交时，页面会根据设置的字段用途自动获取相关数据并追加到表单中</p>
-                        <p>当字段用途选择为<span style="font-weight: bold">自定义</span>时，必须指定一个业务逻辑(Logic)名称，表单提交前会将表单内容作为参数调用该Logic接口，并将Logic返回值作为表单值
-                        </p>
-                      </template>
-                      <a-icon style="color: rgba(0,0,0,.45)" type="info-circle"/>
-                    </a-popover>
-                  </a-select>
-                </a-form-model-item>
-                <a-form-model-item v-if="item.silencePurpose === 'customize'" label="字段用途对应Logic" prop="silenceSource">
-                  <a-input v-model="item.silenceSource" placeholder="请输入业务逻辑名称"/>
-                </a-form-model-item>
-              </template>
-            </template>
-            <template v-if="dataMode.table">
-              <a-divider style="font-size: 14px;margin-top: 0">表格列配置</a-divider>
-              <a-form-model-item v-if="item.formType" label="作用域插槽" prop="slot">
-                <a-select v-model="item.slot.type" :disabled="slotTypeDisabled" :getPopupContainer=" triggerNode => { return triggerNode.parentNode } " placeholder="插槽类型">
-                  <a-select-option v-for="slotTypeItem in slotTypeV" :key="slotTypeItem.key">{{ slotTypeItem.label }}</a-select-option>
-                  <a-popover slot="suffixIcon" placement="bottom" title="关于作用域插槽">
-                    <template slot="content">
-                      <p>你可以通过设置表格列的作用域插槽实现一些效果</p>
-                      <p>如果没有指定，默认会设置为文本溢出省略(长度:16)</p>
-                      <p>如果你选择文本溢出省略，需要设置文本溢出上限长度，建议ID主键等类型设置为8</p>
-                      <p>如果你选择多彩徽标，需要设置徽标对应的数据样式字典键</p>
-                      <a-divider style="font-size: 14px;margin-top: 0">关于表格列宽度</a-divider>
-                      <p>V1.1之后不再支持自定义表格列宽度，表格列宽度将通过作用域插槽类型自适应</p>
-                      <p>设置为文本溢出省略时，表格列宽度 = 文本溢出上限长度 * 7 + 42</p>
-                      <p>设置为多彩徽标时，表格列宽度为130</p>
-                      <p>设置为日期时间格式化时，表格列宽度为160</p>
-                    </template>
-                    <a-icon style="color: rgba(0,0,0,.45)" type="info-circle"/>
-                  </a-popover>
-                </a-select>
-              </a-form-model-item>
-              <a-form-model-item v-if="item.slot.type === 'badge'" label="徽标字典键" prop="slot.keyMap">
-                <a-input v-model="item.slot.keyMap" :disabled="slotTypeDisabled" placeholder="请输入徽标字典键">
-                  <a-popover
-                    slot="suffix"
-                    placement="bottom"
-                    title="关于徽标字典键">
-                    <template slot="content">
-                      <p>如果你设置了表单类型为选择框，且数据源是字典键，该值会自动带出</p>
-                    </template>
-                    <a-icon style="color: rgba(0,0,0,.45)" type="info-circle"/>
-                  </a-popover>
-                </a-input>
-              </a-form-model-item>
-              <a-form-model-item v-if="item.slot.type === 'ellipsis'" label="文本溢出上限长度" prop="slot.value">
-                <a-input-number v-model="item.slot.value" placeholder="请输入文本溢出上限长度" style="width: 100%"/>
-              </a-form-model-item>
-              <a-form-model-item v-if="item.slot.type === 'action'" label="操作列文本" prop="slot.actionText">
-                <a-input v-model="item.slot.actionText" placeholder="请输入操作列显示文本，默认为详情"/>
-              </a-form-model-item>
-              <a-form-model-item v-if="dataMode.sqlQueryItem || dataMode.sqlQueryCondition" label="字段默认值" prop="default">
-                <a-input v-model="item.default" placeholder="当查询结果为null时，指定默认值"/>
-              </a-form-model-item>
-            </template>
-          </a-card>
-        </a-col>
-        <a-col v-if="!dataMode.group && item.formType && (((dataMode.addOrEditForm || dataMode.queryForm ) && (item.formType === 'input' || item.formType === 'select')) || (dataMode.table && item.formType !== 'file' && item.formType !== 'image') || selectDataShow)" :span="9">
-          <a-card :bodyStyle="bodyStyle" title="扩展属性">
-            <template v-if="(dataMode.addOrEditForm || dataMode.queryForm ) && (item.formType === 'input' || item.formType === 'select')">
-              <a-divider style="font-size: 14px;margin-top: 0">提示相关</a-divider>
-              <a-form-model-item label="表单水印" prop="placeholder">
-                <a-input v-model="item.placeholder" placeholder="表单水印（placeholder）" />
-              </a-form-model-item>
-            </template>
-            <template v-if="selectDataShow">
-              <a-divider style="font-size: 14px;margin-top: 0">数据源相关</a-divider>
-              <a-form-model-item label="数据源类型" prop="selectType">
-                <a-select v-model="item.selectType" placeholder="请选择数据源类型" @change="changeSelectKType">
-                  <a-select-option v-for="selectDataTypeItem in selectDataType.filter(h=>!h.noMatch.includes(item.formType))" :key="selectDataTypeItem.key">{{ selectDataTypeItem.label }}</a-select-option>
-                  <a-popover
-                    slot="suffixIcon"
-                    placement="bottom"
-                    title="关于数据源类型">
-                    <template slot="content">
-                      <p>设置数据源</p>
-                      <p>数据源类型分为三种，你可以根据需要选择</p>
-                      <p>字典键：选项从字典表(t_dictionary)获取，你只需要选择字典键的名称即可</p>
-                      <p>业务逻辑名称：选项通过发起http请求调用指定的业务逻辑(Logic)接口获取</p>
-                      <p>固定集合：选项为静态值，JSONArray格式</p>
-                      <p>当表单为树形选择框类型时，返回的数据需按照以下形式：</p>
-                      <json-viewer
-                        :expand-depth="parseInt('100')"
-                        :value="DemoJson"
-                        style="overflow: auto;max-height: 440px"></json-viewer>
-                    </template>
-                    <a-icon style="color: rgba(0,0,0,.45)" type="info-circle"/>
-                  </a-popover>
-                </a-select>
-              </a-form-model-item>
-              <a-form-model-item v-if="item.selectType" label="数据源" prop="selectKey">
-                <a-select
-                  v-if="item.selectType === 'key'"
-                  v-model="item.selectKey"
-                  :filter-option="filterOption"
-                  placeholder="请选择字典键"
-                  show-search
-                  @change="changeSelectKey(item)">
-                  <template>
-                    <a-select-option
-                      v-for="(optionItem,index) in option"
-                      :key="index"
-                      :value="Object.keys(optionItem)[0]">{{ optionItem[Object.keys(optionItem)[0]] }}
-                    </a-select-option>
-                  </template>
-                </a-select>
-                <a-input v-if="item.selectType === 'logic'" v-model="item.selectKey" placeholder="请输入业务逻辑名称"/>
-                <a-textarea v-if="item.selectType === 'fixArray'" v-model="item.selectKey" placeholder="请录入数据源"/>
-              </a-form-model-item>
-              <a-form-model-item v-if="item.selectType === 'logic'" label="数据源加载方式" prop="selectLoadType">
-                <a-radio-group v-model="item.lazyLoad" button-style="solid" default-value="false">
-                  <a-radio-button value="true">
-                    {{ item.formType === 'treeSelect' ? '异步加载节点' : '懒加载搜索' }}
-                  </a-radio-button>
-                  <a-radio-button value="false">
-                    一次性加载
-                  </a-radio-button>
-                </a-radio-group>
-              </a-form-model-item>
-              <a-form-model-item label="关联外键字段" prop="selectKeyName">
-                <a-input v-model="item.selectKeyName" placeholder="该列关联的外键字段">
-                  <a-popover slot="suffix" placement="bottom" title="关于关联外键字段">
-                    <template slot="content">
-                      <p><span style="font-weight: bold;"><span style="color: #FF0036">非必需的实验性功能：</span>设置该参数需开发岗指导</span></p>
-                      <p>当字段与主子表外键有关系时，你可以指定<span style="font-weight: bold">该列所关联的外键字段名</span>
-                      </p>
-                      <p>设置该参数是为了该字段用作表单查询时，系统可以通过设置的关联外键字段，而非字面值作为查询条件</p>
-                      <p>示例：</p>
-                      <p>主表为t_userfiles(表档案)表，别名为u，与t_gasbrand(气表品牌表)有关联关系，别名为g，为了显示表档案对应的气表品牌数据，我们将数据字段名设置为g.f_gasbrand</p>
-                      <p>这样我们就可以在table中看到气表品牌了，但是用户如果通过气表品牌下拉框进行筛选，我们指定的g.f_gasbrand只是气表品牌的值，而实际关联字段是u.f_gasbrand_id</p>
-                      <p>所以如果我们指定了关联外键字段u.f_gasbrand_id，系统则会使用u.f_gasbrand_id筛选数据，而不是g.f_gasbrand，从而优化了查询效率
-                      </p>
-                    </template>
-                    <a-icon style="color: rgba(0,0,0,.45)" type="info-circle"/>
-                  </a-popover>
-                </a-input>
-              </a-form-model-item>
-            </template>
-            <template v-if="item.formType === 'file' || item.formType === 'image'">
-              <a-divider style="font-size: 14px;margin-top: 0">文件上传相关</a-divider>
-              <a-form-model-item label="允许上传文件数量" prop="accept" style="margin-bottom: 5px;">
-                <a-slider
-                  v-model="item.acceptCount"
-                  :marks="{ 1: '1', 3: '3', 5: '5', 10: '10', 15: '15', 20: '20'}"
-                  :max="20"
-                  :min="1"
-                />
-              </a-form-model-item>
-              <a-form-model-item label="附件用途" prop="useType">
-                <a-select v-model="item.useType" placeholder="指定文件用途，同表单不同用途">
-                  <a-select-option v-for="userTypeItem in $appdata.getDictionaryList('useType')" :key="userTypeItem.value">{{ userTypeItem.value }}</a-select-option>
-                </a-select>
-              </a-form-model-item>
-              <a-form-model-item label="上传的仓库" prop="resUploadStock">
-                <a-select v-model="item.resUploadStock" placeholder="选择文件上传到的仓库" @change="changeStock">
-                  <a-select-option v-for="stock in stockList" :key="stock.id">{{ stock.f_name }}</a-select-option>
-                </a-select>
-              </a-form-model-item>
-              <a-form-model-item v-if="item.resUploadStock" label="具体路径" prop="pathKey">
-                <a-select v-model="item.pathKey" placeholder="仓库扩展路径">
-                  <a-select-option v-for="pathKey in lowerPath" :key="pathKey.label">{{ pathKey.label }}</a-select-option>
-                </a-select>
-              </a-form-model-item>
-              <a-form-model-item v-if="item.formType === 'file'" label="允许上传文件类型" prop="accept">
-                <a-select v-model="item.accept" mode="tags" placeholder="指定文件类型，默认不限制" @change="itemAcceptChange">
-                  <a-select-option v-for="type_item in fileType" :key="type_item.accept">{{ type_item.label }}</a-select-option>
-                </a-select>
-              </a-form-model-item>
-            </template>
-          </a-card>
-        </a-col>
-        <a-col :span="18" v-if="dataMode.group">
-          <a-card :bodyStyle="bodyStyle" title="数据字段">
-            <a-button type="primary" slot="extra" @click="addColumnItem()">增加</a-button>
-            <a-row :gutter="24">
-              <a-col :span="7">
-                <span style="font-weight: bold">
-                  标签名
-                </span>
-              </a-col>
-              <a-col :span="7">
-                <span style="font-weight: bold">
-                  字段名
-                </span>
-              </a-col>
-              <a-col :span="8">
-                <span style="font-weight: bold">
-                  数据模式
-                </span>
-              </a-col>
-              <a-col :span="2">
-                <span style="font-weight: bold">
-                  操作
-                </span>
-              </a-col>
-            </a-row>
-            <a-divider style="margin: 6px 0" />
-            <div
-              v-for="(columnItem, index) in item.column"
-              :key="index"
-              draggable="true"
-              @dragend="handleDragEnd($event, columnItem)"
-              @dragenter="handleDragEnter($event, columnItem)"
-              @dragstart="handleDragStart($event, columnItem)"
-              @dragover.prevent="handleDragOver($event, columnItem)">
-              <a-row v-if="ending && dragging && columnItem.key === ending.key && dragging.key !== ending.key" class="dragTipsWarp">
-                <span class="dragTips">拖到此处放置</span>
-              </a-row>
-              <a-row :gutter="24" class="column_item dragTipsWarp">
-                <a-col :span="7">
-                  <span style="font-weight: bold">
-                    {{ columnItem.title }}
-                  </span>
-                </a-col>
-                <a-col :span="7">
-                  <span style="font-weight: bold">
-                    {{ columnItem.key }}
-                  </span>
-                </a-col>
-                <a-col :span="8">
-                  <a-tooltip>
-                    <template slot="title">
-                      查询表单项
-                    </template>
-                    <a-tag :color="columnItem.dataModeArray && columnItem.dataModeArray.includes('queryForm') ? 'blue' : 'rgba(0, 0, 0, 0.25)'"><a-icon type="file-search" /></a-tag>
-                  </a-tooltip>
-                  <a-tooltip>
-                    <template slot="title">
-                      表格列
-                    </template>
-                    <a-tag :color="columnItem.dataModeArray && columnItem.dataModeArray.includes('table') ? 'orange' : 'rgba(0, 0, 0, 0.25)'"><a-icon type="table" /></a-tag>
-                  </a-tooltip>
-                  <a-tooltip>
-                    <template slot="title">
-                      新增/修改表单项
-                    </template>
-                    <a-tag :color="columnItem.dataModeArray && columnItem.dataModeArray.includes('addOrEditForm') ? 'green' : 'rgba(0, 0, 0, 0.25)'"><a-icon type="form" /></a-tag>
-                  </a-tooltip>
-                  <a-tooltip>
-                    <template slot="title">
-                      SQL查询项
-                    </template>
-                    <a-tag :color="columnItem.dataModeArray && columnItem.dataModeArray.includes('sqlQueryItem') ? 'cyan' : 'rgba(0, 0, 0, 0.25)'"><a-icon type="bars" /></a-tag>
-                  </a-tooltip>
-                  <a-tooltip>
-                    <template slot="title">
-                      SQL查询表达式
-                    </template>
-                    <a-tag :color="columnItem.dataModeArray && columnItem.dataModeArray.includes('sqlQueryCondition') ? 'purple' : 'rgba(0, 0, 0, 0.25)'"><a-icon type="search" /></a-tag>
-                  </a-tooltip>
-                  <a-tooltip>
-                    <template slot="title">
-                      Excel导入项
-                    </template>
-                    <a-tag :color="columnItem.dataModeArray && columnItem.dataModeArray.includes('excelImportItem') ? '#107C41' : 'rgba(0, 0, 0, 0.25)'"><a-icon type="file-excel" /></a-tag>
-                  </a-tooltip>
-                  <a-tooltip>
-                    <template slot="title">
-                      数据组
-                    </template>
-                    <a-tag :color="columnItem.dataModeArray && columnItem.dataModeArray.includes('group') ? '#82A0D8' : 'rgba(0, 0, 0, 0.25)'"><a-icon type="crown" /></a-tag>
-                  </a-tooltip>
-                </a-col>
-                <a-col :span="1">
-                  <a-icon type="edit" @click="editColumnItem(columnItem.key,index)"/>
-                </a-col>
-                <a-col :span="1">
-                  <a-icon type="close" @click="removeColumnItem(columnItem.key,index)"/>
-                </a-col>
-              </a-row>
-            </div>
-          </a-card>
-        </a-col>
-      </a-row>
-      <a-alert
-        v-if="dataModeArrayData.length === 0"
-        message="错误：请至少选择一种数据模式"
-        show-icon
-        style="margin-top: 5px"
-        type="error"/>
-      <a-alert
-        v-if="dataMode.addOrEditForm && !dataMode.sqlQueryItem && item.formType !== 'file' && item.formType !== 'image'"
-        message="错误：如果要生成新增/修改表单项，必须勾选生成SQL查询项"
-        show-icon
-        style="margin-top: 5px"
-        type="error"/>
-      <a-alert
-        v-if="dataMode.queryForm && !dataMode.sqlQueryCondition"
-        message="提示：您没有勾选生成SQL查询表达式，渲染的表单项不会生成SQL查询条件"
-        show-icon
-        style="margin-top: 5px"
-        type="info"/>
-      <a-alert
-        v-if="dataMode.table && !dataMode.sqlQueryItem"
-        message="提示：您没有勾选生成SQL查询项，渲染的表格列不会绑定SQL结果集数据"
-        show-icon
-        style="margin-top: 5px"
-        type="info"/>
-      <a-alert
-        v-if="item.title.length > 8"
-        message="提示：标签名称过长可能会影响表格列展示效果，建议不超过8个字符"
-        show-icon
-        style="margin-top: 5px"
-        type="warning"/>
-    </a-form-model>
-    <create-query-item ref="queryItem" @getColumn="getColumnItem" @itemHandle="itemHandleItem"/>
-  </a-modal>
-</template>
-
-<script>
-import {
-  dataModeType,
-  fileType,
-  formRuleType,
-  formType,
-  queryType,
-  slotType,
-  silencePurposeType,
-  addOrEditType,
-  selectDataType
-} from '@vue2-client/config/CreateQueryConfig'
-import { post } from '@vue2-client/services/api'
-import JsonViewer from 'vue-json-viewer'
-import { getDictionaryParam } from '@vue2-client/services/api/common'
-
-const DemoJson = [{
-  value: 'zhejiang',
-  label: 'Zhejiang',
-  children: [{ value: 'hangzhou', label: 'Hangzhou', children: [{ value: 'xihu', label: 'West Lake' }] }]
-}]
-
-export default {
-  name: 'CreateQueryItem',
-  components: {
-    JsonViewer
-  },
-  computed: {
-    // 是否展示数据源相关字段
-    selectDataShow () {
-      return this.item.formType === 'select' || this.item.formType === 'checkbox' || this.item.formType === 'radio' || this.item.formType === 'treeSelect'
-    },
-    // 作用域插槽是否禁用
-    slotTypeDisabled () {
-      return this.item.selectKey && this.item.selectType === 'key'
-    },
-    // 字段名称是否禁用
-    keyDisabled () {
-      return this.item.formType === 'file' || this.item.formType === 'image' || this.dataMode.mixinTableName
-    },
-    // 数据模式是否禁用
-    dataModeDisabled () {
-      return this.item.formType === 'file' || this.item.formType === 'image' || this.item.formType === 'addressSearch'
-    },
-    dataMode: function () {
-      const result = {
-        queryForm: false,
-        table: false,
-        addOrEditForm: false,
-        sqlQueryItem: false,
-        sqlQueryCondition: false,
-        excelImportItem: false,
-        group: false,
-        mixinTableName: false
-      }
-      for (const item of this.dataModeArrayData) {
-        result[item] = true
-      }
-      return result
-    },
-    queryTypeV () {
-      return queryType.filter(item => {
-        return item.match.findIndex(type => type === this.item.formType || type === 'all') > -1
-      })
-    },
-    dataModeTypeV () {
-      if (this.dataModeArrayData.includes('group')) {
-        return [{
-          label: 'SQL生成查询项',
-          value: 'sqlQueryItem',
-          noMatch: ['file', 'personSetting']
-        }, {
-          label: '字段组存储',
-          value: 'group',
-          noMatch: []
-        }]
-      }
-      if (this.dataModeArrayData.includes('mixinTableName')) {
-        return [
-          {
-            label: '渲染查询表单项',
-            value: 'queryForm',
-            noMatch: ['file', 'image', 'textarea', 'personSetting']
-          },
-          {
-            label: '动态表名参数',
-            value: 'mixinTableName',
-            noMatch: []
-          }
-        ]
-      }
-      if (this.item.formType) {
-        return dataModeType.filter(item => {
-          return item.noMatch.findIndex(type => type === this.item.formType) === -1
-        })
-      } else {
-        return dataModeType
-      }
-    },
-    slotTypeV () {
-      return slotType.filter(item => {
-        return item.match.findIndex(type => type === this.item.formType || type === 'all') > -1
-      })
-    },
-    addOrEditTypeV () {
-      return addOrEditType.filter(item => {
-        return item.match.findIndex(type => type === this.item.formType || type === 'all') > -1
-      })
-    }
-  },
-  data () {
-    return {
-      DemoJson,
-      dataModeType,
-      queryType,
-      formType,
-      formRuleType,
-      slotType,
-      fileType,
-      silencePurposeType,
-      addOrEditType,
-      selectDataType,
-      // 控制modal框
-      visible: false,
-      type: '',
-      bodyStyle: {
-        height: '500px',
-        overflowY: 'auto'
-      },
-      // 表单查询方式是否禁用
-      formQueryTypeDisabled: false,
-      // 数据模式类型集合值
-      dataModeArrayData: [],
-      // 表单项
-      item: {
-        key: '',
-        title: '',
-        slot: {
-          type: 'default'
-        },
-        rule: {
-          required: 'false'
-        },
-        column: [],
-        queryType: '=',
-        formType: 'input',
-        accept: undefined,
-        acceptCount: 3,
-        pathKey: undefined,
-        selectType: undefined,
-        selectKey: undefined,
-        addOrEdit: 'all',
-        fileRootPath: undefined,
-        selectKeyName: undefined,
-        resUploadStock: undefined,
-        dataModeArray: []
-      },
-      // 数据仓库列表
-      stockList: [],
-      // 扩展目录
-      lowerPath: [],
-      parent_node: [],
-      // 必填控制
-      itemRules: {
-        formType: [{ required: true, message: '请输入表单类型', trigger: 'change' }],
-        key: [{
-          required: true,
-          validator: (rule, value, callback) => {
-            // 判断必填
-            if (!value) {
-              callback(new Error('请输入字段名称'))
-            } else {
-              // 判断必须全部小写 并且不能包含空格
-              if (value !== value.toLowerCase() || value.indexOf(' ') !== -1 && !value === '_mixinTableName_') {
-                callback(new Error('字段名称必须全部小写，且不能包含空格'))
-              } else {
-                callback()
-              }
-            }
-          },
-          trigger: 'blur'
-        }],
-        title: [{
-          required: true,
-          validator: (rule, value, callback) => {
-            // 判断必填
-            if (!value) {
-              callback(new Error('请输入标签名称'))
-            } else {
-              // // 大于8个字符给提示
-              // if (value.length > 8) {
-              //   callback(new Error('标签名称过长，建议不超过8个字符，可能会影响展示效果'))
-              // } else {
-              callback()
-              // }
-            }
-          },
-          trigger: 'blur'
-        }],
-        selectType: [{ required: true, message: '请选择数据源类型', trigger: 'change' }],
-        selectKey: [{ required: true, message: '请输入数据源内容', trigger: 'blur' }],
-        'slot.value': [{ required: true, message: '请输入文本溢出上限长度', trigger: 'blur' }],
-        'slot.keyMap': [{ required: true, message: '请输入徽标字典键', trigger: 'blur' }],
-        silencePurpose: [{ required: true, message: '请选择字段用途', trigger: 'change' }],
-        silenceSource: [{ required: true, message: '请输入业务逻辑名称', trigger: 'blur' }],
-        resUploadStock: [{ required: true, message: '请选择上传到的仓库', trigger: 'blur' }],
-        pathKey: [{ required: true, message: '请选择上传到的扩展目录', trigger: 'blur' }]
-      },
-      // 字典键集合
-      option: [],
-      selectIndex: null,
-      ending: null,
-      dragging: null,
-      itemMap: {}
-    }
-  },
-  mounted () {
-    this.resetDataMode()
-  },
-  props: { },
-  methods: {
-    initItem (lysis = {}) {
-      this.item = Object.assign({
-        key: '',
-        title: '',
-        slot: {
-          type: 'default'
-        },
-        rule: {
-          required: 'false'
-        },
-        column: [],
-        selectKey: undefined,
-        queryType: '=',
-        formType: 'input',
-        acceptCount: 3,
-        fileRootPath: undefined,
-        pathKey: undefined,
-        accept: undefined,
-        selectType: undefined,
-        addOrEdit: 'all',
-        selectKeyName: undefined,
-        resUploadStock: undefined,
-        dataModeArray: []
-      }, lysis)
-    },
-    // 控制 展示
-    flashModal (show = 'None') {
-      const bool = show === 'None' ? !this.visible : !!show
-      if (bool && this.option.length === 0) {
-        getDictionaryParam(true).then(res => {
-          this.option = res
-        })
-      }
-      this.visible = bool
-    },
-    // 编辑数据字段前准备数据
-    editColumnItemExecute (_item) {
-      this.type = '修改'
-      const defaultValue = { formType: 'input', type: 'string', addOrEdit: 'all', slot: { type: 'default' }, rule: {}, selectKey: {}, column: [] }
-      if (!_item.queryType) {
-        defaultValue.queryType = '='
-      }
-      _item = Object.assign({}, defaultValue, _item)
-      if (_item.formType === 'file' || _item.formType === 'image') {
-        this.getStocks()
-        // 如果有仓库 则获取该仓库的扩展路径
-        if (_item.resUploadStock) {
-          this.lowerPath = this.stockList.filter(item => item.id === _item.resUploadStock)[0]?.f_lower_path_json ?? []
-        }
-      }
-      if (_item.selectKey && _item.selectKey.length >= 6 && _item.selectType === 'logic' && _item.selectKey.substring(0, 6) === 'logic@') {
-        _item.selectKey = _item.selectKey.substring(6)
-      } else if (_item.selectKey && _item.selectKey instanceof Array) {
-        _item.selectKey = JSON.stringify(_item.selectKey)
-      }
-      // 兼容旧作用域插槽属性
-      this.compatibleTheSlot(_item)
-      this.item = _item
-      this.dataModeArrayData = this.item.dataModeArray
-      this.flashModal()
-
-      for (const columnItem of this.item.column) {
-        this.itemMap[columnItem.key] = Object.assign({
-          key: '',
-          title: '',
-          slot: {},
-          rule: {
-            required: 'false'
-          },
-          dataModeArray: []
-        }, columnItem)
-      }
-    },
-    // 增加数据字段前数据处理
-    addColumnItemExecute () {
-      this.type = '新增'
-      this.dataModeArrayData = ['queryForm', 'table', 'addOrEditForm', 'sqlQueryItem', 'sqlQueryCondition']
-      this.initItem()
-      this.flashModal()
-    },
-    modelCancel () {
-      this.flashModal()
-    },
-    submitItem () {
-      this.$refs.itemForm.validate(valid => {
-        if (valid) {
-          const fileBool = this.item.formType === 'file' || this.item.formType === 'image'
-          if (this.dataModeArrayData.length === 0) {
-            this.$message.error('请至少选择一种数据模式')
-            return
-          }
-          if (!fileBool && (this.dataMode.addOrEditForm && !this.dataMode.sqlQueryItem)) {
-            this.$message.error('如果要生成新增/修改表单项，必须勾选生成SQL查询项')
-            return
-          }
-          if (fileBool && !(!this.dataMode.table && !this.dataMode.sqlQueryCondition && !this.dataMode.queryForm)) {
-            this.$message.error(`上传类表单项只能选择 "渲染新增/修改表单项"`)
-            return
-          }
-          this.itemHandle()
-        }
-      })
-    },
-    visitAcceptFile () {
-      window.open('https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/input/file#attr-accept')
-    },
-    // 修改上传到哪个仓库
-    changeStock (stock) {
-      if (stock) {
-        const stockValue = this.stockList.filter(item => item.id === stock)[0]
-        this.lowerPath = stockValue.f_lower_path_json ?? []
-        this.item.resUploadMode = stockValue.f_stock_type
-        this.item.fileRootPath = stockValue.f_root_path
-        this.item.stockAlias = stockValue.f_alias
-        this.item.pathKey = undefined
-      }
-    },
-    // 文件上传限制类型修改
-    itemAcceptChange (newVal) {
-      if (newVal.includes('*')) {
-        this.item.accept = ['*']
-      }
-    },
-    getColumn () {
-      let result = {}
-      this.$emit('getColumn', val => { result = val })
-      return result
-    },
-    changeFormType (item) {
-      this.initItem({ key: item.key, title: item.title, formType: item.formType })
-      if (item.formType === 'file' || item.formType === 'image') {
-        this.item.acceptCount = 3
-        this.getStocks()
-        this.item.accept = item.formType === 'file' ? ['*'] : ['.jpg,.jpeg,.ico,.gif,svg,.webp,.png,.bmp,.pjpeg,']
-        this.item.resUploadMode = 'server'
-        this.item.key = item.formType === 'file' ? 'FilesId' : 'Images'
-        this.dataModeArrayData = ['addOrEditForm']
-      } else if (item.formType === 'addressSearch') {
-        this.dataModeArrayData = ['addOrEditForm', 'sqlQueryItem', 'table']
-      } else {
-        if (['FilesId', 'Images'].includes(this.item.key)) { this.item.key = '' }
-        this.resetDataMode()
-        // 表单查询方式有预选项时
-        if (this.queryTypeV.length) {
-          this.item.queryType = this.queryTypeV[0].key
-        }
-      }
-    },
-    // 获取所有仓库
-    getStocks () {
-      if (this.stockList.length === 0) {
-        post('/api/af-system/logic/getFilesStock', {}).then(res => {
-          this.stockList = res.sort((a, b) => b.progress - a.progress)
-        }).catch(e => {})
-      }
-    },
-    // 重置数据模式
-    resetDataMode () {
-      this.dataModeArrayData = this.dataModeTypeV.map(item => item.value).filter(h => h !== 'group')
-    },
-    // 数据模式改变
-    dataModeArrayDataChange (newVal) {
-      if (newVal.includes('mixinTableName')) {
-        this.item.key = '_mixinTableName_'
-        this.dataModeArrayData = ['queryForm', 'mixinTableName']
-      } else if (this.item.key === '_mixinTableName_') {
-        this.item.key = ''
-      }
-      if (newVal.includes('group')) {
-        this.dataModeArrayData = ['sqlQueryItem', 'group']
-      }
-    },
-    itemHandle () {
-      // 查询表单项或者新增/修改表单项
-      if (this.dataMode.queryForm || this.dataMode.addOrEditForm || this.dataMode.sqlQueryCondition) {
-        if (!this.dataMode.sqlQueryItem || !this.dataMode.addOrEditForm) {
-          this.delKey(this.item, 'addOrEdit', 'silencePurpose', 'silenceSource')
-        }
-        if (this.item.selectType && this.item.selectType === 'logic' && this.item.selectKey.substring(0, 6) !== 'logic@') {
-          // 数据源为logic
-          this.item.selectKey = 'logic@' + this.item.selectKey
-        } else if (this.item.selectType && this.item.selectType === 'fixArray' && !this.isJSON(this.item.selectKey)) {
-          // 数据源为固定json集合
-          this.$message.warning('下拉框数据源不是JSON集合')
-          return
-        }
-      } else {
-        this.delKey(this.item, 'queryType', 'formType', 'addOrEdit', 'silencePurpose', 'silenceSource', 'placeholder', 'rule', 'selectKey', 'selectKeyName', 'lazyLoad')
-      }
-      // 如果和数据源字段无关
-      if (!this.selectDataShow) {
-        this.delKey(this.item, 'selectType', 'selectKey', 'lazyLoad', 'selectKeyName')
-      }
-      // 删除空的关联外键字段
-      if (!this.item.selectKeyName) {
-        delete this.item.selectKeyName
-      }
-      // 默认插槽就先删除
-      if (this.item.slot && (this.item.slot.type === 'default' || !this.item.slot.type)) { delete this.item.slot }
-      // 根据数据模式处理数据
-      if (!this.dataMode.sqlQueryCondition) {
-        delete this.item.queryType
-      }
-      if (!this.dataMode.sqlQueryItem) { this.delKey(this.item, 'default') }
-      this.item.dataModeArray = this.dataModeArrayData
-      this.$emit('itemHandle', this.item, this.type)
-      this.initItem()
-      this.resetDataMode()
-    },
-    changeSelectKType () {
-      this.item.selectKey = undefined
-    },
-    changeSelectKey (item) {
-      if (item.selectType === 'key' && item.selectKey) {
-        this.item.slot = Object.assign({}, this.item.slot, { keyMap: item.selectKey, type: 'badge' })
-      }
-    },
-    filterOption (input, option) {
-      return (
-        option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
-      )
-    },
-    delKey (obj, ...args) {
-      args.forEach(v => {
-        delete obj[v]
-      })
-      return obj
-    },
-    // 判断是否为json字符串
-    isJSON (str) {
-      if (typeof str == 'string') {
-        try {
-          const obj = JSON.parse(str)
-          return !!(typeof obj == 'object' && obj)
-        } catch (e) {
-          return false
-        }
-      }
-    },
-    // 兼容旧插槽函数
-    compatibleTheSlot (_item) {
-      if (_item.slotKeyMap) {
-        _item.slot.keyMap = _item.slotKeyMap
-        delete _item.slotKeyMap
-      }
-      if (_item.slotValue) {
-        _item.slot.value = _item.slotValue
-        delete _item.slotValue
-      }
-      if (_item.actionText) {
-        _item.slot.actionText = _item.actionText
-        delete _item.actionText
-      }
-    },
-    // 拖拽事件
-    handleDragStart (e, item) {
-      this.dragging = item
-    },
-    handleDragEnd (e, item) {
-      if (this.ending.key === this.dragging.key) {
-        return
-      }
-      const newItems = [...this.item.column]
-      const src = newItems.indexOf(this.dragging)
-      const dst = newItems.indexOf(this.ending)
-      // newItems.splice(src, 1, ...newItems.splice(dst, 1, newItems[src]))  替换位置
-      // 挪移位置
-      newItems.splice(src, 1)
-      newItems.splice(dst, 0, this.dragging)
-      this.item.column = newItems
-      this.$nextTick(() => {
-        this.dragging = null
-        this.ending = null
-      })
-    },
-    handleDragOver (e) {
-      // 首先把div变成可以放置的元素，即重写dragenter/dragover
-      // e.dataTransfer.dropEffect="move";//在dragenter中针对放置目标来设置!
-      e.dataTransfer.dropEffect = 'move'
-    },
-    handleDragEnter (e, item) {
-      // 为需要移动的元素设置dragstart事件
-      e.dataTransfer.effectAllowed = 'move'
-      this.ending = item
-    },
-    editColumnItem (key, index) {
-      if (this.itemMap[key]) {
-        this.selectIndex = index
-        this.$refs.queryItem.editColumnItemExecute(this.itemMap[key])
-      } else {
-        this.$message.warn('编辑失败')
-      }
-    },
-    removeColumnItem (key, index) {
-      const _this = this
-      this.$confirm({
-        title: '您确定要删除该数据项？',
-        content: '删除的数据项无法恢复',
-        okText: '确定',
-        okType: 'danger',
-        cancelText: '取消',
-        zIndex: 9999,
-        onOk () {
-          delete _this.itemMap[key]
-          _this.item.column.splice(index, 1)
-        }
-      })
-    },
-    addColumnItem () {
-      this.type = '新增'
-      this.$refs.queryItem.addColumnItemExecute()
-    },
-    getColumnItem (callback) {
-      callback(JSON.parse(JSON.stringify(this.item.column)))
-    },
-    itemHandleItem (item, type) {
-      this.itemMap[item.key] = item
-      if (this.type === '新增') {
-        this.item.column.push(item)
-      } else {
-        this.$set(this.item.column, this.selectIndex, item)
-      }
-      this.$message.success(`${type}成功`)
-      this.$refs.queryItem.flashModal(false)
-    },
-  }
-}
-</script>
-<style scoped>
- table th, table td {
-   border: 1px rgba(0, 0, 0, 0.65) solid;
-   text-align: center;
-   padding: 0 10px;
- }
- .column_item:hover {
-   background-color:rgba(64, 169, 255,0.25);
- }
- .dragTips{
-   display:block;
-   text-align: center;
-   border:1px dashed rgba(64, 169, 255,0.55);
- }
- .dragTipsWarp{
-   padding: .5rem 2rem;
- }
-</style>
+<template>
+  <a-modal
+    :destroyOnClose="true"
+    :visible="visible"
+    :width="1250"
+    :zIndex="1001"
+    title="数据字段配置"
+    @cancel="modelCancel"
+    @ok="submitItem">
+    <a-form-model
+      ref="itemForm"
+      :model="item"
+      :rules="itemRules"
+      layout="vertical">
+      <a-row :gutter="16">
+        <a-col :span="6">
+          <a-card :bodyStyle="bodyStyle" title="基本属性">
+            <a-divider style="font-size: 14px;margin-top: 0">字段信息</a-divider>
+            <a-form-model-item label="标签名称" prop="title">
+              <a-input v-model="item.title" placeholder="请输入标签名称"/>
+            </a-form-model-item>
+            <a-form-model-item
+              label="字段名称"
+              prop="key">
+              <a-input ref="key" v-model="item.key" :disabled="keyDisabled" placeholder="请输入字段名">
+                <a-popover slot="suffix" placement="bottom" title="关于字段名称">
+                  <template slot="content">
+                    <p>设置数据字段的名称</p>
+                    <p>用作SQL查询时为<span style="font-weight: bold">表别名.数据列名</span>的格式，如：i.id</p>
+                    <p style="font-weight: bold">注意事项：</p>
+                    <p>由于v2和v3版本产品中一些数据字段有差异，为了增强查询配置在不同版本产品中的通用性，
+                      现在查询配置中的数据字段现在可以通过`$`前缀指定通用兼容名了</p>
+                    <p>通过指定数据字段为通用兼容名，查询配置将会在解析生成SQL时根据配置的产品版本自动适配实际的字段名。</p>
+                    <p>目前支持的兼容性字段见下表：</p>
+                    <table>
+                      <thead>
+                        <tr><th>数据表</th><th>字段含义</th><th>v2产品</th><th>v3产品</th><th>通用兼容名</th></tr>
+                      </thead>
+                      <tbody>
+                        <tr><td>t_userfiles</td><td>表档案主键</td><td>f_user_id</td><td>f_userfiles_id</td><td>$userid</td></tr>
+                      </tbody>
+                    </table>
+                  </template>
+                  <a-icon style="color: rgba(0,0,0,.45)" type="info-circle"/>
+                </a-popover>
+              </a-input>
+            </a-form-model-item>
+            <a-form-model-item
+              v-if="item.formType ==='addressSearch'"
+              label="坐标字段名">
+              <a-input :disabled="true" :value="`${item.key}_lng_lat`">
+                <a-popover slot="suffix" placement="bottom" title="坐标字段名">
+                  <template slot="content">
+                    <p>表单类型为地点搜索框时：</p>
+                    <p>新增/修改表单时,字段名称会存放地址名称,坐标字段名会存放坐标信息</p>
+                  </template>
+                  <a-icon style="color: rgba(0,0,0,.45)" type="info-circle"/>
+                </a-popover>
+              </a-input>
+            </a-form-model-item>
+            <a-divider style="font-size: 14px;margin-top: 0">数据模式</a-divider>
+            <a-form-model-item
+              prop="dataMode"
+              style="margin-top: 10px;">
+              <a-checkbox-group v-model="dataModeArrayData" :disabled="dataModeDisabled" @change="dataModeArrayDataChange" :options="dataModeTypeV"/>
+            </a-form-model-item>
+          </a-card>
+        </a-col>
+        <a-col v-show="!dataMode.group && (dataMode.queryForm || dataMode.addOrEditForm || dataMode.table || dataMode.sqlQueryCondition)" :span="9">
+          <a-card v-if="dataMode.queryForm || dataMode.addOrEditForm || dataMode.table || dataMode.sqlQueryCondition" :bodyStyle="bodyStyle" title="核心配置">
+            <template v-if="dataMode.queryForm || dataMode.addOrEditForm || dataMode.sqlQueryCondition">
+              <a-divider style="font-size: 14px;margin-top: 0">表单配置</a-divider>
+              <a-form-model-item label="表单类型" prop="formType">
+                <a-select v-model="item.formType" placeholder="请选择表单类型" @change="changeFormType(item)">
+                  <a-select-option v-for="formTypeItem in formType" :key="formTypeItem.key">{{ formTypeItem.label }}</a-select-option>
+                </a-select>
+              </a-form-model-item>
+              <a-form-model-item v-if="dataMode.sqlQueryCondition && item.formType !=='file' && item.formType !=='image' " label="表单查询方式" prop="queryType">
+                <a-select
+                  v-model="item.queryType"
+                  :disabled="formQueryTypeDisabled"
+                  :getPopupContainer=" triggerNode => { return triggerNode.parentNode } "
+                  placeholder="表单查询方式">
+                  <a-select-option v-for="queryTypeItem in queryTypeV" :key="queryTypeItem.key">{{ queryTypeItem.label }}</a-select-option>
+                </a-select>
+              </a-form-model-item>
+              <template v-if="item.formType">
+                <a-form-model-item v-if="dataMode.addOrEditForm || dataMode.queryForm" label="表单校验" prop="rule">
+                  <a-row :gutter="16">
+                    <a-col v-if="(item.formType === 'input' || item.formType === 'textarea' ) && item.formType !=='file' && item.formType !=='image' " :span="12" >
+                      <a-select v-model="item.rule.type" :getPopupContainer=" triggerNode => { return triggerNode.parentNode } " placeholder="校验类型">
+                        <a-select-option v-for="ruleTypeItem in formRuleType" :key="ruleTypeItem.key">{{ ruleTypeItem.label }}</a-select-option>
+                        <a-popover slot="suffixIcon" placement="bottom" title="关于表单校验类型">
+                          <template slot="content">
+                            <p>设置表单项的校验类型</p>
+                          </template>
+                          <a-icon style="color: rgba(0,0,0,.45)" type="info-circle"/>
+                        </a-popover>
+                      </a-select>
+                    </a-col>
+                    <a-col :span="12">
+                      <a-radio-group v-model="item.rule.required" button-style="solid" default-value="false">
+                        <a-radio-button value="true">
+                          必选项
+                        </a-radio-button>
+                        <a-radio-button value="false">
+                          非必选项
+                        </a-radio-button>
+                      </a-radio-group>
+                    </a-col>
+                  </a-row>
+                </a-form-model-item>
+                <a-form-model-item v-if="dataMode.addOrEditForm" label="新增/修改场景选择" prop="addOrEdit">
+                  <a-select v-model="item.addOrEdit" placeholder="请选择场景">
+                    <a-select-option v-for="addOrEditItem in addOrEditTypeV" :key="addOrEditItem.key">{{ addOrEditItem.label }}</a-select-option>
+                    <a-popover
+                      slot="suffixIcon"
+                      placement="bottom"
+                      title="关于新增/修改场景选择">
+                      <template slot="content">
+                        <p>设置表单项的新增/修改场景</p>
+                        <p>静默新增类型用于非人为新增的数据，不会生成表单项，且必须设置字段用途</p>
+                      </template>
+                      <a-icon style="color: rgba(0,0,0,.45)" type="info-circle"/>
+                    </a-popover>
+                  </a-select>
+                </a-form-model-item>
+                <a-form-model-item v-if="item.addOrEdit === 'silenceAdd'" label="字段用途" prop="silencePurpose">
+                  <a-select v-model="item.silencePurpose" :getPopupContainer=" triggerNode => { return triggerNode.parentNode } " placeholder="请选择字段用途">
+                    <a-select-option v-for="silencePurposeTypeItem in silencePurposeType" :key="silencePurposeTypeItem.key">{{ silencePurposeTypeItem.label }}</a-select-option>
+                    <a-popover
+                      slot="suffixIcon"
+                      placement="bottom"
+                      title="关于字段用途">
+                      <template slot="content">
+                        <p>用于静默新增时设置字段用途</p>
+                        <p>在新增数据的表单提交时，页面会根据设置的字段用途自动获取相关数据并追加到表单中</p>
+                        <p>当字段用途选择为<span style="font-weight: bold">自定义</span>时，必须指定一个业务逻辑(Logic)名称，表单提交前会将表单内容作为参数调用该Logic接口，并将Logic返回值作为表单值
+                        </p>
+                      </template>
+                      <a-icon style="color: rgba(0,0,0,.45)" type="info-circle"/>
+                    </a-popover>
+                  </a-select>
+                </a-form-model-item>
+                <a-form-model-item v-if="item.silencePurpose === 'customize'" label="字段用途对应Logic" prop="silenceSource">
+                  <a-input v-model="item.silenceSource" placeholder="请输入业务逻辑名称"/>
+                </a-form-model-item>
+              </template>
+            </template>
+            <template v-if="dataMode.table">
+              <a-divider style="font-size: 14px;margin-top: 0">表格列配置</a-divider>
+              <a-form-model-item v-if="item.formType" label="作用域插槽" prop="slot">
+                <a-select v-model="item.slot.type" :disabled="slotTypeDisabled" :getPopupContainer=" triggerNode => { return triggerNode.parentNode } " placeholder="插槽类型">
+                  <a-select-option v-for="slotTypeItem in slotTypeV" :key="slotTypeItem.key">{{ slotTypeItem.label }}</a-select-option>
+                  <a-popover slot="suffixIcon" placement="bottom" title="关于作用域插槽">
+                    <template slot="content">
+                      <p>你可以通过设置表格列的作用域插槽实现一些效果</p>
+                      <p>如果没有指定，默认会设置为文本溢出省略(长度:16)</p>
+                      <p>如果你选择文本溢出省略，需要设置文本溢出上限长度，建议ID主键等类型设置为8</p>
+                      <p>如果你选择多彩徽标，需要设置徽标对应的数据样式字典键</p>
+                      <a-divider style="font-size: 14px;margin-top: 0">关于表格列宽度</a-divider>
+                      <p>V1.1之后不再支持自定义表格列宽度，表格列宽度将通过作用域插槽类型自适应</p>
+                      <p>设置为文本溢出省略时，表格列宽度 = 文本溢出上限长度 * 7 + 42</p>
+                      <p>设置为多彩徽标时，表格列宽度为130</p>
+                      <p>设置为日期时间格式化时，表格列宽度为160</p>
+                    </template>
+                    <a-icon style="color: rgba(0,0,0,.45)" type="info-circle"/>
+                  </a-popover>
+                </a-select>
+              </a-form-model-item>
+              <a-form-model-item v-if="item.slot.type === 'badge'" label="徽标字典键" prop="slot.keyMap">
+                <a-input v-model="item.slot.keyMap" :disabled="slotTypeDisabled" placeholder="请输入徽标字典键">
+                  <a-popover
+                    slot="suffix"
+                    placement="bottom"
+                    title="关于徽标字典键">
+                    <template slot="content">
+                      <p>如果你设置了表单类型为选择框，且数据源是字典键，该值会自动带出</p>
+                    </template>
+                    <a-icon style="color: rgba(0,0,0,.45)" type="info-circle"/>
+                  </a-popover>
+                </a-input>
+              </a-form-model-item>
+              <a-form-model-item v-if="item.slot.type === 'ellipsis'" label="文本溢出上限长度" prop="slot.value">
+                <a-input-number v-model="item.slot.value" placeholder="请输入文本溢出上限长度" style="width: 100%"/>
+              </a-form-model-item>
+              <a-form-model-item v-if="item.slot.type === 'action'" label="操作列文本" prop="slot.actionText">
+                <a-input v-model="item.slot.actionText" placeholder="请输入操作列显示文本，默认为详情"/>
+              </a-form-model-item>
+              <a-form-model-item v-if="dataMode.sqlQueryItem || dataMode.sqlQueryCondition" label="字段默认值" prop="default">
+                <a-input v-model="item.default" placeholder="当查询结果为null时，指定默认值"/>
+              </a-form-model-item>
+            </template>
+          </a-card>
+        </a-col>
+        <a-col v-if="!dataMode.group && item.formType && (((dataMode.addOrEditForm || dataMode.queryForm ) && (item.formType === 'input' || item.formType === 'select')) || (dataMode.table && item.formType !== 'file' && item.formType !== 'image') || selectDataShow)" :span="9">
+          <a-card :bodyStyle="bodyStyle" title="扩展属性">
+            <template v-if="(dataMode.addOrEditForm || dataMode.queryForm ) && (item.formType === 'input' || item.formType === 'select')">
+              <a-divider style="font-size: 14px;margin-top: 0">提示相关</a-divider>
+              <a-form-model-item label="表单水印" prop="placeholder">
+                <a-input v-model="item.placeholder" placeholder="表单水印（placeholder）" />
+              </a-form-model-item>
+            </template>
+            <template v-if="selectDataShow">
+              <a-divider style="font-size: 14px;margin-top: 0">数据源相关</a-divider>
+              <a-form-model-item label="数据源类型" prop="selectType">
+                <a-select v-model="item.selectType" placeholder="请选择数据源类型" @change="changeSelectKType">
+                  <a-select-option v-for="selectDataTypeItem in selectDataType.filter(h=>!h.noMatch.includes(item.formType))" :key="selectDataTypeItem.key">{{ selectDataTypeItem.label }}</a-select-option>
+                  <a-popover
+                    slot="suffixIcon"
+                    placement="bottom"
+                    title="关于数据源类型">
+                    <template slot="content">
+                      <p>设置数据源</p>
+                      <p>数据源类型分为三种，你可以根据需要选择</p>
+                      <p>字典键：选项从字典表(t_dictionary)获取，你只需要选择字典键的名称即可</p>
+                      <p>业务逻辑名称：选项通过发起http请求调用指定的业务逻辑(Logic)接口获取</p>
+                      <p>固定集合：选项为静态值，JSONArray格式</p>
+                      <p>当表单为树形选择框类型时，返回的数据需按照以下形式：</p>
+                      <json-viewer
+                        :expand-depth="parseInt('100')"
+                        :value="DemoJson"
+                        style="overflow: auto;max-height: 440px"></json-viewer>
+                    </template>
+                    <a-icon style="color: rgba(0,0,0,.45)" type="info-circle"/>
+                  </a-popover>
+                </a-select>
+              </a-form-model-item>
+              <a-form-model-item v-if="item.selectType" label="数据源" prop="selectKey">
+                <a-select
+                  v-if="item.selectType === 'key'"
+                  v-model="item.selectKey"
+                  :filter-option="filterOption"
+                  placeholder="请选择字典键"
+                  show-search
+                  @change="changeSelectKey(item)">
+                  <template>
+                    <a-select-option
+                      v-for="(optionItem,index) in option"
+                      :key="index"
+                      :value="Object.keys(optionItem)[0]">{{ optionItem[Object.keys(optionItem)[0]] }}
+                    </a-select-option>
+                  </template>
+                </a-select>
+                <a-input v-if="item.selectType === 'logic'" v-model="item.selectKey" placeholder="请输入业务逻辑名称"/>
+                <a-textarea v-if="item.selectType === 'fixArray'" v-model="item.selectKey" placeholder="请录入数据源"/>
+              </a-form-model-item>
+              <a-form-model-item v-if="item.selectType === 'logic'" label="数据源加载方式" prop="selectLoadType">
+                <a-radio-group v-model="item.lazyLoad" button-style="solid" default-value="false">
+                  <a-radio-button value="true">
+                    {{ item.formType === 'treeSelect' ? '异步加载节点' : '懒加载搜索' }}
+                  </a-radio-button>
+                  <a-radio-button value="false">
+                    一次性加载
+                  </a-radio-button>
+                </a-radio-group>
+              </a-form-model-item>
+              <a-form-model-item label="关联外键字段" prop="selectKeyName">
+                <a-input v-model="item.selectKeyName" placeholder="该列关联的外键字段">
+                  <a-popover slot="suffix" placement="bottom" title="关于关联外键字段">
+                    <template slot="content">
+                      <p><span style="font-weight: bold;"><span style="color: #FF0036">非必需的实验性功能：</span>设置该参数需开发岗指导</span></p>
+                      <p>当字段与主子表外键有关系时，你可以指定<span style="font-weight: bold">该列所关联的外键字段名</span>
+                      </p>
+                      <p>设置该参数是为了该字段用作表单查询时，系统可以通过设置的关联外键字段，而非字面值作为查询条件</p>
+                      <p>示例：</p>
+                      <p>主表为t_userfiles(表档案)表，别名为u，与t_gasbrand(气表品牌表)有关联关系，别名为g，为了显示表档案对应的气表品牌数据，我们将数据字段名设置为g.f_gasbrand</p>
+                      <p>这样我们就可以在table中看到气表品牌了，但是用户如果通过气表品牌下拉框进行筛选，我们指定的g.f_gasbrand只是气表品牌的值，而实际关联字段是u.f_gasbrand_id</p>
+                      <p>所以如果我们指定了关联外键字段u.f_gasbrand_id，系统则会使用u.f_gasbrand_id筛选数据，而不是g.f_gasbrand，从而优化了查询效率
+                      </p>
+                    </template>
+                    <a-icon style="color: rgba(0,0,0,.45)" type="info-circle"/>
+                  </a-popover>
+                </a-input>
+              </a-form-model-item>
+            </template>
+            <template v-if="item.formType === 'file' || item.formType === 'image'">
+              <a-divider style="font-size: 14px;margin-top: 0">文件上传相关</a-divider>
+              <a-form-model-item label="允许上传文件数量" prop="accept" style="margin-bottom: 5px;">
+                <a-slider
+                  v-model="item.acceptCount"
+                  :marks="{ 1: '1', 3: '3', 5: '5', 10: '10', 15: '15', 20: '20'}"
+                  :max="20"
+                  :min="1"
+                />
+              </a-form-model-item>
+              <a-form-model-item label="附件用途" prop="useType">
+                <a-select v-model="item.useType" placeholder="指定文件用途，同表单不同用途">
+                  <a-select-option v-for="userTypeItem in $appdata.getDictionaryList('useType')" :key="userTypeItem.value">{{ userTypeItem.value }}</a-select-option>
+                </a-select>
+              </a-form-model-item>
+              <a-form-model-item label="上传的仓库" prop="resUploadStock">
+                <a-select v-model="item.resUploadStock" placeholder="选择文件上传到的仓库" @change="changeStock">
+                  <a-select-option v-for="stock in stockList" :key="stock.id">{{ stock.f_name }}</a-select-option>
+                </a-select>
+              </a-form-model-item>
+              <a-form-model-item v-if="item.resUploadStock" label="具体路径" prop="pathKey">
+                <a-select v-model="item.pathKey" placeholder="仓库扩展路径">
+                  <a-select-option v-for="pathKey in lowerPath" :key="pathKey.label">{{ pathKey.label }}</a-select-option>
+                </a-select>
+              </a-form-model-item>
+              <a-form-model-item v-if="item.formType === 'file'" label="允许上传文件类型" prop="accept">
+                <a-select v-model="item.accept" mode="tags" placeholder="指定文件类型，默认不限制" @change="itemAcceptChange">
+                  <a-select-option v-for="type_item in fileType" :key="type_item.accept">{{ type_item.label }}</a-select-option>
+                </a-select>
+              </a-form-model-item>
+            </template>
+          </a-card>
+        </a-col>
+        <a-col :span="18" v-if="dataMode.group">
+          <a-card :bodyStyle="bodyStyle" title="数据字段">
+            <a-button type="primary" slot="extra" @click="addColumnItem()">增加</a-button>
+            <a-row :gutter="24">
+              <a-col :span="7">
+                <span style="font-weight: bold">
+                  标签名
+                </span>
+              </a-col>
+              <a-col :span="7">
+                <span style="font-weight: bold">
+                  字段名
+                </span>
+              </a-col>
+              <a-col :span="8">
+                <span style="font-weight: bold">
+                  数据模式
+                </span>
+              </a-col>
+              <a-col :span="2">
+                <span style="font-weight: bold">
+                  操作
+                </span>
+              </a-col>
+            </a-row>
+            <a-divider style="margin: 6px 0" />
+            <div
+              v-for="(columnItem, index) in item.column"
+              :key="index"
+              draggable="true"
+              @dragend="handleDragEnd($event, columnItem)"
+              @dragenter="handleDragEnter($event, columnItem)"
+              @dragstart="handleDragStart($event, columnItem)"
+              @dragover.prevent="handleDragOver($event, columnItem)">
+              <a-row v-if="ending && dragging && columnItem.key === ending.key && dragging.key !== ending.key" class="dragTipsWarp">
+                <span class="dragTips">拖到此处放置</span>
+              </a-row>
+              <a-row :gutter="24" class="column_item dragTipsWarp">
+                <a-col :span="7">
+                  <span style="font-weight: bold">
+                    {{ columnItem.title }}
+                  </span>
+                </a-col>
+                <a-col :span="7">
+                  <span style="font-weight: bold">
+                    {{ columnItem.key }}
+                  </span>
+                </a-col>
+                <a-col :span="8">
+                  <a-tooltip>
+                    <template slot="title">
+                      查询表单项
+                    </template>
+                    <a-tag :color="columnItem.dataModeArray && columnItem.dataModeArray.includes('queryForm') ? 'blue' : 'rgba(0, 0, 0, 0.25)'"><a-icon type="file-search" /></a-tag>
+                  </a-tooltip>
+                  <a-tooltip>
+                    <template slot="title">
+                      表格列
+                    </template>
+                    <a-tag :color="columnItem.dataModeArray && columnItem.dataModeArray.includes('table') ? 'orange' : 'rgba(0, 0, 0, 0.25)'"><a-icon type="table" /></a-tag>
+                  </a-tooltip>
+                  <a-tooltip>
+                    <template slot="title">
+                      新增/修改表单项
+                    </template>
+                    <a-tag :color="columnItem.dataModeArray && columnItem.dataModeArray.includes('addOrEditForm') ? 'green' : 'rgba(0, 0, 0, 0.25)'"><a-icon type="form" /></a-tag>
+                  </a-tooltip>
+                  <a-tooltip>
+                    <template slot="title">
+                      SQL查询项
+                    </template>
+                    <a-tag :color="columnItem.dataModeArray && columnItem.dataModeArray.includes('sqlQueryItem') ? 'cyan' : 'rgba(0, 0, 0, 0.25)'"><a-icon type="bars" /></a-tag>
+                  </a-tooltip>
+                  <a-tooltip>
+                    <template slot="title">
+                      SQL查询表达式
+                    </template>
+                    <a-tag :color="columnItem.dataModeArray && columnItem.dataModeArray.includes('sqlQueryCondition') ? 'purple' : 'rgba(0, 0, 0, 0.25)'"><a-icon type="search" /></a-tag>
+                  </a-tooltip>
+                  <a-tooltip>
+                    <template slot="title">
+                      Excel导入项
+                    </template>
+                    <a-tag :color="columnItem.dataModeArray && columnItem.dataModeArray.includes('excelImportItem') ? '#107C41' : 'rgba(0, 0, 0, 0.25)'"><a-icon type="file-excel" /></a-tag>
+                  </a-tooltip>
+                  <a-tooltip>
+                    <template slot="title">
+                      数据组
+                    </template>
+                    <a-tag :color="columnItem.dataModeArray && columnItem.dataModeArray.includes('group') ? '#82A0D8' : 'rgba(0, 0, 0, 0.25)'"><a-icon type="crown" /></a-tag>
+                  </a-tooltip>
+                </a-col>
+                <a-col :span="1">
+                  <a-icon type="edit" @click="editColumnItem(columnItem.key,index)"/>
+                </a-col>
+                <a-col :span="1">
+                  <a-icon type="close" @click="removeColumnItem(columnItem.key,index)"/>
+                </a-col>
+              </a-row>
+            </div>
+          </a-card>
+        </a-col>
+      </a-row>
+      <a-alert
+        v-if="dataModeArrayData.length === 0"
+        message="错误：请至少选择一种数据模式"
+        show-icon
+        style="margin-top: 5px"
+        type="error"/>
+      <a-alert
+        v-if="dataMode.addOrEditForm && !dataMode.sqlQueryItem && item.formType !== 'file' && item.formType !== 'image'"
+        message="错误：如果要生成新增/修改表单项，必须勾选生成SQL查询项"
+        show-icon
+        style="margin-top: 5px"
+        type="error"/>
+      <a-alert
+        v-if="dataMode.queryForm && !dataMode.sqlQueryCondition"
+        message="提示：您没有勾选生成SQL查询表达式，渲染的表单项不会生成SQL查询条件"
+        show-icon
+        style="margin-top: 5px"
+        type="info"/>
+      <a-alert
+        v-if="dataMode.table && !dataMode.sqlQueryItem"
+        message="提示：您没有勾选生成SQL查询项，渲染的表格列不会绑定SQL结果集数据"
+        show-icon
+        style="margin-top: 5px"
+        type="info"/>
+      <a-alert
+        v-if="item.title.length > 8"
+        message="提示：标签名称过长可能会影响表格列展示效果，建议不超过8个字符"
+        show-icon
+        style="margin-top: 5px"
+        type="warning"/>
+    </a-form-model>
+    <create-query-item ref="queryItem" @getColumn="getColumnItem" @itemHandle="itemHandleItem"/>
+  </a-modal>
+</template>
+
+<script>
+import {
+  dataModeType,
+  fileType,
+  formRuleType,
+  formType,
+  queryType,
+  slotType,
+  silencePurposeType,
+  addOrEditType,
+  selectDataType
+} from '@vue2-client/config/CreateQueryConfig'
+import { post } from '@vue2-client/services/api'
+import JsonViewer from 'vue-json-viewer'
+import { getDictionaryParam } from '@vue2-client/services/api/common'
+
+const DemoJson = [{
+  value: 'zhejiang',
+  label: 'Zhejiang',
+  children: [{ value: 'hangzhou', label: 'Hangzhou', children: [{ value: 'xihu', label: 'West Lake' }] }]
+}]
+
+export default {
+  name: 'CreateQueryItem',
+  components: {
+    JsonViewer
+  },
+  computed: {
+    // 是否展示数据源相关字段
+    selectDataShow () {
+      return this.item.formType === 'select' || this.item.formType === 'checkbox' || this.item.formType === 'radio' || this.item.formType === 'treeSelect'
+    },
+    // 作用域插槽是否禁用
+    slotTypeDisabled () {
+      return this.item.selectKey && this.item.selectType === 'key'
+    },
+    // 字段名称是否禁用
+    keyDisabled () {
+      return this.item.formType === 'file' || this.item.formType === 'image' || this.dataMode.mixinTableName
+    },
+    // 数据模式是否禁用
+    dataModeDisabled () {
+      return this.item.formType === 'file' || this.item.formType === 'image' || this.item.formType === 'addressSearch'
+    },
+    dataMode: function () {
+      const result = {
+        queryForm: false,
+        table: false,
+        addOrEditForm: false,
+        sqlQueryItem: false,
+        sqlQueryCondition: false,
+        excelImportItem: false,
+        group: false,
+        mixinTableName: false
+      }
+      for (const item of this.dataModeArrayData) {
+        result[item] = true
+      }
+      return result
+    },
+    queryTypeV () {
+      return queryType.filter(item => {
+        return item.match.findIndex(type => type === this.item.formType || type === 'all') > -1
+      })
+    },
+    dataModeTypeV () {
+      if (this.dataModeArrayData.includes('group')) {
+        return [{
+          label: 'SQL生成查询项',
+          value: 'sqlQueryItem',
+          noMatch: ['file', 'personSetting']
+        }, {
+          label: '字段组存储',
+          value: 'group',
+          noMatch: []
+        }]
+      }
+      if (this.dataModeArrayData.includes('mixinTableName')) {
+        return [
+          {
+            label: '渲染查询表单项',
+            value: 'queryForm',
+            noMatch: ['file', 'image', 'textarea', 'personSetting']
+          },
+          {
+            label: '动态表名参数',
+            value: 'mixinTableName',
+            noMatch: []
+          }
+        ]
+      }
+      if (this.item.formType) {
+        return dataModeType.filter(item => {
+          return item.noMatch.findIndex(type => type === this.item.formType) === -1
+        })
+      } else {
+        return dataModeType
+      }
+    },
+    slotTypeV () {
+      return slotType.filter(item => {
+        return item.match.findIndex(type => type === this.item.formType || type === 'all') > -1
+      })
+    },
+    addOrEditTypeV () {
+      return addOrEditType.filter(item => {
+        return item.match.findIndex(type => type === this.item.formType || type === 'all') > -1
+      })
+    }
+  },
+  data () {
+    return {
+      DemoJson,
+      dataModeType,
+      queryType,
+      formType,
+      formRuleType,
+      slotType,
+      fileType,
+      silencePurposeType,
+      addOrEditType,
+      selectDataType,
+      // 控制modal框
+      visible: false,
+      type: '',
+      bodyStyle: {
+        height: '500px',
+        overflowY: 'auto'
+      },
+      // 表单查询方式是否禁用
+      formQueryTypeDisabled: false,
+      // 数据模式类型集合值
+      dataModeArrayData: [],
+      // 表单项
+      item: {
+        key: '',
+        title: '',
+        slot: {
+          type: 'default'
+        },
+        rule: {
+          required: 'false'
+        },
+        column: [],
+        queryType: '=',
+        formType: 'input',
+        accept: undefined,
+        acceptCount: 3,
+        pathKey: undefined,
+        selectType: undefined,
+        selectKey: undefined,
+        addOrEdit: 'all',
+        fileRootPath: undefined,
+        selectKeyName: undefined,
+        resUploadStock: undefined,
+        dataModeArray: []
+      },
+      // 数据仓库列表
+      stockList: [],
+      // 扩展目录
+      lowerPath: [],
+      parent_node: [],
+      // 必填控制
+      itemRules: {
+        formType: [{ required: true, message: '请输入表单类型', trigger: 'change' }],
+        key: [{
+          required: true,
+          validator: (rule, value, callback) => {
+            // 判断必填
+            if (!value) {
+              callback(new Error('请输入字段名称'))
+            } else {
+              // 判断必须全部小写 并且不能包含空格
+              if (value !== value.toLowerCase() || value.indexOf(' ') !== -1 && !value === '_mixinTableName_') {
+                callback(new Error('字段名称必须全部小写，且不能包含空格'))
+              } else {
+                callback()
+              }
+            }
+          },
+          trigger: 'blur'
+        }],
+        title: [{
+          required: true,
+          validator: (rule, value, callback) => {
+            // 判断必填
+            if (!value) {
+              callback(new Error('请输入标签名称'))
+            } else {
+              // // 大于8个字符给提示
+              // if (value.length > 8) {
+              //   callback(new Error('标签名称过长，建议不超过8个字符，可能会影响展示效果'))
+              // } else {
+              callback()
+              // }
+            }
+          },
+          trigger: 'blur'
+        }],
+        selectType: [{ required: true, message: '请选择数据源类型', trigger: 'change' }],
+        selectKey: [{ required: true, message: '请输入数据源内容', trigger: 'blur' }],
+        'slot.value': [{ required: true, message: '请输入文本溢出上限长度', trigger: 'blur' }],
+        'slot.keyMap': [{ required: true, message: '请输入徽标字典键', trigger: 'blur' }],
+        silencePurpose: [{ required: true, message: '请选择字段用途', trigger: 'change' }],
+        silenceSource: [{ required: true, message: '请输入业务逻辑名称', trigger: 'blur' }],
+        resUploadStock: [{ required: true, message: '请选择上传到的仓库', trigger: 'blur' }],
+        pathKey: [{ required: true, message: '请选择上传到的扩展目录', trigger: 'blur' }]
+      },
+      // 字典键集合
+      option: [],
+      selectIndex: null,
+      ending: null,
+      dragging: null,
+      itemMap: {}
+    }
+  },
+  mounted () {
+    this.resetDataMode()
+  },
+  props: { },
+  methods: {
+    initItem (lysis = {}) {
+      this.item = Object.assign({
+        key: '',
+        title: '',
+        slot: {
+          type: 'default'
+        },
+        rule: {
+          required: 'false'
+        },
+        column: [],
+        selectKey: undefined,
+        queryType: '=',
+        formType: 'input',
+        acceptCount: 3,
+        fileRootPath: undefined,
+        pathKey: undefined,
+        accept: undefined,
+        selectType: undefined,
+        addOrEdit: 'all',
+        selectKeyName: undefined,
+        resUploadStock: undefined,
+        dataModeArray: []
+      }, lysis)
+    },
+    // 控制 展示
+    flashModal (show = 'None') {
+      const bool = show === 'None' ? !this.visible : !!show
+      if (bool && this.option.length === 0) {
+        getDictionaryParam(true).then(res => {
+          this.option = res
+        })
+      }
+      this.visible = bool
+    },
+    // 编辑数据字段前准备数据
+    editColumnItemExecute (_item) {
+      this.type = '修改'
+      const defaultValue = { formType: 'input', type: 'string', addOrEdit: 'all', slot: { type: 'default' }, rule: {}, selectKey: {}, column: [] }
+      if (!_item.queryType) {
+        defaultValue.queryType = '='
+      }
+      _item = Object.assign({}, defaultValue, _item)
+      if (_item.formType === 'file' || _item.formType === 'image') {
+        this.getStocks()
+        // 如果有仓库 则获取该仓库的扩展路径
+        if (_item.resUploadStock) {
+          this.lowerPath = this.stockList.filter(item => item.id === _item.resUploadStock)[0]?.f_lower_path_json ?? []
+        }
+      }
+      if (_item.selectKey && _item.selectKey.length >= 6 && _item.selectType === 'logic' && _item.selectKey.substring(0, 6) === 'logic@') {
+        _item.selectKey = _item.selectKey.substring(6)
+      } else if (_item.selectKey && _item.selectKey instanceof Array) {
+        _item.selectKey = JSON.stringify(_item.selectKey)
+      }
+      // 兼容旧作用域插槽属性
+      this.compatibleTheSlot(_item)
+      this.item = _item
+      this.dataModeArrayData = this.item.dataModeArray
+      this.flashModal()
+
+      for (const columnItem of this.item.column) {
+        this.itemMap[columnItem.key] = Object.assign({
+          key: '',
+          title: '',
+          slot: {},
+          rule: {
+            required: 'false'
+          },
+          dataModeArray: []
+        }, columnItem)
+      }
+    },
+    // 增加数据字段前数据处理
+    addColumnItemExecute () {
+      this.type = '新增'
+      this.dataModeArrayData = ['queryForm', 'table', 'addOrEditForm', 'sqlQueryItem', 'sqlQueryCondition']
+      this.initItem()
+      this.flashModal()
+    },
+    modelCancel () {
+      this.flashModal()
+    },
+    submitItem () {
+      this.$refs.itemForm.validate(valid => {
+        if (valid) {
+          const fileBool = this.item.formType === 'file' || this.item.formType === 'image'
+          if (this.dataModeArrayData.length === 0) {
+            this.$message.error('请至少选择一种数据模式')
+            return
+          }
+          if (!fileBool && (this.dataMode.addOrEditForm && !this.dataMode.sqlQueryItem)) {
+            this.$message.error('如果要生成新增/修改表单项，必须勾选生成SQL查询项')
+            return
+          }
+          if (fileBool && !(!this.dataMode.table && !this.dataMode.sqlQueryCondition && !this.dataMode.queryForm)) {
+            this.$message.error(`上传类表单项只能选择 "渲染新增/修改表单项"`)
+            return
+          }
+          this.itemHandle()
+        }
+      })
+    },
+    visitAcceptFile () {
+      window.open('https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/input/file#attr-accept')
+    },
+    // 修改上传到哪个仓库
+    changeStock (stock) {
+      if (stock) {
+        const stockValue = this.stockList.filter(item => item.id === stock)[0]
+        this.lowerPath = stockValue.f_lower_path_json ?? []
+        this.item.resUploadMode = stockValue.f_stock_type
+        this.item.fileRootPath = stockValue.f_root_path
+        this.item.stockAlias = stockValue.f_alias
+        this.item.pathKey = undefined
+      }
+    },
+    // 文件上传限制类型修改
+    itemAcceptChange (newVal) {
+      if (newVal.includes('*')) {
+        this.item.accept = ['*']
+      }
+    },
+    getColumn () {
+      let result = {}
+      this.$emit('getColumn', val => { result = val })
+      return result
+    },
+    changeFormType (item) {
+      this.initItem({ key: item.key, title: item.title, formType: item.formType })
+      if (item.formType === 'file' || item.formType === 'image') {
+        this.item.acceptCount = 3
+        this.getStocks()
+        this.item.accept = item.formType === 'file' ? ['*'] : ['.jpg,.jpeg,.ico,.gif,svg,.webp,.png,.bmp,.pjpeg,']
+        this.item.resUploadMode = 'server'
+        this.item.key = item.formType === 'file' ? 'FilesId' : 'Images'
+        this.dataModeArrayData = ['addOrEditForm']
+      } else if (item.formType === 'addressSearch') {
+        this.dataModeArrayData = ['addOrEditForm', 'sqlQueryItem', 'table']
+      } else {
+        if (['FilesId', 'Images'].includes(this.item.key)) { this.item.key = '' }
+        this.resetDataMode()
+        // 表单查询方式有预选项时
+        if (this.queryTypeV.length) {
+          this.item.queryType = this.queryTypeV[0].key
+        }
+      }
+    },
+    // 获取所有仓库
+    getStocks () {
+      if (this.stockList.length === 0) {
+        post('/api/af-system/logic/getFilesStock', {}).then(res => {
+          this.stockList = res.sort((a, b) => b.progress - a.progress)
+        }).catch(e => {})
+      }
+    },
+    // 重置数据模式
+    resetDataMode () {
+      this.dataModeArrayData = this.dataModeTypeV.map(item => item.value).filter(h => h !== 'group')
+    },
+    // 数据模式改变
+    dataModeArrayDataChange (newVal) {
+      if (newVal.includes('mixinTableName')) {
+        this.item.key = '_mixinTableName_'
+        this.dataModeArrayData = ['queryForm', 'mixinTableName']
+      } else if (this.item.key === '_mixinTableName_') {
+        this.item.key = ''
+      }
+      if (newVal.includes('group')) {
+        this.dataModeArrayData = ['sqlQueryItem', 'group']
+      }
+    },
+    itemHandle () {
+      // 查询表单项或者新增/修改表单项
+      if (this.dataMode.queryForm || this.dataMode.addOrEditForm || this.dataMode.sqlQueryCondition) {
+        if (!this.dataMode.sqlQueryItem || !this.dataMode.addOrEditForm) {
+          this.delKey(this.item, 'addOrEdit', 'silencePurpose', 'silenceSource')
+        }
+        if (this.item.selectType && this.item.selectType === 'logic' && this.item.selectKey.substring(0, 6) !== 'logic@') {
+          // 数据源为logic
+          this.item.selectKey = 'logic@' + this.item.selectKey
+        } else if (this.item.selectType && this.item.selectType === 'fixArray' && !this.isJSON(this.item.selectKey)) {
+          // 数据源为固定json集合
+          this.$message.warning('下拉框数据源不是JSON集合')
+          return
+        }
+      } else {
+        this.delKey(this.item, 'queryType', 'formType', 'addOrEdit', 'silencePurpose', 'silenceSource', 'placeholder', 'rule', 'selectKey', 'selectKeyName', 'lazyLoad')
+      }
+      // 如果和数据源字段无关
+      if (!this.selectDataShow) {
+        this.delKey(this.item, 'selectType', 'selectKey', 'lazyLoad', 'selectKeyName')
+      }
+      // 删除空的关联外键字段
+      if (!this.item.selectKeyName) {
+        delete this.item.selectKeyName
+      }
+      // 默认插槽就先删除
+      if (this.item.slot && (this.item.slot.type === 'default' || !this.item.slot.type)) { delete this.item.slot }
+      // 根据数据模式处理数据
+      if (!this.dataMode.sqlQueryCondition) {
+        delete this.item.queryType
+      }
+      if (!this.dataMode.sqlQueryItem) { this.delKey(this.item, 'default') }
+      this.item.dataModeArray = this.dataModeArrayData
+      this.$emit('itemHandle', this.item, this.type)
+      this.initItem()
+      this.resetDataMode()
+    },
+    changeSelectKType () {
+      this.item.selectKey = undefined
+    },
+    changeSelectKey (item) {
+      if (item.selectType === 'key' && item.selectKey) {
+        this.item.slot = Object.assign({}, this.item.slot, { keyMap: item.selectKey, type: 'badge' })
+      }
+    },
+    filterOption (input, option) {
+      return (
+        option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
+      )
+    },
+    delKey (obj, ...args) {
+      args.forEach(v => {
+        delete obj[v]
+      })
+      return obj
+    },
+    // 判断是否为json字符串
+    isJSON (str) {
+      if (typeof str == 'string') {
+        try {
+          const obj = JSON.parse(str)
+          return !!(typeof obj == 'object' && obj)
+        } catch (e) {
+          return false
+        }
+      }
+    },
+    // 兼容旧插槽函数
+    compatibleTheSlot (_item) {
+      if (_item.slotKeyMap) {
+        _item.slot.keyMap = _item.slotKeyMap
+        delete _item.slotKeyMap
+      }
+      if (_item.slotValue) {
+        _item.slot.value = _item.slotValue
+        delete _item.slotValue
+      }
+      if (_item.actionText) {
+        _item.slot.actionText = _item.actionText
+        delete _item.actionText
+      }
+    },
+    // 拖拽事件
+    handleDragStart (e, item) {
+      this.dragging = item
+    },
+    handleDragEnd (e, item) {
+      if (this.ending.key === this.dragging.key) {
+        return
+      }
+      const newItems = [...this.item.column]
+      const src = newItems.indexOf(this.dragging)
+      const dst = newItems.indexOf(this.ending)
+      // newItems.splice(src, 1, ...newItems.splice(dst, 1, newItems[src]))  替换位置
+      // 挪移位置
+      newItems.splice(src, 1)
+      newItems.splice(dst, 0, this.dragging)
+      this.item.column = newItems
+      this.$nextTick(() => {
+        this.dragging = null
+        this.ending = null
+      })
+    },
+    handleDragOver (e) {
+      // 首先把div变成可以放置的元素，即重写dragenter/dragover
+      // e.dataTransfer.dropEffect="move";//在dragenter中针对放置目标来设置!
+      e.dataTransfer.dropEffect = 'move'
+    },
+    handleDragEnter (e, item) {
+      // 为需要移动的元素设置dragstart事件
+      e.dataTransfer.effectAllowed = 'move'
+      this.ending = item
+    },
+    editColumnItem (key, index) {
+      if (this.itemMap[key]) {
+        this.selectIndex = index
+        this.$refs.queryItem.editColumnItemExecute(this.itemMap[key])
+      } else {
+        this.$message.warn('编辑失败')
+      }
+    },
+    removeColumnItem (key, index) {
+      const _this = this
+      this.$confirm({
+        title: '您确定要删除该数据项？',
+        content: '删除的数据项无法恢复',
+        okText: '确定',
+        okType: 'danger',
+        cancelText: '取消',
+        zIndex: 9999,
+        onOk () {
+          delete _this.itemMap[key]
+          _this.item.column.splice(index, 1)
+        }
+      })
+    },
+    addColumnItem () {
+      this.type = '新增'
+      this.$refs.queryItem.addColumnItemExecute()
+    },
+    getColumnItem (callback) {
+      callback(JSON.parse(JSON.stringify(this.item.column)))
+    },
+    itemHandleItem (item, type) {
+      this.itemMap[item.key] = item
+      if (this.type === '新增') {
+        this.item.column.push(item)
+      } else {
+        this.$set(this.item.column, this.selectIndex, item)
+      }
+      this.$message.success(`${type}成功`)
+      this.$refs.queryItem.flashModal(false)
+    },
+  }
+}
+</script>
+<style scoped>
+ table th, table td {
+   border: 1px rgba(0, 0, 0, 0.65) solid;
+   text-align: center;
+   padding: 0 10px;
+ }
+ .column_item:hover {
+   background-color:rgba(64, 169, 255,0.25);
+ }
+ .dragTips{
+   display:block;
+   text-align: center;
+   border:1px dashed rgba(64, 169, 255,0.55);
+ }
+ .dragTipsWarp{
+   padding: .5rem 2rem;
+ }
+</style>