laws-sinotruk-client/src/views/workCenter/processCenter/table/DoneList.vue

<template>
  <div>
    <!--  搜索区域  -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-row :gutter="24">
          <!--  流程名称  -->
          <a-col :span="6">
            <a-form-item :label="$t('processName')" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input :placeholder="$t('pleaseEnter')+$t('processName')" v-model="queryParam.prcName"></a-input>
            </a-form-item>
          </a-col>
          <!--  流程编号  -->
          <a-col :span="6">
            <a-form-item :label="$t('workCenter.processCenter.processNumber')" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input :placeholder="$t('pleaseEnter')+$t('workCenter.processCenter.processNumber')" v-model="queryParam.prcNum"></a-input>
            </a-form-item>
          </a-col>
          <!--  流程类型  todo：流程类型是字典还是什么后端还没确定  -->
          <a-col :span="6">
            <a-form-item :label="$t('workCenter.processCenter.processType')" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <j-dict-select-tag
                :placeholder="$t('pleaseSelect')+$t('workCenter.processCenter.processType')"
                dict-code="esp_project_status"
                v-model="queryParam.prcType">
              </j-dict-select-tag>
            </a-form-item>
          </a-col>

          <div style="float: right;overflow: hidden;" class="table-page-search-submitButtons">
            <a-button type="primary" @click="searchQuery" icon="search" v-has="'workCenter:processCenter:doneSearch'" style="margin-left: 8px">{{ $t('query') }}</a-button>
            <a-button type="primary" ghost @click="searchReset" icon="reload" style="margin-left: 8px">{{ $t('reset') }}</a-button>
          </div>

        </a-row>
      </a-form>
    </div>

    <div>
      <j-table
        :can-drag="true"
        :scroll="{x: '100%'}"
        ref="table"
        rowKey="id"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="ipagination"
        :loading="loading"
        :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
        @change="handleTableChange">

        <!--    操作栏   -->
        <div slot="action" slot-scope="{record}" class="action-span-cell">
          <!--  查看  -->
          <a @click="handleDetail(record)" class="table-ope-btn" v-has="'workCenter:processCenter:doneDetail'">{{ $t('view') }}</a>
        </div>

      </j-table>
    </div>
  </div>
</template>

<script>
import JTable from '@/components/jero/JTable'
import { JeroListMixin } from '@/mixins/JeroListMixin'

export default {
  name: 'DoneList',
  components: { JTable },
  mixins: [JeroListMixin],
  data () {
    return {
      labelCol: {
        span: 4
      },
      wrapperCol: {
        span: 14
      },
      columns: [
        { // 流程编号
          title: this.$t('workCenter.processCenter.processNumber'),
          align: 'center',
          width: 180,
          dataIndex: 'processNumber',
          scopedSlots: { customRender: 'text' }
        },
        { // 流程类型
          title: this.$t('workCenter.processCenter.processType'),
          align: 'center',
          width: 180,
          dataIndex: 'processType_dictText',
          scopedSlots: { customRender: 'text' }
        },
        { // 流程名称
          title: this.$t('processName'),
          align: 'center',
          width: 180,
          dataIndex: 'processName',
          scopedSlots: { customRender: 'text' }
        },
        { // 发起人
          title: this.$t('workCenter.processCenter.initiator'),
          align: 'center',
          width: 180,
          dataIndex: 'initiator',
          scopedSlots: { customRender: 'text' }
        },
        { // 当前处理人
          title: this.$t('workCenter.processCenter.currentProcessor'),
          align: 'center',
          width: 180,
          dataIndex: 'currentProcessor',
          scopedSlots: { customRender: 'text' }
        },
        { // 接收任务时间
          title: this.$t('workCenter.processCenter.receivingTaskTime'),
          align: 'center',
          width: 180,
          dataIndex: 'receivingTaskTime',
          scopedSlots: { customRender: 'text' }
        },
        { // 完成时间
          title: this.$t('workCenter.processCenter.finishTime'),
          align: 'center',
          width: 180,
          dataIndex: 'finishTime',
          scopedSlots: { customRender: 'text' }
        },
        { // 流程状态
          title: this.$t('workCenter.processCenter.processState'),
          align: 'center',
          width: 180,
          dataIndex: 'processState_dictText',
          scopedSlots: { customRender: 'text' }
        },
        {
          title: this.$t('operation'),
          scopedSlots: { customRender: 'action' },
          align: 'center',
          fixed: 'right',
          width: 200
        }
      ],
      url: {
        list: '/workCenter/getCompletedList'
      }
    }
  },
  methods: {
    handleDetail (record) {
      // 跳转到对应流程页面
      let path = ''
      switch (record.processType) {
        case '':
          path = ''
      }
      this.$router.push({
        path: path,
        query: {
          processId: record.id,
          onlyLook: true
        }
      })
    }
  }
}
</script>

<style scoped>

</style>