yudao-dev/src/views/quality/base/basicData/qualityInspectionBoxPermissions/BomSelector.vue

<!--
 * @Author: zhp
 * @Date: 2024-01-30 10:53:32
 * @LastEditTime: 2024-02-01 14:47:03
 * @LastEditors: zhp
 * @Description:
-->

<template>
  <div class="bom-selector">
    <el-row v-if="filteredBomList.length" style="border: 1px solid #ccc; display: flex">
      <el-col :span="12">
        <div class="select-list">
          <div class="sl__header" style="background: #f3f4fb; padding: 12px">
            <span style="">选择产线</span>
            <span>
              {{ selectedEquipments.length }}/{{ filteredBomList.length }}
            </span>
          </div>
          <div class="sl__body">
            <div class="sl__body-item" v-for="eq in filteredBomList" :key="eq.id + refreshKey">
              <el-checkbox :key="refreshKey" :checked="selectedEquipments.includes(eq.id)"
                @change="(e) => handleEquipmentChange(eq, e)" class=""></el-checkbox>
              <span :key="'label' + refreshKey" @click.stop="() => handleLoadDom(eq)">
                {{ eq.name }}
              </span>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="12" style="border-left: 1px solid #ccc">
        <div class="select-list">
          <div class="sl__header" style="background: #f3f4fb; padding: 12px">
            <span style="">选择工序</span>
          </div>

          <BomSelection ref="materialsBomList" :key="materialsBomList.equipmentId + 'materialsBomList'"
            :list="materialsBomList" :equipment-id="materialsBomList.equipmentId"
            :current-select="currentSelectedIdList" @change="handleMaterialBomChange" />
        </div>
      </el-col>
      <!-- <el-col :span="8" style="border-left: 1px solid #ccc">
				<div class="select-list">
					<div class="sl__header" style="background: #f3f4fb; padding: 12px">
						<span style="">参数BOM</span>
					</div>

					<BomSelection
						ref="valuesBomList"
						:key="valuesBomList.equipmentId + 'valuesBomList'"
						:list="valuesBomList"
						:equipment-id="valuesBomList.equipmentId"
						:current-select="currentSelectedValueBomId"
						@change="handleValueBomChange" />
				</div>
			</el-col> -->
    </el-row>
    <div class="no-data-bg" v-else></div>
  </div>
</template>
;
<script>

import { thisTypeAnnotation } from '@babel/types';
import BomSelection from './BomSelection.vue';
export default {
	name: 'BomSelector',
	components: { BomSelection },
	model: {
		prop: 'value',
		event: 'update',
	},
	props: {
		bomList: {
			type: Array,
			default: () => [],
		},
		value: {
			type: Array,
			default: () => [],
    },
    chooseList: {
      type: Array,
      default:() => []
    }
	},
	data() {
		return {
			searchText: '',
			selectedEquipments: [],
      selected: [],
      bomArr:[],
			materialsBomList: [],
      // valuesBomList: [],

			refreshKey: Math.random(),
			currentSelectedIdList: [],
			currentSelectedValueBomId: null,
		};
	},
	watch: {
		value: {
      handler(val) {
				console.log('value', val);
				if (val) {
          this.selectedEquipments = val.map((item) => item.equipmentId)
          console.log(this.selectedEquipments)
          this.selected = val;
				}
			},
			deep: true,
			immediate: true,
		},
	},
	computed: {
		filteredBomList() {
      return this.bomList.filter((item) => {
        // console.log(item)
				return item.name.includes(this.searchText);
			});
		},
  },
  mounted () {
    // this.getList()
  },
  methods: {
		commit() {
			this.$emit('update', this.selected);
    },
    // getList() {
    //   this.selectedEquipments = this.chooseList
    //   console.log(this.selectedEquipments)
    //   console.log(this.chooseList);
    // },
		handleLoadDom(eq) {
			// 只显示 dom 列表
			this.currentEquipment = eq.id;
      this.materialsBomList = eq.materialsBom;
      console.log(this.materialsBomList)
			// this.valuesBomList = eq.valuesBom;
			// 回复选中的bom信息
			if (this.selectedEquipments.includes(eq.id)) {
				const selectedItem = this.selected.find(
					(item) => item.equipmentId == eq.id
        )
        // console.log(selectedItem)

        let arr = []
        console.log(selectedItem.children);
        selectedItem.children.forEach((ele) => {
          console.log(ele)
          arr.push({ id: ele.id })
        })
        // console.log(arr)
        this.currentSelectedIdList = arr
        console.log(this.currentSelectedIdList);
					// selectedItem.equMaterialBomId ?? null;
				// this.currentSelectedValueBomId = selectedItem.equValueBomId ?? null;
			}
		},

		handleEquipmentChange(eq, selected) {
			this.currentEquipment = eq.id;
      this.materialsBomList = eq.materialsBom
      console.log(this.value)
			this.valuesBomList = eq.valuesBom;
      if (selected) {
        console.log(selected)
				this.selectedEquipments.push(eq.id);
				this.selected.push({
          equipmentId: eq.id,
					// equValueBomId: null,
					children: [],
				});
				// this.$emit('update', this.selected);
			} else {
				// 清空选择状态
				this.selectedEquipments = this.selectedEquipments.filter(
					(id) => id !== eq.id
				);
				// this.$refs.materialsBomList.clearSelected();
				// this.$refs.valuesBomList.clearSelected();
				this.currentSelectedMaterialBomId = null;
				this.currentSelectedValueBomId = null;
				this.selected = this.selected.filter(
					(item) => item.equipmentId !== eq.id
				);
				// this.$emit('update', this.selected);
			}
		},

    handleMaterialBomChange(equipmentId, bomId, selected) {
      // console.log(this.chooseList)
			const selectedItem = this.selected.find(
				(item) => item.equipmentId == equipmentId
      );
      this.bomArr.push(bomId)
      // console.log(this.selected);
      // arr.push(bomId)
      // console.log(arr);
      // console.log(selectedItem)
			if (selected) {
				// 如果没找到这个
        this.selectedEquipments.push(equipmentId);
        console.log(this.selected.indexOf(equipmentId))
        this.selected.forEach((ele,index) => {
          if (ele.equipmentId === equipmentId ) {
            this.selected[index].children.push({ id: bomId })
          }
        })
				// this.selected.push({
				// 	equipmentId,
				// 	// equValueBomId: null,
				// 	equMaterialBomId: bomId,
				// });
				// 强制更新'设备'一栏
				this.refreshKey = Math.random();
				// this.$emit('update', this.selected);
				return;
      } else {
        console.log(selected);
        this.selected.forEach((ele, index) => {
          ele.children.forEach((e, i) => {
            console.log(e)
            if (ele.equipmentId === equipmentId && e.id == bomId) {
              this.selected[index].children.splice(i,1)
            }
          })
        })
      }
      // this.$emit('getData', this.dataForm)
			// selectedItem && (selectedItem.equMaterialBomId = selected ? bomId : null);
      // this.currentSelectedMaterialBomId = selected ? bomId : null;
      console.log(this.selected)
		},

		// handleValueBomChange(equipmentId, bomId, selected) {
		// 	const selectedItem = this.selected.find(
		// 		(item) => item.equipmentId == equipmentId
		// 	);
		// 	if (selected && !selectedItem) {
		// 		// 如果没找到这个
		// 		this.selectedEquipments.push(equipmentId);
		// 		this.selected.push({
		// 			equipmentId,
		// 			equValueBomId: bomId,
		// 			equMaterialBomId: null,
		// 		});
		// 		this.refreshKey = Math.random();
		// 		// this.$emit('update', this.selected);
		// 		return;
		// 	}
		// 	selectedItem && (selectedItem.equValueBomId = selected ? bomId : null);
		// 	this.currentSelectedValueBomId = selected ? bomId : null;
		// 	// this.$emit('update', this.selected);
		// },
	},
};
</script>

<style scoped lang="scss">
.bom-selector {
	min-height: 200px;
}

.sl__body {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 6px;
}

.sl__body-item {
	margin: 0;
	padding: 3px 6px;
	border-radius: 4px;
	cursor: pointer;
	transition: background 0.3s ease-in-out;
	display: flex;
	align-items: center;
	gap: 8px;

	> span {
		flex: 1;
	}

	&:hover {
		background: #0001;
	}
}
.sl__header {
	border-bottom: 1px solid #ccc;
}
</style>