90 lines
3.1 KiB
Vue
90 lines
3.1 KiB
Vue
<template>
|
|
<BasicModal v-bind="$attrs" :title="modalTitle" :width="1100" @register="registerModal" @ok="handleOk">
|
|
<BasicTable @register="registerTable" />
|
|
</BasicModal>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { computed, ref } from 'vue';
|
|
import { BasicModal, useModalInner } from '/@/components/Modal';
|
|
import { BasicTable, useTable } from '/@/components/Table';
|
|
import { list } from '/@/views/xslmes/mesXslInspectMaintainItem/MesXslInspectMaintainItem.api';
|
|
|
|
const emit = defineEmits(['register', 'select']);
|
|
|
|
const multipleMode = ref(true);
|
|
const filterItemCategory = ref('');
|
|
const selectedRows = ref<Recordable[]>([]);
|
|
|
|
const modalTitle = computed(() => (multipleMode.value ? '选择点检及保养项目（可多选）' : '选择点检及保养项目'));
|
|
|
|
function handleSelectionChange(_keys: string[], rows: Recordable[]) {
|
|
selectedRows.value = rows || [];
|
|
}
|
|
|
|
function fetchItemPage(params: Recordable) {
|
|
const p = { ...params };
|
|
if (filterItemCategory.value) {
|
|
p.itemCategory = filterItemCategory.value;
|
|
}
|
|
return list(p);
|
|
}
|
|
|
|
const [registerTable, { reload, getSelectRows, clearSelectedRowKeys }] = useTable({
|
|
api: fetchItemPage,
|
|
columns: [
|
|
{ title: '项目编号', dataIndex: 'itemCode', width: 120 },
|
|
{ title: '项目名称', dataIndex: 'itemName', width: 140 },
|
|
{ title: '项目类别', dataIndex: 'itemCategory_dictText', width: 90 },
|
|
{ title: '项目类型', dataIndex: 'itemType_dictText', width: 90 },
|
|
{ title: '设备部位', dataIndex: 'equipmentPartName', width: 110 },
|
|
{ title: '设备小部位', dataIndex: 'equipmentSubPartName', width: 110 },
|
|
{ title: '点检方式', dataIndex: 'inspectMethod_dictText', width: 90 },
|
|
{ title: '判断基准', dataIndex: 'judgmentCriteria', width: 160, ellipsis: true },
|
|
],
|
|
rowKey: 'id',
|
|
useSearchForm: true,
|
|
formConfig: {
|
|
labelWidth: 90,
|
|
schemas: [
|
|
{ label: '项目编号', field: 'itemCode', component: 'Input', colProps: { span: 8 } },
|
|
{ label: '项目名称', field: 'itemName', component: 'Input', colProps: { span: 8 } },
|
|
],
|
|
},
|
|
pagination: { pageSize: 10 },
|
|
canResize: false,
|
|
showIndexColumn: false,
|
|
immediate: true,
|
|
rowSelection: {
|
|
type: 'checkbox',
|
|
columnWidth: 48,
|
|
onChange: handleSelectionChange,
|
|
},
|
|
clickToRowSelect: true,
|
|
});
|
|
|
|
const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
|
|
multipleMode.value = data?.multiple !== false;
|
|
filterItemCategory.value = data?.itemCategory ? String(data.itemCategory) : '';
|
|
selectedRows.value = [];
|
|
clearSelectedRowKeys?.();
|
|
setModalProps({ confirmLoading: false });
|
|
reload();
|
|
});
|
|
|
|
async function handleOk() {
|
|
let rows = selectedRows.value?.length ? [...selectedRows.value] : ((getSelectRows?.() || []) as Recordable[]);
|
|
const valid = rows.filter((r) => r?.id && (r.itemCode != null || r.itemName != null));
|
|
if (!valid.length) {
|
|
closeModal();
|
|
return;
|
|
}
|
|
if (multipleMode.value) {
|
|
emit('select', valid);
|
|
} else {
|
|
emit('select', valid[0]);
|
|
}
|
|
closeModal();
|
|
}
|
|
</script>
|