ISCS_Ui_Admin_Base/src/components/separationPoint/workshop.vue

<template>
  <div class="leftcon">
    <el-form ref="form" :model="form" label-width="100px" :inline="true">
      <el-form-item label="车间">
        <el-select v-model="form.workShop" placeholder="请选择车间" @change="handleselect">
          <el-option
            v-for="item in this.workShopOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
<!--        <el-select-->
<!--          v-model="form.workShop"-->
<!--          v-bind="$attrs"-->
<!--          multiple-->
<!--          style="width: 100%"-->
<!--          placeholder="请选择线路"-->
<!--          @change="handleSelect"-->
<!--        >-->
<!--          <div style="padding: 0 20px; line-height: 34px">-->
<!--            <el-checkbox-->
<!--              v-model="checkAll"-->
<!--              :indeterminate="isIndeterminate"-->
<!--              @change="handleCheckAllChange"-->
<!--            >全选</el-checkbox-->
<!--            >-->
<!--          </div>-->
<!--          <el-checkbox-group v-model="form.workShop">-->
<!--            <el-option-->
<!--              v-for="item in this.workShopOptions"-->
<!--              :key="item.value"-->
<!--              :label="item.label"-->
<!--              :value="item.value"-->
<!--            >-->
<!--              <el-checkbox style="pointer-events: none" :label="item.value">-->
<!--                {{ item.label }}-->
<!--              </el-checkbox>-->
<!--            </el-option>-->
<!--          </el-checkbox-group>-->
<!--        </el-select>-->
      </el-form-item>
      <el-form-item label="生产线">
        <el-select v-model="form.producLine" placeholder="请选择生产线" @change="handleselectProductLine">
          <el-option
            v-for="item in this.producLineOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { listAllWorkshop } from '@/api/mes/md/workshop'
import {getIsWorkareaList} from "@/api/mes/wa/workarea"
import {selectIsSopById} from "@/api/mes/sop/sopindex"

export default {
  props:{
    jobProps:{
      type:Array,
      default:()=>[]
    }
  },
  data() {
    return {
      form: {
        checkAll: false,
        isIndeterminate: false,
        workShop: [],
        producLine: "",
      },
      workShopOptions: [
        { label: "士力架包装车间1号", value: "1" },
        { label: "士力架包装车间2号", value: "2" },
        { label: "士力架包装车间3号", value: "3" },
        { label: "士力架包装车间4号", value: "4" },
      ],
      producLineOptions: [

      ],
    };
  },
  watch: {
    jobProps: {
      handler(newVal, oldVal) {
        console.log('jobProps 发生变化', newVal, oldVal);
        // 在这里处理 jobProps 变化后的逻辑
        this.form.workShop=newVal[0].workshopId
        this.form.producLine=newVal[0].workareaId
        this.handleselect(newVal[0].workshopId)
        this.handleselectProductLine(newVal[0].workareaId)
       // 这里是为了拿到sop模板里默认的隔离点选中的数据
        selectIsSopById(newVal[0].sopId).then(res => {
            console.log(res,'sop')
            const selectSopPoints=res.data.pointDetailVOList.map((item)=>{
                return item.pointId
            })
          console.log(selectSopPoints,'sop_selectePoints')
        })
      },
      immediate: true // 立即执行一次，确保在组件初始化时也能捕获到 jobProps 的值
    }
  },
  mounted() {
    this.getworkshopList()

  },
  methods: {
    // 获取车间列表
    getworkshopList(){
      listAllWorkshop().then(response => {
        this.workShopOptions = response.data.map((item) => {
          return {
            label:item.workshopName,
            value:item.workshopId,
            key:item.workshopCode
          }
        });
      })
    },

    // 单选车间下拉
    handleselect(value){
      // console.log(value,'我触发了车间下拉');
      getIsWorkareaList(value).then(response => {
        this.producLineOptions = response.data.map((item) => {
          return {
            label:item.workareaName,
            value:item.workareaId,
            key:item.workareaCode,
            map:item.map
          }
        })

      })
    },
    // 生产线下拉
    handleselectProductLine(val){
      // console.log(val,'生产线下拉')
      //   利用组件逆传递 selectProductLine方法传递数据给兄弟组件
      const selectedOption=this.producLineOptions.filter((item)=>{
        return item.value === val
      })
      const selectworkShop=this.workShopOptions.filter((item)=>{
        return item.value === this.form.workShop
      })
      // console.log(selectworkShop,selectedOption,'workshop-components')
      // 触发自定义事件，传递 selectedOption[0] 数据给父组件
      this.$emit('product-line-selected', selectedOption[0]);
      this.$emit('work-shop-selected',selectworkShop[0])
    },

    // 多选车间下拉框选择事件
    // handleSelect(value) {
    //   console.log(value, "value");
    //   const checkedCount = value.length;
    //   this.checkAll = checkedCount === this.workShopOptions.length;
    //   this.isIndeterminate =
    //     checkedCount > 0 && checkedCount < this.workShopOptions.length;
    //   const data = value.map((item) => {
    //     return item;
    //   });
    //   this.form.workShop = value.length > 0 ? data : [];
    //
    //   console.log(this.form.workShop, " form.workShop");
    // },
    // 全选事件
    handleCheckAllChange(val) {
      const data = this.workShopOptions.map((item) => {
        return item.value;
      });
      this.form.workShop = val ? data : [];
      this.isIndeterminate = false;
    },
  },
};
</script>

<style scoped lang='scss'>
.leftcon {
  width: 100%;
  height: 100%;
  //   background-color: rgba(229, 229, 229, 1);
  background: url("../../assets/images/sopbgimg.png") no-repeat;
  background-size: 100% 100%;
  //   box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.4);
  padding: 3% 4%;
}
</style>