fix:框架bug

2025-04-07 10:53:23 +08:00
1 parent d809ddb23e
commit e40cf86754
@@ -1,56 +1,56 @@
 <template>
-  <el-table
-      ref="tableRef"
-      :data="state.dataList"
-      v-loading="state.loading"
-      style="width: 100%"
-      row-key="id"
-      default-expand-all
-      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
-      border
-      :cell-style="tableStyle.cellStyle"
-      :header-cell-style="tableStyle?.headerCellStyle"
-  >
-    <el-table-column :label="$t('sysdept.name')" prop="name" width="400" show-overflow-tooltip></el-table-column>
-    <el-table-column :label="$t('sysdept.weight')" prop="weight" show-overflow-tooltip width="80"></el-table-column>
-    <el-table-column prop="createTime" :label="$t('sysdept.createTime')" show-overflow-tooltip></el-table-column>
-    <el-table-column :label="$t('common.action')" show-overflow-tooltip width="250">
-      <template #default="scope">
-        <el-button text type="primary" icon="folder-add" @click="deptDialogRef.openDialog('add', scope.row?.id)"
-                   v-auth="'sys_dept_add'">
-          {{ $t('common.addBtn') }}
-        </el-button
-        >
-        <el-button text type="primary" icon="edit-pen" @click="deptDialogRef.openDialog('edit', scope.row?.id)"
-                   v-auth="'sys_dept_edit'">{{
-            $t('common.editBtn')
-          }}
-        </el-button>
-        <el-button text type="primary" icon="delete" @click="handleDelete(scope.row)" v-auth="'sys_dept_del'">
-          {{ $t('common.delBtn') }}
-        </el-button
-        >
-      </template>
-    </el-table-column>
-  </el-table>
-  <dept-form ref="deptDialogRef" @refresh="getDataList()"/>
+	<el-table
+		ref="tableRef"
+		:data="state.dataList"
+		v-loading="state.loading"
+		style="width: 100%"
+		row-key="id"
+		default-expand-all
+		:tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
+		border
+		:cell-style="tableStyle.cellStyle"
+		:header-cell-style="tableStyle?.headerCellStyle"
+	>
+		<el-table-column :label="$t('sysdept.name')" prop="name" width="400" show-overflow-tooltip></el-table-column>
+		<el-table-column :label="$t('sysdept.weight')" prop="weight" show-overflow-tooltip width="80"></el-table-column>
+		<el-table-column prop="createTime" :label="$t('sysdept.createTime')" show-overflow-tooltip></el-table-column>
+		<el-table-column
+			:label="$t('common.action')"
+			v-auths="['sys_dept_add', 'sys_dept_edit', 'sys_dept_del']"
+			show-overflow-tooltip
+			width="250"
+		>
+			<template #default="scope">
+				<el-button text type="primary" icon="folder-add" @click="deptDialogRef.openDialog('add', scope.row?.id)" v-auth="'sys_dept_add'">
+					{{ $t("common.addBtn") }}
+				</el-button>
+				<el-button text type="primary" icon="edit-pen" @click="deptDialogRef.openDialog('edit', scope.row?.id)" v-auth="'sys_dept_edit'"
+					>{{ $t("common.editBtn") }}
+				</el-button>
+				<el-button text type="primary" icon="delete" @click="handleDelete(scope.row)" v-auth="'sys_dept_del'">
+					{{ $t("common.delBtn") }}
+				</el-button>
+			</template>
+		</el-table-column>
+	</el-table>
+	<dept-form ref="deptDialogRef" @refresh="getDataList()" />
 </template>

 <script setup lang="ts" name="systemDept">
-import {BasicTableProps, useTable} from '/@/hooks/table';
-import {deptTree, delObj} from '/@/api/admin/dept';
-import {useMessage, useMessageBox} from '/@/hooks/message';
-import {useI18n} from 'vue-i18n';
+import { BasicTableProps, useTable } from "/@/hooks/table"
+import { deptTree, delObj } from "/@/api/admin/dept"
+import { useMessage, useMessageBox } from "/@/hooks/message"
+import { useI18n } from "vue-i18n"

 // 引入组件
-const DeptForm = defineAsyncComponent(() => import('./form.vue'));
-const {t} = useI18n();
+const DeptForm = defineAsyncComponent(() => import("./form.vue"))
+const { t } = useI18n()
 // 定义变量内容
-const tableRef = ref(); // 表格引用
-const deptDialogRef = ref(); // 部门对话框引用
-const excelUploadRef = ref(); // Excel上传引用
-const showSearch = ref(true); // 是否显示搜索栏
-const isExpand = ref(false); // 是否展开
+const tableRef = ref() // 表格引用
+const deptDialogRef = ref() // 部门对话框引用
+const excelUploadRef = ref() // Excel上传引用
+const showSearch = ref(true) // 是否显示搜索栏
+const isExpand = ref(false) // 是否展开

 /**
 * 查询部门树方法，返回 Promise 对象
@@ -58,34 +58,34 @@ const isExpand = ref(false); // 是否展开
 * @returns Promise&lt;any&gt;
 */
 const queryDeptTree = (params?: any) => {
-  return deptTree(params);
-};
+	return deptTree(params)
+}

 /**
 * 定义响应式表格数据
 */
 const state: BasicTableProps = reactive<BasicTableProps>({
-  pageList: queryDeptTree, // 页面列表数据
-  queryForm: {
-    deptName: '', // 部门名称
-  },
-  isPage: false, // 是否分页
-  descs: ['create_time'], // 排序字段
-});
+	pageList: queryDeptTree, // 页面列表数据
+	queryForm: {
+		deptName: "", // 部门名称
+	},
+	isPage: false, // 是否分页
+	descs: ["create_time"], // 排序字段
+})

 /**
 * 使用 useTable 定义表格相关操作
 */
-const {getDataList, tableStyle} = useTable(state);
+const { getDataList, tableStyle } = useTable(state)

 /**
 * 展开/折叠部门树方法
 */
 const handleExpand = async () => {
-  isExpand.value = !isExpand.value;
-  const dataList = await deptTree();
-  toggleExpand(dataList.data, isExpand.value);
-};
+	isExpand.value = !isExpand.value
+	const dataList = await deptTree()
+	toggleExpand(dataList.data, isExpand.value)
+}

 /**
 * 递归方法，用于展开/折叠部门树
@@ -93,45 +93,45 @@ const handleExpand = async () => {
 * @param unfold - 是否展开
 */
 const toggleExpand = (children: any[], unfold = true) => {
-  for (const key in children) {
-    tableRef.value?.toggleRowExpansion(children[key], unfold);
-    if (children[key].children) {
-      toggleExpand(children[key].children!, unfold);
-    }
-  }
-};
+	for (const key in children) {
+		tableRef.value?.toggleRowExpansion(children[key], unfold)
+		if (children[key].children) {
+			toggleExpand(children[key].children!, unfold)
+		}
+	}
+}

 /**
 * 删除当前行
 * @param row - 当前行数据
 */
 const handleDelete = async (row: any) => {
-  try {
-    await useMessageBox().confirm(t('common.delConfirmText'));
-  } catch {
-    return;
-  }
+	try {
+		await useMessageBox().confirm(t("common.delConfirmText"))
+	} catch {
+		return
+	}

-  try {
-    await delObj(row.id);
-    getDataList();
-    useMessage().success(t('common.delSuccessText'));
-  } catch (err: any) {
-    useMessage().error(err.msg);
-  }
-};
+	try {
+		await delObj(row.id)
+		getDataList()
+		useMessage().success(t("common.delSuccessText"))
+	} catch (err: any) {
+		useMessage().error(err.msg)
+	}
+}

-const handleAdd = ()=>{
-  deptDialogRef.value.openDialog('add')
+const handleAdd = () => {
+	deptDialogRef.value.openDialog("add")
 }

 /**
 * 暴露组件中的一些方法和变量
 */
 defineExpose({
-  handleAdd, // 新增时间
-  state, // 响应式表格数据
-  getDataList, // 获取列表数据方法
-  handleExpand // 展开/折叠部门树方法
-});
+	handleAdd, // 新增时间
+	state, // 响应式表格数据
+	getDataList, // 获取列表数据方法
+	handleExpand, // 展开/折叠部门树方法
+})
 </script>
@@ -5,7 +5,7 @@
 			:props="props"
 			:data="data"
 			:label-style="style"
-			:define-menus="defineMenus"
+			:define-menus="getMenus()"
 			:default-expand-level="expandLevel"
 			center
 			:horizontal="horizontal"
@@ -23,53 +23,54 @@
 </template>

 <script lang="ts" name="treeView" setup>
-import { useMessage, useMessageBox } from '/@/hooks/message';
-import { delObj, deptTree } from '/@/api/admin/dept';
-import { getObj } from '/@/api/admin/tenant';
-import { Session } from '/@/utils/storage';
-import { useI18n } from 'vue-i18n';
-import { storeToRefs } from 'pinia';
-import { useThemeConfig } from '/@/stores/themeConfig';
+import { useMessage, useMessageBox } from "/@/hooks/message"
+import { delObj, deptTree } from "/@/api/admin/dept"
+import { getObj } from "/@/api/admin/tenant"
+import { Session } from "/@/utils/storage"
+import { useI18n } from "vue-i18n"
+import { storeToRefs } from "pinia"
+import { useThemeConfig } from "/@/stores/themeConfig"
+import { auth } from "/@/utils/authFunction"

-const DeptForm = defineAsyncComponent(() => import('./form.vue'));
+const DeptForm = defineAsyncComponent(() => import("./form.vue"))

-const { t } = useI18n();
+const { t } = useI18n()

 // 定义org组件key-value定义
-const props = reactive({ id: 'id', pid: 'parentId', label: 'name', expand: 'expand', children: 'children' });
-const data = reactive({});
+const props = reactive({ id: "id", pid: "parentId", label: "name", expand: "expand", children: "children" })
+const data = reactive({})

 // 定义org组件右键定义
 const defineMenus = reactive([
-	{ name: t('sysdept.addNodeText'), command: 'add' },
-	{ name: t('sysdept.editNodeText'), command: 'edit' },
-	{ name: t('sysdept.delNodeText'), command: 'delete' },
-]);
+	{ name: t("sysdept.addNodeText"), command: "add" },
+	{ name: t("sysdept.editNodeText"), command: "edit" },
+	{ name: t("sysdept.delNodeText"), command: "delete" },
+])

-const cloneNodeDrag = ref(true);
-const collapsable = ref(false);
-const expandLevel = ref(2); //默认展开层级
-const horizontal = ref(false);
-const onlyOneNode = ref(false);
-const treeOrgRef = ref();
-const deptDialogRef = ref();
+const cloneNodeDrag = ref(true)
+const collapsable = ref(false)
+const expandLevel = ref(2) //默认展开层级
+const horizontal = ref(false)
+const onlyOneNode = ref(false)
+const treeOrgRef = ref()
+const deptDialogRef = ref()

 // 添加主题配置
-const themeConfig = useThemeConfig();
-const { themeConfig: theme } = storeToRefs(themeConfig);
+const themeConfig = useThemeConfig()
+const { themeConfig: theme } = storeToRefs(themeConfig)

 // 添加 style 定义
 const style = computed(() => ({
-	background: theme.value.isDark ? 'var(--el-bg-color-overlay)' : 'var(--el-bg-color-page)',
-	color: theme.value.isDark ? 'var(--el-text-color-primary)' : '#5e6d82',
-}));
+	background: theme.value.isDark ? "var(--el-bg-color-overlay)" : "var(--el-bg-color-page)",
+	color: theme.value.isDark ? "var(--el-text-color-primary)" : "#5e6d82",
+}))

 /**
 * 过滤节点
 */
 const filter = (deptName: string) => {
-	treeOrgRef.value.filter(deptName);
-};
+	treeOrgRef.value.filter(deptName)
+}

 /**
 * 节点过滤方法
@@ -78,16 +79,30 @@ const filter = (deptName: string) => {
 * @returns {boolean} 返回过滤结果
 */
 const filterNodeMethod = (value, data) => {
-	if (!value) return true;
-	return data.label.indexOf(value) !== -1;
-};
+	if (!value) return true
+	return data.label.indexOf(value) !== -1
+}
+
+const getMenus = () => {
+	const menus = []
+	if (auth("sys_dept_add")) {
+		menus.push({ name: t("sysdept.addNodeText"), command: "add" })
+	}
+	if (auth("sys_dept_edit")) {
+		menus.push({ name: t("sysdept.editNodeText"), command: "edit" })
+	}
+	if (auth("sys_dept_del")) {
+		menus.push({ name: t("sysdept.delNodeText"), command: "delete" })
+	}
+	return menus
+}

 /**
 * 处理展开/折叠树
 */
 const handleExpand = async () => {
-	collapsable.value = !collapsable.value;
-};
+	collapsable.value = !collapsable.value
+}

 /**
 * 检查节点是否是根租户节点
@@ -95,20 +110,20 @@ const handleExpand = async () => {
 * @returns {boolean} 如果节点是根租户节点，返回true；否则返回false
 */
 const checkNode = (node) => {
-	if (node?.id === '0') {
-		useMessage().error(t('sysdept.tenantNodeErrorText'));
-		return false;
+	if (node?.id === "0") {
+		useMessage().error(t("sysdept.tenantNodeErrorText"))
+		return false
 	}
-	return true;
-};
+	return true
+}

 /**
 * 当用户左键点击节点，模拟触发组件的右键事件
 * @param e
 */
 const onNodeClick = (e: any) => {
-	const { clientX, clientY } = e;
-	const rightFun = new MouseEvent('contextmenu', {
+	const { clientX, clientY } = e
+	const rightFun = new MouseEvent("contextmenu", {
 		bubbles: true,
 		cancelable: false,
 		view: window,
@@ -116,17 +131,17 @@ const onNodeClick = (e: any) => {
 		buttons: 0,
 		clientX,
 		clientY,
-	});
-	e.target.dispatchEvent(rightFun);
-};
+	})
+	e.target.dispatchEvent(rightFun)
+}

 /**
 * 添加部门
 * @param {object} node 节点对象
 */
 const addNode = (node) => {
-	deptDialogRef.value.openDialog('add', node?.id);
-};
+	deptDialogRef.value.openDialog("add", node?.id)
+}

 /**
 * 编辑部门
@@ -134,10 +149,10 @@ const addNode = (node) => {
 */
 const editNode = (node) => {
 	if (!checkNode(node)) {
-		return;
+		return
 	}
-	deptDialogRef.value.openDialog('edit', node?.id);
-};
+	deptDialogRef.value.openDialog("edit", node?.id)
+}

 /**
 * 删除部门
@@ -145,46 +160,46 @@ const editNode = (node) => {
 */
 const delNode = async (node) => {
 	if (!checkNode(node)) {
-		return;
+		return
 	}

 	try {
-		await useMessageBox().confirm(t('common.delConfirmText'));
+		await useMessageBox().confirm(t("common.delConfirmText"))
 	} catch {
-		return;
+		return
 	}

 	try {
-		await delObj(node.id);
-		await getOrgData();
-		useMessage().success(t('common.delSuccessText'));
+		await delObj(node.id)
+		await getOrgData()
+		useMessage().success(t("common.delSuccessText"))
 	} catch (err: any) {
-		useMessage().error(err.msg);
+		useMessage().error(err.msg)
 	}
-};
+}

 /**
 * 查询部门数据
 */
 const getOrgData = async () => {
 	// 查询当前租户信息
-	const tenant = await getObj(Session.getTenant());
+	const tenant = await getObj(Session.getTenant())
 	deptTree().then((res) => {
-		Object.assign(data, { id: '0', name: tenant.data.name });
-		data.children = res.data;
-	});
-};
+		Object.assign(data, { id: "0", name: tenant.data.name })
+		data.children = res.data
+	})
+}

 onMounted(() => {
-	getOrgData();
-});
+	getOrgData()
+})

 // 暴露变量
 defineExpose({
 	getOrgData,
 	handleExpand,
 	filter,
-});
+})
 </script>

 <style lang="scss" scoped>
@@ -69,11 +69,11 @@
 							type="primary"
 							v-auth="'hard_hardAfterSale_edit'"
 							@click="formDialogRef.openDialog(row.id)"
-							>编辑</el-button
-						>
-						<el-button v-if="false" icon="delete" text type="primary" v-auth="'hard_hardAfterSale_del'" @click="handleDelete([row.id])"
-							>删除</el-button
-						>
+							>编辑
+						</el-button>
+						<el-button v-if="false" icon="delete" text type="primary" v-auth="'hard_hardAfterSale_del'" @click="handleDelete([row.id])">
+							删除
+						</el-button>
 					</template>
 				</el-table-column>
 			</el-table>