admin-vben5/apps/web-antd/src/views/sis/elevatorInfo/index.vue

197 lines
5.2 KiB
Vue

<script setup lang="ts">
import type { Recordable } from '@vben/types';
import { ref } from 'vue';
import { Page, useVbenModal, type VbenFormProps } from '@vben/common-ui';
import { getVxePopupContainer } from '@vben/utils';
import { Modal, Popconfirm, Space } from 'ant-design-vue';
import dayjs from 'dayjs';
import {
useVbenVxeGrid,
vxeCheckboxChecked,
type VxeGridProps
} from '#/adapter/vxe-table';
import {
elevatorInfoExport,
elevatorInfoList,
elevatorInfoRemove,
} from '#/api/sis/elevatorInfo';
import type { ElevatorInfoForm } from '#/api/sis/elevatorInfo/model';
import { commonDownloadExcel } from '#/utils/file/download';
import elevatorInfoModal from './elevatorInfo-modal.vue';
import { columns, querySchema } from './data';
import floorAuthModal from './floorAuth-modal.vue';
const formOptions: VbenFormProps = {
commonConfig: {
labelWidth: 80,
componentProps: {
allowClear: true,
},
},
schema: querySchema(),
wrapperClass: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4',
// 处理区间选择器RangePicker时间格式 将一个字段映射为两个字段 搜索/导出会用到
// 不需要直接删除
// fieldMappingTime: [
// [
// 'createTime',
// ['params[beginTime]', 'params[endTime]'],
// ['YYYY-MM-DD 00:00:00', 'YYYY-MM-DD 23:59:59'],
// ],
// ],
};
const gridOptions: VxeGridProps = {
checkboxConfig: {
// 高亮
highlight: true,
// 翻页时保留选中状态
reserve: true,
// 点击行选中
// trigger: 'row',
},
// 需要使用i18n注意这里要改成getter形式 否则切换语言不会刷新
// columns: columns(),
columns,
height: 'auto',
keepSource: true,
pagerConfig: {},
proxyConfig: {
ajax: {
query: async ({ page }, formValues = {}) => {
return await elevatorInfoList({
pageNum: page.currentPage,
pageSize: page.pageSize,
...formValues,
});
},
},
},
rowConfig: {
keyField: 'elevatorId',
},
// 表格全局唯一表示 保存列配置需要用到
id: 'sis-elevatorInfo-index'
};
const [BasicTable, tableApi] = useVbenVxeGrid({
formOptions,
gridOptions,
});
const [ElevatorInfoModal, modalApi] = useVbenModal({
connectedComponent: elevatorInfoModal,
});
const [FloorAuthModal, floorAuthModalApi] = useVbenModal({
connectedComponent: floorAuthModal,
});
function handleAdd() {
modalApi.setData({});
modalApi.open();
}
async function handleEdit(row: Required<ElevatorInfoForm>) {
modalApi.setData({ id: row.elevatorId });
modalApi.open();
}
async function handleDelete(row: Required<ElevatorInfoForm>) {
await elevatorInfoRemove(row.elevatorId);
await tableApi.query();
}
function handleMultiDelete() {
const rows = tableApi.grid.getCheckboxRecords();
const ids = rows.map((row: Required<ElevatorInfoForm>) => row.elevatorId);
Modal.confirm({
title: '提示',
okType: 'danger',
content: `确认删除选中的${ids.length}条记录吗?`,
onOk: async () => {
await elevatorInfoRemove(ids);
await tableApi.query();
},
});
}
function handleDownloadExcel() {
commonDownloadExcel(elevatorInfoExport, '电梯基本信息数据', tableApi.formApi.form.values, {
fieldMappingTime: formOptions.fieldMappingTime,
});
}
function handleAuth(row: Required<ElevatorInfoForm>) {
floorAuthModalApi.setData({ unitId: row.unitId, elevatorId: row.elevatorId });
floorAuthModalApi.open();
}
</script>
<template>
<Page :auto-content-height="true">
<BasicTable table-title="电梯基本信息列表">
<template #toolbar-tools>
<Space>
<a-button
v-access:code="['sis:elevatorInfo:export']"
@click="handleDownloadExcel"
>
{{ $t('pages.common.export') }}
</a-button>
<a-button
:disabled="!vxeCheckboxChecked(tableApi)"
danger
type="primary"
v-access:code="['sis:elevatorInfo:remove']"
@click="handleMultiDelete">
{{ $t('pages.common.delete') }}
</a-button>
<a-button
type="primary"
v-access:code="['sis:elevatorInfo:add']"
@click="handleAdd"
>
{{ $t('pages.common.add') }}
</a-button>
</Space>
</template>
<template #action="{ row }">
<Space>
<ghost-button @click.stop="handleAuth(row)">楼层授权</ghost-button>
<ghost-button
v-access:code="['sis:elevatorInfo:edit']"
@click.stop="handleEdit(row)"
>
{{ $t('pages.common.edit') }}
</ghost-button>
<Popconfirm
:get-popup-container="getVxePopupContainer"
placement="left"
title="确认删除?"
@confirm="handleDelete(row)"
>
<ghost-button
danger
v-access:code="['sis:elevatorInfo:remove']"
@click.stop=""
>
{{ $t('pages.common.delete') }}
</ghost-button>
</Popconfirm>
</Space>
</template>
</BasicTable>
<ElevatorInfoModal @reload="tableApi.query()" />
<FloorAuthModal @reload="tableApi.query()" />
</Page>
</template>