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

<template>
  <div class="index_box">
    <div class="content_box">
      <Search></Search>

      <ele-split-layout
        space="0px"
        width="45%"
        :resizable="true"
        :min-size="200"
        :max-size="-200"
        :left-style="{
          background: 'rgba(185, 182, 229, .4)',
          overflow: 'hidden',
          width: '100%'
        }"
        :right-style="{ overflow: 'hidden' }"
        :responsive="false"
        style="height: calc(100vh - 70px - 50px - 80px)"
      >
        <div class="left_main">
          <div class="top">
            <produceOrder @workSelect="workSelect"></produceOrder>
          </div>
          <div class="bottom">
            <productionResource></productionResource>
          </div>
        </div>
        <template v-slot:content>
          <div class="right_main">
            <div v-if="operationType == 'pick'">
              <pickDetails ref="pickListRef"></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>
        </template>
      </ele-split-layout>

      <footBtn @footBtn="footBtn"></footBtn>
    </div>

    <!--领料弹框 -->
    <picking
      v-if="pickingShow"
      @close="pickingClose"
      :workListIds="workListIds"
    ></picking>
  </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 picking from './components/picking/index.vue';
  import pickDetails from './components/picking/details.vue';

  import feeding from './components/feeding/index.vue';

  import jobBooking from './components/jobBooking/index.vue';
  import warehousing from './components/warehousing/index.vue';


  export default {
    components: {
      Search,
      footBtn,
      produceOrder,
      productionResource,

      picking,
      pickDetails,

      feeding,

      jobBooking,
      warehousing
    },
    data() {
      return {
        loading: false,
        operationType: null,
        workListIds: [],

        pickingShow: false
      };
    },

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

    created() {
      this.operationType = null;
      this.workListIds = [];
    },
    methods: {
      workSelect(data) {
        this.workListIds = data;
      },

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

          this.pickingShow = true;
        }

        if (t == 'feed') {
        }
      },

  

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

    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>
  .new-ele-admin-tabs {
    display: none !important;
  }

  .c_title {
    color: #157a2c;
    font-size: 18px;
    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>
  .index_box {
    padding: 8px;
    padding-bottom: 0px;
    width: 100%;

    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: calc((100vh - 70px - 50px - 80px - 20px) / 2);
      overflow: hidden;
    }

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

  .right_main {
    min-width: 640px;
    height: calc((100vh - 70px - 50px - 80px - 12px));
    margin-top: 6px;
  }
</style>