yudao-dev/src/views/extend/processFlowView/components/ProcessBomList.vue

<!-- 
    filename: ProcessBomList.vue
    author: liubin
    date: 2023-10-20 15:00:58
    description: 
-->

<template>
	<section class="process-bom">
		<SearchBar :formConfigs="searchBarFormConfig" ref="search-bar" />

		<div
			class="btns"
			style="
				text-align: right;
				position: absolute;
				top: 20px;
				right: 20px;
				display: flex;
			">
			<el-button
				type="primary"
				plain
				:disabled="currentDet == null"
				class="btn-create"
				@click="handleAddEquipment"
				icon="el-icon-plus">
				分配设备
			</el-button>
			<el-input
				icon="el-icon-search"
				placeholder="搜索"
				v-model="searchText"
				style="margin-left: 20px">
				<i slot="prefix" class="el-input__icon el-icon-search"></i>
			</el-input>
		</div>

		<!-- 列表 -->
		<base-table
			:table-props="tableProps"
			:page="queryParams.pageNo"
			:limit="queryParams.pageSize"
			:table-data="list"
			@emitFun="handleEmitFun">
			<method-btn
				v-if="tableBtn.length"
				slot="handleBtn"
				label="操作"
				:width="120"
				:method-list="tableBtn"
				@clickBtn="handleTableBtnClick" />
		</base-table>

		<!-- 分页组件 -->
		<pagination
			v-show="total > 0"
			:total="total"
			:page.sync="queryParams.pageNo"
			:limit.sync="queryParams.pageSize"
			@pagination="getList" />

		<base-dialog
			dialogTitle="选择设备"
			:dialogVisible="open"
			width="45%"
			@close="cancel"
			@cancel="cancel"
			@confirm="submitForm">
			<!-- <CustomTransfer /> -->
			<BomSelector :bom-list="bomList" v-model="selectedBoms" />
		</base-dialog>
	</section>
</template>

<script>
import BomSelector from './BomSelector.vue';

export default {
	name: 'ProcessBom',
	components: { BomSelector },
	props: {
		currentDet: {
			type: Object,
			default: null,
		},
	},
	data() {
		return {
			open: false,
			eqList: [],
			bomList: [],
			finalList: [],
			choosedEquipments: [],
			searchBarFormConfig: [{ label: '工序下设备' }],
			tableProps: [
				{ prop: 'equipmentId', label: '设备名称' },
				{ prop: 'materialName', label: '物料BOM' },
				{ prop: 'valueName', label: '参数BOM' },
			],
			list: [],
			total: 0,
			tableBtn: [],
			queryParams: {
				pageNo: 1,
				pageSize: 10,
			},
			searchText: '',
			selectedBoms: [],
		};
	},
	watch: {
		currentDet: {
			handler(val) {
				console.log('currentDet', val);
				if (val != null) {
					this.getList(val);
				} else {
					this.clearList();
				}
			},
			immediate: true,
			deep: true,
		},
	},
	methods: {
		handleEmitFun() {},
		handleTableBtnClick() {},
		put(payload) {
			return this.http(this.updateUrl, 'put', payload);
		},
		post(payload) {
			return this.http(this.addUrl, 'post', payload);
		},
		recv(payload) {
			return this.http(this.pageUrl, 'get', payload);
		},
		info(payload) {
			return this.http(this.infoUrl, 'get', payload);
		},
		http(url, method, payload) {
			return this.$axios({
				url,
				method,
				params: method === 'get' ? payload : null,
				data: method !== 'get' ? payload : null,
			});
		},
		async submitForm() {
			console.log('selectedBoms', this.selectedBoms);
			if (this.selectedBoms.length) {
				const { code, data } = await this.http(
					'/extend/process-flow-det-equipment/createList',
					'post',
					this.selectedBoms.map((item) => ({
						...item,
						flowDetId: this.currentDet.detId,
					}))
				);
				if (code == 0) {
					this.$message.success('操作成功');
					this.getList(this.currentDet);
					this.cancel();
				} else {
					this.$message.error('操作失败');
				}
			} else {
				this.$message.info('请选择设备');
			}
		},
		async getList({
			detId,
			detName,
			detDesc,
			flowId,
			sectionName,
			sectionId,
		} = {}) {
			console.log('get list', detId, detName, flowId);
			const { data, code } = await this.http(
				'/extend/process-flow-det-equipment/page',
				'get',
				{ flowDetId: detId, ...this.queryParams }
			);
			if (code == 0) {
				this.list = data.list;
				this.total = data.total;
			} else {
				this.list.splice(0);
				this.total = 0;
			}

			// 获取设备及bom列表
			this.http(
				'/extend/process-flow-det/getEquipmentDetBySectionId?id=' + sectionId,
				'post'
			).then(({ code, data }) => {
				if (code == 0) {
					this.bomList = data.map((eq) => {
						eq.materialsBom = eq.materialsBom || [];
						eq.valuesBom = eq.valuesBom || [];
						eq.materialsBom.equipmentId = eq.id;
						eq.valuesBom.equipmentId = eq.id;
						return eq;
					});
				} else {
					this.bomList.splice(0);
				}
			});
		},
		async handleAddEquipment() {
			this.open = true;
		},
		cancel() {
			this.open = false;
		},
		clearList() {
			this.list = [];
		},
	},
};
</script>

<style scoped lang="scss">
.process-bom {
	position: relative;
	flex: 1;
	padding: 12px 20px;
	background: #fff;
	border-radius: 8px;
}
</style>