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

<template>
  <div class="mainContentBox common-layout">
    <el-container>
      <el-aside width="600px" style="height: 800px">
        <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"
          @current-change="dataList"

        >
          <template #seqNo="{ row }">
            <el-tag :type="chooseTagType(row.seqNo, 'css')">{{
              chooseTagType(row.seqNo, "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="铭牌号">-</el-descriptions-item>
            <el-descriptions-item label="是否返工">
              <el-tag size="small">否</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>
        </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-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";

// 传入一个url，后面不带/
const { form, data, option, search, page, toDeleteIds, Methords, Utils } =
  useCrud({
    src: "/api/v1/process/web/traceability",
  });

const { dataList, createRow, updateRow, deleteRow, searchChange } = 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);
let defaultTabName = ref("traceabilityComRef");
//tab页组件
const tabNameComRef = new Map([
  ["traceabilityComRef", traceabilityComRef],
  ["materialsComRef", materialsComRef],
  ["recordComRef", recordComRef],
  ["checkComRef", checkComRef],
  ["equitComRef", equitComRef],
  ["faultComRef", faultComRef],
  ["mediaComRef", mediaComRef],
]);
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.startsWith("DD")
      ? "订单"
      : row.startsWith("GD")
        ? "工单"
        : "流转卡号";
  } else {
    daynamicType = row.startsWith("DD")
      ? "success"
      : row.startsWith("GD")
        ? "warning"
        : "primary";
  }
  return daynamicType;
};

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

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

const handleCellClick = (row, column, event) => {
  //获取出单的数量
  if (data.value) {
    for (let topTree of data.value) {
      if (topTree) {
        for (let secondTree of topTree.children) {
          if (row.workOrderCode == secondTree.workOrderCode) {
            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({workOrderCode: row.workOrderCode, seqNo: row.seqNo }).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>