style:样式调整

pages/analysis/sample/sample-receive.vue

@@ -2,62 +2,41 @@
   <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 === index ? 'u-tab-item-active' : '']"
-            @tap.stop="switchTask(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 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 style="padding: 5px; font-size: 16px">
+              <view sclass="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-checkbox
@@ -74,10 +53,10 @@
                   <u-col span="9" 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>
@@ -87,7 +66,7 @@
                     </view>
                   </u-col>
                 </u-row>
-                <u-line style="padding: 5px" color="#bbb" />
+                <u-line class="p5" color="#bbb" />
               </view>
             </block>
           </scroll-view>
@@ -112,13 +91,27 @@
 import { ref, computed, onMounted } from 'vue'
 import nx from '@/nx'
 import { onLoad, onBackPress } from '@dcloudio/uni-app'
+import TaskItem from './components/task-item.vue'
+import { getDataSourceTypeShow } from '../common'
 
 // 响应式数据
 const currentNode = ref('F30')
 const scrollTop = ref(0)
 const current = ref(0)
-const taskList = ref([])
-const sampleList = ref([])
+const taskList = ref([
+  { id: 1, taskNo: 'TASK-1', taskName: '任务1', taskOperTime: '2022-03-01 10:00:00' },
+  { id: 1, taskNo: 'TASK-1', taskName: '任务1', taskOperTime: '2022-03-01 10:00:00' },
+  { id: 1, taskNo: 'TASK-1', taskName: '任务1', taskOperTime: '2022-03-01 10:00:00' },
+  { id: 1, taskNo: 'TASK-1', taskName: '任务1', taskOperTime: '2022-03-01 10:00:00' },
+  { id: 1, taskNo: 'TASK-1', taskName: '任务1', taskOperTime: '2022-03-01 10:00:00' },
+  { id: 1, taskNo: 'TASK-1', taskName: '任务1', taskOperTime: '2022-03-01 10:00:00' },
+  { id: 1, taskNo: 'TASK-1', taskName: '任务1', taskOperTime: '2022-03-01 10:00:00' },
+  { id: 1, taskNo: 'TASK-1', taskName: '任务1', taskOperTime: '2022-03-01 10:00:00' },
+  { id: 1, taskNo: 'TASK-1', taskName: '任务1', taskOperTime: '2022-03-01 10:00:00' }
+])
+const sampleList = ref([
+  { id: 1, sampleCode: 'SAMPLE-1', sampleName: '样品1', sort: 1, checked: false, sampleProcessNo: 'F30' }
+])
 const dicSampleProcessCodeList = ref([])
 
 // 计算属性
@@ -133,16 +126,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 confirmReceipt = () => {
   const errNodeList = sampleList.value.filter(item => item.sampleProcessNo !== currentNode.value)
   if (errNodeList.length > 0) {
@@ -250,16 +233,10 @@ const getProcessNameShow = val => {
   return item ? item.processName : val
 }
 
-const getDataSourceTypeShow = val => {
-  if (val === 2) return '【筛上】'
-  if (val === 3) return '【筛下】'
-  return ''
-}
-
 // 生命周期
 onLoad(() => {
   getDicSampleProcessCodeList()
-  getAssayTask()
+  // getAssayTask()
 })
 
 onBackPress(() => {
@@ -269,59 +246,29 @@ 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-bottom: 2px dotted;
-}
-
-.u-tab-item-active {
-  position: relative;
-  color: #0055a2;
-  font-weight: 600;
-  background: #fff;
-}
-
-.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;
 }