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="生产方式">
            <el-select v-model="formData.produceType" @change="getBomList">
              <el-option
                v-for="item of producedList"
                :key="item.code"
                :label="item.name"
                :value="item.code"
              ></el-option>
            </el-select>
          </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"
                  disabled
                >
                </el-input>
                <DictSelection dictName="计量单位" v-model="unit" disabled
              /></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"
        >
          <template v-slot:requiredFormingNum="{ row }">
            <el-input
              v-if="row.isManual"
              v-model.number="row.requiredFormingNum"
            ></el-input>
            <span v-else>{{ row.requiredFormingNum }}</span>
          </template>
        </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: {},

        producedList: [
          { code: 2, name: '加工' },
          { code: 3, name: '装配' }
        ],

        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() {
        let _arr = [];
        _arr = this.selection.map((m) => {
          let _num =
            ((this.formData.requiredFormingNum || 0) / (this.baseCount || 0)) *
            m.dosage;
          _num = _num.toFixed(3);
          return {
            id: m.id,
            productCode: m.code,
            productName: m.name,
            brandNo: m.brandNo,
            specification: m.specification,
            model: m.model,
            produceRoutingId: '',
            produceRoutingName: '',
            requiredFormingNum: _num,
            unit: this.unit,
            isManual: false
          };
        });
        this.jhList = _arr;
      },

      handleAdd() {
        let ids = [];
        ids = this.jhList.map((m) => m.id);

        // 打开设备选择弹窗
        this.$refs.equipmentRefs.open(ids);
      },

      choose(list) {
        let _list = [];

        _list = list.map((m) => {
          return {
            id: m.id,
            productCode: m.code,
            productName: m.name,
            brandNo: m.brandNo,
            specification: m.specification,
            model: m.model,
            produceRoutingId: '',
            produceRoutingName: '',
            requiredFormingNum: '',
            unit: this.unit,
            isManual: true
          };
        });

        this.jhList.push(..._list);
      },

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

      confirm() {}
    }
  };
</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>