lx-MOM-front/src/views/produce/feed/index.vue

<template>
	<div>
		<my-card :title="title">
			<template #right>
				<div style="display: flex; align-items: center">
					<CxColumns v-model:columns="columns" />
					<n-button class="ml-5px" type="primary" size="small" attr-type="button" style="width: 80px" @click="back">
						返回
					</n-button>
				</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="ts">
import { ref, onMounted } from 'vue';
import type { Ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import type { DataTableColumns } from 'naive-ui';
import { dataTableConfig } from '@/config/dataTableConfig';
import { useLoading } from '~/src/hooks';
import { getItputLog } from '~/src/service/api/produre/feedRecords/index';
const { loading, startLoading, endLoading } = useLoading();

const route = useRoute();

const router = useRouter();
const title = ref<string>('投料记录');

const searchForm = ref<{
	pageNum: number;
	pageSize: number;
	total: number;
	taskId: number;
	taskType: string;
}>({
	pageNum: 1,
	pageSize: 10,
	total: 0,
	taskId: 0,
	taskType: '0'
});

const data = ref<feedRecords.TabelList[]>([]);

const columns: Ref<DataTableColumns<feedRecords.TabelList>> = ref([
	{
		title: '序号',
		key: 'index',
		align: 'center',
		width: 70,
		render: (_row, index) => (searchForm.value.pageNum - 1) * searchForm.value.pageSize + index + 1
	},
	{
		title: '工单类型',
		key: 'taskType',
		width: 100,
		render: row => {
			return row.taskType === '0' ? '拉丝' : '漆包';
		}
	},
	{
		title: '机台',
		key: 'workstationCode',
		width: 100
	},
	{
		title: '订单类型',
		key: 'orderType',
		width: 100,
		render: row => {
			return row.orderType === '0' ? '客户订单' : '备库订单';
		}
	},
	// {
	//   title: '订单编号',
	//   key: 'orderSn',
	//   width: 100
	// },
	{
		title: '客户',
		key: 'clientName',
		width: 100
	},
	{
		title: '生产工单号',
		key: 'taskSn',
		width: 100,
		ellipsis: {
			tooltip: true
		}
	},
	{
		title: '二维码编号',
		key: 'inputSn',
		width: 100,
		ellipsis: {
			tooltip: true
		}
	},
	{
		title: '产品型号',
		key: 'productModel',
		width: 100
	},
	{
		title: '产品规格',
		key: 'productSpecification',
		width: 100
	},
	{
		title: '厂家料号',
		key: 'partNumber',
		width: 100,
		ellipsis: {
			tooltip: true
		}
	},
	{
		title: '投料数量',
		key: 'inputWeight',
		width: 100
	},
	{
		title: '入库批号',
		key: 'batchCode',
		width: 100
	},
	{
		title: '单位',
		key: 'measureName',
		width: 100
	},
	{
		title: '投料规格',
		key: 'itemSpecification',
		width: 100
	},
	{
		title: '投料时间',
		key: 'createTime',
		width: 180
	},
	{
		title: '操作人',
		key: 'createBy',
		width: 100
	}
]);

async function init() {
	startLoading();
	getItputLog({ ...searchForm.value }).then(res => {
		if (res.code === 200) {
			data.value = res.rows;
			searchForm.value.total = res.total;
		}
		endLoading();
	});
}

function back() {
	router.go(-1);
}

onMounted(() => {
	title.value = `${route.query.title}-${title.value}`;
	searchForm.value.taskId = Number(route.query.id);
	if (route.query.title === '漆包') {
		searchForm.value.taskType = '1';
		columns.value = [
			...columns.value,
			...[
				{
					title: '轴号',
					key: 'axleNumber',
					width: 100
				},
				{
					title: '轴位置数',
					key: 'alexPositionNumber',
					width: 100
				}
			]
		];
	}
	init();
});
</script>

<style scoped></style>