kd-aiot-frontend-mes/src/views/produce/components/picking/details.vue

<template>
  <div>
    <ele-pro-table
      ref="table"
      :columns="columns"
      max-height="68vh"
      :datasource="dataList"
      cache-key="pickingDetails"
      highlight-current-row
      @row-click="rowClick"
      :need-page="false"
      @refresh="refresh"
    >
      <template v-slot:toolbar>
        <div class="rx-sc" v-if="!isDetails">
          <div class="c_title">领料记录 </div>
          <el-button
            type="primary"
            size="mini"
            style="margin: 0 5px"
            @click="handleAdd"
            >新增</el-button
          >
          <el-button
            type="primary"
            size="mini"
            @click="openOutsourcingPicking()"
            >委外领料</el-button
          >
        </div>
      </template>

      <template v-slot:type="{ row }">
        <!-- <el-button type="text" size="mini" @click="handDetailed(row)"
          >详情</el-button
        > -->
        <el-tag v-if="row.type == 1">自建领料</el-tag>
        <el-tag v-if="row.type == 2">工单领料</el-tag>
        <el-tag v-if="row.type == 3">委外领料</el-tag>
      </template>

      <template v-slot:action="{ row }">
        <el-button type="text" size="mini" @click="handDetailed(row)"
          >详情</el-button
        >
      </template>

      <template v-slot:status="{ row }">
        <el-tag
          :type="['danger', 'success', 'warning', 'danger'][row.status]"
          effect="dark"
          style="margin: 3px 0"
          >{{ statusList[row.status] }}</el-tag
        >
      </template>
    </ele-pro-table>

    <detailed
      @detailedClose="detailedClose"
      v-if="detailedShow"
      :detailedObj="detailedObj"
    ></detailed>

    <!-- <outsourcingPickingList
      v-if="outsourcingPickingShow"
      ref="outsourcingPickingListRef"
      :workTaskId="workListIds[0]"
      :taskId="taskId"
      :workList="workList"
      @closeOutsourcingPicking="closeOutsourcingPicking"
    ></outsourcingPickingList> -->

    <picking
      v-if="pickingShow"
      @close="pickingClose"
      :workListIds="workListIds"
    ></picking>
  </div>
</template>

<script>
  import { pickDetails } from '@/api/produce/picking';
  import { workorderList } from '@/api/produce/workOrder';
  import detailed from './detailed.vue';
  import outsourcingPickingList from './outsourcingPickingList.vue';
  import { getTaskInstanceById } from '@/api/produce/index';
  import { checkOutsource, listOutsource } from '@/api/produce/picking';
  import picking from './outsourceIndex.vue';

  import { boolean } from 'mathjs';
  export default {
    name: 'picking-details',
    components: { detailed, outsourcingPickingList, picking },
    props: {
      isDetails: {
        type: Boolean,
        default: false
      },
      workTaskId: {},
      taskId: {}
    },
    data() {
      return {
        dataList: [],
        detailedShow: false,
        detailedObj: null,

        statusList: ['未领料', '领料中', '已出库', '已驳回'],
        outsourcingPickingShow: false,
        workList: [],
        pickingShow: false
      };
    },

    computed: {
      // 表格列配置
      columns() {
        return [
          {
            columnKey: 'index',
            label: '序号',
            type: 'index',
            width: 55,
            align: 'center',
            showOverflowTooltip: true
          },
          // {
          //   label: '工序',
          //   prop: 'taskName',
          //   width: 120,
          //   align: 'center',
          //   showOverflowTooltip: true
          // },
          {
            prop: 'createTime',
            label: '领料时间',
            align: 'center',
            showOverflowTooltip: true
          },
          {
            prop: 'code',
            label: '领料单编号',
            align: 'center',
            showOverflowTooltip: true
          },

          {
            prop: 'name',
            label: '领料单名称',
            align: 'center',
            showOverflowTooltip: true
          },

          {
            prop: 'type',
            label: '领料类型',
            align: 'center',
            slot: 'type',
            showOverflowTooltip: true
          },

          {
            prop: 'executorName',
            label: '领料人',
            align: 'center'
          },

          {
            prop: 'status',
            slot: 'status',
            label: '状态',
            align: 'center'
          },

          {
            prop: '',
            label: '操作',
            width: 80,
            align: 'center',
            resizable: false,
            fixed: 'right',
            slot: 'action'
          }
        ];
      },
      taskObj() {
        return this.$store.state.user.taskObj;
      },
      clientEnvironmentId() {
        return this.$store.state.user.info.clientEnvironmentId;
      }
    },

    methods: {
      getList(workListIds) {
        this.workListIds = workListIds || [];
        pickDetails(workListIds).then((res) => {
          this.dataList = res || [];
          this.$forceUpdate();
        });
      },

      rowClick(row) {},

      handleAdd() {
        this.$emit('pickAdd', {type:'pick',includeReworkBom:true,dataList:this.dataList});
      },

      refresh() {
        this.getList(this.workListIds);
      },

      handDetailed(row) {
        this.detailedObj = JSON.stringify(row);
        this.detailedShow = true;
      },

      detailedClose() {
        this.detailedShow = false;
      },
      openOutsourcingPicking() {
        if (this.workListIds) {
          this.getTaskInstanceByIdFn();
          // this.outsourcingPickingShow=true
        } else {
          this.$message.warning('请选择工单');
        }
      },
      closeOutsourcingPicking() {
        this.outsourcingPickingShow = false;
      },

      pickingClose() {
        this.pickingShow = false;
        this.getList(this.workListIds);
      },

      //获取工单列表
      getTaskInstanceByIdFn() {
        if (this.workListIds.length == 1) {
          this.pickingShow = true;
        } else {
          this.$message.warning('只能选择一个工单进行委外领料');
        }

        // let param = {
        //   ids: [this.workListIds[0]],
        //   taskId: this.taskId
        // };
        // workorderList(param)
        //   .then((res) => {
        //     let _arr = res.map((e) => {
        //       e.pickList = [...e.bomDetailDTOS];
        //       e.bomDetailDTOS = [];
        //       return e;
        //     });

        //     this.workList = JSON.parse(JSON.stringify(_arr));

        //     console.log(this.workList, 'this.workList');
        //     this.outsourcingPickingShow = true;

        // this.getOutsourcingDataList(
        //   this.workList[0].currentTaskDiagram.taskId
        // );

        // this.$forceUpdate();
        // })
        // .finally(() => {});
        // checkOutsource({
        //   ids: [this.workListIds[0]],
        //   taskId: this.workTaskId
        // }).then((res) => {
        //   console.log(res);
        // });
        // getTaskInstanceById(this.workListIds[0]).then((res) => {
        //   // console.log(res,this.workTaskId, 'res2345678');
        //   let { data } = res;
        //   if (data.length) {
        //     let arr = data.filter((item) => item.taskId == this.workTaskId);
        //     console.log(arr, 'arr');
        //     console.log(arr, this.workTaskId, 'res2345678');
        //     if (arr[0].existOutsource) {
        //     } else {
        //       this.$message.warning('当前工序不能委外领料');
        //     }
        //   }
        // });
      }
    },
    created() {}
  };
</script>

<style lang="scss" scoped></style>