kd-aiot-frontend-mes/src/views/produceOrder/components/report/Extrusion.vue

<template>
  <el-form
    class="form-no-message"
    :model="{ categoryMsg, ...workReport }"
    ref="formRef"
    :show-message="false"
  >
    <div class="message-box">
      <ul>
        <li> <span class="label">报工次数</span> {{ countMsg.reportNum }}</li>
        <li>
          <span class="label">累计合格品数量</span>
          {{ countMsg.standardTotalNum }}PCS</li
        >
        <li>
          <span class="label">累计合格品重量</span>
          {{ countMsg.standardTotalWeight }}KG</li
        >
        <li>
          <span class="label">累计投料重量</span>
          {{ countMsg.feedMaterielWeight }}KG</li
        >
      </ul>
      <div class="right">
        <el-form-item
          label="执行人工号"
          prop="executorJobNum"
          required
          label-width="100px"
          ><personSelectRemote
            v-model="workReport.executorId"
            placeholder="请输入"
            @selfChange="
              (val, item) => (workReport.executorJobNum = item.jobNumber)
            "
        /></el-form-item>
        <el-form-item
          label="执行日期"
          required
          prop="executeTime"
          label-width="100px"
          ><el-date-picker
            v-model="workReport.executeTime"
            value-format="yyyy-MM-dd HH:mm:ss"
            type="datetime"
            format="yyyy-MM-dd HH:mm"
            placeholder="请选择"
          ></el-date-picker
        ></el-form-item>
      </div>
    </div>
    <el-card>
      <el-descriptions title="报工信息" direction="vertical" :column="7" border>
        <el-descriptions-item label="原料编码/名称" :span="2">
          <span class="label-required after" slot="label">原料编码/名称</span>
          <el-form-item
            label=""
            required
            label-width="0"
            class="w100"
            prop="categoryMsg.code"
          >
            <el-input
              placeholder="请输入"
              :value="`${categoryMsg.code}/${categoryMsg.name}`"
              @click.native="getMaterial"
            ></el-input>
          </el-form-item>
        </el-descriptions-item>
        <el-descriptions-item label="原料牌号">{{
          categoryMsg.brandNum
        }}</el-descriptions-item>
        <el-descriptions-item label="批次号">
          <span class="label-required after" slot="label">批次号</span>
          <el-form-item
            label=""
            required
            label-width="0"
            class="w100"
            prop="categoryMsg.batchNo"
          >
            <el-select v-model="categoryMsg.batchNo" placeholder="请选择">
              <el-option
                v-for="(item, index) in batchList"
                :key="index"
                :label="item.batchNum"
                :value="item.batchNum"
                @click.native="categoryMsg.totalWeight = item.storageNum"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-descriptions-item>
        <el-descriptions-item label="原料重量(KG)">
          <span class="label-required after" slot="label">原料重量(KG)</span>
          <el-form-item
            label=""
            required
            label-width="0"
            class="w100"
            prop="categoryMsg.totalWeight"
            ><el-input
              v-model="categoryMsg.totalWeight"
              placeholder="请输入"
            ></el-input> </el-form-item
        ></el-descriptions-item>
        <el-descriptions-item label="质检项" :span="2">
          <el-input
            v-model="workReport.qualityItem"
            placeholder="请输入"
          ></el-input>
        </el-descriptions-item>
        <el-descriptions-item label="质检标准" :span="3">
          <el-input
            v-model="workReport.qualityStandard"
            placeholder="请输入"
          ></el-input
        ></el-descriptions-item>
        <el-descriptions-item label="">
          <span class="label-required after" slot="label">合格品数量(PCS)</span>
          <el-form-item
            label=""
            label-width="0"
            class="w100"
            prop="productInfo.standardNum"
            ><el-input-number
              class="w100"
              :controls="false"
              v-model="workReport.productInfo.standardNum"
              :min="0"
              clearable
            ></el-input-number> </el-form-item
        ></el-descriptions-item>
        <el-descriptions-item label=""
          ><span class="label-required after" slot="label">合格品重量(KG)</span>
          <el-form-item
            label=""
            label-width="0"
            class="w100"
            prop="productInfo.standardWeight"
            ><el-input-number
              readonly
              class="w100"
              :controls="false"
              :value="
                (workReport.productInfo.standardWeight =
                  workReport.productInfo.standardNum *
                  (infoData.productUnitWeight || 1))
              "
              :min="0"
              clearable
            ></el-input-number> </el-form-item
        ></el-descriptions-item>
        <el-descriptions-item label="不合格品数量(PCS)">
          <el-input-number
            class="w100"
            :controls="false"
            v-model="workReport.productInfo.noStandardNum"
            :min="0"
            clearable
          ></el-input-number>
        </el-descriptions-item>
        <el-descriptions-item label="不合格品重量(KG)"
          ><el-input-number
            class="w100"
            readonly
            :controls="false"
            :value="
              (workReport.productInfo.noStandardWeight =
                workReport.productInfo.noStandardNum *
                (infoData.productUnitWeight || 1))
            "
            :min="0"
            clearable
          ></el-input-number
        ></el-descriptions-item>
        <el-descriptions-item label="副产品重量(KG)"
          ><el-input-number
            class="w100"
            :controls="false"
            v-model="workReport.productInfo.netWeight"
            :min="0"
            clearable
          ></el-input-number
        ></el-descriptions-item>
        <el-descriptions-item label="备注">
          <el-input v-model="workReport.remark"></el-input
        ></el-descriptions-item>
      </el-descriptions>

      <el-descriptions
        title="设备信息"
        class="mt-16"
        direction="vertical"
        :column="7"
        border
      >
        <el-descriptions-item label="设备编码">{{
          workReportDeviceList.code
        }}</el-descriptions-item>
        <el-descriptions-item label="设备名称">{{
          workReportDeviceList.name
        }}</el-descriptions-item>
        <el-descriptions-item label="规格">{{
          workReportDeviceList.specification
        }}</el-descriptions-item>
        <el-descriptions-item label="型号">{{
          workReportDeviceList.model
        }}</el-descriptions-item>

        <el-descriptions-item label="设备位置">{{
          workReportDeviceList.path
        }}</el-descriptions-item>
        <el-descriptions-item label="操作" :span="2"
          ><el-link @click="getEquip" type="primary"
            >更改设备</el-link
          ></el-descriptions-item
        >
        <el-descriptions-item label="模具编码/名称"
          ><el-input
            class="w100"
            :value="`${moduleMsg.code}/${moduleMsg.name}`"
            @click.native="getCategory('5', 'moduleMsg')"
          ></el-input
        ></el-descriptions-item>
        <el-descriptions-item label="规格">{{
          moduleMsg.specification
        }}</el-descriptions-item>
        <el-descriptions-item label="型号">{{
          moduleMsg.model
        }}</el-descriptions-item>
        <el-descriptions-item label="冲压次数" :span="4"
          ><el-input
            placeholder="请输入"
            v-model="moduleMsg.extraField.stampingTimes"
          ></el-input
        ></el-descriptions-item>
        <el-descriptions-item label="舟皿编码/名称"
          ><el-input
            :value="`${boatMsg.code}/${boatMsg.name}`"
            @click.native="getCategory('8', 'boatMsg')"
          ></el-input
        ></el-descriptions-item>
        <el-descriptions-item label="规格">{{
          boatMsg.specification
        }}</el-descriptions-item>
        <el-descriptions-item label="槽数"></el-descriptions-item>
        <el-descriptions-item label="数量"
          ><el-input
            placeholder="请输入"
            v-model="boatMsg.extraField.num"
          ></el-input
        ></el-descriptions-item>
      </el-descriptions>
    </el-card>
    <equipmentDailog
      ref="equipmentRef"
      :isPlan="true"
      :produceVersionId="infoData.produceVersionId"
    />
    <materialDialog
      ref="materialRef"
      :params="{
        taskInstanceId: taskInfo.id,
        versionId: infoData.produceVersionId
      }"
    />

    <catogaryDialog ref="catogaryDialogRef" />
  </el-form>
</template>

<script>
  import { realTimeStorage } from '@/api/mainData';
  import personSelectRemote from '@/components/CommomSelect/person-select-remote';
  import equipmentDailog from '@/components/EquipmentDailog/equipment-dailog';
  import materialDialog from '../materialDialog.vue';
  import catogaryDialog from '../catogaryDialog.vue';
  import { reportCount } from '@/api/produceOrder';
  import dayjs from 'dayjs';
  export default {
    components: {
      personSelectRemote,
      equipmentDailog,
      materialDialog,
      catogaryDialog
    },
    props: {
      infoData: {
        type: Object,
        default: () => ({})
      },
      taskInfo: {
        type: Object,
        default: () => ({})
      }
    },
    data () {
      return {
        categoryMsg: {
          batchNo: '',
          totalWeight: '',
          brandNum: '',
          sourceCategoryId: '',
          rootCategoryLevelId: '1',
          name: '',
          code: ''
        },
        workReport: {
          qualityItem: '',
          qualityStandard: '',
          executorId: '',
          executorJobNum: '',
          executeTime: dayjs(new Date()).format('YYYY-MM-DD HH:mm'),
          remark: '',
          productInfo: {
            standardNum: '',
            standardWeight: '',
            noStandardNum: '',
            noStandardWeight: ''
          }
        },
        // 设备
        workReportDeviceList: {
          code: '',
          name: '',
          path: '',
          model: '',
          rootCategoryLevelId: '',
          specification: ''
        },
        countMsg: {},
        // 模具信息
        moduleMsg: {
          code: '',
          name: '',
          path: '',
          model: '',
          rootCategoryLevelId: '',
          specification: '',
          extraField: {
            stampingTimes: ''
          }
        },
        // 舟皿信息
        boatMsg: {
          code: '',
          name: '',
          path: '',
          model: '',
          rootCategoryLevelId: '',
          specification: '',
          extraField: {
            num: ''
          }
        },
        batchList: []
      };
    },
    watch: {
      taskInfo: {
        immediate: true,
        handler () {
          if (this.taskInfo.code) {
            this.getReportCount();
          }
        }
      },
      infoData: {
        immediate: true,
        handler () {
          if (this.infoData.id) {
            // 设备
            this.workReportDeviceList = Object.assign(
              {},
              this.workReportDeviceList,
              {
                code: this.infoData.deviceCode,
                name: this.infoData.deviceName
                // path: this.infoData.,
                // model: this.infoData.,
                // rootCategoryLevelId: this.infoData.,
                // specification: this.infoData.
              }
            );
          }
        }
      }
    },
    created () {
      this.workReport.executorId = this.$store.state.user.info?.userId;
      this.workReport.executorJobNum = this.$store.state.user.info?.jobNumber;
    },
    methods: {
      getCategory (id, memo) {
        this.$refs.catogaryDialogRef.open(id, this[memo], (res) => {
          this[memo].rootCategoryLevelId = res.categoryLevelId;
          this[memo].code = res.code;
          this[memo].name = res.name;
          this[memo].specification = res.specification;
          this[memo].sourceInstanceId = res.id;
          if (memo === 'moduleMsg') {
            this[memo].model = res.modelType;
            this[memo].extraField.stampingTimes = '';
          } else {
            this[memo].extraField.num = '';
          }
        });
      },
      getMaterial () {
        this.$refs.materialRef.open(this.categoryMsg, (res) => {
          this.categoryMsg.name = res.categoryName;
          this.categoryMsg.code = res.categoryCode;
          this.categoryMsg.sourceCategoryId = res.id;
          this.categoryMsg.brandNum = res.brandNum;

          realTimeStorage({
            categoryCode: res.categoryCode,
            factoryCode: this.infoData.werks
          }).then((res) => {
            this.batchList = res;
          });
        });
      },
      getEquip () {
        this.$refs.equipmentRef.openSingle(
          [this.workReportDeviceList],
          (res) => {
            this.workReportDeviceList.code = res.code;
            this.workReportDeviceList.name = res.name;
            this.workReportDeviceList.model = res.modelType;
            this.workReportDeviceList.specification = res.specification;
            this.workReportDeviceList.sourceInstanceId = res.id;
            this.workReportDeviceList.rootCategoryLevelId =
              res.rootCategoryLevelId;
            this.workReportDeviceList.path = res.positionList[0]?.pathName;
          }
        );
      },
      async getReportCount () {
        const res = await reportCount({
          taskCode: this.taskInfo.code,
          workOrderId: this.infoData.id
        });

        this.countMsg = res;
      },
      report (fun) {
        this.$refs.formRef.validate((value) => {
          if (value) {
            this.$confirm('是否确定要报工?', '提示').then(() => {
              const workReportDeviceList = [];
              if (this.workReportDeviceList.code) {
                workReportDeviceList.push(this.workReportDeviceList);
              }
              if (this.moduleMsg.code) {
                workReportDeviceList.push(this.moduleMsg);
              }
              if (this.boatMsg.code) {
                workReportDeviceList.push(this.boatMsg);
              }
              fun({
                checkState: 1,
                workReport: this.workReport,
                workReportCategoryList: [this.categoryMsg],
                workReportDeviceList
              }).then(() => {
                this.$message.success('报工成功！');
                this.getReportCount();
              });
            });
          }
        });
      }
    }
  };
</script>

<style lang="scss" scoped>
  .message-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    .label {
      margin-right: 5px;
    }
    ul {
      list-style: none;
      display: flex;
      align-items: center;
      justify-content: flex-start;

      li {
        margin-right: 20px;
      }
    }

    .right {
      padding-top: 22px;
      display: flex;
      align-items: center;
    }
  }
</style>