From 6227519a1bd9007aedae11b77b0b3b1851837c38 Mon Sep 17 00:00:00 2001
From: 闫增涛 <1829501689@qq.com>
Date: 星期四, 03 七月 2025 14:41:04 +0800
Subject: [PATCH] 仿真测试页面，模型三位投影模块布局1修改
---
src/views/system/index.vue | 614 +++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 608 insertions(+), 6 deletions(-)
diff --git a/src/views/system/index.vue b/src/views/system/index.vue
index a13528e..549cc7d 100644
--- a/src/views/system/index.vue
+++ b/src/views/system/index.vue
@@ -1,16 +1,618 @@
<template>
<div class="pageContainer">
- <div class="menuBox">
- <treeMenu :menuItem="menuItem"/>
+ <div class="menuBox" v-if="$route.name == 'userManage'">
+ <div class="btnGroup">
+ <el-dropdown>
+ <el-icon class="icon1"><FolderAdd /></el-icon>
+ <template #dropdown>
+ <el-dropdown-menu>
+ <el-dropdown-item @click="addBtn('parent')"
+ >鏈烘瀯</el-dropdown-item
+ >
+ <el-dropdown-item
+ @click="addBtn('child')"
+ :disabled="dataPath?.type !== 'ModelOrg'"
+ >閮ㄩ棬</el-dropdown-item
+ >
+ </el-dropdown-menu>
+ </template>
+ </el-dropdown>
+ <el-icon class="icon2" @click="editBtn"><Edit /></el-icon>
+ <el-icon class="icon3" @click="delBtn"><Delete /></el-icon>
+ </div>
+ <div class="treeBox">
+ <el-tree
+ ref="treeRef"
+ :key="treeKey"
+ :props="defaultProps"
+ :highlight-current="true"
+ @node-click="handleNodeClick"
+ :current-node-key="currentNodeKey"
+ node-key="key"
+ :data="treeData"
+ :load="loadNode"
+ :expand-on-click-node="false"
+ lazy
+ />
+ </div>
</div>
+ <div class="menuBox" v-if="$route.name == 'roleManage'">
+ <div class="btnGroup">
+ <el-icon class="icon1" @click="addRoleBtn"><FolderAdd /></el-icon>
+ <el-icon class="icon2" @click="editRoleBtn"><Edit /></el-icon>
+ <el-icon class="icon3" @click="delRoleBtn"><Delete /></el-icon>
+ </div>
+ <div class="treeBox">
+ <el-tree
+ ref="treeRef"
+ :key="roleTreeKey"
+ :props="defaultProps"
+ :highlight-current="true"
+ @node-click="handleRoleNodeClick"
+ :current-node-key="currentRoleNodeKey"
+ node-key="key"
+ :data="roleTreeData"
+ :expand-on-click-node="false"
+ />
+ </div>
+ </div>
+ <el-dialog
+ v-model="dialogFormVisible"
+ :title="dialogTitle"
+ width="500"
+ @close="closeDialog(formRef)"
+ >
+ <el-form
+ :model="form"
+ ref="formRef"
+ :rules="formRules"
+ label-width="140px"
+ >
+ <el-form-item label="鍚嶇О" prop="name">
+ <el-input
+ v-model="form.name"
+ autocomplete="off"
+ placeholder="璇疯緭鍏�"
+ style="width: 240px"
+ />
+ </el-form-item>
+ <el-form-item label="缂栫爜" prop="refCode">
+ <el-input
+ v-model="form.refCode"
+ autocomplete="off"
+ placeholder="璇疯緭鍏�"
+ style="width: 240px"
+ />
+ </el-form-item>
+ <el-form-item label="鎻忚堪">
+ <el-input
+ v-model="form.description"
+ style="width: 240px"
+ :rows="2"
+ type="textarea"
+ placeholder="璇疯緭鍏�"
+ />
+ </el-form-item>
+ </el-form>
+ <template #footer>
+ <div class="dialog-footer">
+ <el-button @click="closeDialog(formRef)">鍙栨秷</el-button>
+ <el-button type="primary" @click="submitBtn(formRef)">
+ 纭畾
+ </el-button>
+ </div>
+ </template>
+ </el-dialog>
+ <el-dialog
+ v-model="roleDialogVisible"
+ :title="roleDialog"
+ @close="closeRoleDialog(roleFormRef)"
+ width="500"
+ >
+ <el-form
+ :model="roleForm"
+ ref="roleFormRef"
+ :rules="roleFormRules"
+ label-width="140px"
+ >
+ <el-form-item label="鍚嶇О" prop="name">
+ <el-input
+ v-model="roleForm.name"
+ autocomplete="off"
+ placeholder="璇疯緭鍏�"
+ style="width: 240px"
+ />
+ </el-form-item>
+ <el-form-item label="鎻忚堪">
+ <el-input
+ v-model="roleForm.description"
+ style="width: 240px"
+ :rows="2"
+ type="textarea"
+ placeholder="璇疯緭鍏�"
+ />
+ </el-form-item>
+ </el-form>
+ <template #footer>
+ <div class="dialog-footer">
+ <el-button @click="closeRoleDialog(roleFormRef)">鍙栨秷</el-button>
+ <el-button type="primary" @click="submitRoleBtn(roleFormRef)">
+ 纭畾
+ </el-button>
+ </div>
+ </template>
+ </el-dialog>
<div class="contentBox"><RouterView /></div>
</div>
</template>
<script setup lang="ts">
-import { ref} from "vue";
-import treeMenu from "@/components/treeMenu.vue";
-const menuItem = ref('systemManage')
+import { ElMessage, ElMessageBox, FormInstance, FormRules } from "element-plus";
+import { inject, onMounted, onUnmounted, reactive, ref, watch } from "vue";
+const MG: any = inject("MG");
+const config: any = inject("config");
+const defaultProps = {
+ children: "children",
+ label: "label",
+ isLeaf: "leaf",
+ key: "key",
+};
+const treeData = ref([]);
+const roleTreeData = ref([]);
+const treeRef = ref(null);
+const currentNodeKey = ref(1);
+const currentRoleNodeKey = ref(1);
+const dialogFormVisible = ref(false);
+const roleDialogVisible = ref(false);
+const dialogTitle = ref();
+const roleDialog = ref();
+const formRef = ref<FormInstance>();
+const roleFormRef = ref<FormInstance>();
+const dataPath = ref();
+const treeKey = ref(0);
+const roleTreeKey = ref(0);
+const searchKeyword = ref("");
+const form = reactive({
+ name: "",
+ refCode: "",
+ description: "",
+});
+const roleForm = reactive({
+ name: "",
+ description: "",
+});
+interface formInfo {
+ name: string;
+ refCode: string;
+}
+import { curStoreInfo } from "@/store/index";
+import { useRoute } from "vue-router";
+const seleStore = curStoreInfo();
+const formRules = reactive<FormRules<formInfo>>({
+ name: [{ required: true, message: "鍚嶇О涓嶈兘涓虹┖", trigger: "blur" }],
+ refCode: [{ required: true, message: "缂栫爜涓嶈兘涓虹┖", trigger: "blur" }],
+});
+const roleFormRules = reactive<FormRules<formInfo>>({
+ name: [{ required: true, message: "鍚嶇О涓嶈兘涓虹┖", trigger: "blur" }],
+});
+
+const route = useRoute();
+watch(
+ () => route,
+ (newRoute) => {
+ console.log("璺敱鍙樺寲:", newRoute.name);
+ // 澶勭悊璺敱鍙樺寲閫昏緫
+ if (newRoute.name == "roleManage") {
+ getRoleList();
+ }
+ },
+ { deep: true }
+);
+
+import emitter from "../eventBus";
+
+onMounted(() => {
+ emitter.on("refreshTree", getRoleList);
+});
+
+onUnmounted(() => {
+ emitter.off("refreshTree", getRoleList); // 娓呯悊鐩戝惉锛岄伩鍏嶅唴瀛樻硠婕�
+});
+const getRoleList = async () => {
+ const res = await MG.dps5.GetOrgManageRoleList({
+ orgId: seleStore.OrgInfo.id,
+ });
+ const fomartData = handleTreeData(res, null, false);
+ roleTreeData.value = fomartData;
+ currentRoleNodeKey.value = fomartData[0].key;
+ seleStore.setCurSelectRole(fomartData[0].data);
+};
+
+//鏂板瑙掕壊
+const addRoleBtn = () => {
+ roleDialogVisible.value = true;
+ roleDialog.value = "鏂板缓瑙掕壊";
+};
+//缂栬緫瑙掕壊
+const editRoleBtn = () => {
+ console.log(seleStore.curSelectRole, "curSelectRole");
+ roleForm.name = seleStore.curSelectRole.name;
+ roleForm.description = seleStore.curSelectRole.description;
+ roleDialogVisible.value = true;
+ roleDialog.value = "缂栬緫瑙掕壊";
+};
+//鍒犻櫎瑙掕壊
+const delRoleBtn = async () => {
+ ElMessageBox.confirm("鏄惁鍒犻櫎褰撳墠瑙掕壊", "鍒犻櫎瑙掕壊", {
+ confirmButtonText: "纭",
+ cancelButtonText: "鍙栨秷",
+ type: "warning",
+ })
+ .then(async () => {
+ const data = {
+ roleIds: [seleStore.curSelectRole.id],
+ };
+ const res = await MG.dps5.DelRole(data);
+ getRoleList();
+ if (res) {
+ ElMessage({
+ type: "success",
+ message: "鍒犻櫎鎴愬姛",
+ });
+ }
+ })
+ .catch(() => {});
+};
+
+const handleSearch = () => {};
+const showCreateDialog = () => {};
+
+//鎻愪氦瑙掕壊琛ㄥ崟
+const submitRoleBtn = async (formEl: FormInstance | undefined) => {
+ if (!formEl) return;
+ await formEl.validate(async (valid, fields) => {
+ if (valid) {
+ if (roleDialog.value == "鏂板缓瑙掕壊") {
+ const body = {
+ ...roleForm,
+ icon: "",
+ appLinks: [config.appId],
+ departmentLinks: [],
+ orgLinks: [
+ {
+ appId: config.appId,
+ orgId: seleStore.OrgInfo.id,
+ },
+ ],
+ state: "Normal",
+ type: "User",
+ };
+ const res = await MG.dps5.NewRole(body);
+ if (res) {
+ roleDialogVisible.value = false;
+ getRoleList();
+ formEl.resetFields();
+ }
+ ElMessage({
+ type: "success",
+ message: "鏂板缓鎴愬姛",
+ });
+ } else {
+ const body = {
+ ...roleForm,
+ icon: "",
+ roleId: seleStore.curSelectRole.id,
+ state: "Normal",
+ type: "Normal",
+ };
+ const res = await MG.dps5.UpdateRole(body);
+ if (res) {
+ roleDialogVisible.value = false;
+ getRoleList();
+ formEl.resetFields();
+ ElMessage({
+ type: "success",
+ message: "缂栬緫鎴愬姛",
+ });
+ }
+ }
+ }
+ });
+};
+
+const submitBtn = async (formEl: FormInstance | undefined) => {
+ if (!formEl) return;
+ await formEl.validate(async (valid, fields) => {
+ if (valid) {
+ if (dialogTitle.value == "鏂板缓鏈烘瀯") {
+ const body = {
+ name: form.name,
+ refCode: form.refCode + "_ModelOrg",
+ description: form.description,
+ icon: "",
+ isEnable: true,
+ state: "Visible",
+ type: "ModelOrg",
+ };
+ const res = await MG.dps5.NewOrg(body);
+ console.log(res, "res");
+ if (res) {
+ ElMessage({
+ message: "鏂板缓鏈烘瀯鎴愬姛",
+ type: "success",
+ });
+ formEl.resetFields();
+ treeKey.value += 1;
+
+ dialogFormVisible.value = false;
+ }
+ } else if (dialogTitle.value == "鏂板缓閮ㄩ棬") {
+ const body = {
+ name: form.name,
+ refCode: form.refCode + "_ModelDep",
+ description: form.description,
+ isEnable: true,
+ state: "Normal",
+ type: "Normal",
+ parentId: "",
+ orgId: dataPath.value.id,
+ };
+ const res = await MG.dps5.NewDepartment(body);
+ if (res) {
+ ElMessage({
+ message: "鏂板缓閮ㄩ棬鎴愬姛",
+ type: "success",
+ });
+ formEl.resetFields();
+ treeKey.value += 1;
+
+ dialogFormVisible.value = false;
+ }
+ } else if (dialogTitle.value == "缂栬緫鏈烘瀯") {
+ const body = {
+ name: form.name,
+ refCode: form.refCode + "_ModelOrg",
+ description: form.description,
+ icon: "",
+ isEnable: true,
+ state: "Visible",
+ type: "ModelOrg",
+ id: dataPath.value.id,
+ };
+ const res = await MG.dps5.UpdateOrg(body);
+ formEl.resetFields();
+ treeKey.value += 1;
+ dialogFormVisible.value = false;
+ } else if (dialogTitle.value == "缂栬緫閮ㄩ棬") {
+ const body = {
+ name: form.name,
+ refCode: form.refCode + "_ModelDep",
+ description: form.description,
+ isEnable: true,
+ orgId: dataPath.value.org.id,
+ departmentId: dataPath.value.id,
+ state: "Normal",
+ type: "Normal",
+ };
+ const res = await MG.dps5.UpdateDepartment(body);
+ formEl.resetFields();
+ treeKey.value += 1;
+ dialogFormVisible.value = false;
+ }
+ }
+ });
+};
+
+const closeDialog = (formEl: FormInstance | undefined) => {
+ if (!formEl) return;
+ formEl.resetFields();
+ dialogFormVisible.value = false;
+};
+
+const closeRoleDialog = (formEl: FormInstance | undefined) => {
+ if (!formEl) return;
+ formEl.resetFields();
+ roleDialogVisible.value = false;
+};
+
+const loadNode = async (node: any, resolve: any) => {
+ console.log(node, "node");
+ if (node.level == 0) {
+ const treeData = await getOrgList();
+ currentNodeKey.value = treeData[0].key;
+ dataPath.value = treeData[0].data;
+ seleStore.setOrgInfo(treeData[0].data);
+ return resolve(treeData);
+ } else if (node.level == 1) {
+ const data = {
+ isIncludeAll: false,
+ orgId: node.data.data.id,
+ };
+ const res = await MG.dps5.GetOrgChildrenDepartment(data);
+ const fomartData = handleTreeData(res, node.data.data, false);
+ seleStore.setDepartmentInfo(fomartData[0].data);
+ return resolve(fomartData);
+ } else if (node.level == 2) {
+ const data = {
+ departmentId: node.data.data.id,
+ };
+ const res = await MG.dps5.GetChildrenDepartment(data);
+ const fomartData = handleTreeData(res, node.data.data, false);
+ return resolve(fomartData);
+ }
+};
+
+const getOrgList = async () => {
+ const params = {
+ filterList: [],
+ searchList: [
+ { field: "refCode", keywords: "_ModelOrg", compareType: "Contains" },
+ ],
+ size: 100,
+ start: 0,
+ };
+ const res = await MG.dps5.GetOrgList(params);
+ res.datas.map((item) => (item.childrenCount = item.childrenDepartmentCount));
+ const fomartData = handleTreeData(res.datas, null, false);
+ console.log(fomartData, "fomartData");
+ return fomartData;
+};
+
+const addBtn = (type) => {
+ console.log("addBtn");
+ if (type == "parent") {
+ dialogTitle.value = "鏂板缓鏈烘瀯";
+ } else {
+ dialogTitle.value = "鏂板缓閮ㄩ棬";
+ }
+ dialogFormVisible.value = true;
+};
+
+const editBtn = () => {
+ console.log(dataPath.value, "editBtn");
+ dialogTitle.value = "鏂板缓閮ㄩ棬";
+ if (dataPath.value.refCode.includes("_ModelOrg")) {
+ dialogTitle.value = "缂栬緫鏈烘瀯";
+ } else {
+ dialogTitle.value = "缂栬緫閮ㄩ棬";
+ }
+ form.name = dataPath.value.name;
+ form.description = dataPath.value.description;
+ form.refCode = dataPath.value.refCode.split("_")[0];
+ dialogFormVisible.value = true;
+};
+const delBtn = () => {
+ if (dataPath.value.refCode.includes("_ModelOrg")) {
+ ElMessageBox.confirm("鏄惁鍒犻櫎褰撳墠鏈烘瀯", "鍒犻櫎鏈烘瀯", {
+ confirmButtonText: "纭",
+ cancelButtonText: "鍙栨秷",
+ type: "warning",
+ })
+ .then(async () => {
+ const data = {
+ orgId: dataPath.value.id,
+ };
+ const res = await MG.dps5.DelOrg(data);
+ getRoleList();
+ if (res) {
+ ElMessage({
+ type: "success",
+ message: "鍒犻櫎鎴愬姛",
+ });
+ treeKey.value += 1;
+ }
+ })
+ .catch(() => {});
+ } else {
+ dialogTitle.value = "缂栬緫閮ㄩ棬";
+ ElMessageBox.confirm("鏄惁鍒犻櫎褰撳墠閮ㄩ棬", "鍒犻櫎閮ㄩ棬", {
+ confirmButtonText: "纭",
+ cancelButtonText: "鍙栨秷",
+ type: "warning",
+ })
+ .then(async () => {
+ const data = {
+ departmentId: dataPath.value.id,
+ };
+ const res = await MG.dps5.DelDepartment(data);
+ getRoleList();
+ if (res) {
+ ElMessage({
+ type: "success",
+ message: "鍒犻櫎鎴愬姛",
+ });
+ treeKey.value += 1;
+ }
+ })
+ .catch(() => {});
+ }
+};
+
+const handleNodeClick = (data: any) => {
+ if (data.data.type == "ModelOrg") {
+ seleStore.setOrgInfo(data.data);
+ } else {
+ seleStore.setDepartmentInfo(data.data);
+ }
+ dataPath.value = data.data;
+ currentNodeKey.value = data.key;
+};
+
+const handleRoleNodeClick = (data: any) => {
+ seleStore.setCurSelectRole(data.data);
+ currentRoleNodeKey.value = data.key;
+};
+
+const handleTreeData = (datas: any[], parent, noTriggerSelect = false) => {
+ let parentData = {};
+ if (parent) {
+ parentData = { ...parent, parent: null };
+ } else {
+ parentData = null;
+ }
+ const list = [];
+ for (let i = 0; i < datas.length; i++) {
+ const data = datas[i];
+ const obj = {
+ label: data.name,
+ key: parentData ? parentData.key + "_" + i : i + "",
+ namePath: parentData ? parentData.namePath + "\\" + data.name : data.name,
+ icon: data.icon,
+ data: data,
+ parent: parentData,
+ leaf: false,
+ children: [],
+ };
+ if (data["children"] && data["children"].length) {
+ obj.leaf = false;
+ obj.children = handleTreeData(
+ data["children"],
+ {
+ ...data,
+ key: obj.key,
+ namePath: obj.namePath,
+ },
+ i == 0 ? false : true // 濡傛灉鏈夊瓙鏁版嵁澶勭悊锛屽彧鏈夌涓�鏉℃暟鎹渶瑕佸睍寮�鍜屽洖璋�
+ );
+ } else {
+ obj.leaf = !data["childrenCount"] || data["childrenCount"] == 0;
+ }
+ list.push(obj);
+ }
+ console.log(list, "list");
+ return list;
+};
</script>
-<style lang="less" scoped></style>
\ No newline at end of file
+<style lang="less" scoped>
+.menuBox {
+ width: 300px;
+ height: 100vh;
+ background-color: #fff;
+ border: 1px solid #ebeef5;
+}
+.btnGroup {
+ display: flex;
+ gap: 12px;
+ cursor: pointer;
+ justify-content: end;
+ align-items: center;
+ padding: 8px;
+ border-bottom: 1px solid #ebeef5;
+ .icon1,
+ .icon2,
+ .icon3 {
+ font-size: 18px;
+ color: #606266;
+ &:hover {
+ color: #409eff;
+ }
+ }
+}
+.treeBox {
+ padding-top: 10px;
+}
+.tableBox {
+ flex: 1;
+}
+</style>
--
Gitblit v1.9.1