提交

src/views/flow_task/myProcess/index.vue

@@ -0,0 +1,418 @@
+<template>
+  <div class="pd15">
+    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
+      <el-form-item label="名称" prop="name">
+        <el-input
+          v-model="queryParams.name"
+          placeholder="请输入名称"
+          clearable
+          size="small"
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="开始时间" prop="deployTime">
+        <el-date-picker clearable size="small"
+                        v-model="queryParams.deployTime"
+                        type="date"
+                        value-format="yyyy-MM-dd"
+                        placeholder="选择时间">
+        </el-date-picker>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+      </el-form-item>
+    </el-form>
+
+<!--    <el-row style="margin-bottom: 5px;">
+      <el-col :span="2">
+        <el-button
+          type="primary"
+
+          icon="el-icon-plus"
+
+          @click="handleAdd"
+        >新增流程</el-button>
+      </el-col>
+      <el-col :span="2">
+        <el-button
+          type="danger"
+
+          icon="el-icon-delete"
+
+          :disabled="multiple"
+          @click="handleDelete"
+        >删除</el-button>
+      </el-col>
+      &lt;!&ndash; <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar> &ndash;&gt;
+    </el-row>-->
+
+    <el-table v-loading="loading" :data="myProcessList" border @selection-change="handleSelectionChange">
+      <el-table-column type="selection" width="55" align="center" />
+<!--      <el-table-column label="流程编号" align="center" prop="procInsId" :show-overflow-tooltip="true"/>-->
+      <el-table-column label="流程名称" align="center" prop="procDefName" :show-overflow-tooltip="true"/>
+      <el-table-column label="流程类别" align="center" prop="category" width="100px" />
+      <el-table-column label="流程版本" align="center" width="80px">
+        <template slot-scope="scope">
+          <el-tag size="medium" >v{{ scope.row.procDefVersion }}</el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column label="提交时间" align="center" prop="createTime" width="180"/>
+      <el-table-column label="流程状态" align="center" width="100">
+        <template slot-scope="scope">
+          <el-tag v-if="scope.row.finishTime == null" size="mini">进行中</el-tag>
+          <el-tag type="success" v-if="scope.row.finishTime != null" size="mini">已完成</el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column label="耗时" align="center" prop="duration" width="180"/>
+      <el-table-column label="当前节点" align="center" prop="taskName"/>
+      <el-table-column label="办理人" align="center">
+        <template slot-scope="scope">
+          <label v-if="scope.row.assigneeName">{{scope.row.assigneeName}} <el-tag type="info" size="mini">{{scope.row.assigneeDeptName}}</el-tag></label>
+<!--          <label v-if="scope.row.candidate">{{scope.row.candidate}}</label>-->
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" width="150" fixed="right" class-name="small-padding fixed-width">
+        <template slot-scope="scope">
+          <el-button @click="handleFlowRecord(scope.row)" type="text" size="small">详情</el-button>
+<!--          <el-button @click="handleStop(scope.row)" type="text" size="small">取消申请</el-button>-->
+          <el-button @click="handleDelete(scope.row)" type="text" size="small" >删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <el-pagination
+        background
+        align="right"
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+        :current-page="queryParams.pageNum"
+        :page-sizes="[20, 30, 40, 50, 100]"
+        :page-size="queryParams.pageSize"
+        layout="total, sizes, prev, pager, next, jumper"
+        :total="total"
+      >
+      </el-pagination>
+
+
+
+    <!-- 发起流程 -->
+    <el-dialog :title="title" :visible.sync="open" width="60%" append-to-body>
+      <el-form :model="queryProcessParams" ref="queryProcessForm" :inline="true" v-show="showSearch" label-width="68px">
+        <el-form-item label="名称" prop="name">
+          <el-input
+            v-model="queryProcessParams.name"
+            placeholder="请输入名称"
+            clearable
+            size="small"
+            @keyup.enter.native="handleQuery"
+          />
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleProcessQuery">搜索</el-button>
+          <el-button icon="el-icon-refresh" size="mini" @click="resetProcessQuery">重置</el-button>
+        </el-form-item>
+      </el-form>
+      <el-table v-loading="processLoading" fit :data="definitionList" border >
+        <el-table-column label="流程名称" align="center" prop="name" />
+        <el-table-column label="流程版本" align="center">
+          <template slot-scope="scope">
+            <el-tag size="medium" >v{{ scope.row.version }}</el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column label="流程分类" align="center" prop="category" />
+        <el-table-column label="操作" align="center" width="300" class-name="small-padding fixed-width">
+          <template slot-scope="scope">
+            <el-button
+              size="mini"
+              type="text"
+              icon="el-icon-edit-outline"
+              @click="handleStartProcess(scope.row)"
+            >发起流程</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <el-pagination
+        background
+        align="right"
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+        :current-page="queryParams.pageNum"
+        :page-sizes="[20, 30, 40, 50, 100]"
+        :page-size="queryParams.pageSize"
+        layout="total, sizes, prev, pager, next, jumper"
+        :total="total"
+      >
+      </el-pagination>
+    </el-dialog>
+
+  </div>
+</template>
+
+<script>
+import {
+  getDeployment,
+  delDeployment,
+  addDeployment,
+  updateDeployment,
+  exportDeployment,
+  flowRecord
+} from "@/api/flowable/finished";
+import { myProcessList,stopProcess } from "@/api/flowable/process";
+import {listDefinition} from "@/api/flowable/definition";
+export default {
+  name: "Deploy",
+  components: {
+  },
+  data() {
+    return {
+      // 遮罩层
+      loading: true,
+      processLoading: true,
+      // 选中数组
+      ids: [],
+      // 非单个禁用
+      single: true,
+      // 非多个禁用
+      multiple: true,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      processTotal:0,
+      // 我发起的流程列表数据
+      myProcessList: [],
+      // 弹出层标题
+      title: "",
+      // 是否显示弹出层
+      open: false,
+      src: "",
+      definitionList:[],
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        name: null,
+        category: null,
+        key: null,
+        tenantId: null,
+        deployTime: null,
+        derivedFrom: null,
+        derivedFromRoot: null,
+        parentDeploymentId: null,
+        engineVersion: null
+      },
+      // 查询参数
+      queryProcessParams: {
+        pageNum: 1,
+        pageSize: 10,
+        name: null,
+        category: null,
+        key: null,
+        tenantId: null,
+        deployTime: null,
+        derivedFrom: null,
+        derivedFromRoot: null,
+        parentDeploymentId: null,
+        engineVersion: null
+      },
+      // 表单参数
+      form: {},
+      // 表单校验
+      rules: {
+      },
+    };
+  },
+  created() {
+    this.getList();
+  },
+  methods: {
+    /** 查询流程定义列表 */
+    getList() {
+      this.loading = true;
+      myProcessList(this.queryParams).then(response => {
+        this.myProcessList = response.data.records;
+        this.total = response.data.total;
+        this.loading = false;
+      });
+    },
+    // 取消按钮
+    cancel() {
+      this.open = false;
+      this.reset();
+    },
+    // 表单重置
+    reset() {
+      this.form = {
+        id: null,
+        name: null,
+        category: null,
+        key: null,
+        tenantId: null,
+        deployTime: null,
+        derivedFrom: null,
+        derivedFromRoot: null,
+        parentDeploymentId: null,
+        engineVersion: null
+      };
+      this.resetForm("form");
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNum = 1;
+      this.getList();
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.resetForm("queryForm");
+      this.handleQuery();
+    },
+    /** 搜索按钮操作 */
+    handleProcessQuery() {
+      this.queryProcessParams.pageNum = 1;
+      this.listDefinition();
+    },
+    /** 重置按钮操作 */
+    resetProcessQuery() {
+      this.resetForm("queryProcessForm");
+      this.handleProcessQuery();
+    },
+    // 多选框选中数据
+    handleSelectionChange(selection) {
+      this.ids = selection.map(item => item.procInsId)
+      this.single = selection.length!==1
+      this.multiple = !selection.length
+    },
+    /** 新增按钮操作 */
+    handleAdd() {
+      this.open = true;
+      this.title = "发起流程";
+      this.listDefinition();
+    },
+    listDefinition(){
+      listDefinition(this.queryProcessParams).then(response => {
+        this.definitionList = response.data.records;
+        this.processTotal = response.data.total;
+        this.processLoading = false;
+      });
+    },
+    /**  发起流程申请 */
+    handleStartProcess(row){
+      this.$router.push({ path: '/flowable/task/myProcess/send/index',
+        query: {
+          deployId: row.deploymentId,
+          procDefId: row.id
+          }
+      })
+    },
+    /**  取消流程申请 */
+    handleStop(row){
+      const params = {
+        instanceId: row.procInsId
+      }
+      stopProcess(params).then( res => {
+        this.$message({
+          message: res.msg,
+          type: 'success'
+        })
+        this.getList();
+      });
+    },
+    /** 流程流转记录 */
+    handleFlowRecord(row){
+      this.$router.push({ path: '/flow_task/myProcess/detail/index',
+        query: {
+          procInsId: row.procInsId,
+          deployId: row.deployId,
+          taskId: row.taskId,
+          formAssId:row.formAssId,
+          formType:row.formType
+      }})
+    },
+    /** 修改按钮操作 */
+    handleUpdate(row) {
+      this.reset();
+      const id = row.id || this.ids
+      getDeployment(id).then(response => {
+        this.form = response.data;
+        this.open = true;
+        this.title = "修改流程定义";
+      });
+    },
+    /** 提交按钮 */
+    submitForm() {
+      this.$refs["form"].validate(valid => {
+        if (valid) {
+          if (this.form.id != null) {
+            updateDeployment(this.form).then(response => {
+              this.$message({
+                message: '修改成功!',
+                type: 'success'
+              })
+              this.open = false;
+              this.getList();
+            });
+          } else {
+            addDeployment(this.form).then(response => {
+              this.$message({
+                message: '修改成功!',
+                type: 'success'
+              })
+              this.open = false;
+              this.getList();
+            });
+          }
+        }
+      });
+    },
+    /** 删除按钮操作 */
+    handleDelete(row) {
+      const ids = row.procInsId || this.ids;// 暂不支持删除多个流程
+      this.$confirm('是否确认删除流程定义编号为"' + ids + '"的数据项?', "警告", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning"
+      }).then(() => {
+        const params = {instanceIds: ids}
+        return delDeployment(params);
+      }).then(() => {
+        this.getList();
+        this.$message({
+          message: '删除成功!',
+          type: 'success'
+        })
+      })
+    },
+    /** 导出按钮操作 */
+    handleExport() {
+      const queryParams = this.queryParams;
+      this.$confirm('是否确认导出所有流程定义数据项?', "警告", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning"
+      }).then(() => {
+        return exportDeployment(queryParams);
+      }).then(response => {
+        this.download(response.msg);
+      })
+    },
+
+
+
+
+
+
+    //每页条数改变时触发 选择一页显示多少行
+    handleSizeChange(val) {
+      this.queryParams.pageSize = val;
+      this.lowVoltageUserAccount();
+    },
+    //当前页改变时触发 跳转其他页
+    handleCurrentChange(val) {
+      this.queryParams.pageNum = val;
+      this.lowVoltageUserAccount();
+    },
+  }
+};
+</script>
+