medical_lab_ui_mobil/src/views/platform/bpmn/completed/index.vue

<template>
  <div>
    <van-sticky>
      <van-nav-bar :title="generateTitle($route.name,$route.params.title||$route.meta.title)"
        :left-text="$t('common.button.back')" left-arrow @click-left="$router.push({ name: 'dashboard' })" />
      <van-search v-model="subject" show-action placeholder="请输入搜索关键词" @search="onSearch">
        <template #left>
          <van-icon name="bars" :class="{'ibps-active':$utils.isNotEmpty(typeId)}" class="ibps-pr-5"
            @click="clickType" />
        </template>
        <template #action>
          <van-icon name="filter-o" :class="{'ibps-active':stateActive}" @click="clickMoreSearch" />
        </template>
      </van-search>
    </van-sticky>
    <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.procDefName"
          :label="getTaskDesc(item.subject)" 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|formatRelativeTime }}</span>
          <div>
            <!-- <van-tag plain :type=" item.status | optionsFilter(bpmnStatusOptions,'type')">{{ item.status | optionsFilter(bpmnStatusOptions) }}</van-tag> -->
            <van-tag size="medium"
              :color="item.status | optionsFilter(bpmnStatusOptions,'type') | optionsFilter(colorOptions,'color','type')"
              :text-color="item.status | optionsFilter(bpmnStatusOptions,'type') | optionsFilter(colorOptions,'textColor','type')">
              {{ item.status| optionsFilter(bpmnStatusOptions) }}</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" />

    <ibps-type-tree v-model="typeTreePopup" title="流程分类" category-key="FLOW_TYPE" @node-click="clickTypeNode"
      @close="visible => typeTreePopup = visible" />

    <ibps-bpmn-formrender-dialog :visible="formrenderVisible" :title="formrenderTitle" :inst-id="instId"
      @close="visible => formrenderVisible = visible" />
  </div>
</template>
<script>
  import { handled } from '@/api/platform/office/bpmReceived'

  import ActionUtils from '@/utils/action'
  import i18n from '@/utils/i18n'
  import random from '@/mixins/random'
  import bpmnStatus from '@/mixins/bpmnStatus'

  import IbpsMoreSearch from '@/components/ibps-more-search'
  import IbpsTypeTree from '@/business/platform/cat/type/tree'
  import IbpsAvatar from '@/components/ibps-avatar'
  import IbpsListResultPage from '@/components/ibps-list-result-page'
  import IbpsBpmnFormrenderDialog from '@/business/platform/bpmn/form/dialog'

  export default {
    components: {
      IbpsMoreSearch,
      IbpsTypeTree,
      IbpsAvatar,
      IbpsListResultPage,
      IbpsBpmnFormrenderDialog
    },
    mixins: [random, bpmnStatus],
    data() {
      return {
        stateActive: false,
        moreSearchPopup: false,
        typeTreePopup: false,
        searchForms: {
          forms: [

            { prop: 'Q^inst.subject_^SL', label: '事务名称', fieldType: 'text' },
            // { prop: 'Q^inst.proc_def_name_^SL', label: '事务说明', fieldType: 'text' },
            { prop: 'Q^inst.subject_^SL', label: '事务说明', fieldType: 'text' },
            { prop: ['Q^inst.create_time_^DL', 'Q^inst.create_time_^DG'], label: '创建时间', fieldType: 'dateRange', options: { datefmt: 'yyyy-MM-dd' } },
            {
              prop: 'Q^inst.status_^S', label: '状态', fieldType: 'checker', cols: 3, options: [
                { value: 'all', label: '全部' },
                { value: 'end', label: '结束' },
                { value: 'manualend', label: '人工结束' }
              ]
            }
          ]
        },

        subject: '',
        typeId: '',
        checker: '',
        moreParams: {},

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

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

        instId: '',
        formrenderVisible: false,
        formrenderTitle: ''
      }
    },
    methods: {
      generateTitle(name, title) { // generateTitle by vue-i18n
        return i18n.generateTitle(name, title)
      },
      /**
       * 加载数据
       */
      loadData() {
        this.loading = true
        handled(this.getSearcFormData()).then(response => {
          // 处理数据
          ActionUtils.handleListData(this, response.data)
        }).catch((e) => {
          ActionUtils.handleErrorData(this, e)
        })
      },
      /**
       * 获取格式化参数
       */
      getSearcFormData() {
        let params = { 'end': '1' }
        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 = ''
        this.checker = ''
      },
      clickType() {
        this.typeTreePopup = true
      },
      clickTypeNode(data) {
        this.typeId = data.id
        this.onMoreSearch({})
      },
      getTaskDesc(v) {
        if (!v.includes('#')) {
          return ''
        }
        return v.split('#')[1] || ''
      },
      onClick(item) {
        this.instId = item.id
        this.formrenderTitle = item.procDefName
        this.formrenderVisible = true
      }
    }

  }
</script>
<style lang="scss" scoped>
  ::v-deep .van-cell__title {
    width: 65%;

    .van-cell__label {
      overflow-wrap: break-word;
    }
  }
</style>