medical_lab_ui_mobil/src/views/platform/bpmn/my-draft/index.vue

<template>
  <div :class="{'ibps-fixed-toolbar':checkMode}">
    <van-sticky>
      <van-nav-bar :title="generateTitle($route.name,$route.params.title||$route.meta.title)"
        :left-text="$t('common.button.back')" :right-text="$utils.isNotEmpty(listData)?rightText:''" left-arrow
        @click-left="$router.push({ name: 'dashboard' })" @click-right="toCheckMode()" />
      <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-checkbox-group v-model="checkedIds">
          <van-cell v-for="(item,index) in listData" :key="item.id+index" :title="item.procDefName"
            :label="getTaskDesc(item.subject)" @click="onClick(item,index)">
            <template slot="icon">
              <van-checkbox v-if="checkMode" ref="checkboxes" :name="item.id" class="ibps-mr-10" />
              <ibps-avatar v-else :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>
        </van-checkbox-group>
        <ibps-list-result-page :result-type="resultType" :error-type="errorType" :result-message="resultMessage" />
      </van-list>
    </van-pull-refresh>

    <ibps-toolbar v-show="checkMode" :actions="mainActions" />

    <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" :pro-inst-id="proInstId"
      :def-id="defId" @close="visible => formrenderVisible = visible" @callback="onSearch" />

  </div>

</template>
<script>
  import { myDraft, removeDraft } from '@/api/platform/office/bpmInitiated'

  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 IbpsToolbar from '@/components/ibps-toolbar'
  import IbpsListResultPage from '@/components/ibps-list-result-page'
  import IbpsBpmnFormrenderDialog from '@/business/platform/bpmn/form/dialog'

  export default {
    components: {
      IbpsMoreSearch,
      IbpsTypeTree,
      IbpsAvatar,
      IbpsToolbar,
      IbpsListResultPage,
      IbpsBpmnFormrenderDialog
    },
    mixins: [random, bpmnStatus],
    data() {
      return {
        stateActive: false,
        moreSearchPopup: false,
        typeTreePopup: false,
        searchForms: {
          forms: [
            { prop: 'Q^subject_^SL', label: '事务名称', fieldType: 'text' },
            // { prop: 'Q^proc_def_name_^SL', label: '事务说明', fieldType: 'text' },
            { prop: 'Q^inst.subject_^SL', label: '事务说明', fieldType: 'text' },
            { prop: ['Q^create_time_^DL', 'Q^create_time_^DG'], label: '创建时间', fieldType: 'dateRange', options: { datefmt: 'yyyy-MM-dd' } }
          ]
        },

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

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

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

        checkMode: false,
        checkedIds: [],
        mainActions: [{
          'name': this.$t('common.button.remove'),
          'type': 'danger',
          'callback': this.onRemove
        }],

        proInstId: '',
        defId: '',
        formrenderVisible: false,
        formrenderTitle: ''
      }
    },
    computed: {
      rightText() {
        return this.checkMode ? this.$t('common.button.cancel') : this.$t('common.button.manage')
      },
      selectedIds() {
        return this.checkedIds.join(',')
      }
    },
    methods: {
      generateTitle(name, title) { // generateTitle by vue-i18n
        return i18n.generateTitle(name, title)
      },
      /**
       * 加载数据
       * 
      */
      loadData() {
        this.loading = true
        myDraft(this.getSearcFormData()).then(response => {
          // 处理数据
          ActionUtils.handleListData(this, response.data)
        }).catch((e) => {
          ActionUtils.handleErrorData(this, e)
        })
      },
      /**
       * 获取格式化参数
       */
      getSearcFormData() {
        let params = {}
        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) {
        console.log("params", params, this.typeId);
        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 = ''
      },
      getTaskDesc(v) {
        if (!v.includes('#')) {
          return ''
        }
        return v.split('#')[1] || ''
      },
      // 点击左边显示
      clickType() {
        this.typeTreePopup = true
      },
      clickTypeNode(data) {
        this.typeId = data.id
        this.onMoreSearch({})
      },
      onClick(item, index) {
        if (this.checkMode) {
          this.$refs.checkboxes[index].toggle()
        } else {
          this.proInstId = item.id
          this.defId = item.procDefId

          this.formrenderTitle = item.procDefName
          this.formrenderVisible = true
        }
      },
      onRefreshPage() {
        this.checkedIds = []
        this.checkMode = false
        this.onRefresh()
      },
      toCheckMode() {
        if (this.$utils.isEmpty(this.listData)) {
          return
        }
        if (this.checkMode) {
          // this.show = true
          this.checkedIds = []
        }
        this.checkMode = !this.checkMode
      },
      onRemove() {
        if (this.checkedIds.length === 0) {
          this.$notify({
            type: 'warning',
            message: this.$t('common.dialog.selectedRecords')
          })
          return
        }
        this.$dialog.confirm({
          title: this.$t('common.dialog.warn'),
          message: this.$t('common.operate.makeSure')
        }).then(() => {
          removeDraft({ ids: this.selectedIds }).then(response => {
            this.$notify({
              type: 'success',
              message: '删除草稿成功！'
            })
            this.onRefreshPage()
          }).catch((e) => {
            console.error(e)
          })
        })
      }
    }

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

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