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" />
		</base-dialog>
	</section>
</template>

<script>
import CustomTransfer from './CustomTransfer.vue';
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: '',
		};
	},
	watch: {
		currentDet: {
			handler(val) {
				console.log('currentDet', val);
				if (val != null) {
					this.getList(val);
				} else {
					this.clearList();
				}
			},
			immediate: true,
			deep: true,
		},
	},
	methods: {
		renderFn(h, option) {
			console.log(option);
			return <span>1</span>;
		},
		async getEqList() {
			console.log('currentDet', this.currentDet);
			const { sectionId } = this.currentDet;
			const { code, data } = await this.http(
				'base/core-equipment-bind-section/page',
				'get',
				{ workshopSectionId: sectionId, pageNo: 1, pageSize: 100 }
			);
			if (code == 0) {
				console.log('workshopSectionId', data);

				// 模拟数据
				this.eqList = [
					{ equipmentId: 1, equipmentName: '设备1' },
					{ equipmentId: 2, equipmentName: '设备2' },
					{ equipmentId: 3, equipmentName: '设备3' },
					{ equipmentId: 4, equipmentName: '设备4' },
					{ equipmentId: 5, equipmentName: '设备5' },
					{ equipmentId: 6, equipmentName: '设备6' },
				]; // ].map((item) => ({ label: item.equipmentName, key: item.equipmentId }));

				// 获取参数bom和物料bom
				// 需调用参数bom接口和 物料bom接口
				this.finalList = this.eqList.map((item) => {
					item.sub = [];
					// key: equipmentId-参数bomId
					item.sub.push({
						key: item.equipmentId + '-' + '101',
						label: '参数bom1',
					});
					item.sub.push({
						key: item.equipmentId + '-' + '201',
						label: '物料bom1',
					});

					return item;
				});
			}
		},
		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,
			});
		},
		submitForm() {},
		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 => {
						if (eq.materialsBom) eq.materialsBom.equipmentId = eq.id 
						if (eq.valuesBom) eq.valuesBom.equipmentId = eq.id
						return eq;
					});
				} else {
					this.bomList.splice(0);
				}
			});
		},
		async handleAddEquipment() {
			this.open = true;
			await this.getEqList();
		},
		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>