yiliangyiyun-pc-jj/src/views/newTask/listPage.vue

<template>
  <!-- v-loading="loadingbox" -->
  <div>
    <!-- table切换 -->
    <ul class="table-box">
      <!-- 任务 -->
      <li :class="typeShow === '0' ? 'table-bottom' : ''"
          @click="typeApiFun('0')">
        {{ $t('homeIndex.task') }}
      </li>
      <!-- 提醒 -->
      <!-- <li :class="typeShow === '1' ? 'table-bottom' : ''"
          @click="typeApiFun('1')">
        {{ $t('homeIndex.remind') }}
      </li> -->
      <!-- 超期 -->
      <!-- <li :class="typeShow === '2' ? 'table-bottom' : ''"
          @click="typeApiFun('2')">
        {{ $t('homeIndex.beyond') }}
      </li> -->
      <div class="search-time">
        <el-date-picker style="float:right"
                        v-model="Datevalue"
                        type="datetimerange"
                        :start-placeholder="$t('common.startDate')"
                        :end-placeholder="$t('common.endDate')"
                        @change="dateSearch">
        </el-date-picker>
      </div>
      <div class="clear-both"></div>
    </ul>
    <!-- end table切换 -->

    <!-- 分类 -->
    <ul class="taskType"
        ref="taskTypeShow">
      <li v-for="(item, index) in taskTypeList"
          :key="index"
          @click="clickSearch(item, index)"
          :class="{ active: categoryIndex == index }">
        <p>
          <!-- 类型名称 -->
          {{ getLanguage !== 'en' ? $t(item.businessTypeName) : $t(item.businessTypeNameEn)}}
          <!-- 类型个数 -->
          <span>( {{ item.amount }} )</span>
        </p>
      </li>
      <div class="clear-both"></div>
    </ul>
    <!-- end 分类 -->

    <!-- 内容部分 -->
    <div class="taskList-box"
         style="overflow:auto;"
         ref="taskListBoxshow">
      <ul class="taskList"
          v-infinite-scroll="noticeListFun"
          infinite-scroll-disabled="scrollDisabled"
          infinite-scroll-distance="30">
        <li v-for="(i, index) in listShow"
            :key="index"
            class="list-item"
            @click="goPath(i)">
          <!-- 图标 -->
          <div class="taskList-icon">
            <!-- CERTIFICATE 证书
            CREW 船员
            FINANCE 财务
            ISM 体系
            MAINTAIN 维保
            MATERIEL 物料
            NAVIGATION 航海资料
            NCOMPATIBLE
            OIL 油品
            PURCHASE 采购
            REPAIR 修船
            SERVICER 服务商
            SYSTEM
            VOYAGE-->
            <!-- 出入库 -->
            <img v-show="i.businessType === 'WAREHOUSE'"
                 src="@/assets/newTaks/churuku.png" />
            <!-- 采购 -->
            <img v-if="i.businessType === 'PROCUREMENT'"
                 src="@/assets/newTaks/caigou.png" />
            <!-- 统计报表 -->
            <img v-if="i.businessType === 'REPORT'"
                 src="@/assets/newTaks/baobiao.png" />
            <!-- 销售 -->
            <img v-if="i.businessType === 'SALE'"
                 src="@/assets/newTaks/xiaoshou.png" />
            <!-- 体系 -->
            <img v-if="i.businessType === 'ISM'"
                 src="@/assets/newTaks/txgl.png" />
            <img v-if="i.businessType === 'INS'"
                 src="@/assets/newTaks/txgl.png" />
            <!-- 维保 -->
            <img v-if="i.businessType === 'MAINTAIN'"
                 src="@/assets/newTaks/wxby.png" />
            <!-- 物料 -->
            <img v-if="i.businessType === 'MATERIEL'"
                 src="@/assets/newTaks/wlgl.png" />
            <!-- 备件  -->
            <img v-if="i.businessType === 'SPAREPART'"
                 src="@/assets/newTaks/bj.png" />
            <!-- 航海资料 -->
            <img v-if="i.businessType === 'NAVIGATION'"
                 src="@/assets/newTaks/hhzlgl.png" />
            <!-- 油品 -->
            <img v-if="i.businessType === 'OIL'"
                 src="@/assets/newTaks/ypgl.png" />
            <!-- 采购 -->
            <img v-if="i.businessType === 'PURCHASE'"
                 src="@/assets/newTaks/cggl.png" />
            <!-- 修船 -->
            <img v-if="i.businessType === 'REPAIR'"
                 src="@/assets/newTaks/xcgl.png" />
            <!-- 服务商 -->
            <img v-if="i.businessType === 'SERVICER'"
                 src="@/assets/newTaks/fwsgl.png" />
          </div>
          <!-- 标题 -->
          <div class="taskList-font">
            <p :title="i.messageContent">
              <!-- 类型 -->
              <b>{{ getLanguage !== 'en' ? i.messageTitle : i.messageTitleEn}}</b>
              {{ i.messageContent }}
            </p>
          </div>
          <!-- 时间 -->
          <div class="taskList-timer">{{ isToday(i.createDate) }}</div>
          <!-- 按钮 -->
          <div class="taskList-btn">
            <p>
              <span class="el-icon-s-order"
                    style="font-size:16px; margin-right:10px;"></span>{{$t('workNotification.handle')}}
            </p>
          </div>
        </li>
        <div class="footer-box">
          <div class="footer"
               v-if="loading">{{$t('common.onLoading')}}</div>
          <div class="footer"
               v-if="noMore">{{$t('common.noMore')}}</div>
        </div>
        <div class="clear-both"></div>
      </ul>
    </div>
    <!-- end 内容部分 -->
    <el-backtop target=".taskList-box"></el-backtop>
  </div>
</template>

<script>
// TaskTypeAmount：任务类型数据
// noticeTasks:任务列表数据
// RemindTypeAmount：提醒
// noticeReminds:提醒列表数据
// OverdueTypeAmount：超期
// noticeOverdues:超期列表数据
import {
  TaskTypeAmount,
  RemindTypeAmount,
  OverdueTypeAmount,
  noticeTasks,
  noticeReminds,
  noticeOverdues,
} from '@/model/indexRx'
import { EventBus, formatDate, dayjs } from 'base-core-lib'
import * as utils from '@/views/workNotification/utils/index.js'
export default {
  name: 'newtask',
  data () {
    return {
      activeName: 'second',
      listShow: [],
      taskTypeList: [], // 类型数据容器
      typeAllnum: 0, // 所有分类总条数
      typeShow: '0', //分类得类型 0：任务 1：提醒 2：超期
      scrollbarPage: 0,
      scrollbarLimit: 20,
      scrollbarTotal: 1,
      loading: false,
      pageList: [1],
      Datevalue: '',
      loadingbox: false,
      fl: '',
      dateCreat: '',
      dateEnd: '',
      categoryIndex: 0,
    }
  },
  computed: {
    noMore () {
      return this.pageList.length === 0
    },
    scrollDisabled () {
      return this.loading || this.noMore
    },
    getLanguage () {
      return this.$store.getters.language
    }
  },
  created () {
    let typeData = this.$route.query.types
    if (typeData) {
      this.typeShow = typeData
      this.typeApiFun(typeData)
    } else {
      this.typeApiFun()
    }
  },
  mounted () { },
  methods: {
    // 判断类型
    typeApiFun (data) {
      this.categoryIndex = 0
      this.fl = ''
      this.pageList = [1]
      this.listShow = []
      this.scrollbarPage = 0
      this.taskTypeList = []
      this.loadingbox = true
      if (data) {
        this.typeShow = data
        if (this.typeShow === '0') {
          TaskTypeAmount().toPromise().then((data) => {
            this.typeDataFun(data)
          })
        } else if (this.typeShow === '1') {
          RemindTypeAmount().toPromise().then((data) => {
            this.typeDataFun(data, this.typeShow)
          })
        } else if (this.typeShow === '2') {
          OverdueTypeAmount().toPromise().then((data) => {
            this.typeDataFun(data, this.typeShow)
          })
        }
      } else {
        this.typeShow = '0'
        TaskTypeAmount().toPromise().then((data) => {
          this.typeDataFun(data)
        })
      }
      this.noticeListFun()
    },
    typeDataFun (data) {
      this.typeAllnum = 0
      // TODO 临时解决后端问题
      const hiddenList = []
      this.taskTypeList = data.filter(
        (item) => hiddenList.indexOf(item.businessTypeName.trim()) == -1
      )

      if (this.taskTypeList && this.taskTypeList.length) {
        for (let i = 0; i < this.taskTypeList.length; i++) {
          this.typeAllnum += parseInt(this.taskTypeList[i].amount)
        }
      }
      this.taskTypeList.unshift({
        businessTypeName: 'common.all',
        businessTypeNameEn: 'common.all',
        amount: this.typeAllnum,
      })
      this.$nextTick(function () {
        this.$refs.taskListBoxshow.style.height = `calc(100vh - ${this.$refs.taskTypeShow.offsetHeight}px)`
      })
    },
    noticeListFun () {
      this.loadingbox = true
      this.loading = true
      // noticeTaskStatus:  待处理 TO_BE_PROCESSED,   已处理    PROCESSED
      // businessType: 工作通知分类类型 例: CERTIFICATE 证书
      // compId: 公司id
      // createDateStart:开始时间
      // createDateEnd: 结束时间
      // pageSize: 分页大小(默认10)
      // currentPage: 页码(默认为1)
      this.scrollbarPage += 1
      let searchList = {
        businessType: this.fl,
        createDateStart: this.dateCreat,
        createDateEnd: this.dateEnd,
        compId: '',
        pageSize: this.scrollbarLimit,
        currentPage: this.scrollbarPage,
      }
      // if (data) {
      //   this.listShow = []
      //   this.scrollbarPage = 1
      //   searchList.currentPage = 1
      //   if (data === 'all') {
      //     this.fl = ''
      //   }else{
      //     this.fl = data.businessType
      //   }
      //   searchList.businessType = this.fl
      // }
      if (this.typeShow === '0') {
        this.pageList = [1]
        noticeTasks(searchList).toPromise().then((res) => {
          this.loadingbox = false
          this.loading = false
          this.pageList = res.records
          this.scrollbarTotal = res.total
          let list = res.records
          if (list.length > 0) {
            this.dataAssembly(list)
          } else {
            this.loadingbox = false
          }
        })
      } else if (this.typeShow === '1') {
        this.pageList = [1]
        noticeReminds(searchList).toPromise().then((res) => {
          this.loadingbox = false
          this.loading = false
          this.pageList = res.records
          this.scrollbarTotal = res.total
          let list = res.records
          if (list.length > 0) {
            this.dataAssembly(list)
          } else {
            this.loadingbox = false
          }
        })
      } else if (this.typeShow === '2') {
        this.pageList = [1]
        noticeOverdues(searchList).toPromise().then((res) => {
          this.loadingbox = false
          this.loading = false
          this.pageList = res.records
          this.scrollbarTotal = res.total
          let list = res.records
          if (list.length > 0) {
            this.dataAssembly(list)
          } else {
            this.loadingbox = false
          }
        })
      }
    },
    dataAssembly (list) {
      if (list && list.length) {
        for (let i = 0; i < list.length; i++) {
          this.listShow.push(list[i])
        }
        if (this.typeShow === 0) {
          const newArr = this.listShow.reduce(
            (all, next) =>
              all.some((item) => item['id'] == next['id'])
                ? all
                : [...all, next],
            []
          )
          this.listShow = newArr
        }
        this.loadingbox = false
      }
    },
    clickSearch (data, index) {
      this.categoryIndex = index
      this.listShow = []
      this.scrollbarPage = 0
      if (data) {
        this.fl = data.businessType
      }
      this.noticeListFun()
    },
    dateSearch (data) {
      if (data !== null) {
        // this.dateCreat = formatDate(new Date(data[0])) + ' 00:00:00'
        // this.dateEnd = formatDate(new Date(data[1])) + ' 23:59:59'
        this.dateCreat = formatDate(dayjs(data[0])) + ' 00:00:00'
        this.dateEnd = formatDate(dayjs(data[1])) + ' 23:59:59'
      } else {
        this.dateCreat = ''
        this.dateEnd = ''
      }
      this.clickSearch()
    },
    goPath (data) {
      console.log(data, 1234444)
      if (data.businessCode === 'PURCHASE-MA-APPL-REMIND') {
        this.$router.push({ name: 'sparepartMa' })
      } else {
        const url = utils.code2Url(
          data.businessType,
          data.businessCode,
          data.noticeTaskStatus,
          this.typeShow
        )
        if (!url) {
          EventBus.$emit('error', this.$t('workNotification.noRelatedType'))
        } else {
            this.$router.push({
              name: url
            })
          // 产品 船舶检查
        }
      }
    },
    isToday (str) {
      if (str !== null) {
        let d = new Date(str.replace(/-/g, '/'))
        let todaysDate = new Date()
        if (d.setHours(0, 0, 0, 0) == todaysDate.setHours(0, 0, 0, 0)) {
          return formatDate(str, 'HH:mm:ss')
        } else {
          return str
        }
      }
    },
  },
}
</script>

<style lang="scss" scoped>
ul,
li {
  list-style: none;
  margin: 0px;
  padding: 0px;
}
.clear-both {
  clear: both;
}
.boxShow {
  width: 100%;
  padding: 10px;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0px;
}
.table-box {
  width: 100%;
  background-color: #fff;
  height: 50px;
  li {
    float: left;
    position: relative;
    width: 60px;
    height: 50px;
    line-height: 50px;
    margin-left: 30px;
    text-align: center;
    font-size: 14px;
  }
  .table-bottom:before {
    content: '';
    width: 100%;
    position: absolute;
    background-color: #1d6ced;
    height: 2px;
    left: 0;
    bottom: 0;
  }
  .search-time {
    width: 350px;
    float: right;
    margin: 10px 0px;
    margin-right: 30px;
  }
}
.taskType {
  width: 100%;
  background-color: #fff;
  margin-top: 2px;
  margin-bottom: 10px;
  // padding-bottom: 20px;
  li {
    float: left;
    border: 1px solid #6ea0f3;
    border-radius: 5px;
    max-width: 190px;
    padding: 0 5px;
    text-align: center;
    margin-top: 20px;
    margin-left: 20px;
    cursor: pointer;
    font-size: 14px;
    p {
      margin: 8px 0px;
      span {
        color: #e74c3c;
      }
    }
  }
  li:hover {
    background-color: #e4eeff;
    color: #1d6ced;
  }
}
.taskList-box {
  background-color: #fff;
  width: 100%;
  // height: calc(100% - 135px);
  height: 100%;
}
.taskList {
  height: 100%;
  overflow-y: auto;
  li {
    height: 64px;
    width: 100%;
    background-color: #f8f8f8;
    float: left;
    padding: 10px 30px;
    cursor: pointer;
    .taskList-icon {
      width: 34px;
      height: 34px;
      float: left;
      margin-top:5px;
      margin-right: 20px;
    }
    .taskList-font {
      width: calc(100% - 317px);
      float: left;
      height: 44px;
      margin-right: 30px;

      p {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        color: #666666;
        font-size: 14px;
        b {
          color: #333333;
          font-size: 16px;
          // margin-right: 40px;
          display: inline-block;
          min-width: 150px;
          max-width: 290px;
        }
      }
    }
    .taskList-timer {
      width: 100px;
      height: 44px;
      line-height: 44px;
      float: left;
      margin-right: 23px;
      color: #999999;
      overflow: hidden;
    }
    .taskList-btn {
      width: 100px;
      height: 44px;
      float: left;
      line-height: 44px;
      p {
        text-align: center;
        font-size: 16px;
        font-weight: bold;
        color: rgba(30, 107, 237, 0.6);
        margin: 0px;
      }
    }
  }
  li:nth-child(odd) {
    background-color: #fff;
  }
  li:hover {
    background-color: #f2f7ff;
  }
  li:hover .taskList-btn p {
    color: rgba(30, 107, 237, 1);
  }
}
.footer {
  width: 95%;
  text-align: center;
  margin: 0 auto;
  font-size: 14px;
  color: #999999;
}
.footer-box {
  width: 100%;
  height: 30px;
  line-height: 30px;
  padding: 15px 0px;
}
.active {
  background-color: #e4eeff;
  color: #1d6ced;
}
</style>