<script setup lang="ts">
|
import type { Recordable } from '@vben/types';
|
|
import { nextTick, ref, watch } from 'vue';
|
|
import { useVbenDrawer } from '@vben/common-ui';
|
import { $t } from '@vben/locales';
|
import { getVxePopupContainer } from '@vben/utils';
|
|
import { Popconfirm, Space } from 'ant-design-vue';
|
|
import { useVbenVxeGrid, type VxeGridProps, vxeSortEvent } from '#/adapter/vxe-table';
|
import { listMaintOrditm } from '#/api/eims/maint-orditm';
|
import { columns } from '#/views/eims/maint-orditm/data';
|
import maintOrditmDrawer from '#/views/eims/maint-orditm/maint-orditm-drawer.vue';
|
|
interface Props {
|
orderId?: string;
|
}
|
|
const props = defineProps<Props>();
|
|
const completed = ref<string>('已完成');
|
// 未盘点
|
const uncompleted = ref<string>('未完成');
|
|
const gridOptions: VxeGridProps = {
|
checkboxConfig: {
|
// 高亮
|
highlight: true,
|
// 翻页时保留选中状态
|
reserve: true
|
// 点击行选中
|
// trigger: 'row'
|
},
|
columns,
|
height: 'auto',
|
keepSource: true,
|
pagerConfig: {},
|
proxyConfig: {
|
ajax: {
|
query: async ({ page }, formValues = {}) => {
|
if (props.orderId) {
|
const params = { orderId: props.orderId };
|
Object.assign(formValues, params);
|
} else {
|
const params = { orderId: -1 };
|
Object.assign(formValues, params);
|
}
|
return await listMaintOrditm({
|
pageNum: page.currentPage,
|
pageSize: page.pageSize,
|
...formValues
|
});
|
},
|
querySuccess: () => {
|
nextTick(() => {
|
// eslint-disable-next-line no-use-before-define
|
const data = tableApi?.grid.getData();
|
completed.value = '已完成';
|
uncompleted.value = '未完成';
|
if (data.length <= 0) return false;
|
const wc = data?.filter((i) => i.status === '1')?.length;
|
completed.value = `已完成(${wc})`;
|
uncompleted.value = `未完成(${data.length - wc})`;
|
});
|
}
|
}
|
},
|
rowConfig: {
|
isHover: true,
|
keyField: 'id'
|
},
|
sortConfig: {
|
// 远程排序
|
remote: true,
|
// 支持多字段排序 默认关闭
|
multiple: true
|
},
|
id: 'sub-orditm-index'
|
};
|
|
const [BasicTable, tableApi] = useVbenVxeGrid({
|
gridOptions,
|
gridEvents: {
|
sortChange: (sortParams) => vxeSortEvent(tableApi, sortParams)
|
}
|
});
|
|
const [MaintOrditmDrawer, maintOrditmDrawerApi] = useVbenDrawer({
|
connectedComponent: maintOrditmDrawer
|
});
|
|
function handleAdd() {
|
maintOrditmDrawerApi.setData({});
|
maintOrditmDrawerApi.open();
|
}
|
|
async function handleEdit(record: Recordable<any>) {
|
maintOrditmDrawerApi.setData({ id: record.id });
|
maintOrditmDrawerApi.open();
|
}
|
|
// 使用 watch 监听 resId 的变化
|
watch(
|
() => props.orderId,
|
(newVal, oldVal) => {
|
if (newVal !== oldVal && newVal) {
|
tableApi.query();
|
}
|
},
|
{ immediate: false }
|
);
|
</script>
|
|
<template>
|
<div class="w-full">
|
<BasicTable table-title="实施项目">
|
<template #toolbar-tools>
|
<Space>
|
<a-button>{{ uncompleted }}</a-button>
|
<a-button type="primary"> {{ completed }}</a-button>
|
</Space>
|
</template>
|
|
<template #equName="{ row }">
|
<Space>
|
<span>{{ row.equName }}</span>
|
</Space>
|
</template>
|
|
<template #action="{ row }">
|
<Space>
|
<ghost-button v-access:code="['eims:maintOrditm: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="['eims:maintOrditm:remove']" @click.stop="">
|
{{ $t('pages.common.delete') }}
|
</ghost-button>
|
</Popconfirm>
|
</Space>
|
</template>
|
</BasicTable>
|
<MaintOrditmDrawer @reload="tableApi.query()" />
|
</div>
|
</template>
|