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

<template>
  <div class="mainContentBox flex">
    <div>
      <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>
    </div>
    <div style="width: calc(100% - 600px)">
      <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="铭牌号">-</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="cssjComRef" label="设备数据"
            ><template #label>
              <span
                >设备数据
                <el-badge
                  :value="tabCount.testData"
                  class="item"
                  type="primary"
                />
              </span>
            </template>
            <TestData ref="cssjComRef"
          /></el-tab-pane>
          <el-tab-pane name="fileComRef" label="工序文件">
            <template #label>
              <span
                >工序文件
                <el-badge :value="tabCount.file" class="item" type="primary" />
              </span>
            </template>
            <FileCom ref="fileComRef"
          /></el-tab-pane>
        </el-tabs>
      </el-main>
    </div>
  </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 TestData from "./components/testData.vue";
import FileCom from "./components/fileCom.vue";

// 传入一个url，后面不带/
const { form, data, option, search, page, toDeleteIds, Methords, Utils } =
  useCrud({
    src: "/api/v1/process/web/traceability",
  });
const searchChange = (params, done) => {
  if (params.seqNo) {
    option.value.defaultExpandAll = true;
  } else {
    option.value.defaultExpandAll = false;
  }
  search.value = params;
  search.value.currentPage = 1;
  dataList({ done: done });
};
const { dataList, createRow, updateRow, deleteRow, 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 cssjComRef = ref(null);
const fileComRef = 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],
  ["cssjComRef", cssjComRef],
  ["fileComRef", fileComRef],
]);
let temRow = ref({});
const tabsEvent = (pane, ev) => {
  defaultTabName.value = pane.props.name;
  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: "",
  testData: "",
  file: "",
});

const handleCellClick = (row, column, event) => {
  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>