feat:流程权限

src/views/interest/processPermission/components/process-list.vue

@@ -0,0 +1,51 @@
+<script setup lang="ts">
+import { ref, unref, watchEffect } from "vue";
+import { MOCK_PROCESS_DATA } from "../config/mock";
+
+const props = defineProps<{
+  currentRole: Record<string, string>;
+}>();
+
+const emit = defineEmits(["saveBtnClick"]);
+
+//所有的流程权限
+const list = ref<any>([...MOCK_PROCESS_DATA]);
+
+//角色拥有的流程权限
+const rule_process_list = ref([]);
+
+//刷新流程
+watchEffect(() => {
+  rule_process_list.value = ["89", "90"];
+  console.log(props);
+});
+
+function handleSave() {
+  emit("saveBtnClick", unref(rule_process_list));
+}
+</script>
+
+<template>
+  <ElScrollbar>
+    <template v-for="p in list" :key="p.id">
+      <div w-full v-if="p.child">
+        <p>{{ p.process_name }}</p>
+        <ElDivider border-style="dashed" m-0 />
+
+        <ElCheckboxGroup v-model="rule_process_list">
+          <ElCheckbox
+            v-for="(action, index) in p.child"
+            :key="index"
+            :label="action.id"
+            >{{ action.status_name }}</ElCheckbox
+          >
+        </ElCheckboxGroup>
+        <ElDivider />
+      </div>
+    </template>
+
+    <div flex justify-end pr-10 pb-5>
+      <ElButton @click="handleSave" type="primary" size="small">保存</ElButton>
+    </div>
+  </ElScrollbar>
+</template>

src/views/interest/processPermission/components/role-list.vue

@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import { onMounted, ref, unref } from "vue";
+import { httpList } from "/@/api/interest/role";
+import { useResponseHandle } from "/@/hooks";
+
+defineProps<{
+  currentRole: Record<string, string>;
+}>();
+
+const emit = defineEmits(["changeCurrentRole"]);
+
+const responseHandle = useResponseHandle();
+const list = ref<Array<Record<string, string>>>([]);
+
+async function requesetRoleList() {
+  const { code, data, message } = await httpList({
+    size: 100
+  });
+
+  responseHandle({
+    code,
+    message,
+    handler: () => {
+      list.value = data.list;
+      emit("changeCurrentRole", unref(list)[0]);
+    }
+  });
+}
+
+onMounted(() => requesetRoleList());
+</script>
+
+<template>
+  <ElScrollbar>
+    <div
+      class="px-1 py-0.5 m-1.5 hover:color-blue hover:bg-#f7f7f7 cursor-pointer duration-200"
+      :class="currentRole.id === role.id && 'color-blue bg-#f7f7f7'"
+      v-for="role in list"
+      :key="role.id"
+      @click="() => emit('changeCurrentRole', role)"
+    >
+      {{ role.role_name }}
+    </div>
+  </ElScrollbar>
+</template>

src/views/interest/processPermission/config/mock.ts

@@ -0,0 +1,487 @@
+export const MOCK_PROCESS_DATA = [
+  { id: "9", process_name: "采购工差单流程", process_type: "CGGCD" },
+  {
+    id: "2",
+    process_name: "采购单入库流程",
+    process_type: "RKD",
+    child: [
+      { id: "76", process_id: "2", order_process: "0", status_name: "待发货" },
+      {
+        id: "77",
+        process_id: "2",
+        order_process: "1",
+        status_name: "待库管验货"
+      },
+      {
+        id: "78",
+        process_id: "2",
+        order_process: "2",
+        status_name: "待仓库主管审核"
+      },
+      {
+        id: "79",
+        process_id: "2",
+        order_process: "3",
+        status_name: "待采购主管审核"
+      },
+      {
+        id: "81",
+        process_id: "2",
+        order_process: "5",
+        status_name: "待填写物流"
+      }
+    ]
+  },
+  {
+    id: "1",
+    process_name: "采购单流程",
+    process_type: "CGD",
+    child: [
+      {
+        id: "71",
+        process_id: "1",
+        order_process: "0",
+        status_name: "待与供应商确认"
+      }
+    ]
+  },
+  {
+    id: "20",
+    process_name: "有赞订单审核流程",
+    process_type: "YZQRD",
+    child: [
+      {
+        id: "111",
+        process_id: "20",
+        order_process: "2",
+        status_name: "待产品审核"
+      },
+      {
+        id: "113",
+        process_id: "20",
+        order_process: "4",
+        status_name: "待财务审核"
+      }
+    ]
+  },
+  {
+    id: "19",
+    process_name: "有赞商品上架流程",
+    process_type: "YZSX",
+    child: [
+      {
+        id: "108",
+        process_id: "19",
+        order_process: "0",
+        status_name: "待产品审核"
+      }
+    ]
+  },
+  {
+    id: "24",
+    process_name: "竞价单流程",
+    process_type: "ZXD",
+    child: [
+      {
+        id: "138",
+        process_id: "24",
+        order_process: "2",
+        status_name: "招标已结束"
+      },
+      {
+        id: "139",
+        process_id: "24",
+        order_process: "3",
+        status_name: "待选择商品"
+      },
+      {
+        id: "140",
+        process_id: "24",
+        order_process: "4",
+        status_name: "已选商品待下单"
+      },
+      {
+        id: "143",
+        process_id: "24",
+        order_process: "7",
+        status_name: "招标已暂停"
+      }
+    ]
+  },
+  {
+    id: "14",
+    process_name: "项目单流程",
+    process_type: "PRO",
+    child: [
+      {
+        id: "18",
+        process_id: "14",
+        order_process: "1",
+        status_name: "待商品反馈"
+      },
+      {
+        id: "20",
+        process_id: "14",
+        order_process: "3",
+        status_name: "待方案制定"
+      },
+      {
+        id: "22",
+        process_id: "14",
+        order_process: "5",
+        status_name: "项目待下单"
+      }
+    ]
+  },
+  {
+    id: "13",
+    process_name: "议价单流程",
+    process_type: "YJD",
+    child: [
+      {
+        id: "24",
+        process_id: "13",
+        order_process: "0",
+        status_name: "待业务审核"
+      },
+      {
+        id: "26",
+        process_id: "13",
+        order_process: "2",
+        status_name: "待财务专员审核"
+      },
+      {
+        id: "28",
+        process_id: "13",
+        order_process: "4",
+        status_name: "待财务主管审核"
+      },
+      {
+        id: "31",
+        process_id: "13",
+        order_process: "7",
+        status_name: "待boss审核"
+      }
+    ]
+  },
+  {
+    id: "10",
+    process_name: "销售工差单流程",
+    process_type: "XSGCD",
+    child: [
+      {
+        id: "40",
+        process_id: "10",
+        order_process: "1",
+        status_name: "待业务审核"
+      }
+    ]
+  },
+  {
+    id: "8",
+    process_name: "销售退货单流程",
+    process_type: "XSTHD",
+    child: [
+      {
+        id: "64",
+        process_id: "8",
+        order_process: "1",
+        status_name: "待业务审核"
+      },
+      {
+        id: "65",
+        process_id: "8",
+        order_process: "2",
+        status_name: "待专员审核"
+      },
+      {
+        id: "66",
+        process_id: "8",
+        order_process: "3",
+        status_name: "待主管审核"
+      }
+    ]
+  },
+  {
+    id: "7",
+    process_name: "售后退货单流程",
+    process_type: "CKTHD",
+    child: [
+      {
+        id: "60",
+        process_id: "7",
+        order_process: "1",
+        status_name: "退货商品验收"
+      },
+      {
+        id: "61",
+        process_id: "7",
+        order_process: "2",
+        status_name: "退货验收审核"
+      },
+      {
+        id: "62",
+        process_id: "7",
+        order_process: "3",
+        status_name: "退货业务审核"
+      }
+    ]
+  },
+  {
+    id: "6",
+    process_name: "售后申请单流程",
+    process_type: "SHD",
+    child: [
+      {
+        id: "51",
+        process_id: "6",
+        order_process: "1",
+        status_name: "待业务审核"
+      },
+      {
+        id: "52",
+        process_id: "6",
+        order_process: "2",
+        status_name: "待采购审核"
+      },
+      {
+        id: "53",
+        process_id: "6",
+        order_process: "3",
+        status_name: "待设置仓库"
+      },
+      {
+        id: "54",
+        process_id: "6",
+        order_process: "4",
+        status_name: "待客户退货"
+      }
+    ]
+  },
+  {
+    id: "5",
+    process_name: "发货申请单流程",
+    process_type: "CKD",
+    child: [
+      {
+        id: "47",
+        process_id: "5",
+        order_process: "1",
+        status_name: "待库管发货"
+      },
+      {
+        id: "48",
+        process_id: "5",
+        order_process: "2",
+        status_name: "已发货待收货"
+      }
+    ]
+  },
+  { id: "4", process_name: "销售订单流程", process_type: "XSQRD" },
+  {
+    id: "3",
+    process_name: "备货申请单流程",
+    process_type: "BHD",
+    child: [
+      {
+        id: "36",
+        process_id: "3",
+        order_process: "1",
+        status_name: "待采购反馈"
+      }
+    ]
+  },
+  {
+    id: "22",
+    process_name: "离职交接流程",
+    process_type: "LZJJ",
+    child: [
+      {
+        id: "131",
+        process_id: "22",
+        order_process: "0",
+        status_name: "发起审核流程"
+      },
+      {
+        id: "132",
+        process_id: "22",
+        order_process: "1",
+        status_name: "待离职交接审核"
+      }
+    ]
+  },
+  {
+    id: "17",
+    process_name: "活动流程",
+    process_type: "HD",
+    child: [
+      {
+        id: "94",
+        process_id: "17",
+        order_process: "0",
+        status_name: "待产品部审核"
+      },
+      {
+        id: "95",
+        process_id: "17",
+        order_process: "1",
+        status_name: "待采购定价"
+      },
+      {
+        id: "96",
+        process_id: "17",
+        order_process: "2",
+        status_name: "待财务定售价"
+      },
+      {
+        id: "97",
+        process_id: "17",
+        order_process: "3",
+        status_name: "待活动价审核"
+      }
+    ]
+  },
+  {
+    id: "16",
+    process_name: "商品上线流程",
+    process_type: "SPSX",
+    child: [
+      {
+        id: "11",
+        process_id: "16",
+        order_process: "2",
+        status_name: "待产品审核"
+      },
+      {
+        id: "12",
+        process_id: "16",
+        order_process: "3",
+        status_name: "待财务定价"
+      },
+      {
+        id: "13",
+        process_id: "16",
+        order_process: "4",
+        status_name: "待财务审核定价"
+      },
+      { id: "14", process_id: "16", order_process: "5", status_name: "待上线" }
+    ]
+  },
+  {
+    id: "15",
+    process_name: "商品成本流程",
+    process_type: "SPCB",
+    child: [
+      {
+        id: "1",
+        process_id: "15",
+        order_process: "0",
+        status_name: "新建待审核"
+      },
+      {
+        id: "3",
+        process_id: "15",
+        order_process: "2",
+        status_name: "基础修改待审核"
+      },
+      {
+        id: "4",
+        process_id: "15",
+        order_process: "3",
+        status_name: "成本修改待审核"
+      },
+      {
+        id: "5",
+        process_id: "15",
+        order_process: "4",
+        status_name: "基础修改驳回"
+      },
+      {
+        id: "6",
+        process_id: "15",
+        order_process: "5",
+        status_name: "成本修改驳回"
+      },
+      {
+        id: "7",
+        process_id: "15",
+        order_process: "6",
+        status_name: "新建审核驳回"
+      },
+      {
+        id: "8",
+        process_id: "15",
+        order_process: "7",
+        status_name: "复制商品待编辑"
+      },
+      {
+        id: "9",
+        process_id: "15",
+        order_process: "8",
+        status_name: "竞价商品待编辑"
+      }
+    ]
+  },
+  {
+    id: "12",
+    process_name: "盘点单流程",
+    process_type: "PDD",
+    child: [
+      {
+        id: "89",
+        process_id: "12",
+        order_process: "0",
+        status_name: "待发起流程"
+      },
+      {
+        id: "90",
+        process_id: "12",
+        order_process: "1",
+        status_name: "待上传盘点结果"
+      },
+      {
+        id: "91",
+        process_id: "12",
+        order_process: "2",
+        status_name: "待审核盘点结果"
+      }
+    ]
+  },
+  {
+    id: "11",
+    process_name: "调拨单流程",
+    process_type: "DBD",
+    child: [
+      {
+        id: "83",
+        process_id: "11",
+        order_process: "0",
+        status_name: "待发起流程"
+      },
+      {
+        id: "84",
+        process_id: "11",
+        order_process: "1",
+        status_name: "待入库方同意入库"
+      },
+      {
+        id: "85",
+        process_id: "11",
+        order_process: "2",
+        status_name: "待出库方发货"
+      },
+      {
+        id: "86",
+        process_id: "11",
+        order_process: "3",
+        status_name: "待入库方验货"
+      },
+      {
+        id: "87",
+        process_id: "11",
+        order_process: "4",
+        status_name: "待验货审核"
+      }
+    ]
+  }
+];

src/views/interest/processPermission/index.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import ProcessList from "./components/process-list.vue";
+import RoleList from "./components/role-list.vue";
+
+const currentRole = ref<Record<string, string>>({});
+
+function submit(actions: Array<string>) {
+  console.log(actions);
+}
+</script>
+
+<template>
+  <div class="main role">
+    <div class="flex justify-between h-[calc(100vh-90px)] bg-white">
+      <RoleList
+        min-w-200px
+        mr-5
+        :current-role="currentRole"
+        @change-current-role="role => (currentRole = role)"
+      />
+      <ProcessList
+        flex-1
+        :current-role="currentRole"
+        @save-btn-click="submit"
+      />
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+:deep(.el-dropdown-menu__item i) {
+  margin: 0;
+}
+</style>

src/views/search/standBook/detail.vue

@@ -15,28 +15,42 @@ const mapDetailToTop = ref<Map<string, any>>(new Map());
 
 const id = computed(() => query.id);
 
+const isDetail = (queryKey: string, report_data: Record<string, string>) => {
+  const responseKey = QUERY_MAP[queryKey].responseKey;
+
+  return (
+    report_data[responseKey] &&
+    QUERY_MAP[queryKey]?.detail &&
+    report_data[responseKey].length !== 0
+  );
+};
+
 //获取该台账单可以查询到的详情
 function getDetails(report_data) {
-  const isDetail = (queryKey: string) => {
-    const responseKey = QUERY_MAP[queryKey].responseKey;
-
-    return (
-      report_data[responseKey] &&
-      QUERY_MAP[queryKey]?.detail &&
-      report_data[responseKey].length !== 0
-    );
-  };
-
-  const detail_keys = Object.keys(QUERY_MAP).filter(isDetail);
-
-  return detail_keys.map(key => ({
-    component: QUERY_MAP[key].component,
-    prop: QUERY_MAP[key].requesetProp,
-    title: QUERY_MAP[key].detail,
-    api: QUERY_MAP[key].api,
-    value: report_data[QUERY_MAP[key].responseKey],
-    key
-  }));
+  const filter_keys = Object.keys(QUERY_MAP).filter(queryKey =>
+    isDetail(queryKey, report_data)
+  );
+
+  return filter_keys.map(key => {
+    const {
+      api,
+      component,
+      requesetProp: prop,
+      responseKey,
+      detail: title
+    } = QUERY_MAP[key];
+
+    const value = report_data[responseKey];
+
+    return {
+      component,
+      prop,
+      title,
+      api,
+      value,
+      key
+    };
+  });
 }
 
 async function requesetReportDetail() {
@@ -92,10 +106,7 @@ onMounted(() => initalPageData());
         >
           <component
             :is="detail.component"
-            :api="detail.api"
-            :prop="detail.prop"
-            :value="detail.value"
-            :title="detail.title"
+            v-bind="detail"
             @map-offset-top="
               ({ top, title }) => handleSetMapDetailToTop(top, title)
             "