vue2-client 1.4.63 → 1.5.0

package/src/base-client/components/common/CreateSimpleFormQuery/CreateSimpleFormQueryItem.vue

@@ -1,553 +1,508 @@
-<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-card>
-        </a-col>
-        <a-col :span="9">
-          <a-card :bodyStyle="bodyStyle" title="核心配置">
-            <template>
-              <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 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 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>
-          </a-card>
-        </a-col>
-        <a-col v-if="item.formType" :span="9">
-          <a-card :bodyStyle="bodyStyle" title="扩展属性">
-            <template v-if="item.formType === 'input' || item.formType === 'select' || item.formType === 'selects'">
-              <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="item.selectKey = undefined">
-                  <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>
-                  <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">
-                    懒加载搜索
-                  </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="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-form-model>
-  </a-modal>
-</template>
-
-<script>
-import {
-  fileType,
-  formRuleType,
-  formType,
-  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: 'CreateSimpleFormQueryItem',
-  components: {
-    JsonViewer
-  },
-  computed: {
-    // 是否展示数据源相关字段
-    selectDataShow () {
-      return this.item.formType === 'select' || (this.item.formType === 'selects' && this.item.groupIndexView === '1') || this.item.formType === 'checkbox' || this.item.formType === 'radio'
-    },
-    // 字段名称是否禁用
-    keyDisabled () {
-      return this.item.formType === 'file' || this.item.formType === 'image'
-    },
-    addOrEditTypeV () {
-      return addOrEditType.filter(item => {
-        return item.match.findIndex(type => type === this.item.formType || type === 'all') > -1
-      })
-    }
-  },
-  data () {
-    return {
-      DemoJson,
-      formType,
-      formRuleType,
-      fileType,
-      silencePurposeType,
-      addOrEditType,
-      selectDataType,
-      // 控制modal框
-      visible: false,
-      type: '',
-      bodyStyle: {
-        height: '500px',
-        overflowY: 'auto'
-      },
-      // 表单项
-      item: {
-        key: '',
-        title: '',
-        rule: {
-          required: 'false'
-        },
-        formType: 'input',
-        accept: undefined,
-        acceptCount: 3,
-        pathKey: undefined,
-        groupIndexView: undefined,
-        selectType: undefined,
-        selectKey: undefined,
-        addOrEdit: 'all',
-        fileRootPath: undefined,
-        selectKeyName: undefined,
-        resUploadStock: undefined
-      },
-      // 数据仓库列表
-      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 () {
-  },
-  props: { },
-  methods: {
-    initItem (lysis = {}) {
-      this.item = Object.assign({
-        key: '',
-        title: '',
-        rule: {
-          required: 'false'
-        },
-        selectKey: undefined,
-        acceptCount: 3,
-        formType: 'input',
-        fileRootPath: undefined,
-        pathKey: undefined,
-        accept: undefined,
-        selectType: undefined,
-        groupIndexView: undefined,
-        addOrEdit: 'all',
-        selectKeyName: undefined,
-        resUploadStock: undefined
-      }, 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: {} }
-      _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.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.item = _item
-      this.flashModal()
-    },
-    // 增加数据字段前数据处理
-    addColumnItemExecute () {
-      this.type = '新增'
-      this.initItem()
-      this.flashModal()
-    },
-    modelCancel () {
-      this.flashModal()
-    },
-    submitItem () {
-      this.$refs.itemForm.validate(valid => {
-        if (valid) { 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'
-      } else {
-        if (['FilesId', 'Images'].includes(this.item.key)) { this.item.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 => {})
-      }
-    },
-    itemHandle () {
-      // 查询表单项或者新增/修改表单项
-      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
-      }
-      // 如果和数据源字段无关
-      if (!this.selectDataShow) {
-        this.delKey(this.item, 'selectType', 'selectKey', 'lazyLoad', 'selectKeyName')
-      }
-      this.delKey(this.item, 'addOrEdit', 'queryType', 'default', 'silencePurpose', 'silenceSource', 'lazyLoad')
-      this.item.dataModeArray = ['addOrEditForm']
-      this.$emit('itemHandle', this.item, this.type)
-      this.initItem()
-    },
-    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
-        }
-      }
-    },
-  }
-}
-</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-card>
+        </a-col>
+        <a-col :span="9">
+          <a-card :bodyStyle="bodyStyle" title="核心配置">
+            <template>
+              <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 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 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>
+          </a-card>
+        </a-col>
+        <a-col v-if="item.formType" :span="9">
+          <a-card :bodyStyle="bodyStyle" title="扩展属性">
+            <template v-if="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-form-model>
+  </a-modal>
+</template>
+
+<script>
+import {
+  fileType,
+  formRuleType,
+  formType,
+  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: 'CreateSimpleFormQueryItem',
+  components: {
+    JsonViewer
+  },
+  computed: {
+    // 是否展示数据源相关字段
+    selectDataShow () {
+      return this.item.formType === 'select' || this.item.formType === 'checkbox' || this.item.formType === 'radio' || this.item.formType === 'treeSelect'
+    },
+    // 字段名称是否禁用
+    keyDisabled () {
+      return this.item.formType === 'file' || this.item.formType === 'image'
+    },
+    addOrEditTypeV () {
+      return addOrEditType.filter(item => {
+        return item.match.findIndex(type => type === this.item.formType || type === 'all') > -1
+      })
+    }
+  },
+  data () {
+    return {
+      DemoJson,
+      formType,
+      formRuleType,
+      fileType,
+      silencePurposeType,
+      addOrEditType,
+      selectDataType,
+      // 控制modal框
+      visible: false,
+      type: '',
+      bodyStyle: {
+        height: '500px',
+        overflowY: 'auto'
+      },
+      // 表单项
+      item: {
+        key: '',
+        title: '',
+        rule: {
+          required: 'false'
+        },
+        formType: 'input',
+        accept: undefined,
+        acceptCount: 3,
+        pathKey: undefined,
+        groupIndexView: undefined,
+        selectType: undefined,
+        selectKey: undefined,
+        addOrEdit: 'all',
+        fileRootPath: undefined,
+        selectKeyName: undefined,
+        resUploadStock: undefined
+      },
+      // 数据仓库列表
+      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: '',
+        rule: {
+          required: 'false'
+        },
+        selectKey: undefined,
+        formType: 'input',
+        acceptCount: 3,
+        fileRootPath: undefined,
+        pathKey: undefined,
+        accept: undefined,
+        selectType: undefined,
+        groupIndex: undefined,
+        groupIndexView: undefined,
+        addOrEdit: 'all',
+        selectKeyName: undefined,
+        resUploadStock: undefined
+      }, 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: {} }
+      _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.flashModal()
+    },
+    // 增加数据字段前数据处理
+    addColumnItemExecute () {
+      this.type = '新增'
+      this.initItem()
+      this.flashModal()
+    },
+    modelCancel () {
+      this.flashModal()
+    },
+    submitItem () {
+      this.$refs.itemForm.validate(valid => {
+        if (valid) { 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'
+      } else {
+        if (['FilesId', 'Images'].includes(this.item.key)) { this.item.key = '' }
+        this.resetDataMode()
+      }
+    },
+    // 获取所有仓库
+    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 () {},
+    itemHandle () {
+      // 查询表单项或者新增/修改表单项
+      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
+      }
+      // 如果和数据源字段无关
+      if (!this.selectDataShow) {
+        this.delKey(this.item, 'selectType', 'selectKey', 'lazyLoad', 'selectKeyName')
+      }
+      this.delKey(this.item, 'addOrEdit', 'queryType', 'default', 'silencePurpose', 'silenceSource', 'lazyLoad')
+      this.$emit('itemHandle', this.item, this.type)
+      this.initItem()
+      this.resetDataMode()
+    },
+    changeSelectKType () {
+      this.item.selectKey = undefined
+    },
+    changeSelectKey (item) {
+    },
+    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) {
+    }
+  }
+}
+</script>