kd-aiot-frontend-mes/src/views/produce/index.vue

<template>
  <div class="index_box">
    <div class="content_box">
      <!-- @tab-click="handleClick" -->
      <!-- 工序名称 -->
      <!-- <Search></Search> -->
      <div class="content_box_tab">
        <el-input
          style="width: 180px"
          clearable
          v-model="name"
          placeholder="请输入筛选项"
          @input="seekInput"
        />
        <el-tabs
          v-model="activeName"
          type="card"
          stretch
          @tab-click="tabClickValue"
        >
          <el-tab-pane label="工序" name="0">
            <el-tree
              :data="produceTaskList"
              :props="defaultProps"
              node-key="id"
              :highlight-current="true"
              @node-click="handleNodeClick"
              ref="taskListRef"
            >
            </el-tree>

            <!--
              v-loading="treeLoading"
              :node-key="nodeKey"
              ref="tree"
              :highlight-current="true"
              :expand-on-click-node="false"
              @node-click="handleNodeClick"
              v-bind="$attrs"
              :default-expand-all="defaultExpandAll" -->
          </el-tab-pane>
          <el-tab-pane label="工位" name="second">
            <!-- <AssetTree @handleNodeClick="handleNodeClickNew" @setRootId="setRootId" id="0" :paramsType="'type'"
              ref="treeList" eqDevice="sb" /> -->
            <el-tree
              :data="factoryworkstationList"
              :props="defaultPropsTow"
              node-key="id"
              :highlight-current="true"
              @node-click="handleNodeClick"
            >
            </el-tree>
          </el-tab-pane>
        </el-tabs>
      </div>

      <div style="width: calc(100% - 220px)">
        <div class="seek-list" style="background-color: #157a2c">
          <div>
            <el-input
              style="width: 180px; margin-right: 5px"
              clearable
              v-model="keyWord"
              placeholder="请输入关键字"
              @clear="handleSearch"
            />
            <!-- <el-input style="width: 180px" clearable v-model="taskName" placeholder="请输入工序进度" /> -->
            <!--  -->
            <el-button
              size="mini"
              type="primary"
              style="margin: 0 5px"
              @click="handleSearch"
              >查询</el-button
            >
          </div>
          <div
            style="
              width: 55%;
              color: #fff;
              display: flex;
              justify-content: space-between;
            "
          >
            <div>
              <b style="margin-right: 50px">当前工序：{{ title }}</b>
              <b>下道工序：{{ title1 }}</b>
            </div>

            <div> 操作员：{{ info.name }} </div>
          </div>
        </div>

        <ele-split-layout
          space="0px"
          width="45%"
          :resizable="true"
          :min-size="200"
          :max-size="-200"
          :left-style="{
            overflow: 'hidden',
            width: '100%'
          }"
          :right-style="{ overflow: 'hidden' }"
          :responsive="false"
          style="height: calc(100vh - 70px - 50px - 90px)"
        >
          <!-- 左侧 工单列表 -->
          <div class="left_main">
            <div class="top">
              <!-- /工单列表 -->
              <produceOrder
                @workSelect="workSelect"
                @rowClick="rowClick"
                ref="produceOrder"
                @getTaskName="getTaskName"
              >
              </produceOrder>
            </div>
            <!-- <div class="bottom">
            <productionResource :BomObj="BomObj"></productionResource>
          </div> -->
          </div>
          <!-- 右侧 详情 -->
          <template v-slot:content>
            <div class="right_main">
              <!-- 领料 -->
              <div v-if="operationType == 'pick'">
                <pickDetails
                  ref="pickListRef"
                  :workTaskId="workTaskId"
                  @pickAdd="pickAdd"
                ></pickDetails>
              </div>

              <div v-if="operationType == 'feed'">
                <!-- 投料 -->
                <feeding
                  :workListIds="workListIds"
                  :feedNeedEquipment="feedNeedEquipment"
                ></feeding>
              </div>

              <div v-if="operationType == 'job'">
                <!-- // 报工列表 入库 -->

                <warehousing
                  v-if="taskObj.id == -1"
                  :workListIds="workListIds"
                  ref="wareRef"
                ></warehousing>

                <!-- // 设备 入库 -->
                <!-- 普通报工 -->
                <jobBooking
                  v-else
                  :workListIds="workListIds"
                  ref="jobRef"
                  :reportNeedFeed="reportNeedFeed"
                ></jobBooking>

                <!-- <workPlan
                  style="width: 100%"
                  v-else
                  :workListIds="workListIds"
                  ref="jobRef"
                  :reportNeedFeed="reportNeedFeed"
                >
                </workPlan> -->
              </div>

              <!-- 质检工序 -->

              <div v-if="operationType == 'inspection'">
                <inspection
                  :workListIds="workListIds"
                  ref="inspectionRef"
                ></inspection>
              </div>

              <!-- 委外 -->
              <div
                v-if="operationType == 'Outsourcing' && isType == '3'"
                class="right_main_box"
              >
                <outsourcing
                  :outsourceFormVal="outsourceForm"
                  @changePlugIn="changePlugIn"
                  v-if="isStep"
                ></outsourcing>

                <!--   -->
                <outsourceList
                  :outsourceFormVal="outObj"
                  @closeForm="closeForm"
                  @outScucc="outScucc"
                  v-else
                ></outsourceList>
              </div>
            </div>
          </template>
        </ele-split-layout>

        <footBtn
          @footBtn="footBtn"
          :type="type"
          :singleReportInspection="singleReportInspection"
          style="background: rgba(223, 250, 222, 0.6); padding: 10px"
        ></footBtn>
      </div>
      <!-- <footBtn @footBtn="footBtn"></footBtn> -->
    </div>

    <!--领料弹框 -->
    <picking
      v-if="pickingShow"
      @close="pickingClose"
      :workListIds="workListIds"
    ></picking>

    <!-- 工艺文件 -->
    <wokePopup ref="wokePopupRef"></wokePopup>
    <!-- 检验报工 -->
    <workPlan ref="jobRefs"> </workPlan>
    <!-- <workes ref="jobRefs"> </workes> -->

    <!-- :workListIds="workListIds" :taskId="taskObj.id" -->
  </div>
</template>

<script>
  import Search from './components/search.vue';
  import footBtn from './components/footBtn.vue';
  // import produceOrder from './components/produceOrder.vue';
  import produceOrder from './components/new_produceOrder.vue';
  import productionResource from './components/productionResource/index.vue';
  import outsourcing from './components/outsourcing/index.vue';
  import picking from './components/picking/index.vue';
  import wokePopup from './components/picking/wokePopup.vue';
  import inspection from './components/inspection/index.vue';

  import pickDetails from './components/picking/details.vue';
  import AssetTree from '@/components/AssetTree/joobIndex.vue';
  import feeding from './components/feeding/index.vue';

  import jobBooking from './components/jobBooking/index.vue';
  import workPlan from './components/workPlan/index.vue';
  import workes from './components/workPlan/components/work.vue';
  import warehousing from './components/warehousing/index.vue';
  import outsourceList from './components/outsourcing/outsourceList.vue';

  import {
    getByTaskId,
    pcCheckOutsource,
    getTaskInstanceById,
    checkOutsourceMaterial,
    listTask,
    factoryworkstationPage,
    nextTask
  } from '@/api/produce/index';

  export default {
    components: {
      Search,
      footBtn,
      wokePopup,
      produceOrder,
      productionResource,
      outsourcing,
      picking,
      pickDetails,
      outsourceList,
      feeding,
      AssetTree,
      jobBooking,
      inspection,
      warehousing,
      workPlan,
      workes
    },
    data() {
      return {
        name: '',
        activeName: '0',
        taskName: '',
        keyWord: '', //搜索
        title: '',
        type: '',
        loading: false,
        operationType: null,
        workListIds: [],
        factoryworkstationList: [],
        title1: '',
        arr: [],
        arrTow: [],
        produceTaskList: [],
        isType: '',
        isStep: true,
        outsourceForm: {},
        outObj: {},
        pickingShow: false,
        wokePopup: false,

        BomObj: {},
        defaultProps: {
          children: 'children',
          label: 'newName'
        },
        defaultPropsTow: {
          children: 'children',
          label: 'name',
          value: 'code'
        },
        feedNeedEquipment: 0, //投料是否要添加生产设备1是0否
        reportNeedFeed: 0, //生产质检是否需要处置再报工1是0否
        singleReportInspection: null, //获取选中的工单是单个还是批量
        workTaskId: null, //选中的工单工序id
        workData: {}
      };
    },

    computed: {
      taskObj() {
        return this.$store.state.user.taskObj;
      },
      info() {
        return this.$store.state.user.info;
      }
    },

    created() {
      this.init();

      this.getTaskList();
      this.getFactoryworkstationPageList();

      this.operationType = null;
      this.workListIds = [];
    },
    methods: {
      tabClickValue() {
        this.name = '';
        this.seekInput();
      },
      // 前端筛选
      seekInput() {
        // console.log(activeName);

        if (this.activeName == '0') {
          if (!this.name) return (this.produceTaskList = this.arr);
          this.produceTaskList = this.produceTaskList.filter((item) => {
            return item.name.indexOf(this.name) > -1;
          });
        } else {
          if (!this.name) return (this.factoryworkstationList = this.arrTow);
          this.factoryworkstationList = this.factoryworkstationList.filter(
            (item) => {
              return item.name.indexOf(this.name) > -1;
            }
          );
        }
      },

      //  折叠悬浮中样式调整
      init() {
        this.$store.dispatch('theme/setCollapse', true);
      },
      async getTaskName(value) {
        if (value.length > 0) {
          let res = await nextTask({
            taskId: this.taskObj.id,
            workOrderIds: value.map((item) => item.id)
          });
          this.title1 = res.data.map((item) => item.taskTypeName).toString();
        } else {
          this.title1 = '';
        }
      },
      handleSearch() {
        let obj = {
          keyWord: this.keyWord,
          taskName: this.taskName
        };
        this.$refs.produceOrder.handleSearch(obj);
        //handleSearch(this.code);
      },

      handleNodeClickNew(info) {
        console.log(info, '999');
        // this.current = info;

        let current = { id: info.id };

        this.$store.commit('user/currentObj', current);
      },
      setRootId(id) {
        this.rootId = id;
      },
      // 点击工序
      handleNodeClick(data) {
        this.feedNeedEquipment = data.feedNeedEquipment;
        this.reportNeedFeed = data.reportNeedFeed;

        let obj = {
          1: `${data.workCenterName}-${data.name}(普通工序)`,
          3: `${data.workCenterName}-${data.name}(质检工序)`,
          4: `${data.workCenterName}-${data.name}(包装工序)`,
          5: `${data.workCenterName}-${data.name}(入库工序)`,
          6: `${data.workCenterName}-${data.name}(质检工序)`
        };

        this.title = obj[data.type] || '';
        this.type = data.type;
        let taskObj = {};
        taskObj = this.produceTaskList.find((item) => item.id === data.id);
        this.$store.commit('user/setTaskObj', taskObj);
      },

      handleChoose(val) {
        console.log(val);
      },

      // 获取工序列表
      getTaskList() {
        listTask().then((res) => {
          res.map((v) => {
            v.newName = `${v.workCenterName}-${v.name}`;
          });
          this.produceTaskList = res;
          this.arr = JSON.parse(JSON.stringify(this.produceTaskList));
          //默认选择第一个工序
          if (this.produceTaskList?.length) {
            this.$store.commit('user/setTaskObj', this.produceTaskList[0]);
            this.$nextTick(() => {
              this.$refs.taskListRef.setCurrentKey(this.produceTaskList[0].id);
            });
          }
          // newName
        });
      },

      // 获取工位
      getFactoryworkstationPageList() {
        factoryworkstationPage({ pageNum: 1, size: 99999999 }).then((res) => {
          console.log(res, 'res');
          this.factoryworkstationList = res.list;

          this.arrTow = JSON.parse(JSON.stringify(this.factoryworkstationList));

          // newName
        });
      },

      closeForm() {
        this.isStep = true;
      },
      outScucc() {
        this.operationType = null;
      },

      // 切换组件
      async changePlugIn(e) {
        this.outObj = e;

        let req = {
          taskId: e.taskId,
          taskIds: e.taskIds,
          workOrderId: e.workOrderId,
          quantity: e.formedNumLast
        };
        const res = await checkOutsourceMaterial(req);

        this.outObj = { ...res.data, ...this.outsourceForm, ...this.outObj };

        this.isStep = false;
      },

      workSelect(data) {
        console.log(11112222, data);
        this.workTaskId = data.list.length > 0 ? data.list[0].taskId : null;
        this.singleReportInspection =
          data.list.length > 0 ? data.list[0].singleReport : null; //获取选中的工单是单个还是批量
        this.isStep = true;
        this.operationType = null;
        this.workListIds = data.ids;
        this.workData = data.list[0];
      },

      pickingWokeClose() {
        this.wokePopup = false;
      },

      footBtn(t) {
        this.operationType = t;
        if (
          Object.keys(this.$store.state.user.taskObj).length === 0 &&
          this.$store.state.user.taskObj.constructor === Object
        ) {
          this.$message.warning('请选择工序');
          return true;
        }
        if (['pick', 'feed', 'job'].includes(t)) {
          if (this.workListIds.length == 0) {
            this.$message.warning('请选择工单列表');
            return false;
          }
        }

        // console.log('按钮被点击了.....', t);
        if (t === 'job') {
          let req = {
            taskId: this.taskObj.id,
            workOrderId: this.workListIds[0],
            data: this.workData
          };

          if (this.taskObj.id == '1916800744740663298') {
            this.$refs.jobRefs.open(req);
          }
        }

        if (t == 'pick') {
          this.$nextTick(() => {
            this.$refs.pickListRef.getList(this.workListIds);
          });
        }
        // 工艺路线
        if (t === 'work') {
          let req = {
            taskId: this.taskObj.id,
            workOrderId: this.workListIds[0]
          };

          this.$refs.wokePopupRef.open(req);
        }
        if (t == 'feed') {
        }

        // 委外
        if (t == 'Outsourcing') {
          if (this.workListIds.length > 1) {
            return this.$message.warning('委外工序只能选择一个工单！');
          } else if (this.workListIds.length < 1)
            return this.$message.warning('请选择工单！');
          else {
            // /
            this.handOutsource(this.workListIds[0]);
          }
        }
      },

      handOutsource(workOrderId) {
        console.log(this.taskObj, workOrderId);
        // return
        let param = {
          taskId: this.taskObj.id,
          workOrderId: workOrderId
        };
        pcCheckOutsource(param).then((res) => {
          this.outsourceForm = {
            ...res.data
          };
          this.outsourceForm.name = this.taskObj.name + '委外';

          console.log(res, 'res');
          if (res.data.outsource) {
            this.isType = '3';
            this.getTaskInstanceByIdFn(workOrderId);
          } else {
            return this.$message.warning('此工序不能委外');
          }
        });
      },

      //获取工单列表
      getTaskInstanceByIdFn(workOrderId) {
        getTaskInstanceById(workOrderId).then((res) => {
          console.log(res, 'res');
          let { data } = res;
          if (data.length) {
            data = data.filter((item) => item.type == 1 || item.type == 4);
            let arr = data.findIndex(
              (item) => item.sourceTaskId == this.taskObj.id
            );
            console.log(arr);
            if (arr != -1) {
              data.splice(0, arr + 1);
            }
            console.log(data, '吃饭吃饭吃饭吃饭');
            this.$set(this.outsourceForm, 'newStepsList', data);
          }
        });
      },

      pickAdd() {
        this.pickingShow = true;
      },

      // 关闭领料弹窗

      pickingClose(val) {
        if (val) {
          this.$nextTick(() => {
            this.$refs.pickListRef.getList(this.workListIds);
          });
        }
        this.pickingShow = false;
      },

      rowClick(row, taskId) {
        console.log(row, taskId, 'row');
        if (taskId) {
          let params = {
            categoryId: row.categoryId,
            taskId: taskId
          };
          getByTaskId(params).then((res) => {
            this.BomObj = res.data;
            this.$forceUpdate();
          });
        }
      }
    },

    mounted() {
      this.$nextTick(() => {
        const targetElements =
          document.getElementsByClassName('ele-admin-tabs');

        if (targetElements.length > 0) {
          // 遍历所有具有 'ele-admin-tabs' 类的元素
          Array.from(targetElements).forEach((element) => {
            // 对每个元素添加 'new-ele-admin-tabs' 类
            element.classList.add('new-ele-admin-tabs');
          });
        }
      });
    },

    destroyed() {
      this.$nextTick(() => {
        const targetElements =
          document.getElementsByClassName('ele-admin-tabs');
        if (targetElements.length > 0) {
          Array.from(targetElements).forEach((element) => {
            element.classList.remove('new-ele-admin-tabs');
          });
        }
      });
    }
  };
</script>

<style>
  .content_box {
    display: flex;
  }

  .content_box_tab {
    width: 220px;
    padding: 5px;
    height: calc(100vh - 73px);
    background-color: #fff;
    overflow-y: auto;
  }

  .footBtn {
    position: absolute;
    bottom: 20px;
    left: 0;
  }

  .new-ele-admin-tabs {
    display: none !important;
  }

  .c_title {
    color: #157a2c;
    font-size: 16px;
    font-weight: bold;
  }

  .tableZ_box {
    border: 1px solid #e3e5e5;
    margin: 6px 0;

    &:last-child {
      border-bottom: none;
    }

    .row {
      width: 100%;
      display: flex;
    }

    .col {
      width: calc(100% / 5);
      display: flex;
      align-items: center;
      min-width: 200px;
      min-height: 32px;
      border-bottom: 1px solid #e3e5e5;
      border-right: 1px solid #e3e5e5;

      &:last-child {
        border-right: none;
      }

      .name {
        display: flex;
        align-items: center;
        padding: 4px;
        width: 80px;
        height: 100%;
        background-color: #d0e4d5;
        color: #000;
      }

      .content {
        padding: 4px 6px;
        color: #000;
      }
    }

    .pd6 {
      padding: 0 6px;
    }
  }
</style>
<style lang="scss" scoped>
  .seek-list {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 10px;
  }

  .right_main_box {
    background-color: #fff;
    height: 100%;
    box-sizing: border-box;
  }

  .index_box {
    padding: 10px;
    padding-bottom: 0;
    width: 100%;
    box-sizing: border-box;
    min-width: 1280px !important;
    height: calc(100vh - 60px);
    // overflow-x: auto;
    /* 当内容超出宽度时，允许水平滚动 */
    white-space: nowrap;
    /* 防止内部文本换行，确保所有内容都在一行显示 */
    scrollbar-width: thin;
    /* 设置滚动条宽度（浏览器兼容性可能有所不同） */
    scrollbar-color: #40a9ff transparent;
    /* 设置滚动条颜色和轨道颜色（同样，浏览器兼容性） */
  }

  .main {
    width: 100%;
    min-width: 1280px;

    height: calc(100vh - 70px - 50px - 80px);
    display: flex;
    justify-content: space-between;
  }

  .left_main {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    min-width: 640px;

    .top {
      width: 100%;
      height: 100%;
      overflow: hidden;
    }

    // .bottom {
    //   width: 100%;
    //   min-height: calc((100vh - 70px - 50px - 80px - 20px) / 2);
    //   overflow: hidden;
    // }
  }

  ::v-deep .el-tabs__item.is-active {
    background-color: #dffade;
    /* 蓝色背景 */
    color: #333;
  }

  ::v-deep .is-active {
    color: #dffade;
  }

  .right_main {
    min-width: 640px;
    padding-bottom: 12px;
    height: calc((100vh - 70px - 50px - 80px - 12px));
    background: #f0f3f3;
  }
</style>