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">
            </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="请输入关键字" />
            <!-- <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" @pickAdd="pickAdd"></pickDetails>
              </div>

              <div v-if="operationType == 'feed'">
                <!-- 投料 -->
                <feeding :workListIds="workListIds"></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"></jobBooking>



              </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" v-else></outsourceList>

              </div>

            </div>
          </template>

        </ele-split-layout>

        <footBtn @footBtn="footBtn" :type="type" 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>
    <!-- :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 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 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
  },
  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'
      }
    };
  },

  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) {
      console.log(data);


      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);
    },


    // 获取工序列表
    getTaskList() {
      listTask().then((res) => {
        res.map(v => {
          v.newName = `${v.workCenterName}-${v.name}`
        })
        this.produceTaskList = res;
        this.arr = JSON.parse(JSON.stringify(this.produceTaskList));
        // 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;
    },

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

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


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



      this.isStep = false;

    },

    workSelect(data) {

      this.isStep = true;
      this.operationType = null;
      this.workListIds = data.ids;
    },

    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 false;
      }
      if (['pick', 'feed', 'job'].includes(t)) {
        if (this.workListIds.length == 0) {
          this.$message.warning('请选择工单列表');
          return false;
        }
      }

      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);
          let arr = data.findIndex(item => item.sourceTaskId == this.taskObj.id)
          console.log(arr);
          if (arr != -1) {
            data.splice(0, arr + 1)
          }
          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) {
      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>