yudao-dev/src/views/base/packagingPrintLog2/components/UnPrint.vue

<template>
	<div class="show-box">
		<!-- 单选 -->
		<other-msg
			:printMsg1="printMsg1"
			:printMsg2="printMsg2"
			:printMsg3="printMsg3"
			@changeChoose="changeChoose" />
		<!-- 搜索工作栏 -->
		<search-bar
			:formConfigs="formConfig"
			ref="searchBarForm"
			@headBtnClick="buttonClick" />
		<!-- 列表 -->
		<base-table
			:page="queryParams.pageNo"
			:limit="queryParams.pageSize"
			:table-props="tableProps"
			:table-data="list"
			@emitFun="inputChange">
			<method-btn
				v-if="tableBtn.length"
				slot="handleBtn"
				:width="260"
				label="操作"
				:method-list="tableBtn"
				@clickBtn="handleClick" />
		</base-table>
		<pagination
			:page.sync="queryParams.pageNo"
			:limit.sync="queryParams.pageSize"
			:total="total"
			@pagination="getList" />
		<!-- 预览 -->
		<print-preview ref="preView" />
	</div>
</template>
<script>
import { parseTime } from '@/utils/ruoyi';
import inputArea from './InputArea.vue';
const tableProps = [
	{
		prop: 'packagingCode',
		label: '成品周转编号',
		minWidth: 160,
		showOverflowtooltip: true,
	},
	{
		prop: 'lineId',
		label: '产线',
		showOverflowtooltip: true,
	},
	{
		prop: 'specifications',
		label: '规格',
		showOverflowtooltip: true,
	},
	{
		prop: 'check',
		label: '判定',
		showOverflowtooltip: true,
	},
	{
		prop: 'workStation',
		label: '工位号',
		showOverflowtooltip: true,
	},
	{
		prop: 'num',
		label: '片数',
		subcomponent: inputArea,
		minWidth: 120,
	},
	{
		prop: 'remark',
		label: '备注1',
		showOverflowtooltip: true,
	},
	{
		prop: 'printStatus',
		label: '打印状态',
		filter: (val) => (val == 1 ? '未打印' : '已打印'),
	},
	{
		prop: 'createTime',
		label: '时间',
		filter: parseTime,
		minWidth: 160,
		showOverflowtooltip: true,
	},
	{
		prop: 'groupClass',
		label: '班次',
		showOverflowtooltip: true,
	},
];
import OtherMsg from './OtherMsg';
import { getPackingPage, updatePacking } from '@/api/base/packingInfo';
import { getCorePLList } from '@/api/base/coreProductionLine';
import printPreview from './preview';
import printTemplate from '../print-template';
export default {
	name: 'UnPrint',
	components: { OtherMsg, printPreview },
	data() {
		return {
			printMsg1: {
				customerId: '',
				sealWorker: '',
				packWorker: '',
				processCard: '',
				pallet: '',
				remark: '',
			},
			printMsg2: {
				customerId: '',
				sealWorker: '',
				packWorker: '',
				processCard: '',
				pallet: '',
				remark: '',
			},
			printMsg3: {
				customerId: '',
				sealWorker: '',
				packWorker: '',
				processCard: '',
				pallet: '',
				remark: '',
			},
			chooseMsg: 1, //单选
			formConfig: [
				{
					type: 'select',
					label: '产线',
					selectOptions: [],
					param: 'lineId',
					filterable: true,
				},
				{
					type: 'datePicker',
					label: '时间段',
					dateType: 'daterange',
					format: 'yyyy-MM-dd HH:mm:ss',
					valueFormat: 'yyyy-MM-dd HH:mm:ss',
					rangeSeparator: '-',
					startPlaceholder: '开始时间',
					endPlaceholder: '结束时间',
					param: 'timeVal',
					defaultSelect: [],
					width: 350,
				},
				{
					type: 'button',
					btnName: '查询',
					name: 'search',
					color: 'primary',
				},
			],
			// 查询参数
			queryParams: {
				pageNo: 1,
				pageSize: 20,
				printStatus: '1',
				lineId: '',
				createTime: [],
			},
			total: 0,
			tableProps,
			list: [],
			tableBtn: [
				this.$auth.hasPermiAnd([
					'base:order:query',
					'base:order-con-group-order:create',
				])
					? {
							type: 'view',
							btnName: '预览',
					  }
					: undefined,
				this.$auth.hasPermi('base:order-group:update')
					? {
							type: 'print',
							btnName: '打印',
					  }
					: undefined,
				this.$auth.hasPermi('base:order-group:update')
					? {
							type: 'printed',
							btnName: '已打印',
					  }
					: undefined,
				this.$auth.hasPermiAnd([
					'base:order-group:update',
					'base:core-product:query',
					'base:core-customer:query',
				])
					? {
							type: 'edit',
							btnName: '编辑',
							showParam: {
								type: '&',
								data: [
									{
										type: 'unequal',
										name: 'isEdit',
										value: true,
									},
								],
							},
					  }
					: undefined,
				this.$auth.hasPermiAnd([
					'base:order-group:update',
					'base:core-product:query',
					'base:core-customer:query',
				])
					? {
							type: 'save',
							btnName: '保存',
							showParam: {
								type: '&',
								data: [
									{
										type: 'equal',
										name: 'isEdit',
										value: true,
									},
								],
							},
					  }
					: undefined,
				this.$auth.hasPermi('base:order-group:query')
					? {
							type: 'delete',
							btnName: '删除',
					  }
					: undefined,
			].filter((v) => v),
			printData: {},
		};
	},
	mounted() {
		this.getLineList();
		console.log(printTemplate);
		console.log('================printTemplate');
	},
	methods: {
		getLineList() {
			getCorePLList().then((res) => {
				this.formConfig[0].selectOptions = res.data;
			});
		},
		getList() {
			getPackingPage({ ...this.queryParams }).then((res) => {
				this.list = res.data.records || [];
				this.total = res.data.total;
			});
		},
		// 单选
		changeChoose(val) {
			this.chooseMsg = val;
		},
		buttonClick(val) {
			this.queryParams.lineId = val.lineId;
			this.queryParams.createTime = val.timeVal;
			this.getList();
		},
		handleClick(val) {
			console.log(val);
			switch (val.type) {
				case 'edit':
					this.editNum(val.data);
					break;
				case 'save':
					this.saveNum(val.data);
					break;
				case 'view':
					this.preView();
					break;
				case 'print':
					this.printTemp();
					break;
				default:
			}
		},
		// 编辑
		editNum(val) {
			let obj = this.list[val._pageIndex - 1];
			obj.isEdit = true;
			this.$set(this.list, val._pageIndex - 1, obj);
		},
		// 保存
		saveNum(val) {
			// 调用修改接口
			updatePacking({ id: val.id, num: val.num }).then(() => {
				this.getList();
			});
		},
		// 输入框改变num
		inputChange(val) {
			this.list[val._pageIndex - 1][val.prop] = val[val.prop];
		},
		// 预览
		preView() {
			var hiprintTemplate = new hiprint.PrintTemplate({
				template: printTemplate,
			});
			this.$refs.preView.show(hiprintTemplate);
		},
		// 打印
		printTemp() {
			console.log('11');
			var printData = {};
			let hiprintTemplate = this.$print(
				undefined,
				printTemplate,
				printData,
				{},
				{
					styleHandler: () => {
						let css =
							'<link href="http://hiprint.io/Content/hiprint/css/print-lock.css" media="print" rel="stylesheet">';
						return css;
					},
				}
			);
			console.log(hiprintTemplate);
		},
	},
};
</script>