feat(h5) add workbench

approve-sys
bob 2 years ago
parent 2bf6e04be4
commit fdb0891fea

@ -52,6 +52,15 @@ export const constantRoutes = [
path: '/h5todo', path: '/h5todo',
component: (resolve) => require(['@/views/h5/h5todo'], resolve), component: (resolve) => require(['@/views/h5/h5todo'], resolve),
hidden: true hidden: true
}, {
path: '/h5process',
component: (resolve) => require(['@/views/h5/h5process'], resolve),
hidden: true
},
{
path: '/workbench',
component: (resolve) => require(['@/views/h5/workbench'], resolve),
hidden: true
}, },
{ {
path: '/h5record', path: '/h5record',

@ -0,0 +1,293 @@
<template>
<div class="app-container">
<!-- 添加或修改流程表单对话框 -->
<el-dialog :title="title" :visible.sync="open" width="95%" append-to-body>
<el-form ref="form" :model="form" :rules="rules" label-width="70px">
<el-form-item label="所属项目">
<el-select v-model="form.projectId"
clearable
filterable
placeholder="请选择">
<el-option
v-for="(item,index) in projectList"
:key="index"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="项目问题">
<el-input type="textarea" v-model="form.issue"/>
</el-form-item>
<el-form-item label="解决方案">
<el-input type="textarea" v-model="form.solution"/>
</el-form-item>
<el-form-item label="工作记录">
<el-input type="textarea" v-model="form.workRecord"/>
</el-form-item>
<el-form-item label="附件上传" prop="remark">
<el-upload
class="upload-demo"
:action="uploadFileUrl"
:on-error="handleUploadError"
:on-preview="handlePreview"
:on-success="handleSuccess"
:on-remove="handleRemove"
:headers="headers"
:file-list="fileList">
<el-button size="small" type="primary">点击上传</el-button>
</el-upload>
</el-form-item>
<el-form-item label="申请提交时间">
<el-date-picker
v-model="form.submitDate"
type="datetime"
value-format="yyyy-MM-dd HH:mm:ss"
format="yyyy-MM-dd HH:mm:ss"
placeholder="若未选,系统自动生成">
</el-date-picker>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="startFlow"> </el-button>
<el-button @click="cancel"> </el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import {listForm, getForm, delForm, addForm, updateForm, exportForm} from "@/api/flowable/form";
import Editor from '@/components/Editor';
import Parser from '@/components/parser/Parser'
import {optionProject} from "@/api/system/project";
import {definitionStart, getLatestIdByKey} from "@/api/flowable/definition";
import {getToken} from "@/utils/auth";
export default {
name: "Form",
components: {
Editor,
Parser
},
data() {
return {
//
loading: true,
//
ids: [],
//
single: true,
//
multiple: true,
//
showSearch: true,
//
total: 0,
//
formList: [],
uploadFileUrl: process.env.VUE_APP_BASE_API + "/common/attachment/upload", //
//
title: "",
formConf: {}, //
formConfOpen: false,
formTitle: "",
//
open: false,
//
queryParams: {
pageNum: 1,
pageSize: 10,
formName: null,
formContent: null,
},
headers: {
Authorization: "Bearer " + getToken(),
},
fileList: [],
fileIdList: [],
//
form: {
projectId: undefined,
workRecord: '',
submitDate: '',
attachmentIds: [],
issue: '',
solution: '',
},
oaProjectFlowId: '',
oaProjectFlowKey: 'process_l9kpb443',
projectList: [],
//
rules: {}
};
},
methods: {
init() {
this.fileList = []
this.fileIdList = []
this.open = true
this.optionList()
this.getLatestIdByKey()
},
/** 启动流程 */
startFlow(){
if (this.fileIdList.length > 0) {
this.form.attachmentIds=this.fileIdList.map(e => e.id).join(',')
console.log("this.form.attachmentIds", this.form.attachmentIds);
}
definitionStart(this.oaProjectFlowId, JSON.stringify(this.form)).then(res => {
this.msgSuccess(res.msg);
this.$router.push('/h5process')
});
}, /** 获取最新流程id */
getLatestIdByKey(){
getLatestIdByKey(this.oaProjectFlowKey).then(res => {
this.oaProjectFlowId = res.data;
});
},
/** 查询项目列表 */
optionList() {
this.loading = true;
optionProject().then(response => {
this.projectList = response.data;
this.loading = false;
});
},
/** 查询流程表单列表 */
getList() {
this.loading = true;
listForm(this.queryParams).then(response => {
this.formList = response.rows;
this.total = response.total;
this.loading = false;
});
},
//
cancel() {
this.open = false;
this.reset();
},
//
reset() {
this.form = {
formId: null,
formName: null,
formContent: null,
createTime: null,
updateTime: null,
createBy: null,
updateBy: null,
remark: null
};
this.resetForm("form");
},
/** 搜索按钮操作 */
handleQuery() {
this.queryParams.pageNum = 1;
this.getList();
},
/** 重置按钮操作 */
resetQuery() {
this.resetForm("queryForm");
this.handleQuery();
},
//
handleSelectionChange(selection) {
this.ids = selection.map(item => item.formId)
this.single = selection.length !== 1
this.multiple = !selection.length
},
/** 表单配置信息 */
handleDetail(row) {
this.formConfOpen = true;
this.formTitle = "流程表单配置详细";
this.formConf = JSON.parse(row.formContent)
},
/** 新增按钮操作 */
handleAdd() {
// this.reset();
// this.open = true;
// this.title = "";
this.$router.push({path: '/tool/build/index', query: {formId: null}})
},
/** 修改按钮操作 */
handleUpdate(row) {
// this.reset();
// const formId = row.formId || this.ids
// getForm(formId).then(response => {
// this.form = response.data;
// this.open = true;
// this.title = "";
// });
this.$router.push({path: '/tool/build/index', query: {formId: row.formId}})
},
/** 删除按钮操作 */
handleDelete(row) {
const formIds = row.formId || this.ids;
this.$confirm('是否确认删除流程表单编号为"' + formIds + '"的数据项?', "警告", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
}).then(function () {
return delForm(formIds);
}).then(() => {
this.getList();
this.msgSuccess("删除成功");
})
},
/** 导出按钮操作 */
handleExport() {
const queryParams = this.queryParams;
this.$confirm('是否确认导出所有流程表单数据项?', "警告", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
}).then(function () {
return exportForm(queryParams);
}).then(response => {
this.download(response.msg);
})
},
handleRemove(file, fileList) {
// id
console.log(file, fileList);
for(var i = this.fileIdList.length -1; i >= 0 ; i--){
if(this.fileIdList[i].uid == file.uid){
// fileIdListid
this.fileIdList.splice(i, 1);
}
}
},
handleUploadError(err, file, fileList) {
this.$message.error("上传失败, 请重试");
},
handleSuccess(res, file, fileList) {
if (res.code !== 200) {
this.$message.error("上传失败, 请重试");
return
}
this.fileIdList.push({
id:res.data.id,
uid:file.uid // id
})
// id
},
handlePreview(file) {
console.log(file);
}
}
};
</script>
<style lang="scss" scoped>
.test-form {
margin: 15px auto;
width: 800px;
padding: 15px;
}
</style>

@ -0,0 +1,405 @@
<template>
<div class="app-container">
<el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="48px">
<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">
<el-col :span="1.5">
<el-button
type="primary"
plain
icon="el-icon-plus"
size="mini"
@click="handleAdd"
v-hasPermi="['system:deployment:add']"
>新增流程</el-button>
</el-col>
<!-- <el-col :span="1.5">-->
<!-- <el-button-->
<!-- type="danger"-->
<!-- plain-->
<!-- icon="el-icon-delete"-->
<!-- size="mini"-->
<!-- :disabled="multiple"-->
<!-- @click="handleDelete"-->
<!-- v-hasPermi="['system:deployment:remove']"-->
<!-- >删除</el-button>-->
<!-- </el-col>-->
<el-col :span="1.5">
<el-button
type="warning"
plain
icon="el-icon-download"
size="mini"
@click="handleExport"
v-hasPermi="['system:deployment:export']"
>导出</el-button>
</el-col>
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
</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" class-name="small-padding fixed-width">
<template slot-scope="scope">
<el-dropdown>
<span class="el-dropdown-link">
更多操作<i class="el-icon-arrow-down el-icon--right"></i>
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item icon="el-icon-tickets" @click.native="handleFlowRecord(scope.row)">
详情
</el-dropdown-item>
<el-dropdown-item v-if="scope.row.status =='reject' " icon="el-icon-circle-close" @click.native="handleFlowRecord(scope.row)">
重新发起
</el-dropdown-item>
<!-- <el-dropdown-item icon="el-icon-delete" @click.native="handleDelete(scope.row)" v-hasPermi="['system:deployment:remove']">-->
<!-- 删除-->
<!-- </el-dropdown-item>-->
</el-dropdown-menu>
</el-dropdown>
</template>
</el-table-column>
<el-table-column label="项目名称" align="center" prop="projectName" :show-overflow-tooltip="true"/>
<el-table-column label="工作问题" align="center" prop="workIssue" :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.status =='reject' " type="danger" size="mini"></el-tag>
<el-tag v-else-if="scope.row.finishTime == null" size="mini">进行中</el-tag>
<el-tag type="success" v-else-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.deptName}}</el-tag></label>
<label v-if="scope.row.candidate">{{scope.row.candidate}}</label>
</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="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>
<pagination
v-show="processTotal>0"
:total="processTotal"
:page.sync="queryProcessParams.pageNum"
:limit.sync="queryProcessParams.pageSize"
@pagination="listDefinition"
/>
</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.id)
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/record/index',
query: {
deployId: row.deploymentId,
procDefId: row.id,
finished: true
}
})
},
/** 取消流程申请 */
handleStop(row){
const params = {
instanceId: row.procInsId
}
stopProcess(params).then( res => {
this.msgSuccess(res.msg);
this.getList();
});
},
/** 流程流转记录 */
handleFlowRecord(row){
this.$router.push({ path: '/flowable/task/record/index',
query: {
procInsId: row.procInsId,
deployId: row.deployId,
taskId: row.taskId,
finished: false
}})
},
/** 修改按钮操作 */
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.msgSuccess("修改成功");
this.open = false;
this.getList();
});
} else {
addDeployment(this.form).then(response => {
this.msgSuccess("新增成功");
this.open = false;
this.getList();
});
}
}
});
},
/** 删除按钮操作 */
handleDelete(row) {
// const ids = row.procInsId || this.ids;//
const ids = row.procInsId;
this.$confirm('是否确认删除流程定义编号为"' + ids + '"的数据项?', "警告", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
}).then(function() {
return delDeployment(ids);
}).then(() => {
this.getList();
this.msgSuccess("删除成功");
})
},
/** 导出按钮操作 */
handleExport() {
const queryParams = this.queryParams;
this.$confirm('是否确认导出所有流程定义数据项?', "警告", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
}).then(function() {
return exportDeployment(queryParams);
}).then(response => {
this.download(response.msg);
})
}
}
};
</script>

@ -0,0 +1,60 @@
<template>
<div>
<el-row :gutter="20" class="mt20" :span="24">
<el-col :span="12">
<el-button type="primary" @click="handleAddOaProject"></el-button>
</el-col>
<el-col :span="12">
<el-button type="primary" @click="redirectPage(applyListPage)"></el-button>
</el-col>
</el-row>
<el-row :gutter="20" class="mt20" :span="24">
<el-col :span="12">
<el-button type="primary" @click="redirectPage(todoPage)"></el-button>
</el-col>
<el-col :span="12">
</el-col>
</el-row>
<oa-project-flow ref="oaProjectFlow"></oa-project-flow>
</div>
</template>
<script>
import oaProjectFlow from "@/views/h5/h5apply/index.vue";
export default {
name: "workbench",
data() {
return {
// xml
xmlData: "",
taskList: [],
todoPage: '/h5todo',
applyPage: '/h5/h5record/index',
applyListPage: '/h5process',
}
},
components: {
oaProjectFlow
},
methods: {
/** 跳转到流程设计页面 */
redirectPage(path) {
this.$router.push({path: path})
// this.$router.push({path: path, query: {deployId: row.deploymentId}})
},
handleAddOaProject() {
this.$refs.oaProjectFlow.init()
}
}
}
</script>
<style scoped>
</style>

@ -127,7 +127,7 @@ export default {
Cookies.remove('rememberMe'); Cookies.remove('rememberMe');
} }
this.$store.dispatch("Login", this.loginForm).then(() => { this.$store.dispatch("Login", this.loginForm).then(() => {
this.$router.push({ path: this.redirect || "/h5todo" }).catch(()=>{}); this.$router.push({ path: this.redirect || "/workbench" }).catch(()=>{});
}).catch(() => { }).catch(() => {
this.loading = false; this.loading = false;
this.getCode(); this.getCode();

Loading…
Cancel
Save