解决按钮管理,图标不显示问题

zkqy-ui/src/views/system/excuteBtnMange/index.vue

@@ -30,13 +30,11 @@
           icon="el-icon-search"
           size="mini"
           @click="handleQuery"
-        >搜索
-        </el-button
-        >
+          >搜索
+        </el-button>
         <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
-        >重置
-        </el-button
-        >
+          >重置
+        </el-button>
       </el-form-item>
     </el-form>
 
@@ -49,9 +47,8 @@
           size="mini"
           @click="handleAdd"
           v-hasPermi="['system:menu:add']"
-        >新增
-        </el-button
-        >
+          >新增
+        </el-button>
       </el-col>
       <el-col :span="1.5">
         <el-button
@@ -60,9 +57,8 @@
           icon="el-icon-sort"
           size="mini"
           @click="toggleExpandAll"
-        >展开/折叠
-        </el-button
-        >
+          >展开/折叠
+        </el-button>
       </el-col>
       <el-col :span="1.5">
         <el-radio-group
@@ -97,7 +93,7 @@
       ></el-table-column>
       <el-table-column prop="btnIcon" label="图标" align="center" width="100">
         <template v-if="scope.row.btnIcon" slot-scope="scope">
-          <svg-icon :icon-class="scope.row.btnIcon"/>
+          <svg-icon :icon-class="scope.row.btnIcon" />
         </template>
       </el-table-column>
       <el-table-column
@@ -129,45 +125,36 @@
               处理<i class="el-icon-arrow-down el-icon--right"></i>
             </el-button>
             <el-dropdown-menu slot="dropdown">
-              <el-dropdown-item
-              >
+              <el-dropdown-item>
                 <el-button
                   size="mini"
                   type="text"
                   icon="el-icon-edit"
                   @click="handleUpdate(scope.row)"
                   v-hasPermi="['system:menu:edit']"
-                >修改
-                </el-button
-                >
-              </el-dropdown-item
-              >
-              <el-dropdown-item v-if="scope.row.btnType == 'DIRECTORY'"
-              >
+                  >修改
+                </el-button>
+              </el-dropdown-item>
+              <el-dropdown-item v-if="scope.row.btnType == 'DIRECTORY'">
                 <el-button
                   size="mini"
                   type="text"
                   icon="el-icon-plus"
                   @click="handleAdd(scope.row)"
                   v-hasPermi="['system:menu:add']"
-                >新增
-                </el-button
-                >
-              </el-dropdown-item
-              >
-              <el-dropdown-item
-              >
+                  >新增
+                </el-button>
+              </el-dropdown-item>
+              <el-dropdown-item>
                 <el-button
                   size="mini"
                   type="text"
                   icon="el-icon-delete"
                   @click="handleDelete(scope.row)"
                   v-hasPermi="['system:menu:remove']"
-                >删除
-                </el-button
-                >
-              </el-dropdown-item
-              >
+                  >删除
+                </el-button>
+              </el-dropdown-item>
             </el-dropdown-menu>
           </el-dropdown>
 
@@ -247,25 +234,36 @@
           </el-col>
           <el-col :span="12">
             <el-form-item label="按钮图标" prop="btnIcon">
-              <el-popover
-                placement="bottom"
-                width="450"
-                trigger="click">
-                  <span slot="reference" style="display:inline-block;width:200px;height:40px;line-height:40px;">
-                                    <el-input
-                                      :prefix-icon="btnGroupFormData.icon"
-                                      slot="reference"
-                                      v-model="btnGroupFormData.icon"
-                                      placeholder="点击选择图标"
-                                      readonly></el-input>
-                  </span>
+              <el-popover placement="bottom" width="450" trigger="click">
+                <span
+                  slot="reference"
+                  style="
+                    display: inline-block;
+                    width: 200px;
+                    height: 40px;
+                    line-height: 40px;
+                  "
+                >
+                  <el-input
+                    :prefix-icon="btnGroupFormData.btnIcon"
+                    slot="reference"
+                    v-if="iconShow"
+                    v-model="btnGroupFormData.btnIcon"
+                    placeholder="点击选择图标"
+                    readonly
+                  ></el-input>
+                </span>
                 <div class="iconList">
-                  <i v-for="item in iconList" :key="item" :class="item" @click="setIcon(item)"
-                     style="font-size:20px"></i>
+                  <i
+                    v-for="item in iconList"
+                    :key="item"
+                    :class="item"
+                    @click="setIcon(item)"
+                    style="font-size: 20px"
+                  ></i>
                 </div>
               </el-popover>
 
-
               <!--              <el-popover-->
               <!--                placement="bottom-start"-->
               <!--                width="460"-->
@@ -543,7 +541,8 @@
                       : "query"
                   }}参数</span
                 > -->
-                <el-divider content-position="center">{{
+                <el-divider content-position="center"
+                  >{{
                     btnGroupFormData.btnType != "OUTLINK" &&
                     btnGroupFormData.btnType != "INNERLINK"
                       ? "默认修改字段"
@@ -571,15 +570,15 @@
                           :value="item.tableName + '.' + item.key"
                         >
                           <span class="descibe" style="float: left">{{
-                              item.value
-                            }}</span>
+                            item.value
+                          }}</span>
                           <span
                             style="
                               float: right;
                               color: #8492a6;
                               font-size: 13px;
                             "
-                          >{{ item.tableName + "." + item.key }}</span
+                            >{{ item.tableName + "." + item.key }}</span
                           >
                         </el-option>
                       </el-select>
@@ -626,7 +625,7 @@
                         type="danger"
                         icon="el-icon-delete"
                         @click="deleteFilterItem(scope.$index)"
-                      >删除
+                        >删除
                       </el-button>
                     </template>
                   </el-table-column>
@@ -666,11 +665,11 @@
                       :value="item.tableName + '.' + item.key"
                     >
                       <span class="descibe" style="float: left">{{
-                          item.value
-                        }}</span>
+                        item.value
+                      }}</span>
                       <span
                         style="float: right; color: #8492a6; font-size: 13px"
-                      >{{ item.tableName + "." + item.key }}</span
+                        >{{ item.tableName + "." + item.key }}</span
                       >
                     </el-option>
                   </el-select>
@@ -717,7 +716,7 @@
                     type="danger"
                     icon="el-icon-delete"
                     @click="deleteConditionItem(scope.$index)"
-                  >删除
+                    >删除
                   </el-button>
                 </template>
               </el-table-column>
@@ -755,11 +754,11 @@
                       :value="item.tableName + '.' + item.key"
                     >
                       <span class="descibe" style="float: left">{{
-                          item.value
-                        }}</span>
+                        item.value
+                      }}</span>
                       <span
                         style="float: right; color: #8492a6; font-size: 13px"
-                      >{{ item.tableName + "." + item.key }}</span
+                        >{{ item.tableName + "." + item.key }}</span
                       >
                     </el-option>
                   </el-select>
@@ -812,7 +811,7 @@
                     type="danger"
                     icon="el-icon-delete"
                     @click="deleteBtnHidenCondition(scope.$index)"
-                  >删除
+                    >删除
                   </el-button>
                 </template>
               </el-table-column>
@@ -847,27 +846,27 @@ import {
   delBtn,
   checkBtn,
 } from "@/api/system/btn";
-import {listForm} from "@/api/dragform/form";
-import {listProcess} from "@/api/bpmprocess/process";
-import {listTable} from "@/api/dragform/tableList";
-import {listScript} from "@/api/bpmprocess/process";
+import { listForm } from "@/api/dragform/form";
+import { listProcess } from "@/api/bpmprocess/process";
+import { listTable } from "@/api/dragform/tableList";
+import { listScript } from "@/api/bpmprocess/process";
 import Treeselect from "@riophae/vue-treeselect";
 import "@riophae/vue-treeselect/dist/vue-treeselect.css";
 import IconSelect from "@/components/IconSelect";
-import {v4 as uuidv4} from "uuid";
-import {dragTableInfo} from "@/api/tablelist/commonTable";
-import {camelCase} from "@/utils";
-import {listFormGroup} from "@/api/system/formGroup";
-
-import {elementIcons} from '@/utils/icon'
+import { v4 as uuidv4 } from "uuid";
+import { dragTableInfo } from "@/api/tablelist/commonTable";
+import { camelCase } from "@/utils";
+import { listFormGroup } from "@/api/system/formGroup";
 
+import { elementIcons } from "@/utils/icon";
 
 export default {
   name: "ExcuteBtnMange",
   dicts: ["sys_show_hide", "sys_normal_disable"],
-  components: {Treeselect, IconSelect},
+  components: { Treeselect, IconSelect },
   data() {
     return {
+      iconShow: true,
       chooseIcons: "",
       iconList: [],
       // 顶部按钮 start
@@ -908,12 +907,12 @@ export default {
       // 表单校验
       rules: {
         btnParentId: [
-          {required: true, message: "上级按钮不能为空", trigger: "change"},
+          { required: true, message: "上级按钮不能为空", trigger: "change" },
         ],
         btnGroupName: [
-          {required: true, message: "按钮组名不能为空", trigger: "blur"},
+          { required: true, message: "按钮组名不能为空", trigger: "blur" },
         ],
-        btnSort: [{required: true, message: "排序不能为空", trigger: "blur"}],
+        btnSort: [{ required: true, message: "排序不能为空", trigger: "blur" }],
         btnType: [
           {
             required: true,
@@ -1084,7 +1083,7 @@ export default {
     };
   },
   created() {
-    this.iconList = elementIcons
+    this.iconList = elementIcons;
   },
   mounted() {
     this.getList();
@@ -1188,8 +1187,12 @@ export default {
   },
   methods: {
     setIcon(val) {
-      console.log(val)
-      this.btnGroupFormData.icon = val;//将i的样式设为选中的样式el-icon-xxx
+      console.log(val);
+      this.btnGroupFormData.btnIcon = val; //将i的样式设为选中的样式el-icon-xxx
+      this.iconShow = false;
+      this.$nextTick(() => {
+        this.iconShow = true;
+      });
       // this.chooseIcons = ""
     },
     // tab切换回调
@@ -1198,7 +1201,7 @@ export default {
     },
     // 自定义字段校验
     checkBtnFormKey(rule, value, callback) {
-      let {btnType} = this.btnGroupFormData;
+      let { btnType } = this.btnGroupFormData;
       console.log(btnType);
       if (btnType == "INSERT" || btnType == "UPDATE") {
         if (!value) {
@@ -1209,7 +1212,7 @@ export default {
       callback();
     },
     checkBtnProcessKey(rule, value, callback) {
-      let {btnType} = this.btnGroupFormData;
+      let { btnType } = this.btnGroupFormData;
       console.log(btnType);
       if (btnType == "EXECUTE" || btnType == "INITIATED") {
         if (!value) {
@@ -1219,7 +1222,7 @@ export default {
       callback();
     },
     checkBtnScriptKey(rule, value, callback) {
-      let {btnType} = this.btnGroupFormData;
+      let { btnType } = this.btnGroupFormData;
       console.log(btnType);
       if (btnType == "EXECUTE") {
         if (!value) {
@@ -1279,11 +1282,11 @@ export default {
     },
     // 获取根节点绑定表格的字段数据
     async getRootFieldInfo(btnKey) {
-      let res = await checkBtn({btnKey});
+      let res = await checkBtn({ btnKey });
       if (res.code == 200) {
         if (res.rows[0]?.tableKey) {
           let tableInfo = await dragTableInfo({
-            queryMap: {tableKey: res.rows[0].tableKey},
+            queryMap: { tableKey: res.rows[0].tableKey },
           });
           this.rootFieldInfo.fieldList = this.columnsHandler(
             JSON.parse(tableInfo.data.resultMap.template.spare)
@@ -1307,7 +1310,7 @@ export default {
         return resArr;
       }
       resArr = columns.map((item) => {
-        let {fieldName, fieldDescription, tableName} = item;
+        let { fieldName, fieldDescription, tableName } = item;
         return {
           key: fieldName,
           value: fieldDescription,
@@ -1366,7 +1369,7 @@ export default {
     },
     /** 查询菜单下拉树结构 */
     getTreeselect() {
-      listBtn({...this.queryParams, isEnablePaging: false}).then(
+      listBtn({ ...this.queryParams, isEnablePaging: false }).then(
         (response) => {
           this.menuOptions = [];
           const btnTemp = {
@@ -1471,7 +1474,7 @@ export default {
       //在已知节点下新增
       await this.getRootFieldInfo(row.rootKey);
       getBtn(row.id).then((response) => {
-        let {btnType, btnParams, btnShowCondition} = response.data;
+        let { btnType, btnParams, btnShowCondition } = response.data;
         if ((btnType == "OUTLINK" || btnType == "INNERLINK") && btnParams) {
           //内链或外链
           let tempObj = JSON.parse(btnParams);
@@ -1608,14 +1611,13 @@ export default {
           this.getList();
           this.$modal.msgSuccess("删除成功");
         })
-        .catch(() => {
-        });
+        .catch(() => {});
     },
     // 初始化表单辅助数据
     async initFormSubData() {
       try {
         //获取表单选项数据
-        let formRes = await listForm({isEnablePaging: false});
+        let formRes = await listForm({ isEnablePaging: false });
         if (formRes.code == 200) {
           formRes.rows.forEach((item) => {
             item.fId = item.fId.toString();
@@ -1631,7 +1633,7 @@ export default {
           this.$message.error("网络异常请稍后再试");
         }
         // 获取流程选项数据
-        let processRes = await listProcess({isEnablePaging: false});
+        let processRes = await listProcess({ isEnablePaging: false });
         if (processRes.code == 200) {
           this.processOptions = [
             ...processRes.rows,
@@ -1644,21 +1646,21 @@ export default {
           this.$message.error("网络异常请稍后再试");
         }
         // 获取表格选项数据
-        let TableRes = await listTable({isEnablePaging: false});
+        let TableRes = await listTable({ isEnablePaging: false });
         if (TableRes.code == 200) {
           this.tableOptions = TableRes.rows;
         } else {
           this.$message.error("网络异常请稍后再试");
         }
         // 获取脚本选项数据
-        let scriptRes = await listScript({isEnablePaging: false});
+        let scriptRes = await listScript({ isEnablePaging: false });
         if (scriptRes.code == 200) {
           this.scriptOptions = scriptRes.rows;
         } else {
           this.$message.error("网络异常请稍后再试");
         }
         // 获取表单组列表
-        let formGroupRes = await listFormGroup({isEnablePaging: false});
+        let formGroupRes = await listFormGroup({ isEnablePaging: false });
         if (formGroupRes.code == 200) {
           this.groupFormOptions = formGroupRes.rows.map((item) => {
             return {
@@ -1687,7 +1689,6 @@ export default {
 };
 </script>
 <style scoped lang="scss" scoped>
-
 .iconList {
   width: 400px;
   height: 300px;
@@ -1702,7 +1703,7 @@ export default {
     height: 45px;
     color: #000000;
     font-size: 20px;
-    border: 1px solid #E6E6E6;
+    border: 1px solid #e6e6e6;
     border-radius: 4px;
     cursor: pointer;
     text-align: center;