提交自定义指令

fhKeeper/formulahousekeeper/customerBuler-crm/src/main.ts

@@ -11,15 +11,22 @@ import App from './App.vue'
 import router from './router/index'
 import * as echarts from 'echarts';
 import zhCn from "element-plus/dist/locale/zh-cn.mjs";
+import customize from '@/utils/customInstructions'
 const app = createApp(App)
 const pinia = createPinia()
 
 pinia.use(piniaPluginPersistedstate)
 
+// element-ui
 for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
   app.component(key, component)
 }
 
+// 注册自定义指令
+for (const [key, value] of Object.entries(customize)) {
+  app.directive(value.key, value.directive)
+}
+
 app.config.globalProperties.$echarts = echarts;
 app
   .use(ElementPlus, {

fhKeeper/formulahousekeeper/customerBuler-crm/src/pages/order/api.ts

@@ -7,20 +7,6 @@ export const GETGENERATEFOEM = `/sys-form/getListByCode${MOD}`
 export const GETALLPRODUCT = `/sys-form/getListByCode/Order`
 export const GETTABLELIST = `${MOD}/list`
 
-export function useBtn<T extends ()=>string>(fun: T) {
-    fun && fun();
-}
-
-export type ActionButton<Fun=(f:()=>void)=>void> = { text: string, event?:Fun  };
-export const actionButtons: ActionButton[] = [
-    { text: '新建订单', event: useBtn },
-    { text: '批量转移' },
-    { text: '批量删除' },
-    { text: '回收站' },
-    { text: '导入' },
-    { text: '导出' },
-]
-
 export const tableColumns: TableColumn[] = [
     { prop: 'orderCode', label: '订单编号', event: 'toDetali', width: '150' },
     { prop: 'orderName', label: '订单名称', width: '150' },
@@ -39,5 +25,4 @@ export const tableColumns: TableColumn[] = [
     { prop: 'inchargerName', label: '负责人', width: '200' },
     { prop: 'creatorName', label: '创建人', width: '200' },
     { prop: 'createTime', label: '创建时间', width: '200' },
-]
-
+]

fhKeeper/formulahousekeeper/customerBuler-crm/src/pages/order/index.vue

@@ -36,7 +36,12 @@
       <div class="bg-white w-full h-full p-3 shadow-md rounded-md flex flex-col">
         <div class="flex justify-end pb-3">
           <!-- 操作按钮 -->
-          <el-button v-for="(button, index) in actionButtons" :key="index" type="primary" @click="button.event && button.event(aabbcc)">{{ button.text }}</el-button>
+          <el-button v-permission="['aabbc']" type="primary">新建订单</el-button>
+          <el-button type="primary">批量转移</el-button>
+          <el-button type="primary">批量删除</el-button>
+          <el-button type="primary">回收站</el-button>
+          <el-button type="primary">导入</el-button>
+          <el-button type="primary">导出</el-button>
         </div>
         <div class="flex-1 w-full overflow-hidden">
           <!-- 表格 -->
@@ -74,7 +79,7 @@
 import { ref, reactive, onMounted, inject, defineExpose } from "vue";
 import { getAllListByCode, getFromValue, resetFromValue, getFirstDayOfMonth, getLastDayOfMonth, formatDate } from '@/utils/tools'
 import { post, get } from "@/utils/request";
-import { actionButtons, tableColumns, GETSYSFILED, GETPERSONNEL, GETGENERATEFOEM, MOD, GETTABLELIST, GETALLPRODUCT, useBtn } from "./api";
+import { tableColumns, GETSYSFILED, GETPERSONNEL, GETGENERATEFOEM, MOD, GETTABLELIST, GETALLPRODUCT } from "./api";
 import { useRouter, useRoute } from "vue-router";
 import { URL_FETALL } from "../customer/api";
 
@@ -185,15 +190,6 @@ function setFilterItems() {
   ]
 }
 
-function aabbcc() {
-  console.log('我被调用了')
-}
-
-// 向外暴露方法
-defineExpose({
-  aabbcc
-})
-
 onMounted(() => {
   getSystemField()
   getAllProduct()

fhKeeper/formulahousekeeper/customerBuler-crm/src/utils/customInstructions.ts

@@ -0,0 +1,33 @@
+import { Directive } from 'vue';
+
+// 权限控制
+const PermissionDirective: Directive = {
+    mounted(el: HTMLElement, binding: { value: string[] }, vnode: any) {
+        const routePath = vnode.ctx.appContext.config.globalProperties.$route.path;
+        console.log(extractPath(routePath))
+        // const currentRoute = getCurrentInstance()?.appContext.config.globalProperties.$route;
+        // console.log('Current Route:', currentRoute);
+
+        // const permissions = binding.value;
+        // if (!Array.isArray(permissions)) {
+        //     console.error('Permissions must be provided as an array.');
+        //     return;
+        // }
+        // if (!permissions.some((permission: string) => permission === 'admin')) {
+        //     el.parentNode && el.parentNode.removeChild(el)
+        // }
+    }
+};
+
+function extractPath(str: any) {
+    const startIndex = str.indexOf('/');
+    const endIndex = str.indexOf('/', startIndex + 1);
+    return str.slice(startIndex, endIndex !== -1 ? endIndex : undefined);
+}
+
+// 导出的自定义指令
+const customize = [
+    { key: 'permission', directive: PermissionDirective, name: '角色权限' }
+]
+
+export default customize;