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

<template>
  <el-form
    class="form-no-message"
    ref="formRef"
    :show-message="false"
    label-position="left"
    :model="{
      ...workReport
    }"
  >
    <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.feedProductWeight }}PCS</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="执行日期" prop="executorTime" label-width="100px"
          ><el-date-picker
            v-model="workReport.executorTime"
            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="5" border>
        <el-descriptions-item label="待交接数量">{{
          countMsg.surplusPackNum
        }}</el-descriptions-item>
        <el-descriptions-item label="实际数量（PCS）"
          ><el-input
            v-model="categoryMsg.number"
            placeholder="请输入"
          ></el-input
        ></el-descriptions-item>
        <el-descriptions-item label="选择包装要求">
          <el-select v-model="workReport.packInfo.packDemand">
            <el-option
              v-for="item in packageList"
              :key="item.code"
              :label="item.code"
              :value="item.code"
              @click.native="
                (item) => (packageRequirements = item.packageRequirements)
              "
            ></el-option>
          </el-select>
        </el-descriptions-item>
        <el-descriptions-item label="" :span="2">{{
          packageRequirements
        }}</el-descriptions-item>
        <el-descriptions-item label="包装数量"
          ><el-input
            v-model="workReport.packInfo.packNum"
            placeholder="请输入"
          ></el-input
        ></el-descriptions-item>
        <el-descriptions-item label="单位"
          ><el-input
            v-model="workReport.packInfo.packUnit"
            placeholder="请输入"
          ></el-input
        ></el-descriptions-item>
        <el-descriptions-item label="最小包装单元"
          ><el-input
            v-model="workReport.packInfo.minPackNum"
            placeholder="请输入"
          >
            <div class="suffix" slot="suffix"
              >PCS/{{ workReport.packInfo.packUnit }}</div
            >
          </el-input></el-descriptions-item
        >
        <el-descriptions-item label="尾数(PCS)"
          ><el-input
            v-model="workReport.packInfo.surplusNum"
            placeholder="请输入"
          ></el-input
        ></el-descriptions-item>
        <el-descriptions-item label="净重(KG)"
          ><el-input
            v-model="workReport.packInfo.netWeight"
            placeholder="请输入"
          ></el-input
        ></el-descriptions-item>
        <el-descriptions-item label="毛重(KG)"
          ><el-input
            v-model="workReport.packInfo.roughWeight"
            placeholder="请输入"
          ></el-input
        ></el-descriptions-item>
      </el-descriptions>
      <ele-pro-table
        :columns="columns"
        :datasource="workReportCategoryList"
        :need-page="false"
        class="mt-16"
      >
        <template v-slot:toolbar>
          <el-link type="primary" @click="addMaterial">添加物料</el-link>
        </template>
        <template v-slot:action="{ $index }">
          <el-link type="danger" @click="handleDelete($index)">删除</el-link>
        </template>
        <template v-slot:num="{ row }">
          <el-input v-model="row.number" placeholder="请输入"></el-input>
        </template>
      </ele-pro-table>
      <!-- <el-descriptions title="交接" direction="vertical" :column="5" border>
        <el-descriptions-item label="待交接数量"
          >kooriookami</el-descriptions-item
        >
        <el-descriptions-item label="实际数量（PCS）"
          >kooriookami</el-descriptions-item
        >
      </el-descriptions> -->
    </el-card>
    <ChooseMaterial ref="ChooseMaterialRef" @success="materialSuccess" />
  </el-form>
</template>

<script>
  import personSelectRemote from '@/components/CommomSelect/person-select-remote';
  import ChooseMaterial from '@/components/material/ChooseMaterial';
  import { reportCount, getPackageList } from '@/api/produceOrder';
  import dayjs from 'dayjs';
  export default {
    components: {
      ChooseMaterial,
      personSelectRemote
    },
    props: {
      infoData: {
        type: Object,
        default: () => ({})
      },
      taskInfo: {
        type: Object,
        default: () => ({})
      }
    },
    data () {
      return {
        packageRequirements: '',
        columns: [
          {
            label: '序号',
            type: 'index',
            width: 55
          },
          {
            label: '编码',
            prop: 'code'
          },
          {
            label: '名称',
            prop: 'name'
          },
          // {
          //   label: '类型',
          //   prop: 'index'
          // },
          {
            label: '型号',
            prop: 'model'
          },
          {
            label: '规格',
            prop: 'specification'
          },
          {
            label: '批次号',
            prop: 'batchNo'
          },
          // {
          //   label: '包装编码',
          //   prop: 'index'
          // },
          {
            label: '最小包装单元',
            prop: 'index',
            formatter: (row) =>
              `${row.netWeightUnit}${row.measuringUnit}/${row.packingUnit}`
          },
          {
            label: '数量',
            slot: 'num'
          },
          {
            label: '单位',
            prop: 'measuringUnit'
          },
          {
            label: '操作',
            slot: 'action'
          }
        ],
        categoryMsg: {
          batchNo: '',
          number: '',
          totalWeight: '',
          brandNum: '',
          sourceCategoryId: '',
          rootCategoryLevelId: '9',
          name: '',
          code: ''
        },
        workReport: {
          executorId: '',
          executorJobNum: '',
          executorTime: dayjs(new Date()).format('YYYY-MM-DD HH:mm'),
          packInfo: {
            packUnit: '',
            minPackNum: '',
            surplusNum: '',
            netWeight: '',
            roughWeight: '',
            packNum: '',
            netWeight: ''
          },
          productInfo: {
            standardNum: '',
            standardWeight: '',
            noStandardNum: '',
            noStandardWeight: ''
          }
        },
        packageList: [],
        workReportCategoryList: [],
        countMsg: {}
      };
    },
    watch: {
      taskInfo: {
        immediate: true,
        handler () {
          if (this.taskInfo.code) {
            this.getReportCount();
          }
        }
      },
      infoData: {
        immediate: true,
        handler () {
          if (this.infoData.code) {
            this._getPackageList();
          }
        }
      }
    },
    created () {
      this.workReport.executorId = this.$store.state.user.info?.userId;
      this.workReport.executorJobNum = this.$store.state.user.info?.jobNumber;
    },
    methods: {
      async _getPackageList () {
        const res = await getPackageList(this.infoData.code);

        this.packageList = res;
      },
      handleDelete (index) {
        this.$confirm('确定删除？', '提示').then(() => {
          this.workReportCategoryList.splice(index, 1);
        });
      },
      addMaterial () {
        this.$refs.ChooseMaterialRef.open(this.workReportCategoryList.slice(0));
      },
      materialSuccess (list) {
        const obj = {};
        this.workReportCategoryList = [
          ...this.workReportCategoryList,
          ...list
        ].reduce((next, pre) => {
          if (!obj[pre.id]) {
            obj[pre.id] = true;

            next.push({
              brandNo: pre.brandNum,
              code: pre.code,
              sourceCategoryId: pre.id,
              name: pre.name,
              model: pre.modelType,
              specifications: pre.specification,
              unit: pre.measuringUnit,
              number: '',
              ...pre
            });
          }
          return next;
        }, []);
      },
      async getReportCount () {
        const res = await reportCount({
          taskCode: this.taskInfo.code,
          lastTaskCode: this.taskInfo.lastTaskCode,
          workOrderId: this.infoData.id
        });

        this.countMsg = res;
      },
      getMsg () {},
      report (fun) {
        this.$refs.formRef.validate((value) => {
          if (value) {
            if (!this.workReportCategoryList?.length) {
              return this.$message.error('请添加物料');
            }
            this.$confirm('是否确定要报工?', '提示').then(() => {
              this.categoryMsg = Object.assign(this.categoryMsg, {
                brandNum: this.infoData.brandNo,
                sourceCategoryId: this.infoData.categoryId,
                name: this.infoData.productName,
                code: this.infoData.productCode
              });
              fun({
                checkState: 1,
                workReport: this.workReport,
                workReportCategoryList: [
                  ...this.workReportCategoryList,
                  this.categoryMsg
                ]
              }).then((res) => {
                this.$message.success('报工成功！');
                this.getReportCount();
              });
            });
          }
        });
      }
    }
  };
</script>

<style lang="scss" scoped>
  .suffix {
    height: 100%;
    display: flex;
    align-items: center;
  }
  .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>