159 lines
3.9 KiB
Vue
159 lines
3.9 KiB
Vue
<template>
|
|
<PageWrapper dense contentFullHeight fixedHeight contentClass="flex">
|
|
<BasicTable @register="registerTable" :searchInfo="searchInfo">
|
|
<template #toolbar>
|
|
<PermissionBtn @btn-event="onBtnClicked" />
|
|
</template>
|
|
<template #bodyCell="{ column, record }">
|
|
<template v-if="column.key === 'action'">
|
|
<TableAction
|
|
:actions="[
|
|
{
|
|
// icon: 'ant-design:ellipsis-outlined',
|
|
label: '详情',
|
|
onClick: viewDetail.bind(null, record),
|
|
},
|
|
]"
|
|
/>
|
|
</template>
|
|
</template>
|
|
</BasicTable>
|
|
<a-modal
|
|
v-model:visible="addModelVisible"
|
|
title="站点信息"
|
|
wrap-class-name="full-modal"
|
|
width="80%"
|
|
@ok="handleOk"
|
|
>
|
|
<AddModal ref="AddModalRef" />
|
|
</a-modal>
|
|
<a-modal
|
|
v-model:visible="detailModelVisible"
|
|
title="站点信息"
|
|
wrap-class-name="full-modal"
|
|
width="80%"
|
|
:footer="null"
|
|
>
|
|
<Detail @close="closeDetail" />
|
|
</a-modal>
|
|
</PageWrapper>
|
|
</template>
|
|
<script lang="ts" setup>
|
|
import { reactive, ref } from 'vue';
|
|
import { BasicTable, useTable, TableAction } from '@/components/Table';
|
|
import { getOrgList, deleteDept } from '@/api/demo/system';
|
|
import { PageWrapper } from '@/components/Page';
|
|
import { useMessage } from '@/hooks/web/useMessage';
|
|
|
|
import { AddModal, Detail } from './page';
|
|
import { PermissionBtn } from '@/components/PermissionBtn/index';
|
|
import { columns, searchFormSchema } from './data';
|
|
|
|
defineOptions({ name: 'DeptManagement' });
|
|
const { createConfirm, createMessage } = useMessage();
|
|
const AddModalRef = ref();
|
|
const searchInfo = reactive<Recordable>({});
|
|
const addModelVisible = ref(false);
|
|
const detailModelVisible = ref(false);
|
|
|
|
const [registerTable, { reload, getSelectRows, clearSelectedRowKeys }] = useTable({
|
|
// 表格名称
|
|
title: '站点列表',
|
|
// 获取数据的接口
|
|
api: getOrgList,
|
|
// 表单列信息 BasicColumn[]
|
|
columns,
|
|
rowKey: 'id',
|
|
formConfig: {
|
|
labelWidth: 120,
|
|
schemas: searchFormSchema,
|
|
},
|
|
// 使用搜索表单
|
|
useSearchForm: true,
|
|
// 显示表格设置工具
|
|
showTableSetting: true,
|
|
// 是否显示表格边框
|
|
bordered: true,
|
|
// 序号列
|
|
showIndexColumn: false,
|
|
// 勾选列
|
|
rowSelection: {
|
|
//多选框
|
|
// type: 'checkbox',
|
|
type: 'radio',
|
|
},
|
|
// 搜索
|
|
handleSearchInfoFn(info) {
|
|
return info;
|
|
},
|
|
actionColumn: {
|
|
width: 80,
|
|
title: '操作',
|
|
dataIndex: 'action',
|
|
// slots: { customRender: 'action' },
|
|
fixed: undefined,
|
|
},
|
|
});
|
|
const childRef = ref<any>();
|
|
|
|
function handleCreate() {
|
|
addModelVisible.value = true;
|
|
}
|
|
|
|
function handleEdit() {
|
|
let rows = getSelectRows();
|
|
if (rows.length == 0) {
|
|
return createMessage.warn('请选择一个站点进行编辑');
|
|
}
|
|
const record = rows[0];
|
|
addModelVisible.value = true;
|
|
}
|
|
function onBtnClicked(domId) {
|
|
switch (domId) {
|
|
case 'btnAdd':
|
|
handleCreate();
|
|
break;
|
|
case 'btnEdit':
|
|
handleEdit();
|
|
break;
|
|
case 'btnExport':
|
|
break;
|
|
default:
|
|
break;
|
|
}
|
|
}
|
|
function handleSuccess() {
|
|
clearSelectedRowKeys();
|
|
childRef.value.fetch();
|
|
reload();
|
|
}
|
|
const handleOk = () => {
|
|
AddModalRef.value.validateForm();
|
|
const params = AddModalRef.value.createSite();
|
|
console.log('params', params);
|
|
};
|
|
const viewDetail = (record: any) => {
|
|
console.log('record', record);
|
|
detailModelVisible.value = true;
|
|
};
|
|
const closeDetail = () => {
|
|
detailModelVisible.value = false;
|
|
};
|
|
</script>
|
|
|
|
<style lang="less">
|
|
.full-modal {
|
|
.ant-modal {
|
|
max-width: 80%;
|
|
}
|
|
|
|
.ant-modal-content {
|
|
height: calc(80vh);
|
|
}
|
|
|
|
.ant-modal-body {
|
|
height: 100%;
|
|
}
|
|
}
|
|
</style>
|