kd-aiot-frontend-wt/src/views/bpm/done/index.vue

<template>
  <div class="ele-body">
    <el-card shadow="never">
      <div class="filter-container">
        <el-form
          label-width="100px"
          class="ele-form-search"
          @keyup.enter.native="reload"
          @submit.native.prevent
        >
          <el-row :gutter="15">
            <el-col v-bind="styleResponsive ? { lg: 4, md: 12 } : { span: 4 }">
              <el-form-item label="关键字：" prop="keyword">
                <el-input clearable v-model.trim="params.keyword"></el-input>
              </el-form-item>
            </el-col>
            <el-col v-bind="styleResponsive ? { lg: 4, md: 12 } : { span: 4 }">
              <el-form-item label="流程名：" prop="name">
                <el-input clearable v-model.trim="params.name"></el-input>
              </el-form-item>
            </el-col>
            <el-col v-bind="styleResponsive ? { lg: 4, md: 12 } : { span: 4 }">
              <el-form-item label="结果：" prop="result">
                <!-- <el-select
                  v-model="params.status"
                  placeholder="请选择状态"
                  clearable
                >
                  <el-option
                    v-for="dict in statusList"
                    :key="dict.value"
                    :label="dict.label"
                    :value="dict.value"
                  />
                </el-select> -->
                <DictSelection
                  dictName="流程实例的结果"
                  clearable
                  v-model="params.result"
                >
                </DictSelection>
              </el-form-item>
            </el-col>
            <el-col v-bind="styleResponsive ? { lg: 6, md: 12 } : { span: 6 }">
              <el-form-item label="创建时间：" prop="createTime">
                <el-date-picker
                  v-model="params.createTime"
                  style="width: 100%"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  type="daterange"
                  range-separator="-"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  :default-time="['00:00:00', '23:59:59']"
                />
              </el-form-item>
            </el-col>
            <el-col
              style="display: flex; justify-content: flex-end"
              v-bind="styleResponsive ? { lg: 4, md: 12 } : { span: 4 }"
            >
              <div class="ele-form-actions">
                <el-button
                  type="primary"
                  icon="el-icon-search"
                  class="ele-btn-icon"
                  @click="reload"
                >
                  查询
                </el-button>
                <el-button @click="reset">重置</el-button>
              </div>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <ele-pro-table
        ref="table"
        :columns="columns"
        :datasource="datasource"
        @columns-change="handleColumnChange"
        :cache-key="cacheKeyUrl"
      >
        <template v-slot:result="{ row }">
          <el-tag
            size="medium"
            :type="
              getTimelineItemType(getDictValue('流程实例的结果', row.result))
            "
          >
            {{ getDictValue('流程实例的结果', row.result) }}
          </el-tag>
        </template>
        <template v-slot:durationInMillis="{ row }">
          {{ getDateTime(row.durationInMillis) }}
        </template>
        <template v-slot:name="{ row }">
          <el-link type="primary" :underline="false" @click="handleAudit(row)">
            {{ row.name }}</el-link
          >
        </template>
        <!-- 操作列 -->
        <template v-slot:action="{ row }">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleAudit(row)"
            >详情</el-button
          >
        </template>
      </ele-pro-table>
    </el-card>
    <detail ref="detailRef"></detail>
  </div>
</template>

<script>
  import dictMixins from '@/mixins/dictMixins';
  import { getDoneTaskPage } from '@/api/bpm/task';
  import { getDate } from '@/utils/dateUtils';
  import detail from './detailDialog.vue';
  import tabMixins from '@/mixins/tableColumnsMixin';

  // 默认表单数据
  const defaultParams = {
    status: '',
    name: ''
  };
  export default {
    name: 'BpmDoneTask',
    components: { detail },
    mixins: [dictMixins,tabMixins],
    data() {
      return {
        cacheKeyUrl:'wt-done',
        // 遮罩层
        loading: true,
        params: { ...defaultParams },
        statusList: [],
        columns: [
          {
            columnKey: 'index',
            label: '序号',
            type: 'index',
            width: 55,
            align: 'center',
            showOverflowTooltip: true,
            fixed: 'left'
          },
          {
            prop: 'processInstance.processTypeName',
            label: '流程分类',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 150
          },
          {
            prop: 'processInstance.name',
            label: '流程名称',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 150
          },
          {
            prop: 'name',
            slot: 'name',
            label: '任务名称',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 150
          },
          {
            prop: 'businessCode',
            label: '单据编码',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 120
          },
          {
            prop: 'businessName',
            label: '单据名称',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 120
          },
          {
            prop: 'businessScope.warehouseName',
            label: '审批仓库',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 120
          },
          {
            prop: 'businessType',
            label: '单据类型',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 120
          },
          {
            prop: 'processInstance.startUserNickname',
            label: '流程发起人',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 120
          },
          {
            prop: 'result',
            slot: 'result',
            label: '结果',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 100
          },
          {
            prop: 'reason',
            label: '审批意见',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 200
          },

          {
            prop: 'createTime',
            label: '创建时间',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 180
          },
          {
            prop: 'endTime',
            label: '审批时间',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 180
          },
          {
            prop: 'durationInMillis',
            slot: 'durationInMillis',
            label: '耗时',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 130
          }
          // {
          //   columnKey: 'action',
          //   label: '操作',
          //   width: 230,
          //   align: 'center',
          //   resizable: false,
          //   slot: 'action',
          //   showOverflowTooltip: true,
          //   fixed: 'right'
          // }
        ]
      };
    },
    computed: {
      // 是否开启响应式布局
      styleResponsive() {
        return this.$store.state.theme.styleResponsive;
      }
    },
    created() {},
    methods: {
      /* 表格数据源 */
      datasource({ page, limit, where, order }) {
        if (this.params.createTime?.length) {
          this.params['beginCreateTime'] = this.params.createTime[0];
          this.params['endCreateTime'] = this.params.createTime[1];
        }
        return getDoneTaskPage({
          pageNo: page,
          pageSize: limit,
          ...this.params
        });
      },
      /* 刷新表格 */
      reload(where) {
        this.$refs.table.reload({ page: 1, where });
      },

      /*  重置 */
      reset() {
        this.params = { ...defaultParams };
        this.reload();
      },
      /** 处理审批按钮 */
      handleAudit(row) {
        this.$refs.detailRef.open(row);
      },
      getTimelineItemType(result) {
        if (result === '通过') {
          return 'success';
        }
        if (result === '不通过') {
          return 'danger';
        }
        if (result === '取消') {
          return 'info';
        }
        if (result === '处理中') {
          return 'warning';
        }

        return '';
      },
      getDateTime(ms) {
        return getDate(ms);
      }
    }
  };
</script>