128 lines
3.5 KiB
Vue
128 lines
3.5 KiB
Vue
<template>
|
|
<PageWrapper dense contentFullHeight fixedHeight contentClass="flex">
|
|
<PositionTree ref="childRef" class="w-1/4 xl:w-1/5" @select="handleSelect" @edit="editGroup" />
|
|
<BasicTable class="w-3/4 xl:w-4/5" @register="registerTable" @fetch-success="onFetchSuccess"
|
|
:searchInfo="searchInfo">
|
|
<template #toolbar>
|
|
<!-- <a-button type="primary" @click="handleCreate"> 新增 </a-button> -->
|
|
<PermissionBtn @btnEvent="onBtnClicked"></PermissionBtn>
|
|
</template>
|
|
</BasicTable>
|
|
<PositionDrawer @register="registerDrawer" @success="handleSuccess" />
|
|
</PageWrapper>
|
|
|
|
</template>
|
|
<script lang="ts" setup>
|
|
import { reactive, nextTick,ref } from 'vue';
|
|
|
|
import { BasicTable, useTable, TableAction } from '@/components/Table';
|
|
import { getPositionList,getPositionsTree} from '@/api/demo/system';
|
|
import { PageWrapper } from '@/components/Page';
|
|
import PositionTree from './PositionTree.vue';
|
|
import PermissionBtn from '@/components/PermissionBtn/index.vue'
|
|
|
|
import { useDrawer } from '@/components/Drawer';
|
|
import PositionDrawer from './PositionDrawer.vue';
|
|
|
|
import { columns, searchFormSchema } from './position.data';
|
|
import { useMessage } from '@/hooks/web/useMessage';
|
|
const { createConfirm,createMessage } = useMessage();
|
|
defineOptions({ name: 'PositionManagement' });
|
|
const searchInfo = reactive < Recordable > ({});
|
|
|
|
const [registerDrawer, { openDrawer }] = useDrawer();
|
|
const [registerTable, { reload, expandAll, getSelectRows,clearSelectedRowKeys }] = useTable({
|
|
title: '职级列表',
|
|
api: getPositionsTree,
|
|
columns,
|
|
rowKey:'id',
|
|
formConfig: {
|
|
labelWidth: 120,
|
|
schemas: searchFormSchema,
|
|
},
|
|
isTreeTable: true,
|
|
striped: false,
|
|
useSearchForm: true,
|
|
showTableSetting: true,
|
|
bordered: true,
|
|
showIndexColumn: false,
|
|
rowSelection: {//多选框
|
|
// type: 'checkbox',
|
|
type: 'radio',
|
|
},
|
|
handleSearchInfoFn(info) {
|
|
return info;
|
|
},
|
|
});
|
|
const childRef = ref <any> ()
|
|
function handleCreate() {
|
|
openDrawer(true, {
|
|
isUpdate: false,
|
|
});
|
|
}
|
|
|
|
function handleEdit() {
|
|
let rows = getSelectRows();
|
|
if(rows.length == 0){
|
|
return createMessage.warn('请选择一个职级进行编辑');
|
|
}
|
|
const record = rows[0]
|
|
record.type = '2'
|
|
openDrawer(true, {
|
|
record,
|
|
isUpdate: true,
|
|
});
|
|
}
|
|
async function editGroup(record: Recordable) {
|
|
console.log('record',record)
|
|
openDrawer(true, {
|
|
record,
|
|
isUpdate: true,
|
|
});
|
|
}
|
|
function handleSelect(GroupId = '') {
|
|
searchInfo.GroupId = GroupId;
|
|
reload();
|
|
}
|
|
async function handleDelete(record: Recordable) {
|
|
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 deleteButton(query);
|
|
reload();
|
|
},
|
|
});
|
|
}
|
|
|
|
function handleSuccess() {
|
|
childRef.value.fetch();
|
|
reload();
|
|
}
|
|
|
|
function onFetchSuccess() {
|
|
// 演示默认展开所有表项
|
|
nextTick(expandAll);
|
|
}
|
|
function onBtnClicked(domId) {
|
|
switch (domId) {
|
|
case 'btnAdd':
|
|
handleCreate()
|
|
break;
|
|
case 'btnEdit':
|
|
handleEdit()
|
|
break;
|
|
case 'btnDelete':
|
|
handleDelete()
|
|
break;
|
|
default:
|
|
break;
|
|
}
|
|
}
|
|
</script> |