From f848280fe3ed8841147fcc8f26a788580b82ae0c Mon Sep 17 00:00:00 2001
From: liudong <liudong>
Date: 星期六, 17 八月 2024 10:37:46 +0800
Subject: [PATCH] 首页页面bug修改
---
src/views/authority/organization/index.vue | 298 ++++++++++++++++++++++++++++++++++-------------------------
1 files changed, 170 insertions(+), 128 deletions(-)
diff --git a/src/views/authority/organization/index.vue b/src/views/authority/organization/index.vue
index 8da1c6c..03c4f6d 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,33 +16,54 @@
: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)" />
+ <IconDelete
+ style="
+ position: absolute;
+ right: 40px;
+ font-size: 12px;
+ top: 10px;
+ color: #3370ff;
+ "
+ @click="() => onIconClickDelete(nodeData)"
+ />
</template>
</a-tree>
-
</a-card>
</a-col>
<a-col :span="16">
- <a-card :title="$t('menu.organization.detail')" :bordered="false" :style="{ width: '100%' }">
+ <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-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-input v-model="deptform.deptName" />
@@ -54,7 +79,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,13 +87,23 @@
</a-card>
</a-col>
</a-row>
- <a-modal width="50%" v-model:visible="visible" title="鏂板" @cancel="handleCancel" @ok="addDept">
+ <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-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-input v-model="deptform.deptName" />
@@ -88,135 +123,142 @@
</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,
+ } 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 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.parentName = nodeData.deptName;
+ deptform.value.parentId = nodeData.deptId;
+ visible.value = true;
+ };
-const addDept = async () => {
- await OrganizationAdd({
- ...deptform.value
- } as unknown as Organization).then((res) => {
- OrganizationData("");
- });
-};
-
-const onIconClickDelete = (nodeData) => {
- OrganizationDelete(nodeData.deptId).then(() => {
- 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 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 addDept = async () => {
+ await OrganizationAdd({
+ ...deptform.value,
+ } as unknown as Organization).then((res) => {
+ 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);
+ const onIconClickDelete = (nodeData) => {
+ OrganizationDelete(nodeData.deptId).then(() => {
+ OrganizationData('');
});
- } else {
- loop(data, dropNode.deptId, (_, index, arr) => {
- arr.splice(dropPosition < 0 ? index : index + 1, 0, dragNode);
+ };
+
+ 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 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