vue2-client 1.2.28 → 1.2.29

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

@@ -16,7 +16,7 @@
           :wrapper-col="wrapperCol"
         >
           <a-form-model-item label="查询主表名" prop="tableName">
-            <a-input v-model="form.tableName" placeholder="查询用的主表+别名，用空格隔开，如：t_userfiles u" />
+            <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">
@@ -30,14 +30,22 @@
                 </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
+                    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.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>
@@ -45,14 +53,14 @@
             </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='物联网表'，可选" />
+            <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-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-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>
@@ -77,7 +85,7 @@
             </div>
           </a-form-model-item>
           <a-form-model-item label="操作按钮配置" prop="buttonState">
-            <a-checkbox-group v-model="buttonStateData" :options="buttonStateArray" />
+            <a-checkbox-group v-model="buttonStateData" :options="buttonStateArray"/>
           </a-form-model-item>
         </a-form-model>
         <a-modal
@@ -93,7 +101,121 @@
             :model="item">
             <a-row :gutter="16">
               <a-col :span="8">
-                <a-form-model-item label="数据字段名" prop="key">
+                <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">
+                <a-form-model-item
+                  v-show="!(item.formType === 'file' || item.formType === 'image')"
+                  label="数据字段名"
+                  prop="key">
                   <a-input v-model="item.key" placeholder="请输入数据字段名" ref="key">
                     <a-popover slot="suffix" title="关于数据字段名" placement="bottom">
                       <template slot="content">
@@ -101,141 +223,20 @@
                         <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-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-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="表单查询方式，可选">
-                      <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-row>
               <a-row :gutter="16" v-if="item.formType === 'file' || item.formType === 'image'">
                 <a-col :span="8">
                   <a-form-model-item
@@ -268,7 +269,7 @@
                           <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-icon type="info-circle" style="color: rgba(0,0,0,.45)"/>
                       </a-popover>
                     </a-select>
                   </a-form-model-item>
@@ -278,14 +279,21 @@
                     label="允许上传文件类型"
                     prop="accept"
                     v-if="item.formType === 'file'">
-                    <a-input v-model="item.accept" placeholder="指定文件类型，默认不限制，可选">
-                      <a-popover slot="suffix" title="关于允许上传文件类型" placement="bottom">
+                    <a-select
+                      mode="tags"
+                      v-model="item.accept"
+                      placeholder="指定文件类型，默认不限制，可选"
+                      @change="itemAcceptChange">
+                      <a-select-option v-for="type_item in file_type" :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>
+                          <p>指定允许上传的文件类型扩展名，如：.doc,.docx等，详情请参考<a target="_blank" @click="visitAcceptFile">允许上传文件类型</a>
+                          </p>
                         </template>
-                        <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+                        <a-icon type="info-circle" style="color: rgba(0,0,0,.45)"/>
                       </a-popover>
-                    </a-input>
+                    </a-select>
                   </a-form-model-item>
                 </a-col>
                 <!-- TODO 配置文件上传表单-所属模块 -->
@@ -294,7 +302,12 @@
               <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-group
+                      defaultValue="None"
+                      v-model="item.groupIndexView"
+                      @change="groupIndexChange"
+                      default-value="false"
+                      button-style="solid">
                       <a-radio-button :value="1">
                         是
                       </a-radio-button>
@@ -306,13 +319,20 @@
                 </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="item in parent_node" :key="item.key">{{ item.title }}</a-select-option>
+                    <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-icon type="info-circle" style="color: rgba(0,0,0,.45)"/>
                       </a-popover>
                     </a-select>
                   </a-form-model-item>
@@ -320,7 +340,10 @@
               </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-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>
@@ -335,17 +358,24 @@
                           <p>字典键：选项从字典表(t_dictionary)获取，你只需要选择字典键的名称即可</p>
                           <p>业务逻辑名称：选项通过发起http请求调用指定的业务逻辑(Logic)接口获取</p>
                           <p>固定集合：选项为静态值，JSONArray格式</p>
-                          <p>当表单类型为 " 级联选择框(多个下拉) " 是数据模式为 [{lable,value,children[{lable,value,children[]},{lable,value,children[]}]}] 形式</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>
+                          <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-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-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"
@@ -363,7 +393,7 @@
                       </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-textarea v-model="item.selectKey" v-if="item.selectType === 'fixArray'" placeholder="请录入数据源"/>
                   </a-form-model-item>
                 </a-col>
                 <a-col :span="8">
@@ -371,20 +401,25 @@
                     <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>当该列所属表为主表的关联表，且存在主外键关联关系，你可以指定<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>
+                          <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-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-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">
@@ -416,7 +451,7 @@
                           <p>设置表单项的校验类型，默认字符串类型</p>
                           <p>你也可以设置该表单项是否必填</p>
                         </template>
-                        <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+                        <a-icon type="info-circle" style="color: rgba(0,0,0,.45)"/>
                       </a-popover>
                     </a-select>
                   </a-col>
@@ -432,7 +467,7 @@
                   </a-col>
                 </a-row>
               </a-form-model-item>
-              <a-row :gutter="16" v-if="dataMode.addOrEditForm && dataMode.sqlQueryItem">
+              <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="请选择场景">
@@ -449,13 +484,17 @@
                           <p>设置表单项的新增/修改场景</p>
                           <p>静默新增类型用于非人为新增的数据，不会生成表单项，且必须设置字段用途</p>
                         </template>
-                        <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+                        <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-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>
@@ -468,9 +507,10 @@
                         <template slot="content">
                           <p>用于静默新增时设置字段用途</p>
                           <p>在新增数据的表单提交时，页面会根据设置的字段用途获取相关数据并追加到表单中</p>
-                          <p>当字段用途选择为<span style="font-weight: bold">自定义</span>时，必须指定一个业务逻辑(Logic)名称，表单提交前会将表单内容作为参数调用该Logic接口，并将Logic返回值作为表单值</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-icon type="info-circle" style="color: rgba(0,0,0,.45)"/>
                       </a-popover>
                     </a-select>
                   </a-form-model-item>
@@ -500,7 +540,7 @@
                           <p>如果你选择文本溢出省略，需要设置文本溢出上限长度</p>
                           <p>如果你选择多彩徽标，需要设置徽标对应的数据样式字典键</p>
                         </template>
-                        <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+                        <a-icon type="info-circle" style="color: rgba(0,0,0,.45)"/>
                       </a-popover>
                     </a-select>
                   </a-form-model-item>
@@ -522,7 +562,7 @@
                 </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-input v-model="item.default" placeholder="当查询结果为null时，指定默认值，可选"/>
                   </a-form-model-item>
                 </a-col>
               </a-row>
@@ -540,7 +580,7 @@
                         <template slot="content">
                           <p>如果你设置了表单类型为选择框，且数据源是字典键，该值会自动带出</p>
                         </template>
-                        <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+                        <a-icon type="info-circle" style="color: rgba(0,0,0,.45)"/>
                       </a-popover>
                     </a-input>
                   </a-form-model-item>
@@ -550,18 +590,47 @@
                 </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-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>
+          <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>
@@ -594,11 +663,15 @@ import XFormItem from '@vue2-client/base-client/components/common/XForm/XFormIte
 import XFormTable from '@vue2-client/base-client/components/common/XFormTable/XFormTable'
 import JsonViewer from 'vue-json-viewer'
 import FileSaver from 'file-saver'
-import { queryType } from '@/config/CreateQueryConfig'
+import { queryType, file_type } from '@vue2-client/config/CreateQueryConfig'
 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' }] }] }]
+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: {
@@ -609,6 +682,7 @@ export default {
   data () {
     return {
       DemoJson,
+      file_type,
       // 页面宽度
       screenWidth: document.documentElement.clientWidth,
       // 效果预览模态框是否展示
@@ -653,6 +727,11 @@ export default {
         rule: {
           required: 'false'
         },
+        formType: '',
+        accept: '',
+        addOrEdit: '',
+        selectKeyName: '',
+        acceptCount: '',
         dataModeArray: []
       },
       itemMap: {},
@@ -862,6 +941,18 @@ export default {
     }
   },
   methods: {
+    // 文件上传限制类型修改
+    itemAcceptChange (newVal) {
+      // newVal = [accept1,accept2,...]
+      if (newVal.includes('*')) {
+        this.item.accept = ['*']
+        // return
+      }
+      // 如果除了 无限制 都选择 改成无限制
+      // if (newVal.length === this.file_type.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) {
@@ -972,16 +1063,17 @@ export default {
     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 (this.dataMode.addOrEditForm && !this.dataMode.sqlQueryItem) {
+          if (!fileBool && (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查询项')
+          if (fileBool && !(!this.dataMode.table && !this.dataMode.sqlQueryCondition && !this.dataMode.queryForm)) {
+            this.$message.error(`上传类表单项只能选择 "生成新增/修改表单项"`)
             return
           }
           this.itemHandle()
@@ -1187,7 +1279,13 @@ export default {
     },
     changeFormType (item) {
       if (item.formType === 'file' || item.formType === 'image') {
-        this.dataModeArrayData = ['addOrEditForm', 'sqlQueryItem']
+        this.item.accept = item.formType === 'file' ? ['*'] : ['.jpg,.jpeg,.ico,.gif,svg,.webp,.png,.bmp,.pjpeg,']
+        this.item.resUploadMode = 'server'
+        this.dataModeArrayData = ['addOrEditForm']
+      } else {
+        this.dataModeArrayData = ['queryForm', 'table', 'addOrEditForm', 'sqlQueryItem', 'sqlQueryCondition']
+        delete this.item.accept
+        delete this.item.resUploadMode
       }
     },
     changeSelectKey (item) {