kd-aiot-frontend-wt/src/views/bpm/carbonCopy/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: 6, md: 12 } : { span: 6 }">
              <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: 6, md: 12 } : { span: 6 }">
              <el-form-item label="结果：" prop="result">
                <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 v-bind="styleResponsive ? { lg: 6, md: 12 } : { span: 6 }">
              <el-form-item label="是否已读：" prop="isRead">
                <el-select style="width: 100%" v-model="params.isRead" placeholder="请选择">
                  <el-option label="已读" value="1"></el-option>
                  <el-option label="未读" value="0"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col
              style="display: flex; justify-content: flex-end"
              v-bind="styleResponsive ? { lg: 24, md: 24 } : { span: 6 }"
            >
              <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"
        cache-key="systemRoleTable5"
      >
        <template v-slot:result="{ row }">
          <el-tag
            size="medium"
            :type="
              getTimelineItemType(getDictValue('流程实例的结果', row.result))
            "
          >
            {{ getDictValue('流程实例的结果', row.result) }}
          </el-tag>
        </template>
        <template v-slot:processResult="{ row }">
          <el-tag
            size="medium"
            :type="
              getTimelineItemType(
                getDictValue('流程实例的结果', row.processResult)
              )
            "
          >
            {{ getDictValue('流程实例的结果', row.processResult) }}
          </el-tag>
        </template>

        <template v-slot:durationInMillis="{ row }">
          {{ getDateTime(row.durationInMillis) }}
        </template>
        <template v-slot:name="{ row }">
          <span class="dot" v-if="row.isRead == 0"></span>
          <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 { ccPage, ccReaderTask } from '@/api/bpm/task';
  import { getDate } from '@/utils/dateUtils';
  import detail from '@/views/bpm/done/detailDialog.vue';

  // 默认表单数据
  const defaultParams = {
    status: '',
    name: ''
  };
  export default {
    name: 'BpmDoneTask',
    components: { detail },
    mixins: [dictMixins],
    data() {
      return {
        // 遮罩层
        loading: true,
        params: { ...defaultParams },
        statusList: [],
        columns: [
          {
            columnKey: 'index',
            label: '序号',
            type: 'index',
            width: 55,
            align: 'center',
            showOverflowTooltip: true,
            fixed: 'left'
          },
          {
            prop: 'processTypeName',
            label: '流程分类',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 150
          },
          {
            prop: 'taskName',
            label: '当前节点名称',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 150
          },
          {
            prop: 'name',
            slot: 'name',
            label: '流程名称',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 150
          },
          {
            prop: 'vals.businessCode',
            label: '单据编码',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 120
          },
          {
            prop: 'vals.businessName',
            label: '单据名称',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 120
          },
          {
            prop: 'vals.businessType',
            label: '单据类型',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 120
          },
          {
            prop: 'vals.userName',
            label: '流程发起人',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 120
          },
          {
            prop: 'result',
            slot: 'result',
            label: '当前节点结果',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 100
          },
          {
            prop: 'processResult',
            slot: 'processResult',
            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
          },
          {
            prop: 'isRead',
            label: '是否已读',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 130,
            formatter: (row) => {
              return row.isRead == 1 ? '已读' : '未读';
            }
          }
        ]
      };
    },
    computed: {
      // 是否开启响应式布局
      styleResponsive() {
        return this.$store.state.theme.styleResponsive;
      }
    },
    created() {},
    methods: {
      /* 表格数据源 */
      datasource({ page, limit, where, order }) {
        return ccPage({
          pageNum: page,
          size: limit,
          ...this.params
        });
      },
      /* 刷新表格 */
      reload(where) {
        this.$refs.table.reload({ page: 1, where });
      },

      /*  重置 */
      reset() {
        this.params = { ...defaultParams };
        this.reload();
      },
      /** 处理审批按钮 */
      async handleAudit(row) {
        const readStatus = await ccReaderTask({
          id: row.id
        });

        console.log('readStatus~~', readStatus);
        if(readStatus) {
          row.isRead = 1;
        }
        const params = {
          ...row,
          processInstance: {
            id: row.processInstanceId
          },
          businessId:row.vals.businessId,
          pcViewRouter: row.pcViewRouter
        }
        // this.$refs.detailRef.open({
        //   processInstance: {
        //     id: row.processInstanceId
        //   },
        //   businessId:row.vals.businessId,
        //   pcViewRouter: row.pcViewRouter
        // });
        this.$refs.detailRef.open(params);
      },
      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>

<style scoped>
.dot {
  display: inline-block;
  width: 5px;
  height: 5px;
  background-color: red;
  border-radius: 50%;
  position: absolute;
  top: 10px;
  left: 4px;
}
</style>