yiliangyiyun-pc-jj/src/views/workNotification/work.vue

<!-- 工作通知模块 任务 -->
<template>
  <div>
    <!-- <ws-common-loading v-if="initLoading"></ws-common-loading> -->
    <div class="work-notification-container">
      <div class="work-notification-flex">
        <span class="work-notification-size">{{ $t('workNotification.busModule') }}{{$t('common.colon')}}</span>
        <div class="work-notification-top">
         <el-badge :value="number.warehouse"
                    :hidden="number.warehouse <= 0"
                    class="item"
                    v-if="crewFlag">
            <el-button @click="switchTab(notificationType.WAREHOUSE)"
                       size="small"
                       :class="
                `notification-btn ${tabIndex === notificationType.WAREHOUSE &&
                  'notification-button'}`
              ">
              {{ $t('workNotification.warehouse') }}
            </el-button>
          </el-badge>

          <!-- 体系 -->
          <el-badge :value="number.sale"
                    :hidden="number.sale <= 0"
                    class="item"
                    v-if="ismFlag">
            <el-button @click="switchTab(notificationType.SALE)"
                       size="small"
                       :class="
                `notification-btn ${tabIndex === notificationType.SALE &&
                  'notification-button'}`
              ">
              {{ $t('workNotification.ism') }}
            </el-button>
          </el-badge>

          <!-- 采购管理PROCUREMENT -->
          <el-badge :value="number.procurement"
                    :hidden="number.procurement <= 0"
                    class="item"
                    v-if="financeFlag">
            <el-button @click="switchTab(notificationType.PROCUREMENT)"
                       size="small"
                       :class="
                `notification-btn ${tabIndex === notificationType.PROCUREMENT &&
                  'notification-button'}`
              ">
              {{ $t('workNotification.finance') }}
            </el-button>
          </el-badge>

          <!-- 统计报表 -->
          <el-badge :value="number.report"
                    :hidden="number.report <= 0"
                    class="item"
                    v-if="servicerFlag">
            <el-button @click="switchTab(notificationType.REPORT)"
                       size="small"
                       :class="
                `notification-btn ${tabIndex === notificationType.REPORT &&
                  'notification-button'}`
              ">
              {{ $t('workNotification.report') }}
            </el-button>
          </el-badge>
        </div>
      </div>
      <div class="work-notification-time">
        <span class="work-notification-size1">{{ $t('workNotification.noticeTime') }}{{$t('common.colon')}}</span>
        <div class="block work-top">
          <el-date-picker v-model="dateRange"
                          :picker-options="pickerOptions"
                          type="daterange"
                          range-separator="~"
                          :start-placeholder="$t('workNotification.startPlaceholder')"
                          :end-placeholder="$t('workNotification.endPlaceholder')"
                          value-format="yyyy-MM-dd"
                          @change="getWorkList" />
        </div>
      </div>
    </div>
    <div id="message"
         class="scroll-container"
         v-infinite-scroll="getWorkListAppend">
      <WorkNotificationItem v-for="(item, index) in workNotificationList"
                            :key="'key' + index"
                            :info="item"
                            @handleLater="getWorkList" />
      <div v-if="workNotificationList.length === 0 && !initLoading"
           class="img-bg">
        <div class="box">
          <img src="../../assets/images/onData.png"
               alt="" />
          <div>{{ $t('workNotification.empty') }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import WorkNotificationItem from './components/WorkNotificationItem'
import { getQueryPage, countAmount } from '@/model/indexRx'
import notificationType from './types/notificationType'
import { EventBus } from 'base-core-lib'
export default {
  name: 'Work',
  components: {
    WorkNotificationItem
  },
  data () {
    return {
      navigationFlag: false,
      materielFlag: false,
      sparepartFlag: false,
      repairFlag: false,
      maintainFlag: false,
      servicerFlag: false,
      oilFlag: false, //油品
      monitorManagerFlag: false,
      certificateFlag: false,
      purchasFlag: false,
      crewFlag: false,
      financeFlag: false,
      vesselNoonReportFlag: false,
      ismFlag: false,
      notificationType: notificationType,
      dateRange: [], // 通知时间的双向绑定
      tabIndex: '',
      // notificationType.ALL
      tabIndexs: [],
      pickerOptions: {},
      initLoading: false,
      pageSize: 20,
      currentPage: 1,
      total: 10,
      order: '',
      businessType: '',
      createDateStart: '',
      createDateEnd: '',
      // 动态显示角标
      number: {
        // 总数
        sum: 0,
        //通知通函
        circular: 0,
        // 船舶证书
        certificate: 0,
        // 采购管理
        purchas: 0,
        // 船员管理
        crew: 0,
        // 财务管理
        finance: 0,
        //船舶午报
        vesselNoonReport: 0,
        // 体系
        ism: 0,
        monitor: 0,
        //油品
        oil: 0,
        // 服务商
        servicer: 0,
        //维保
        maintain: 0,
        //修船
        repair: 0,
        //备件
        sparepart: 0,
        //物料
        materiel: 0,
        //航海
        navigation: 0
      },
      workNotificationList: [] // 初始化列表数组
    }
  },
  computed: {},
  mounted () {
    this.getAmount()
    this.getWorkList()
  },

  methods: {
    // tab切换
    switchTab (index) {
      this.tabIndex = index === 'all' ? this.tabIndexs.join(',') : index
      this.dateRange = []
      this.getWorkList()
    },

    // 通知时间的函数
    getWorkList () {
      // this.elLoading()
      this.initLoading = true
      this.currentPage = 1
      const time = this.nowFormatDate('YYYY-MM-DD HH:mm:ss')
      const params = {
        staffId: sessionStorage.getItem('ws-pf_userId'),
        currentPage: this.currentPage,
        pageSize: this.pageSize,
        acceptanceTypes: 'NEED_HANDLE,RETURN',
        businessType: this.tabIndex,
        showTime: time
      }

      // 调用时间
      if (this.dateRange != null && this.dateRange.length > 0) {
        params.createDateStart =
          this.dateRange[0] === undefined ? '' : this.dateRange[0] + ' 00:00:00'
        params.createDateEnd =
          this.dateRange[1] === undefined ? '' : this.dateRange[1] + ' 23:59:59'
      }

      getQueryPage(params).toPromise()
        .then(response => {
          this.initLoading = false
          // this.elLoading('end')
          this.workNotificationList = []
          this.total = response.total
          this.workNotificationList = response.records
          if (this.workNotificationList.length >= this.pageSize) {
            this.currentPage += 1
          }
        })
        .catch((error) => {
          EventBus.$emit('error', error || this.$t('common.error'))
        })
    },
    // 分页加载方法
    getWorkListAppend () {
      if (
        this.workNotificationList.length >= this.total ||
        this.currentPage <= 1
      ) {
        return
      }
      const time = this.nowFormatDate('YYYY-MM-DD HH:mm:ss')
      const params = {
        staffId: sessionStorage.getItem('ws-pf_userId'),
        currentPage: this.currentPage,
        pageSize: this.pageSize,
        acceptanceTypes: 'NEED_HANDLE,RETURN',
        businessType: this.tabIndex,
        showTime: time
      }

      // 调用时间
      if (this.dateRange != null && this.dateRange.length > 0) {
        params.createDateStart =
          this.dateRange[0] === undefined ? '' : this.dateRange[0] + ' 00:00:00'
        params.createDateEnd =
          this.dateRange[1] === undefined ? '' : this.dateRange[1] + ' 23:59:59'
      }

      getQueryPage(params).toPromise()
        .then(response => {
          this.total = response.total
          this.workNotificationList = this.workNotificationList.concat(
            response.records
          )
          if (this.workNotificationList.length >= this.pageSize) {
            this.currentPage += 1
          }
        })
        .catch((error) => {
          EventBus.$emit('error', error || this.$t('common.error'))
        })
    },

    // 获取工作类型 分类总数
    getAmount () {
      if (this.permissionIf('crewManagement')) {
        this.tabIndexs.push(notificationType.CREW)
        this.crewFlag = true
      }
      if (this.permissionIf('certificateManagement')) {
        this.tabIndexs.push(notificationType.CERTIFICATE)
        this.certificateFlag = true
      }
      if (this.permissionIf('procurement')) {
        this.tabIndexs.push(notificationType.PURCHASE)
        this.purchasFlag = true
      }
      if (this.permissionIf('financeManagement')) {
        this.tabIndexs.push(notificationType.FINANCE)
        this.financeFlag = true
      }
      if (this.permissionIf('dynamicRport.report.review')) {
        this.tabIndexs.push(notificationType.VESSEL_NOON_REPORT)
        this.vesselNoonReportFlag = true
      }
      if (this.permissionIf('ismManager')) {
        this.tabIndexs.push(notificationType.ISM)
        this.ismFlag = true
      }
      if (this.permissionIf('monitorManager')) {
        this.tabIndexs.push(notificationType.MONITOR)
        this.monitorManagerFlag = true
      }

      if (this.permissionIf('oil')) {
        this.tabIndexs.push(notificationType.OIL)
        this.oilFlag = true
      }

      if (this.permissionIf('servicer')) {
        this.tabIndexs.push(notificationType.SERVICER)
        this.servicerFlag = true
      }

      if (this.permissionIf('maintenanceManagement')) {
        this.tabIndexs.push(notificationType.MAINTAIN)
        this.maintainFlag = true
      }

      if (this.permissionIf('repairManager')) {
        this.tabIndexs.push(notificationType.REPAIR)
        this.repairFlag = true
      }

      if (this.permissionIf('spareParts')) {
        this.tabIndexs.push(notificationType.SPAREPART)
        this.sparepartFlag = true
      }

      if (this.permissionIf('materiel')) {
        this.tabIndexs.push(notificationType.MATERIEL)
        this.materielFlag = true
      }

      if (this.permissionIf('navigationManagement')) {
        this.tabIndexs.push(notificationType.NAVIGATION)
        this.navigationFlag = true
      }
      // 通函通知没有权限，都能看见
      this.tabIndexs.push(notificationType.CIRCULAR)

      this.tabIndex = this.tabIndexs.join(',')
      const time = this.nowFormatDate('YYYY-MM-DD HH:mm:ss')
      const params = {
        staffId: sessionStorage.getItem('ws-pf_userId'),
        acceptanceTypes: 'NEED_HANDLE,RETURN',
        isTask: 1,
        showTime: time
      }
      if (this.dateRange.length > 0) {
        params.createDateStart =
          this.dateRange[0] === undefined ? '' : this.dateRange[0] + ' 00:00:00'
        params.createDateEnd =
          this.dateRange[1] === undefined ? '' : this.dateRange[1] + ' 23:59:59'
      }
      countAmount(params).toPromise()
        .then(res => {
          // this.number.sum = res.data.sum;
          this.number.sum = 0
          const content = res.content
          content.forEach(item => {
            //   // if (item.businessType === notificationType.CREW) {
            //   //   // 船员管理
            //   //   debugger
            //   //   this.number.crew = item.number;
            //   //   this.number.sum += parseInt(item.number);
            //   // } else if (item.businessType === notificationType.FINANCE) {
            //   //   // 财务管理
            //   //   this.number.finance = item.number;
            //   //   this.number.sum += parseInt(item.number);
            //   // } else if (item.businessType === notificationType.PURCHASE) {
            //   //   // 采购管理
            //   //   this.number.purchas = item.number;
            //   //   this.number.sum += parseInt(item.number);
            //   // } else if (item.businessType === notificationType.CERTIFICATE) {
            //   //   // 船舶证书
            //   //   this.number.certificate = item.number;
            //   //   this.number.sum += parseInt(item.number);
            //   // } else if (item.businessType === notificationType.VESSEL_NOON_REPORT) {
            //   //   // 船舶午报
            //   //   this.number.vesselNoonReport = item.number;
            //   //   this.number.sum += parseInt(item.number);
            //   // }
            if (item.businessType === 'WAREHOUSE') {
              this.number.warehouse = item.number
            } else if (item.businessType === 'PROCUREMENT') {
              this.number.procuement = item.number
            } else if (item.businessType === 'REPORT') {
              this.number.report = item.number
            } else if (item.businessType === 'SALE') {
              this.number.sale = item.number
            }

            this.tabIndexs.forEach(ite => {
              if (item.businessType === ite) {
                this.number.sum += parseInt(item.number)
              }
            })
          })
        })
        .catch(error => {
          EventBus.$emit('error', error)
        })
    }
  }
}
</script>

<style scoped>
.work-notification-container {
  margin: 10px 10px 0 10px;
  padding: 30px 0 20px 20px;
  background: #fff;
}

.work-notification-flex {
  display: flex;
}

.work-notification-size {
  font-size: 14px;
  color: #666666;
  width: 100px;
}

.work-notification-top {
  margin: -20px 0 0 5px;
}

.notification-btn {
  background: #ffffff;
  border: none;
  font-size: 14px;
  color: #333333;
  width: 100px;
}

.notification-btn:hover {
  color: #1d6ced;
}

.notification-button {
  background: #eee !important;
  border: 1px solid #eee !important;
}

.work-notification-time {
  display: flex;
}

.work-notification-size1 {
  font-size: 14px;
  color: #666666;
  padding-top: 20px;
}

.work-notification-all {
  font-size: 14px;
  color: #444;
  position: relative;
  top: -12px;
  margin-left: 5px;
}

.item {
  margin-top: 10px;
  margin-right: 62px;
}

.el-date-editor.el-input,
.el-date-editor.el-input__inner {
  width: 483px;
  height: 32px;
  border: 1px solid #cccccc;
}

.work-top {
  padding-top: 10px;
  margin-left: 5px;
}

.scroll-container {
  height: calc(100vh - 180px);
  overflow-y: scroll;
  overflow-x: hidden;
  padding-left: 10px;
  padding-right: 8px;
}

.img-bg {
  background-color: #fff;
  text-align: center;
  margin-top: 10px;
  height: calc(100% - 10px);
  line-height: 100%;
  position: relative;
}

.img-bg .box {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -145px;
  margin-left: -236px;
}

.img-bg .box div {
  margin-top: 20px;
  font-size: 14px;
  color: #333;
}
</style>