kd-aiot-frontend-aps/src/views/saleOrder/components/plan-submit.vue

<template>
  <el-dialog
    :visible.sync="visible"
    title="计划提交"
    width="60vw"
    append-to-body
  >
    <div class="main_container">
      <el-descriptions
        title=""
        :column="3"
        size="medium"
        border
        label-class-name="title-col"
        content-class-name="title-col"
      >
        <el-descriptions-item>
          <template slot="label"> 计划编号 </template>
          {{ info.code }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 计划类型 </template>
          {{ getDictValue('订单计划类型', info.planType) }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 产品编码</template>
          {{ info.productCode }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 牌号 </template>
          {{ info.brandNo }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 型号 </template>
          {{ info.model }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 规格 </template>
          {{ info.specification }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 销售单数量 </template>
          {{ info.codeNum }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 生产类型 </template>
          {{ info.produceVersionName }}
        </el-descriptions-item>

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

        <el-descriptions-item>
          <template slot="label"> 订单总数量 </template>
          {{ info.contractNum }}{{ info.measuringUnit }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 订单重量 </template>
          {{ info.sumOrderWeight }} {{ info.weightUnit }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 要求生产数量 </template>
          {{ Number(info.requiredFormingNum) }}{{ info.measuringUnit }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 要求生产重量 </template>
          {{ info.newSumOrderWeight }} {{ info.newWeightUnit }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 要求完成日期 </template>
          {{ info.reqMoldTime }}
        </el-descriptions-item>

        <el-descriptions-item>
          <template slot="label"> 批次号 </template>
          {{ info.batchNo }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 所属工厂 </template>
          {{ info.factoriesIdName }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 生产要求 </template>
          {{ info.productionRequirements }}
        </el-descriptions-item>
        <el-descriptions-item :span="3">
          <template slot="label"> </template>
        </el-descriptions-item>
      </el-descriptions>
    </div>

    <headerTitle title="计划列表" class="mt20" v-if="isAutoGenerateSubPlans">
    </headerTitle>

    <ele-pro-table
      ref="table2"
      :needPage="false"
      :columns="jsColumns"
      :datasource="jhList"
      tool-class="ele-toolbar-actions"
      max-height="360px"
      v-if="isAutoGenerateSubPlans"
    >
      <!-- <template v-slot:toolbar>
        <div class="toolbar_box">
          <el-button type="primary" size="mini" @click="handleAdd"
            >新增</el-button
          >
        </div>
      </template> -->
      <template v-slot:produceRoutingName="{ row }">
        <span>{{ row.produceRoutingName }}</span>
      </template>
      <template v-slot:startTime="{ row }">
        <el-date-picker
          class="w100"
          v-model="row.startTime"
          type="datetime"
          value-format="yyyy-MM-dd HH:mm:ss"
          placeholder="开始时间"
          @change="handleStartTimeChange(row)"
          disabled
        ></el-date-picker>
      </template>
      <template v-slot:endTime="{ row }">
        <el-date-picker
          class="w100"
          v-model="row.endTime"
          type="datetime"
          value-format="yyyy-MM-dd HH:mm:ss"
          @change="handleEndTimeChange(row)"
          placeholder="完成时间"
          disabled
        ></el-date-picker>
      </template>
      <template v-slot:requiredFormingNum="{ row }">
        <span>{{ row.requiredFormingNum }} {{ row.measuringUnit }}</span>
      </template>
      <template v-slot:action="{ row, $index }">
        <el-popconfirm
          class="ele-action"
          title="确定要删除这条数据吗？"
          @confirm="removeRow(row, $index)"
        >
          <template v-slot:reference>
            <el-link type="danger" :underline="false" icon="el-icon-delete">
              删除
            </el-link>
          </template>
        </el-popconfirm>
      </template>
    </ele-pro-table>

    <div slot="footer" class="footer">
      <div>
        <el-button @click="cancel">取消</el-button>
        <el-button
          @click="submit(2)"
          type="primary"
          :loading="loading"
          v-if="type != 'edit'"
          >提交并发布</el-button
        >
        <el-button type="primary" @click="submit(1)" :loading="loading"
          >提交</el-button
        >
      </div>
    </div>
  </el-dialog>
</template>

<script>
  import { getCode } from '@/api/codeManagement';
  import dictMixins from '@/mixins/dictMixins';
  import { debounce } from 'lodash';
  import { parameterGetByCode } from '@/api/mainData/index';

  export default {
    mixins: [dictMixins],
    props: {
      info: Object,
      type: String
    },
    data() {
      return {
        visible: false,
        loading: false,
        tableList: [],
        isAutoGenerateSubPlans: false,
        jhList: [],
        jsColumns: [
          {
            columnKey: 'index',
            label: '序号',
            type: 'index',
            width: 55,
            align: 'center'
          },
          {
            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
          },
          {
            slot: 'startTime',
            prop: 'startTime',
            label: '计划开始时间',
            align: 'center',
            minWidth: 180
          },
          {
            slot: 'endTime',
            prop: 'endTime',
            label: '计划完成时间',
            align: 'center',
            minWidth: 180
          },
          {
            prop: 'produceRoutingName',
            slot: 'produceRoutingName',
            label: '工艺路线',
            align: 'center',
            minWidth: 120
          },
          {
            prop: 'requiredFormingNum',
            label: '要求生产数量',
            align: 'center',
            slot: 'requiredFormingNum',
            width: 130
          }

          // {
          //   columnKey: 'action',
          //   label: '操作',
          //   width: 90,
          //   align: 'center',
          //   fixed: 'right',
          //   slot: 'action'
          // }
        ]
      };
    },
    computed: {},
    created() {
      this.requestDict('订单计划类型');
      this.getAutoGenerateSubPlans('auto_split_produce_plan');
    },
    methods: {
      open() {
        this.visible = true;
        if (this.type != 'edit') {
          this.getPlanCode();
        }

        if (this.isAutoGenerateSubPlans) {
          console.log(this.info, 'this.infothis.info');
          this.getJHListData(this.info);
        }
      },
      cancel() {
        this.visible = false;
      },

      async getAutoGenerateSubPlans(code) {
        await parameterGetByCode({ code }).then((res) => {
          this.isAutoGenerateSubPlans = res.value == '0' ? false : true;
        });
      },

      getJHListData(m) {
        for (let i = 0; i < this.jhList.length; i++) {
          let item = this.jhList[i];
          if (item.id == m.id) {
            return;
          }
        }
        let row = {};
        // if (
        //   m.processRoute &&
        //   m.processRoute.list &&
        //   m.processRoute.list.length > 0
        // ) {
        //   row = m.processRoute.list[0];
        // }
        // let _num =
        //   ((this.formData.requiredFormingNum || 0) / (this.baseCount || 0)) *
        //   m.dosage;
        // _num = _num.toFixed(3);
        // _num = this.formattedNum(_num);
        let data = {
          id: m.id,
          categoryId: m.categoryId,
          productCode: m.productCode,
          productName: m.productName,
          brandNo: m.brandNo,
          specification: m.specification,
          model: m.model,
          produceRoutingName: m.produceRoutingName || '',
          productUnitWeight: m.productUnitWeight,
          requiredFormingNum: m.requiredFormingNum,
          measuringUnit: m.measuringUnit,
          startTime: m.startTime || '',
          endTime: m.endTime || '',
          unit: this.unit,
          resourceType: 0
        };
        this.jhList.push(data);
      },

      async getPlanCode() {
        this.loading = true;
        try {
          const code = await getCode('product_code');
          this.$set(this.info, 'code', code);
        } catch (err) {}
        this.loading = false;
      },

      submit: debounce(function (type) {
        this.$emit('publish', type);
        this.visible = false;
      }, 800)
    }
  };
</script>
<style lang="scss">
  .basic-details-title {
    margin: 10px 0;
  }

  .title-col {
    color: #000000 !important;
    background-color: #fff;
  }
</style>