样式修改

src/components/contractCom/contractDetails.vue

@@ -13,6 +13,9 @@
     </el-tabs>
     <div class="content-box" v-if="['first', 'second'].includes(activeName)">
       <div class="left">
+        <div style="text-align: center; margin-bottom: 10px" v-if="activeName === 'first'">
+          <el-button type="primary" @click="openPDF(currentItem)">查看PDF</el-button>
+        </div>
         <div v-for="i in leftList" :key="i.id" class="left-item" :style="{ color: currentItem.id === i.id ? '#409eff' : '' }"
              @click="handleItemClick(i)">
           <div v-if="activeName === 'first'">{{ i.code }}</div>
@@ -24,12 +27,9 @@
       <div class="center"></div>
       <div class="right">
         <div v-if="leftList && leftList.length > 0">
-          <div style="text-align: right; margin-bottom: 20px" v-if="activeName === 'first'">
-            <!-- <el-button type="primary" @click="pushProcessApproval(currentItem)"
-              >查看详情</el-button
-            > -->
+          <!-- <div style="text-align: right; margin-bottom: 20px" v-if="activeName === 'first'">
             <el-button type="primary" @click="openPDF(currentItem)">查看PDF</el-button>
-          </div>
+          </div> -->
           <div v-if="activeName === 'first'">
             <!-- <ContractPDFOne :rowData="rowData"></ContractPDFOne> -->
             <ApprovalDetails :query="approvalData"></ApprovalDetails>
@@ -292,14 +292,16 @@ checkShow();
 <style lang="scss" scoped>
 .content-box {
   display: flex;
+  font-size: 14px;
   .left {
     width: 150px;
     // background: #ccc;
     .left-item {
-      height: 36px;
-      line-height: 36px;
+      height: 30px;
+      line-height: 30px;
       text-align: center;
       cursor: pointer;
+      font-size: 14px;
     }
   }
   .center {

src/components/headerBar/header-bar.vue

@@ -197,74 +197,110 @@
           </div>
           <div class="job-list">
             <div class="job-item" style="margin-right:5px" @click="handlePushRouter(1)">
-              <el-badge :value="jobData.unreadMailCount" :max="99" style="margin-right:20px;margin-top:10px">
+              <el-badge :value="jobData.unreadMailCount" :max="99" style="margin-right:20px;margin-top:10px" v-if="jobData.unreadMailCount">
                 <div style="margin-top:-10px">
                   <el-icon size="20" color="#fff">
                     <Reading />
                   </el-icon>
                 </div>
               </el-badge>
+              <div v-else>
+                <el-icon size="20" color="#fff">
+                  <Reading />
+                </el-icon>
+              </div>
               <div>未读邮件</div>
             </div>
             <div class="job-item" style="margin-right:5px" @click="handlePushRouter(2)">
-              <el-badge :value="jobData.waitFlowCount" :max="99" style="margin-right:20px;margin-top:10px">
+              <el-badge :value="jobData.waitFlowCount" :max="99" style="margin-right:20px;margin-top:10px" v-if="jobData.waitFlowCount">
                 <div style="margin-top:-10px">
                   <el-icon size="20" color="#fff">
                     <CopyDocument />
                   </el-icon>
                 </div>
               </el-badge>
+              <div v-else>
+                <el-icon size="20" color="#fff">
+                  <CopyDocument />
+                </el-icon>
+              </div>
               <div>待审批</div>
             </div>
             <div class="job-item" v-if="userInfo.roles.includes('salesman') || userInfo.roles.includes('salesDirector') ||
                  userInfo.roles.includes('salesAssistant')" @click="handlePushRouter(3)">
-              <el-badge :value="jobData.claimCount" :max="99" style="margin-right:20px;margin-top:10px">
+              <el-badge :value="jobData.claimCount" :max="99" style="margin-right:20px;margin-top:10px" v-if="jobData.claimCount">
                 <div style="margin-top:-10px">
                   <el-icon size="20" color="#fff">
                     <Notebook />
                   </el-icon>
                 </div>
               </el-badge>
+              <div v-else>
+                <el-icon size="20" color="#fff">
+                  <Notebook />
+                </el-icon>
+              </div>
               <div>待认领</div>
             </div>
             <div class="job-item" style="margin-right:5px" v-if="userInfo.roles.includes('purchasingOfficer') " @click=" handlePushRouter(4)">
-              <el-badge :value=" jobData.waitPurchaseCount" :max="99" style="margin-right:20px;margin-top:10px">
+              <el-badge :value="jobData.waitPurchaseCount" :max="99" style="margin-right:20px;margin-top:10px" v-if="jobData.waitPurchaseCount">
                 <div style="margin-top:-10px">
                   <el-icon size="20" color="#fff">
                     <ShoppingCart />
                   </el-icon>
                 </div>
               </el-badge>
+              <div v-else>
+                <el-icon size="20" color="#fff">
+                  <ShoppingCart />
+                </el-icon>
+              </div>
               <div>待采购</div>
             </div>
             <div class="job-item" style="margin-right:5px" v-if="userInfo.roles.includes('purchasingOfficer') " @click=" handlePushRouter(5)">
-              <el-badge :value=" jobData.sampleHandoverCount" :max="99" style="margin-right:20px;margin-top:10px">
+              <el-badge :value="jobData.sampleHandoverCount" :max="99" style="margin-right:20px;margin-top:10px" v-if="jobData.sampleHandoverCount">
                 <div style="margin-top:-10px">
                   <el-icon size="20" color="#fff">
                     <Tickets />
                   </el-icon>
                 </div>
               </el-badge>
+              <div v-else>
+                <el-icon size="20" color="#fff">
+                  <Tickets />
+                </el-icon>
+              </div>
               <div>样品交接单</div>
             </div>
             <div class="job-item" v-if="userInfo.roles.includes('purchasingOfficer') " @click=" handlePushRouter(6)">
-              <el-badge :value=" jobData.contractHandoverCount" :max="99" style="margin-right:20px;margin-top:10px">
+              <el-badge :value="jobData.contractHandoverCount" :max="99" style="margin-right:20px;margin-top:10px"
+                        v-if="jobData.contractHandoverCount">
                 <div style="margin-top:-10px">
                   <el-icon size="20" color="#fff">
                     <Memo />
                   </el-icon>
                 </div>
               </el-badge>
+              <div v-else>
+                <el-icon size="20" color="#fff">
+                  <Memo />
+                </el-icon>
+              </div>
               <div>合同交接单</div>
             </div>
             <div class="job-item" style="margin-right:5px" v-if="userInfo.roles.includes('cashier') " @click=" handlePushRouter(7)">
-              <el-badge :value=" jobData.waitAccountPayCount" :max="99" style="margin-right:20px;margin-top:10px">
+              <el-badge :value="jobData.waitAccountPayCount" :max="99" style="margin-right:20px;margin-top:10px" v-if="jobData.waitAccountPayCount">
                 <div style="margin-top:-10px">
                   <el-icon size="20" color="#fff">
                     <Money />
                   </el-icon>
                 </div>
               </el-badge>
+              <div v-else>
+                <el-icon size="20" color="#fff">
+                  <Money />
+                </el-icon>
+              </div>
               <div>待打款</div>
             </div>
           </div>

src/views/process/processApproval/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="processApproval">
+  <div class="processApproval" ref="processApprovalDom">
     <div class="left-card">
       <div class="top">
         <div class="commons-title title">
@@ -149,7 +149,7 @@
 
         </el-tab-pane>
         <el-tab-pane label="审批记录" name="second">
-          <ul class="flow-chart">
+          <ul class="flow-chart" ref="flowChartDom">
             <li v-for="item in recordList" :key="item.id" :class="
                 !route.query.id
                   ? ''
@@ -242,7 +242,7 @@ import SendFunds from "@/components/process/SendFunds";
 // 采购付款
 import PurchasePayment from "@/components/process/PurchasePayment";
 
-import { computed, ref, watch } from "vue";
+import { computed, nextTick, ref, watch } from "vue";
 
 import useUserStore from "@/store/modules/user";
 const userInfo = useUserStore();
@@ -824,6 +824,24 @@ const getFlowName = () => {
   }
   return name;
 };
+// 动态计算高度
+const processApprovalDom = ref(null);
+const flowChartDom = ref(null);
+const getTableHeight = () => {
+  if (route.query.currentContractId) {
+    processApprovalDom.value.style.height = window.innerHeight - 180 + "px";
+    flowChartDom.value.style.height = window.innerHeight - 250 + "px";
+  } else {
+    processApprovalDom.value.style.height = window.innerHeight - 130 + "px";
+    flowChartDom.value.style.height = window.innerHeight - 200 + "px";
+  }
+};
+nextTick(() => {
+  getTableHeight();
+});
+window.addEventListener("resize", () => {
+  getTableHeight();
+});
 </script>
 <style>
 /* .el-upload-list {