yudao-dev/src/views/base/coreWorkOrder/allocation.vue

<!--
 * @Author: zwq
 * @Date: 2021-11-18 14:16:25
 * @LastEditors: DY
 * @LastEditTime: 2024-03-13 14:47:44
 * @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="formContent">
				<el-row :gutter="20">
					<el-col :span="8">
						<div class="blodTip">工单名称</div>
						<div class="lightTip">{{ dataForm.name }}</div>
					</el-col>
					<el-col :span="8">
						<div class="blodTip">工单编码</div>
						<div class="lightTip">{{ dataForm.code }}</div>
					</el-col>
					<el-col :span="8">
						<div class="blodTip">产品名称</div>
						<div class="lightTip">{{ dataForm.productName }}</div>
					</el-col>
				</el-row>
				<el-row :gutter="20">
					<el-col :span="8">
						<div class="blodTip">产品规格</div>
						<div class="lightTip">{{ dataForm.specifications }}</div>
					</el-col>
					<el-col :span="8">
						<div class="blodTip">实际生产数量</div>
						<div class="lightTip">{{ dataForm.expectedTime }}</div>
					</el-col>
				</el-row>
			</div>

			<div class="attr-list">
				<!-- <el-button v-show="!isdetail" type="success" size="small" style="float: right" @click="addRow()">添加一行</el-button> -->
				<el-table
					:data="tableData"
      		style="width: 100%">
					<el-table-column type="index" label="序号" />
					<el-table-column prop="orderName" label="订单名称" />
					<el-table-column prop="orderCode" label="订单编码" />
					<el-table-column prop="priority" label="优先级" />
					<el-table-column prop="planAssignmentQuantity" label="计划分配数量" >
						<template slot-scope="scope">
							<el-input v-model="scope.row.planAssignmentQuantity" :disabled="scope.row.isallocation"></el-input>
						</template>
					</el-table-column>
					<el-table-column prop="actualAssignmentQuantity" label="实际分配数量">
						<template slot-scope="scope">
							<el-input v-model="scope.row.actualAssignmentQuantity" :disabled="scope.row.isallocation"></el-input>
						</template>
					</el-table-column>
					<el-table-column label="操作">
						<template slot-scope="scope">
							<el-button type="text" size="small" @click="saveData(scope.row)">保存</el-button>
							<!-- <el-tooltip v-if="!scope.row.isEdit" placement="top" content="编辑">
								<el-button
									type="text"
									:style="{color:'#0B58FF'}"
									size="mini"
									@click="edit(scope.row)"
								>
									<svg-icon style="width: 18px; height: 18px" class="item-icon" icon-class="edit" />
								</el-button>
							</el-tooltip> -->
							
							<!-- <el-tooltip placement="top" content="删除">
								<el-button
									type="text"
									:style="{color:'#FF5454'}"
									size="mini"
									@click="deleteDetail(scope.row)"
								>
									<svg-icon style="width: 18px; height: 18px" class="item-icon" icon-class="table_delete" />
								</el-button>
							</el-tooltip> -->
						</template>
					</el-table-column>
				</el-table>
				<pagination
					v-show="listQuery.total > 0"
					:total="listQuery.total"
					:page.sync="listQuery.pageNo"
					:limit.sync="listQuery.pageSize"
					:page-sizes="[5, 10, 15]"
					@pagination="getList" />
			</div>

			<div class="drawer-body__footer">
				<el-button style="" type="primary" @click="goback()">关闭</el-button>
				<!-- <el-button v-if="isdetail" type="primary" @click="goEdit()">
					编辑
				</el-button>
				<el-button v-else type="primary" @click="dataFormSubmit()">确定</el-button> -->
			</div>
		</div>

		<!-- <attr-add
			v-if="addOrUpdateVisible"
			ref="addOrUpdate"
			:material-id="dataForm.id"
			@refreshDataList="getList" /> -->
	</el-drawer>
</template>

<script>
import basicAdd from '../../core/mixins/basic-add';
import { getConOrderList, updateConCoreWOr, getCoreWO } from '@/api/base/coreWorkOrder';
import SmallTitle from '../material/SmallTitle';
// import { parseTime } from '../../core/mixins/code-filter';
// import attrAdd from './attr-add';

export default {
	mixins: [basicAdd],
	components: { SmallTitle },
	data() {
		return {
			addOrUpdateVisible: false,
			urlOptions: {
				infoURL: getCoreWO,
			},
			listQuery: {
				pageSize: 10,
				pageNo: 1,
				total: 0,
			},
			dataForm: {
        id: undefined,
        code: undefined,
        productId: '',
        remark: undefined,
			},
			productList: [],
			materialAttrList: [],
			materialList: [],
			tableData: [],
			visible: false,
			isdetail: false,
			idAttrShow: false
		};
	},
	mounted() {},
	methods: {
		initData() {
			// this.materialAttrList.splice(0);
			this.listQuery.total = 0;
		},
		edit(row) {
			row.isEdit = true
		},
		saveData(row) {
			if (row.actualAssignmentQuantity) {
				if (row.id) {
					// updateMaterialPBDet({
					// 	...row
					// }).then((response) => {
					// 	this.$modal.msgSuccess('修改成功');
					// 	// this.visible = false;
					// 	this.getList();
					// });
					// return;
				}
					// 修改的提交
				updateConCoreWOr({
					...row,
					workOrderId: this.dataForm.id
				}).then((response) => {
					this.$modal.msgSuccess('分配成功');
					// this.visible = false;
					this.getList();
				});
			} else {
				this.$message.warning('请填写实际分配数量');
			}
		},
		getList() {
			// 获取工单分配详细列表
			getConOrderList({
				...this.listQuery,
				workOrderId: this.dataForm.id
			}).then((response) => {
				this.tableData = response.data.map(item => {
					item.isEdit = false
					item.isallocation = item.actualAssignmentQuantity ? true : false
					return item
				});
				this.listQuery.total = response.data.length;
			});
		},
		// 构造一行
		// addRow() {
		// 	const row = {
		// 		bomId: this.dataForm.id,
		// 		materialId: '',
		// 		num: 0,
		// 		materialCode: undefined,
		// 		unit: undefined,
		// 		remark: '',
		// 		isEdit: true
		// 	}
		// 	this.tableData.push(row)
		// },
		init(id, isdetail) {
			this.initData();
			this.isdetail = isdetail || false;
			this.dataForm.id = id || undefined;
			this.visible = true;
			// if (id) {
			// 	this.idAttrShow = true
			// } else {
			// 	this.idAttrShow = false
			// }

			this.$nextTick(() => {
				// this.$refs['dataForm'].resetFields();

				if (this.dataForm.id) {
					// 获取工单详情
					this.urlOptions.infoURL(id).then(response => {
            this.dataForm = response.data;
          });
					// 获取工单订单明细
					this.getList();
				} else {}
			});
		},
		goback() {
			this.$emit('refreshDataList');
			this.visible = false;
			// this.initData();
		},
		goEdit() {
			this.isdetail = false;
		},
		// 新增 / 修改
		addNew(id) {
			this.addOrUpdateVisible = true;
			this.$nextTick(() => {
				this.$refs.addOrUpdate.init(id);
			});
		}
	}
};
</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,
.drawer >>> .attr-list {
	padding: 0 16px;
}

.drawer-body__footer {
	display: flex;
	justify-content: flex-end;
	padding: 18px;
}
.formContent {
	font-size: 16px;
	line-height: 1.5;
	margin-bottom: 10px;
	width: 100%;
}
.blodTip {
	height: 16px;
	font-size: 14px;
	font-weight: 600;
	color: rgba(0,0,0,0.85);
	margin-bottom: 8px;
}
.lightTip {
	/* height: 16px; */
	font-size: 14px;
	font-weight: 400;
	color: rgba(102,102,102,0.75);
	margin-bottom: 12px;
}
</style>