87 lines
2.2 KiB
Vue
87 lines
2.2 KiB
Vue
<template>
|
|
<PageWrapper dense contentFullHeight fixedHeight contentClass="flex">
|
|
<DeptTree class="w-1/4 xl:w-1/5" @select="handleSelect" />
|
|
<div class="m-4 vxebasic-form-container">
|
|
<VxeBasicTable ref="tableRef" v-bind="gridOptions">
|
|
<template #action="{ row }">
|
|
<TableAction outside :actions="createActions(row)" />
|
|
</template>
|
|
</VxeBasicTable>
|
|
</div>
|
|
</PageWrapper>
|
|
</template>
|
|
<script lang="ts" setup>
|
|
import { reactive, ref } from 'vue';
|
|
import { ActionItem, TableAction } from '/@/components/Table';
|
|
import { getAccountList } from '/@/api/demo/system';
|
|
import { PageWrapper } from '/@/components/Page';
|
|
import DeptTree from '../account/DeptTree.vue';
|
|
import { columns, searchFormSchema } from './vxeAccount.data';
|
|
import { BasicTableProps, VxeBasicTable, VxeGridInstance } from '/@/components/VxeTable';
|
|
|
|
const tableRef = ref<VxeGridInstance>();
|
|
const searchInfo = ref();
|
|
const gridOptions = reactive<BasicTableProps>({
|
|
id: 'VxeTable',
|
|
keepSource: true,
|
|
columns: columns,
|
|
formConfig: {
|
|
enabled: true,
|
|
items: searchFormSchema,
|
|
},
|
|
height: 'auto',
|
|
proxyConfig: {
|
|
ajax: {
|
|
query: async ({ page, form }) => {
|
|
return getAccountList({
|
|
page: page.currentPage,
|
|
pageSize: page.pageSize,
|
|
...form,
|
|
searchInfo: searchInfo.value,
|
|
});
|
|
},
|
|
},
|
|
},
|
|
});
|
|
|
|
const handleSelect = (deptId = '') => {
|
|
searchInfo.value = deptId;
|
|
if (tableRef.value) {
|
|
tableRef.value.commitProxy('query');
|
|
}
|
|
};
|
|
|
|
// 操作按钮（权限控制）
|
|
const createActions = (record) => {
|
|
const actions: ActionItem[] = [
|
|
{
|
|
label: '详情',
|
|
onClick: () => {
|
|
console.log(record);
|
|
},
|
|
},
|
|
{
|
|
label: '编辑',
|
|
onClick: () => {},
|
|
},
|
|
{
|
|
label: '删除',
|
|
color: 'error',
|
|
popConfirm: {
|
|
title: '是否确认删除',
|
|
confirm: () => {
|
|
tableRef.value?.remove(record);
|
|
},
|
|
},
|
|
},
|
|
];
|
|
|
|
return actions;
|
|
};
|
|
</script>
|
|
<style lang="less" scope>
|
|
.vxebasic-form-container {
|
|
flex: auto;
|
|
}
|
|
</style>
|