vue2-client 1.2.49 → 1.2.52

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

@@ -1,1342 +1,483 @@
-<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="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="title">
-                  <a-input v-model="item.title" placeholder="请输入数据字段中文名，如：编号"/>
-                </a-form-model-item>
-              </a-col>
-              <a-col :span="8" v-if="!(item.formType === 'file' || item.formType === 'image')">
-                <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-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="24">
-                <a-col :span="8" v-if="item.formType !== 'checkbox' && item.formType !== 'radio' && item.formType !== 'file' && item.formType !== 'image'">
-                  <a-form-model-item
-                    label="表单水印"
-                    prop="placeholder">
-                    <a-input v-model="item.placeholder" placeholder="表单水印（placeholder），可选" />
-                  </a-form-model-item>
-                </a-col>
-                <a-col :span="8" v-if="dataMode.queryForm && dataMode.sqlQueryCondition">
-                  <a-form-model-item label="表单查询方式" prop="queryType">
-                    <a-select v-model="item.queryType" placeholder="表单查询方式，可选">
-                      <template v-for="queryTypeItem in queryTypeV">
-                        <a-select-option :key="queryTypeItem.key">{{ queryTypeItem.label }}</a-select-option>
-                      </template>
-                    </a-select>
-                  </a-form-model-item>
-                </a-col>
-                <a-col :span="8" v-if="item.formType === 'file' || item.formType === 'image'">
-                  <a-form-model-item
-                    style="margin-bottom: 0"
-                    label="允许上传文件数量"
-                    prop="accept">
-                    <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" v-if="item.formType === 'file' || item.formType === 'image'">
-                  <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-col>
-                <a-col :span="8" v-if="(item.formType === 'file' || item.formType === 'image') && (lowerPath.length > 0 || item.pathKey)">
-                  <a-form-model-item
-                    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-col>
-                <a-col :span="8" v-if="item.formType === 'file'">
-                  <a-form-model-item label="允许上传文件类型" prop="accept" >
-                    <a-select
-                      mode="tags"
-                      v-model="item.accept"
-                      placeholder="指定文件类型，默认不限制，可选"
-                      @change="itemAcceptChange">
-                      <a-select-option v-for="type_item in fileType" :key="type_item.accept">{{ type_item.label }}
-                      </a-select-option>
-                      <a-popover slot="suffixIcon" title="关于允许上传文件类型" placement="right">
-                        <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-select>
-                  </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="groupIndexView">
-                    <a-radio-group
-                      defaultValue="None"
-                      v-model="item.groupIndexView"
-                      @change="groupIndexChange"
-                      default-value="false"
-                      button-style="solid">
-                      <a-radio-button :value="1">
-                        是
-                      </a-radio-button>
-                      <a-radio-button value="None">
-                        否
-                      </a-radio-button>
-                    </a-radio-group>
-                  </a-form-model-item>
-                </a-col>
-                <a-col :span="8" v-if="item.groupIndex !== 1">
-                  <a-form-model-item label="数据所属节点" prop="groupIndex">
-                    <a-select
-                      v-model="item.parent_title"
-                      placeholder="请选择父节点"
-                      ref="groupIndex"
-                      @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-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-row>
-              <a-row :gutter="16">
-                <a-col :span="8" v-if="item.formType === 'select' || (item.formType === 'selects' && item.groupIndex == 1) || item.formType === 'cascader'">
-                  <a-form-model-item
-                    label="数据源类型"
-                    prop="selectType">
-                    <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" v-if="(item.formType === 'select' || (item.formType === 'selects' && item.groupIndex == 1) || item.formType === 'cascader') && item.selectType">
-                  <a-form-model-item
-                    label="数据源"
-                    prop="selectKey">
-                    <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" v-if="item.formType === 'select'">
-                  <a-form-model-item label="数据外键字段名" prop="selectKeyName">
-                    <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="selectLoadType"
-                v-if="item.formType === 'select' && item.selectType === 'logic'">
-                <a-row :guttor="16">
-                  <a-col :span="8">
-                    <a-radio-group v-model="item.lazyLoad" default-value="false" 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-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="false" 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">
-                <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-select-option key="version">版本号</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" v-if="item.addOrEdit === 'silenceAdd'">
-                  <a-form-model-item
-                    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" v-if="item.silencePurpose === 'customize'" label="业务逻辑" prop="silenceSource">
-                  <a-form-model-item>
-                    <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" v-if="dataMode.sqlQueryItem">
-                  <a-form-model-item label="字段默认值" prop="default">
-                    <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="!(item.formType === 'file' || item.formType === 'image') && 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 { queryType, fileType } from '@vue2-client/config/CreateQueryConfig'
-import { mapState } from 'vuex'
-import { commonApi, post } from '@vue2-client/services/api'
-
-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,
-      fileType,
-      // 页面宽度
-      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: {
-          required: 'false'
-        },
-        formType: '',
-        accept: '',
-        addOrEdit: '',
-        selectKeyName: '',
-        resUploadStock: '',
-        acceptCount: '',
-        dataModeArray: []
-      },
-      stockList: [],
-      lowerPath: [],
-      itemMap: {},
-      selectIndex: null,
-      selectType: undefined,
-      joinArray: [],
-      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']),
-    parent_node () {
-      return this.form.column.filter(item => item.formType === 'selects' && item.key != this.item.key)
-    },
-    queryTypeV () {
-      if (this.item.formType) {
-        return queryType.filter(item => item.match.includes(this.item.formType))
-      }
-      return queryType
-    },
-    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 && columnItem.rule.required && columnItem.rule.required !== 'false') {
-            columnItem.rule.required = columnItem.rule.required.toString()
-          } else {
-            if (!columnItem.rule) {
-              columnItem.rule = {}
-            }
-            columnItem.rule.required = 'false'
-          }
-          // 数据源加载方式兼容处理
-          if (columnItem.lazyLoad && columnItem.lazyLoad !== 'false') {
-            columnItem.lazyLoad = columnItem.lazyLoad.toString()
-          } else {
-            columnItem.lazyLoad = 'false'
-          }
-          // 下拉框数据源兼容处理
-          if ((columnItem.formType === 'select' || columnItem.formType === 'cascader') && columnItem.selectKey) {
-            // 数据源为logic
-            if (columnItem.selectKey.toString().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: {
-              required: 'false'
-            },
-            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)
-            }
-          }
-        } else {
-          this.buttonStateData = ['add', 'edit', 'delete', 'export']
-        }
-      }
-    }
-  },
-  methods: {
-    // 文件上传限制类型修改
-    itemAcceptChange (newVal) {
-      // newVal = [accept1,accept2,...]
-      if (newVal.includes('*')) {
-        this.item.accept = ['*']
-        // return
-      }
-      // 如果除了 无限制 都选择 改成无限制
-      // if (newVal.length === this.fileType.length - 1){
-      //   this.item.accept = ['*']
-      // }
-    },
-    parent_title_change (parentKey) {
-      const parentArr = this.form.column.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
-        if (this.item.title) {
-          this.item.group = this.item.title + '组'
-        } else {
-          this.item.groupIndex = ''
-          this.$message.error('请先输入字段中文名称!')
-        }
-      } else {
-        this.item.groupIndex = ''
-      }
-    },
-    // 初始化组件
-    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 = Object.assign({ formType: 'input', type: 'string' }, this.itemMap[key])
-        if (this.item.formType === 'file' || this.item.formType === 'image') {
-            this.getStocks()
-          if (this.item.resUploadStock) {
-            this.lowerPath = this.stockList.filter(item => item.id == this.item.resUploadStock)[0]?.f_lower_path_json ?? []
-          }
-        }
-       if (this.item.formType === 'selects') {
-          // 因为 groupIndex 可能有很多值 单选框不行  赋给一个新的变量
-          this.item.groupIndexView = this.item.groupIndex === 1 ? 1 : 'None'
-        }
-        if (this.item.formType === 'selects') {
-          // 因为 groupIndex 可能有很多值 单选框不行  赋给一个新的变量
-          this.item.groupIndexView = this.item.groupIndex === 1 ? 1 : 'None'
-        }
-        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) {
-          const fileBool = this.item.formType === 'file' || this.item.formType === 'image'
-          if (this.dataModeArrayData.length === 0) {
-            this.$message.error('请至少选择一种数据模式')
-            return
-          }
-          if (!fileBool && (this.dataMode.addOrEditForm && !this.dataMode.sqlQueryItem)) {
-            this.$message.error('如果要生成新增/修改表单项，必须勾选生成SQL查询项')
-            return
-          }
-          if (fileBool && !(!this.dataMode.table && !this.dataMode.sqlQueryCondition && !this.dataMode.queryForm)) {
-            this.$message.error(`上传类表单项只能选择 "生成新增/修改表单项"`)
-            return
-          }
-          this.itemHandle()
-        }
-      })
-    },
-    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.required) {
-          item.rule.required = item.rule.required.toString() === 'true'
-        } else {
-          item.rule.required = false
-        }
-        // 下拉框
-        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
-            }
-            if (!item.lazyLoad) {
-              delete item.lazyLoad
-            }
-          } else if (item.selectType === 'fixArray') {
-            // 数据源为固定json集合
-            if (!this.isJSON(item.selectKey)) {
-              this.$message.warning('下拉框数据源不是JSON集合')
-              return
-            }
-            delete item.lazyLoad
-          } else {
-            delete item.lazyLoad
-          }
-          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
-          delete item.lazyLoad
-        }
-      } 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
-        delete item.lazyLoad
-      }
-      // 表格列
-      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: {
-          required: 'false'
-        },
-        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: {
-            required: 'false'
-          },
-          dataModeArray: []
-        }
-        this.dataModeArrayData = ['queryForm', 'table', 'addOrEditForm', 'sqlQueryItem', 'sqlQueryCondition']
-      }, 100)
-    },
-    // 获取所有仓库
-    getStocks () {
-      if (this.stockList.length === 0) {
-        post('/webmeterapi/getFilesStock', {}).then(res => {
-          this.stockList = res.sort((a, b) => b.progress - a.progress)
-        }).catch(e => {})
-      }
-    },
-    changeFormType (item) {
-      this.item.queryType = null
-      if (item.formType === 'file' || item.formType === 'image') {
-        this.item.accept = item.formType === 'file' ? ['*'] : ['.jpg,.jpeg,.ico,.gif,svg,.webp,.png,.bmp,.pjpeg,']
-        this.item.resUploadMode = 'server'
-        this.item.key = 'FilesId'
-        this.dataModeArrayData = ['addOrEditForm']
-        this.getStocks()
-      } else {
-        this.dataModeArrayData = ['queryForm', 'table', 'addOrEditForm', 'sqlQueryItem', 'sqlQueryCondition']
-        delete this.item.accept
-        delete this.item.resUploadMode
-      }
-    },
-    // 修改上传到哪个仓库
-    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.stockAlias = stockValue.f_alias
-      }
-    },
-    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>
+<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>
+        <create-query-item ref="queryItem" @itemHandle="itemHandle" @getColumn="getColumn"/>
+        <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 CreateQueryItem from '@/base-client/components/common/CreateQuery/CreateQueryItem'
+
+export default {
+  name: 'CreateQuery',
+  components: {
+    CreateQueryItem,
+    JsonViewer,
+    XFormTable,
+    XFormItem
+  },
+  data () {
+    return {
+      // 页面宽度
+      screenWidth: document.documentElement.clientWidth,
+      // 效果预览模态框是否展示
+      modelVisible: false,
+      // 操作按钮状态集合
+      buttonStateArray: [
+        { label: '新增', value: 'add' },
+        { label: '修改', value: 'edit' },
+        { label: '删除', value: 'delete' },
+        { label: '导出', value: 'export' }
+      ],
+      // 数据模式类型集合值
+      buttonStateData: ['add', 'edit', 'delete', 'export'],
+      labelCol: { span: 4 },
+      wrapperCol: { span: 14 },
+      form: {
+        tableName: '',
+        joinArray: {},
+        condition: {},
+        orderBy: '',
+        column: []
+      },
+      result: {},
+      itemMap: {},
+      selectIndex: null,
+      joinArray: [],
+      rules: {
+        tableName: [{ required: true, message: '请输入查询表名', trigger: 'blur' }],
+        orderBy: [{ required: true, message: '请输入排序方式', trigger: 'blur' }]
+      },
+    }
+  },
+  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
+    },
+    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 && columnItem.rule.required && columnItem.rule.required !== 'false') {
+            columnItem.rule.required = columnItem.rule.required.toString()
+          } else {
+            if (!columnItem.rule) {
+              columnItem.rule = {}
+            }
+            columnItem.rule.required = 'false'
+          }
+          // 数据源加载方式兼容处理
+          if (columnItem.lazyLoad && columnItem.lazyLoad !== 'false') {
+            columnItem.lazyLoad = columnItem.lazyLoad.toString()
+          } else {
+            columnItem.lazyLoad = 'false'
+          }
+          // 下拉框数据源兼容处理
+          if ((columnItem.formType === 'select' || columnItem.formType === 'cascader') && columnItem.selectKey) {
+            // 数据源为logic
+            if (columnItem.selectKey.toString().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: {
+              required: 'false'
+            },
+            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)
+            }
+          }
+        } else {
+          this.buttonStateData = ['add', 'edit', 'delete', 'export']
+        }
+      }
+    }
+  },
+  methods: {
+    // 初始化组件
+    initView () {
+      this.joinArray = []
+      this.result = {}
+    },
+    onClose () {
+      this.$emit('update:visible', false)
+    },
+    onModelClose () {
+      this.modelVisible = false
+    },
+    addJoinItem () {
+      this.joinArray.push({
+        key: '',
+        value: ''
+      })
+      this.changeJoinArray()
+    },
+    removeJoinItem (index) {
+      this.joinArray.splice(index, 1)
+      this.changeJoinArray()
+    },
+    itemHandle (item, type) {
+      this.itemMap[item.key] = item
+      if (type === '新增') {
+        this.form.column.push(item)
+      } else {
+        this.$set(this.form.column, this.selectIndex, item)
+      }
+      this.$message.success(`${type}成功`)
+      this.$refs.queryItem.flashModal(false)
+    },
+    getColumn (callback) {
+      callback(JSON.parse(JSON.stringify(this.form.column)))
+    },
+    addColumnItem () {
+      this.type = '新增'
+      this.$refs.queryItem.addColumnItemExecute()
+    },
+    editColumnItem (key, index) {
+      if (this.itemMap[key]) {
+        this.$refs.queryItem.editColumnItemExecute(this.itemMap[key])
+        this.selectIndex = index
+      } 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
+    },
+    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)
+          })
+        }
+      })
+    },
+    // 判断是否为json字符串
+    isJSON (str) {
+      if (typeof str == 'string') {
+        try {
+          const obj = JSON.parse(str)
+          return !!(typeof obj == 'object' && obj)
+        } catch (e) {
+          return false
+        }
+      }
+    }
+  }
+}
+</script>
+<style lang="less" scoped>
+</style>