From ff0ae974a1c561eaf2915988dac63cd066af189f Mon Sep 17 00:00:00 2001
From: yinbangzhong <zhongbangyin@126.com>
Date: 星期四, 12 九月 2024 09:23:44 +0800
Subject: [PATCH] bug fix
---
src/views/authority/organization/index.vue | 346 +++++++++++++++++++++++++++++++++++----------------------
1 files changed, 210 insertions(+), 136 deletions(-)
diff --git a/src/views/authority/organization/index.vue b/src/views/authority/organization/index.vue
index 8da1c6c..72e93f8 100644
--- a/src/views/authority/organization/index.vue
+++ b/src/views/authority/organization/index.vue
@@ -4,7 +4,11 @@
<a-row :gutter="20">
<a-col :span="8">
- <a-card :title="$t('menu.organization.title')" :bordered="false" :style="{ width: '100%',height: '900px', 'overflow-y': 'auto' }">
+ <a-card
+ :title="$t('menu.organization.title')"
+ :bordered="false"
+ style=" 'width': '100%'; height: calc(100vh - 250px); overflow-y:auto "
+ >
<a-tree
class="tree-demo"
draggable
@@ -12,41 +16,66 @@
:data="treeData"
:show-line="showLine"
:fieldNames="{
- key:'deptId',
- title:'deptName',
- children:'children',
+ key: 'deptId',
+ title: 'deptName',
+ children: 'children',
}"
@drop="onDrop"
@select="showDetail"
>
<template #extra="nodeData">
<IconPlus
- style="position: absolute; right: 60px; font-size: 12px; top: 10px; color: #3370ff;"
+ style="
+ position: absolute;
+ right: 60px;
+ font-size: 12px;
+ top: 10px;
+ color: #3370ff;
+ "
@click="() => onIconClick(nodeData)"
/>
- <IconDelete style="position: absolute; right: 40px; font-size: 12px; top: 10px; color: #3370ff;"
- @click="() => onIconClickDelete(nodeData)" />
+ <a-popconfirm v-if="nodeData.deptName!='root'"
+ content="璇风‘璁ゆ槸鍚﹀垹闄わ紵"
+ type="success"
+ @ok="() => onIconClickDelete(nodeData)"
+ >
+ <IconDelete
+ style="
+ position: absolute;
+ right: 40px;
+ font-size: 12px;
+ top: 10px;
+ color: #3370ff;
+ " />
+ </a-popconfirm>
</template>
</a-tree>
-
</a-card>
</a-col>
<a-col :span="16">
- <a-card :title="$t('menu.organization.detail')" :bordered="false" :style="{ width: '100%' }">
- <a-form :model="deptform" layout="horizontal">
- <a-form-item field="parentName" label="涓婄骇鏈烘瀯">
- <a-input v-model="deptform.parentId" />
+ <a-card
+ :title="$t('menu.organization.detail')"
+ :bordered="false"
+ :style="{ width: '100%' }"
+ >
+ <a-form :model="deptform" layout="horizontal" ref="formRef">
+ <a-form-item field="parentName" label="涓婄骇鏈烘瀯" disabled>
+ <a-input v-model="deptform.parentName" />
</a-form-item>
<a-form-item field="status" label="鏈烘瀯鐘舵��">
- <a-switch checked-value="0" unchecked-value="1" v-model="deptform.status"></a-switch>
+ <a-switch
+ checked-value="0"
+ unchecked-value="1"
+ v-model="deptform.status"
+ ></a-switch>
</a-form-item>
- <a-form-item field="deptName" label="鏈烘瀯鍚嶇О">
+ <a-form-item field="deptName" label="鏈烘瀯鍚嶇О" :rules="[{required:true,message:'鏈烘瀯鍚嶇О蹇呭～'},{maxLength:50,message:'闀垮害涓嶈秴杩�50'}]">
<a-input v-model="deptform.deptName" />
</a-form-item>
- <a-form-item field="leader" label="鑱旂郴浜�">
+ <a-form-item field="leader" label="鑱旂郴浜�" :rules="[{required:true,message:'鑱旂郴浜哄繀濉�'},{maxLength:50,message:'闀垮害涓嶈秴杩�50'}]">
<a-input v-model="deptform.leader" />
</a-form-item>
- <a-form-item field="phone" label="鑱旂郴鐢佃瘽">
+ <a-form-item field="phone" label="鑱旂郴鐢佃瘽" :rules="[{required:true,message:'鑱旂郴鐢佃瘽蹇呭～'},{maxLength:50,message:'闀垮害涓嶈秴杩�50'}]">
<a-input v-model="deptform.phone" />
</a-form-item>
<a-form-item field="address" label="鏈烘瀯鍦板潃" style="align: start">
@@ -54,7 +83,7 @@
</a-form-item>
<a-form-item>
<a-space>
- <a-button @click="editdept">淇濆瓨</a-button>
+ <a-button @click="editdept">淇濆瓨</a-button>
<a-button @click="reset(deptform.deptId)">閲嶇疆</a-button>
</a-space>
</a-form-item>
@@ -62,21 +91,31 @@
</a-card>
</a-col>
</a-row>
- <a-modal width="50%" v-model:visible="visible" title="鏂板" @cancel="handleCancel" @ok="addDept">
- <a-form :model="deptform" layout="horizontal">
- <a-form-item field="parentName" label="涓婄骇鏈烘瀯">
+ <a-modal
+ width="50%"
+ v-model:visible="visible"
+ title="鏂板"
+ @cancel="handleCancel"
+ @ok="addDept"
+ >
+ <a-form :model="deptform" layout="horizontal" ref="addFormRef">
+ <a-form-item field="parentName" label="涓婄骇鏈烘瀯" disabled>
<a-input v-model="deptform.parentName" />
</a-form-item>
<a-form-item field="status" label="鏈烘瀯鐘舵��">
- <a-switch checked-value="0" unchecked-value="1" v-model="deptform.status"></a-switch>
+ <a-switch
+ checked-value="0"
+ unchecked-value="1"
+ v-model="deptform.status"
+ ></a-switch>
</a-form-item>
- <a-form-item field="deptName" label="鏈烘瀯鍚嶇О">
+ <a-form-item field="deptName" label="鏈烘瀯鍚嶇О" :rules="[{required:true,message:'鏈烘瀯鍚嶇О蹇呭～'},{maxLength:50,message:'闀垮害涓嶈秴杩�50'}]">
<a-input v-model="deptform.deptName" />
</a-form-item>
- <a-form-item field="leader" label="鑱旂郴浜�">
+ <a-form-item field="leader" label="鑱旂郴浜�" :rules="[{required:true,message:'鑱旂郴浜哄繀濉�'},{maxLength:50,message:'闀垮害涓嶈秴杩�50'}]">
<a-input v-model="deptform.leader" />
</a-form-item>
- <a-form-item field="phone" label="鑱旂郴鐢佃瘽">
+ <a-form-item field="phone" label="鑱旂郴鐢佃瘽" :rules="[{required:true,message:'鑱旂郴鐢佃瘽蹇呭～'},{maxLength:50,message:'闀垮害涓嶈秴杩�50'}]">
<a-input v-model="deptform.phone" />
</a-form-item>
<a-form-item field="address" label="鏈烘瀯鍦板潃" style="align: start">
@@ -88,135 +127,170 @@
</template>
<script lang="ts" setup>
-import { ref } from "vue";
-import { IconPlus } from "@arco-design/web-vue/es/icon";
-import {
- Organization,
- OrganizationAdd,
- OrganizationById,
- OrganizationDelete,
- OrganizationList,
- OrganizationUpdate
-} from "@/api/authority";
-import Authheader from "@/views/authority/components/authheader.vue";
-import { Modal } from "@arco-design/web-vue";
+ import { ref } from 'vue';
+ import { IconPlus } from '@arco-design/web-vue/es/icon';
+ import {
+ Organization,
+ OrganizationAdd,
+ OrganizationById,
+ OrganizationDelete,
+ OrganizationList,
+ OrganizationUpdate, User, UserAdd, UserEdit
+ } from "@/api/authority";
+ import Authheader from '@/views/authority/components/authheader.vue';
+ import { Modal } from '@arco-design/web-vue';
-let visible = ref(false);
-let treeData = ref([]);
-let showLine = ref(true);
-let menuTips = ref(["鏉冮檺绠＄悊", "鏈烘瀯"]);
-let deptform = ref<Organization>({
- deptName: "",
- email: "",
- leader: "",
- orderNum: "0",
- parentId: "",
- parentName: "",
- phone: "",
- status: "",
- address: "",
- deptId: ""
-});
+ let formRef = ref();
+ let addFormRef= ref();
+ let visible = ref(false);
+ let treeData = ref([]);
+ let showLine = ref(true);
+ let menuTips = ref(['鏉冮檺绠＄悊', '鏈烘瀯']);
+ let deptform = ref<Organization>({
+ deptName: '',
+ email: '',
+ leader: '',
+ orderNum: '0',
+ parentId: '',
+ parentName: '',
+ phone: '',
+ status: '',
+ address: '',
+ deptId: '',
+ });
-const onIconClick = (nodeData) => {
- deptform.value.parentName = nodeData.deptName;
- deptform.value.parentId = nodeData.deptId;
- visible.value = true;
-};
+ const onIconClick = (nodeData) => {
+ deptform.value.deptName = "";
+ deptform.value.email = "";
+ deptform.value.leader = "";
+ deptform.value.orderNum = "0";
+ deptform.value.phone = "";
+ deptform.value.status = "";
+ deptform.value.address = "";
+ deptform.value.deptId = "";
+ deptform.value.parentName = nodeData.deptName;
+ deptform.value.parentId = nodeData.deptId;
-const addDept = async () => {
- await OrganizationAdd({
- ...deptform.value
- } as unknown as Organization).then((res) => {
- OrganizationData("");
- });
-};
+ visible.value = true;
+ };
-const onIconClickDelete = (nodeData) => {
- OrganizationDelete(nodeData.deptId).then(() => {
- OrganizationData("");
- });
-};
+ const addCb = async (err) => {
+ if (err) {
+ visible.value=true;
+ } else {
+ await OrganizationAdd({
+ ...deptform.value,
+ } as unknown as Organization).then((res) => {
+ OrganizationData('');
+ });
+ }
+ ;
+ }
-const showDetail = (id) => {
- OrganizationById(id).then((res) => {
- deptform.value = {...res.data};
- });
-};
-const editdept=()=>{
- OrganizationUpdate({
- ...deptform.value
- } as unknown as Organization).then((res) => {
- OrganizationData("");
- Modal.success({
- title: "淇濆瓨鎴愬姛",
- content: "淇濆瓨鎴愬姛"
- });
- });
-}
-const reset=(id)=>{
- OrganizationById(id).then((res) => {
- deptform.value = {...res.data};
- });
-}
+ const addDept = async () => {
+ addFormRef.value.validate(addCb);
+ };
-const onDrop = ({ dragNode, dropNode, dropPosition }) => {
- const data = treeData.value;
- OrganizationUpdate({
- orderNum: "0", parentId: dropNode.deptId, deptId: dragNode.deptId
- });
- const loop = (data, key, callback) => {
- data.some((item, index, arr) => {
- if (item.deptId === key) {
- callback(item, index, arr);
- return true;
- }
- if (item.children) {
- return loop(item.children, key, callback);
- }
- return false;
+ const onIconClickDelete = (nodeData) => {
+ OrganizationDelete(nodeData.deptId).then(() => {
+ OrganizationData('');
});
};
- loop(data, dragNode.deptId, (_, index, arr) => {
- arr.splice(index, 1);
- });
+ const showDetail = (id) => {
+ OrganizationById(id).then((res) => {
+ deptform.value = { ...res.data };
+ });
+ };
+ const cb = async (err) => {
+ if (err) {
- if (dropPosition === 0) {
- loop(data, dropNode.deptId, (item) => {
- item.children = item.children || [];
- item.children.push(dragNode);
- });
- } else {
- loop(data, dropNode.deptId, (_, index, arr) => {
- arr.splice(dropPosition < 0 ? index : index + 1, 0, dragNode);
- });
+ } else {
+ OrganizationUpdate({
+ ...deptform.value,
+ } as unknown as Organization).then((res) => {
+ OrganizationData('');
+ Modal.success({
+ title: '淇濆瓨鎴愬姛',
+ content: '淇濆瓨鎴愬姛',
+ });
+ });
+ }
+ ;
}
-};
+ const editdept = () => {
+ formRef.value.validate(cb);
+ };
+ const reset = (id) => {
+ OrganizationById(id).then((res) => {
+ deptform.value = { ...res.data };
+ });
+ };
-const OrganizationData = async (key) => {
- await OrganizationList(key).then((res) => {
- treeData.value = [...res.rows];
- });
-};
+ const onDrop = ({ dragNode, dropNode, dropPosition }) => {
+ const data = treeData.value;
+ OrganizationUpdate({
+ orderNum: '0',
+ parentId: dropNode.deptId,
+ deptId: dragNode.deptId,
+ });
+ const loop = (data, key, callback) => {
+ data.some((item, index, arr) => {
+ if (item.deptId === key) {
+ callback(item, index, arr);
+ return true;
+ }
+ if (item.children) {
+ return loop(item.children, key, callback);
+ }
+ return false;
+ });
+ };
-OrganizationData("");
+ loop(data, dragNode.deptId, (_, index, arr) => {
+ arr.splice(index, 1);
+ });
+
+ if (dropPosition === 0) {
+ loop(data, dropNode.deptId, (item) => {
+ item.children = item.children || [];
+ item.children.push(dragNode);
+ });
+ } else {
+ loop(data, dropNode.deptId, (_, index, arr) => {
+ arr.splice(dropPosition < 0 ? index : index + 1, 0, dragNode);
+ });
+ }
+ };
+
+ const handleCancel = (type) => {
+ if (type == 1) {
+ visible.value = false;
+ }
+ };
+
+ const OrganizationData = async (key) => {
+ await OrganizationList(key).then((res) => {
+ treeData.value = [...res.rows];
+ });
+ };
+
+ OrganizationData('');
</script>
-
<style scoped>
-.tree-demo :deep(.tree-node-dropover) > :deep(.arco-tree-node-title),
-.tree-demo :deep(.tree-node-dropover) > :deep(.arco-tree-node-title):hover {
- animation: blinkBg 0.4s 2;
-}
-
-@keyframes blinkBg {
- 0% {
- background-color: transparent;
+ .tree-demo :deep(.tree-node-dropover) > :deep(.arco-tree-node-title),
+ .tree-demo :deep(.tree-node-dropover) > :deep(.arco-tree-node-title):hover {
+ animation: blinkBg 0.4s 2;
}
- 100% {
- background-color: var(--color-primary-light-1);
+ @keyframes blinkBg {
+ 0% {
+ background-color: transparent;
+ }
+
+ 100% {
+ background-color: var(--color-primary-light-1);
+ }
}
-}
</style>
--
Gitblit v1.8.0