kd-aiot-frontend-aps/src/views/productionPlan/components/disassemblePlanPop.vue

<template>
  <ele-modal
    width="80vw"
    :visible.sync="visible"
    v-if="visible"
    :close-on-click-modal="false"
    row-key="code"
    custom-class="ele-dialog-form"
    :title="'计划分解'"
  >
    <div class="form-wrapper">
      <el-form :model="requestData" label-width="0" :show-message="false">
        <el-descriptions title="" :column="2" border>
          <el-descriptions-item label="计划编号">
            {{ formData.code }}</el-descriptions-item
          >

          <el-descriptions-item label="产品编码">{{
            formData.productCode
          }}</el-descriptions-item>

          <el-descriptions-item label="产品名称">{{
            formData.productName
          }}</el-descriptions-item>

          <el-descriptions-item label="牌号|型号">
            {{ formData.brandNo }}|{{ formData.model }}</el-descriptions-item
          >

          <el-descriptions-item label="批次号">{{
            formData.batchNo
          }}</el-descriptions-item>

          <el-descriptions-item label="工艺路线">{{
            formData.produceRoutingName
          }}</el-descriptions-item>

          <el-descriptions-item label="要求生产数量">{{
            formData.requiredFormingNum
          }}</el-descriptions-item>
          <el-descriptions-item label="要求完成日期">{{
            formData.reqMoldTime
          }}</el-descriptions-item>

          <el-descriptions-item label="生产方式">{{
            formData.produceType == 2 ? '加工' : '装配'
          }}</el-descriptions-item>
        </el-descriptions>
        <headerTitle title="BOM信息" class="mt20"> </headerTitle>

        <ele-pro-table
          ref="table"
          :needPage="false"
          :columns="columns"
          :datasource="bomList"
          :selection.sync="selection"
          @update:selection="handleSelectionChange"
          tool-class="ele-toolbar-actions"
         max-height="360px"

        >
          <template v-slot:toolbar>
            <div class="toolbar_box">
              <div
                ><span>基本数量</span>
                <el-input placeholder="请输入" v-model.number="baseCount">
                </el-input>
                <DictSelection dictName="计量单位" v-model="unit"
              /></div>

              <el-button type="primary" size="mini" @click="handleAdd"
                >新增</el-button
              >
            </div>
          </template>
        </ele-pro-table>


        <headerTitle title="计划列表" class="mt20"> </headerTitle>

        <ele-pro-table
          ref="table2"
          :needPage="false"
          :columns="jsColumns"
          :datasource="jhList"
          tool-class="ele-toolbar-actions"
          max-height="360px"

        >

        </ele-pro-table>


      </el-form>
    </div>
    <div slot="footer">
      <el-button plain @click="cancel">取消</el-button>
      <el-button type="primary" @click="confirm">确定</el-button>
    </div>

    <EquipmentDialog ref="equipmentRefs" @choose="choose"></EquipmentDialog>


  </ele-modal>
</template>

<script>
  import { deepClone } from '@/utils';
  import { getBom } from '@/api/productionPlan/index.js';

  import EquipmentDialog from './EquipmentDialog.vue';

  export default {
    components: {
      EquipmentDialog
    },
    data() {
      return {
        visible: false,

        formData: {},
        requestData: {},
        bomList: [],
        baseCount: '',
        unit: '',

        selection: [],

        jhList: [],

        rules: {},

        columns: [
          {
            columnKey: 'selection',
            type: 'selection',
            width: 45,
            align: 'center'
          },
          {
            prop: 'code',
            label: '编码',
            showOverflowTooltip: true
          },
          {
            prop: 'name',
            label: '名称',
            showOverflowTooltip: true
          },

          {
            prop: 'dosage',
            label: '用量',
            showOverflowTooltip: true
          },
          

          {
            prop: 'unit',
            label: '计量单位',
            showOverflowTooltip: true
          },

          
          {
            prop: 'brandNo',
            label: '牌号',
            align: 'center',
            showOverflowTooltip: true
          },

          {
            prop: 'specification',
            label: '规格',
            align: 'center',
            minWidth: 150,

            showOverflowTooltip: true
          },
          {
            prop: 'model',
            label: '型号',
            align: 'center',
            showOverflowTooltip: true
          },
          {
            prop: 'versions',
            label: '版本'
          },
          {
            prop: 'status ',
            label: '状态',
            formatter: (row) => {
              return this.statusOpt[+row.status];
            }
          },
          {
            prop: 'createName',
            label: '创建人',
            showOverflowTooltip: true
          },
          {
            prop: 'createTime',
            label: '创建日期',
            showOverflowTooltip: true
          }
        ],


        statusOpt: {
          '': '全部',
          0: '已停用',
          1: '已发布'
        },

        
        jsColumns: [
        {
            prop: 'productCode',
            label: '产品编码',
            align: 'center',

            minWidth: 140
          },
          {
            prop: 'productName',
            label: '产品名称',
            align: 'center',
            minWidth: 140
          },

          {
            prop: 'brandNo',
            label: '牌号',
            align: 'center',
            showOverflowTooltip: true
          },

          {
            prop: 'specification',
            label: '规格',
            align: 'center',
            minWidth: 150,
            showOverflowTooltip: true
          },
          {
            prop: 'model',
            label: '型号',
            align: 'center',
            showOverflowTooltip: true
          },

   
          {
            prop: 'produceRoutingName',
            label: '工艺路线',
            align: 'center',
            minWidth: 120
          },


          {
            prop: 'requiredFormingNum',
            label: '要求生产数量',
            align: 'center',
            slot: 'requiredFormingNum'
          },
          {
            prop: 'unit',
            label: '计量单位',
            showOverflowTooltip: true
          },



        ],
      };
    },
    methods: {
      open(row) {
        this.formData = deepClone(row);

        this.getBomList();
      },

      getBomList() {
        let params = {
          categoryId: this.formData.categoryId,
          bomType: this.formData.produceType,
          pageNum: 1,
          size: -1
        };
        getBom(params).then((res) => {
          this.bomList = res?.bomList || [];
          (this.baseCount = res.baseCount),
            (this.unit = res.unit),
            (this.visible = true);
        });
      },

      handleSelectionChange() {

        console.log(this.selection);
        let  _arr = []
        _arr = this.selection.map(m => {
            let _num = this.formData.requiredFormingNum / this.baseCount * m.dosage;
            _num = _num.toFixed(3);
          return {
             productCode: m.code,
             productName: m.name,
             brandNo: m.brandNo,
             specification: m.specification,
             model: m.model,
             produceRoutingId: '',
             produceRoutingName: '',
             requiredFormingNum: _num,
             unit: this.unit,

     
          }
        })
        this.jhList = _arr;
    
      },

      handleAdd() {
        this.$refs.equipmentRefs.open();
      },

      choose(list) {
        console.log(list);
      },

      cancel() {
        this.formData = {};
        this.visible = false;
      },

      confirm() {
        this.$refs.form.validate(async (value) => {});
      }
    }
  };
</script>

<style lang="scss" scoped>
  .mt20 {
    margin-top: 20px;
  }

  .el-form-item {
    margin-bottom: 0 !important;
  }

  .toolbar_box {
    display: flex;
    justify-content: space-between;
    margin-right: 10px;
    > div {
      display: flex;
      align-items: center;
      justify-content: center;
      > span {
        width: 150px;
      }
      > div {
        margin-left: 10px;
      }
    }
  }
</style>