| | |
| | | |
| | | <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 |
| | |
| | | > |
| | | <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" /> |
| | |
| | | </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" /> |
| | |
| | | </template> |
| | | |
| | | <script lang="ts" setup> |
| | | import { ref } from "vue"; |
| | | import { IconPlus } from "@arco-design/web-vue/es/icon"; |
| | | 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"; |
| | | 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 menuTips = ref(['权限管理', '机构']); |
| | | let deptform = ref<Organization>({ |
| | | deptName: "", |
| | | email: "", |
| | | leader: "", |
| | | orderNum: "0", |
| | | parentId: "", |
| | | parentName: "", |
| | | phone: "", |
| | | status: "", |
| | | address: "", |
| | | deptId: "" |
| | | deptName: '', |
| | | email: '', |
| | | leader: '', |
| | | orderNum: '0', |
| | | parentId: '', |
| | | parentName: '', |
| | | phone: '', |
| | | status: '', |
| | | address: '', |
| | | deptId: '', |
| | | }); |
| | | |
| | | const onIconClick = (nodeData) => { |
| | |
| | | |
| | | const addDept = async () => { |
| | | await OrganizationAdd({ |
| | | ...deptform.value |
| | | ...deptform.value, |
| | | } as unknown as Organization).then((res) => { |
| | | OrganizationData(""); |
| | | OrganizationData(''); |
| | | }); |
| | | }; |
| | | |
| | | const onIconClickDelete = (nodeData) => { |
| | | OrganizationDelete(nodeData.deptId).then(() => { |
| | | OrganizationData(""); |
| | | OrganizationData(''); |
| | | }); |
| | | }; |
| | | |
| | |
| | | }; |
| | | const editdept=()=>{ |
| | | OrganizationUpdate({ |
| | | ...deptform.value |
| | | ...deptform.value, |
| | | } as unknown as Organization).then((res) => { |
| | | OrganizationData(""); |
| | | OrganizationData(''); |
| | | Modal.success({ |
| | | title: "保存成功", |
| | | content: "保存成功" |
| | | 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 |
| | | orderNum: '0', |
| | | parentId: dropNode.deptId, |
| | | deptId: dragNode.deptId, |
| | | }); |
| | | const loop = (data, key, callback) => { |
| | | data.some((item, index, arr) => { |
| | |
| | | }); |
| | | }; |
| | | |
| | | OrganizationData(""); |
| | | OrganizationData(''); |
| | | </script> |
| | | |
| | | |
| | | <style scoped> |
| | | .tree-demo :deep(.tree-node-dropover) > :deep(.arco-tree-node-title), |