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"
        @keydown.enter="startSearch"
      >
        <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,getTaskWorkOrder,queryOpsList } 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: 900,
  queryComplete: 0,
  totalPages: 1,
  keyword: "",
});
const wrapRef = ref(null);
//获取未完成订单Data
const getOrdersData = async () => {
  const { code, data } = await getTaskWorkOrder(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 = async (index: number) => {
  // if (selectIndex.value == index) return;
  if (index == null) {
    selectIndex.value = null;
    selectedOderStatus.value = false;
    return;
  }
  setSlectIndex(null);
  ordersDataArray.value[index].ops = []
  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;
  const {code, data} = await queryOpsList({workOrderCode: store.odersData.workOrderCode});
  ordersDataArray.value[selectIndex.value].ops = data
  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;
  // }
  searchText.value = searchText.value.trim();
  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>