JG-ADMIN-TEMP/src/views/pro/traceability/index.vue

<template>
  <div class="mainContentBox common-layout">
    <el-container>
      <el-aside
        width="600px"
        style="min-height: 800px; max-height: calc(100vh - 200px)"
      >
        <avue-crud
          ref="crudRef"
          v-model:search="search"
          v-model="form"
          :data="data"
          :option="option"
          v-model:page="page"
          @cell-click="handleCellClick"
          @search-change="searchChange"
          @size-change="dataList"
          @search-reset="resetChange"
          @current-change="dataList"
          @selection-change="selectionChange"
        >
          <template #seqNo="{ row }">
            <el-tag :type="chooseTagType(row.level, 'css')">{{
              chooseTagType(row.level, "text")
            }}</el-tag>
            {{ row.seqNo }}
          </template>
        </avue-crud>
      </el-aside>
      <el-container>
        <el-header style="height: 20%">
          <el-descriptions title="产品信息一览" border>
            <el-descriptions-item label="产品名称">{{
              productReviewInfo.materialName
            }}</el-descriptions-item>
            <el-descriptions-item label="流转卡号">{{
              productReviewInfo.seqNo
            }}</el-descriptions-item>
            <el-descriptions-item label="物料编号">{{
              productReviewInfo.materialCode
            }}</el-descriptions-item>
            <el-descriptions-item label="产品规格">{{
              productReviewInfo.materialModel
            }}</el-descriptions-item>
            <el-descriptions-item label="订单编号">{{
              productReviewInfo.orderCode
            }}</el-descriptions-item>
            <el-descriptions-item label="是否返工">
              <el-tag size="small">{{ productReviewInfo.rework }}</el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="工单出站">{{
              productReviewInfo.outNum
            }}</el-descriptions-item>
            <el-descriptions-item label="交付日期">{{
              productReviewInfo.planStartEnd
            }}</el-descriptions-item>
            <el-descriptions-item label="工单报故"
              ><el-tag size="small">{{
                productReviewInfo.bug
              }}</el-tag></el-descriptions-item
            >
          </el-descriptions>
        </el-header>
        <el-main>
          <el-tabs
            type="border-card"
            @tab-click="tabsEvent"
            v-model="defaultTabName"
          >
            <el-tab-pane name="traceabilityComRef" label="生产履历">
              <template #label>
                <span
                  >生产履历
                  <el-badge
                    :value="tabCount.traceability"
                    class="item"
                    type="primary"
                  />
                </span>
              </template>
              <TraceabilityCom ref="traceabilityComRef" />
            </el-tab-pane>
            <el-tab-pane name="materialsComRef" label="已采物料">
              <template #label>
                <span
                  >已采物料
                  <el-badge
                    :value="tabCount.materials"
                    class="item"
                    type="primary"
                  />
                </span>
              </template>
              <MaterialsCom ref="materialsComRef" />
            </el-tab-pane>
            <el-tab-pane name="recordComRef" label="记录项">
              <template #label>
                <span
                  >记录项
                  <el-badge
                    :value="tabCount.record"
                    class="item"
                    type="primary"
                  />
                </span>
              </template>
              <RecordCom ref="recordComRef"
            /></el-tab-pane>
            <el-tab-pane name="checkComRef" label="点检判定">
              <template #label>
                <span
                  >点检判定
                  <el-badge
                    :value="tabCount.checks"
                    class="item"
                    type="primary"
                  />
                </span>
              </template>
              <CheckCom ref="checkComRef" />
            </el-tab-pane>
            <el-tab-pane name="equitComRef" label="设备使用">
              <template #label>
                <span
                  >设备使用
                  <el-badge
                    :value="tabCount.equit"
                    class="item"
                    type="primary"
                  />
                </span>
              </template>
              <EquitCom ref="equitComRef"
            /></el-tab-pane>
            <el-tab-pane name="faultComRef" label="报故记录">
              <template #label>
                <span
                  >报故记录
                  <el-badge
                    :value="tabCount.fault"
                    class="item"
                    type="primary"
                  />
                </span>
              </template>
              <FaultCom ref="faultComRef" />
            </el-tab-pane>
            <!--            <el-tab-pane name="bugComRef" label="缺陷项">缺陷项</el-tab-pane>-->
            <el-tab-pane name="mediaComRef" label="图片采集"
              ><template #label>
                <span
                  >图片采集
                  <el-badge
                    :value="tabCount.medias"
                    class="item"
                    type="primary"
                  />
                </span>
              </template>
              <media-com ref="mediaComRef"
            /></el-tab-pane>
            <el-tab-pane name="excelComRef" label="表格数据"
              ><template #label>
                <span
                  >表格数据
                  <el-badge
                    :value="tabCount.excel"
                    class="item"
                    type="primary"
                  />
                </span>
              </template>
              <ExcelCom ref="excelComRef"
            /></el-tab-pane>
            <el-tab-pane name="collectionComRef" label="表格数据"
              ><template #label>
                <span
                  >数据采集
                  <el-badge
                    :value="tabCount.collect"
                    class="item"
                    type="primary"
                  />
                </span>
              </template>
              <CollectionCom ref="collectionComRef"
            /></el-tab-pane>
          </el-tabs>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script setup>
import { ref, getCurrentInstance } from "vue";
import { useCrud } from "@/hooks/userCrud";
import { traceabilityTabCount } from "@/api/process";
import { getMaterialDetailsByseqNo, getOperationCompent } from "@/api/material";
import TraceabilityCom from "@/views/pro/traceability/components/traceabilityCom.vue";
import MaterialsCom from "@/views/pro/traceability/components/materialsCom.vue";
import RecordCom from "@/views/pro/traceability/components/recordCom.vue";
import CheckCom from "@/views/pro/traceability/components/checkCom.vue";
import EquitCom from "@/views/pro/traceability/components/equitCom.vue";
import FaultCom from "@/views/pro/traceability/components/faultCom.vue";
import MediaCom from "./components/mediaCom.vue";
import ExcelCom from "./components/excelCom.vue";
import CollectionCom from "./components/collectionCom.vue";
// 传入一个url，后面不带/
const { form, data, option, search, page, toDeleteIds, Methords, Utils } =
  useCrud({
    src: "/api/v1/process/web/traceability",
  });

const { dataList, createRow, updateRow, deleteRow, searchChange, resetChange } =
  Methords; //增删改查
const { selectionChange, multipleDelete } = Methords; //选中和批量删除事件
const { checkBtnPerm } = Utils; //按钮权限等工具

const crudRef = ref(null); //crudRef.value 获取avue-crud对象

const traceabilityComRef = ref(null);
const materialsComRef = ref(null);
const recordComRef = ref(null);
const checkComRef = ref(null);
const equitComRef = ref(null);
const faultComRef = ref(null);
const mediaComRef = ref(null);
const excelComRef = ref(null);
const collectionComRef = ref(null);
let defaultTabName = ref("traceabilityComRef");
//tab页组件
const tabNameComRef = new Map([
  ["traceabilityComRef", traceabilityComRef],
  ["materialsComRef", materialsComRef],
  ["recordComRef", recordComRef],
  ["checkComRef", checkComRef],
  ["equitComRef", equitComRef],
  ["faultComRef", faultComRef],
  ["mediaComRef", mediaComRef],
  ["excelComRef", excelComRef],
  ["collectionComRef", collectionComRef],
]);
let temRow = ref({});
const tabsEvent = (pane, ev) => {
  defaultTabName.value = pane.props.name;
  //console.log(pane.props.name, temRow.value.seqNo);
  if (temRow.value.seqNo) {
    tabNameComRef.get(pane.props.name)?.value.refreshTra(temRow.value);
  }
};

const chooseTagType = (row, type) => {
  let daynamicType = "";
  if (type == "text") {
    daynamicType =
      row === "order" ? "订单" : row === "workOrder" ? "工单" : "流转卡号";
  } else {
    daynamicType =
      row === "order" ? "success" : row === "workOrder" ? "warning" : "primary";
  }
  return daynamicType;
};

let productReviewInfo = reactive({
  materialName: "",
  seqNo: "",
  materialCode: "",
  materialModel: "",
  planStartEnd: "",
  workOrderCode: "",
  outNum: "",
  rework: "-",
  bug: "-",
});

let tabCount = reactive({
  traceability: "",
  materials: "",
  record: "",
  check: "",
  equit: "",
  fault: "",
  medias: "",
  excel: "",
});

const handleCellClick = (row, column, event) => {
  productReviewInfo.orderCode = row.orderCode;
  if (row.level === "order") {
    productReviewInfo.bug = "-";
  }
  if (row.orderType) {
    productReviewInfo.rework = row.orderType === "2" ? "是" : "否";
  }
  //获取出单的数量
  if (data.value) {
    for (let topTree of data.value) {
      if (topTree) {
        for (let secondTree of topTree.children) {
          if (row.workOrderCode == secondTree.workOrderCode) {
            productReviewInfo.rework = topTree.orderType === "2" ? "是" : "否";
            productReviewInfo.bug = secondTree.bugNum === 0 ? "否" : "是";
            productReviewInfo.outNum = secondTree.children.length;
          }
        }
      }
    }
  }
  temRow.value = row;
  // 点击行时触发的逻辑
  if (!row.children && row.seqNo) {
    if (productReviewInfo.seqNo != row.seqNo) {
      //物料履历
      //traceabilityComRef.value.refreshTra(row);
      tabNameComRef.get(defaultTabName.value)?.value.refreshTra(temRow.value);
    }
    //每次点击都要获取tab页面的数量
    traceabilityTabCount({
      seqNo: row.seqNo,
      workOrderCode: row.workOrderCode,
    }).then(({ data }) => {
      tabCount = Object.assign(tabCount, data);
    });
    if (row.workOrderCode == productReviewInfo.workOrderCode) {
      productReviewInfo.seqNo = row.seqNo;
      return;
    }
    //产品信息
    getMaterialDetailsByseqNo(row.workOrderCode, row.seqNo).then(({ data }) => {
      productReviewInfo = Object.assign(productReviewInfo, data);
      productReviewInfo.workOrderCode = row.workOrderCode;
      // productReviewInfo.outNum =
    });
  }
};

// 设置表格列或者其他自定义的option
option.value = Object.assign(option.value, {
  // selection: true,
  excelBtn: true,
  border: true,
  index: false,
  expandLevel: 3,
  headerAlign: "center",
  align: "center",
  tree: true,
  labelWidth: 100,
  addBtn: false,
  menu: false,
  header: false,
  searchMenuSpan: 8,
  rowKey: "seqNo",
  rowParentKey: "seqNo",
  column: [
    {
      label: "Id",
      prop: "id",
      search: false,
      hide: true,
    },
    {
      label: "流转卡号",
      prop: "seqNo",
      search: true,
      searchLabelWidth: "100",
      searchSpan: 12,
    },
    {
      label: "数量",
      prop: "quantity",
      search: false,
      width: "100",
    },
  ],
});

onMounted(() => {
  dataList();
});
</script>