| | |
| | | <script setup lang="ts"> |
| | | import type { Recordable } from '@vben/types'; |
| | | |
| | | import { onMounted, ref } from 'vue'; |
| | | |
| | | import { Page, useVbenDrawer, type VbenFormProps } from '@vben/common-ui'; |
| | | import { $t } from '@vben/locales'; |
| | | import { addFullName, getPopupContainer, getVxePopupContainer } from '@vben/utils'; |
| | | |
| | | import { Modal, Popconfirm, Space } from 'ant-design-vue'; |
| | | import { Button, Modal, Popconfirm, Space } from 'ant-design-vue'; |
| | | |
| | | import { useVbenVxeGrid, vxeCheckboxChecked, type VxeGridProps, vxeSortEvent } from '#/adapter/vxe-table'; |
| | | import { delMaintOrder, listMaintOrderGroupDetail } from '#/api/eims/maint-order'; |
| | | import { listInspStRecord } from '#/api/eims/insp-record'; |
| | | import { delInspectSt, listInspectSt } from '#/api/eims/insp-st'; |
| | | import { getDeptTree, userList } from '#/api/system/user'; |
| | | import BasisSubTable from '#/views/eims/components/basis-sub-table.vue'; |
| | |
| | | |
| | | import { columns, querySchema } from './data'; |
| | | import inspStDrawer from './insp-st-drawer.vue'; |
| | | import type { Recordable } from '@vben/types'; |
| | | import { $t } from '@vben/locales'; |
| | | |
| | | defineExpose({ |
| | | tableSelect |
| | | }); |
| | | |
| | | /** |
| | | * 视图模式 |
| | | * day-根据日汇总 |
| | | * month-根据月汇总 |
| | | */ |
| | | enum ViewMode { |
| | | Day = 'Day', |
| | | Month = 'Month' |
| | | } |
| | | |
| | | const curViewMode = ref<ViewMode>(ViewMode.Month); |
| | | const formOptions: VbenFormProps = { |
| | | commonConfig: { |
| | | labelWidth: 80, |
| | |
| | | collapsed: true, |
| | | schema: querySchema(), |
| | | wrapperClass: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4', |
| | | handleReset: async () => { |
| | | // eslint-disable-next-line no-use-before-define |
| | | const { formApi, reload } = tableApi; |
| | | await formApi.resetForm(); |
| | | const formValues = formApi.form.values; |
| | | formApi.setLatestSubmissionValues(formValues); |
| | | await reload(formValues); |
| | | }, |
| | | // 日期选择格式化 |
| | | fieldMappingTime: [['planTime', ['params[beginPlanTime]', 'params[endPlanTime]'], ['YYYY-MM-DD 00:00:00', 'YYYY-MM-DD 23:59:59']]] |
| | | }; |
| | |
| | | proxyConfig: { |
| | | ajax: { |
| | | query: async ({ page }, formValues = {}) => { |
| | | const params = { 'viewMode': curViewMode.value }; |
| | | Object.assign(formValues, params); |
| | | return await listInspectSt({ |
| | | pageNum: page.currentPage, |
| | | pageSize: page.pageSize, |
| | |
| | | }, |
| | | id: 'insp-st-index' |
| | | }; |
| | | const fieldsToExclude = new Set(['action', 'inspTime', 'maintUserNames', 'specialNote', 'status']); |
| | | const gridOptions2: VxeGridProps = { |
| | | checkboxConfig: { |
| | | // 高亮 |
| | | highlight: true, |
| | | // 翻页时保留选中状态 |
| | | reserve: true |
| | | // 点击行选中 |
| | | // trigger: 'row' |
| | | }, |
| | | columns: columns?.filter((column: any) => !fieldsToExclude.has(column?.field)), |
| | | height: 'auto', |
| | | keepSource: true, |
| | | pagerConfig: {}, |
| | | proxyConfig: { |
| | | ajax: { |
| | | query: async ({ page }, formValues = {}) => { |
| | | const params = { 'viewMode': curViewMode.value }; |
| | | Object.assign(formValues, params); |
| | | return await listInspectSt({ |
| | | pageNum: page.currentPage, |
| | | pageSize: page.pageSize, |
| | | ...formValues |
| | | }); |
| | | } |
| | | } |
| | | }, |
| | | rowConfig: { |
| | | isHover: true, |
| | | keyField: 'id' |
| | | }, |
| | | sortConfig: { |
| | | // 远程排序 |
| | | remote: true, |
| | | // 支持多字段排序 默认关闭 |
| | | multiple: true |
| | | }, |
| | | id: 'insp-st-index' |
| | | }; |
| | | |
| | | const recordId = ref<string>(); |
| | | const [BasicTable, tableApi] = useVbenVxeGrid({ |
| | | formOptions, |
| | |
| | | sortChange: (sortParams) => vxeSortEvent(tableApi, sortParams), |
| | | cellClick: (e: any) => { |
| | | const { row } = e; |
| | | recordId.value = `${row.equId}_${row.planTime}`; |
| | | recordId.value = `${row.equId}_${row.planTime}_${curViewMode.value}`; |
| | | } |
| | | } |
| | | }); |
| | |
| | | } |
| | | ]); |
| | | } |
| | | |
| | | const [InspStDrawer, inspStDrawerApi] = useVbenDrawer({ |
| | | connectedComponent: inspStDrawer |
| | | }); |
| | | |
| | | |
| | | async function handleEdit(record: Recordable<any>) { |
| | | inspStDrawerApi.setData({ id: record.id }); |
| | | inspStDrawerApi.open(); |
| | | } |
| | | |
| | | async function handleDelete(row: Recordable<any>) { |
| | | await delInspectSt(row.id); |
| | | await tableApi.query(); |
| | |
| | | function tableSelect() { |
| | | return tableApi.grid.getCheckboxRecords(); |
| | | } |
| | | |
| | | const dayBtn = ref<any>('default'); |
| | | const monBtn = ref<any>('primary'); |
| | | |
| | | function queryData(type: ViewMode) { |
| | | if (type === ViewMode.Day) { |
| | | dayBtn.value = 'primary'; |
| | | monBtn.value = 'default'; |
| | | curViewMode.value = ViewMode.Day; |
| | | tableApi.setGridOptions(gridOptions2); |
| | | } else if (type === ViewMode.Month) { |
| | | dayBtn.value = 'default'; |
| | | monBtn.value = 'primary'; |
| | | curViewMode.value = ViewMode.Month; |
| | | tableApi.setGridOptions(gridOptions); |
| | | } |
| | | tableApi.query(); |
| | | } |
| | | </script> |
| | | |
| | | <template> |
| | |
| | | <div class="flex h-full gap-[8px] flex-col"> |
| | | <BasicTable class="h-2/3" table-title="点检记录列表"> |
| | | <template #toolbar-tools> |
| | | <Space > |
| | | <Space> |
| | | <Button :type="dayBtn" @click.stop="queryData(ViewMode.Day)">日视图</Button> |
| | | <Button :type="monBtn" @click.stop="queryData(ViewMode.Month)">月视图</Button> |
| | | <a-button |
| | | :disabled="!vxeCheckboxChecked(tableApi)" |
| | | danger |
| | |
| | | </Popconfirm> |
| | | </Space> |
| | | </template> |
| | | |
| | | </BasicTable> |
| | | <BasisSubTable |
| | | :columns="recordCol" |
| | | :list-api="listMaintOrderGroupDetail" |
| | | :req-value="recordId" |
| | | class="h-1/3" |
| | | req-key="maintCode" |
| | | title="保养实施项目" |
| | | /> |
| | | <BasisSubTable :columns="recordCol" :list-api="listInspStRecord" :req-value="recordId" class="h-1/3" |
| | | req-key="inspCode" title="点检记录" /> |
| | | </div> |
| | | <InspStDrawer @reload="tableApi.query()" /> |
| | | </Page> |