lx-MOM-front/src/views/quality/drawingProcessCheckRecord/index.vue

<template>
	<div>
		<my-card title="搜索条件" search>
			<n-form inline>
				<n-form-item label="生产工单">
					<n-input
						v-model:value="searchForm.generateWorkOrderNumber"
						:style="{ width: formItemWidth }"
						type="text"
						placeholder="请输入生产工单"
					/>
				</n-form-item>
				<n-form-item label="订单编号">
					<n-input
						v-model:value="searchForm.orderNumber"
						type="text"
						:style="{ width: formItemWidth }"
						placeholder="请输入订单编号"
					/>
				</n-form-item>
				<n-form-item label="是否合格">
					<n-select
						v-model:value="searchForm.qualifiedOrNot"
						placeholder="请选择是否合格"
						:options="qualifiedOrNotList"
						:style="{ width: formItemWidth }"
					></n-select>
				</n-form-item>
				<n-form-item label="机台">
					<n-select
						v-model:value="machineId"
						placeholder="请选择机台"
						:options="machineList"
						:style="{ width: formItemWidth }"
						@update-value="(val,item : any) => {
              searchForm.deviceName = item.label
            }"
					></n-select>
				</n-form-item>
				<n-form-item>
					<component :is="useSearchBtn(search, reset)"></component>
				</n-form-item>
			</n-form>
		</my-card>
		<my-card title="拉丝过程检列表">
			<template #right>
				<div>
					<CxColumns v-model:columns="columns" />
				</div>
			</template>
			<n-data-table
				:loading="loading"
				:columns="columns"
				:data="data"
				:max-height="dataTableConfig.maxHeight"
				:scroll-x="dataTableConfig.scrollWidth(columns)"
			></n-data-table>
			<my-pagination v-model:search-form="searchForm" @init="init"></my-pagination>
		</my-card>
	</div>
</template>

<script setup lang="tsx">
import type { Ref } from 'vue';
import { ref, onMounted } from 'vue';
import type { DataTableColumns } from 'naive-ui';
import { getWorkbenchWiredrawingList } from '@/service/api/md/workbench/wiredrawing';
import { dataTableConfig } from '@/config/dataTableConfig';
import { useLoading } from '~/src/hooks';
import { useSearchBtn } from '~/src/hooks/common/useBtn';
import { getQcWireDrawingRecordList } from '~/src/service/api/quality/drawingProcessCheckRecord/index';
const searchForm = ref<drawingProcessCheckRecord.searchForm>({
	pageNum: 1,
	pageSize: 10,
	total: 0,
	generateWorkOrderNumber: '',
	orderNumber: '',
	qualifiedOrNot: null,
	deviceName: null
});
const { loading, startLoading, endLoading } = useLoading();
const formItemWidth = ref<string>('180px');
const machineList = ref<{ label: string; value: number }[]>([]);
const qualifiedOrNotList = ref<{ label: string; value: string }[]>([
	{ label: '合格', value: '0' },
	{ label: '不合格', value: '1' }
]);
const machineId = ref<number | null>(null);
const data = ref<drawingProcessCheckRecord.TableList[]>([]);

const columns: Ref<DataTableColumns<drawingProcessCheckRecord.TableList>> = ref([
	{
		title: '序号',
		key: 'index',
		align: 'center',
		width: 70,
		render: (_row, index) => (searchForm.value.pageNum - 1) * searchForm.value.pageSize + index + 1
	},
	{
		title: '工单类型',
		key: 'workOrdeType',
		align: 'center',
		width: 100,
		render: row => {
			return row.workOrdeType === '0' ? '板材' : '金属';
		}
	},
	// {
	//   title: '线径数据',
	//   key: 'attr1',
	//   align: 'center',
	//   width: 100
	// },
	{
		title: '机台',
		key: 'deviceName',
		align: 'center',
		width: 100
	},
	{
		title: '订单类型',
		key: 'orderType',
		width: 100,
		render: row => {
			return row.orderType === '0' ? '客户订单' : '备库订单';
		}
	},
	{
		title: '订单编号',
		key: 'orderNumber',
		align: 'center',
		width: 140,
		ellipsis: {
			tooltip: true
		}
	},
	// {
	//   title: '客户',
	//   key: 'clientName',
	//   align: 'center',
	//   width: 140,
	//   ellipsis: {
	//     tooltip: true
	//   }
	// },
	{
		title: '生产工单号',
		key: 'generateWorkOrderNumber',
		align: 'center',
		width: 100,
		ellipsis: {
			tooltip: true
		}
	},
	{
		title: '产品规格',
		key: 'productSpecifications',
		align: 'center',
		width: 100
	},
	{
		title: '数量',
		key: 'weight',
		align: 'center',
		width: 100
	},
	{
		title: '单位',
		key: 'measure',
		align: 'center',
		width: 100
	},
	{
		title: '批号',
		key: 'batchNumber',
		align: 'center',
		width: 100
	},
	{
		title: '日期',
		key: 'createTime',
		align: 'center',
		width: 180
	},
	{
		title: '质检人',
		key: 'qualityInspector',
		align: 'center',
		width: 100
	},
	{
		title: '是否合格',
		key: 'qualifiedOrNot',
		align: 'center',
		width: 100,
		render: row => (
			<n-tag type={row.qualifiedOrNot === '0' ? 'success' : 'error'}>
				{row.qualifiedOrNot === '0' ? '合格' : '不合格'}
			</n-tag>
		)
	},
	{
		title: '缺陷项',
		key: '',
		align: 'center',
		width: 180,
		ellipsis: {
			tooltip: true
		},
		render: row => {
			let defectName = '';
			if (row.qcDefectList) {
				row.qcDefectList.forEach(item => {
					defectName += `${item.defectName}, `;
				});
				defectName = defectName.slice(0, -1);
			}
			return defectName;
		}
	}
]);

function search() {
	init();
}
function reset() {
	searchForm.value = {
		pageNum: 1,
		pageSize: 10,
		total: 0,
		generateWorkOrderNumber: '',
		orderNumber: '',
		qualifiedOrNot: null,
		deviceName: null
	};
	init();
}

function getList() {
	getWorkbenchWiredrawingList({ pageSize: 999 }).then(res => {
		if (res.code === 200) {
			res.rows.forEach((item: any) => {
				machineList.value.push({
					label: item.equipmentCode,
					value: item.id
				});
			});
		}
	});
}

function init() {
	startLoading();
	getQcWireDrawingRecordList(searchForm.value).then(res => {
		endLoading();
		if (res.code === 200) {
			data.value = res.rows;
			searchForm.value.total = res.total;
		}
	});
}
onMounted(() => {
	init();
	getList();
});
</script>

<style scoped>
:deep(.n-data-table-td) {
	text-align: center;
}
:deep(.n-space) {
	justify-content: center !important;
}

:deep(.n-data-table .n-data-table-th .n-data-table-th__title-wrapper) {
	text-align: center;
}
</style>