通用查询页面

src/main/java/com/izouma/awesomeadmin/dao/QueryConfigMapper.xml

@@ -10,6 +10,7 @@
         <result column="dataBaseType" property="databasetype" jdbcType="VARCHAR"/>
         <result column="modules" property="modules" jdbcType="VARCHAR"/>
         <result column="data_source_code" property="dataSourceCode" jdbcType="VARCHAR"/>
+        <result column="config_json" property="configJson" jdbcType="VARCHAR"/>
     </resultMap>
     <sql id="Base_Column_List">
         <trim suffixOverrides=",">
@@ -29,6 +30,8 @@
 
             data_source_code,
 
+            config_json,
+
         </trim>
     </sql>
     <select id="selectByPrimaryKey" resultMap="BaseResultMap" parameterType="java.lang.Integer">
@@ -69,6 +72,9 @@
             <if test="dataSourceCode!= null">
                 data_source_code,
             </if>
+            <if test="configJson!= null">
+                config_json,
+            </if>
         </trim>
         <trim prefix="values (" suffix=")" suffixOverrides=",">
             <if test="id != null">
@@ -95,6 +101,9 @@
             <if test="dataSourceCode != null">
                 #{dataSourceCode,jdbcType=VARCHAR},
             </if>
+            <if test="configJson != null">
+                #{configJson,jdbcType=VARCHAR},
+            </if>
         </trim>
     </insert>
     <update id="updateByPrimaryKeySelective" parameterType="com.izouma.awesomeadmin.model.QueryConfig">
@@ -124,6 +133,9 @@
             <if test="dataSourceCode != null">
                 data_source_code= #{dataSourceCode,jdbcType=VARCHAR},
             </if>
+            <if test="configJson != null">
+                config_json= #{configJson,jdbcType=VARCHAR},
+            </if>
         </set>
         where id = #{id,jdbcType=INTEGER}
     </update>

src/main/java/com/izouma/awesomeadmin/model/QueryConfig.java

@@ -3,6 +3,8 @@ package com.izouma.awesomeadmin.model;
 import com.fasterxml.jackson.annotation.JsonAutoDetect;
 import com.fasterxml.jackson.annotation.JsonInclude;
 
+import java.util.List;
+
 
 @JsonAutoDetect
 @JsonInclude(JsonInclude.Include.NON_NULL)
@@ -25,6 +27,10 @@ public class QueryConfig {
      */
     private String advancedQuery;
 
+    private List<TableField> fields;
+
+    private String configJson;
+
     public Integer getId() {
         return this.id;
     }
@@ -104,5 +110,21 @@ public class QueryConfig {
     public void setDataSourceCode(String dataSourceCode) {
         this.dataSourceCode = dataSourceCode;
     }
+
+    public List<TableField> getFields() {
+        return fields;
+    }
+
+    public void setFields(List<TableField> fields) {
+        this.fields = fields;
+    }
+
+    public String getConfigJson() {
+        return configJson;
+    }
+
+    public void setConfigJson(String configJson) {
+        this.configJson = configJson;
+    }
 }
 

src/main/java/com/izouma/awesomeadmin/web/QueryConfigController.java

@@ -2,6 +2,7 @@ package com.izouma.awesomeadmin.web;
 
 import java.util.*;
 
+import com.google.gson.Gson;
 import com.izouma.awesomeadmin.util.ExportExcelUtil;
 import org.apache.commons.lang.StringUtils;
 import org.apache.shiro.authz.annotation.RequiresAuthentication;
@@ -18,18 +19,18 @@ import javax.servlet.http.HttpServletRequest;
 import javax.servlet.http.HttpServletResponse;
 
 /**
-*  controller类
-*/
+ * controller类
+ */
 @Controller
 @RequestMapping("/queryConfig")
-public class QueryConfigController extends BaseController{
+public class QueryConfigController extends BaseController {
 
     @Autowired
     private QueryConfigService queryConfigService;
 
     /**
-    * <p>获取全部记录。</p>
-    */
+     * <p>获取全部记录。</p>
+     */
     @RequiresAuthentication
     @RequestMapping(value = "/all", method = RequestMethod.GET)
     @ResponseBody
@@ -39,8 +40,8 @@ public class QueryConfigController extends BaseController{
     }
 
     /**
-    * <p>根据Id。</p>
-    */
+     * <p>根据Id。</p>
+     */
     @RequestMapping(value = "/getQueryConfig", method = RequestMethod.GET)
     @ResponseBody
     public Result getQueryConfig(@RequestParam(required = false, value = "id") String id) {
@@ -49,8 +50,8 @@ public class QueryConfigController extends BaseController{
     }
 
     /**
-    * <p>根据条件获取。</p>
-    */
+     * <p>根据条件获取。</p>
+     */
     @RequestMapping(value = "/getOne", method = RequestMethod.GET)
     @ResponseBody
     public Result getOne(QueryConfig record) {
@@ -60,14 +61,14 @@ public class QueryConfigController extends BaseController{
 
 
     /**
-    * <p>分页查询。</p>
-    */
+     * <p>分页查询。</p>
+     */
     @RequestMapping(value = "/page", method = RequestMethod.GET)
     @ResponseBody
     public Result page(Page page, QueryConfig record) {
         Map<String, Object> result = new HashMap<>();
 
-        List<QueryConfig> pp =queryConfigService.getQueryConfigByPage(page, record);
+        List<QueryConfig> pp = queryConfigService.getQueryConfigByPage(page, record);
 
         result.put(AppConstant.PAGE, page);
         result.put("pp", pp);
@@ -76,82 +77,91 @@ public class QueryConfigController extends BaseController{
 
 
     /**
-    * <p>保存。</p>
-    */
+     * <p>保存。</p>
+     */
     @RequestMapping(value = "/save", method = RequestMethod.POST)
     @ResponseBody
-    public Result save(QueryConfig record) {
+    public Result save(@RequestBody QueryConfig record) {
+
+        Gson gson = new Gson();
+        record.setConfigJson(gson.toJson(record.getFields()));
+
         boolean num = queryConfigService.createQueryConfig(record);
         if (num) {
-        return new Result(true, record.getId());
+            return new Result(true, record.getId());
         }
         return new Result(false, "保存异常");
     }
 
     /**
-    * <p>更新信息。</p>
-    */
+     * <p>更新信息。</p>
+     */
     @RequestMapping(value = "/update", method = RequestMethod.POST)
     @ResponseBody
-    public Result updateQueryConfig(QueryConfig record) {
+    public Result updateQueryConfig(@RequestBody QueryConfig record) {
+
+        Gson gson = new Gson();
+        record.setConfigJson(gson.toJson(record.getFields()));
+
         boolean num = queryConfigService.updateQueryConfig(record);
         if (num) {
-        return new Result(true, "保存成功");
+            return new Result(true, "保存成功");
         }
         return new Result(false, "保存异常");
     }
 
     /**
-    * <p>删除。</p>
-    */
+     * <p>删除。</p>
+     */
     @RequestMapping(value = "/del", method = RequestMethod.POST)
     @ResponseBody
     public Result deleteQueryConfig(@RequestParam(required = true, value = "id") String id) {
 
         boolean num = queryConfigService.deleteQueryConfig(id);
         if (num) {
-        return new Result(true, "删除成功");
+            return new Result(true, "删除成功");
         }
         return new Result(false, "删除异常");
     }
 
     /**
-    * 导出Excel
-    * @param request
-    * @param response
-    * @param record
-    * @throws Exception
-    */
+     * 导出Excel
+     *
+     * @param request
+     * @param response
+     * @param record
+     * @throws Exception
+     */
     @RequestMapping(value = "/exportExcel", method = RequestMethod.GET)
     @ResponseBody
     public void exportExcel(HttpServletRequest request, HttpServletResponse response, QueryConfig record) throws Exception {
 
-    List<QueryConfig> queryConfigs = queryConfigService.getQueryConfigList(record);
+        List<QueryConfig> queryConfigs = queryConfigService.getQueryConfigList(record);
 
 
         String sheetName = "query_config";
         String titleName = "通用查询配置数据表";
         String fileName = "通用查询配置表";
         int columnNumber = 6;
-        int[] columnWidth = { 20,  20,  20,  20,  20,  20 };
-        String[] columnName = {  "" ,   "删除标识" ,   "code" ,   "表名" ,   "字段" ,   "数据库类型"  };
+        int[] columnWidth = {20, 20, 20, 20, 20, 20};
+        String[] columnName = {"", "删除标识", "code", "表名", "字段", "数据库类型"};
         String[][] dataList = new String[queryConfigs.size()][6];
 
         for (int i = 0; i < queryConfigs.size(); i++) {
 
-                        dataList[i][0] = String.valueOf(queryConfigs.get(i).getId());
-                        dataList[i][1] = String.valueOf(queryConfigs.get(i).getDelFlag());
-                        dataList[i][2] = String.valueOf(queryConfigs.get(i).getCode());
-                        dataList[i][3] = String.valueOf(queryConfigs.get(i).getTableName());
-                        dataList[i][4] = String.valueOf(queryConfigs.get(i).getTablecolumns());
-                        dataList[i][5] = String.valueOf(queryConfigs.get(i).getDatabasetype());
-                    }
+            dataList[i][0] = String.valueOf(queryConfigs.get(i).getId());
+            dataList[i][1] = String.valueOf(queryConfigs.get(i).getDelFlag());
+            dataList[i][2] = String.valueOf(queryConfigs.get(i).getCode());
+            dataList[i][3] = String.valueOf(queryConfigs.get(i).getTableName());
+            dataList[i][4] = String.valueOf(queryConfigs.get(i).getTablecolumns());
+            dataList[i][5] = String.valueOf(queryConfigs.get(i).getDatabasetype());
+        }
 
 
         ExportExcelUtil.ExportWithResponse(sheetName, titleName, fileName,
-        columnNumber, columnWidth, columnName, dataList, response);
+                columnNumber, columnWidth, columnName, dataList, response);
 
 
-        }
     }
+}
 

src/main/resources/properties/jdbc.properties

@@ -6,7 +6,7 @@ jdbc.driverClassName=org.gjt.mm.mysql.Driver
 #jdbc.password=2wsx@WSX#EDC
 #jdbc.databaseName=jee_zouma
 
-jdbc.url=jdbc:mysql://121.43.171.110:3306/xin_mu
+jdbc.url=jdbc:mysql://121.43.171.110:3306/xin_mu?autoReconnect=true
 jdbc.username=root
 jdbc.password=2wsx@WSX#EDC
 jdbc.databaseName=xin_mu

src/main/resources/spring/appDataSource.xml

@@ -38,6 +38,8 @@
         <property name="autoCommitOnClose" value="false"/>
         <!-- 获取连接超时时间 -->
         <property name="checkoutTimeout" value="10000"/>
+
+        <property name="idleConnectionTestPeriod" value="60" />
         <!-- 当获取链接失败重试次数 -->
         <property name="acquireRetryAttempts" value="2"/>
 

src/main/vue/src/pages/CommonQuery.vue

@@ -4,17 +4,39 @@
 
             <template v-for="item in tableColumns">
 
-                <el-form-item :prop="item.value" :label="item.label">
-                    <el-input v-if="item.type=='text'" v-model="formData[item.value]"></el-input>
+                <el-form-item :prop="item.name" :label="item.remark">
 
-                    <template v-if="item.type=='date'">
+                    <template v-if="item.formType=='date'">
                         <div class="block">
-                            <el-date-picker v-model="formData[item.value]" type="datetime" placeholder="选择日期">
+                            <el-date-picker v-model="formData[item.name]" type="date" value-format="timestamp" placeholder="选择日期">
                             </el-date-picker>
                         </div>
                     </template>
 
-                    <single-upload v-if="item.type=='image'" v-model="formData[item.value]"></single-upload>
+                    <template v-else-if="item.formType=='datetime'">
+                        <div class="block">
+                            <el-date-picker v-model="formData[item.name]" type="datetime" value-format="timestamp" placeholder="选择时间">
+                            </el-date-picker>
+                        </div>
+                    </template>
+
+                    <template v-else-if="item.formType=='select'">
+                        <el-select v-model="formData[item.name]" clearable placeholder="请选择">
+                            <el-option v-for="optionItem in item.optionsValue.split(',')" :key="optionItem" :label="optionItem" :value="optionItem">
+                            </el-option>
+                        </el-select>
+                    </template>
+
+                    <template v-else-if="item.formType=='multiSelect'">
+                        <el-select v-model="formData[item.name]" multiple clearable placeholder="请选择">
+                            <el-option v-for="optionItem in item.optionsValue.split(',')" :key="optionItem" :label="optionItem" :value="optionItem">
+                            </el-option>
+                        </el-select>
+                    </template>
+
+                    <single-upload v-else-if="item.formType=='singleImage'" v-model="formData[item.name]"></single-upload>
+
+                    <el-input v-else v-model="formData[item.name]"></el-input>
 
                 </el-form-item>
 
@@ -69,12 +91,12 @@ export default {
 
             for (var key in formDataTemp) {
                 var flag = 0;
-                var type = 'text';
+                var formType = 'singleLineText';
 
                 this.tableColumns.forEach(element => {
-                    if (element.value == key) {
+                    if (element.name == key) {
                         flag = 1;
-                        type = element.type;
+                        formType = element.formType;
                     }
 
                 });
@@ -83,10 +105,15 @@ export default {
 
                     delete formDataTemp[key];
                 } else {
-                    if (type == 'date') {
+                    if (formType == 'date') {
                         formDataTemp[key] = format(formDataTemp[key], 'YYYY/MM/DD HH:mm', { locale: zh });
+                    } else if (formType == 'datetime') {
+                        formDataTemp[key] = format(formDataTemp[key], 'YYYY/MM/DD HH:mm', { locale: zh });
+                    } else if (formType == 'multiSelect') {
+                        formDataTemp[key] = formDataTemp[key].join();
                     }
 
+
                 }
 
 
@@ -126,8 +153,8 @@ export default {
                     if (res.success) {
 
                         this.tableColumns.forEach(element => {
-                            if (element.type == 'date') {
-                                res.data[element.value] = new Date(res.data[element.value]);
+                            if (element.formType == 'multiSelect') {
+                                res.data[element.name] = res.data[element.name] ? res.data[element.name].split(',').map(i => String(i)) : [];
                             }
 
                         });
@@ -156,21 +183,59 @@ export default {
                         this.databasetype = res.data.databasetype;
                         this.dataSourceCode = res.data.dataSourceCode;
                         this.tableColumns = [];
-                        var tableColumnsStr = res.data.tablecolumns;
-
-                        var columns = tableColumnsStr.split('_;');
-
-
+                        this.rules = {};
+                        var columns = JSON.parse(res.data.configJson)
                         columns.forEach(element => {
-                            var items = element.split('_,');
-                            var temp = {
-                                label: items[0],
-                                value: items[1],
-                                type: items[2] ? items[2] : 'text',
-                                show: true
+                            element.show = true;
+                            this.tableColumns.push(element);
+
+                            //如果需要验证或必填
+                            if (element.required || element.validate) {
+                                var tempRule = [];
+                                if (element.required) {
+                                    tempRule.push({ required: true, message: '请输入 ' + element.remark, trigger: 'blur' })
+                                }
+                                if (element.validate) {
+                                    if (element.maxLength && element.minLength) {
+                                        tempRule.push({ min: element.minLength, max: element.maxLength, message: '长度在 ' + element.minLength + '到 ' + element.maxLength + ' 个字符', trigger: 'blur' }, )
+                                    }
+                                    if (element.min && element.max) {
+                                        tempRule.push({
+                                            validator: (rule, value, callback) => {
+                                                if (value) {
+                                                    if (value <= element.max && value >= element.min) {
+                                                        callback();
+                                                    } else {
+                                                        callback(new Error('值在 ' + element.min + ' 到 ' + element.max + ' 之间'));
+                                                    }
+                                                }
+                                            }, trigger: 'blur'
+                                        })
+                                    }
+                                    if (element.validatorType == "phone") {
+                                        tempRule.push(formValidator.phone)
+                                    }
+                                    if (element.validatorType == "number") {
+                                        tempRule.push(formValidator.number)
+                                    }
+                                    if (element.validatorType == "url") {
+                                        tempRule.push(formValidator.url)
+                                    }
+                                    if (element.validatorType == "email") {
+                                        tempRule.push(formValidator.email)
+                                    }
+                                    if (element.validatorType == "idCard") {
+                                        tempRule.push(formValidator.idCard)
+                                    }
+                                    if (element.validatorType == "english") {
+                                        tempRule.push(formValidator.english)
+                                    }
+                                }
+
+                                this.rules[element.name] = tempRule;
+
                             }
 
-                            this.tableColumns.push(temp);
                         });
 
 

src/main/vue/src/pages/CommonQuerys.vue

@@ -19,7 +19,7 @@
                     <i class="el-icon-arrow-down el-icon--right"></i>
                 </span>
                 <el-dropdown-menu slot="dropdown" class="table-column-filter-wrapper">
-                    <el-checkbox v-for="item in tableColumns" :key="item.value" v-model="item.show">{{item.label}}
+                    <el-checkbox v-for="item in tableColumns" :key="item.name" v-model="item.show">{{item.remark}}
                     </el-checkbox>
                 </el-dropdown-menu>
             </el-dropdown>
@@ -27,16 +27,19 @@
         <el-table :data="tableData" :height="tableHeight" row-key="id" ref="table" @sort-change="changeTableSort">
             <el-table-column type="index" min-width="50" align="center">
             </el-table-column>
-            <template v-for="item in tableColumns" v-if="isColumnShow(item.value)">
-                <el-table-column v-if="item.type=='date'" :formatter="DateTimeFormatter" sortable="custom" :prop="item.value" :label="item.label" min-width="100">
+            <template v-for="item in tableColumns" v-if="isColumnShow(item.name)">
+                <el-table-column v-if="item.formType=='datetime'" :formatter="DateTimeFormatter" sortable="custom" :prop="item.name" :label="item.remark" min-width="100">
                 </el-table-column>
 
-                <el-table-column v-else-if="item.type=='image'" :prop="item.value" :label="item.label" min-width="100">
+                <el-table-column v-else-if="item.formType=='date'" :formatter="DateFormatter" sortable="custom" :prop="item.name" :label="item.remark" min-width="100">
+                </el-table-column>
+
+                <el-table-column v-else-if="item.formType=='singleImage'" :prop="item.name" :label="item.remark" min-width="100">
                     <template slot-scope="{row}">
-                        <img :src="row[item.value]" @click="showImg(row[item.value])" style="width: 100px;height: 100px;vertical-align: middle;" />
+                        <img :src="row[item.name]" @click="showImg(row[item.name])" style="width: 100px;height: 100px;vertical-align: middle;" />
                     </template>
                 </el-table-column>
-                <el-table-column v-else-if="item.type=='text'" sortable="custom" :prop="item.value" :label="item.label" min-width="100">
+                <el-table-column v-else sortable="custom" :prop="item.name" :label="item.remark" min-width="100">
                 </el-table-column>
             </template>
             <el-table-column label="操作" align="center" fixed="right" v-if="isModulesShow('edit')">
@@ -72,7 +75,7 @@
                     <template slot-scope="{row}">
                         <el-select v-model="row.name">
 
-                            <el-option v-for="item in tableColumns" :label="item.label" :value="item.value" :key="item.value"></el-option>
+                            <el-option v-for="item in tableColumns" :label="item.remark" :value="item.name" :key="item.name"></el-option>
                         </el-select>
                     </template>
                 </el-table-column>
@@ -148,10 +151,10 @@ export default {
             this.tableColumns = [];
             this.tableData = [];
             this.modules = [];
-            this.filter1= '';
-            this.advancedQuerySearchKey='';
+            this.filter1 = '';
+            this.advancedQuerySearchKey = '';
             this.orderByStr = '';
-            
+
             this.$http.get({
                 url: '/queryConfig/getOne',
                 data: {
@@ -171,24 +174,32 @@ export default {
                         this.databasetype = res.data.databasetype;
                         this.dataSourceCode = res.data.dataSourceCode;
 
-                        var tableColumnsStr = res.data.tablecolumns;
+                        // var tableColumnsStr = res.data.tablecolumns;
+
+                        // var columns = tableColumnsStr.split('_;');
+
 
-                        var columns = tableColumnsStr.split('_;');
+                        // columns.forEach(element => {
+                        //     var items = element.split('_,');
+                        //     var temp = {
+                        //         label: items[0],
+                        //         value: items[1],
+                        //         type: items[2] ? items[2] : 'text',
+                        //         show: true
+                        //     }
 
+                        //     this.tableColumns.push(temp);
+                        // });
 
+                        var columns = JSON.parse(res.data.configJson)
                         columns.forEach(element => {
-                            var items = element.split('_,');
-                            var temp = {
-                                label: items[0],
-                                value: items[1],
-                                type: items[2] ? items[2] : 'text',
-                                show: true
-                            }
-
-                            this.tableColumns.push(temp);
+                            element.show = true;
+                            this.tableColumns.push(element);
                         });
 
 
+
+
                         this.getData();
                     }
 
@@ -211,8 +222,8 @@ export default {
                 var templist = [];
 
                 this.tableColumns.forEach(item => {
-                    if (item.type != 'date' && item.show) {
-                        templist.push(item.value);
+                    if (item.formType != 'date' && item.formType != 'datetime' && item.show) {
+                        templist.push(item.name);
                     }
                 })
 
@@ -236,7 +247,7 @@ export default {
                     searchColumn: this.searchColumn,
                     searchKey: this.filter1,
                     orderByStr: this.orderByStr,
-                    dataSourceCode:this.dataSourceCode,
+                    dataSourceCode: this.dataSourceCode,
                 }
             }).then(res => {
                 if (res.success) {
@@ -247,7 +258,7 @@ export default {
             })
         },
         isColumnShow(column) {
-            var row = this.tableColumns.find(i => i.value === column);
+            var row = this.tableColumns.find(i => i.name === column);
             return row ? row.show : false;
         },
 
@@ -261,6 +272,12 @@ export default {
                 return format(cellValue, 'YYYY/MM/DD HH:mm', { locale: zh })
             }
 
+        },
+        DateFormatter(row, column, cellValue) {
+            if (cellValue) {
+                return format(cellValue, 'YYYY/MM/DD', { locale: zh })
+            }
+
         },
         showImg(img) {
             this.imgSrc = img;

src/main/vue/src/pages/QueryConfig.vue

@@ -46,35 +46,98 @@
             </el-form-item>
 
             <el-form-item prop="tablecolumns" label="字段">
-                <el-button @click="addField" type="text" icon="el-icon-plus">添加</el-button>
-                <el-table :data="tablecolumnsFields">
-
-                    <el-table-column prop="value" label="字段" width="150" align="center">
-                        <template slot-scope="{row}">
-                            <el-input v-model="row.value"></el-input>
-                        </template>
-                    </el-table-column>
-
-                    <el-table-column prop="name" label="显示" width="150" align="center">
-                        <template slot-scope="{row}">
-                            <el-input v-model="row.label"></el-input>
-                        </template>
-                    </el-table-column>
-
-                    <el-table-column prop="type" label="类型" width="150" align="center">
-                        <template slot-scope="{row}">
-                            <el-select v-model="row.type">
-                                <el-option v-for="item in columnTypes" :label="item.label" :value="item.value" :key="item.value"></el-option>
-                            </el-select>
-                        </template>
-                    </el-table-column>
-
-                    <el-table-column width="60" align="center">
-                        <template slot-scope="{ row, column, $index }">
-                            <el-button @click="removeField($index)" size="small" type="text">删除</el-button>
-                        </template>
-                    </el-table-column>
-                </el-table>
+                <el-tabs value="1" type="border-card">
+                    <el-tab-pane label="字段" name="1">
+
+                        <el-table :data="tablecolumnsFields">
+
+                            <el-table-column prop="value" label="字段" width="150" align="center">
+                                <template slot-scope="{row}">
+                                    <el-input v-model="row.name"></el-input>
+                                </template>
+                            </el-table-column>
+
+                            <el-table-column prop="remark" label="显示" width="150" align="center">
+                                <template slot-scope="{row}">
+                                    <el-input v-model="row.remark"></el-input>
+                                </template>
+                            </el-table-column>
+
+                            <el-table-column prop="formType" label="类型" width="150" align="center">
+                                <template slot-scope="{row}">
+                                    <el-select v-model="row.formType">
+                                        <el-option v-for="item in columnTypes" :label="item.label" :value="item.value" :key="item.value"></el-option>
+                                    </el-select>
+                                </template>
+                            </el-table-column>
+                            <!-- <el-table-column prop="apiFlag" label="接口" width="50" align="center">
+                                <template slot-scope="{row}">
+                                    <el-checkbox v-model="row.apiFlag" :disabled="row.formType!='select'&&row.formType!='multiSelect'"></el-checkbox>
+                                </template>
+                            </el-table-column> -->
+                            <el-table-column prop="optionsValue" label="选项" min-width="150" align="center">
+                                <template slot-scope="{row}">
+                                    <el-input type="textarea" v-model="row.optionsValue" :disabled="row.formType!='select'&&row.formType!='multiSelect'"></el-input>
+                                </template>
+                            </el-table-column>
+
+                            <el-table-column width="60" align="center">
+                                <template slot-scope="{ row, column, $index }">
+                                    <el-button @click="removeField($index)" size="small" type="text">删除</el-button>
+                                </template>
+                            </el-table-column>
+                        </el-table>
+                        <el-button @click="addField" type="text" icon="el-icon-plus">添加</el-button>
+                    </el-tab-pane>
+                    <el-tab-pane label="表单校验" name="2">
+                        <el-table :data="tablecolumnsFields">
+
+                            <el-table-column prop="name" label="字段" width="150" align="center">
+                            </el-table-column>
+
+                            <el-table-column prop="remark" label="显示" width="150" align="center">
+                            </el-table-column>
+
+                            <el-table-column prop="required" label="必填" width="50" align="center">
+                                <template slot-scope="{row}">
+                                    <el-checkbox v-model="row.required"></el-checkbox>
+                                </template>
+                            </el-table-column>
+                            <el-table-column prop="validate" label="校验" width="50" align="center">
+                                <template slot-scope="{row}">
+                                    <el-checkbox v-model="row.validate"></el-checkbox>
+                                </template>
+                            </el-table-column>
+                            <el-table-column prop="minLength" label="最短" width="80" align="center">
+                                <template slot-scope="{row}">
+                                    <el-input v-model.number="row.minLength"></el-input>
+                                </template>
+                            </el-table-column>
+                            <el-table-column prop="maxLength" label="最长" width="80" align="center">
+                                <template slot-scope="{row}">
+                                    <el-input v-model.number="row.maxLength"></el-input>
+                                </template>
+                            </el-table-column>
+                            <el-table-column prop="min" label="最小值" width="80" align="center">
+                                <template slot-scope="{row}">
+                                    <el-input v-model="row.min"></el-input>
+                                </template>
+                            </el-table-column>
+                            <el-table-column prop="max" label="最大值" width="80" align="center">
+                                <template slot-scope="{row}">
+                                    <el-input v-model="row.max"></el-input>
+                                </template>
+                            </el-table-column>
+                            <el-table-column prop="validatorType" label="校验类型" width="150" align="center">
+                                <template slot-scope="{row}">
+                                    <el-select v-model="row.validatorType" clearable>
+                                        <el-option v-for="item in validatorTypes" :label="item.label" :value="item.value" :key="item.value"></el-option>
+                                    </el-select>
+                                </template>
+                            </el-table-column>
+                        </el-table>
+                    </el-tab-pane>
+                </el-tabs>
             </el-form-item>
 
             <el-form-item>
@@ -86,6 +149,7 @@
 </template>
 <script>
 import formValidator from '../formValidator'
+import axios from 'axios'
 
 export default {
     created() {
@@ -103,20 +167,22 @@ export default {
                     this.formData = res.data;
 
                     this.tablecolumnsFields = [];
-                    var tableColumnsStr = res.data.tablecolumns;
+                    // var tableColumnsStr = res.data.tablecolumns;
 
-                    var columns = tableColumnsStr.split('_;');
+                    // var columns = tableColumnsStr.split('_;');
 
-                    columns.forEach(element => {
-                        var items = element.split('_,');
-                        var temp = {
-                            label: items[0],
-                            value: items[1],
-                            type: items[2]
-                        }
+                    // columns.forEach(element => {
+                    //     var items = element.split('_,');
+                    //     var temp = {
+                    //         label: items[0],
+                    //         value: items[1],
+                    //         type: items[2]
+                    //     }
+
+                    //     this.tablecolumnsFields.push(temp);
+                    // });
 
-                        this.tablecolumnsFields.push(temp);
-                    });
+                    this.tablecolumnsFields = JSON.parse(res.data.configJson);
 
                 }
             })
@@ -176,9 +242,23 @@ export default {
             ],
             tablecolumnsStr: '',
             columnTypes: [
-                { label: '文本', value: 'text' },
-                { label: '日期', value: 'date' },
-                { label: '图片', value: 'image' },
+                { label: '单行文本', value: 'singleLineText' },
+                { label: '多行文本', value: 'textarea' },
+                { label: '富文本', value: 'richText' },
+                { label: '数字', value: 'number' },
+                { label: '日期选择', value: 'date' },
+                { label: '日期时间选择', value: 'datetime' },
+                { label: '单选下拉框', value: 'select' },
+                { label: '多选下拉框', value: 'multiSelect' },
+                { label: '单图上传', value: 'singleImage' },
+            ],
+            validatorTypes: [
+                { label: '英文', value: 'english' },
+                { label: '数字', value: 'number' },
+                { label: '手机', value: 'phone' },
+                { label: '网址', value: 'url' },
+                { label: '电子邮件', value: 'email' },
+                { label: '身份证', value: 'id' }
             ],
             MysqlDataSourceInfos: [],
             SqlServerDataSourceInfos: [],
@@ -210,36 +290,27 @@ export default {
 
             if (this.tablecolumnsFields.length > 0) {
 
-                var templist = [];
 
-                this.tablecolumnsFields.forEach(item => {
-                    if (item.label && item.value) {
-                        var tempItem = item.label + '_,' + item.value + '_,' + item.type;
-                        templist.push(tempItem);
+                this.formData.fields = this.tablecolumnsFields;
+                this.formData.configJson = '';
+                var data = JSON.parse(JSON.stringify(this.formData));;
+                data.modules = this.formData.modules.join();
+
+                this.$alert('确认要生成么？', '警告', { type: 'error' }).then(() => {
+                    this.loading = true;
+                    return axios.post(this.formData.id ? '/queryConfig/update' : '/queryConfig/save', data)
+                }).then(() => {
+                    this.loading = false;
+                    this.$message.success('代码生成成功');
+                    this.$router.go(-1);
+                }).catch(res => {
+                    this.loading = false;
+                    if ('cancel' === res) {
+                        this.$msgbox({ title: '提示', type: 'error', message: '生成取消' });
+                    } else {
+                        this.$msgbox({ title: '提示', type: 'error', message: '生成失败' });
                     }
                 })
-
-                if (templist.length > 0) {
-
-                    this.tablecolumnsStr = templist.join('_;');
-
-                    this.formData.tablecolumns = this.tablecolumnsStr;
-
-                    var data = JSON.parse(JSON.stringify(this.formData));
-                    this.$http.post({
-                        url: this.formData.id ? '/queryConfig/update' : '/queryConfig/save',
-                        data: data
-                    }).then(res => {
-                        if (res.success) {
-                            this.$message.success('成功');
-                            this.$router.go(-1);
-                        } else {
-                            this.$message.warning('失败')
-                        }
-                    });
-                } else {
-                    this.$message.warning('请添加至少一个完整字段')
-                }
             } else {
                 this.$message.warning('请添加字段')
             }
@@ -248,7 +319,7 @@ export default {
             this.tablecolumnsFields.push({
                 label: '',
                 value: '',
-                type: 'text',
+                type: 'singleLineText',
             });
         },
         removeField(i) {
@@ -304,16 +375,16 @@ export default {
 
 
 
-                    //this.tablecolumnsFields = res.data;
+                    this.tablecolumnsFields = res.data;
 
-                    res.data.forEach(item => {
+                    // res.data.forEach(item => {
 
-                        this.tablecolumnsFields.push({
-                            label: item.remark,
-                            value: item.name,
-                            type: 'text',
-                        })
-                    })
+                    //     this.tablecolumnsFields.push({
+                    //         label: item.remark,
+                    //         value: item.name,
+                    //         type: 'singleLineText',
+                    //     })
+                    // })
 
                 }
             })

src/main/vue/src/pages/QueryConfigs.vue

@@ -31,8 +31,8 @@
             </el-table-column>
             <el-table-column v-if="isColumnShow('tableName')" prop="tableName" label="表名" min-width="100">
             </el-table-column>
-            <el-table-column v-if="isColumnShow('tablecolumns')" prop="tablecolumns" label="字段" min-width="100">
-            </el-table-column>
+            <!--  <el-table-column v-if="isColumnShow('tablecolumns')" prop="tablecolumns" label="字段" min-width="100">
+            </el-table-column> -->
             <el-table-column v-if="isColumnShow('databasetype')" prop="databasetype" label="数据库类型" min-width="100">
             </el-table-column>
             <el-table-column v-if="isColumnShow('modules')" prop="modules" label="功能" min-width="100">
@@ -131,11 +131,11 @@ export default {
                     value: 'tableName',
                     show: true
                 },
-                {
-                    label: '字段',
-                    value: 'tablecolumns',
-                    show: true
-                },
+                // {
+                //     label: '字段',
+                //     value: 'tablecolumns',
+                //     show: true
+                // },
                 {
                     label: '数据库类型',
                     value: 'databasetype',
@@ -160,10 +160,10 @@ export default {
                     label: '表名',
                     value: 'table_name'
                 },
-                {
+                /* {
                     label: '字段',
                     value: 'tableColumns'
-                },
+                }, */
                 {
                     label: '数据库类型',
                     value: 'dataBaseType'

src/main/vue/src/pages/TestAaa.vue

@@ -1,59 +1,42 @@
 <template>
     <div>
-        <el-form :model="formData" :rules="rules" ref="form" label-width="80px" label-position="right" size="small"
-                 style="max-width: 500px;">
-                                                                                                                                                                                                                        <el-form-item prop="testName" label="名字">
+        <el-form :model="formData" :rules="rules" ref="form" label-width="80px" label-position="right" size="small" style="max-width: 500px;">
+            <el-form-item prop="testName" label="名称">
                 <template>
-                    <el-select v-model="formData.testName" clearable  placeholder="请选择">
-                        <el-option
-                                v-for="item in testNameOptions"
-                                :key="item.value"
-                                :label="item.label"
-                                :value="item.value">
+                    <el-select v-model="formData.testName" clearable placeholder="请选择">
+                        <el-option v-for="item in testNameOptions" :key="item.value" :label="item.label" :value="item.value">
                         </el-option>
                     </el-select>
                 </template>
             </el-form-item>
-                                                                                                                                                                                                                                                                                                                            <el-form-item prop="remark" label="备注">
+            <el-form-item prop="remark" label="嗯嗯">
                 <template>
-                    <el-select v-model="formData.remark" clearable  placeholder="请选择">
-                        <el-option
-                                v-for="item in remarkOptions"
-                                :key="item.value"
-                                :label="item.label"
-                                :value="item.value">
+                    <el-select v-model="formData.remark" clearable placeholder="请选择">
+                        <el-option v-for="item in remarkOptions" :key="item.value" :label="item.label" :value="item.value">
                         </el-option>
                     </el-select>
                 </template>
             </el-form-item>
-                                                                                                                                                                                                                                                                                                                                                                     <el-form-item prop="imageUrl" label="图片">
-                 <single-upload v-model="formData.imageUrl"></single-upload>
-             </el-form-item>
-                                                                                                                                                                                                                                            <el-form-item prop="testTime" label="时间">
+            <el-form-item prop="imageUrl" label="图片">
+                <single-upload v-model="formData.imageUrl"></single-upload>
+            </el-form-item>
+            <el-form-item prop="testTime" label="时间">
                 <template>
                     <div class="block">
-                        <el-date-picker
-                                v-model="formData.testTime"
-                                type="date"
-                                value-format="timestamp"
-                                placeholder="选择日期">
+                        <el-date-picker v-model="formData.testTime" type="date" value-format="timestamp" placeholder="选择日期">
                         </el-date-picker>
                     </div>
                 </template>
             </el-form-item>
-                                                                                                                                                                                                                                                                                                                                                                                        <el-form-item prop="multiSelect" label="多选">
+            <el-form-item prop="multiSelect" label="多选">
                 <template>
                     <el-select v-model="formData.multiSelect" multiple clearable placeholder="请选择">
-                        <el-option
-                                v-for="item in multiSelectOptions"
-                                :key="item.value"
-                                :label="item.label"
-                                :value="item.value">
+                        <el-option v-for="item in multiSelectOptions" :key="item.value" :label="item.label" :value="item.value">
                         </el-option>
                     </el-select>
                 </template>
             </el-form-item>
-                                                                                                                                                                <el-form-item>
+            <el-form-item>
                 <el-button @click="onSave" :loading="$store.state.fetchingData" type="primary">保存</el-button>
                 <el-button @click="onDelete" v-if="formData.id" type="danger">删除</el-button>
                 <el-button @click="$router.go(-1)">取消</el-button>
@@ -62,129 +45,129 @@
     </div>
 </template>
 <script>
-    import formValidator from '../formValidator'
+import formValidator from '../formValidator'
 
-    export default {
-        created() {
-            if (this.$route.query.id) {
-                this.$http.get({
-                    url: '/testAaa/getOne',
-                    data: {
-                        id: this.$route.query.id
-                    }
-                }).then(res => {
-                    if (res.success) {
+export default {
+    created() {
+        if (this.$route.query.id) {
+            this.$http.get({
+                url: '/testAaa/getOne',
+                data: {
+                    id: this.$route.query.id
+                }
+            }).then(res => {
+                if (res.success) {
 
-                                                                                                                                                                                                                                                                                                                                                                            
-                                if(res.data.multiSelect){
-                                    res.data.multiSelect = res.data.multiSelect.split(',');
-                                }else{
-                                    res.data.multiSelect = [];
-                                }
 
-                                                    
-                        this.formData = res.data;
+                    if (res.data.multiSelect) {
+                        res.data.multiSelect = res.data.multiSelect.split(',');
+                    } else {
+                        res.data.multiSelect = [];
                     }
-                })
-            }
 
-                                                                                                                                                                        
+
+                    this.formData = res.data;
+                }
+            })
+        }
+
 
 
-                        this.$http.get({
-                        url:'/testBbb/all'
-                        }).then(res => {
-                        if (res.success) {
 
-                        if (res.data.length > 0) {
-                        res.data.forEach(item => {
-                        this.remarkOptions.push({label: item.nameAaa, value:item.nameAaa});
-                        })
-                        }
-                        }
-                        });
-                                                                                                                                            
+        this.$http.get({
+            url: '/testBbb/all'
+        }).then(res => {
+            if (res.success) {
+
+                if (res.data.length > 0) {
+                    res.data.forEach(item => {
+                        this.remarkOptions.push({ label: item.nameAaa, value: item.nameAaa });
+                    })
+                }
+            }
+        });
+
 
 
-                        this.$http.get({
-                        url:'/testBbb/all'
-                        }).then(res => {
-                        if (res.success) {
+        this.$http.get({
+            url: '/testBbb/all'
+        }).then(res => {
+            if (res.success) {
 
-                        if (res.data.length > 0) {
-                        res.data.forEach(item => {
-                        this.multiSelectOptions.push({label: item.nameCcc, value:item.nameCcc});
-                        })
-                        }
-                        }
-                        });
-                                                        },
-        data() {
-            return {
-                saving: false,
-                formData: {},
-                rules: {
-                                                                                                        testName:
+                if (res.data.length > 0) {
+                    res.data.forEach(item => {
+                        this.multiSelectOptions.push({ label: item.nameCcc, value: item.nameCcc });
+                    })
+                }
+            }
+        });
+    },
+    data() {
+        return {
+            saving: false,
+            formData: {},
+            rules: {
+                testName:
                     [
-                                                {required: true, message: '请输入 名字', trigger: 'blur'},
-                                                                    ],
-                                                                remark:
+                        { required: true, message: '请输入 名称', trigger: 'blur' },
+                    ],
+                remark:
                     [
-                                                {required: true, message: '请输入 备注', trigger: 'blur'},
-                                                                    ],
-                                                                                                                        multiSelect:
+                        { required: true, message: '请输入 嗯嗯', trigger: 'blur' },
+                    ],
+                multiSelect:
                     [
-                                                {required: true, message: '请输入 多选', trigger: 'blur'},
-                                                                    ],
-                                    },
-                                        testNameOptions:[{ label: '张力', value: '张力' }, { label: '王建', value: '王建' },{ label: '黎明', value: '黎明' }],
-                                            remarkOptions:[],
-                                                            multiSelectOptions:[],
-                            }
-        },
-        methods: {
-            onSave() {
-                this.$refs.form.validate((valid) => {
-                    if (valid) {
-                        this.submit();
-                    } else {
-                        return false;
-                    }
-                });
-            },
-            submit() {
-                var data = JSON.parse(JSON.stringify(this.formData));
-                this.$http.post({
-                    url: this.formData.id ? '/testAaa/update' : '/testAaa/save',
-                    data: data
-                }).then(res => {
-                    if (res.success) {
-                        this.$message.success('成功');
-                        this.$router.go(-1);
-                    } else {
-                        this.$message.warning('失败')
-                    }
-                });
+                        { required: true, message: '请输入 多选', trigger: 'blur' },
+                    ],
             },
-            onDelete() {
-                this.$alert('删除将无法恢复，确认要删除么？', '警告', { type: 'error' }).then(() => {
-                    return this.$http.post({
+            testNameOptions: [{ label: '??', value: '??' }, { label: '??', value: '??' }, { label: '??', value: '??' }],
+            remarkOptions: [],
+            multiSelectOptions: [],
+        }
+    },
+    methods: {
+        onSave() {
+            this.$refs.form.validate((valid) => {
+                if (valid) {
+                    this.submit();
+                } else {
+                    return false;
+                }
+            });
+        },
+        submit() {
+            var data = JSON.parse(JSON.stringify(this.formData));
+            this.$http.post({
+                url: this.formData.id ? '/testAaa/update' : '/testAaa/save',
+                data: data
+            }).then(res => {
+                if (res.success) {
+                    this.$message.success('成功');
+                    this.$router.go(-1);
+                } else {
+                    this.$message.warning('失败')
+                }
+            });
+        },
+        onDelete() {
+            this.$alert('删除将无法恢复，确认要删除么？', '警告', { type: 'error' }).then(() => {
+                return this.$http.post({
                     url: '/testAaa/del',
                     data: { id: this.formData.id }
-                    })
-                }).then(() => {
-                    this.$message.success('删除成功');
-                    this.$router.go(-1);
-                }).catch(action => {
-                    if (action === 'cancel') {
-                        this.$message.info('删除取消');
-                    } else {
-                        this.$message.error('删除失败');
-                    }
                 })
-            },
-        }
+            }).then(() => {
+                this.$message.success('删除成功');
+                this.$router.go(-1);
+            }).catch(action => {
+                if (action === 'cancel') {
+                    this.$message.info('删除取消');
+                } else {
+                    this.$message.error('删除失败');
+                }
+            })
+        },
     }
+}
 </script>
 <style lang="less" scoped>
 </style>

src/main/vue/src/pages/TestAaas.vue

@@ -1,25 +1,22 @@
 <template>
     <div>
         <div class="filters-container">
-        
+
             <el-input placeholder="关键字" size="small" v-model="filter1" clearable class="filter-item"></el-input>
             <el-button @click="searchData" type="primary" size="small" icon="el-icon-search" class="filter-item">搜索
             </el-button>
-            <el-button @click="showAdvancedQueryDialog = !showAdvancedQueryDialog" type="primary" size="small"
-                       icon="el-icon-search" class="filter-item">高级查询
+            <el-button @click="showAdvancedQueryDialog = !showAdvancedQueryDialog" type="primary" size="small" icon="el-icon-search" class="filter-item">高级查询
             </el-button>
-            <el-button @click="showTableSortDialog = !showTableSortDialog" type="primary" size="small"
-                       icon="el-icon-sort" class="filter-item">排序
+            <el-button @click="showTableSortDialog = !showTableSortDialog" type="primary" size="small" icon="el-icon-sort" class="filter-item">排序
             </el-button>
-            <el-button @click="$router.push('/testAaa')" type="primary"
-                       size="small" icon="el-icon-edit"
-                       class="filter-item">添加
+            <el-button @click="$router.push('/testAaa')" type="primary" size="small" icon="el-icon-edit" class="filter-item">添加
             </el-button>
             <el-button @click="exportExcel" type="primary" size="small" icon="el-icon-share" class="filter-item">导出EXCEL
             </el-button>
             <el-dropdown trigger="click" size="medium" class="table-column-filter">
                 <span>
-                  筛选数据<i class="el-icon-arrow-down el-icon--right"></i>
+                    筛选数据
+                    <i class="el-icon-arrow-down el-icon--right"></i>
                 </span>
                 <el-dropdown-menu slot="dropdown" class="table-column-filter-wrapper">
                     <el-checkbox v-for="item in tableColumns" :key="item.value" v-model="item.show">{{item.label}}
@@ -27,75 +24,34 @@
                 </el-dropdown-menu>
             </el-dropdown>
         </div>
-        <el-table
-                :data="tableData"
-                :height="tableHeight"
-                row-key="id"
-                ref="table">
-            <el-table-column
-                    v-if="multipleMode"
-                    align="center"
-                    type="selection"
-                    width="50">
+        <el-table :data="tableData" :height="tableHeight" row-key="id" ref="table">
+            <el-table-column v-if="multipleMode" align="center" type="selection" width="50">
+            </el-table-column>
+            <el-table-column type="index" min-width="50" align="center">
+            </el-table-column>
+
+            <el-table-column v-if="isColumnShow('id')" prop="id" label="id" min-width="100">
+            </el-table-column>
+
+            <el-table-column v-if="isColumnShow('testName')" prop="testName" label="名字" min-width="100">
+            </el-table-column>
+
+            <el-table-column v-if="isColumnShow('remark')" prop="remark" label="备注" min-width="100">
+            </el-table-column>
+
+            <el-table-column v-if="isColumnShow('imageUrl')" prop="imageUrl" label="图片" min-width="100">
+                <template slot-scope="{row}">
+                    <img :src="row.imageUrl" @click="showImg(row.imageUrl)" style="width: 100px;height: 100px;vertical-align: middle;" />
+                </template>
+
             </el-table-column>
-            <el-table-column
-                    type="index"
-                    min-width="50"
-                    align="center">
+
+            <el-table-column v-if="isColumnShow('testTime')" prop="testTime" label="时间" :formatter="DateFormatter" min-width="100">
             </el-table-column>
-                            
-                                            <el-table-column
-                                v-if="isColumnShow('id')"
-                                prop="id"
-                                label="id"
-                                min-width="100">
-                        </el-table-column>
-                                                                                            
-                                            <el-table-column
-                                v-if="isColumnShow('testName')"
-                                prop="testName"
-                                label="名字"
-                                min-width="100">
-                        </el-table-column>
-                                                                
-                                            <el-table-column
-                                v-if="isColumnShow('remark')"
-                                prop="remark"
-                                label="备注"
-                                min-width="100">
-                        </el-table-column>
-                                                                
-                                            <el-table-column
-                                v-if="isColumnShow('imageUrl')"
-                                prop="imageUrl"
-                                label="图片"
-                                min-width="100">
-                            <template slot-scope="{row}">
-                                <img :src="row.imageUrl" @click="showImg(row.imageUrl)" style="width: 100px;height: 100px;vertical-align: middle;" />
-                            </template>
-
-                        </el-table-column>
-                                                                    
-                                            <el-table-column
-                                v-if="isColumnShow('testTime')"
-                                prop="testTime"
-                                label="时间"
-                                :formatter="DateFormatter"
-                                min-width="100">
-                        </el-table-column>
-                                                                
-                                            <el-table-column
-                                v-if="isColumnShow('multiSelect')"
-                                prop="multiSelect"
-                                label="多选"
-                                min-width="100">
-                        </el-table-column>
-                                                            <el-table-column
-                    label="操作"
-                    align="center"
-                    fixed="right"
-                    min-width="150"
-            >
+
+            <el-table-column v-if="isColumnShow('multiSelect')" prop="multiSelect" label="多选" min-width="100">
+            </el-table-column>
+            <el-table-column label="操作" align="center" fixed="right" min-width="150">
                 <template slot-scope="scope">
                     <el-button @click="editRow(scope.row)" type="primary" size="mini" plain>编辑</el-button>
                     <el-button @click="deleteRow(scope.row)" type="danger" size="mini" plain>删除</el-button>
@@ -111,15 +67,7 @@
                     <el-button size="small" @click="toggleMultipleMode(false)">取消</el-button>
                 </el-button-group>
             </div>
-            <el-pagination
-                    background
-                    @size-change="pageSizeChange"
-                    @current-change="currentPageChange"
-                    :current-page="currentPage"
-                    :page-sizes="[10, 20, 30, 40, 50]"
-                    :page-size="pageSize"
-                    layout="total, sizes, prev, pager, next, jumper"
-                    :total="totalNumber">
+            <el-pagination background @size-change="pageSizeChange" @current-change="currentPageChange" :current-page="currentPage" :page-sizes="[10, 20, 30, 40, 50]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="totalNumber">
             </el-pagination>
         </div>
         <el-dialog title="高级查询" :visible.sync="showAdvancedQueryDialog">
@@ -140,16 +88,14 @@
                     <template slot-scope="{row}">
                         <el-select v-model="row.name">
 
-                            <el-option v-for="item in advancedQueryColumns" :label="item.label" :value="item.value"
-                                       :key="item.value"></el-option>
+                            <el-option v-for="item in advancedQueryColumns" :label="item.label" :value="item.value" :key="item.value"></el-option>
                         </el-select>
                     </template>
                 </el-table-column>
                 <el-table-column prop="searchMethod" label="搜索方式" width="150" align="center">
                     <template slot-scope="{row}">
                         <el-select v-model="row.searchMethod">
-                            <el-option v-for="item in searchMethods" :label="item" :value="item"
-                                       :key="item"></el-option>
+                            <el-option v-for="item in searchMethods" :label="item" :value="item" :key="item"></el-option>
                         </el-select>
                     </template>
                 </el-table-column>
@@ -179,8 +125,7 @@
                     <template slot-scope="{row}">
                         <el-select v-model="row.name">
 
-                            <el-option v-for="item in advancedQueryColumns" :label="item.label" :value="item.value"
-                                       :key="item.value"></el-option>
+                            <el-option v-for="item in advancedQueryColumns" :label="item.label" :value="item.value" :key="item.value"></el-option>
                         </el-select>
                     </template>
                 </el-table-column>
@@ -214,270 +159,269 @@
     </div>
 </template>
 <script>
-    import {mapState} from 'vuex'
-    import {format} from 'date-fns'
-    import zh from 'date-fns/locale/zh_cn'
+import { mapState } from 'vuex'
+import { format } from 'date-fns'
+import zh from 'date-fns/locale/zh_cn'
 
-    export default {
-        created() {
+export default {
+    created() {
+        this.getData();
+    },
+    data() {
+        return {
+            totalNumber: 0,
+            totalPage: 10,
+            currentPage: 1,
+            pageSize: 20,
+            tableData: [],
+            filter1: '',
+            filter2: '',
+            tableColumns: [
+                {
+                    label: 'id',
+                    value: 'id',
+                    show: true
+                },
+                {
+                    label: '名字',
+                    value: 'testName',
+                    show: true
+                },
+                {
+                    label: '备注',
+                    value: 'remark',
+                    show: true
+                },
+                {
+                    label: '图片',
+                    value: 'imageUrl',
+                    show: true
+                },
+                {
+                    label: '时间',
+                    value: 'testTime',
+                    show: true
+                },
+                {
+                    label: '多选',
+                    value: 'multiSelect',
+                    show: true
+                },
+            ],
+            multipleMode: false,
+            showAdvancedQueryDialog: false,
+            advancedQueryFields: [],
+            showTableSortDialog: false,
+            tableSortFields: [],
+            searchMethods: ['=', '!=', '>', '>=', '<', '<=', 'like'],
+            advancedQueryColumns: [
+                {
+                    label: 'id',
+                    value: 'id'
+                },
+                {
+                    label: '名字',
+                    value: 'test_name'
+                },
+                {
+                    label: '备注',
+                    value: 'remark'
+                },
+                {
+                    label: '图片',
+                    value: 'image_url'
+                },
+                {
+                    label: '时间',
+                    value: 'test_time'
+                },
+                {
+                    label: '多选',
+                    value: 'multi_select'
+                },
+            ],
+            advancedQuerySearchKey: '',
+            orderByStr: '',
+            imgSrc: '',
+            imageDialogVisible: false,
+        }
+    },
+    computed: {
+        ...mapState(['tableHeight']),
+        selection() {
+            return this.$refs.table.selection.map(i => i.id);
+        }
+    },
+    methods: {
+        pageSizeChange(size) {
+            this.currentPage = 1;
+            this.pageSize = size;
             this.getData();
         },
-        data() {
-            return {
-                totalNumber: 0,
-                totalPage: 10,
-                currentPage: 1,
-                pageSize: 20,
-                tableData: [],
-                filter1: '',
-                filter2: '',
-                tableColumns: [
-                                                                        {
-                                label: 'id',
-                                value: 'id',
-                                show: true
-                            },
-                                                                                                                                            {
-                                label: '名字',
-                                value: 'testName',
-                                show: true
-                            },
-                                                                                                {
-                                label: '备注',
-                                value: 'remark',
-                                show: true
-                            },
-                                                                                                {
-                                label: '图片',
-                                value: 'imageUrl',
-                                show: true
-                            },
-                                                                                                {
-                                label: '时间',
-                                value: 'testTime',
-                                show: true
-                            },
-                                                                                                {
-                                label: '多选',
-                                value: 'multiSelect',
-                                show: true
-                            },
-                                                            ],
-                multipleMode: false,
-                showAdvancedQueryDialog: false,
-                advancedQueryFields: [],
-                showTableSortDialog: false,
-                tableSortFields: [],
-                searchMethods: ['=', '!=', '>', '>=', '<', '<=', 'like'],
-                advancedQueryColumns: [
-                                                                        {
-                                label: 'id',
-                                value: 'id'
-                            },
-                                                                                                                                            {
-                                label: '名字',
-                                value: 'test_name'
-                            },
-                                                                                                {
-                                label: '备注',
-                                value: 'remark'
-                            },
-                                                                                                {
-                                label: '图片',
-                                value: 'image_url'
-                            },
-                                                                                                {
-                                label: '时间',
-                                value: 'test_time'
-                            },
-                                                                                                {
-                                label: '多选',
-                                value: 'multi_select'
-                            },
-                                                            ],
-                advancedQuerySearchKey: '',
-                orderByStr: '',
-                imgSrc: '',
-                imageDialogVisible: false,
-            }
+        currentPageChange(page) {
+            this.currentPage = page;
+            this.getData();
+        },
+        getData() {
+            this.$http.get({
+                url: '/testAaa/page',
+                data: {
+                    currentPage: this.currentPage,
+                    pageNumber: this.pageSize,
+                    searchKey: this.filter1,
+                    advancedQuery: this.advancedQuerySearchKey,
+                    orderByStr: this.orderByStr,
+                }
+            }).then(res => {
+                if (res.success) {
+                    this.totalNumber = res.data.page.totalNumber;
+                    this.tableData = res.data.pp;
+                }
+            })
+        },
+        isColumnShow(column) {
+            var row = this.tableColumns.find(i => i.value === column);
+            return row ? row.show : false;
         },
-        computed: {
-            ...mapState(['tableHeight']),
-            selection() {
-                return this.$refs.table.selection.map(i => i.id);
+        toggleMultipleMode(multipleMode) {
+            this.multipleMode = multipleMode;
+            if (!multipleMode) {
+                this.$refs.table.clearSelection();
             }
         },
-        methods: {
-            pageSizeChange(size) {
-                this.currentPage = 1;
-                this.pageSize = size;
-                this.getData();
-            },
-            currentPageChange(page) {
-                this.currentPage = page;
-                this.getData();
-            },
-            getData() {
-                this.$http.get({
-                    url: '/testAaa/page',
-                    data: {
-                        currentPage: this.currentPage,
-                        pageNumber: this.pageSize,
-                        searchKey: this.filter1,
-                        advancedQuery: this.advancedQuerySearchKey,
-                        orderByStr: this.orderByStr,
-                    }
-                }).then(res => {
-                    if (res.success) {
-                        this.totalNumber = res.data.page.totalNumber;
-                        this.tableData = res.data.pp;
-                    }
-                })
-            },
-            isColumnShow(column) {
-                var row = this.tableColumns.find(i => i.value === column);
-                return row ? row.show : false;
-            },
-            toggleMultipleMode(multipleMode) {
-                this.multipleMode = multipleMode;
-                if (!multipleMode) {
-                    this.$refs.table.clearSelection();
-                }
-            },
-            editRow(row) {
-                this.$router.push({
-                    path: '/testAaa',
-                    query: {
-                        id: row.id
-                    }
-                })
-            },
-            operation1() {
-                this.$notify({
-                    title: '提示',
-                    message: this.selection
-                });
-            },
-            operation2() {
-                this.$message('操作2');
-            },
-            addField() {
-                this.advancedQueryFields.push({
-                    link: 'AND',
-                    name: '',
-                    searchMethod: '=',
-                    value: '',
-                });
-            },
-            removeField(i) {
-                if (this.advancedQueryFields.length > 0) {
-                    this.advancedQueryFields.splice(i, 1);
+        editRow(row) {
+            this.$router.push({
+                path: '/testAaa',
+                query: {
+                    id: row.id
                 }
-            },
-            advancedQuery() {
+            })
+        },
+        operation1() {
+            this.$notify({
+                title: '提示',
+                message: this.selection
+            });
+        },
+        operation2() {
+            this.$message('操作2');
+        },
+        addField() {
+            this.advancedQueryFields.push({
+                link: 'AND',
+                name: '',
+                searchMethod: '=',
+                value: '',
+            });
+        },
+        removeField(i) {
+            if (this.advancedQueryFields.length > 0) {
+                this.advancedQueryFields.splice(i, 1);
+            }
+        },
+        advancedQuery() {
 
-                this.advancedQuerySearchKey = '';
+            this.advancedQuerySearchKey = '';
 
-                if (this.advancedQueryFields.length > 0) {
+            if (this.advancedQueryFields.length > 0) {
 
-                    var templist = [];
+                var templist = [];
 
-                    this.advancedQueryFields.forEach(item => {
-                        if (item.link && item.name && item.searchMethod && item.value) {
-                            var tempItem = item.link + '_,' + item.name + '_,' + item.searchMethod + '_,' + item.value;
-                            templist.push(tempItem);
-                        }
-                    })
+                this.advancedQueryFields.forEach(item => {
+                    if (item.link && item.name && item.searchMethod && item.value) {
+                        var tempItem = item.link + '_,' + item.name + '_,' + item.searchMethod + '_,' + item.value;
+                        templist.push(tempItem);
+                    }
+                })
 
-                    if (templist.length > 0) {
+                if (templist.length > 0) {
 
-                        this.advancedQuerySearchKey = templist.join('_;');
-                    }
+                    this.advancedQuerySearchKey = templist.join('_;');
                 }
+            }
 
-                this.getData();
-                this.showAdvancedQueryDialog = false;
-            },
-            addSortField() {
-                this.tableSortFields.push({
-                    name: '',
-                    order: 'asc',
-                });
-            },
-            removeSortField(i) {
-                if (this.tableSortFields.length > 0) {
-                    this.tableSortFields.splice(i, 1);
-                }
-            },
-            tableSortQuery() {
+            this.getData();
+            this.showAdvancedQueryDialog = false;
+        },
+        addSortField() {
+            this.tableSortFields.push({
+                name: '',
+                order: 'asc',
+            });
+        },
+        removeSortField(i) {
+            if (this.tableSortFields.length > 0) {
+                this.tableSortFields.splice(i, 1);
+            }
+        },
+        tableSortQuery() {
 
-                this.orderByStr = '';
+            this.orderByStr = '';
 
-                if (this.tableSortFields.length > 0) {
+            if (this.tableSortFields.length > 0) {
 
-                    var templist = [];
+                var templist = [];
 
-                    this.tableSortFields.forEach(item => {
-                        if (item.name && item.order) {
-                            var tempItem = item.name + '_,' + item.order;
-                            templist.push(tempItem);
-                        }
-                    })
+                this.tableSortFields.forEach(item => {
+                    if (item.name && item.order) {
+                        var tempItem = item.name + '_,' + item.order;
+                        templist.push(tempItem);
+                    }
+                })
 
-                    if (templist.length > 0) {
+                if (templist.length > 0) {
 
-                        this.orderByStr = templist.join('_;');
-                    }
+                    this.orderByStr = templist.join('_;');
                 }
+            }
 
-                this.getData();
-                this.showTableSortDialog = false;
-            },
-            exportExcel() {
-                window.location.href = this.$baseUrl + "/testAaa/exportExcel?searchKey="
-                        + this.filter1 + "&advancedQuery=" + this.advancedQuerySearchKey+"&orderByStr=" + this.orderByStr;
-            },
-            searchData() {
-                this.currentPage = 1;
-                this.getData();
-            },
-            deleteRow(row) {
-                this.$alert('删除将无法恢复，确认要删除么？', '警告', {type: 'error'}).then(() => {
-                    return this.$http.post({
-                        url: '/testAaa/del',
-                        data: {id: row.id}
-                    })
-                }).then(() => {
-                    this.$message.success('删除成功');
-                    this.getData();
-                }).catch(action => {
-                    if (action === 'cancel') {
-                        this.$message.info('删除取消');
-                    } else {
-                        this.$message.error('删除失败');
-                    }
+            this.getData();
+            this.showTableSortDialog = false;
+        },
+        exportExcel() {
+            window.location.href = this.$baseUrl + "/testAaa/exportExcel?searchKey="
+                + this.filter1 + "&advancedQuery=" + this.advancedQuerySearchKey + "&orderByStr=" + this.orderByStr;
+        },
+        searchData() {
+            this.currentPage = 1;
+            this.getData();
+        },
+        deleteRow(row) {
+            this.$alert('删除将无法恢复，确认要删除么？', '警告', { type: 'error' }).then(() => {
+                return this.$http.post({
+                    url: '/testAaa/del',
+                    data: { id: row.id }
                 })
-            },
-            DateTimeFormatter(row, column, cellValue) {
-                if (cellValue) {
-                    return format(cellValue, 'YYYY/MM/DD HH:mm', {locale: zh})
+            }).then(() => {
+                this.$message.success('删除成功');
+                this.getData();
+            }).catch(action => {
+                if (action === 'cancel') {
+                    this.$message.info('删除取消');
+                } else {
+                    this.$message.error('删除失败');
                 }
+            })
+        },
+        DateTimeFormatter(row, column, cellValue) {
+            if (cellValue) {
+                return format(cellValue, 'YYYY/MM/DD HH:mm', { locale: zh })
+            }
 
-            },
-            DateFormatter(row, column, cellValue) {
-                if (cellValue) {
-                    return format(cellValue, 'YYYY/MM/DD', {locale: zh})
-                }
+        },
+        DateFormatter(row, column, cellValue) {
+            if (cellValue) {
+                return format(cellValue, 'YYYY/MM/DD', { locale: zh })
+            }
 
-            },
-            showImg(img) {
-                this.imgSrc = img;
-                this.imageDialogVisible = true;
-            },
+        },
+        showImg(img) {
+            this.imgSrc = img;
+            this.imageDialogVisible = true;
+        },
 
-        }
     }
+}
 </script>
 <style lang="less" scoped>
-
 </style>