style:样式调整

pages/analysis/sample/sample-report-search.vue

@@ -1,80 +1,59 @@
 <template>
   <view>
     <navbar-back :autoBack="false" title="审核查询" @leftClick="customBack"></navbar-back>
-    <u-row class="content-title" gutter="16">
+    <u-row gutter="16">
       <u-col span="4">
         <view class="content-title-name">
           <text>任务列表</text>
+          <up-badge v-if="taskList.length > 0" class="ml5" :value="taskList.length" type="warning"></up-badge>
         </view>
         <u-gap height="5" bg-color="#0055A2"></u-gap>
+        <scroll-view
+          style="height: 75vh"
+          scroll-y
+          scroll-with-animation
+          class="content-main-left"
+          :scroll-top="scrollTop"
+        >
+          <TaskItem
+            v-for="(task, index) in taskList"
+            :key="index"
+            :task="task"
+            :seq="index + 1"
+            :active="current === index"
+            @click="switchTask(index)"
+          />
+        </scroll-view>
       </u-col>
       <u-col span="8">
         <view class="content-title-name">
           <text>样品列表</text>
         </view>
         <u-gap height="5" bg-color="#0055A2"></u-gap>
-      </u-col>
-    </u-row>
-    <u-row class="content-main-height" gutter="16" align="top">
-      <u-col span="4">
-        <scroll-view
-          scroll-y
-          scroll-with-animation
-          class="content-main-height content-main-left"
-          :scroll-top="scrollTop"
-        >
-          <view
-            v-for="(task, index) in taskList"
-            :key="index"
-            class="u-tab-item"
-            :class="[current.value === index ? 'u-tab-item-active' : '']"
-            @tap.stop="swichTask(index)"
-          >
-            <u-row style="width: 100%">
-              <u-col span="2" style="text-align: center">
-                <u-icon :color="taskStyle(task)" name="tags-fill" size="34"></u-icon>
-              </u-col>
-              <u-col span="10">
-                <view>
-                  <text style="font-size: 18px">{{ task.taskNo }}</text>
-                </view>
-                <view style="margin-top: 10px">
-                  <text>{{ task.taskName }} {{ task.assayOper }}</text>
-                </view>
-                <view class="x-f" style="margin-top: 10px">
-                  <u-icon color="" name="clock"></u-icon>
-                  <text style="margin-left: 5px">{{ task.reportTime }}</text>
-                </view>
-              </u-col>
-            </u-row>
-          </view>
-        </scroll-view>
-      </u-col>
-      <u-col span="8">
-        <view class="content-main-height">
-          <scroll-view scroll-y scroll-with-animation class="content-main-right">
+        <view>
+          <scroll-view scroll-y scroll-with-animation style="height: calc(75vh - 60px)">
             <block v-for="(sample, index) in sampleList" :key="index">
-              <view style="padding: 5px; font-size: 16px">
+              <view class="p5 fs16">
                 <u-row
                   @click="showSampleDetail(sample.id, index)"
                   :class="selectedIndex.value === index ? 'selected_Sample' : ''"
                 >
-                  <u-col span="2" style="text-align: center" :style="sampleStyle(sample)">
+                  <u-col span="2" class="text-center" :style="sampleStyle(sample)">
                     <view>
                       <text>【{{ sample.sort }}】</text>
                     </view>
                   </u-col>
                   <u-col span="5">
                     <view>
-                      <text style="padding-left: 10px">{{ sample.sampleCode }}</text>
+                      <text class="pl5">{{ sample.sampleCode }}</text>
                     </view>
                     <view>
-                      <text style="padding-left: 10px">
+                      <text class="pl5">
                         {{ getDataSourceTypeShow(sample.dataSourceType) }}{{ sample.sampleName }}
                       </text>
                     </view>
                     <view v-if="sample.sampleWeight">
-                      <text style="padding-left: 10px">{{ sample.sampleWeight }} g</text>
+                      <text class="pl5">{{ sample.sampleWeight }} g</text>
                     </view>
                   </u-col>
                   <u-col span="5">
@@ -83,7 +62,7 @@
                     </view>
                   </u-col>
                 </u-row>
-                <u-line style="padding: 5px" color="#bbb" />
+                <u-line class="p5" color="#bbb" />
               </view>
             </block>
           </scroll-view>
@@ -104,7 +83,7 @@
 
     <sample-detail-popup
       ref="sampleDetailPopup"
-      :showPopup="showDetailPopup"
+      v-model:showPopup="showDetailPopup"
       :detailPopupParam="detailPopupParam"
     ></sample-detail-popup>
   </view>
@@ -114,7 +93,9 @@
 import { ref, computed, onMounted } from 'vue'
 import { onLoad, onBackPress } from '@dcloudio/uni-app'
 import SampleDetailPopup from '@/components/sample/sample-detail-popup.vue'
+import TaskItem from './components/task-item.vue'
 import nx from '@/nx'
+import { getDataSourceTypeShow } from '../common'
 
 // 响应式数据
 const scrollTop = ref(0)
@@ -138,12 +119,6 @@ const customBack = () => {
   uni.reLaunch({ url: '/pages/analysis/index/index' })
 }
 
-const taskStyle = task => {
-  if ((task.weightTaskStatus === 0 || task.weightTaskStatus === 1) && task.reviewCount > 0) return 'red'
-  if (task.weightTaskStatus === 2 && task.reviewCount > 0) return 'green'
-  return ''
-}
-
 const sampleStyle = sample => {
   if ((sample.weightSubmitStatus === 0 || sample.weightSubmitStatus === 1) && sample.reviewCount > 0) {
     return 'color: red'
@@ -154,7 +129,7 @@ const sampleStyle = sample => {
   return ''
 }
 
-const swichTask = async index => {
+const switchTask = async index => {
   if (index === current.value) return
   current.value = index
   selectedIndex.value = -1
@@ -217,18 +192,9 @@ const previewPDF = () => {
   uni.navigateTo({ url })
 }
 
-const getDataSourceTypeShow = val => {
-  if (val === 2) return '【筛上】'
-  if (val === 3) return '【筛下】'
-  return ''
-}
-
 // 生命周期
 onMounted(() => {
-  getAssayTask()
-  uni.$on('sample-detail-popup_close', () => {
-    showDetailPopup.value = false
-  })
+  // getAssayTask()
 })
 
 onBackPress(() => {
@@ -238,59 +204,28 @@ onBackPress(() => {
 </script>
 
 <style lang="scss" scoped>
-/* 样式部分保持不变 */
-.content-title {
+.content-title-name {
   height: 50px;
-  width: 100%;
+  box-sizing: border-box;
   font-size: 20px;
   font-weight: 300;
-}
-.content-title-name {
   padding: 10px;
   text-align: center;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
-.content-main-height {
-  height: calc(100vh - 125px);
-}
+
 .content-main-left {
   background-color: #f6f6f6;
 }
-.u-tab-item {
-  padding: 5px;
-  height: 100px;
-  background: #f6f6f6;
-  box-sizing: border-box;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 16px;
-  color: #444;
-  line-height: 1;
-  border-width: 2px;
-  border-bottom: dotted;
-}
-.u-tab-item-active {
-  position: relative;
-  color: #0055a2;
-  font-weight: 600;
-  background: #fff;
-}
-.u-tab-item-active::before {
-  content: '';
-  position: absolute;
-  height: 16px;
-  left: 0;
-  top: 20px;
-}
-.content-main-right {
-  height: calc(100vh - 205px);
-}
 .content-main-right-operation {
-  height: 80px;
-  padding-top: 15px;
-  padding-right: 15px;
+  height: 50px;
+  padding-top: 10px;
+  padding-right: 10px;
 }
 .btn-operation {
+  font-size: 18px;
   width: 95%;
 }
 .selected_Sample {