zianxin/pj_admin_cloud
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix:框架bug

Browse Source
This commit is contained in:
dzc committed 2025-04-07 10:53:23 +08:00
1 parent d809ddb23e
commit e40cf86754
3 files changed
+173 -158
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/views/admin/system/dept/table-view.vue
+87 -87
View File
@@ -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>
src/views/admin/system/dept/tree-view.vue
+81 -66
View File
@@ -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>