feature/页面bug调整

src/views/process/components/order.vue

@@ -98,7 +98,7 @@ const planStyle = (val) => {
 .body {
   position: relative;
   width: 100%;
-  height: 244px;
+  min-height: 244px;
   border-radius: 16px;
   margin-bottom: 10px;
   display: flex;

src/views/traceability/components/check.vue

@@ -1,8 +1,13 @@
 <template>
-  <div class="collapseStyle">
+  <el-scrollbar class="collapseStyle" :height="tableHeight + 100">
     <el-scrollbar style="border: 1px solid #ebeef5" :height="tableHeight">
       <el-collapse accordion v-model="activeNames">
-        <el-collapse-item v-for="(item, index) in materialsData" :key="index" :title="item.opName" :name="index">
+        <el-collapse-item
+          v-for="(item, index) in materialsData"
+          :key="index"
+          :title="item.opName"
+          :name="index"
+        >
           <el-table :data="item.children" border>
             <el-table-column prop="checkName" label="点检项名称" />
             <el-table-column prop="checkCode" label="点检项编码" />
@@ -26,8 +31,14 @@
       </el-collapse>
       <Empty v-if="materialsData.length < 1" />
     </el-scrollbar>
-    <Pagination position="right" :page="page" :limit="limit" :total="total" @pagination="getPagination" />
-  </div>
+    <Pagination
+      position="right"
+      :page="page"
+      :limit="limit"
+      :total="total"
+      @pagination="getPagination"
+    />
+  </el-scrollbar>
 </template>
 
 <script lang="ts" setup>
@@ -55,7 +66,7 @@ const getPagination = async () => {
 //动态控制高度
 const setTableHeight = () => {
   tableHeight.value =
-    Number(document.getElementById("tabBox").offsetHeight) - 70;
+    Number(document.getElementById("tabBox").offsetHeight) - 110;
 };
 onMounted(() => {
   getPagination();

src/views/traceability/components/equit.vue

@@ -1,8 +1,13 @@
 <template>
-  <div class="collapseStyle">
+  <el-scrollbar class="collapseStyle" :height="tableHeight + 100">
     <el-scrollbar style="border: 1px solid #ebeef5" :height="tableHeight">
       <el-collapse accordion v-model="activeNames">
-        <el-collapse-item v-for="(item, index) in materialsData" :key="index" :title="item.opName" :name="index">
+        <el-collapse-item
+          v-for="(item, index) in materialsData"
+          :key="index"
+          :title="item.opName"
+          :name="index"
+        >
           <el-table :data="item.children" border>
             <el-table-column prop="equitType" label="设备类型" />
             <el-table-column prop="accuracy" label="精度要求" />
@@ -15,8 +20,14 @@
       </el-collapse>
       <Empty v-if="materialsData.length < 1" />
     </el-scrollbar>
-    <Pagination position="right" :page="page" :limit="limit" :total="total" @pagination="getPagination" />
-  </div>
+    <Pagination
+      position="right"
+      :page="page"
+      :limit="limit"
+      :total="total"
+      @pagination="getPagination"
+    />
+  </el-scrollbar>
 </template>
 
 <script lang="ts" setup>
@@ -42,7 +53,7 @@ const getPagination = async () => {
 //动态控制高度
 const setTableHeight = () => {
   tableHeight.value =
-    Number(document.getElementById("tabBox").offsetHeight) - 70;
+    Number(document.getElementById("tabBox").offsetHeight) - 110;
 };
 onMounted(() => {
   getPagination();

src/views/traceability/components/fault.vue

@@ -1,31 +1,39 @@
 <template>
-  <el-table :data="tableData" id="tableStyle" :height="tableHeight" border>
-    <el-table-column prop="operationName" label="冻结状态">
-      <template #default="scope">
-        {{ dictS.getLableByValue("escalation_fault_state", scope.row.state) }}
+  <el-scrollbar :height="tableHeight + 100">
+    <el-table :data="tableData" id="tableStyle" :height="tableHeight" border>
+      <el-table-column prop="operationName" label="冻结状态">
+        <template #default="scope">
+          {{ dictS.getLableByValue("escalation_fault_state", scope.row.state) }}
+        </template>
+      </el-table-column>
+      <el-table-column prop="creator" label="报故人" />
+      <el-table-column prop="stationName" label="报故工位" />
+      <el-table-column prop="created" label="报故时间" />
+      <el-table-column prop="disposalMeasures" label="处理结果">
+        <template #default="scope">
+          {{
+            dictS.getLableByValue(
+              "disposal_measures_type",
+              scope.row.disposalMeasures
+            )
+          }}
+        </template>
+      </el-table-column>
+      <el-table-column prop="standard" label="备注" />
+      <template #empty>
+        <div class="empty">
+          <Empty />
+        </div>
       </template>
-    </el-table-column>
-    <el-table-column prop="creator" label="报故人" />
-    <el-table-column prop="stationName" label="报故工位" />
-    <el-table-column prop="created" label="报故时间" />
-    <el-table-column prop="disposalMeasures" label="处理结果">
-      <template #default="scope">
-        {{
-          dictS.getLableByValue(
-            "disposal_measures_type",
-            scope.row.disposalMeasures
-          )
-        }}
-      </template>
-    </el-table-column>
-    <el-table-column prop="standard" label="备注" />
-    <template #empty>
-              <div class="empty">
-                <Empty />
-              </div>
-            </template>
-  </el-table>
-  <Pagination position="right" :page="page" :limit="limit" :total="total" @pagination="getPagination" />
+    </el-table>
+    <Pagination
+      position="right"
+      :page="page"
+      :limit="limit"
+      :total="total"
+      @pagination="getPagination"
+    />
+  </el-scrollbar>
 </template>
 
 <script lang="ts" setup>
@@ -42,7 +50,7 @@ const tableHeight = ref(null);
 //动态控制表格高度
 const setTableHeight = () => {
   tableHeight.value =
-    Number(document.getElementById("tabBox").offsetHeight) - 60;
+    Number(document.getElementById("tabBox").offsetHeight) - 110;
 };
 const getPagination = async () => {
   const { data } = await escalationRecordInfo({

src/views/traceability/components/materials.vue

@@ -1,8 +1,13 @@
 <template>
-  <div class="collapseStyle">
+  <el-scrollbar class="collapseStyle" :height="tableHeight + 100">
     <el-scrollbar style="border: 1px solid #ebeef5" :height="tableHeight">
-      <el-collapse accordion v-model="activeNames" >
-        <el-collapse-item v-for="(item, index) in materialsData" :key="index" :title="item.opName" :name="index">
+      <el-collapse accordion v-model="activeNames">
+        <el-collapse-item
+          v-for="(item, index) in materialsData"
+          :key="index"
+          :title="item.opName"
+          :name="index"
+        >
           <el-table :data="item.children" border>
             <el-table-column prop="itemName" label="物料名称" />
             <el-table-column prop="itemModel" label="物料规格" />
@@ -15,8 +20,14 @@
       </el-collapse>
       <Empty v-if="materialsData.length < 1" />
     </el-scrollbar>
-    <Pagination position="right" :page="page" :limit="limit" :total="total" @pagination="getPagination" />
-  </div>
+    <Pagination
+      position="right"
+      :page="page"
+      :limit="limit"
+      :total="total"
+      @pagination="getPagination"
+    />
+  </el-scrollbar>
 </template>
 
 <script lang="ts" setup>
@@ -42,7 +53,7 @@ const getPagination = async () => {
 //动态控制高度
 const setTableHeight = () => {
   tableHeight.value =
-    Number(document.getElementById("tabBox").offsetHeight) - 70;
+    Number(document.getElementById("tabBox").offsetHeight) - 110;
 };
 onMounted(() => {
   getPagination();

src/views/traceability/components/media.vue

@@ -1,22 +1,37 @@
 <template>
-  <el-table :data="tableData" id="tableStyle" :height="tableHeight" border>
-    <el-table-column prop="operationName" label="上传工序" />
-    <el-table-column prop="creator" label="上传人员" />
-    <el-table-column prop="created" label="上传时间" />
-    <el-table-column label="操作" prop="operation">
-      <template #default="{ row }">
-        <span @click="handleLook(row.filePath)">查看</span>
+  <el-scrollbar :height="tableHeight + 100">
+    <el-table :data="tableData" id="tableStyle" :height="tableHeight" border>
+      <el-table-column prop="operationName" label="上传工序" />
+      <el-table-column prop="creator" label="上传人员" />
+      <el-table-column prop="created" label="上传时间" />
+      <el-table-column label="操作" prop="operation">
+        <template #default="{ row }">
+          <span @click="handleLook(row.filePath)">查看</span>
+        </template>
+      </el-table-column>
+      <template #empty>
+        <div class="empty">
+          <Empty />
+        </div>
       </template>
-    </el-table-column>
-    <template #empty>
-              <div class="empty">
-                <Empty />
-              </div>
-            </template>
-  </el-table>
-  <el-image id="showImg" style="width: 0; height: 0" :min-scale="0.2" :src="srcList[0]" :preview-src-list="srcList"
-    fit="cover" />
-  <Pagination position="right" :page="page" :limit="limit" :total="total" @pagination="getPagination" />
+    </el-table>
+    <el-image
+      id="showImg"
+      style="width: 0; height: 0"
+      :min-scale="0.2"
+      :src="srcList[0]"
+      :preview-src-list="srcList"
+      fit="cover"
+    />
+    <Pagination
+      position="right"
+      :page="page"
+      :limit="limit"
+      :total="total"
+      @pagination="getPagination"
+      style="margin-top: -20px"
+    />
+  </el-scrollbar>
 </template>
 
 <script lang="ts" setup>
@@ -40,7 +55,7 @@ const handleLook = (path: string) => {
 //动态控制表格高度
 const setTableHeight = () => {
   tableHeight.value =
-    Number(document.getElementById("tabBox").offsetHeight) - 60;
+    Number(document.getElementById("tabBox").offsetHeight) - 110;
 };
 
 const getPagination = async () => {

src/views/traceability/components/record.vue

@@ -1,9 +1,14 @@
 <template>
-  <div class="collapseStyle">
+  <el-scrollbar class="collapseStyle" :height="tableHeight + 100">
     <el-scrollbar style="border: 1px solid #ebeef5" :height="tableHeight">
       <el-collapse accordion v-model="activeNames">
-        <el-collapse-item v-for="(item, index) in materialsData" :key="index" :title="item.opName" :name="index">
-          <el-table :data="item.children"  border>
+        <el-collapse-item
+          v-for="(item, index) in materialsData"
+          :key="index"
+          :title="item.opName"
+          :name="index"
+        >
+          <el-table :data="item.children" border>
             <el-table-column prop="label" label="记录项名称" />
             <el-table-column prop="inputValue" label="记录项值" />
             <el-table-column prop="created" label="录入时间" />
@@ -12,8 +17,14 @@
       </el-collapse>
       <Empty v-if="materialsData.length < 1" />
     </el-scrollbar>
-    <Pagination position="right" :page="page" :limit="limit" :total="total" @pagination="getPagination" />
-  </div>
+    <Pagination
+      position="right"
+      :page="page"
+      :limit="limit"
+      :total="total"
+      @pagination="getPagination"
+    />
+  </el-scrollbar>
 </template>
 
 <script lang="ts" setup>
@@ -39,7 +50,7 @@ const getPagination = async () => {
 //动态控制高度
 const setTableHeight = () => {
   tableHeight.value =
-    Number(document.getElementById("tabBox").offsetHeight) - 70;
+    Number(document.getElementById("tabBox").offsetHeight) - 110;
 };
 onMounted(() => {
   getPagination();
@@ -47,6 +58,4 @@ onMounted(() => {
 });
 </script>
 
-<style lang="scss" scoped>
-
-</style>
+<style lang="scss" scoped></style>

src/views/traceability/components/traceability.vue

@@ -1,26 +1,28 @@
 <template>
-  <el-table :data="tableData" id="tableStyle" :height="tableHeight" border>
-    <el-table-column prop="operationName" label="工序名称" />
-    <el-table-column prop="workSection" label="工段" />
-    <el-table-column prop="currentState" label="状态" />
-    <el-table-column prop="realStartWhen" label="开始时间" />
-    <el-table-column prop="realEndWhen" label="结束时间" />
-    <el-table-column prop="creator" label="操作人" />
-    <el-table-column prop="standardWorktime" label="工时" />
-    <el-table-column prop="operationSort" label="工步" />
-    <template #empty>
-      <div class="empty">
-        <Empty />
-      </div>
-    </template>
-  </el-table>
-  <Pagination
-    position="right"
-    :page="page"
-    :limit="limit"
-    :total="total"
-    @pagination="getPagination"
-  />
+  <el-scrollbar :height="tableHeight + 100">
+    <el-table :data="tableData" id="tableStyle" :height="tableHeight" border>
+      <el-table-column prop="operationName" label="工序名称" />
+      <el-table-column prop="workSection" label="工段" />
+      <el-table-column prop="currentState" label="状态" />
+      <el-table-column prop="realStartWhen" label="开始时间" />
+      <el-table-column prop="realEndWhen" label="结束时间" />
+      <el-table-column prop="creator" label="操作人" />
+      <el-table-column prop="standardWorktime" label="工时" />
+      <el-table-column prop="operationSort" label="工步" />
+      <template #empty>
+        <div class="empty">
+          <Empty />
+        </div>
+      </template>
+    </el-table>
+    <Pagination
+      position="right"
+      :page="page"
+      :limit="limit"
+      :total="total"
+      @pagination="getPagination"
+    />
+  </el-scrollbar>
 </template>
 
 <script lang="ts" setup>
@@ -35,7 +37,7 @@ const tableHeight = ref(null);
 //动态控制表格高度
 const setTableHeight = () => {
   tableHeight.value =
-    Number(document.getElementById("tabBox").offsetHeight) - 60;
+    Number(document.getElementById("tabBox").offsetHeight) - 110;
 };
 const getPagination = async () => {
   const { data } = await getInfo({

src/views/traceability/index.vue

@@ -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>