vue2-client 1.4.64 → 1.5.1

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

@@ -1,782 +1,713 @@
-<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>
-                  </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" :options="dataModeTypeV"/>
-            </a-form-model-item>
-          </a-card>
-        </a-col>
-        <a-col :span="9">
-          <a-card v-if="dataMode.queryForm || dataMode.addOrEditForm || dataMode.table" :bodyStyle="bodyStyle" title="核心配置">
-            <template v-if="dataMode.queryForm || dataMode.addOrEditForm">
-              <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>
-              <template v-if="item.formType">
-                <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>
-                <a-form-model-item v-if="dataMode.addOrEditForm" 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="item.formType" :span="9">
-          <a-card :bodyStyle="bodyStyle" title="扩展属性">
-            <template v-if="(dataMode.addOrEditForm || dataMode.queryForm ) && (item.formType === 'input' || item.formType === 'select' || item.formType === 'selects' || item.formType === 'cascader')">
-              <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="item.formType === 'selects'">
-              <a-divider style="font-size: 14px;margin-top: 0">级联选择相关</a-divider>
-              <a-form-model-item label="是否根节点" prop="groupIndexView">
-                <a-radio-group
-                  v-model="item.groupIndexView"
-                  button-style="solid"
-                  @change="groupIndexChange">
-                  <a-radio-button value="1">
-                    是
-                  </a-radio-button>
-                  <a-radio-button value="0">
-                    否
-                  </a-radio-button>
-                </a-radio-group>
-              </a-form-model-item>
-              <a-form-model-item v-if="item.groupIndexView === '0' && item.groupIndex !== -1" label="所属父级联动框" prop="groupIndex">
-                <a-select
-                  ref="groupIndex"
-                  v-model="item.parent_title"
-                  :getPopupContainer=" triggerNode => { return triggerNode.parentNode } "
-                  placeholder="请选择父级联动框"
-                  @change="parent_title_change">
-                  <a-select-option v-for="parent_item in parent_node" :key="parent_item.key">
-                    {{ parent_item.title }}
-                  </a-select-option>
-                </a-select>
-              </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' && item.formType !== 'treeSelect'" label="数据源加载方式" prop="selectLoadType">
-                <a-radio-group v-model="item.lazyLoad" 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-form-model-item>
-            </template>
-            <a-form-model-item v-if="selectDataShow || item.groupIndexView" 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 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-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' && item.formType !== 'personSetting' && item.formType !== 'cascader' "
-        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-form-model>
-  </a-modal>
-</template>
-
-<script>
-import {
-  dataModeType,
-  fileType,
-  formRuleType,
-  formType,
-  queryType,
-  slotType,
-  silencePurposeType,
-  addOrEditType,
-  selectDataType
-} from '@vue2-client/config/CreateQueryConfig'
-import { commonApi, post } from '@vue2-client/services/api'
-import JsonViewer from 'vue-json-viewer'
-
-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 === 'cascader' || (this.item.formType === 'selects' && this.item.groupIndexView === '1') || 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'
-    },
-    // 数据模式是否禁用
-    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
-      }
-      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.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'
-        },
-        queryType: '=',
-        formType: 'input',
-        accept: undefined,
-        pathKey: undefined,
-        groupIndexView: undefined,
-        selectType: undefined,
-        addOrEdit: 'all',
-        fileRootPath: undefined,
-        selectKeyName: undefined,
-        resUploadStock: undefined,
-        dataModeArray: []
-      },
-      // 数据仓库列表
-      stockList: [],
-      // 扩展目录
-      lowerPath: [],
-      parent_node: [],
-      // 必填控制
-      itemRules: {
-        formType: [{ required: true, message: '请输入表单类型', trigger: 'change' }],
-        key: [{ required: true, message: '请输入字段名称', trigger: 'blur' }],
-        title: [{ required: true, message: '请输入标签名称', 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' }],
-        groupIndex: [{ required: true, message: '请选择父级联动框', trigger: 'blur' }],
-        resUploadStock: [{ required: true, message: '请选择上传到的仓库', trigger: 'blur' }],
-        pathKey: [{ required: true, message: '请选择上传到的扩展目录', trigger: 'blur' }]
-      },
-      // 字典键集合
-      option: []
-    }
-  },
-  mounted () {
-    this.resetDataMode()
-  },
-  props: { },
-  methods: {
-    initItem (lysis = {}) {
-      this.item = Object.assign({
-        key: '',
-        title: '',
-        slot: {
-          type: 'default'
-        },
-        rule: {
-          required: 'false'
-        },
-        selectKey: undefined,
-        queryType: '=',
-        formType: 'input',
-        fileRootPath: undefined,
-        pathKey: undefined,
-        accept: undefined,
-        selectType: undefined,
-        groupIndex: undefined,
-        groupIndexView: 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) {
-        post(commonApi.getDictionaryParam, {}).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: {} }
-      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)
-      }
-      if (_item.formType === 'selects') {
-        // 因为 groupIndex 可能有很多值 单选框不行  赋给一个新的变量
-          _item.groupIndexView = _item.groupIndex === 1 ? '1' : '0'
-      }
-      // 兼容旧作用域插槽属性
-      this.compatibleTheSlot(_item)
-      this.item = _item
-      this.dataModeArrayData = this.item.dataModeArray
-      this.flashModal()
-    },
-    // 增加数据字段前数据处理
-    addColumnItemExecute () {
-      this.type = '新增'
-      this.dataModeArrayData = ['queryForm', 'table', 'addOrEditForm', 'sqlQueryItem', 'sqlQueryCondition']
-      this.initItem()
-      this.flashModal()
-    },
-    modelCancel () {
-      this.flashModal()
-      // this.$emit('update:visible', false)
-      // // 延迟是为了避免编辑数据窗口关闭时重置表单导致的闪烁
-      // setTimeout(() => {
-      //   this.resetDataMode()
-      //   this.resetFormProp()
-      // }, 100)
-    },
-    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.item.formType !== 'personSetting' && this.item.formType !== 'cascader') {
-            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 = ['*']
-      }
-    },
-    parent_title_change (parentKey) {
-      const parentArr = this.getColumn().filter(item => item.formType === 'selects' && item.key === parentKey)
-      if (parentArr.length === 1) {
-        this.item.groupIndex = parentArr[0].groupIndex + 1
-        this.item.group = parentArr[0].group
-        this.item.parent_title = parentArr[0].title
-      } else {
-        this.$message.error('数据字段中有字段别名相同,请检查!')
-      }
-    },
-    groupIndexChange ({ target }) {
-      if (target.value === '1') {
-        this.item.groupIndex = 1
-        this.item.groupIndexView = '1'
-        if (this.item.title) {
-          this.item.group = this.item.title + '组'
-        } else {
-          this.item.groupIndex = undefined
-          this.item.groupIndexView = undefined
-          this.$message.error('请先输入字段中文名称!')
-        }
-      } else {
-        if (!this.item.title) {
-          this.$message.error('请先输入字段名称!')
-          this.item.groupIndex = -1
-          this.item.groupIndexView = undefined
-          return
-        }
-        this.item.groupIndex = undefined
-        // 获取所有可以当作父节点的字段
-        this.parent_node = this.getColumn().filter(item => item.formType === 'selects' && item.key !== this.item.key)
-      }
-    },
-    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']
-      } 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)
-    },
-    itemHandle () {
-      // 查询表单项或者新增/修改表单项
-      if (this.dataMode.queryForm || this.dataMode.addOrEditForm) {
-        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
-      }
-    }
-  }
-}
-</script>
+<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>
+                  </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" :options="dataModeTypeV"/>
+            </a-form-model-item>
+          </a-card>
+        </a-col>
+        <a-col :span="9">
+          <a-card v-if="dataMode.queryForm || dataMode.addOrEditForm || dataMode.table" :bodyStyle="bodyStyle" title="核心配置">
+            <template v-if="dataMode.queryForm || dataMode.addOrEditForm">
+              <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>
+              <template v-if="item.formType">
+                <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>
+                <a-form-model-item v-if="dataMode.addOrEditForm" 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="item.formType" :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>
+            </template>
+            <a-form-model-item v-if="selectDataShow || item.groupIndexView" 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 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-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-form-model>
+  </a-modal>
+</template>
+
+<script>
+import {
+  dataModeType,
+  fileType,
+  formRuleType,
+  formType,
+  queryType,
+  slotType,
+  silencePurposeType,
+  addOrEditType,
+  selectDataType
+} from '@vue2-client/config/CreateQueryConfig'
+import { commonApi, post } from '@vue2-client/services/api'
+import JsonViewer from 'vue-json-viewer'
+
+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'
+    },
+    // 数据模式是否禁用
+    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
+      }
+      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.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'
+        },
+        queryType: '=',
+        formType: 'input',
+        accept: undefined,
+        acceptCount: 3,
+        pathKey: undefined,
+        groupIndexView: 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, message: '请输入字段名称', trigger: 'blur' }],
+        title: [{ required: true, message: '请输入标签名称', 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: []
+    }
+  },
+  mounted () {
+    this.resetDataMode()
+  },
+  props: { },
+  methods: {
+    initItem (lysis = {}) {
+      this.item = Object.assign({
+        key: '',
+        title: '',
+        slot: {
+          type: 'default'
+        },
+        rule: {
+          required: 'false'
+        },
+        selectKey: undefined,
+        queryType: '=',
+        formType: 'input',
+        acceptCount: 3,
+        fileRootPath: undefined,
+        pathKey: undefined,
+        accept: undefined,
+        selectType: undefined,
+        groupIndex: undefined,
+        groupIndexView: 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) {
+        post(commonApi.getDictionaryParam, {}).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: {} }
+      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)
+      }
+      // 兼容旧作用域插槽属性
+      this.compatibleTheSlot(_item)
+      this.item = _item
+      this.dataModeArrayData = this.item.dataModeArray
+      this.flashModal()
+    },
+    // 增加数据字段前数据处理
+    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']
+      } 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)
+    },
+    itemHandle () {
+      // 查询表单项或者新增/修改表单项
+      if (this.dataMode.queryForm || this.dataMode.addOrEditForm) {
+        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
+      }
+    }
+  }
+}
+</script>