操作列的条件渲染/按钮的基础功能实现/解决样式渲染与修改表格出现的冲突

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

@@ -500,6 +500,7 @@ 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 { node } from "@/components/updateModule/k-form-design/lib/k-form-design.common";
 
 export default {
   name: "ExcuteBtnMange",
@@ -639,12 +640,12 @@ export default {
     },
     /** 转换菜单数据结构 */
     normalizer(node) {
-      if (node.children && !node.children.length) {
-        delete node.children;
-      }
+      // if (node.children && !node.children.length) {
+      //   delete node.children;
+      // }
       return {
         id: node.id,
-        label: node.btnGroupName,
+        label: node.btnName,
         children: node.children,
       };
     },
@@ -653,13 +654,39 @@ export default {
       listBtn({ ...this.queryParams, isEnablePaging: false }).then(
         (response) => {
           this.menuOptions = [];
-          const btnTemp = { id: 0, btnGroupName: "新建按钮组", children: [] };
-          btnTemp.children.push(...response.rows);
+          const btnTemp = {
+            id: 0,
+            btnGroupName: "新建按钮组",
+            btnName: "新建按钮组",
+            children: [],
+            btnType: 6,
+          };
+
+          let _this = this;
+          let res = response.rows.filter((node) => _this.getAllMenuList(node));
+          btnTemp.children.push(...res);
+          console.log(btnTemp);
 
           this.menuOptions.push(btnTemp);
         }
       );
     },
+    // 只保留目录
+    getAllMenuList(node) {
+      // 如果当前节点的btnType等于6，则保留该节点，否则删除该节点
+      if (node.btnType == 6) {
+        if (Array.isArray(node.children) && node.children.length != 0) {
+          // 递归遍历子节点，并删除所有btnType不等于6的子节点
+          let _this = this;
+          node.children = node.children.filter((child) =>
+            _this.getAllMenuList(child)
+          );
+        }
+        return node;
+      } else {
+        return false;
+      }
+    },
     // 取消按钮
     cancel() {
       this.open = false;
@@ -696,15 +723,18 @@ export default {
     },
     /** 新增按钮操作 */
     handleAdd(row) {
+      this.title = "新增按钮";
       this.reset();
       this.getTreeselect();
 
       this.editType = row ? true : false;
       if (row != null && row.id) {
+        //在已知节点下新增
         this.btnGroupFormData.btnParentId = row.id;
       } else {
         this.btnGroupFormData.btnParentId = 0;
       }
+      console.log(this.btnGroupFormData.btnParentId);
       this.open = true;
       this.title = "添加按钮组";
     },

ruoyi-ui/src/views/tablelist/commonTable/BtnMenu.vue

@@ -0,0 +1,74 @@
+<template>
+  <div class="myDiv">
+    <el-dropdown trigger="click" :hide-on-click="false">
+      <span class="el-dropdown-link">
+        <el-button v-if="btnObj.btnParentId == 0" type="warning"
+          ><span
+            ><svg-icon
+              class="pre-icon"
+              v-if="btnObj.btnIcon"
+              slot="prefix"
+              :icon-class="btnObj.btnIcon" />{{ btnObj.btnName }}
+            <i class="el-icon-arrow-down el-icon--right"></i></span
+        ></el-button>
+        <span v-else>
+          <span
+            ><svg-icon
+              class="pre-icon"
+              v-if="btnObj.btnIcon"
+              slot="prefix"
+              :icon-class="btnObj.btnIcon" />{{ btnObj.btnName }}
+            <i class="el-icon-arrow-down el-icon--right"></i
+          ></span>
+        </span>
+      </span>
+      <el-dropdown-menu slot="dropdown">
+        <template v-for="item in btnObj.children">
+          <el-dropdown-item v-if="item.children.length == 0"
+            ><span @click="clickHandler(item, row)"
+              ><svg-icon
+                v-if="item.btnIcon"
+                class="pre-icon"
+                slot="prefix"
+                :icon-class="item.btnIcon"
+              />{{ item.btnName }}</span
+            ></el-dropdown-item
+          >
+          <el-dropdown-item v-else>
+            <Menu
+              :listAll="item"
+              :row="row"
+              @excuteHandler="clickHandler"
+            ></Menu>
+          </el-dropdown-item>
+        </template>
+      </el-dropdown-menu>
+    </el-dropdown>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Menu",
+  components: {},
+  props: ["listAll", "row"],
+  data() {
+    return {};
+  },
+  computed: {
+    btnObj() {
+      return this.listAll;
+    },
+  },
+  methods: {
+    clickHandler(btnData, row) {
+      this.$emit("excuteHandler", btnData, row);
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.pre-icon {
+  margin-right: 5px;
+}
+</style>

ruoyi-ui/src/views/tablelist/commonTable/listInfo.vue

@@ -208,36 +208,19 @@
         </template>
       </el-table-column>
       <el-table-column
+        v-show="isShowExcuteCol"
         label="操作"
         align="center"
         class-name="small-padding fixed-width"
       >
         <template slot-scope="scope">
-          <el-dropdown>
-            <el-button type="warning" plain size="small">
-              处理<i class="el-icon-arrow-down el-icon--right"></i>
-            </el-button>
-            <el-dropdown-menu slot="dropdown">
-              <el-dropdown-item>
-                <el-button
-                  size="mini"
-                  type="text"
-                  icon="el-icon-edit"
-                  @click="handleUpdate(scope.row)"
-                  >修改
-                </el-button>
-              </el-dropdown-item>
-              <el-dropdown-item>
-                <el-button
-                  size="mini"
-                  type="text"
-                  icon="el-icon-delete"
-                  @click="handleDelete(scope.row)"
-                  >删除
-                </el-button>
-              </el-dropdown-item>
-            </el-dropdown-menu>
-          </el-dropdown>
+          <Menu
+            :row="scope.row"
+            v-for="btnObj in excuteBtnArr"
+            :key="btnObj.id"
+            :listAll="btnObj"
+            @excuteHandler="excuteHandler"
+          ></Menu>
         </template>
       </el-table-column>
     </el-table>
@@ -288,10 +271,11 @@ import { getToken } from "@/utils/auth";
 import Queryfrom from "@/views/tablelist/commonTable/queryfrom.vue";
 import { camelCase } from "@/utils";
 import { inputDisableComplete } from "@/utils/other";
+import Menu from "./BtnMenu.vue";
 
 export default {
   name: "listInfo",
-  components: { Queryfrom },
+  components: { Queryfrom, Menu },
   data() {
     return {
       // 遮罩层
@@ -376,6 +360,8 @@ export default {
       styleList: [],
       // 字典样式对象
       dictStyleObj: {},
+      // 操作列 按钮数据
+      excuteBtnArr: [],
     };
   },
 
@@ -391,6 +377,12 @@ export default {
       deep: true,
     },
   },
+  computed: {
+    isShowExcuteCol() {
+      // return true;
+      return !this.excuteBtnArr?.every((arr) => arr.children.length == 0);
+    },
+  },
   methods: {
     /** 查询列表 */
     getList(queryParams) {
@@ -409,6 +401,8 @@ export default {
             );
             return item;
           });
+          // 获取操作列的按钮数据
+          this.excuteBtnArr = res.data.resultMap.button;
           // console.log('res', this.templateInfo)
           this.queryParams.orderByColumn =
             res.data.resultMap.querySql.orderByColumn;
@@ -576,13 +570,38 @@ export default {
         });
       });
     },
+    longestCommonSubstring(strs) {
+      if (!strs || strs.includes("")) return "";
+      let str1_Length = strs[0].length;
+      let str_Nums = strs.length;
+      let flag = 0;
+      for (let i = 0; i < str1_Length && flag == 0; i++) {
+        let char = strs[0][i];
+        for (var j = 1; j < str_Nums; j++) {
+          if (char !== strs[j][i] || i == strs[j].length) {
+            return strs[1].substring(0, i);
+          }
+        }
+      }
+      return strs[0];
+    },
+
     /** 修改按钮操作 */
     handleUpdate(row) {
+      console.log(row);
       getInfoBySqlKey(this.templateInfo.template.sqlKey).then(({ data }) => {
         if (!data || !data.dfVueTemplate) {
           this.$message.error("当前表格未绑定表单!");
           return;
         }
+        // let fieldList = Object.keys(row);
+        // let tableName = this.longestCommonSubstring(fieldList);
+        // fieldList.forEach((field) => {
+        //   let realField = field.replace(tableName, "");
+        //   realField = realField[0].toLocaleLowerCase() + realField.substring(1);
+        //   row[realField] = row[field];
+        // });
+        this.addRealFieldName(row);
         Object.assign(this.defaultValue, row);
         this.jsonData = JSON.parse(data.dfVueTemplate);
         this.open = true;
@@ -606,6 +625,16 @@ export default {
         this.form.password = "";
       });
     },
+    // 添加真正的字段名
+    addRealFieldName(row) {
+      let fieldList = Object.keys(row);
+      let tableName = this.longestCommonSubstring(fieldList);
+      fieldList.forEach((field) => {
+        let realField = field.replace(tableName, "");
+        realField = realField[0].toLocaleLowerCase() + realField.substring(1);
+        row[realField] = row[field];
+      });
+    },
 
     /** 提交按钮 */
     submitForm: function () {
@@ -634,6 +663,7 @@ export default {
     handleDelete(row) {
       let delIds = this.ids;
       let primary = camelCase(this.templateInfo.template?.primaryKey);
+      this.addRealFieldName(row);
       if (row[primary] != undefined && row[primary] != null) {
         delIds = [];
         delIds.push(row[primary]);
@@ -909,6 +939,40 @@ export default {
         });
       });
     },
+
+    // 内链页面跳转
+    routerHandler(link, type) {
+      console.log(link);
+      if (type == "3") {
+        this.$router.push(link);
+      } else {
+        window.open("http://" + link, "_blank");
+      }
+    },
+
+    // 操作列回调
+    excuteHandler(btnData, row) {
+      console.log(btnData, row);
+      let { btnType, btnParams } = btnData;
+      switch (
+        btnType //3:内链  6:目录  7:外链  8:修改  9:删除
+      ) {
+        case "3":
+          this.routerHandler(btnParams, btnType);
+          break;
+        case "7":
+          this.routerHandler(btnParams, btnType);
+          break;
+        case "8":
+          this.handleUpdate(row);
+          break;
+        case "9":
+          this.handleDelete(row);
+          break;
+        default:
+          break;
+      }
+    },
   },
 };
 </script>