JG-CLIENT-TEMP/src/views/process/orders.vue

<template>
  <div>
    <div class="commonTitle">
      {{ activeName == "ok" ? "已完成工单" : "待完成工单" }}[{{ ordersSum }}]
    </div>

    <el-tabs
      v-model="activeName"
      class="demo-tabs"
      type="card"
      @tab-click="handleClick"
    >
      <el-tab-pane label="未完成" name="false" />
      <el-tab-pane label="已完成" name="ok" />
    </el-tabs>
    <div style="margin-bottom: 10px">
      <el-input
        v-model="searchText"
        class="input-with-select"
        clearable
        placeholder="请输入物料名称或工单编号或计划编号进行查询"
        @clear="clearSearch"
      >
        <template #append>
          <el-button :icon="Search" @click="startSearch" />
        </template>
      </el-input>
    </div>
    <el-scrollbar
      ref="wrapRef"
      v-loading="map.get('getProcessOrders')"
      class="barHeight"
      @scroll="handleScroll"
    >
      <!-- <el-scrollbar class="barHeight" ref="wrapRef" @scroll="handleScroll"> -->

      <Order
        v-for="(item, index) in ordersDataArray"
        :key="index"
        :hoverStatus="index == selectIndex ? true : false"
        :item="item"
        @click="setSlectIndex(index)"
      />

      <div
        v-if="ordersQuery.pageNo == ordersQuery.totalPages"
        class="describeText notice"
      >
        已经到底啦~
      </div>
    </el-scrollbar>
    <Empty v-if="ordersDataArray.length < 1" />
  </div>
</template>
<script lang="ts" setup>
import Order from "@/views/process/components/order.vue";
import {
  useCommonStoreHook,
  useDictionaryStore,
  useProcessStore,
} from "@/store";
import { getOrders } from "@/api/process";
import { emitter, EventsNames } from "@/utils/common";
import { Search } from "@element-plus/icons-vue";

const dictS = useDictionaryStore();
const store = useProcessStore();
const selectSeqIndex = inject("selectSeqIndex");
const selectedOderStatus = inject("selectedOderStatus");
const ordersSum = ref(0);
const commonS = useCommonStoreHook();
const map = commonS.loadingMap;
const emit = defineEmits(["getindex"]);
const ordersDataArray = inject("ordersDataArray");
const selectSeqArray = inject("selectSeqArray");
//获取未完成订单的参数
const ordersQuery = ref({
  pageNo: 1,
  pageSize: 5,
  queryComplete: 0,
  totalPages: 1,
  keyword: "",
});
const wrapRef = ref(null);
//获取未完成订单Data
const getOrdersData = async () => {
  const { code, data } = await getOrders(ordersQuery.value);
  if (code == "200") {
    if (ordersQuery.value.pageNo == 1) {
      ordersDataArray.value = data.records;
    } else {
      ordersDataArray.value.push(...data.records);
    }
    ordersSum.value = data.totalCount;
    ordersQuery.value.totalPages = data.totalPages;
  }
};
//重新刷新当前页码数据
const resetOrdersDataArray = async () => {
  ordersDataArray.value = [];
  ordersQuery.value = {
    pageNo: 1,
    pageSize: 5,
    queryComplete: 0,
    totalPages: 1,
  };
  store.odersData.productLineId = "";
  store.odersData.workOrderCode = "";
  store.processInfo.materialName = "";
  store.processInfo.materialModel = "";
  store.odersData.operationId = "";
  store.processInfo.operationCode = "";
  store.processInfo.operationName = "";
  store.useSeqNo = "";
  selectSeqArray.value = [];
  selectSeqIndex.value = null;
  getOrdersData();
};
const activeName = ref("false");
//这里是存放控制当前选择工序的index
const selectIndex = ref(null);
const setSlectIndex = (index: number) => {
  if (selectIndex.value == index) return;
  if (index == null) {
    selectIndex.value = null;
    selectedOderStatus.value = false;
    return;
  }
  selectIndex.value = index;
  store.odersData.productLineId =
    ordersDataArray.value[selectIndex.value].productLineId;
  store.odersData.workOrderCode =
    ordersDataArray.value[selectIndex.value].workOrderCode;
  store.processInfo.materialName =
    ordersDataArray.value[selectIndex.value].materialName;
  store.processInfo.materialModel =
    ordersDataArray.value[selectIndex.value].materialModel;
  store.processInfo.documentShow =
    ordersDataArray.value[selectIndex.value].documentShow;
  store.odersData.operationId = "";
  store.processInfo.operationCode = "";
  store.processInfo.operationName = "";
  store.useSeqNo = "";
  selectSeqArray.value = [];
  selectSeqIndex.value = null;
  emit("getindex", selectIndex.value);
};
const handleClick = (tab: TabsPaneContext, event: Event) => {
  setSlectIndex(null);
  store.odersData.productLineId = "";
  store.odersData.workOrderCode = "";
  store.processInfo.materialName = "";
  store.processInfo.materialModel = "";
  store.processInfo.documentShow = "";
};
//滚动事件
const handleScroll = (obj: obj) => {
  //当发生滚动触底时
  if (
    wrapRef.value.wrapRef.scrollHeight ==
    Math.ceil(obj.scrollTop) + wrapRef.value.wrapRef.clientHeight
  ) {
    if (ordersQuery.value.pageNo < ordersQuery.value.totalPages) {
      ordersQuery.value.pageNo = ordersQuery.value.pageNo + 1;
      getOrdersData();
    }
  }
};
watch(
  () => activeName.value,
  (val) => {
    if (val == "ok") {
      ordersQuery.value.queryComplete = 1;
      ordersQuery.value.pageNo = 1;
    } else {
      ordersQuery.value.queryComplete = 0;
      ordersQuery.value.pageNo = 1;
    }
    ordersDataArray.value = [];
    getOrdersData();
  }
);
onMounted(() => {
  getOrdersData();
  emitter.on(EventsNames.PROCESS_REDER, () => {
    resetOrdersDataArray();
    setSlectIndex(null);
  });
});

// 顶部添加搜索
const searchText = ref("");

const clearSearch = () => {
  searchText.value = "";
  ordersQuery.value.keyword = "";
  ordersQuery.value.pageNo = 1;
  getOrdersData();
};
const startSearch = () => {
  if (searchText.value.trim() == "") {
    return;
  }
  ordersQuery.value.keyword = searchText.value;
  ordersQuery.value.pageNo = 1;
  getOrdersData();
};
</script>

<style lang="scss" scoped>
.barHeight {
  height: calc(100vh - 305px);

  .notice {
    text-align: center;
  }
}

:deep(.el-tabs--card > .el-tabs__header .el-tabs__nav) {
  background: rgba(0, 0, 0, 0.1);
  border-radius: 16px 16px 16px 16px;
  overflow: hidden;
  border: 0;
}

:deep(.el-tabs--card > .el-tabs__header) {
  height: 80px;
  border: 0;
  overflow: hidden;
  border-radius: 16px 16px 16px 16px;
}

:deep(.el-tabs--card > .el-tabs__header .el-tabs__item) {
  width: calc(12.5vw - 15px);
  height: 80px;
  border-radius: 0;
  font-weight: 500;
  font-size: 24px;
  overflow: hidden;
  background: transparent;
  border-color: transparent;
}

:deep(.el-tabs--card > .el-tabs__header .el-tabs__item.is-active) {
  background: white;
  border-radius: 16px 16px 16px 16px;
  border-color: transparent;
  overflow: hidden;
}

.scrollbar-demo-item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  margin: 10px;
  text-align: center;
  border-radius: 4px;
  background: var(--el-color-primary-light-9);
  color: var(--el-color-primary);
}

.input-with-select .el-input-group__prepend {
  background-color: var(--el-fill-color-blank);
}
</style>