yudao-dev/src/views/produce/workOrder/allocation.vue

<!--
 * @Author: zwq
 * @Date: 2021-11-18 14:16:25
 * @LastEditors: DY
 * @LastEditTime: 2024-07-19 18:59:13
 * @Description:
-->
<template>
	<el-drawer
		:visible.sync="visible"
		:show-close="false"
		:wrapper-closable="false"
		class="drawer"
		size="55%">
		<small-title slot="title" :no-padding="true">
			{{ '分配产量' }}
		</small-title>
		<div class="content">
			<div class='formContainer'>
				<el-row :gutter="20">
					<el-col :span="12"><span class='label'>工单名称：</span><span class='text'>{{ dataForm.name }}</span></el-col>
					<el-col :span="12"><span class='label'>工单编码：</span><span class='text'>{{ dataForm.code }}</span></el-col>
				</el-row>
				<el-row :gutter="20">
					<el-col :span="12"><span class='label'>产品名称：</span><span class='text'>{{ dataForm.productName }}</span></el-col>
					<el-col :span="12"><span class='label'>产品规格：</span><span class='text'>{{ dataForm.specifications }}</span></el-col>
				</el-row>
				<el-row :gutter="20">
					<el-col :span="12"><span class='label'>实际生产数量：</span><span class='text'>{{ dataForm.actualQuantity }}</span></el-col>
				</el-row>
			</div>

			<div class="attr-list">
				<el-table
					border
					:data="tableData"
					:header-cell-style="{
						background: '#F2F4F9',
						color: '#606266'
					}"
      		style="width: 100%">
					<el-table-column type="index" label="序号" width='50' align="center" />
					<el-table-column prop="orderName" label="订单名称" />
					<el-table-column prop="orderCode" label="订单编码" />
					<el-table-column prop="priority" label="优先级">
						<template slot-scope="scope">
							{{scope.row.priority == 1 ? '低' : scope.row.priority == 2 ? '正常' : scope.row.priority == 3 ? '高' : ''}}
						</template>
					</el-table-column>
					<el-table-column prop="planAssignmentQuantity" label="计划分配数量" />
					<el-table-column prop="actualAssignmentQuantity" label="实际分配数量">
						<template slot-scope="scope">
							<el-input-number :disabled='isSaved' v-model="scope.row.actualAssignmentQuantity" style='width: 100%;' controls-position="right" :min="0" :max="dataForm.actualQuantity"></el-input-number>
						</template>
					</el-table-column>
				</el-table>
			</div>

			<div class="drawer-body__footer">
				<el-button plain type="primary" @click="goback()">关闭</el-button>
				<el-button type="primary" @click="saveData()" :disabled='isSaved'>保存</el-button>
			</div>
		</div>
	</el-drawer>
</template>

<script>
import basicAdd from '../../core/mixins/basic-add';
import { getConOrderList, updateBatch, getCoreWO } from '@/api/base/coreWorkOrder';
import SmallTitle from './SmallTitle';

export default {
	mixins: [basicAdd],
	components: { SmallTitle },
	data() {
		return {
			addOrUpdateVisible: false,
			urlOptions: {
				infoURL: getCoreWO,
			},
			dataForm: {
        id: undefined,
        code: undefined,
        productId: '',
        remark: undefined,
			},
			tableData: [],
			visible: false,
			isSaved:false
		};
	},
	mounted() {},
	methods: {
		saveData() {
			console.log(this.tableData)
			let sunNum = 0
			this.tableData.forEach(row => {
			  sunNum+=(row.actualAssignmentQuantity || 0)
			})
			if (sunNum > this.dataForm.actualQuantity) {
				this.$message.warning('各订单实际分配数量之和不能大于实际生产数量');
				return
			}
			updateBatch(this.tableData).then((response) => {
				this.$modal.msgSuccess('分配成功');
				this.isSaved = true;
			});
		},
		getList() {
			// 获取产品Bom详细列表
			getConOrderList({
				workOrderId: this.dataForm.id
			}).then((response) => {
				this.tableData = response.data.map(item => {
					item.actualAssignmentQuantity = item.actualAssignmentQuantity || 0
					item.workOrderId = this.dataForm.id
					return item
				});
			});
		},
		init(id) {
			this.dataForm.id = id || undefined;
			this.visible = true;
			this.isSaved = false;
			this.$nextTick(() => {
				if (this.dataForm.id) {
					// 获取工单详情
					this.urlOptions.infoURL(id).then(response => {
            this.dataForm = response.data;
          });
					// 获取工单订单明细
					this.getList();
				} else {}
			});
		},
		goback() {
			this.$emit('refreshDataList');
			this.visible = false;
		}
	}
};
</script>
<style scoped>
.drawer >>> .el-drawer {
	border-radius: 8px 0 0 8px;
	display: flex;
	flex-direction: column;
}

.drawer >>> .el-form-item__label {
	padding: 0;
}

.drawer >>> .el-drawer__header {
	margin: 0;
	padding: 32px 32px 24px;
	border-bottom: 1px solid #dcdfe6;
}
.drawer >>> .el-drawer__body {
	flex: 1;
	height: 1px;
	display: flex;
	flex-direction: column;
}

.drawer >>> .content {
	padding: 30px 24px;
	flex: 1;
	display: flex;
	flex-direction: column;
	/* height: 100%; */
}

.drawer >>> .visual-part {
	flex: 1 auto;
	max-height: 30vh;
	overflow: hidden;
	overflow-y: scroll;
	padding-right: 10px; /* 调整滚动条样式 */
}

.drawer >>> .el-form {
	padding: 0 16px;
}

.drawer-body__footer {
	display: flex;
	justify-content: flex-end;
	padding: 18px;
}
.formContainer {
  .label {
		display: inline-block;
		padding: 5px 0px;
		font-size: 14px;
		font-weight: 600;
	}
	.text {
		display: inline-block;
		padding: 5px 0px;
		font-size: 14px;
		color:rgba(102, 102, 102, 0.75);
	}
	margin-bottom: 10px;
}
</style>