344 lines
8.4 KiB
TypeScript
344 lines
8.4 KiB
TypeScript
import dayjs from "dayjs";
|
|
import editForm from "../form.vue";
|
|
import { handleTree } from "@/utils/tree";
|
|
import { message } from "@/utils/message";
|
|
import { ElMessageBox } from "element-plus";
|
|
import { usePublicHooks } from "../../hooks";
|
|
import { transformI18n } from "@/plugins/i18n";
|
|
import { addDialog } from "@/components/ReDialog";
|
|
import type { FormItemProps } from "../utils/types";
|
|
import type { PaginationProps } from "@pureadmin/table";
|
|
import { getKeyList, deviceDetection } from "@pureadmin/utils";
|
|
import {
|
|
getRoleList,
|
|
getRole,
|
|
addRole,
|
|
updateRole,
|
|
changeRoleStatus,
|
|
delRole,
|
|
getRoleMenuSelect
|
|
} from "@/api/system/role";
|
|
import { getMenuOption } from "@/api/system/menu";
|
|
|
|
import {
|
|
type Ref,
|
|
reactive,
|
|
ref,
|
|
onMounted,
|
|
h,
|
|
toRaw,
|
|
watch,
|
|
nextTick
|
|
} from "vue";
|
|
|
|
export function useRole(treeRef: Ref) {
|
|
const form = reactive({
|
|
roleName: "",
|
|
roleCode: "",
|
|
state: true,
|
|
skipCount: 1,
|
|
maxResultCount: 10
|
|
});
|
|
const curRow = ref();
|
|
const formRef = ref();
|
|
const dataList = ref([]);
|
|
const treeIds = ref([]);
|
|
const treeData = ref([]);
|
|
const isShow = ref(false);
|
|
const loading = ref(true);
|
|
const isLinkage = ref(false);
|
|
const treeSearchValue = ref();
|
|
const switchLoadMap = ref({});
|
|
const isExpandAll = ref(false);
|
|
const isSelectAll = ref(false);
|
|
const { switchStyle } = usePublicHooks();
|
|
const treeProps = {
|
|
value: "id",
|
|
label: "menuName",
|
|
children: "children"
|
|
};
|
|
const pagination = reactive<PaginationProps>({
|
|
total: 0,
|
|
pageSize: 10,
|
|
currentPage: 1,
|
|
background: true
|
|
});
|
|
const columns: TableColumnList = [
|
|
{
|
|
label: "角色编号",
|
|
prop: "id",
|
|
width: "300",
|
|
fixed: true
|
|
},
|
|
{
|
|
label: "角色名称",
|
|
prop: "roleName"
|
|
},
|
|
{
|
|
label: "角色标识",
|
|
prop: "roleCode"
|
|
},
|
|
{
|
|
label: "状态",
|
|
cellRenderer: scope => (
|
|
<el-switch
|
|
size={scope.props.size === "small" ? "small" : "default"}
|
|
loading={switchLoadMap.value[scope.index]?.loading}
|
|
v-model={scope.row.state}
|
|
active-value={true}
|
|
inactive-value={false}
|
|
active-text="已启用"
|
|
inactive-text="已停用"
|
|
inline-prompt
|
|
style={switchStyle.value}
|
|
onChange={() => onChange(scope as any)}
|
|
/>
|
|
),
|
|
minWidth: 90
|
|
},
|
|
{
|
|
label: "备注",
|
|
prop: "remark",
|
|
minWidth: 160
|
|
},
|
|
{
|
|
label: "创建时间",
|
|
prop: "creationTime",
|
|
minWidth: 160,
|
|
formatter: ({ creationTime }) =>
|
|
dayjs(creationTime).format("YYYY-MM-DD HH:mm:ss")
|
|
},
|
|
{
|
|
label: "操作",
|
|
fixed: "right",
|
|
width: 210,
|
|
slot: "operation"
|
|
}
|
|
];
|
|
|
|
async function onChange({ row, index }) {
|
|
ElMessageBox.confirm(
|
|
`确认要<strong>${
|
|
row.state === false ? "停用" : "启用"
|
|
}</strong><strong style='color:var(--el-color-primary)'>${
|
|
row.roleName
|
|
}</strong>吗?`,
|
|
"系统提示",
|
|
{
|
|
confirmButtonText: "确定",
|
|
cancelButtonText: "取消",
|
|
type: "warning",
|
|
dangerouslyUseHTMLString: true,
|
|
draggable: true
|
|
}
|
|
)
|
|
.then(async () => {
|
|
switchLoadMap.value[index] = Object.assign(
|
|
{},
|
|
switchLoadMap.value[index],
|
|
{
|
|
loading: true
|
|
}
|
|
);
|
|
|
|
await changeRoleStatus(row.id, row.state);
|
|
|
|
switchLoadMap.value[index] = Object.assign(
|
|
{},
|
|
switchLoadMap.value[index],
|
|
{
|
|
loading: false
|
|
}
|
|
);
|
|
message(`已${row.state === false ? "停用" : "启用"}${row.roleName}`, {
|
|
type: "success"
|
|
});
|
|
})
|
|
.catch(() => {
|
|
row.state === false ? (row.state = true) : (row.state = false);
|
|
});
|
|
}
|
|
|
|
async function handleDelete(row) {
|
|
await delRole([row.id]);
|
|
message(`您删除了角色名称为${row.roleName}的这条数据`, { type: "success" });
|
|
onSearch();
|
|
}
|
|
|
|
function handleSizeChange(val: number) {
|
|
form.maxResultCount = val;
|
|
onSearch();
|
|
}
|
|
|
|
function handleCurrentChange(val: number) {
|
|
form.skipCount = val;
|
|
onSearch();
|
|
}
|
|
|
|
function handleSelectionChange(val) {
|
|
console.log("handleSelectionChange", val);
|
|
}
|
|
|
|
async function onSearch() {
|
|
loading.value = true;
|
|
const { data } = await getRoleList(toRaw(form));
|
|
dataList.value = data.items;
|
|
pagination.total = data.totalCount;
|
|
loading.value = false;
|
|
}
|
|
const resetForm = formEl => {
|
|
if (!formEl) return;
|
|
formEl.resetFields();
|
|
onSearch();
|
|
};
|
|
|
|
async function openDialog(title = "新增", row?: FormItemProps) {
|
|
let data: any = null;
|
|
if (title == "修改") {
|
|
const response = await getRole(row?.id);
|
|
data = response.data;
|
|
}
|
|
addDialog({
|
|
title: `${title}角色`,
|
|
props: {
|
|
formInline: {
|
|
roleName: row?.roleName ?? "",
|
|
roleCode: row?.roleCode ?? "",
|
|
remark: row?.remark ?? "",
|
|
deptIds: data?.deptIds ?? [],
|
|
menuIds: data?.menuIds ?? [],
|
|
orderNum: data?.orderNum ?? 0,
|
|
dataScope: data?.dataScope ?? "ALL"
|
|
}
|
|
},
|
|
width: "40%",
|
|
draggable: true,
|
|
fullscreen: deviceDetection(),
|
|
fullscreenIcon: true,
|
|
closeOnClickModal: false,
|
|
contentRenderer: () => h(editForm, { ref: formRef }),
|
|
beforeSure: (done, { options }) => {
|
|
const FormRef = formRef.value.getRef();
|
|
const curData = options.props.formInline as FormItemProps;
|
|
function chores() {
|
|
message(`您${title}了角色名称为${curData.roleName}的这条数据`, {
|
|
type: "success"
|
|
});
|
|
done(); // 关闭弹框
|
|
onSearch(); // 刷新表格数据
|
|
}
|
|
FormRef.validate(async valid => {
|
|
if (valid) {
|
|
// 表单规则校验通过
|
|
if (title === "新增") {
|
|
// 实际开发先调用新增接口，再进行下面操作
|
|
await addRole(curData);
|
|
chores();
|
|
} else {
|
|
// 实际开发先调用修改接口，再进行下面操作
|
|
await updateRole(row?.id, curData);
|
|
chores();
|
|
}
|
|
}
|
|
});
|
|
}
|
|
});
|
|
}
|
|
|
|
/** 菜单权限 */
|
|
async function handleMenu(row?: any) {
|
|
const { id } = row;
|
|
if (id) {
|
|
curRow.value = (await getRole(id)).data;
|
|
curRow.value.menuIds = (await getRoleMenuSelect(id)).data.map(m => m.id);
|
|
isShow.value = true;
|
|
nextTick(async () => {
|
|
treeRef.value.setCheckedKeys(curRow.value.menuIds);
|
|
});
|
|
} else {
|
|
curRow.value = null;
|
|
isShow.value = false;
|
|
}
|
|
}
|
|
|
|
/** 高亮当前权限选中行 */
|
|
function rowStyle({ row: { id } }) {
|
|
return {
|
|
cursor: "pointer",
|
|
background: id === curRow.value?.id ? "var(--el-fill-color-light)" : ""
|
|
};
|
|
}
|
|
|
|
/** 菜单权限-保存 */
|
|
async function handleSave() {
|
|
const { id, roleName } = curRow.value;
|
|
curRow.value.menuIds = treeRef.value.getCheckedKeys();
|
|
// 根据用户 id 调用实际项目中菜单权限修改接口
|
|
await updateRole(id, curRow.value);
|
|
|
|
message(`角色名称为${roleName}的菜单权限修改成功`, {
|
|
type: "success"
|
|
});
|
|
}
|
|
|
|
/** 数据权限 可自行开发 */
|
|
// function handleDatabase() {}
|
|
|
|
const onQueryChanged = (query: string) => {
|
|
treeRef.value!.filter(query);
|
|
};
|
|
|
|
const filterMethod = (query: string, node) => {
|
|
return transformI18n(node.title)!.includes(query);
|
|
};
|
|
|
|
onMounted(async () => {
|
|
onSearch();
|
|
const data = (await getMenuOption()).data.items;
|
|
treeIds.value = getKeyList(data, "id");
|
|
treeData.value = handleTree(data);
|
|
});
|
|
|
|
watch(isExpandAll, val => {
|
|
val
|
|
? treeRef.value.setExpandedKeys(treeIds.value)
|
|
: treeRef.value.setExpandedKeys([]);
|
|
});
|
|
|
|
watch(isSelectAll, val => {
|
|
val
|
|
? treeRef.value.setCheckedKeys(treeIds.value)
|
|
: treeRef.value.setCheckedKeys([]);
|
|
});
|
|
|
|
return {
|
|
form,
|
|
isShow,
|
|
curRow,
|
|
loading,
|
|
columns,
|
|
rowStyle,
|
|
dataList,
|
|
treeData,
|
|
treeProps,
|
|
isLinkage,
|
|
pagination,
|
|
isExpandAll,
|
|
isSelectAll,
|
|
treeSearchValue,
|
|
onSearch,
|
|
resetForm,
|
|
openDialog,
|
|
handleMenu,
|
|
handleSave,
|
|
handleDelete,
|
|
filterMethod,
|
|
transformI18n,
|
|
onQueryChanged,
|
|
// handleDatabase,
|
|
handleSizeChange,
|
|
handleCurrentChange,
|
|
handleSelectionChange
|
|
};
|
|
}
|