调整表格编辑布局

zkqy-ui/src/views/tableMange/components/ClassificationQueryPanel.vue

@@ -7,16 +7,15 @@
       size="mini"
       @click="addCondition"
     >
-      添加分类按钮
+      添加按钮
     </el-button>
     <el-table :data="tableData" style="width: 100%">
-      <el-table-column align="center" label="序号" type="index" width="50">
-      </el-table-column>
-      <el-table-column align="center" prop="btnName" label="按钮名称">
+      <!-- <el-table-column align="center" label="序号" type="index" width="50">
+      </el-table-column> -->
+      <el-table-column align="center" prop="conditionNotes" label="按钮名称">
         <template slot-scope="scope">
           <el-input
-            v-model="scope.row.btnName"
-            placeholder=""
+            v-model="scope.row.conditionNotes"
             size="normal"
             clearable
           ></el-input>
@@ -24,13 +23,13 @@
       </el-table-column>
       <el-table-column
         align="center"
-        prop="fieldName"
+        prop="conditionField"
         label="条件字段"
         width="100"
       >
         <template slot-scope="scope">
           <el-select
-            v-model="scope.row.fieldName"
+            v-model="scope.row.conditionField"
             placeholder="请选择条件字段"
             clearable
             filterable
@@ -64,9 +63,92 @@
           </el-select>
         </template>
       </el-table-column> -->
-      <el-table-column align="center" prop="refValue" label="参照值">
+      <!-- <el-table-column align="center" prop="conditionType" label="类型">
+        <template slot-scope="scope">
+          <el-select v-model="scope.row.conditionType" clearable filterable>
+            <el-option
+              v-for="item in conditionTypeOptions"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            >
+            </el-option>
+          </el-select>
+        </template>
+      </el-table-column> -->
+      <el-table-column align="center" prop="componentType" label="按钮类型">
+        <template slot-scope="scope">
+          <el-select v-model="scope.row.componentType" clearable filterable>
+            <el-option
+              v-for="item in componentTypeOptions"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            >
+            </el-option>
+          </el-select>
+        </template>
+      </el-table-column>
+      <el-table-column align="center" prop="componentSize" label="按钮尺寸">
+        <template slot-scope="scope">
+          <el-select v-model="scope.row.componentSize" clearable filterable>
+            <el-option
+              v-for="item in componentSizeOptions"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            >
+            </el-option>
+          </el-select>
+        </template>
+      </el-table-column>
+      <el-table-column align="center" prop="componentIcon" label="按钮图标">
+        <template slot-scope="scope">
+          <el-popover
+            placement="bottom-start"
+            width="460"
+            trigger="click"
+            @show="$refs['iconSelect'].reset()"
+          >
+            <IconSelect
+              ref="iconSelect"
+              @selected="
+                (name) => {
+                  selected(name, scope.row);
+                }
+              "
+              :active-icon="scope.row.componentIcon"
+            />
+            <el-input
+              slot="reference"
+              v-model="scope.row.componentIcon"
+              placeholder="点击选择图标"
+              readonly
+            >
+              <svg-icon
+                v-if="scope.row.componentIcon"
+                slot="prefix"
+                :icon-class="scope.row.componentIcon"
+                style="width: 25px"
+              />
+              <i v-else slot="prefix" class="el-icon-search el-input__icon" />
+            </el-input>
+          </el-popover>
+        </template>
+      </el-table-column>
+
+      <el-table-column
+        align="center"
+        prop="conditionDefaultValue"
+        label="按钮值"
+      >
         <template slot-scope="scope">
-          <el-input v-model="scope.row.refValue"></el-input>
+          <el-input v-model="scope.row.conditionDefaultValue"></el-input>
+        </template>
+      </el-table-column>
+      <el-table-column align="center" prop="sort" label="排序">
+        <template slot-scope="scope">
+          <el-input v-model="scope.row.sort"></el-input>
         </template>
       </el-table-column>
       <el-table-column label="操作">
@@ -85,10 +167,11 @@
 </template>
 
 <script>
+import IconSelect from "@/components/IconSelect";
 export default {
   name: "ClassificationQueryPanel",
-  props: ["tableFieldList", "filterDataEcho"],
-  components: {},
+  props: ["tableFieldList", "classificationDataEcho"],
+  components: { IconSelect },
   data() {
     return {
       tableData: [],
@@ -115,6 +198,43 @@ export default {
           label: "<=",
         },
       ],
+      conditionTypeOptions: [
+        {
+          label: "按钮",
+          value: "button",
+        },
+      ],
+      componentTypeOptions: [
+        {
+          value: "primary",
+          label: "primary",
+        },
+        {
+          value: "success",
+          label: "success",
+        },
+        {
+          value: "warning",
+          label: "warning",
+        },
+        {
+          value: "danger",
+          label: "danger",
+        },
+        {
+          value: "info",
+          label: "info",
+        },
+        {
+          value: "text",
+          label: "text",
+        },
+      ],
+      componentSizeOptions: [
+        { value: "small", label: "small" },
+        { value: "default", label: "default" },
+        { value: "large", label: "large" },
+      ],
     };
   },
   watch: {
@@ -124,21 +244,21 @@ export default {
 
         console.log(this.fieldList);
         // 初始化删除逻辑条件
-        let is_has_del_flag = nval.find((item) => {
-          return item.fieldName == "del_flag";
-        });
-        console.log(is_has_del_flag);
-        if (is_has_del_flag) {
-          let { fieldName, tableName } = is_has_del_flag;
-          this.tableData = [];
-          this.tableData.push({
-            fieldName: tableName + "." + fieldName,
-            condition: "=",
-            refValue: 0,
-          });
-        } else {
-          this.tableData = [];
-        }
+        // let is_has_del_flag = nval.find((item) => {
+        //   return item.fieldName == "del_flag";
+        // });
+        // console.log(is_has_del_flag);
+        // if (is_has_del_flag) {
+        //   let { fieldName, tableName } = is_has_del_flag;
+        //   this.tableData = [];
+        //   this.tableData.push({
+        //     fieldName: tableName + "." + fieldName,
+        //     condition: "=",
+        //     refValue: 0,
+        //   });
+        // } else {
+        //   this.tableData = [];
+        // }
       },
       deep: true,
       immediate: true,
@@ -146,7 +266,8 @@ export default {
     myFilterDataEcho: {
       handler(val) {
         if (val) {
-          this.tableData = JSON.parse(decodeURIComponent(this.filterDataEcho));
+          console.log(val);
+          this.tableData = val;
         }
       },
       deep: true,
@@ -159,17 +280,29 @@ export default {
       return this.tableFieldList;
     },
     myFilterDataEcho() {
-      return this.filterDataEcho;
+      return this.classificationDataEcho;
     },
   },
   methods: {
+    // 选择图标
+    selected(name, row) {
+      console.log(name, row);
+      row.componentIcon = name;
+      // this.btnGroupFormData.btnIcon = name;
+    },
     // 新增条件回调
     addCondition() {
       this.tableData.push({
-        btnName: "", //按钮名称
-        fieldName: "",
+        conditionNotes: "", //按钮名称
+        conditionName: "",
+        conditionField: "", //条件字段
         // condition: "",
-        refValue: "",
+        conditionType: "button", //类型
+        conditionDefaultValue: "", //按钮值
+        sort: "", //排序
+        componentType: "", //按钮类型
+        componentsSize: "", //按钮大小
+        componentIcon: "", //按钮图标
       });
     },
     // 编辑条件回调
@@ -180,14 +313,7 @@ export default {
     },
     // 获取数据筛选条件
     getConditions() {
-      let res = this.tableData.filter((item) => {
-        return (
-          item.fieldName &&
-          item.condition &&
-          (item.refValue == 0 || item.refValue)
-        );
-      });
-      return res;
+      return this.tableData;
     },
     // 获取回显数据
     getEchoData() {

zkqy-ui/src/views/tableMange/components/StyleFormPanel.vue

@@ -12,10 +12,8 @@
     <!-- 样式表格 -->
     <el-table :data="styleTableData" style="width: 100%">
       <el-table-column label="序号" type="index" width="50"> </el-table-column>
-      <el-table-column prop="styleName" label="样式名" width="100">
-      </el-table-column>
-      <el-table-column prop="styleDescription" label="描述" width="100">
-      </el-table-column>
+      <el-table-column prop="styleName" label="样式名"> </el-table-column>
+      <el-table-column prop="styleDescription" label="描述"> </el-table-column>
       <el-table-column label="操作">
         <template slot-scope="scope">
           <el-dropdown>

zkqy-ui/src/views/tableMange/index.vue

@@ -373,20 +373,12 @@
               >
               </el-table-column>
               <!-- <el-table-column prop="datafield" label="数据字段" width="80"> -->
-              <el-table-column
-                prop="statisticTitle"
-                label="统计标题"
-                width="83"
-              >
+              <el-table-column prop="statisticTitle" label="统计标题">
               </el-table-column>
-              <el-table-column
-                prop="statisticField"
-                label="统计数据"
-                width="80"
-              >
+              <el-table-column prop="statisticField" label="统计数据">
               </el-table-column>
               <!-- <el-table-column prop="type" label="类型" width="50"> -->
-              <el-table-column prop="statisticType" label="统计类型" width="50">
+              <el-table-column prop="statisticType" label="统计类型">
               </el-table-column>
 
               <el-table-column
@@ -443,13 +435,13 @@
               :filterDataEcho="filterDataEcho"
             ></DataFilterPanel>
           </el-tab-pane>
-          <!-- <el-tab-pane label="分类查询" name="classificationQuery">
+          <el-tab-pane label="按钮配置" name="classificationQuery">
             <ClassificationQueryPanel
               ref="classificationQueryRef"
               :tableFieldList="tableFieldList"
-              :filterDataEcho="filterDataEcho"
+              :classificationDataEcho="classificationDataEcho"
             ></ClassificationQueryPanel>
-          </el-tab-pane> -->
+          </el-tab-pane>
         </el-tabs>
       </el-col>
     </el-row>
@@ -755,6 +747,7 @@ export default {
     return {
       isNeedNewMenu: false, //是否需要新菜单
       filterDataEcho: "", //数据过滤回显数据
+      classificationDataEcho: "", //分类查询回显数据
       staictitle: "添加统计数据字段",
       isInputInvalid: false,
       // 修改表格时的menuId
@@ -1333,9 +1326,10 @@ export default {
         );
       }
     },
-
     // 拼接查询sql语句
     getSQLStr() {
+      let classificationData =
+        this.$refs.classificationQueryRef.getConditions(); //按钮中的查询条件
       let prefix = "{DBNAME}.";
       let sqlType = this.databaseType; //数据库类型
       let asOrSpace = sqlType == "oracle" ? " " : " AS ";
@@ -1568,6 +1562,26 @@ export default {
       //   }
       // });
     },
+
+    // 处理配置的条件查询按钮数据
+    getBtnData(searchArr = []) {
+      let classificationData =
+        this.$refs.classificationQueryRef.getConditions();
+      let res = searchArr
+        .map((item) => {
+          return {
+            conditionField: item,
+            conditionName: "超级查询",
+            conditionType: "SuperQuery",
+          };
+        })
+        .filter((item) => {
+          return !classificationData.some((v) => {
+            return v.conditionField == item.conditionField;
+          });
+        });
+      return [...res, ...classificationData];
+    },
     // 创建回调
     async createHandle() {
       // console.log(123);
@@ -1701,6 +1715,7 @@ export default {
             });
 
             // let isAsc = this.formData.isAsc == "ASC" ? 0 : 1;
+            let btnData = this.getBtnData(searchFieldList);
             let data = {
               conditionDefaultValueMap, //数据筛选条件
               tId: this.tId,
@@ -1714,7 +1729,8 @@ export default {
               sqlKey: this.tableKey,
               dtColumnName: columns, //列字段标题名称(存储显示字段信息
               timeFormat: this.formData.timeFormate,
-              searchFieldList: searchFieldList, //搜索字段数组
+              // searchFieldList: searchFieldList, //搜索字段数组
+              searchFieldList: btnData, //搜索字段数组
               tableSql: this.getSQLStr(), //  暂定
               tableExportField: tableExportField, //导出字段名及列名
               echoData: JSON.stringify(echoData),
@@ -1868,7 +1884,10 @@ export default {
           this.menus,
           {}
         );
-
+        //处理按钮回显数据
+        this.classificationDataEcho = res.data.searchFieldList.filter(
+          (item) => item.conditionType == "button"
+        );
         if (!this.formData.routePath) {
           this.$message.warning("该表格菜单路由已经删除,请重新配置");
           this.isNeedNewMenu = true;
@@ -2049,10 +2068,10 @@ export default {
   vertical-align: middle !important;
 }
 .menudata {
-  width: 30% !important;
+  width: 70% !important;
 }
 .edit {
-  width: 70% !important;
+  width: 30% !important;
 }
 .mb10 {
   margin-top: 10px;