137 lines
3.8 KiB
Vue
137 lines
3.8 KiB
Vue
<template>
|
|
<PageWrapper dense contentFullHeight fixedHeight contentClass="flex">
|
|
<DeptTree ref="childRef" class="w-1/4 xl:w-1/5" @select="handleSelect" />
|
|
<BasicTable class="w-3/4 xl:w-4/5" @register="registerTable" :searchInfo="searchInfo">
|
|
<template #toolbar>
|
|
<!-- <a-button type="primary" @click="handleCreate"> 新增部门 </a-button> -->
|
|
<!-- <a-button type="primary" @click="handlePoGroup"> 部门关联职级组 </a-button> -->
|
|
<PermissionBtn @btnEvent="onBtnClicked"></PermissionBtn>
|
|
</template>
|
|
</BasicTable>
|
|
<DeptModal @register="registerModal" @success="handleSuccess" />
|
|
<PosGroupModal @register="registerPosGroupModal" @success="handleSuccess"></PosGroupModal>
|
|
</PageWrapper>
|
|
</template>
|
|
<script lang="ts" setup>
|
|
import { reactive, ref } from 'vue';
|
|
|
|
import { BasicTable, useTable } from '@/components/Table';
|
|
import { getOrgList, deleteDept } from '@/api/demo/system';
|
|
import { PageWrapper } from '@/components/Page';
|
|
import { useModal } from '@/components/Modal';
|
|
import { useMessage } from '@/hooks/web/useMessage';
|
|
|
|
import {DeptTree} from './page';
|
|
import {DeptModal} from './page';
|
|
import {PosGroupModal} from './page';
|
|
import {PermissionBtn} from '@/components/PermissionBtn/index';
|
|
import { columns, searchFormSchema } from './dept.data';
|
|
|
|
defineOptions({ name: 'DeptManagement' });
|
|
const { createConfirm, createMessage } = useMessage();
|
|
|
|
const [registerModal, { openModal: openDeptModal }] = useModal();
|
|
const [registerPosGroupModal, { openModal: openPosGroupModal }] = useModal();
|
|
const searchInfo = reactive<Recordable>({});
|
|
|
|
const [registerTable, { reload, getSelectRows }] = useTable({
|
|
title: '部门列表',
|
|
api: getOrgList,
|
|
rowKey: 'id',
|
|
columns,
|
|
formConfig: {
|
|
labelWidth: 120,
|
|
schemas: searchFormSchema,
|
|
},
|
|
rowSelection: {
|
|
//多选框
|
|
// type: 'checkbox',
|
|
type: 'radio',
|
|
},
|
|
useSearchForm: true,
|
|
showTableSetting: true,
|
|
bordered: true,
|
|
handleSearchInfoFn(info) {
|
|
return info;
|
|
},
|
|
});
|
|
async function handlePoGroup() {
|
|
let rows = getSelectRows();
|
|
if (!rows.length) {
|
|
return createMessage.warn('请选择一个部门');
|
|
}
|
|
var record = rows[0];
|
|
openPosGroupModal(true, {
|
|
record,
|
|
isUpdate: false,
|
|
});
|
|
}
|
|
const childRef = ref<any>();
|
|
|
|
function handleCreate() {
|
|
openDeptModal(true, {
|
|
isUpdate: false,
|
|
});
|
|
}
|
|
|
|
function handleEdit() {
|
|
let rows = getSelectRows();
|
|
if (rows.length == 0) {
|
|
return createMessage.warn('请选择一个部门进行编辑');
|
|
}
|
|
const record = rows[0];
|
|
openDeptModal(true, {
|
|
record,
|
|
isUpdate: true,
|
|
});
|
|
}
|
|
|
|
async function handleDelete() {
|
|
let rows = getSelectRows();
|
|
if (rows.length == 0) {
|
|
return createMessage.warn('请选择一个部门进行删除');
|
|
}
|
|
const query = [rows[0].id];
|
|
createConfirm({
|
|
iconType: 'info',
|
|
title: '删除',
|
|
content: '确定要删除当前部门吗',
|
|
onOk: async () => {
|
|
const data = await deleteDept(query);
|
|
if (data) {
|
|
return createMessage.success('删除成功');
|
|
handleSuccess();
|
|
} else {
|
|
return createMessage.error('删除失败');
|
|
}
|
|
},
|
|
});
|
|
}
|
|
function onBtnClicked(domId) {
|
|
switch (domId) {
|
|
case 'btnAdd':
|
|
handleCreate();
|
|
break;
|
|
case 'btnEdit':
|
|
handleEdit();
|
|
break;
|
|
case 'btnDelete':
|
|
handleDelete();
|
|
break;
|
|
case 'btnPoGroup':
|
|
handlePoGroup();
|
|
break;
|
|
default:
|
|
break;
|
|
}
|
|
}
|
|
function handleSelect(orgId = '') {
|
|
searchInfo.orgId = orgId;
|
|
reload();
|
|
}
|
|
function handleSuccess() {
|
|
childRef.value.fetch();
|
|
reload();
|
|
}
|
|
</script>
|