wms-njlm/src/views/po/order/index.vue

<template>
	<div class="app-container">
		<search-bar
			:formConfigs="formConfig"
			ref="searchBarForm"
			@headBtnClick="buttonClick" />
		<el-table
			:data="tableData"
			:header-cell-style="{
				background: '#F2F4F9',
				color: '#606266',
			}"
			border
			v-loading="dataListLoading"
			style="width: 100%"
			ref="dataList">
			<el-table-column type="expand">
				<template slot-scope="scope">
					<product :order-id="scope.row.id"></product>
				</template>
			</el-table-column>
			<el-table-column prop="orderCode" label="订单号"></el-table-column>
			<el-table-column prop="custom" label="客户"></el-table-column>
			<el-table-column prop="shipDate" label="订单出货时间">
				<template v-slot="scope">
					<span>{{ parseTime(scope.row.shipDate) }}</span>
				</template>
			</el-table-column>
			<el-table-column prop="shipment" label="出货是否完成">
				<template slot-scope="scope">
					<span>
						{{ scope.row.shipment === 0 ? '未完成' : '已完成' }}
					</span>
				</template>
			</el-table-column>
			<el-table-column label="操作" width="120">
				<template v-slot="scope">
					<el-popconfirm
						@confirm="setShipment(scope.row.id)"
						title="请再次确认出货是否已完成!">
						<el-button
							slot="reference"
							size="mini"
							v-if="scope.row.shipment === 0"
							type="text">
							出货完成
						</el-button>
					</el-popconfirm>
				</template>
			</el-table-column>
		</el-table>
		<pagination
			:limit.sync="listQuery.pageSize"
			:page.sync="listQuery.pageNo"
			:total="listQuery.total"
			@pagination="getDataList" />
	</div>
</template>

<script>
import product from './good-mini';
import { getOrderPage, updateOrder } from '@/api/po/order';

export default {
	data() {
		return {
			urlOptions: {
				getDataListURL: getOrderPage,
			},
			tableData: [],
			dataListLoading: false,
			listQuery: {
				pageSize: 10,
				pageNo: 1,
				total: 1,
			},
			formConfig: [
				{
					type: 'input',
					label: '订单号',
					placeholder: '订单号',
					param: 'code',
				},
				{
					type: 'input',
					label: '客户',
					placeholder: '客户',
					param: 'name',
				},
				{
					type: 'datePicker',
					label: '订单出货日期',
					dateType: 'daterange',
					format: 'yyyy-MM-dd',
					valueFormat: 'yyyy-MM-dd hh:mm:ss',
					rangeSeparator: '-',
					startPlaceholder: '开始时间',
					endPlaceholder: '结束时间',
					param: 'searchTime',
				},
				{
					type: 'button',
					btnName: '搜索',
					name: 'search',
					color: 'primary',
				},
				// {
				// 	type: this.$auth.hasPermi('base:factory:create') ? 'separate' : '',
				// },
				// {
				// 	type: this.$auth.hasPermi('base:factory:export') ? 'button' : '',
				// 	btnName: '导出',
				// 	name: 'export',
				// 	color: 'warning',
				// },
			],
		};
	},
	components: {
		product,
	},
	created() {},
	mounted() {
		this.getDataList();
	},
	methods: {
		// 获取数据列表
		getDataList() {
			this.dataListLoading = true;
			this.urlOptions.getDataListURL(this.listQuery).then((response) => {
				this.tableData = response.data.list;
				this.listQuery.total = response.data.total;
				this.dataListLoading = false;
			});
		},
		// 每页数
		sizeChangeHandle(val) {
			this.listQuery.pageSize = val;
			this.listQuery.pageNo = 1;
			this.getDataList();
		},
		// 当前页
		currentChangeHandle(val) {
			this.listQuery.pageNo = val;
			this.getDataList();
		},
		buttonClick(val) {
			switch (val.btnName) {
				case 'search':
					this.listQuery.pageNo = 1;
					this.listQuery.pageSize = 10;
					this.listQuery.custom = val.name;
					this.listQuery.orderCode = val.code;
					this.listQuery.shipDate = val.searchTime;
					this.listQuery.startTime = val.searchTime ? val.searchTime[0] : '';
					this.listQuery.endTime = val.searchTime ? val.searchTime[1] : '';
					this.getDataList();
					break;
				case 'reset':
					this.$refs.searchBarForm.resetForm();
					this.listQuery = {
						pageSize: 10,
						pageNo: 1,
						total: 1,
					};
					this.getDataList();
					break;
				default:
					console.log(val);
			}
		},
		setShipment(id) {
			const data = {
				id: id,
				shipment: 1,
			};
			updateOrder(data).then((response) => {
				this.$modal.msgSuccess('修改成功');
				this.getDataList();
			});
		},
	},
};
</script>
<style>
.app-container .el-table .el-table__cell {
	padding: 0;
	height: 35px;
}
</style>