履历样式修改

src/views/pro/traceability/index.vue

@@ -1,15 +1,23 @@
 <template>
-  <div class="mainContentBox common-layout">
-    <el-container>
-      <el-aside width="200px" style="min-height: 800px; max-height: calc(100vh - 200px);overflow-y:hidden">
-        <avue-tree :option="treeOption"
-                   :data="treeData"
-                   v-model="formTree"
-                   @node-click="nodeClick"
-        ></avue-tree>
+  <div class="mainContentBox flex">
+    <div class="flex">
+      <el-aside
+        width="200px"
+        style="
+          min-height: 800px;
+          max-height: calc(100vh - 200px);
+          overflow-y: hidden;
+        "
+      >
+        <avue-tree
+          :option="treeOption"
+          :data="treeData"
+          v-model="formTree"
+          @node-click="nodeClick"
+        />
       </el-aside>
       <el-aside
-        width="400px"
+        width="600px"
         style="min-height: 800px; max-height: calc(100vh - 200px)"
       >
         <avue-crud
@@ -34,166 +42,154 @@
           </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">{{ 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"
+    </div>
+    <div style="width: calc(100% - 800px)">
+      <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-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-tabs>
-        </el-main>
-      </el-container>
-    </el-container>
+        </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-tabs>
+      </el-main>
+    </div>
   </div>
 </template>
 <script setup>
@@ -210,7 +206,7 @@ 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 {orderLevelList} from "@/api/order";
+import { orderLevelList } from "@/api/order";
 
 // 传入一个url，后面不带/
 const { form, data, option, search, page, toDeleteIds, Methords, Utils } =
@@ -237,37 +233,39 @@ const cssjComRef = ref(null);
 const treeData = ref([]);
 const dataDetail = ref({});
 const nodeClick = (data) => {
-  search.value.aircraftId=null;
-  search.value.sortiesId=null;
-  search.value.subId=null;
-  if(data.level==1){
-    search.value.aircraftId=data.id;
+  search.value.aircraftId = null;
+  search.value.sortiesId = null;
+  search.value.subId = null;
+  if (data.level == 1) {
+    search.value.aircraftId = data.id;
   }
-  if(data.level==2){
-    search.value.sortiesId=data.id;
+  if (data.level == 2) {
+    search.value.sortiesId = data.id;
   }
-  if(data.level==3){
-    search.value.subId=data.id;
+  if (data.level == 3) {
+    search.value.subId = data.id;
   }
   dataList();
 };
 const treeOption = {
-  addBtn:false,
-  editBtn:false,
-  delBtn:false,
+  addBtn: false,
+  editBtn: false,
+  delBtn: false,
   formOption: {
     labelWidth: 100,
-    column: [{
-      label: '层级名称',
-      prop: 'label'
-    }],
+    column: [
+      {
+        label: "层级名称",
+        prop: "label",
+      },
+    ],
   },
   props: {
-    labelText: '标题',
-    label: 'label',
-    value: 'value',
-    children: 'children'
-  }
+    labelText: "标题",
+    label: "label",
+    value: "value",
+    children: "children",
+  },
 };
 let defaultTabName = ref("traceabilityComRef");
 //tab页组件
@@ -417,11 +415,9 @@ option.value = Object.assign(option.value, {
 });
 
 onMounted(() => {
-  orderLevelList(dataDetail.value).then(
-      (data)=>{
-        treeData.value=data.data;
-      }
-  )
+  orderLevelList(dataDetail.value).then((data) => {
+    treeData.value = data.data;
+  });
   dataList();
 });
 </script>