kd-aiot-frontend-wt/src/views/bpm/todo/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="processTypeName">
                <el-input
                  clearable
                  v-model.trim="params.processTypeName"
                ></el-input>
              </el-form-item>
            </el-col>
            <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="status">
                <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>
              </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: 6, md: 12 } : { 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:status="{ row }">
          <el-tag type="success" v-if="row.suspensionState === 1">激活</el-tag>
          <el-tag type="warning" v-if="row.suspensionState === 2">挂起</el-tag>
        </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('audit', row)"
            >处理</el-button
          >
          <!--          <el-button-->
          <!--            size="mini"-->
          <!--            type="text"-->
          <!--            icon="el-icon-edit"-->
          <!--            @click="handleAudit('audit', row)"-->
          <!--          >转派</el-button-->
          <!--          >-->
          <!-- <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="openEdit('upDate', row)"
            >待办详情</el-button
          > -->
        </template>
      </ele-pro-table>
    </el-card>
    <handleTask ref="handleTaskRef" @reload="reload"></handleTask>
    <handleFormParserTask
      v-if="formParserDialogFlag"
      @reload="reload"
      :formParserDialogFlag.sync="formParserDialogFlag"
      ref="formParserDialogRef"
    ></handleFormParserTask>
    <detail ref="detailRef"></detail>

    <!-- <el-button type="text" @click="dialogVisible = true"
      >点击打开 Dialog</el-button
    >

    <el-dialog title="提示" :visible.sync="dialogVisible" width="90%">
      <inOut />
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog> -->
  </div>
</template>

<script>
  import { getTodoTaskPage } from '@/api/bpm/task';
  import handleTask from '@/views/bpm/handleTask/index.vue';
  import handleFormParserTask from '@/views/bpm/handleTask/formParser/formParserDialog.vue';
  import detail from '@/views/bpm/processInstance/detail.vue';
  import inOut from '../outgoingManagement/add.vue';

  // import {getDate} from "@/utils/dateUtils";
  // 默认表单数据
  const defaultParams = {
    status: '',
    processTypeName: '',
    name: ''
  };
  export default {
    name: 'BpmDoneTask',
    components: { handleTask, detail, inOut, handleFormParserTask },
    computed: {
      // 是否开启响应式布局
      styleResponsive() {
        return this.$store.state.theme.styleResponsive;
      }
    },
    data() {
      return {
        dialogVisible: false,
        formParserDialogFlag: false,
        // 遮罩层
        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: 200
          },
          {
            prop: 'processInstance.name',
            label: '流程名称',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 200
          },
          {
            prop: 'name',
            label: '任务名称',
            align: 'center',
            slot: 'name',

            showOverflowTooltip: true,
            minWidth: 200
          },
          {
            prop: 'processInstance.businessCode',
            label: '单据编码',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 120
          },
          {
            prop: 'processInstance.startUserNickname',
            label: '流程发起人',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 200
          },
          // {
          //   prop: 'suspensionState',
          //   slot: 'suspensionState',
          //   label: '状态',
          //   align: 'center',
          //   showOverflowTooltip: true,
          //   minWidth: 200
          // },

          {
            prop: 'createTime',
            label: '创建时间',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 180
          },

          {
            columnKey: 'action',
            label: '操作',
            width: 230,
            align: 'center',
            resizable: false,
            slot: 'action',
            showOverflowTooltip: true,
            fixed: 'right'
          }
        ]
      };
    },
    created() {},
    methods: {
      /* 表格数据源 */
      datasource({ page, limit, where, order }) {
        return getTodoTaskPage({
          pageNo: page,
          pageSize: limit,
          ...this.params
        });
      },
      /* 刷新表格 */
      reload(where) {
        this.$refs.table.reload({ page: 1, where });
      },

      /*  重置 */
      reset() {
        this.params = { ...defaultParams };
        this.reload();
      },
      /** 处理审批按钮 */

      handleAudit(type, row) {
        if (type == 'audit') {
          if (Object.keys(row.formJson).length) {
            this.formParserDialogFlag = true;
            this.$nextTick(() => {
              this.$refs.formParserDialogRef.open({
                // id: row.processInstance.id,
                // taskId: row.id,
                // taskDefinitionKey: row.taskDefinitionKey,
                // formJson:row.formJson,
                // valueJsom:row.formJson,
                ...row
              });
            });
          } else {
            this.$refs.handleTaskRef.open({
              id: row.processInstance.id,
              businessId: row.businessId,
              taskId: row.id,
              taskDefinitionKey: row.taskDefinitionKey,
              pcHandleRouter: row.pcHandleRouter,
              pcViewRouter: row.pcViewRouter
            });
          }
        } else {
          this.$refs.detailRef.open(row.processInstance.id);
        }
      }
    }
  };
</script>