add -- 添加“新建流程”页面，发起流程操作从“我的流程”页面分离。

ruoyi-ui/src/api/workflow/deploy.js

@@ -0,0 +1,9 @@
+import request from '@/utils/request'
+
+// 查询流程部署关联表单信息
+export function getFormByDeployId(deployId) {
+  return request({
+    url: '/workflow/deploy/form/' + deployId,
+    method: 'get',
+  })
+}

ruoyi-ui/src/api/workflow/process.js

@@ -1,5 +1,24 @@
 import request from '@/utils/request'
 
+// 查询流程列表
+export function listProcess(query) {
+  return request({
+    url: '/workflow/process/list',
+    method: 'get',
+    params: query
+  })
+}
+
+
+// 部署流程实例
+export function startProcess(processDefId, data) {
+  return request({
+    url: '/workflow/process/start/' + processDefId,
+    method: 'post',
+    data: data
+  })
+}
+
 // 我的发起的流程
 export function myProcessList(query) {
   return request({

ruoyi-ui/src/router/index.js

@@ -87,11 +87,30 @@ export const constantRoutes = [
       }
     ]
   },
+  {
+    path: '/process',
+    component: Layout,
+    hidden: true,
+    children: [
+      {
+        path: 'start',
+        component: () => import('@/views/workflow/process/start'),
+        name: 'StartProcess',
+        meta: { title: '发起流程', icon: '' }
+      }
+    ]
+  },
   {
     path: '/task',
     component: Layout,
     hidden: true,
     children: [
+      {
+        path: 'process/index',
+        component: () => import('@/views/workflow/task/process/index'),
+        name: 'Record',
+        meta: { title: '我的流程', icon: '' }
+      },
       {
         path: 'record/index',
         component: () => import('@/views/workflow/task/record/index'),

ruoyi-ui/src/views/workflow/process/index.vue

@@ -0,0 +1,178 @@
+<template>
+  <div class="app-container">
+    <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 :gutter="10" class="mb8">
+      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+    </el-row>
+    <el-table v-loading="loading" fit :data="processList">
+      <el-table-column label="序号" type="index" width="50"></el-table-column>
+      <el-table-column label="流程标识" align="center" prop="processKey" :show-overflow-tooltip="true" />
+      <el-table-column label="流程名称" align="center" :show-overflow-tooltip="true">
+        <template slot-scope="scope">
+          <el-button type="text" @click="handleProcessView(scope.row)">
+            <span>{{ scope.row.processName }}</span>
+          </el-button>
+        </template>
+      </el-table-column>
+      <el-table-column label="流程分类" align="center" prop="categoryName">
+        <template slot-scope="scope">
+          <span>{{ categoryOptions.find(k => k.code === scope.row.category).categoryName }}</span>
+        </template>
+      </el-table-column>
+      <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">
+        <template slot-scope="scope">
+          <el-tag type="success" v-if="!scope.row.suspended">激活</el-tag>
+          <el-tag type="warning" v-if="scope.row.suspended">挂起</el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column label="部署时间" align="center" prop="deploymentTime" width="180"/>
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+        <template slot-scope="scope">
+          <el-button
+            type="text"
+            size="mini"
+            icon="el-icon-video-play"
+            @click="handleStart(scope.row)"
+            v-hasPermi="['workflow:definition:designer']"
+          >发起</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <pagination
+      v-show="total > 0"
+      :total="total"
+      :page.sync="queryParams.pageNum"
+      :limit.sync="queryParams.pageSize"
+      @pagination="getList"
+    />
+
+    <!-- 流程图 -->
+    <el-dialog :title="processView.title" :visible.sync="processView.open" width="70%" append-to-body>
+      <process-viewer :key="`designer-${processView.index}`" :xml="processView.xmlData" :style="{height: '400px'}" />
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { listProcess } from "@/api/workflow/process";
+import { listCategory } from '@/api/workflow/category'
+import { readXml } from '@/api/workflow/definition'
+import ProcessViewer from '@/components/ProcessViewer'
+
+export default {
+  name: 'Process',
+  components: {
+    ProcessViewer
+  },
+  data() {
+    return {
+      // 遮罩层
+      loading: true,
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+      },
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      filterCategoryText: '',
+      categoryOptions: [],
+      categoryProps: {
+        label: 'categoryName',
+        value: 'code'
+      },
+      // 流程定义表格数据
+      processList: [],
+      processView: {
+        title: '',
+        open: false,
+        index: undefined,
+        xmlData:"",
+      }
+    }
+  },
+  created() {
+    this.getTreeselect();
+    this.getList();
+  },
+  methods: {
+    /** 查询流程分类列表 */
+    getTreeselect() {
+      listCategory().then(response => {
+        this.categoryOptions = response.rows;
+      })
+    },
+    /** 查询流程定义列表 */
+    getList() {
+      listProcess(this.queryParams).then(response => {
+        this.processList = response.rows;
+        this.total = response.total;
+        this.loading = false
+      })
+    },
+    // 搜索按钮操作
+    handleQuery() {
+      this.queryParams.pageNum = 1;
+      this.getList();
+    },
+    // 重置按钮操作
+    resetQuery() {
+      this.resetForm("queryForm");
+      this.handleQuery();
+    },
+    /** 查看流程图 */
+    handleProcessView(row) {
+      let definitionId = row.definitionId;
+      this.processView.title = "流程图";
+      this.processView.index = definitionId;
+      // 发送请求，获取xml
+      readXml(definitionId).then(res => {
+        this.processView.xmlData = res.data;
+        this.processView.open = true;
+      })
+    },
+    handleStart(row) {
+      this.$router.push({
+        path: '/process/start',
+        query: {
+          definitionId: row.definitionId,
+          deployId: row.deploymentId,
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

ruoyi-ui/src/views/workflow/process/start.vue

@@ -0,0 +1,98 @@
+<template>
+  <div class="app-container">
+    <el-card class="box-card">
+      <div slot="header" class="clearfix">
+        <span>发起流程</span>
+<!--        <el-button style="float: right; padding: 3px 0" type="text">关闭</el-button>-->
+      </div>
+      <el-col :span="18" :offset="3">
+        <div class="form-conf" v-if="formOpen">
+          <parser :key="new Date().getTime()" :form-conf="formData" @submit="submit" ref="parser" @getData="getData"/>
+        </div>
+      </el-col>
+    </el-card>
+  </div>
+</template>
+
+<script>
+import { getFormByDeployId } from '@/api/workflow/deploy'
+import { startProcess } from '@/api/workflow/process'
+import Parser from '@/utils/generator/parser'
+
+export default {
+  name: 'StartProcess',
+  components: {
+    Parser
+  },
+  data() {
+    return {
+      formOpen: false,
+      formData: {}
+    }
+  },
+  created() {
+    this.definitionId = this.$route.query && this.$route.query.definitionId;
+    this.deployId = this.$route.query && this.$route.query.deployId;
+    this.getFormData(this.deployId);
+  },
+  methods: {
+    /** 流程流转记录 */
+    getFormData(deployId) {
+      getFormByDeployId(deployId).then(res => {
+        if (res.data) {
+          this.formData = res.data;
+          this.formOpen = true
+        }
+      })
+    },
+    /** 接收子组件传的值 */
+    getData(data) {
+      if (data) {
+        const variables = [];
+        data.fields.forEach(item => {
+          let variableData = {};
+          variableData.label = item.__config__.label
+          // 表单值为多个选项时
+          if (item.__config__.defaultValue instanceof Array) {
+            const array = [];
+            item.__config__.defaultValue.forEach(val => {
+              array.push(val)
+            })
+            variableData.val = array;
+          } else {
+            variableData.val = item.__config__.defaultValue
+          }
+          variables.push(variableData)
+        })
+        this.variables = variables;
+      }
+    },
+    submit(data) {
+      if (data) {
+        const variables = data.valData;
+        const formData = data.formData;
+        formData.disabled = true;
+        formData.formBtns = false;
+        if (this.definitionId) {
+          variables.variables = formData;
+          // 启动流程并将表单数据加入流程变量
+          startProcess(this.definitionId, JSON.stringify(variables)).then(res => {
+            this.$modal.msgSuccess(res.msg);
+            this.$router.push({
+              path: '/task/process/index'
+            })
+          })
+        }
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.form-conf {
+  margin: 15px auto;
+  width: 80%;
+  padding: 15px;
+}
+</style>