|
@@ -3,103 +3,122 @@
|
|
|
<!-- 基础信息展示 -->
|
|
|
<div class="contentBody">
|
|
|
<div class="headerInfo">
|
|
|
- <el-descriptions
|
|
|
- :column="3"
|
|
|
- border
|
|
|
- class="descriptions"
|
|
|
- label-class-name="labelStyle"
|
|
|
- >
|
|
|
- <el-descriptions-item>
|
|
|
- <template #label>
|
|
|
- <div class="cell-item">
|
|
|
- <el-icon>
|
|
|
- <Postcard />
|
|
|
- </el-icon>
|
|
|
+ <div class="infobox">
|
|
|
+ <div class="hang">
|
|
|
+ <div class="item">
|
|
|
+ <div class="label">
|
|
|
+ <div class="cell-item">
|
|
|
+ <el-icon>
|
|
|
+ <Postcard />
|
|
|
+ </el-icon>
|
|
|
+ </div>
|
|
|
产品名称
|
|
|
</div>
|
|
|
- </template>
|
|
|
- {{ infoData.materialName ? infoData.materialName : "-" }}
|
|
|
- </el-descriptions-item>
|
|
|
- <el-descriptions-item>
|
|
|
- <template #label>
|
|
|
- <div class="cell-item">
|
|
|
- <el-icon>
|
|
|
- <iphone />
|
|
|
- </el-icon>
|
|
|
+ <div class="value destext">
|
|
|
+ {{ infoData.materialName ? infoData.materialName : "-" }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="item">
|
|
|
+ <div class="label">
|
|
|
+ <div class="cell-item">
|
|
|
+ <el-icon>
|
|
|
+ <iphone />
|
|
|
+ </el-icon>
|
|
|
+ </div>
|
|
|
流转卡号
|
|
|
</div>
|
|
|
- </template>
|
|
|
- {{ infoData.seqNo ? infoData.seqNo : "-" }}
|
|
|
- </el-descriptions-item>
|
|
|
- <el-descriptions-item>
|
|
|
- <template #label>
|
|
|
- <div class="cell-item">
|
|
|
- <el-icon>
|
|
|
- <Collection />
|
|
|
- </el-icon>
|
|
|
+ <div class="value destext">
|
|
|
+ {{ infoData.seqNo ? infoData.seqNo : "-" }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="item">
|
|
|
+ <div class="label">
|
|
|
+ <div class="cell-item">
|
|
|
+ <el-icon>
|
|
|
+ <Collection />
|
|
|
+ </el-icon>
|
|
|
+ </div>
|
|
|
物料编号
|
|
|
</div>
|
|
|
- </template>
|
|
|
- {{ infoData.materialCode ? infoData.materialCode : "-" }}
|
|
|
- </el-descriptions-item>
|
|
|
- <el-descriptions-item>
|
|
|
- <template #label>
|
|
|
- <div class="cell-item">
|
|
|
- <el-icon>
|
|
|
- <ScaleToOriginal />
|
|
|
- </el-icon>
|
|
|
+ <div class="value destext">
|
|
|
+ {{ infoData.materialCode ? infoData.materialCode : "-" }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="hang">
|
|
|
+ <div class="item">
|
|
|
+ <div class="label">
|
|
|
+ <div class="cell-item">
|
|
|
+ <el-icon>
|
|
|
+ <ScaleToOriginal />
|
|
|
+ </el-icon>
|
|
|
+ </div>
|
|
|
产品规格
|
|
|
</div>
|
|
|
- </template>
|
|
|
- {{ infoData.materialModel ? infoData.materialModel : "-" }}
|
|
|
- </el-descriptions-item>
|
|
|
- <el-descriptions-item>
|
|
|
- <template #label>
|
|
|
- <div class="cell-item">
|
|
|
- <el-icon>
|
|
|
- <CreditCard />
|
|
|
- </el-icon>
|
|
|
+ <div class="value destext">
|
|
|
+ {{ infoData.materialModel ? infoData.materialModel : "-" }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="item">
|
|
|
+ <div class="label">
|
|
|
+ <div class="cell-item">
|
|
|
+ <el-icon>
|
|
|
+ <CreditCard />
|
|
|
+ </el-icon>
|
|
|
+ </div>
|
|
|
铭牌号
|
|
|
</div>
|
|
|
- </template>
|
|
|
- {{ infoData.materialName ? infoData.materialName : "-" }}
|
|
|
- </el-descriptions-item>
|
|
|
- <el-descriptions-item>
|
|
|
- <template #label>
|
|
|
- <div class="cell-item">
|
|
|
- <el-icon>
|
|
|
- <QuestionFilled />
|
|
|
- </el-icon>
|
|
|
+ <div class="value destext">
|
|
|
+ {{ infoData.materialName ? infoData.materialName : "-" }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="item">
|
|
|
+ <div class="label">
|
|
|
+ <div class="cell-item">
|
|
|
+ <el-icon>
|
|
|
+ <QuestionFilled />
|
|
|
+ </el-icon>
|
|
|
+ </div>
|
|
|
是否返工
|
|
|
</div>
|
|
|
- </template>
|
|
|
- {{
|
|
|
- infoData.isReturn === null ? "-" : infoData.isReturn ? "是" : "否"
|
|
|
- }}
|
|
|
- </el-descriptions-item>
|
|
|
- <el-descriptions-item>
|
|
|
- <template #label>
|
|
|
- <div class="cell-item">
|
|
|
- <el-icon>
|
|
|
- <Van />
|
|
|
- </el-icon>
|
|
|
+ <span class="value destext">{{
|
|
|
+ infoData.isReturn === null
|
|
|
+ ? "-"
|
|
|
+ : infoData.isReturn
|
|
|
+ ? "是"
|
|
|
+ : "否"
|
|
|
+ }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="hang" style="border-bottom: 0px">
|
|
|
+ <div class="item">
|
|
|
+ <div class="label">
|
|
|
+ <div class="cell-item">
|
|
|
+ <el-icon>
|
|
|
+ <Van />
|
|
|
+ </el-icon>
|
|
|
+ </div>
|
|
|
工单出站
|
|
|
</div>
|
|
|
- </template>
|
|
|
- {{ infoData.nameplateNo ? infoData.nameplateNo : "-" }}
|
|
|
- </el-descriptions-item>
|
|
|
- <el-descriptions-item>
|
|
|
- <template #label>
|
|
|
- <div class="cell-item">
|
|
|
- <el-icon>
|
|
|
- <Calendar />
|
|
|
- </el-icon>
|
|
|
+ <div class="value destext">
|
|
|
+ {{ infoData.nameplateNo ? infoData.nameplateNo : "-" }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="item" style="flex: 2">
|
|
|
+ <div class="label">
|
|
|
+ <div class="cell-item">
|
|
|
+ <el-icon>
|
|
|
+ <Calendar />
|
|
|
+ </el-icon>
|
|
|
+ </div>
|
|
|
交付日期
|
|
|
</div>
|
|
|
- </template>
|
|
|
- {{ infoData.planStartEnd ? infoData.planStartEnd : "-" }}
|
|
|
- </el-descriptions-item>
|
|
|
- </el-descriptions>
|
|
|
+ <span class="value destext">
|
|
|
+ {{ infoData.planStartEnd ? infoData.planStartEnd : "-" }}
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
<div id="tabBox" class="tabBox">
|
|
|
<el-tabs
|
|
@@ -205,7 +224,7 @@
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
-<script lang="ts" setup>
|
|
|
+<script setup>
|
|
|
import { useProcessStore } from "@/store";
|
|
|
import { getTabCount, getTraceabilityInfo } from "@/api/process/traceability";
|
|
|
import Traceability from "./components/traceability.vue";
|
|
@@ -219,7 +238,6 @@ const Equit = defineAsyncComponent(() => import("./components/equit.vue"));
|
|
|
const Fault = defineAsyncComponent(() => import("./components/fault.vue"));
|
|
|
const Media = defineAsyncComponent(() => import("./components/media.vue"));
|
|
|
const store = useProcessStore();
|
|
|
-const router = useRouter();
|
|
|
const activeName = ref("f1");
|
|
|
const handleClick = () => {};
|
|
|
const infoData = ref({});
|
|
@@ -257,18 +275,61 @@ onMounted(() => {
|
|
|
padding: 20px;
|
|
|
background-color: white;
|
|
|
border-radius: 16px;
|
|
|
- height: 100%;
|
|
|
+ height: calc(100vh - 110px);
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
|
|
|
.headerInfo {
|
|
|
width: 100%;
|
|
|
- height: 180px;
|
|
|
+ height: 30%;
|
|
|
margin-bottom: 10px;
|
|
|
+ .infobox {
|
|
|
+ height: 100%;
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ border: 1px solid rgb(239, 241, 247);
|
|
|
+ border-bottom: 0px;
|
|
|
+ .hang {
|
|
|
+ display: flex;
|
|
|
+ flex: 1;
|
|
|
+ .item {
|
|
|
+ flex: 1;
|
|
|
+ display: flex;
|
|
|
+ border: 1px solid rgb(239, 241, 247);
|
|
|
+ border-top: 0px;
|
|
|
+ border-right: 0px;
|
|
|
+ border-left: 0px;
|
|
|
+ .label {
|
|
|
+ width: 130px;
|
|
|
+ border: 1px solid rgb(239, 241, 247);
|
|
|
+ border-top: 0px;
|
|
|
+ border-left: 0px;
|
|
|
+ border-bottom: 0px;
|
|
|
+ background-color: rgb(245, 247, 250);
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ font-size: 20px;
|
|
|
+ padding: 0 10px;
|
|
|
+ }
|
|
|
+ .value {
|
|
|
+ flex: 1;
|
|
|
+ border: 1px solid rgb(239, 241, 247);
|
|
|
+ border-top: 0px;
|
|
|
+ border-left: 0px;
|
|
|
+ border-bottom: 0px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ font-size: 20px;
|
|
|
+ padding: 0 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
.tabBox {
|
|
|
- height: calc(100% - 240px);
|
|
|
+ height: 70%;
|
|
|
width: 100%;
|
|
|
}
|
|
|
}
|
|
@@ -283,7 +344,11 @@ onMounted(() => {
|
|
|
display: flex;
|
|
|
padding: 10px 0;
|
|
|
}
|
|
|
-
|
|
|
+:deep(.cell-item) {
|
|
|
+ font-size: $f24;
|
|
|
+ display: flex;
|
|
|
+ padding: 10px 0;
|
|
|
+}
|
|
|
:deep(.el-icon) {
|
|
|
margin-right: 5px;
|
|
|
}
|
|
@@ -292,9 +357,10 @@ onMounted(() => {
|
|
|
font-size: $f24 !important;
|
|
|
}
|
|
|
|
|
|
-:deep(.el-descriptions__cell) {
|
|
|
- white-space: nowrap;
|
|
|
- overflow: hidden;
|
|
|
- text-overflow: ellipsis;
|
|
|
+.destext {
|
|
|
+ width: 20px;
|
|
|
+ white-space: nowrap !important;
|
|
|
+ overflow: hidden !important;
|
|
|
+ text-overflow: ellipsis !important;
|
|
|
}
|
|
|
</style>
|