模板页面搜索框下方按钮渲染组件初步搭建

zkqy-ui/src/views/tablelist/commonTable/BtnMenuList.vue

@@ -0,0 +1,169 @@
+<template>
+  <div class="myDiv">
+    <el-button
+      v-for="(btn, index) in btnObj"
+      :key="index"
+      type="primary"
+      size="mini"
+      @click="handleClick(btn)"
+      >{{ btn.btnName }}</el-button
+    >
+  </div>
+</template>
+
+<script>
+import { camelCase, toUnderline } from "@/utils";
+export default {
+  name: "BtnMenuList",
+  components: {},
+  props: ["listAll", "row"],
+  data() {
+    return {};
+  },
+  computed: {
+    btnObj() {
+      let tempListAll = {
+        createBy: "kjjt01",
+        createById: 245,
+        createTime: "2024-03-13 11:38:56",
+        updateBy: "kjjt01",
+        updateById: 245,
+        updateTime: "2024-03-13 11:49:11",
+        remark: null,
+        id: 20,
+        btnParentId: 0,
+        ancestorsId: "0",
+        btnKey: "7e15fc67-baf5-4738-baa2-26068c6c318c",
+        btnGroupName: "请假-表单组-操作按钮",
+        btnName: "操作",
+        btnType: "DIRECTORY",
+        btnIcon: "bpmn-icon-end-event-none",
+        btnFormKey: null,
+        btnFormType: "noNeed",
+        btnProcessKey: "",
+        btnTableKey: "",
+        btnScriptKey: "",
+        btnTableFormGroupKey: null,
+        btnShowCondition: "",
+        btnParams: '{"commonFieldData":[],"conditionData":[]}',
+        btnHasPermi: "",
+        btnSort: 0,
+        delFlag: "0",
+        children: [
+          {
+            createBy: "kjjt01",
+            createById: 245,
+            createTime: "2024-03-13 11:50:14",
+            updateBy: null,
+            updateById: null,
+            updateTime: null,
+            remark: null,
+            id: 21,
+            btnParentId: 20,
+            ancestorsId: "0,20",
+            btnKey: "396dddb3-8911-48cb-a45e-1936f2f315d6",
+            btnGroupName: "",
+            btnName: "新增",
+            btnType: "INSERT",
+            btnIcon: "bpmn-icon-end-event-escalation",
+            btnFormKey: "4249005d-a019-40c3-b328-8238ec234405",
+            btnFormType: "dragFormGroup",
+            btnProcessKey: "",
+            btnTableKey: "",
+            btnScriptKey: "",
+            btnTableFormGroupKey: null,
+            btnShowCondition: "",
+            btnParams:
+              '{"commonFieldData":[],"conditionData":[{"fieldName":"ask_for_leave.id","fieldValue":""}]}',
+            btnHasPermi: "",
+            btnSort: 0,
+            delFlag: "0",
+            children: [],
+          },
+          {
+            createBy: "kjjt01",
+            createById: 245,
+            createTime: "2024-03-13 13:27:56",
+            updateBy: "kjjt01",
+            updateById: 245,
+            updateTime: "2024-03-13 13:49:46",
+            remark: null,
+            id: 22,
+            btnParentId: 20,
+            ancestorsId: "0,20",
+            btnKey: "7eac1646-ca1d-4bdc-8cfc-faf4d0caae32",
+            btnGroupName: "",
+            btnName: "提交审批",
+            btnType: "INITIATED",
+            btnIcon: "bpmn-icon-default-flow",
+            btnFormKey: "4249005d-a019-40c3-b328-8238ec234405",
+            btnFormType: "noNeed",
+            btnProcessKey: "Process_1709551271265",
+            btnTableKey: "",
+            btnScriptKey: "",
+            btnTableFormGroupKey: null,
+            btnShowCondition: "",
+            btnParams:
+              '{"commonFieldData":[{"fieldName":"ask_for_leave.data_approval_status","fieldValue":"1"}],"conditionData":[{"fieldName":"ask_for_leave.id","fieldValue":""}]}',
+            btnHasPermi: "",
+            btnSort: 0,
+            delFlag: "0",
+            children: [],
+          },
+        ],
+      };
+      // let btnObj = JSON.parse(JSON.stringify(this.listAll));
+      let btnObj = JSON.parse(JSON.stringify(tempListAll));
+      let rootRes = this.isHiddenBtn(this.row, btnObj.btnShowCondition);
+      if (rootRes) return null;
+      btnObj.children = btnObj.children.filter((item) => {
+        return !this.isHiddenBtn(this.row, item.btnShowCondition);
+      });
+      return btnObj.children;
+    },
+  },
+  methods: {
+    // 判断按钮是否隐藏
+    isHiddenBtn(row, condition) {
+      if (!condition || condition.length == 0) return false;
+      let con = JSON.parse(condition);
+      let res = con.some((item) => {
+        return this.judgeBtnHandler(row, item);
+      });
+      return res;
+    },
+    judgeBtnHandler(row, con) {
+      let { fieldName, refValue, mark } = con;
+      let realyFieldName = camelCase(fieldName.replace(".", "_"));
+      switch (mark) {
+        case "1":
+          return row[realyFieldName] > refValue;
+        case "2":
+          return row[realyFieldName] < refValue;
+        case "3":
+          return row[realyFieldName] == refValue;
+        case "4":
+          return row[realyFieldName] >= refValue;
+        case "5":
+          return row[realyFieldName] <= refValue;
+        case "6":
+          return row[realyFieldName] != refValue;
+        default:
+          return true;
+      }
+    },
+    clickHandler(btnData, row) {
+      this.$emit("excuteHandler", btnData, row);
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.myDiv {
+  padding: 5px;
+  box-sizing: border-box;
+}
+.pre-icon {
+  margin-right: 5px;
+}
+</style>