baoshi-swms-app-web/src/views/inbound/blindCollection/components/TaskList.vue

<template>
  <div class="task">
    <van-action-sheet
      v-model:show="taskTrueFalseBy"
      title="任务中心"
      close-on-click-action
      @cancel="taskTrueFalseBy=false"
    >
      <div class="task-content">
      <table  class="task-table">
        <thead>
        <tr>
          <th style="width: 80px">任务号</th>
          <th style="width: 60px">货主</th>
          <th style="width: 72px">创建时间</th>
          <th>创建人</th>
          <th style="width: 40px">状态</th>
          <th style="width: 50px">操作</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="(item, index) in taskList" :key="index" :class="{'odd-row': index % 2 !=0}">
          <td>{{ item.code }}</td>
          <td>{{ item.ownerName }}</td>
          <td>{{ item.createTime }}</td>
          <td>{{ item.creator }}</td>
          <td :style="statusStyle(item.status)" >{{ item.status }}</td>
          <td><van-button plain size="mini" type="primary" @click="onTaskDetail(item)">接受任务</van-button></td>

        </tr>
        </tbody>
      </table>
      </div>
    </van-action-sheet>
  </div>
</template>
<script setup lang="ts">
import { nextTick, onMounted, ref } from 'vue'
import { useRouter } from 'vue-router'
const taskTrueFalseBy=ref(false)
const taskList=ref({})
onMounted(()=>{
  nextTick(() => {
    window.scrollTo(0, 0);
  });
})
const statusStyle = (status) => {
  switch (status) {
    case '作业中':
      return { color: '#ff941a' }
    case '创建':
      return { color: '#07c160' }
    default:
      return { color: '#000' }
  }
}
const show = async (list) => {
  taskList.value = list
  taskTrueFalseBy.value = true
}
const router = useRouter()
const emit = defineEmits()
const onTaskDetail = (item) => {
  taskTrueFalseBy.value = false
  if(item.type){
    router.push({name:'BlindTask',query: { code:item.code,typeCode:item.typeCode }})
  }else {
    emit('selectMode',item.code)
  }

}
defineExpose({show})
</script>
<style scoped lang="sass">
.task
  .task-content
    width: 100%
    height: 65vh
    overflow-y: auto
    .task-table
      width: 100%
      border-collapse: collapse
      table-layout: fixed
      font-size: 12px
    .task-table th, .task-table td
      text-align: center
      border: 1px solid #ccc
      word-wrap: break-word
      word-break: break-all
      font-weight: 500
    .task-table thead
      background-color: #3f8dff
      position: sticky
      top: 0
      z-index: 1
      color: white
      font-size: 14px
    .task-table tbody tr.odd-row
      background-color: #e4f2ff







</style>