medical_lab_ui_mobil/src/views/platform/message/inner/receive.vue

<template>
  <div>
    <van-sticky>
      <van-nav-bar
        :title="generateTitle($route.name,$route.params.title||$route.meta.title)"
        @click-left="$router.push({ name: 'dashboard' })"
      />
      <van-tabs v-show="tabDatas.length>1" v-model="tabActive" color="#3396FB" line-width="40" class="ibps-border-bm" @click="onClickTab">
        <van-tab v-for="data in tabDatas" :key="data.name" :name="data.name" :title="data.title" >
          <template #title>
              <div class="badge">
                {{data.title}}
                <div class="icon">{{ data.val }}</div>
              </div>
          </template>
        </van-tab>
      </van-tabs>
      <van-search
        v-model="subject"
        show-action
        placeholder="请输入主题搜索关键词"
        @search="onSearch"
      >
        <template #action>
          <van-icon name="filter-o" :class="{'ibps-active':stateActive}" @click="clickMoreSearch" />
        </template>
      </van-search>
    </van-sticky>
    <div class="ibps-blank-bar" />
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
      <van-list v-model="loading" :finished="finished" @load="loadData">
        <van-cell
          v-for="(item,index) in listData"
          :key="item.id+index"
          :title="item.subject"
          :label="item.ownerName"
          size="large"
          @click="onClick(item,index)"
        >
          <template slot="icon">
            <ibps-avatar
              :icon="_randomIcon(index)"
              :text="item.name"
              :bg-color="_randomColor(index)"
              radius="4"
              icon-prefix="ibps-icon"
              class="ibps-mr-10"
            />
          </template>
          <span>{{ item.createTime }}</span>
          <div>
            <van-tag
              size="medium"
              :color="item.messageType | optionsFilter(typeOptions,'type')"
              :text-color="item.messageType | optionsFilter(typeOptions,'type') "
            >
              {{ item.messageType| optionsFilter(typeOptions) }}</van-tag>
          </div>
        </van-cell>
        <ibps-list-result-page
          :result-type="resultType"
          :error-type="errorType"
          :result-message="resultMessage"
        />
      </van-list>
    </van-pull-refresh>
    <ibps-more-search
      :show="moreSearchPopup"
      :search-forms="searchForms"
      @callback="onMoreSearch"
      @close="show => moreSearchPopup = show"
      @reset-form="resetForm"
    />
    <detail
      :id="innerMessageId"
      :visible="formVisible"
      @callback="onRefresh"
      @close="visible => formVisible = visible"
    />
  </div>
</template>
<script>
import { getMsgList, getMyMsgListAll } from '@/api/platform/message/innerMessage'
import { typeOptions } from './constants'
import ActionUtils from '@/utils/action'
import i18n from '@/utils/i18n'
import random from '@/mixins/random'
import IbpsMoreSearch from '@/components/ibps-more-search'
import IbpsAvatar from '@/components/ibps-avatar'
import IbpsListResultPage from '@/components/ibps-list-result-page'
import Detail from './detail'

export default {
  components: {
    IbpsMoreSearch,
    IbpsAvatar,
    IbpsListResultPage,
    Detail
  },
  mixins: [random],
  data() {
    return {
      typeOptions: typeOptions,
      stateActive: false,
      moreSearchPopup: false,
      searchForms: {
        forms: [
          { prop: 'Q^subject^SL', label: '主题', fieldType: 'text' },
          { prop: 'Q^ownerName^SL', label: '发送人', fieldType: 'text' },
          { prop: 'Q^messageType.^S', label: '消息类型', fieldType: 'checker', cols: 3, valueKey: 'value', options: typeOptions },
          { prop: 'Q^content^SL', label: '消息内容', fieldType: 'text' },
          { prop: ['Q^beginreceiveTime^DL', 'Q^endreceiveTime^DG'], label: '发送时间', fieldType: 'dateRange', options: { datefmt: 'yyyy-MM-dd' }}
        ]
      },
      tabActive: '2',
      tabDatas: [{
        name: '2',
        title: '全部'
      }, {
        name: '0',
        title: '未读'
      }, {
        name: '1',
        title: '已读'
      }],
      subject: '',
      moreParams: {},

      listData: [],
      pagination: {},
      sorts: {},

      loading: false,
      finished: false,
      refreshing: false,
      resultType: 'init',
      errorType: null,
      resultMessage: null,

      innerMessageId: '',
      formVisible: false
    }
  },
  methods: {
    generateTitle(name, title) { // generateTitle by vue-i18n
      return i18n.generateTitle(name, title)
    },
    /**
     * 加载数据
     */
    loadData() {
      this.loading = true
      getMyMsgListAll(this.getSearcFormData()).then(response => {
        // 处理数据
        ActionUtils.handleListData(this, response.data)
        const index = this.tabDatas.findIndex(i=>i.name==this.tabActive)
        let a = this.tabDatas[index]
        a['val'] = response.data.pageResult.totalCount
        this.$set(this.tabDatas,index,a)
      }).catch((e) => {
        ActionUtils.handleErrorData(this, e)
      })
      this.totalCount()
    },
    totalCount(){
        let mid = []
        this.tabDatas.forEach((e,i)=>{
          if(e.name!=this.tabActive){
            mid.push({name:e.name,index:i})
          }
        })
        mid.forEach((e,i)=>{
          getMyMsgListAll(this.getSearcFormData(e.name))
            .then(response => {
              // this.tabDatas[e.index]['val']=response.data.pageResult.totalCount
              let a = this.tabDatas[e.index]
              a['val'] = response.data.pageResult.totalCount
              this.$set(this.tabDatas,e.index,a)
            })
            .catch(e => {
              let a = this.tabDatas[e.index]
              a['val'] = 0
              this.$set(this.tabDatas,e.index,a)
            })
        })
    },
    /**
     * 获取格式化参数
     */
    getSearcFormData(t) {
      let params = {}

      params['Q^isRead^SN'] =t?t: this.tabActive
      if (this.$utils.isNotEmpty(this.subject)) {
        params['Q^subject^SL'] = this.subject
      }
      if (this.$utils.isNotEmpty(this.moreParams)) {
        params = Object.assign(params, this.moreParams)
      }

      return ActionUtils.formatParams(
        params,
        this.pagination,
        this.sorts)
    },
    /**
     * 下拉刷新
     */
    onRefresh() {
      this.refreshing = true
      this.finished = false
      this.loading = true
      this.onSearch()
    },
    /**
     * 查询
     */
    onSearch() {
      this.stateActive = false
      ActionUtils.initListData(this)
      this.loadData()
    },
    /**
     * 高级查询
     */
    onMoreSearch(params) {
      if (this.$utils.isNotEmpty(this.typeId)) {
        params['Q^type_id_^SL'] = this.typeId
      }
      this.moreParams = params
      this.onSearch()
      if (this.$utils.isNotEmpty(params)) {
        this.stateActive = true
      }
    },
    /**
     * 弹窗更多查询条件
     */
    clickMoreSearch() {
      this.moreSearchPopup = true
      this.stateActive = false
    },
    /**
     * 重置表单
     */
    resetForm() {
      this.typeId = ''
    },

    onClick(item) {
      this.innerMessageId = item.id
      this.formVisible = true
    },
    onClickTab(){
      this.title = ''
      this.finished = false
      this.loading = true
      this.onSearch()
    }
  }

}
</script>
<style lang="scss" scoped>
.badge{
  display: flex;
  align-items:center;
  .icon{
    border-radius: 10px;
    color: #FFF;
    display: inline-block;
    font-size: 10px;
    height: 14px;
    line-height: 14px;
    padding: 0 4px;
    text-align: center;
    white-space: nowrap;
    border: 1px solid #FFF;
    background-color: #F56C6C;
  }
}
</style>