vue2-client 0.1.1 → 1.2.0

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

@@ -0,0 +1,1159 @@
+<template>
+  <a-drawer
+    title="查询配置生成"
+    placement="right"
+    :width="isMobile ? screenWidth : screenWidth * 0.85"
+    :visible="visible"
+    @close="onClose"
+  >
+    <a-row :gutter="24">
+      <a-col :xl="14" :lg="12" :md="12" :sm="24" :xs="24">
+        <a-form-model
+          ref="businessCreateForm"
+          :rules="rules"
+          :model="form"
+          :label-col="labelCol"
+          :wrapper-col="wrapperCol"
+        >
+          <a-form-model-item label="查询主表名" prop="tableName">
+            <a-input v-model="form.tableName" placeholder="查询用的主表+别名，用空格隔开，如：t_userfiles u" />
+          </a-form-model-item>
+          <a-form-model-item label="预设关联表" prop="joinArray">
+            <a-popover title="说明" placement="right">
+              <template slot="content">
+                <p>配置你的查询中可能涉及到的所有关联表</p>
+                <p>比如你的查询中涉及到了t_userinfo表，就需要加入t_userinfo表的关联，和你写SQL的关联一样</p>
+                <p>请注意，你关联的<span style="color: #ff0000">除主表外的任何表</span>都需要配置</p>
+                <a-input-group compact style="width: 400px;">
+                  <a-input style="width: 20%" placeholder="表别名" readOnly/>
+                  <a-input style="width: 80%" placeholder="关联条件" readOnly/>
+                </a-input-group>
+                <a-input-group compact style="width: 400px;">
+                  <a-input value="ui" style="width: 20%" placeholder="表别名" readOnly/>
+                  <a-input value="t_userinfo ui on i.f_userinfo_id = ui.f_userinfo_id" style="width: 80%" placeholder="关联条件" readOnly/>
+                </a-input-group>
+              </template>
+              <a-button type="primary" @click="addJoinItem()">增加</a-button>
+            </a-popover>
+            <div v-for="(itemObj, index) in joinArray" :key="index">
+              <a-input-group compact>
+                <a-input @change="changeJoinArray()" v-model="itemObj.key" style="width: 20%;position: relative;bottom: 1px;" placeholder="表别名" />
+                <a-input @change="changeJoinArray()" v-model="itemObj.value" style="width: 80%" placeholder="关联条件">
+                  <a-icon slot="addonAfter" type="close" @click="removeJoinItem(index)"/>
+                </a-input>
+              </a-input-group>
+            </div>
+          </a-form-model-item>
+          <a-form-model-item label="SQL查询表达式" prop="condition">
+            <a-input v-model="form.condition.value" placeholder="用作SQL查询的固定条件表达式，如：gb.f_meter_type='物联网表'，可选" />
+            <template v-if="form.condition.value && Object.keys(form.joinArray).length > 0">
+              <a-alert message="提示：如果SQL查询表达式中用到了关联表，需要勾选用到的关联表别名" type="success" />
+              <a-checkbox-group v-model="form.condition.join" :options="conditionJoinArray"/>
+            </template>
+          </a-form-model-item>
+          <a-form-model-item label="排序方式" prop="orderBy">
+            <a-input v-model="form.orderBy" placeholder="排序字段，用别名+字段名+排序方式(可选)表示，如：u.id desc" />
+          </a-form-model-item>
+          <a-form-model-item label="数据字段" prop="column">
+            <a-button type="primary" @click="addColumnItem()">增加</a-button>
+            <div v-for="(columnItem, index) in form.column" :key="index">
+              <a-row :gutter="16">
+                <a-col :span="16">
+                  <span style="font-weight: bold">{{ columnItem.title }}（{{ columnItem.key }}）</span>
+                </a-col>
+                <a-col v-if="index > 0 && form.column.length > 1" :span="2">
+                  <a-icon type="up-square" @click="upColumnItem(columnItem.key,index)"/>
+                </a-col>
+                <a-col v-if="(index !== form.column.length - 1) && form.column.length > 1" :span="2">
+                  <a-icon type="down-square" @click="downColumnItem(columnItem.key,index)"/>
+                </a-col>
+                <a-col :span="2">
+                  <a-icon type="edit" @click="editColumnItem(columnItem.key,index)"/>
+                </a-col>
+                <a-col :span="2">
+                  <a-icon type="close" @click="removeColumnItem(columnItem.key,index)"/>
+                </a-col>
+              </a-row>
+            </div>
+          </a-form-model-item>
+          <a-form-model-item label="操作按钮配置" prop="buttonState">
+            <a-checkbox-group v-model="buttonStateData" :options="buttonStateArray" />
+          </a-form-model-item>
+        </a-form-model>
+        <a-modal
+          title="数据字段配置"
+          :visible="dataColumnVisible"
+          :width="1000"
+          :zIndex="1001"
+          @cancel="modelCancel"
+          @ok="submitItem">
+          <a-form-model
+            ref="itemForm"
+            :rules="itemRules"
+            :model="item">
+            <a-row :gutter="16">
+              <a-col :span="8">
+                <a-form-model-item label="数据字段名" prop="key">
+                  <a-input v-model="item.key" placeholder="请输入数据字段名" ref="key">
+                    <a-popover slot="suffix" title="关于数据字段名" placement="bottom">
+                      <template slot="content">
+                        <p>设置数据字段的名称</p>
+                        <p>用作SQL查询时必须遵守<span style="font-weight: bold">表别名.列名</span>的格式，如：i.id</p>
+                        <p>其他情况下不限制</p>
+                      </template>
+                      <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+                    </a-popover>
+                  </a-input>
+                </a-form-model-item>
+              </a-col>
+              <a-col :span="8">
+                <a-form-model-item label="数据字段中文名" prop="title">
+                  <a-input v-model="item.title" placeholder="请输入数据字段中文名，如：编号" />
+                </a-form-model-item>
+              </a-col>
+            </a-row>
+            <a-row :gutter="16">
+              <a-col :span="24">
+                <a-form-model-item label="数据模式" prop="dataMode">
+                  <a-checkbox-group v-model="dataModeArrayData" :options="dataModeArray" />
+                </a-form-model-item>
+              </a-col>
+            </a-row>
+            <template v-if="dataMode.queryForm || dataMode.addOrEditForm">
+              <a-row :gutter="16">
+                <a-col :span="8">
+                  <a-form-model-item label="表单类型" prop="formType">
+                    <a-select v-model="item.formType" placeholder="表单类型，可选" @change="changeFormType(item)">
+                      <a-select-option key="input">输入框</a-select-option>
+                      <a-select-option key="select">选择框</a-select-option>
+                      <a-select-option key="checkbox">多选框</a-select-option>
+                      <a-select-option key="radio">单选框</a-select-option>
+                      <a-select-option key="rangePicker">日期范围选择框</a-select-option>
+                      <a-select-option key="monthPicker">月份选择框</a-select-option>
+                      <a-select-option key="datePicker">单日选择框</a-select-option>
+                      <a-select-option key="cascader">级联选择框(单个下拉)</a-select-option>
+                      <a-select-option key="selects">级联选择框(多个下拉)</a-select-option>
+                      <a-select-option key="textarea">文本域</a-select-option>
+                      <a-select-option key="file">文件上传</a-select-option>
+                      <a-select-option key="image">图片上传</a-select-option>
+                      <a-popover slot="suffixIcon" title="关于表单类型" placement="right">
+                        <template slot="content">
+                          <p>预览设置的表单类型</p>
+                          <a-input-group compact style="width: 400px;">
+                            <a-input value="输入框" style="width: 20%" readOnly/>
+                            <a-input style="width: 80%" placeholder="请输入"/>
+                          </a-input-group>
+                          <br/>
+                          <a-input-group compact style="width: 400px;">
+                            <a-input value="选择框" style="width: 20%" readOnly/>
+                            <a-select style="width: 80%" placeholder="请选择"/>
+                          </a-input-group>
+                          <br/>
+                          <a-input-group compact style="width: 400px;">
+                            <a-input value="多选框" style="width: 20%" readOnly/>
+                            <a-checkbox-group style="margin-left: 10px;margin-top: 5px; width: 70%" :options="['数据1','数据2']"/>
+                          </a-input-group>
+                          <br/>
+                          <a-input-group compact style="width: 400px;">
+                            <a-input value="单选框" style="width: 20%" readOnly/>
+                            <a-radio-group style="margin-left: 10px;margin-top: 5px; width: 70%" :options="[{label: '数据1', value: 'a'},{label: '数据2', value: 'b'}]" name="radioGroup" />
+                          </a-input-group>
+                          <br/>
+                          <a-input-group compact style="width: 400px;">
+                            <a-input value="日期范围选择框" style="width: 20%" readOnly/>
+                            <a-range-picker style="width: 80%" :show-time="true" format="YYYY-MM-DD HH:mm:ss" valueFormat="YYYY-MM-DD HH:mm:ss" />
+                          </a-input-group>
+                          <br/>
+                          <a-input-group compact style="width: 400px;">
+                            <a-input value="月份选择框" style="width: 20%" readOnly/>
+                            <a-month-picker style="width: 80%"/>
+                          </a-input-group>
+                          <br/>
+                          <a-input-group compact style="width: 400px;">
+                            <a-input value="单日选择框" style="width: 20%" readOnly/>
+                            <a-date-picker style="width: 80%"/>
+                          </a-input-group>
+                          <br/>
+                          <a-input-group compact style="width: 400px;">
+                            <a-input value="级联选择框" style="width: 20%" readOnly/>
+                            <a-cascader style="width: 80%" placeholder="请选择"/>
+                          </a-input-group>
+                          <br/>
+                          <a-input-group compact style="width: 400px;">
+                            <a-input value="文本域" style="width: 20%" readOnly/>
+                            <a-textarea style="width: 80%" placeholder="请输入" :rows="1"/>
+                          </a-input-group>
+                          <br/>
+                          <a-input-group compact style="width: 400px;">
+                            <a-input value="文件上传" style="width: 20%" readOnly/>
+                            <a-upload-dragger
+                              name="file"
+                              :multiple="true"
+                              style="margin-left: 5px; width: 75%"
+                              action="https://www.mocky.io/v2/5cc8019d300000980a055e76">
+                              <p class="ant-upload-drag-icon">
+                                <a-icon type="inbox" />
+                              </p>
+                              <p class="ant-upload-text">
+                                点击或拖动文件到该区域上传
+                              </p>
+                              <p class="ant-upload-hint">
+                                支持单个或多个文件
+                              </p>
+                            </a-upload-dragger>
+                          </a-input-group>
+                          <br/>
+                          <a-input-group compact style="width: 400px;">
+                            <a-input value="图片上传" style="width: 20%" readOnly/>
+                            <a-upload style="margin-left: 5px; width: 75%" list-type="picture-card" :file-list="[]">
+                              <a-icon type="plus" />
+                              <div class="ant-upload-text">
+                                Upload
+                              </div>
+                            </a-upload>
+                          </a-input-group>
+                        </template>
+                        <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+                      </a-popover>
+                    </a-select>
+                  </a-form-model-item>
+                </a-col>
+                <a-col :span="8">
+                  <a-form-model-item
+                    label="表单水印"
+                    prop="placeholder"
+                    v-if="item.formType !== 'checkbox' && item.formType !== 'radio' && item.formType !== 'file' && item.formType !== 'image'">
+                    <a-input v-model="item.placeholder" placeholder="表单水印（placeholder），可选" />
+                  </a-form-model-item>
+                </a-col>
+                <a-col :span="8">
+                  <a-form-model-item label="表单查询方式" prop="queryType" v-if="dataMode.queryForm && dataMode.sqlQueryCondition">
+                    <a-select v-model="item.queryType" placeholder="表单查询方式，可选">
+                      <a-select-option key="=">相等(=)</a-select-option>
+                      <a-select-option key="!=">不相等(!=)</a-select-option>
+                      <a-select-option key="LIKE">全模糊(like)</a-select-option>
+                      <a-select-option key="LEFT_LIKE">左模糊(left like)</a-select-option>
+                      <a-select-option key="RIGHT_LIKE">右模糊(right like)</a-select-option>
+                      <a-select-option key=">">大于(>)</a-select-option>
+                      <a-select-option key=">=">大于等于(>=)</a-select-option>
+                      <a-select-option key="<">小于(<)</a-select-option>
+                      <a-select-option key="<=">小于等于(<=)</a-select-option>
+                      <a-select-option key="IN">包含(in)</a-select-option>
+                      <a-select-option key="NOT_IN">不包含(not in)</a-select-option>
+                      <a-select-option key="BETWEEN">之间(between)</a-select-option>
+                    </a-select>
+                  </a-form-model-item>
+                </a-col>
+              </a-row>
+              <a-row :gutter="16" v-if="item.formType === 'file' || item.formType === 'image'">
+                <a-col :span="8">
+                  <a-form-model-item
+                    label="允许上传文件数量"
+                    prop="accept"
+                    v-if="item.formType === 'file' || item.formType === 'image'">
+                    <a-slider
+                      v-model="item.acceptCount"
+                      :min="1"
+                      :max="20"
+                      :marks="{ 1: '1', 3: '3', 5: '5', 10: '10', 15: '15', 20: '20'}"
+                      :default-value="3"
+                    />
+                  </a-form-model-item>
+                </a-col>
+                <a-col :span="8">
+                  <a-form-model-item
+                    label="文件上传模式"
+                    prop="resUploadMode"
+                    v-if="item.formType === 'file' || item.formType === 'image'">
+                    <a-select v-model="item.resUploadMode" placeholder="文件上传模式，默认为服务器" @change="changeFormType(item)">
+                      <a-select-option key="server">服务器</a-select-option>
+                      <a-select-option key="oss">腾讯云对象存储</a-select-option>
+                      <a-select-option key="base64" :disabled="item.formType === 'file'">Base64</a-select-option>
+                      <a-popover slot="suffixIcon" title="关于资源上传模式" placement="right">
+                        <template slot="content">
+                          <p>指定文件上传到服务器，对象存储还是以base64方式存储</p>
+                          <br/>
+                          <p><span style="font-weight: bold">服务器：</span>文件上传到服务器，数据库需存储文件于服务器的路径</p>
+                          <p><span style="font-weight: bold">对象存储：</span>文件上传到云对象存储，数据库需存储文件于对象存储的路径</p>
+                          <p><span style="font-weight: bold">base64：</span>文件以base64字符串方式存入数据库中（仅图片上传表单支持）</p>
+                        </template>
+                        <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+                      </a-popover>
+                    </a-select>
+                  </a-form-model-item>
+                </a-col>
+                <a-col :span="8">
+                  <a-form-model-item
+                    label="允许上传文件类型"
+                    prop="accept"
+                    v-if="item.formType === 'file'">
+                    <a-input v-model="item.accept" placeholder="指定文件类型，默认不限制，可选">
+                      <a-popover slot="suffix" title="关于允许上传文件类型" placement="bottom">
+                        <template slot="content">
+                          <p>指定允许上传的文件类型扩展名，如：.doc,.docx等，详情请参考<a target="_blank" @click="visitAcceptFile">允许上传文件类型</a></p>
+                        </template>
+                        <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+                      </a-popover>
+                    </a-input>
+                  </a-form-model-item>
+                </a-col>
+                <!-- TODO 配置文件上传表单-所属模块 -->
+                <!-- TODO 配置文件上传表单-上传扩展目录Key -->
+              </a-row>
+              <a-row :gutter="16" v-if="item.formType === 'selects'">
+                <a-col :span="8">
+                  <a-form-model-item label="数据所属组别" prop="group">
+                    <a-select v-model="item.group" placeholder="请输入数据字段名" ref="group">
+                      <a-select-option v-for="i in groupArray" :key="i">{{ i }}</a-select-option>
+                      <a-popover slot="suffixIcon" title="关于所属组别" placement="bottom">
+                        <template slot="content">
+                          <p>多个下拉框时按照次组别归为一组</p>
+                        </template>
+                        <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+                      </a-popover>
+                    </a-select>
+                  </a-form-model-item>
+                </a-col>
+                <a-col :span="8">
+                  <a-form-model-item label="组别内顺序" prop="groupIndex">
+                    <a-select v-model="item.groupIndex" placeholder="表单类型，可选">
+                      <template v-for="i in 5">
+                        <a-select-option :key="i">{{ i }}</a-select-option>
+                      </template>
+                      <a-popover slot="suffix" title="关于组别内顺序" placement="bottom">
+                        <template slot="content">
+                          <p>多个下拉框为一组时,按照此顺序判断页面如何展示以及下拉框得父子顺序</p>
+                          <p>只有顺序为1得数据字段才可以选择数据源类型</p>
+                        </template>
+                        <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+                      </a-popover>
+                    </a-select>
+                  </a-form-model-item>
+                </a-col>
+                <a-col :span="8">
+                  <a-form-model-item label="增加组" prop="groupName">
+                    <a-input-search v-model="item.groupName" @search="addGroupName" placeholder="请输入数据字段名" ref="key">
+                      <a-button slot="enterButton">
+                        新增
+                      </a-button>
+                    </a-input-search>
+                  </a-form-model-item>
+                </a-col>
+              </a-row>
+              <a-row :gutter="16">
+                <a-col :span="8">
+                  <a-form-model-item label="数据源类型" prop="selectType" v-if="item.formType === 'select' || (item.formType === 'selects' && item.groupIndex == 1) || item.formType === 'cascader'">
+                    <a-select v-model="item.selectType" placeholder="请选择数据源类型" @change="changeSelectKey(item)">
+                      <a-select-option key="key">字典键</a-select-option>
+                      <a-select-option key="fixArray">固定集合</a-select-option>
+                      <a-select-option key="logic">业务逻辑</a-select-option>
+                      <a-popover
+                        slot="suffixIcon"
+                        title="关于下拉框或级联框数据源类型"
+                        placement="bottom">
+                        <template slot="content">
+                          <p>设置下拉框或级联框的数据源</p>
+                          <p>数据源类型分为三种，你可以根据需要选择</p>
+                          <p>字典键：选项从字典表(t_dictionary)获取，你只需要选择字典键的名称即可</p>
+                          <p>业务逻辑名称：选项通过发起http请求调用指定的业务逻辑(Logic)接口获取</p>
+                          <p>固定集合：选项为静态值，JSONArray格式</p>
+                          <p>当表单类型为 " 级联选择框(多个下拉) " 是数据模式为 [{lable,value,children[{lable,value,children[]},{lable,value,children[]}]}] 形式</p>
+                          <p>如：</p>
+                          <json-viewer :value="DemoJson" :expand-depth="parseInt('100')" style="overflow: auto;max-height: 440px"></json-viewer>
+                        </template>
+                        <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+                      </a-popover>
+                    </a-select>
+                  </a-form-model-item>
+                </a-col>
+                <a-col :span="8">
+                  <a-form-model-item label="数据源" prop="selectKey" v-if="(item.formType === 'select' || (item.formType === 'selects' && item.groupIndex == 1) || item.formType === 'cascader') && item.selectType">
+                    <a-select
+                      show-search
+                      v-model="item.selectKey"
+                      v-if="item.selectType === 'key'"
+                      placeholder="请选择字典键"
+                      :filter-option="filterOption"
+                      @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-model="item.selectKey" v-if="item.selectType === 'logic'" placeholder="请输入业务逻辑名称"/>
+                    <a-textarea v-model="item.selectKey" v-if="item.selectType === 'fixArray'" placeholder="请录入数据源" />
+                  </a-form-model-item>
+                </a-col>
+                <a-col :span="8">
+                  <a-form-model-item label="数据外键字段名" prop="selectKeyName" v-if="item.formType === 'select'">
+                    <a-input v-model="item.selectKeyName" placeholder="该列所在表在主表的外键名，可选">
+                      <a-popover slot="suffix" title="关于数据外键字段名" placement="bottom">
+                        <template slot="content">
+                          <p>当该列所属表为主表的关联表，且存在主外键关联关系，你可以指定<span style="font-weight: bold">该列所在表在主表的外键名</span>，如：i.f_type_id</p>
+                          <p>如果你的<a @click="$refs['key'].focus()">数据字段名</a>所属表为主表，或字段名已经是主表外键名时，不用设置该值</p>
+                          <p>设置该参数是为了表单查询时可以通过外键id列而非具体值筛选数据</p>
+                          <p>示例：</p>
+                          <p>主表为t_userfiles表，别名为u，与t_gasbrand(气表品牌表)有关联关系，别名为g，数据字段名设置为g.f_gasbrand</p>
+                          <p>如果指定了数据外键字段名，例如u.f_gasbrand_id，则使用数据外键字段名筛选数据，如果不指定该值，则使用<a @click="$refs['key'].focus()">数据字段名</a>筛选</p>
+                        </template>
+                        <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+                      </a-popover>
+                    </a-input>
+                  </a-form-model-item>
+                </a-col>
+              </a-row>
+              <a-form-model-item label="表单校验类型" prop="rule">
+                <a-row :gutter="16">
+                  <a-col :span="8" v-if="item.formType === 'input' || item.formType === 'textarea'">
+                    <a-select v-model="item.rule.type" placeholder="校验类型，可选">
+                      <a-select-option key="string">字符串</a-select-option>
+                      <a-select-option key="number">数字</a-select-option>
+                      <a-select-option key="boolean">布尔值</a-select-option>
+                      <a-select-option key="regexp">正则表达式</a-select-option>
+                      <a-select-option key="integer">整数</a-select-option>
+                      <a-select-option key="float">小数</a-select-option>
+                      <a-select-option key="array">数组或集合</a-select-option>
+                      <a-select-option key="date">日期</a-select-option>
+                      <a-select-option key="email">邮箱</a-select-option>
+                      <a-popover slot="suffixIcon" title="关于表单校验类型" placement="bottom">
+                        <template slot="content">
+                          <p>设置表单项的校验类型，默认字符串类型</p>
+                          <p>你也可以设置该表单项是否必填</p>
+                        </template>
+                        <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+                      </a-popover>
+                    </a-select>
+                  </a-col>
+                  <a-col :span="8">
+                    <a-radio-group v-model="item.rule.required" default-value="true" button-style="solid">
+                      <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-row :gutter="16" v-if="dataMode.addOrEditForm && dataMode.sqlQueryItem">
+                <a-col :span="8">
+                  <a-form-model-item ref="addOrEdit" label="新增/修改场景选择" prop="addOrEdit">
+                    <a-select v-model="item.addOrEdit" placeholder="请选择场景">
+                      <a-select-option key="all">新增和修改</a-select-option>
+                      <a-select-option key="add">仅支持新增</a-select-option>
+                      <a-select-option key="edit">仅支持修改</a-select-option>
+                      <a-select-option key="silenceAdd">静默新增（不生成表单）</a-select-option>
+                      <a-popover
+                        slot="suffixIcon"
+                        title="关于新增/修改场景选择"
+                        placement="bottom">
+                        <template slot="content">
+                          <p>设置表单项的新增/修改场景</p>
+                          <p>静默新增类型用于非人为新增的数据，不会生成表单项，且必须设置字段用途</p>
+                        </template>
+                        <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+                      </a-popover>
+                    </a-select>
+                  </a-form-model-item>
+                </a-col>
+                <a-col :span="8">
+                  <a-form-model-item v-if="item.addOrEdit === 'silenceAdd'" ref="silencePurpose" label="字段用途" prop="silencePurpose">
+                    <a-select v-model="item.silencePurpose" placeholder="请选择字段用途">
+                      <a-select-option key="createTime">创建时间</a-select-option>
+                      <a-select-option key="operator">创建/操作人</a-select-option>
+                      <a-select-option key="orgId">组织机构ID</a-select-option>
+                      <a-select-option key="customize">自定义</a-select-option>
+                      <a-popover
+                        slot="suffixIcon"
+                        title="关于字段用途"
+                        placement="bottom">
+                        <template slot="content">
+                          <p>用于静默新增时设置字段用途</p>
+                          <p>在新增数据的表单提交时，页面会根据设置的字段用途获取相关数据并追加到表单中</p>
+                          <p>当字段用途选择为<span style="font-weight: bold">自定义</span>时，必须指定一个业务逻辑(Logic)名称，表单提交前会将表单内容作为参数调用该Logic接口，并将Logic返回值作为表单值</p>
+                        </template>
+                        <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+                      </a-popover>
+                    </a-select>
+                  </a-form-model-item>
+                </a-col>
+                <a-col :span="8">
+                  <a-form-model-item v-if="item.silencePurpose === 'customize'" label="业务逻辑" prop="silenceSource">
+                    <a-input v-model="item.silenceSource" placeholder="请输入业务逻辑名称"/>
+                  </a-form-model-item>
+                </a-col>
+              </a-row>
+            </template>
+            <template v-if="dataMode.table">
+              <a-row :gutter="16">
+                <a-col :span="8">
+                  <a-form-model-item label="作用域插槽" prop="slot">
+                    <a-select v-model="item.slot.type" placeholder="插槽类型，可选">
+                      <a-select-option key="default">不设置</a-select-option>
+                      <a-select-option key="ellipsis">文本溢出省略</a-select-option>
+                      <a-select-option key="badge">多彩徽标</a-select-option>
+                      <a-select-option key="date">日期格式化</a-select-option>
+                      <a-select-option key="dateTime">日期时间格式化</a-select-option>
+                      <a-select-option key="action">操作列</a-select-option>
+                      <a-popover slot="suffixIcon" title="关于作用域插槽" placement="bottom">
+                        <template slot="content">
+                          <p>你可以通过设置表格列的作用域插槽实现一些效果</p>
+                          <p>如果没有指定，默认会设置为文本溢出省略(长度:16)</p>
+                          <p>如果你选择文本溢出省略，需要设置文本溢出上限长度</p>
+                          <p>如果你选择多彩徽标，需要设置徽标对应的数据样式字典键</p>
+                        </template>
+                        <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+                      </a-popover>
+                    </a-select>
+                  </a-form-model-item>
+                </a-col>
+                <a-col :span="8">
+                  <a-form-model-item label="表格列宽度" prop="width">
+                    <a-popover
+                      title="关于表格列宽度"
+                      placement="bottom">
+                      <template slot="content">
+                        <p>当作用域插槽设置为文本溢出省略时，表格列宽度将自适应，计算方式为文本溢出上限长度 * 7 + 42</p>
+                        <p>当作用域插槽设置为多彩徽标时，表格列宽度为固定为130</p>
+                        <p>当作用域插槽设置为日期时间格式化时，表格列宽度为固定为160</p>
+                        <p>当该列数据过长导致换行时，建议设置作用域插槽为文本溢出省略，或将表格列设置为固定宽度值</p>
+                      </template>
+                      <a-input-number style="width: 100%" v-model="item.width" placeholder="表格列宽度，可选"/>
+                    </a-popover>
+                  </a-form-model-item>
+                </a-col>
+                <a-col :span="8">
+                  <a-form-model-item label="字段默认值" prop="default" v-if="dataMode.sqlQueryItem">
+                    <a-input v-model="item.default" placeholder="当查询结果为null时，指定默认值，可选" />
+                  </a-form-model-item>
+                </a-col>
+              </a-row>
+              <a-row :gutter="16">
+                <a-col :span="8">
+                  <a-form-model-item label="文本溢出上限长度" prop="slotValue" v-if="item.slot.type === 'ellipsis'">
+                    <a-input-number style="width: 100%" v-model="item.slotValue" placeholder="请输入文本溢出上限长度"/>
+                  </a-form-model-item>
+                  <a-form-model-item label="徽标字典键" prop="slotKeyMap" v-if="item.slot.type === 'badge'">
+                    <a-input v-model="item.slotKeyMap" placeholder="请输入徽标字典键">
+                      <a-popover
+                        title="关于徽标字典键"
+                        placement="bottom"
+                        slot="suffix">
+                        <template slot="content">
+                          <p>如果你设置了表单类型为选择框，且数据源是字典键，该值会自动带出</p>
+                        </template>
+                        <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+                      </a-popover>
+                    </a-input>
+                  </a-form-model-item>
+                  <a-form-model-item label="操作列文本" prop="actionText" v-if="item.slot.type === 'action'">
+                    <a-input v-model="item.actionText" placeholder="请输入操作列显示文本，默认为详情"/>
+                  </a-form-model-item>
+                </a-col>
+              </a-row>
+            </template>
+            <a-alert style="margin-top: 5px" v-if="dataModeArrayData.length === 0" show-icon message="错误：请至少选择一种数据模式" type="error" />
+            <a-alert style="margin-top: 5px" v-if="dataMode.addOrEditForm && !dataMode.sqlQueryItem" show-icon message="错误：如果要生成新增/修改表单项，必须勾选生成SQL查询项" type="error" />
+            <a-alert style="margin-top: 5px" v-if="(item.formType === 'file' || item.formType === 'image') && !(!dataMode.table && !dataMode.sqlQueryCondition && !dataMode.queryForm)" show-icon message="错误：上传类表单的数据模式只能选择 生成新增/修改表单项 和 生成SQL查询项 " type="error" />
+            <a-alert style="margin-top: 5px" v-if="dataMode.queryForm && !dataMode.sqlQueryCondition" show-icon message="提示：您没有勾选生成SQL查询表达式，渲染的表单项不会生成SQL查询条件" type="info" />
+            <a-alert style="margin-top: 5px" v-if="dataMode.table && !dataMode.sqlQueryItem" show-icon message="提示：您没有勾选生成SQL查询项，渲染的表格列不会绑定SQL结果集数据" type="info" />
+          </a-form-model>
+        </a-modal>
+        <a-button type="primary" @click="view">操作</a-button>
+      </a-col>
+      <a-col :xl="10" :lg="12" :md="12" :sm="24" :xs="24">
+        <a-card :bordered="false" title="预览" size="small" style="overflow: auto">
+          <json-viewer :copyable="{copyText: '复制', copiedText: '已复制'}" :value="result" :expand-depth="parseInt('100')" style="overflow: auto;max-height: 440px"></json-viewer>
+        </a-card>
+      </a-col>
+    </a-row>
+    <a-modal
+      title="效果预览"
+      :width="isMobile ? screenWidth : screenWidth * 0.8"
+      :centered="true"
+      :visible="modelVisible"
+      :zIndex="1001"
+      @cancel="onModelClose"
+      :destroyOnClose="true">
+      <template slot="footer">
+        <a-button key="close" @click="onModelClose">
+          返回
+        </a-button>
+        <a-button key="submit" type="primary" @click="submit">
+          保存
+        </a-button>
+      </template>
+      <x-form-table
+        :view-mode="true"
+        :queryParamsJson="result">
+      </x-form-table>
+    </a-modal>
+  </a-drawer>
+</template>
+
+<script>
+import XFormItem from '@vue2-client/base-client/components/common/XForm/XFormItem'
+import XFormTable from '@vue2-client/base-client/components/common/XFormTable/XFormTable'
+import JsonViewer from 'vue-json-viewer'
+import FileSaver from 'file-saver'
+import { mapState } from 'vuex'
+import { post } from '@vue2-client/services/api/restTools'
+import { commonApi } from '@vue2-client/services/api/common'
+const DemoJson = [{ value: 'zhejiang', label: 'Zhejiang', children: [{ value: 'hangzhou', label: 'Hangzhou', children: [{ value: 'xihu', label: 'West Lake' }] }] }]
+export default {
+  name: 'CreateQuery',
+  components: {
+    JsonViewer,
+    XFormTable,
+    XFormItem
+  },
+  data () {
+    return {
+      DemoJson,
+      // 页面宽度
+      screenWidth: document.documentElement.clientWidth,
+      // 效果预览模态框是否展示
+      modelVisible: false,
+      // 数据列配置模态框是否展示
+      dataColumnVisible: false,
+      // 数据列操作类型：新增，修改
+      type: '新增',
+      // 数据模式类型集合
+      dataModeArray: [
+        { label: '生成查询表单项', value: 'queryForm' },
+        { label: '生成表格列', value: 'table' },
+        { label: '生成新增/修改表单项', value: 'addOrEditForm' },
+        { label: '生成SQL查询项', value: 'sqlQueryItem' },
+        { label: '生成SQL查询表达式', value: 'sqlQueryCondition' }
+      ],
+      // 操作按钮状态集合
+      buttonStateArray: [
+        { label: '新增', value: 'add' },
+        { label: '修改', value: 'edit' },
+        { label: '删除', value: 'delete' },
+        { label: '导出', value: 'export' }
+      ],
+      // 数据模式类型集合值
+      dataModeArrayData: ['queryForm', 'table', 'addOrEditForm', 'sqlQueryItem', 'sqlQueryCondition'],
+      // 操作按钮状态集合值
+      buttonStateData: ['add', 'edit', 'delete', 'export'],
+      labelCol: { span: 4 },
+      wrapperCol: { span: 14 },
+      form: {
+        tableName: '',
+        joinArray: {},
+        condition: {},
+        orderBy: '',
+        column: []
+      },
+      result: {},
+      item: {
+        key: '',
+        title: '',
+        slot: {},
+        rule: {},
+        dataModeArray: []
+      },
+      itemMap: {},
+      selectIndex: null,
+      selectType: undefined,
+      joinArray: [],
+      groupArray: ['默认组别'],
+      rules: {
+        tableName: [{ required: true, message: '请输入查询表名', trigger: 'blur' }],
+        orderBy: [{ required: true, message: '请输入排序方式', trigger: 'blur' }]
+      },
+      itemRules: {
+        key: [{ required: true, message: '请输入数据列名', trigger: 'blur' }],
+        title: [{ required: true, message: '请输入中文名称', trigger: 'blur' }],
+        selectType: [{ required: true, message: '请选择数据源类型', trigger: 'change' }],
+        selectKey: [{ required: true, message: '请输入数据源内容', trigger: 'blur' }],
+        slotValue: [{ required: true, message: '请输入文本溢出上限长度', trigger: 'blur' }],
+        slotKeyMap: [{ required: true, message: '请输入徽标字典键', trigger: 'blur' }],
+        silencePurpose: [{ required: true, message: '请选择字段用途', trigger: 'change' }],
+        silenceSource: [{ required: true, message: '请输入业务逻辑名称', trigger: 'blur' }],
+        group: [{ required: true, message: '请选择所属组别', trigger: 'blur' }],
+        groupIndex: [{ required: true, message: '请选择组内顺序', trigger: 'blur' }]
+
+      },
+      // 字典键集合
+      option: []
+    }
+  },
+  mounted () {
+    this.initView()
+  },
+  computed: {
+    ...mapState('setting', ['isMobile']),
+    conditionJoinArray: function () {
+      const result = []
+      for (const item in this.form.joinArray) {
+        if (item !== '') {
+          result.push({
+            label: item,
+            value: item
+          })
+        }
+      }
+      if (result.length === 0) {
+        result.push({
+          label: '-',
+          value: '-'
+        })
+      }
+      return result
+    },
+    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
+    },
+    buttonState: function () {
+      const result = {
+        add: false,
+        edit: false,
+        delete: false,
+        export: false
+      }
+      for (const item of this.buttonStateData) {
+        result[item] = true
+      }
+      return result
+    }
+  },
+  props: {
+    visible: {
+      type: Boolean,
+      default: false
+    },
+    toEditJson: {
+      type: Object,
+      default: () => {}
+    }
+  },
+  watch: {
+    visible (rel) {
+      if (rel) {
+        this.initView()
+      }
+      if (rel && this.toEditJson) {
+        // 处理预设关联表
+        if (this.joinArray.length === 0) {
+          for (const key in this.toEditJson.joinArray) {
+            this.joinArray.push({
+              key: key,
+              value: this.toEditJson.joinArray[key]
+            })
+          }
+        }
+        // 处理具体表单项
+        this.form = Object.assign(
+          {
+            tableName: '',
+            joinArray: {},
+            condition: {},
+            orderBy: '',
+            column: []
+          }, this.toEditJson
+        )
+        for (const columnItem of this.form.column) {
+          // 数据模式兼容性处理
+          if (!(columnItem.dataMode || columnItem.dataModeArray)) {
+            columnItem.dataModeArray = ['queryForm', 'table', 'addOrEditForm', 'sqlQueryItem', 'sqlQueryCondition']
+          } else if (columnItem.dataMode) {
+            if (columnItem.dataMode === 'all') {
+              columnItem.dataModeArray = ['queryForm', 'table', 'addOrEditForm', 'sqlQueryItem', 'sqlQueryCondition']
+            } else if (columnItem.dataMode === 'form') {
+              columnItem.dataModeArray = ['queryForm', 'addOrEditForm', 'sqlQueryCondition']
+            } else if (columnItem.dataMode === 'table') {
+              columnItem.dataModeArray = ['table', 'sqlQueryItem']
+            } else if (columnItem.dataMode === 'table_form') {
+              columnItem.dataModeArray = ['table', 'sqlQueryItem', 'sqlQueryCondition']
+            } else if (columnItem.dataMode === 'only_form') {
+              columnItem.dataModeArray = ['queryForm']
+            } else if (columnItem.dataMode === 'only_table') {
+              columnItem.dataModeArray = ['table']
+            } else if (columnItem.dataMode === 'clear') {
+              columnItem.dataModeArray = ['sqlQueryItem', 'sqlQueryCondition']
+            } else if (columnItem.dataMode === 'only_add_modify') {
+              columnItem.dataModeArray = ['addOrEditForm', 'sqlQueryItem']
+            }
+          }
+          delete columnItem.dataMode
+          // 插槽兼容处理
+          if (columnItem.slot) {
+            if (columnItem.slot.value && columnItem.slot.type === 'ellipsis') {
+              columnItem.slotValue = columnItem.slot.value
+            } else if (columnItem.slot.keyMap && columnItem.slot.type === 'badge') {
+              columnItem.slotKeyMap = columnItem.slot.keyMap
+            } else if (columnItem.slot.actionText && columnItem.slot.type === 'action') {
+              columnItem.actionText = columnItem.slot.actionText
+            }
+          }
+          // 必选项兼容处理
+          if (columnItem.rule && !isNaN(columnItem.rule.required)) {
+            columnItem.rule.required = columnItem.rule.required.toString()
+          }
+          // 下拉框数据源兼容处理
+          if ((columnItem.formType === 'select' || columnItem.formType === 'cascader') && columnItem.selectKey) {
+            // 数据源为logic
+            if (columnItem.selectKey instanceof String && columnItem.selectKey.startsWith('logic@')) {
+              columnItem.selectType = 'logic'
+            } else if (columnItem.selectKey instanceof Array || this.isJSON(columnItem.selectKey)) {
+              // 数据源为固定json集合
+              if (columnItem.selectKey instanceof Array) {
+                columnItem.selectKey = JSON.stringify(columnItem.selectKey)
+              }
+              columnItem.selectType = 'fixArray'
+            } else {
+              columnItem.selectType = 'key'
+            }
+          }
+          this.itemMap[columnItem.key] = Object.assign({
+            key: '',
+            title: '',
+            slot: {},
+            rule: {},
+            dataModeArray: []
+          }, columnItem)
+        }
+        // 处理操作按钮配置
+        if (this.toEditJson.buttonState) {
+          this.buttonStateData = []
+          for (const buttonStateKey of Object.keys(this.toEditJson.buttonState)) {
+            if (this.toEditJson.buttonState[buttonStateKey]) {
+              this.buttonStateData.push(buttonStateKey)
+            }
+          }
+        }
+      }
+    }
+  },
+  methods: {
+    // 添加多个下拉框分组标识符
+    addGroupName (val) {
+      this.item.groupName = undefined
+      if (!this.groupArray.find(item => item === val)) {
+        this.groupArray.push(val)
+      }
+    },
+    // 初始化组件
+    initView () {
+      this.joinArray = []
+      this.result = {}
+      post(commonApi.getDictionaryParam, {}).then(res => {
+        this.option = res
+      })
+    },
+    onClose () {
+      this.$emit('update:visible', false)
+    },
+    filterOption (input, option) {
+      return (
+        option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
+      )
+    },
+    onModelClose () {
+      this.modelVisible = false
+    },
+    addJoinItem () {
+      this.joinArray.push({
+        key: '',
+        value: ''
+      })
+      this.changeJoinArray()
+    },
+    removeJoinItem (index) {
+      this.joinArray.splice(index, 1)
+      this.changeJoinArray()
+    },
+    addColumnItem () {
+      this.type = '新增'
+      this.dataColumnVisible = true
+    },
+    editColumnItem (key, index) {
+      if (this.itemMap[key]) {
+        this.type = '修改'
+        this.item = this.itemMap[key]
+        this.dataModeArrayData = this.item.dataModeArray
+        this.selectIndex = index
+        this.dataColumnVisible = true
+      } else {
+        this.$message.warn('编辑失败')
+      }
+    },
+    removeColumnItem (key, index) {
+      const _this = this
+      this.$confirm({
+        title: '您确定要删除该数据项？',
+        content: '删除的数据项无法恢复',
+        okText: '确定',
+        okType: 'danger',
+        cancelText: '取消',
+        onOk () {
+          delete _this.itemMap[key]
+          _this.form.column.splice(index, 1)
+        }
+      })
+    },
+    upColumnItem (key, index) {
+      const newIndex = index - 1
+      const itemA = this.form.column[newIndex]
+      const itemB = this.form.column[index]
+      this.form.column.splice(index, 1, itemA)
+      this.form.column.splice(newIndex, 1, itemB)
+    },
+    downColumnItem (key, index) {
+      const newIndex = index + 1
+      const itemA = this.form.column[newIndex]
+      const itemB = this.form.column[index]
+      this.form.column.splice(index, 1, itemA)
+      this.form.column.splice(newIndex, 1, itemB)
+    },
+    changeJoinArray () {
+      const joinArrayObject = {}
+      for (const item of this.joinArray) {
+        joinArrayObject[item.key] = item.value
+      }
+      this.form.joinArray = joinArrayObject
+    },
+    submitItem () {
+      this.$refs.itemForm.validate(valid => {
+        if (valid) {
+          if (this.dataModeArrayData.length === 0) {
+            this.$message.error('请至少选择一种数据模式')
+            return
+          }
+          if (this.dataMode.addOrEditForm && !this.dataMode.sqlQueryItem) {
+            this.$message.error('如果要生成新增/修改表单项，必须勾选生成SQL查询项')
+            return
+          }
+          if ((this.item.formType === 'file' || this.item.formType === 'image') && !(!this.dataMode.table && !this.dataMode.sqlQueryCondition && !this.dataMode.queryForm)) {
+            this.$message.error('上传类表单的数据模式只能选择 生成新增/修改表单项 和 生成SQL查询项')
+            return
+          }
+          this.itemHandle()
+        }
+      })
+    },
+    itemHandle () {
+      const str = JSON.stringify(this.item)
+      const item = JSON.parse(str)
+      this.itemMap[item.key] = JSON.parse(str)
+      this.itemMap[item.key].dataModeArray = this.dataModeArrayData
+      // 查询表单项或者新增/修改表单项
+      if (this.dataMode.queryForm || this.dataMode.addOrEditForm) {
+        if (!this.dataMode.sqlQueryItem || !this.dataMode.addOrEditForm) {
+          delete item.addOrEdit
+          delete item.silencePurpose
+          delete item.silenceSource
+        }
+        // 不生成SQL查询表达式，或者表单查询类型为=
+        if (!this.dataMode.sqlQueryCondition || (item.queryType && item.queryType === '=')) {
+          delete item.queryType
+        }
+        // 表单类型为输入框
+        if (item.formType && item.formType === 'input') {
+          delete item.formType
+        }
+        // 校验类型
+        if (!item.rule.type) {
+          delete item.rule
+        } else {
+          if (item.rule.required) {
+            item.rule.required = item.rule.required.toString() === 'true'
+          } else {
+            item.rule.required = true
+          }
+        }
+        // 下拉框
+        if ((item.formType === 'select' || (item.formType === 'selects' && item.groupIndex == '1') || item.formType === 'cascader') && item.selectKey) {
+          // 数据源为logic
+          if (item.selectType === 'logic') {
+            // 如果已经有了 logic@ 将不再拼接
+            if (item.selectKey.substring(0, 6) !== 'logic@') {
+              item.selectKey = 'logic@' + item.selectKey
+            }
+          } else if (item.selectType === 'fixArray') {
+            // 数据源为固定json集合
+            if (!this.isJSON(item.selectKey)) {
+              this.$message.warning('下拉框数据源不是JSON集合')
+              return
+            }
+          }
+          if (item.formType !== 'selects') {
+            delete item.selectType
+          }
+        } else {
+          if (item.formType !== 'selects') {
+            delete item.group
+            delete item.groupIndex
+          }
+          delete item.selectType
+          delete item.selectKey
+          delete item.selectKeyName
+        }
+      } else {
+        delete item.queryType
+        delete item.formType
+        delete item.addOrEdit
+        delete item.silencePurpose
+        delete item.silenceSource
+        delete item.placeholder
+        delete item.rule
+        delete item.selectType
+        delete item.selectKey
+        delete item.selectKeyName
+      }
+      // 表格列
+      if (this.dataMode.table) {
+        if (item.slot.type && item.slot.type !== 'default') {
+          if (item.slotValue && item.slot.type === 'ellipsis') {
+            item.slot.value = item.slotValue
+          } else if (item.slotKeyMap && item.slot.type === 'badge') {
+            item.slot.keyMap = item.slotKeyMap
+          } else if (item.actionText && item.slot.type === 'action') {
+            item.slot.actionText = item.actionText
+          }
+        } else {
+          delete item.slot
+        }
+        if (!item.width) {
+          delete item.width
+        }
+        delete item.slotValue
+        delete item.slotKeyMap
+        delete item.actionText
+      } else {
+        delete item.slot
+        delete item.slotValue
+        delete item.slotKeyMap
+        delete item.actionText
+        delete item.width
+      }
+      // SQL查询项
+      if (!this.dataMode.sqlQueryItem) {
+        delete item.default
+      }
+      item.dataModeArray = this.dataModeArrayData
+      if (this.type === '新增') {
+        this.form.column.push(item)
+      } else {
+        this.form.column[this.selectIndex] = item
+      }
+      this.item = {
+        key: '',
+        title: '',
+        slot: {},
+        rule: {},
+        dataModeArray: []
+      }
+      this.$message.success('增加成功')
+      this.dataModeArrayData = ['queryForm', 'table', 'addOrEditForm', 'sqlQueryItem', 'sqlQueryCondition']
+      this.dataColumnVisible = false
+    },
+    // 判断是否为json字符串
+    isJSON (str) {
+      if (typeof str == 'string') {
+        try {
+          const obj = JSON.parse(str)
+          return !!(typeof obj == 'object' && obj)
+        } catch (e) {
+          return false
+        }
+      }
+    },
+    exportJson () {
+      const data = JSON.stringify(this.form, null, 2)
+      const blob = new Blob([data], { type: 'application/json' })
+      FileSaver.saveAs(blob, `Query.json`)
+      this.$message.success('导出成功!')
+    },
+    viewHandle (then) {
+      if (this.form.column.length === 0) {
+        this.$message.error('你没有增加任何数据字段')
+        return
+      }
+      this.result = JSON.parse(JSON.stringify(this.form))
+      if (this.result.condition && (!this.result.condition.value || this.result.condition.value === '')) {
+        delete this.result.condition
+      }
+      for (const item of this.result.column) {
+        if (item.selectType === 'fixArray') {
+          item.selectKey = JSON.parse(item.selectKey)
+        }
+        if (item.dataModeArray.length === 5) {
+          delete item.dataModeArray
+        }
+      }
+      if (this.buttonStateData.length !== 4) {
+        this.result.buttonState = this.buttonState
+      }
+      then()
+    },
+    view () {
+      this.$refs.businessCreateForm.validate(valid => {
+        if (valid) {
+          this.viewHandle(() => {
+            this.modelVisible = true
+          })
+        }
+      })
+    },
+    submit () {
+      this.onModelClose()
+      this.$refs.businessCreateForm.validate(valid => {
+          if (valid) {
+            this.viewHandle(() => {
+              // saveQueryParams
+              this.$emit('saveQueryParams', this.result)
+            })
+          }
+      })
+    },
+    modelCancel () {
+      this.dataColumnVisible = false
+      // 延迟是为了避免编辑数据窗口关闭时重置表单导致的闪烁
+      setTimeout(() => {
+        this.item = {
+          key: '',
+          title: '',
+          slot: {},
+          rule: {},
+          dataModeArray: []
+        }
+        this.dataModeArrayData = ['queryForm', 'table', 'addOrEditForm', 'sqlQueryItem', 'sqlQueryCondition']
+      }, 100)
+    },
+    changeFormType (item) {
+      if (item.formType === 'file' || item.formType === 'image') {
+        this.dataModeArrayData = ['addOrEditForm', 'sqlQueryItem']
+      }
+    },
+    changeSelectKey (item) {
+      if (item.selectType === 'key' && item.selectKey) {
+        item.slot.type = 'badge'
+        item.slotKeyMap = item.selectKey
+      }
+    },
+    visitAcceptFile () {
+      window.open('https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/input/file#attr-accept')
+    }
+  }
+}
+</script>
+<style lang="less" scoped>
+</style>