style:样式调整

pages/analysis/sample/sample-work-list.vue

@@ -5,56 +5,38 @@
       <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"
+            :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 === 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 class="fs18">{{ task.taskNo }}</view>
-                <view style="margin-top: 10px">{{ task.taskName }}</view>
-                <view class="x-f" style="margin-top: 10px">
-                  <u-icon color="" name="clock"></u-icon>
-                  <text style="margin-left: 5px">{{ task.taskOperTime }}</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 v-if="currentTask.reviewCount === sample.reviewCount" style="padding: 5px; font-size: 16px">
+              <view v-if="currentTask.reviewCount === sample.reviewCount" class="p5 fs16">
                 <u-row>
-                  <u-col span="3" style="text-align: center">
+                  <u-col span="3" class="text-center">
                     <u-row>
-                      <u-col span="6" style="text-align: center">
+                      <u-col span="6" class="text-center">
                         <u-checkbox
                           v-model="sample.checked"
                           v-if="
@@ -65,7 +47,7 @@
                           @change="() => selectSample(sample)"
                         ></u-checkbox>
                       </u-col>
-                      <u-col span="6" style="text-align: center">
+                      <u-col span="6" class="text-center">
                         <view
                           ><text>【{{ sample.sort }}】</text></view
                         >
@@ -76,10 +58,10 @@
                     <view class="sample_desc">
                       <view>
                         <view
-                          ><text style="padding-left: 10px">{{ sample.sampleCode }}</text></view
+                          ><text class="pl10">{{ sample.sampleCode }}</text></view
                         >
                         <view>
-                          <text style="padding-left: 10px">
+                          <text class="pl10">
                             {{ getDataSourceTypeShow(sample.dataSourceType) }}{{ sample.sampleName }}
                           </text>
                         </view>
@@ -96,13 +78,13 @@
                     </view>
                   </u-col>
                 </u-row>
-                <u-line style="padding: 5px" color="#bbb" />
+                <u-line class="p5" color="#bbb" />
               </view>
             </block>
           </scroll-view>
           <view class="content-main-right-operation">
             <u-row>
-              <u-col span="3.5"></u-col>
+              <u-col span="4"></u-col>
               <u-col span="4">
                 <u-button class="btn-operation" type="warning" @click="showRollbackModal">申请退回样品</u-button>
               </u-col>
@@ -136,6 +118,8 @@ import { ref, computed, onMounted } from 'vue'
 import { onLoad, onBackPress } from '@dcloudio/uni-app'
 import nx from '@/nx'
 import { useScreenOrientation } from '@/nx/hooks/useScreenOrientation'
+import { getDataSourceTypeShow } from '../common'
+import TaskItem from './components/task-item.vue'
 
 // 响应式数据
 const currentNode = ref('F31')
@@ -162,12 +146,6 @@ const selectSample = sample => {
   sample.checked = !sample.checked
 }
 
-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 showRollbackModal = () => {
   const checkedSampleList = sampleList.value.filter(item => item.checked)
   if (checkedSampleList.length === 0) {
@@ -228,7 +206,7 @@ const startWork = () => {
   })
 }
 
-const swichTask = async index => {
+const switchTask = async index => {
   if (index === current.value) return
   current.value = index
   rollbackContent.value = ''
@@ -280,18 +258,12 @@ const getProcessNameShow = val => {
   return item ? item.processName : val
 }
 
-const getDataSourceTypeShow = val => {
-  if (val === 2) return '【筛上】'
-  if (val === 3) return '【筛下】'
-  return ''
-}
-
 // 生命周期
 onLoad(() => {
   const { lockOrientation } = useScreenOrientation()
   lockOrientation('landscape')
   getDicSampleProcessCodeList()
-  getAssayTask()
+  // getAssayTask()
 })
 
 onBackPress(() => {
@@ -301,60 +273,27 @@ 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;
-}
-.content-main-height {
-  height: calc(100vh - 125px);
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
 .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 {
-  height: 50px;
   font-size: 18px;
   width: 95%;
 }