@logwire/logwire-wms-pda-ui 1.1.17 → 1.2.0

package/src/components/page/common/Task/index.vue

@@ -1,699 +1,707 @@
-<!--
-  任务页
-  @author: 张文
-  @date: 2022-03-04
--->
-<template>
-  <div>
-    <lw-nav-bar
-      :title="$lwLanguage.get('wms_project.pda.common.task.task', '任务')"
-      :click-left="navBack"
-    />
-
-    <div class="lw-global-page-box">
-
-      <template v-if="taskInfo.typeList">
-        <!-- 任务看板 -->
-        <div class="lw-task-page-look-box">
-          <!-- 背景图片 -->
-          <img :src="bgSrc" alt="">
-
-          <!-- 显示内容 -->
-          <div class="lw-global-flex-around lw-task-page-look-boss">
-
-            <slot name="taskLook" :data="taskInfo">
-              <!-- 待接收 -->
-              <div class="lw-global-flex-evenly lw-task-page-look-item">
-                <div>{{ taskInfo.waitAcceptTaskCount || 0 }}</div>
-                <div class="lw-task-page-look-item-title">
-                  {{ $lwLanguage.get('wms_project.pda.common.task.waitReception', '待接收') }}
-                </div>
-              </div>
-
-              <!-- 未完成 -->
-              <div class="lw-global-flex-evenly lw-task-page-look-item">
-                <div>{{ taskInfo.inProgressTaskCount || 0 }}</div>
-                <div class="lw-task-page-look-item-title">
-                  {{ $lwLanguage.get('wms_project.pda.common.task.unfinished', '未完成') }}
-                </div>
-              </div>
-
-              <!-- 已完成 -->
-              <div class="lw-global-flex-evenly lw-task-page-look-item">
-                <div>{{ taskInfo.finishTaskCount || 0 }}</div>
-                <div class="lw-task-page-look-item-title">
-                  {{ $lwLanguage.get('wms_project.pda.common.task.finished', '已完成') }}
-                </div>
-              </div>
-
-              <div class="lw-task-page-look-line"></div>
-
-              <!-- 剩余行数 -->
-              <div class="lw-global-flex-evenly lw-task-page-look-item">
-                <div>{{ taskInfo.surplusLineCount || 0 }}</div>
-                <div class="lw-task-page-look-item-title">
-                  {{$lwLanguage.get('wms_project.pda.common.task.residue', '剩余行数') }}
-                </div>
-              </div>
-
-              <!-- 完成行数 -->
-              <div class="lw-global-flex-evenly lw-task-page-look-item">
-                <div>{{ taskInfo.finishLineCount || 0 }}</div>
-                <div class="lw-task-page-look-item-title">
-                  {{$lwLanguage.get('wms_project.pda.common.task.finishedLine', '已完成行数') }}
-                </div>
-              </div>
-            </slot>
-
-
-          </div>
-
-        </div>
-
-
-        <!-- 任务类型tab -->
-        <div style="margin-top: 10px" class="lw-global-tab-box">
-          <van-tabs
-            type="card"
-            animated
-            v-model="taskTypeActive"
-            @change="taskTypeChange"
-          >
-
-            <van-tab
-              v-for="(i, k) in taskInfo.typeList"
-              :key="i.type"
-              :name="i.type"
-              :title="k.toString()"
-            >
-              <template #title>
-                <div class="lw-global-tip-box">
-                  <span>{{ i.name }}</span>
-                  <span class="lw-global-tip">{{ $lwTip(i.taskCount) }}</span>
-                </div>
-              </template>
-            </van-tab>
-
-          </van-tabs>
-        </div>
-
-
-        <!-- 任务状态tab -->
-        <div v-if="taskStatus.list.length" class="lw-global-tab-box lw-global-animation-out">
-          <van-tabs
-            type="card"
-            animated
-            v-model="taskStatus.active"
-            @change="taskStatusChange"
-          >
-
-            <van-tab
-              v-for="i in taskStatus.list"
-              :key="i.type"
-              :name="i.type"
-            >
-              <template #title>
-                <div class="lw-global-tip-box">
-                  <span>{{ i.name }}</span>
-                  <span class="lw-global-tip">{{ $lwTip(i.taskCount) }}</span>
-                </div>
-              </template>
-            </van-tab>
-          </van-tabs>
-        </div>
-
-
-        <!-- 数据显示 -->
-        <template v-if="taskData.list.length">
-
-          <!-- 数据 -->
-          <div
-            class="lw-global-model-box lw-global-click-style lw-global-animation-out"
-            v-for="(i, k) in taskData.list"
-            :key="i.taskId"
-            :style="{animationDelay: k * 50 + 'ms'}"
-            @click="taskItemClick(i)"
-          >
-
-            <!-- 头部 -->
-            <div class="lw-global-flex-between lw-global-bottom-border lw-task-page-order-title">
-
-              <img style="width: 50px;margin-right: 5px" src="../../../../assets/img/taskOrder.png" alt="">
-
-              <div style="flex: 1">
-                <div style="font-weight: bold;margin-bottom: 5px">{{ i.task.taskNo }}</div>
-                <div style="font-size: 12px">
-                  <!--                <span style="margin-right: 10px">{{ $lwDate.format(i.taskReceiveTime || i.taskCreateTime, 'MM-dd hh:mm') }}</span>-->
-                  已过 <span class="lw-global-title">{{ $lwDate.timeToStr({l:i.taskReceiveTime || i.taskCreateTime}).text }}</span>
-                </div>
-              </div>
-
-
-              <van-icon name="arrow"/>
-            </div>
-
-            <!-- 数据显示 -->
-            <div
-              v-if="i.content"
-              class="lw-task-page-order-body"
-            >
-
-
-              <!-- 标签 -->
-              <div v-if="i.content.tags && i.content.tags.length" style="padding: 5px 0">
-                <lw-tag
-                  v-for="ini in i.content.tags"
-                  :key="ini"
-                  type="danger"
-                  plain
-                  round
-                >{{ ini }}</lw-tag>
-              </div>
-
-
-              <!-- 任务内容 -->
-              <div
-                class="lw-global-flex-start lw-task-page-task-box"
-                v-for="(ini,ink) in i.content.itemContent"
-                :key="ink"
-              >
-                <div class="lw-global-title lw-task-page-task-title">{{ ink }}:</div>
-                <div class="lw-global-value">{{ ini }}</div>
-              </div>
-
-            </div>
-
-            <!-- 基本信息 -->
-            <div class="lw-global-flex-between lw-task-page-order-end">
-              <div>{{ userName(i.staffList) }}</div>
-              <div>
-                <!-- <span style="margin-right: 5px">{{ $lwDate.format(i.taskStartTime, 'MM-dd hh:mm') }}</span>-->
-                <span v-if="i.taskStartTime" >
-                  <span style="font-weight: normal">{{ $lwLanguage.get('wms_project.pda.common.task.duration', '已耗时') }} </span>
-                  {{ $lwDate.timeToStr({l:i.taskStartTime}).text }}
-                </span>
-                <span v-else style="font-weight: normal">
-                  {{ $lwLanguage.get('wms_project.pda.common.task.notStart', '任务未开始') }}
-                </span>
-              </div>
-            </div>
-          </div>
-
-          <!-- 分页 -->
-          <lw-pages
-            v-model="taskData.pageNum"
-            :page-total="taskData.pageTotal"
-            :page-size="pageSize"
-            @change="pageChange"
-          />
-        </template>
-        <lw-not-data v-else/>
-      </template>
-
-      <lw-not-data v-else/>
-
-
-    </div>
-
-    <!-- 任务详情查看 -->
-    <lw-popup
-      v-model="taskPopup.show"
-      :show-off-btn="false"
-      height="auto"
-      :title="$lwLanguage.get('wms_project.pda.common.task.details', '任务详情')"
-      @open="popupOpen"
-      @closed="popupClosed"
-    >
-      <template v-if="Object.keys(taskPopup.data).length">
-        <!-- 头部 -->
-        <div class="lw-global-flex-between lw-global-bottom-border lw-task-page-order-title">
-
-          <img style="width: 50px;margin-right: 5px" src="../../../../assets/img/taskOrder.png" alt="">
-
-          <div style="flex: 1">
-            <div style="font-weight: bold;margin-bottom: 5px">{{ taskPopup.data.task.taskNo }}</div>
-            <div style="font-size: 12px">
-              <!--                <span style="margin-right: 10px">{{ $lwDate.format(i.taskReceiveTime || i.taskCreateTime, 'MM-dd hh:mm') }}</span>-->
-              {{ $lwLanguage.get('wms_project.pda.common.task.formerly', '已过') }}
-              <span class="lw-global-title">
-                {{ $lwDate.timeToStr({l:taskPopup.data.taskReceiveTime || taskPopup.data.taskCreateTime}).text }}
-              </span>
-            </div>
-          </div>
-
-        </div>
-
-        <!-- 数据显示 -->
-        <div class="lw-task-page-order-body">
-
-
-          <!-- 标签 -->
-          <div v-if="taskPopup.data.content.tags.length" style="padding: 5px 0">
-            <lw-tag
-              v-for="ini in taskPopup.data.content.tags"
-              :key="ini"
-              type="danger"
-              plain
-              round
-            >{{ ini }}</lw-tag>
-          </div>
-
-
-          <!-- 任务内容 -->
-          <div
-            class="lw-global-flex-start lw-task-page-task-box"
-            v-for="(ini,k) in taskPopup.data.content.detailContent"
-            :key="k"
-          >
-            <div class="lw-global-title lw-task-page-task-title">{{ k }}:</div>
-            <div class="lw-global-value">{{ ini }}</div>
-          </div>
-
-        </div>
-      </template>
-
-      <template #button>
-        <lw-button
-          class="lw-global-animation-rotate"
-          v-if="taskPopup.data.canRefuse"
-          @click="refuse"
-        >{{ $lwLanguage.get('wms_project.pda.common.task.rejectTask', '拒绝任务') }}</lw-button>
-
-        <lw-button
-          class="lw-global-animation-rotate"
-          v-if="taskPopup.data.canAccept"
-          @click="acceptTask"
-        >{{ $lwLanguage.get('wms_project.pda.common.task.receiveTask', '接受任务') }}</lw-button>
-
-        <lw-button
-          class="lw-global-animation-rotate"
-          v-if="taskPopup.data.canReceive"
-          @click="claimTask"
-        >{{ $lwLanguage.get('wms_project.pda.common.task.getTask', '领取任务') }}</lw-button>
-
-        <lw-button
-          class="lw-global-animation-rotate"
-          v-if="!taskPopup.data.canRefuse && !taskPopup.data.canAccept && !taskPopup.data.canReceive"
-          @click="startTask"
-        >{{ $lwLanguage.get('wms_project.pda.common.task.startTask', '执行任务') }}</lw-button>
-
-      </template>
-    </lw-popup>
-  </div>
-</template>
-
-<script>
-
-export default {
-  name: "lwTaskPage",
-  props:{
-    // 背景图片
-    bgSrc:{
-      default: require('../../../../assets/img/taskBg.png')
-    },
-    // 页码大小
-    pageSize:{
-      type: Number,
-      default: 10
-    },
-
-    // 是否定时刷新
-    autoUpdate:{
-      type: Boolean,
-      default: true
-    },
-    // 定时刷新的周期
-    refreshTime:{
-      type: Number,
-      default: 15
-    }
-  },
-  data() {
-    return {
-      // 任务看板数据及类型
-      taskInfo:{},
-      // 任务类型tabs
-      taskTypeActive:'',
-      // 任务状态tabs
-      taskStatus:{
-        active:'',
-        list:[]
-      },
-      // 任务数据
-      taskData:{
-        list:[],
-        pageNum: 1,
-        pageTotal: 0
-      },
-
-      // 自动刷新的定时器
-      autoTimer: null,
-
-      // 查看任务弹出框
-      taskPopup:{
-        show:false,
-        data:{},
-        isJump: false
-      },
-    }
-  },
-  activated() {
-    this.init()
-  },
-  methods: {
-    // 获取员工姓名
-    userName(i){
-      if (!Array.isArray(i)) return
-
-      return i.map(item=>item.staffName).join('/')
-    },
-
-    // 初始化任务数据
-    initTaskData(){
-      this.taskData.list=[]
-      this.taskData.pageNum=1
-      this.taskData.pageTotal=0
-    },
-
-    // 自动刷新
-    autoRefresh(){
-      this.autoTimer = setTimeout(() => {
-        this.init(false)
-      },this.refreshTime * 1000)
-    },
-
-    // 获取任务类型及任务数据
-    init(loading=true){
-      this.$lwApi.task.getTaskType({},{loading}).then(res=>{
-        this.taskInfo = res
-
-        let index = 0
-        // 如果有值就校验是否在本次任务中存在
-        if (this.taskTypeActive){
-
-          for (let i = 0; i < this.taskInfo.typeList.length; i++) {
-            if (this.taskInfo.typeList[i].type === this.taskTypeActive ){
-              index = i
-              break
-            }
-          }
-        }
-
-        this.taskTypeActive = this.taskInfo.typeList[index].type
-        this.taskNextType(this.taskInfo.typeList[index],loading)
-      })
-    },
-
-    // 判断当前任务的子类型
-    taskNextType(item, loading=true){
-      // 判断当前任务的子类型
-      let taskStatus = []
-      switch (item.assignType){
-        case 'ACT_RECEIVE':
-          taskStatus = [
-            {
-              name: this.$lwLanguage.get('wms_project.pda.common.task.get', '领取'),
-              type: 1,
-              taskCount: item.unClaimTaskCount
-            },
-            {
-              name: this.$lwLanguage.get('wms_project.pda.common.task.ing', '进行中'),
-              type: 2,
-              taskCount: item.receivedTaskCount
-            }
-          ]
-          break;
-        case 'AUTO_ASSIGN':
-          taskStatus = [
-            {
-              name: this.$lwLanguage.get('wms_project.pda.common.task.wait', '待接收'),
-              type: 0,
-              taskCount: item.waitAcceptTaskCount
-            },
-            {
-              name: this.$lwLanguage.get('wms_project.pda.common.task.ing', '进行中'),
-              type: 2,
-              taskCount: item.receivedTaskCount
-            }
-          ]
-          break;
-        default:
-          taskStatus = []
-      }
-
-      this.taskStatus.list = taskStatus
-
-      // 判断当前是否默认选择了子类型
-      if (this.taskStatus.list.length){
-
-        // 当前子类型如果为空 或者没有在现有子类型中找到
-        const has =this.taskStatus.active === '' || !this.taskStatus.list.some(item=>item.type === this.taskStatus.active)
-
-        // 如果没有就默认取第一项，否则不变
-        has ? this.taskStatus.active = this.taskStatus.list[0].type : ''
-
-      }else {
-        this.taskStatus.active = 2
-      }
-
-
-      this.getTaskTypeList(loading)
-    },
-
-    // 获取当前任务的数据
-    getTaskTypeList(loading=true){
-      clearTimeout(this.autoTimer)
-
-      // 找打当前任务类型的数据值
-      let item={}
-      for (let i = 0; i < this.taskInfo.typeList.length; i++) {
-        if (this.taskInfo.typeList[i].type === this.taskTypeActive){
-          item = this.taskInfo.typeList[i]
-          break
-        }
-      }
-
-      // 分页总条数
-      switch (this.taskStatus.active){
-        case 0:
-          this.taskData.pageTotal = item.waitAcceptTaskCount || 0
-          break;
-        case 1:
-          this.taskData.pageTotal = item.unClaimTaskCount || 0
-          break;
-        case 2:
-          this.taskData.pageTotal = item.receivedTaskCount || 0
-          break;
-        default:
-          this.taskData.pageTotal = item.receivedTaskCount || 0
-          break;
-      }
-
-      this.$lwApi.task.getTaskList({
-        type:this.taskTypeActive,
-        queryType:this.taskStatus.active,
-        pageNum:this.taskData.pageNum - 1,
-        pageSize:this.pageSize
-      },{loading}).then(res=>{
-        this.taskData.list = res
-        this.autoUpdate && this.autoRefresh()
-      })
-    },
-
-
-    // 任务类型tabs切换
-    taskTypeChange(name,title){
-      this.initTaskData()
-      this.taskStatus.active=''
-      this.taskNextType(this.taskInfo.typeList[title])
-    },
-    // 任务状态tabs切换
-    taskStatusChange(){
-
-      this.initTaskData()
-      this.getTaskTypeList()
-
-    },
-    // 页码切换
-    pageChange(){
-      this.getTaskTypeList()
-    },
-    // 任务被点击
-    taskItemClick(item){
-
-      if (!item || !item.content){
-        this.$lwShowErrorMsg(
-          this.$lwLanguage.get('wms_project.pda.common.task.taskNull','任务详情数据为空，请确保数据配置正确！')
-        )
-        console.error('任务数据为空，不能有效展示:', item)
-        return
-      }
-
-      this.taskPopup.show = true
-      this.taskPopup.data = item
-    },
-
-
-    // 弹出框打开
-    popupOpen(){
-      clearTimeout(this.autoTimer)
-    },
-    // 弹出框关闭
-    popupClosed(){
-      if (this.taskPopup.isJump){
-        this.taskPopup.isJump = false
-      }else {
-        this.init(false)
-      }
-    },
-    // 拒绝任务
-    refuse(){
-      this.$dialog.confirm({
-        title: this.$lwLanguage.get('wms_project.pda.common.warning', '警告'),
-        message: this.$lwLanguage.get('wms_project.pda.common.task.confirmReject', '确认拒绝当前任务') + '?'
-      }).then(()=>{
-        this.$lwApi.task.refuseTask({
-          taskId: this.taskPopup.data.taskId
-        }).then(()=>{
-          this.$lwToast.success(this.$lwLanguage.get('wms_project.pda.common.task.reject', '已拒绝'))
-          this.taskPopup.show = false
-        })
-      }).catch(()=>{})
-    },
-    // 接受任务
-    acceptTask(){
-      this.$lwApi.task.acceptTask({
-        taskId: this.taskPopup.data.taskId
-      }).then(res=>{
-        this.taskPopup.data.canRefuse=res.canRefuse
-        this.taskPopup.data.canAccept=res.canAccept
-        this.taskPopup.data.canReceive=res.canReceive
-        this.$lwToast.success(this.$lwLanguage.get('wms_project.pda.common.task.receive', '已接受'))
-      })
-    },
-    // 领取任务
-    claimTask(){
-      this.$lwApi.task.claimTask({
-        taskId: this.taskPopup.data.taskId
-      }).then(res=>{
-
-        this.$lwToast.success(this.$lwLanguage.get('wms_project.pda.common.task.yiGet', '已领取'))
-
-        this.taskPopup.data.canRefuse=res.canRefuse
-        this.taskPopup.data.canAccept=res.canAccept
-        this.taskPopup.data.canReceive=res.canReceive
-
-
-      })
-    },
-    // 执行任务
-    startTask(){
-      if (!this.taskPopup.data.task.taskPage){
-        this.$lwShowErrorMsg(
-          this.$lwLanguage.get(
-            'wms_project.pda.common.task.taskNotSet',
-            '作业任务配置项未配置'
-          ) + ':' + (this.taskPopup.data.task.operationTypeLabel || '当前')
-        )
-        return
-      }
-
-      this.taskPopup.isJump = true
-
-      this.$lwApi.task.startTask({
-        taskId: this.taskPopup.data.taskId,
-        checkAssign:true
-      }).then(() => {
-        this.taskPopup.show = false
-        setTimeout(()=>{
-          this.$router.push({
-            path: this.taskPopup.data.task.taskPage,
-            query:{
-              lwTaskId: this.taskPopup.data.taskId,
-              lwComeFrom:'task',
-              lwTaskNo: this.taskPopup.data.task.taskNo
-            }
-          })
-        },1)
-      }).catch(()=>this.taskPopup.isJump = false)
-    },
-
-
-    // 顶部点击返回
-    navBack(){
-      history.go(-1)
-    }
-  },
-  deactivated(){
-    clearTimeout(this.autoTimer)
-  },
-
-}
-</script>
-
-<style scoped lang="less">
-
-
-.lw-task-page-look-box{
-  position: relative;
-
-
-  >img{
-    width: 100%;
-  }
-
-  .lw-task-page-look-boss{
-    width: 100%;
-    height: 100%;
-    position: absolute;
-    top: 0;
-    left: 0;
-    color: #fff;
-  }
-}
-
-
-.lw-task-page-look-item{
-  flex-direction: column;
-  height: 70%;
-}
-
-.lw-task-page-look-item-title{
-  font-size: 14px;
-}
-
-.lw-task-page-look-line{
-  width: 1px;
-  height: 30%;
-  background: #fff;
-  border: 2px;
-  overflow: hidden;
-}
-
-
-.lw-task-page-order-title{
-  font-size: 14px;
-}
-.lw-task-page-order-body{
-  padding: 10px 0;
-}
-.lw-task-page-order-end{
-  font-size: 12px;
-  font-weight: bold;
-  padding-top: 10px;
-  border-top: 1px solid #F0F0F0;
-}
-
-
-.lw-task-page-task-box{
-  margin: 5px 0;
-
-  .lw-task-page-task-title{
-    text-align: right;
-    width: 80px;
-    flex-shrink: 0;
-    align-self: self-start;
-  }
-}
-
-</style>
+<!--
+  任务页
+  @author: 张文
+  @date: 2022-03-04
+-->
+<template>
+  <div>
+    <lw-nav-bar
+      :title="$lwLanguage.get('wms_project.pda.common.task.task', '任务')"
+      :click-left="navBack"
+    />
+
+    <div class="lw-global-page-box">
+
+      <template v-if="taskInfo.typeList">
+        <!-- 任务看板 -->
+        <div class="lw-task-page-look-box">
+          <!-- 背景图片 -->
+          <img :src="bgSrc" alt="">
+
+          <!-- 显示内容 -->
+          <div class="lw-global-flex-around lw-task-page-look-boss">
+
+            <slot name="taskLook" :data="taskInfo">
+              <!-- 待接收 -->
+              <div class="lw-global-flex-evenly lw-task-page-look-item">
+                <div>{{ taskInfo.waitAcceptTaskCount || 0 }}</div>
+                <div class="lw-task-page-look-item-title">
+                  {{ $lwLanguage.get('wms_project.pda.common.task.waitReception', '待接收') }}
+                </div>
+              </div>
+
+              <!-- 未完成 -->
+              <div class="lw-global-flex-evenly lw-task-page-look-item">
+                <div>{{ taskInfo.inProgressTaskCount || 0 }}</div>
+                <div class="lw-task-page-look-item-title">
+                  {{ $lwLanguage.get('wms_project.pda.common.task.unfinished', '未完成') }}
+                </div>
+              </div>
+
+              <!-- 已完成 -->
+              <div class="lw-global-flex-evenly lw-task-page-look-item">
+                <div>{{ taskInfo.finishTaskCount || 0 }}</div>
+                <div class="lw-task-page-look-item-title">
+                  {{ $lwLanguage.get('wms_project.pda.common.task.finished', '已完成') }}
+                </div>
+              </div>
+
+              <div class="lw-task-page-look-line"></div>
+
+              <!-- 剩余行数 -->
+              <div class="lw-global-flex-evenly lw-task-page-look-item">
+                <div>{{ taskInfo.surplusLineCount || 0 }}</div>
+                <div class="lw-task-page-look-item-title">
+                  {{$lwLanguage.get('wms_project.pda.common.task.residue', '剩余行数') }}
+                </div>
+              </div>
+
+              <!-- 完成行数 -->
+              <div class="lw-global-flex-evenly lw-task-page-look-item">
+                <div>{{ taskInfo.finishLineCount || 0 }}</div>
+                <div class="lw-task-page-look-item-title">
+                  {{$lwLanguage.get('wms_project.pda.common.task.finishedLine', '已完成行数') }}
+                </div>
+              </div>
+            </slot>
+
+
+          </div>
+
+        </div>
+
+
+        <!-- 任务类型tab -->
+        <div style="margin-top: 10px" class="lw-global-tab-box">
+          <van-tabs
+            type="card"
+            animated
+            v-model="taskTypeActive"
+            @change="taskTypeChange"
+          >
+
+            <van-tab
+              v-for="(i, k) in taskInfo.typeList"
+              :key="i.type"
+              :name="i.type"
+              :title="k.toString()"
+            >
+              <template #title>
+                <div class="lw-global-tip-box">
+                  <span>{{ i.name }}</span>
+                  <span
+                    v-if="$lwTip(i.taskCount)"
+                    class="lw-global-tip"
+                  >{{ $lwTip(i.taskCount) }}</span>
+                </div>
+              </template>
+            </van-tab>
+
+          </van-tabs>
+        </div>
+
+
+        <!-- 任务状态tab -->
+        <div v-if="taskStatus.list.length" class="lw-global-tab-box lw-global-animation-out">
+          <van-tabs
+            type="card"
+            animated
+            v-model="taskStatus.active"
+            @change="taskStatusChange"
+          >
+
+            <van-tab
+              v-for="i in taskStatus.list"
+              :key="i.type"
+              :name="i.type"
+            >
+              <template #title>
+                <div class="lw-global-tip-box">
+                  <span>{{ i.name }}</span>
+                  <span
+                    v-if="$lwTip(i.taskCount)"
+                    class="lw-global-tip"
+                  >{{ $lwTip(i.taskCount) }}</span>
+                </div>
+              </template>
+            </van-tab>
+          </van-tabs>
+        </div>
+
+
+        <!-- 数据显示 -->
+        <template v-if="taskData.list.length">
+
+          <!-- 数据 -->
+          <div
+            class="lw-global-model-box lw-global-click-style lw-global-animation-out"
+            v-for="(i, k) in taskData.list"
+            :key="i.taskId"
+            :style="{animationDelay: k * 50 + 'ms'}"
+            @click="taskItemClick(i)"
+          >
+
+            <!-- 头部 -->
+            <div class="lw-global-flex-between lw-global-bottom-border lw-task-page-order-title">
+
+              <img style="width: 50px;margin-right: 5px" src="../../../../assets/img/taskOrder.png" alt="">
+
+              <div style="flex: 1">
+                <div style="font-weight: bold;margin-bottom: 5px">{{ i.task.taskNo }}</div>
+                <div style="font-size: 12px">
+                  <!--                <span style="margin-right: 10px">{{ $lwDate.format(i.taskReceiveTime || i.taskCreateTime, 'MM-dd hh:mm') }}</span>-->
+                  已过 <span class="lw-global-title">{{ $lwDate.timeToStr({l:i.taskReceiveTime || i.taskCreateTime}).text }}</span>
+                </div>
+              </div>
+
+
+              <van-icon name="arrow"/>
+            </div>
+
+            <!-- 数据显示 -->
+            <div
+              v-if="i.content"
+              class="lw-task-page-order-body"
+            >
+
+
+              <!-- 标签 -->
+              <div v-if="i.content.tags && i.content.tags.length" style="padding: 5px 0">
+                <lw-tag
+                  v-for="ini in i.content.tags"
+                  :key="ini"
+                  type="danger"
+                  plain
+                  round
+                >{{ ini }}</lw-tag>
+              </div>
+
+
+              <!-- 任务内容 -->
+              <div
+                class="lw-global-flex-start lw-task-page-task-box"
+                v-for="(ini,ink) in i.content.itemContent"
+                :key="ink"
+              >
+                <div class="lw-global-title lw-task-page-task-title">{{ ink }}:</div>
+                <div class="lw-global-value">{{ ini }}</div>
+              </div>
+
+            </div>
+
+            <!-- 基本信息 -->
+            <div class="lw-global-flex-between lw-task-page-order-end">
+              <div>{{ userName(i.staffList) }}</div>
+              <div>
+                <!-- <span style="margin-right: 5px">{{ $lwDate.format(i.taskStartTime, 'MM-dd hh:mm') }}</span>-->
+                <span v-if="i.taskStartTime" >
+                  <span style="font-weight: normal">{{ $lwLanguage.get('wms_project.pda.common.task.duration', '已耗时') }} </span>
+                  {{ $lwDate.timeToStr({l:i.taskStartTime}).text }}
+                </span>
+                <span v-else style="font-weight: normal">
+                  {{ $lwLanguage.get('wms_project.pda.common.task.notStart', '任务未开始') }}
+                </span>
+              </div>
+            </div>
+          </div>
+
+          <!-- 分页 -->
+          <lw-pagination
+            v-model="taskData.pageNum"
+            :page-total="taskData.pageTotal"
+            :page-size.sync="taskData.pageSize"
+            @change="pageChange"
+          />
+        </template>
+        <lw-not-data v-else/>
+      </template>
+
+      <lw-not-data v-else/>
+
+
+    </div>
+
+    <!-- 任务详情查看 -->
+    <lw-popup
+      v-model="taskPopup.show"
+      :show-off-btn="false"
+      height="auto"
+      :title="$lwLanguage.get('wms_project.pda.common.task.details', '任务详情')"
+      @open="popupOpen"
+      @closed="popupClosed"
+    >
+      <template v-if="Object.keys(taskPopup.data).length">
+        <!-- 头部 -->
+        <div class="lw-global-flex-between lw-global-bottom-border lw-task-page-order-title">
+
+          <img style="width: 50px;margin-right: 5px" src="../../../../assets/img/taskOrder.png" alt="">
+
+          <div style="flex: 1">
+            <div style="font-weight: bold;margin-bottom: 5px">{{ taskPopup.data.task.taskNo }}</div>
+            <div style="font-size: 12px">
+              <!--                <span style="margin-right: 10px">{{ $lwDate.format(i.taskReceiveTime || i.taskCreateTime, 'MM-dd hh:mm') }}</span>-->
+              {{ $lwLanguage.get('wms_project.pda.common.task.formerly', '已过') }}
+              <span class="lw-global-title">
+                {{ $lwDate.timeToStr({l:taskPopup.data.taskReceiveTime || taskPopup.data.taskCreateTime}).text }}
+              </span>
+            </div>
+          </div>
+
+        </div>
+
+        <!-- 数据显示 -->
+        <div class="lw-task-page-order-body">
+
+
+          <!-- 标签 -->
+          <div v-if="taskPopup.data.content.tags.length" style="padding: 5px 0">
+            <lw-tag
+              v-for="ini in taskPopup.data.content.tags"
+              :key="ini"
+              type="danger"
+              plain
+              round
+            >{{ ini }}</lw-tag>
+          </div>
+
+
+          <!-- 任务内容 -->
+          <div
+            class="lw-global-flex-start lw-task-page-task-box"
+            v-for="(ini,k) in taskPopup.data.content.detailContent"
+            :key="k"
+          >
+            <div class="lw-global-title lw-task-page-task-title">{{ k }}:</div>
+            <div class="lw-global-value">{{ ini }}</div>
+          </div>
+
+        </div>
+      </template>
+
+      <template #button>
+        <lw-button
+          class="lw-global-animation-rotate"
+          v-if="taskPopup.data.canRefuse"
+          @click="refuse"
+        >{{ $lwLanguage.get('wms_project.pda.common.task.rejectTask', '拒绝任务') }}</lw-button>
+
+        <lw-button
+          class="lw-global-animation-rotate"
+          v-if="taskPopup.data.canAccept"
+          @click="acceptTask"
+        >{{ $lwLanguage.get('wms_project.pda.common.task.receiveTask', '接受任务') }}</lw-button>
+
+        <lw-button
+          class="lw-global-animation-rotate"
+          v-if="taskPopup.data.canReceive"
+          @click="claimTask"
+        >{{ $lwLanguage.get('wms_project.pda.common.task.getTask', '领取任务') }}</lw-button>
+
+        <lw-button
+          class="lw-global-animation-rotate"
+          v-if="!taskPopup.data.canRefuse && !taskPopup.data.canAccept && !taskPopup.data.canReceive"
+          @click="startTask"
+        >{{ $lwLanguage.get('wms_project.pda.common.task.startTask', '执行任务') }}</lw-button>
+
+      </template>
+    </lw-popup>
+  </div>
+</template>
+
+<script>
+import taskBg from '../../../../assets/img/taskBg.png'
+
+export default {
+  name: "lwTaskPage",
+  props:{
+    // 背景图片
+    bgSrc:{
+      default: taskBg
+    },
+    /*// 页码大小
+    pageSize:{
+      type: Number,
+      default: 10
+    },*/
+
+    // 是否定时刷新
+    autoUpdate:{
+      type: Boolean,
+      default: true
+    },
+    // 定时刷新的周期
+    refreshTime:{
+      type: Number,
+      default: 15
+    }
+  },
+  data() {
+    return {
+      // 任务看板数据及类型
+      taskInfo:{},
+      // 任务类型tabs
+      taskTypeActive:'',
+      // 任务状态tabs
+      taskStatus:{
+        active:'',
+        list:[]
+      },
+      // 任务数据
+      taskData:{
+        list:[],
+        pageNum: 1,
+        pageTotal: 0,
+        pageSize: 10
+      },
+
+      // 自动刷新的定时器
+      autoTimer: null,
+
+      // 查看任务弹出框
+      taskPopup:{
+        show:false,
+        data:{},
+        isJump: false
+      },
+    }
+  },
+  activated() {
+    this.init()
+  },
+  methods: {
+    // 获取员工姓名
+    userName(i){
+      if (!Array.isArray(i)) return
+
+      return i.map(item=>item.staffName).join('/')
+    },
+
+    // 初始化任务数据
+    initTaskData(){
+      this.taskData.list=[]
+      this.taskData.pageNum=1
+      this.taskData.pageTotal=0
+    },
+
+    // 自动刷新
+    autoRefresh(){
+      this.autoTimer = setTimeout(() => {
+        this.init(false)
+      },this.refreshTime * 1000)
+    },
+
+    // 获取任务类型及任务数据
+    init(loading=true){
+      this.$lwApi.task.getTaskType({},{loading}).then(res=>{
+        this.taskInfo = res
+
+        let index = 0
+        // 如果有值就校验是否在本次任务中存在
+        if (this.taskTypeActive){
+
+          for (let i = 0; i < this.taskInfo.typeList.length; i++) {
+            if (this.taskInfo.typeList[i].type === this.taskTypeActive ){
+              index = i
+              break
+            }
+          }
+        }
+
+        this.taskTypeActive = this.taskInfo.typeList[index].type
+        this.taskNextType(this.taskInfo.typeList[index],loading)
+      })
+    },
+
+    // 判断当前任务的子类型
+    taskNextType(item, loading=true){
+      // 判断当前任务的子类型
+      let taskStatus = []
+      switch (item.assignType){
+        case 'ACT_RECEIVE':
+          taskStatus = [
+            {
+              name: this.$lwLanguage.get('wms_project.pda.common.task.get', '领取'),
+              type: 1,
+              taskCount: item.unClaimTaskCount
+            },
+            {
+              name: this.$lwLanguage.get('wms_project.pda.common.task.ing', '进行中'),
+              type: 2,
+              taskCount: item.receivedTaskCount
+            }
+          ]
+          break;
+        case 'AUTO_ASSIGN':
+          taskStatus = [
+            {
+              name: this.$lwLanguage.get('wms_project.pda.common.task.wait', '待接收'),
+              type: 0,
+              taskCount: item.waitAcceptTaskCount
+            },
+            {
+              name: this.$lwLanguage.get('wms_project.pda.common.task.ing', '进行中'),
+              type: 2,
+              taskCount: item.receivedTaskCount
+            }
+          ]
+          break;
+        default:
+          taskStatus = []
+      }
+
+      this.taskStatus.list = taskStatus
+
+      // 判断当前是否默认选择了子类型
+      if (this.taskStatus.list.length){
+
+        // 当前子类型如果为空 或者没有在现有子类型中找到
+        const has =this.taskStatus.active === '' || !this.taskStatus.list.some(item=>item.type === this.taskStatus.active)
+
+        // 如果没有就默认取第一项，否则不变
+        has ? this.taskStatus.active = this.taskStatus.list[0].type : ''
+
+      }else {
+        this.taskStatus.active = 2
+      }
+
+
+      this.getTaskTypeList(loading)
+    },
+
+    // 获取当前任务的数据
+    getTaskTypeList(loading=true){
+      clearTimeout(this.autoTimer)
+
+      // 找打当前任务类型的数据值
+      let item={}
+      for (let i = 0; i < this.taskInfo.typeList.length; i++) {
+        if (this.taskInfo.typeList[i].type === this.taskTypeActive){
+          item = this.taskInfo.typeList[i]
+          break
+        }
+      }
+
+      // 分页总条数
+      switch (this.taskStatus.active){
+        case 0:
+          this.taskData.pageTotal = item.waitAcceptTaskCount || 0
+          break;
+        case 1:
+          this.taskData.pageTotal = item.unClaimTaskCount || 0
+          break;
+        case 2:
+          this.taskData.pageTotal = item.receivedTaskCount || 0
+          break;
+        default:
+          this.taskData.pageTotal = item.receivedTaskCount || 0
+          break;
+      }
+
+      this.$lwApi.task.getTaskList({
+        type:this.taskTypeActive,
+        queryType:this.taskStatus.active,
+        pageNum:this.taskData.pageNum - 1,
+        pageSize:this.taskData.pageSize
+      },{loading}).then(res=>{
+        this.taskData.list = res
+        this.autoUpdate && this.autoRefresh()
+      })
+    },
+
+
+    // 任务类型tabs切换
+    taskTypeChange(name,title){
+      this.initTaskData()
+      this.taskStatus.active=''
+      this.taskNextType(this.taskInfo.typeList[title])
+    },
+    // 任务状态tabs切换
+    taskStatusChange(){
+
+      this.initTaskData()
+      this.getTaskTypeList()
+
+    },
+    // 页码切换
+    pageChange(){
+      this.getTaskTypeList()
+    },
+    // 任务被点击
+    taskItemClick(item){
+
+      if (!item || !item.content){
+        this.$lwShowErrorMsg(
+          this.$lwLanguage.get('wms_project.pda.common.task.taskNull','任务详情数据为空，请确保数据配置正确！')
+        )
+        console.error('任务数据为空，不能有效展示:', item)
+        return
+      }
+
+      this.taskPopup.show = true
+      this.taskPopup.data = item
+    },
+
+
+    // 弹出框打开
+    popupOpen(){
+      clearTimeout(this.autoTimer)
+    },
+    // 弹出框关闭
+    popupClosed(){
+      if (this.taskPopup.isJump){
+        this.taskPopup.isJump = false
+      }else {
+        this.init(false)
+      }
+    },
+    // 拒绝任务
+    refuse(){
+      this.$lwDialog.confirm({
+        title: this.$lwLanguage.get('wms_project.pda.common.warning', '警告'),
+        message: this.$lwLanguage.get('wms_project.pda.common.task.confirmReject', '确认拒绝当前任务') + '?'
+      }).then(()=>{
+        this.$lwApi.task.refuseTask({
+          taskId: this.taskPopup.data.taskId
+        }).then(()=>{
+          this.$lwToast.success(this.$lwLanguage.get('wms_project.pda.common.task.reject', '已拒绝'))
+          this.taskPopup.show = false
+        })
+      }).catch(()=>{})
+    },
+    // 接受任务
+    acceptTask(){
+      this.$lwApi.task.acceptTask({
+        taskId: this.taskPopup.data.taskId
+      }).then(res=>{
+        this.taskPopup.data.canRefuse=res.canRefuse
+        this.taskPopup.data.canAccept=res.canAccept
+        this.taskPopup.data.canReceive=res.canReceive
+        this.$lwToast.success(this.$lwLanguage.get('wms_project.pda.common.task.receive', '已接受'))
+      })
+    },
+    // 领取任务
+    claimTask(){
+      this.$lwApi.task.claimTask({
+        taskId: this.taskPopup.data.taskId
+      }).then(res=>{
+
+        this.$lwToast.success(this.$lwLanguage.get('wms_project.pda.common.task.yiGet', '已领取'))
+
+        this.taskPopup.data.canRefuse=res.canRefuse
+        this.taskPopup.data.canAccept=res.canAccept
+        this.taskPopup.data.canReceive=res.canReceive
+
+
+      })
+    },
+    // 执行任务
+    startTask(){
+      if (!this.taskPopup.data.task.taskPage){
+        this.$lwShowErrorMsg(
+          this.$lwLanguage.get(
+            'wms_project.pda.common.task.taskNotSet',
+            '作业任务配置项未配置'
+          ) + ':' + (this.taskPopup.data.task.operationTypeLabel || '当前')
+        )
+        return
+      }
+
+      this.taskPopup.isJump = true
+
+      this.$lwApi.task.startTask({
+        taskId: this.taskPopup.data.taskId,
+        checkAssign:true
+      }).then(() => {
+        this.taskPopup.show = false
+        setTimeout(()=>{
+          this.$router.push({
+            path: this.taskPopup.data.task.taskPage,
+            query:{
+              lwTaskId: this.taskPopup.data.taskId,
+              lwComeFrom:'task',
+              lwTaskNo: this.taskPopup.data.task.taskNo
+            }
+          })
+        },1)
+      }).catch(()=>this.taskPopup.isJump = false)
+    },
+
+
+    // 顶部点击返回
+    navBack(){
+      history.go(-1)
+    }
+  },
+  deactivated(){
+    clearTimeout(this.autoTimer)
+  },
+
+}
+</script>
+
+<style scoped lang="less">
+
+
+.lw-task-page-look-box{
+  position: relative;
+
+
+  >img{
+    width: 100%;
+  }
+
+  .lw-task-page-look-boss{
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+    color: #fff;
+  }
+}
+
+
+.lw-task-page-look-item{
+  flex-direction: column;
+  height: 70%;
+}
+
+.lw-task-page-look-item-title{
+  font-size: 14px;
+}
+
+.lw-task-page-look-line{
+  width: 1px;
+  height: 30%;
+  background: #fff;
+  border: 2px;
+  overflow: hidden;
+}
+
+
+.lw-task-page-order-title{
+  font-size: 14px;
+}
+.lw-task-page-order-body{
+  padding: 10px 0;
+}
+.lw-task-page-order-end{
+  font-size: 12px;
+  font-weight: bold;
+  padding-top: 10px;
+  border-top: 1px solid #F0F0F0;
+}
+
+
+.lw-task-page-task-box{
+  margin: 5px 0;
+
+  .lw-task-page-task-title{
+    text-align: right;
+    width: 80px;
+    flex-shrink: 0;
+    align-self: self-start;
+  }
+}
+
+</style>