feat(h5) add page

approve-sys
bob 2 years ago
parent b1065de349
commit 5d75516222

@ -0,0 +1,282 @@
<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">
<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>
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
</el-row>
<el-table v-loading="loading" :data="finishedList" border @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="任务编号" align="center" prop="taskId" :show-overflow-tooltip="true"/>
<el-table-column label="流程名称" align="center" prop="procDefName" :show-overflow-tooltip="true"/>
<el-table-column label="任务节点" align="center" prop="taskName" />
<el-table-column label="流程发起人" align="center">
<template slot-scope="scope">
<label>{{scope.row.startUserName}} <el-tag type="info" size="mini">{{scope.row.startDeptName}}</el-tag></label>
</template>
</el-table-column>
<el-table-column label="接收时间" align="center" prop="createTime" width="180"/>
<el-table-column label="审批时间" align="center" prop="finishTime" width="180"/>
<el-table-column label="耗时" align="center" prop="duration" width="180"/>
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<template slot-scope="scope">
<el-button
size="mini"
type="text"
icon="el-icon-tickets"
@click="handleFlowRecord(scope.row)"
>流转记录</el-button>
<!-- <el-button-->
<!-- size="mini"-->
<!-- type="text"-->
<!-- icon="el-icon-tickets"-->
<!-- @click="handleRevoke(scope.row)"-->
<!-- >撤回-->
<!-- </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"
/>
<finished-record ref="finishedRecord"></finished-record>
</div>
</template>
<script>
import { finishedList, getDeployment, delDeployment, addDeployment, updateDeployment, exportDeployment, revokeProcess } from "@/api/flowable/finished";
import finishedRecord from './record'
export default {
name: "Deploy",
components: {
finishedRecord
},
data() {
return {
//
loading: true,
//
ids: [],
//
single: true,
//
multiple: true,
//
showSearch: true,
//
total: 0,
//
finishedList: [],
//
title: "",
//
open: false,
src: "",
//
queryParams: {
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;
finishedList(this.queryParams).then(response => {
this.finishedList = 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");
},
setIcon(val){
if (val){
return "el-icon-check";
}else {
return "el-icon-time";
}
},
setColor(val){
if (val){
return "#2bc418";
}else {
return "#b3bdbb";
}
},
/** 搜索按钮操作 */
handleQuery() {
this.queryParams.pageNum = 1;
this.getList();
},
/** 重置按钮操作 */
resetQuery() {
this.resetForm("queryForm");
this.handleQuery();
},
//
handleSelectionChange(selection) {
this.ids = selection.map(item => item.id)
this.single = selection.length!==1
this.multiple = !selection.length
},
/** 新增按钮操作 */
handleAdd() {
this.reset();
this.open = true;
this.title = "添加流程定义";
},
/** 流程流转记录 */
handleFlowRecord(row){
this.$refs.finishedRecord.init(row.procInsId,row.deployId,row.taskId, false)
},
/** 撤回任务 */
handleRevoke(row){
const params = {
instanceId: row.procInsId
}
revokeProcess(params).then( res => {
this.msgSuccess(res.msg);
this.getList();
});
},
/** 修改按钮操作 */
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.id || this.ids;
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,676 @@
<template>
<div class="app-container">
<el-dialog :title="'流转信息'" :visible.sync="open" width="80%" append-to-body>
<el-card class="box-card" >
<div slot="header" class="clearfix">
<span class="el-icon-document">基础信息</span>
<el-button style="float: right;" type="primary" @click="goBack"></el-button>
</div>
<!--流程处理表单模块-->
<el-col :span="16" :offset="6" v-if="variableOpen">
<div>
<el-form ref="form" :model="form" :rules="rules" label-width="100px" :disabled="true">
<el-form-item label="所属项目">
<el-select v-model="form.projectId"
clearable
filterable
placeholder="请选择">
<el-option
v-for="(item,index) in projectList"
:key="record"
: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="https://jsonplaceholder.typicode.com/posts/"
:on-preview="handlePreview"
:on-remove="handleRemove"
:file-list="fileList">
<el-button size="small" type="primary">点击上传</el-button>
<div slot="tip" class="el-upload__tip">只能上传jpg/png文件且不超过500kb</div>
</el-upload>
</el-form-item>
<el-form-item label="文件上传" prop="remark">
<el-upload
class="upload-demo"
action="https://jsonplaceholder.typicode.com/posts/"
:on-preview="handlePreview"
:on-remove="handleRemove"
multiple
:limit="3"
:file-list="fileList">
<el-button size="small" type="primary">点击上传</el-button>
<div slot="tip" class="el-upload__tip">只能上传jpg/png文件且不超过500kb</div>
</el-upload>
</el-form-item>
</el-form>
</div>
</el-col>
</el-card>
<!--流程流转记录-->
<el-card class="box-card" v-if="flowRecordList">
<div slot="header" class="clearfix">
<span class="el-icon-notebook-1">审批记录</span>
</div>
<el-col :span="16" :offset="4" >
<div class="block">
<el-timeline>
<el-timeline-item
v-for="(item,index ) in flowRecordList"
:key="record"
:icon="setIcon(item.finishTime)"
:color="setColor(item.finishTime)"
>
<p style="font-weight: 700">{{item.taskName}}</p>
<el-card :body-style="{ padding: '10px' }">
<el-descriptions class="margin-top" :column="1" size="small" border>
<el-descriptions-item v-if="item.assigneeName" label-class-name="my-label">
<template slot="label"><i class="el-icon-user"></i>实际办理</template>
{{item.assigneeName}}
<el-tag type="info" size="mini">{{item.deptName}}</el-tag>
</el-descriptions-item>
<el-descriptions-item v-if="item.candidate" label-class-name="my-label">
<template slot="label"><i class="el-icon-user"></i>候选办理</template>
{{item.candidate}}
</el-descriptions-item>
<!-- <el-descriptions-item label-class-name="my-label">-->
<!-- <template slot="label"><i class="el-icon-date"></i>接收时间</template>-->
<!-- {{item.createTime}}-->
<!-- </el-descriptions-item>-->
<el-descriptions-item v-if="item.finishTime" label-class-name="my-label">
<template slot="label"><i class="el-icon-date"></i>处理时间</template>
<span v-if="form.submitDate !==undefined && form.submitDate !==''&& form.submitDate !==null">{{form.submitDate}}</span>
<span v-else>{{item.finishTime}}</span>
</el-descriptions-item>
<!-- <el-descriptions-item v-if="item.duration" label-class-name="my-label">-->
<!-- <template slot="label"><i class="el-icon-time"></i>耗时</template>-->
<!-- {{item.duration}}-->
<!-- </el-descriptions-item>-->
<el-descriptions-item v-if="item.comment" label-class-name="my-label">
<template slot="label"><i class="el-icon-tickets"></i>处理意见</template>
{{item.comment.comment}}
</el-descriptions-item>
</el-descriptions>
<!-- <p v-if="item.comment">-->
<!-- <el-tag type="success" v-if="item.comment.type === '1'"> {{item.comment.comment}}</el-tag>-->
<!-- <el-tag type="warning" v-if="item.comment.type === '2'"> {{item.comment.comment}}</el-tag>-->
<!-- <el-tag type="danger" v-if="item.comment.type === '3'"> {{item.comment.comment}}</el-tag>-->
<!-- </p>-->
</el-card>
</el-timeline-item>
</el-timeline>
</div>
</el-col>
</el-card>
<!-- <el-card class="box-card">-->
<!-- <div slot="header" class="clearfix">-->
<!-- <span class="el-icon-picture-outline">流程图</span>-->
<!-- </div>-->
<!-- <flow :xmlData="xmlData" :taskData="taskList"></flow>-->
<!-- </el-card>-->
<!--审批正常流程-->
<el-dialog :title="completeTitle" :visible.sync="completeOpen" :width="checkSendUser? '60%':'40%'" append-to-body>
<el-form ref="taskForm" :model="taskForm" label-width="80px" >
<el-form-item v-if="checkSendUser" prop="targetKey">
<el-row :gutter="20">
<!--部门数据-->
<el-col :span="6" :xs="24">
<h6>部门列表</h6>
<div class="head-container">
<el-input
v-model="deptName"
placeholder="请输入部门名称"
clearable
size="small"
prefix-icon="el-icon-search"
style="margin-bottom: 20px"
/>
</div>
<div class="head-container">
<el-tree
:data="deptOptions"
:props="defaultProps"
:expand-on-click-node="false"
:filter-node-method="filterNode"
ref="tree"
default-expand-all
@node-click="handleNodeClick"
/>
</div>
</el-col>
<el-col :span="10" :xs="24">
<h6>待选人员</h6>
<el-table
ref="singleTable"
:data="userList"
border
style="width: 100%"
@selection-change="handleSelectionChange">
<el-table-column type="selection" width="50" align="center" />
<el-table-column label="用户名" align="center" prop="nickName" />
<el-table-column label="部门" align="center" prop="dept.deptName" />
</el-table>
</el-col>
<el-col :span="8" :xs="24">
<h6>已选人员</h6>
<el-tag
v-for="(user,index) in userData"
:key="record"
closable
@close="handleClose(user)">
{{user.nickName}} {{user.dept.deptName}}
</el-tag>
</el-col>
</el-row>
</el-form-item>
<el-form-item label="处理意见" prop="comment" :rules="[{ required: true, message: '请输入处理意见', trigger: 'blur' }]">
<el-input type="textarea" v-model="taskForm.comment" placeholder="请输入处理意见"/>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="completeOpen = false"> </el-button>
<el-button type="primary" @click="taskComplete"> </el-button>
</span>
</el-dialog>
<!--退回流程-->
<el-dialog :title="returnTitle" :visible.sync="returnOpen" width="40%" append-to-body>
<el-form ref="taskForm" :model="taskForm" label-width="80px" >
<el-form-item label="退回节点" prop="targetKey">
<el-radio-group v-model="taskForm.targetKey">
<el-radio-button
v-for="item in returnTaskList"
:key="item.id"
:label="item.id"
>{{item.name}}</el-radio-button>
</el-radio-group>
</el-form-item>
<el-form-item label="退回意见" prop="comment" :rules="[{ required: true, message: '请输入意见', trigger: 'blur' }]">
<el-input style="width: 50%" type="textarea" v-model="taskForm.comment" placeholder="请输入意见"/>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="returnOpen = false"> </el-button>
<el-button type="primary" @click="taskReturn"> </el-button>
</span>
</el-dialog>
<!--驳回流程-->
<el-dialog :title="rejectTitle" :visible.sync="rejectOpen" width="40%" append-to-body>
<el-form ref="taskForm" :model="taskForm" label-width="80px" >
<el-form-item label="驳回意见" prop="comment" :rules="[{ required: true, message: '请输入意见', trigger: 'blur' }]">
<el-input style="width: 50%" type="textarea" v-model="taskForm.comment" placeholder="请输入意见"/>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="rejectOpen = false"> </el-button>
<el-button type="primary" @click="taskReject"> </el-button>
</span>
</el-dialog>
</el-dialog>
</div>
</template>
<script>
import {flowRecord} from "@/api/flowable/finished";
import Parser from '@/components/parser/Parser'
import {definitionStart, getProcessVariables, readXml, getFlowViewer} from "@/api/flowable/definition";
import {complete, rejectTask, returnList, returnTask, getNextFlowNode, delegate} from "@/api/flowable/todo";
import flow from '@/views/flowable/task/record/flow'
import {treeselect} from "@/api/system/dept";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import Treeselect from "@riophae/vue-treeselect";
import {listUser} from "@/api/system/user";
import {optionProject} from "@/api/system/project";
export default {
name: "Record",
components: {
Parser,
flow,
Treeselect
},
props: {},
data() {
return {
// xml
xmlData: "",
taskList: [],
//
deptName: undefined,
//
deptOptions: undefined,
//
userList: null,
defaultProps: {
children: "children",
label: "label"
},
//
queryParams: {
deptId: undefined
},
//
open: false,
loading: true,
flowRecordList: [], //
formConfCopy: {},
src: null,
rules: {}, //
variablesForm: {}, //
taskForm:{
returnTaskShow: false, // 退
delegateTaskShow: false, // 退
defaultTaskShow: true, //
sendUserShow: false, //
multiple: false,
comment:"", //
procInsId: "", //
instanceId: "", //
deployId: "", //
taskId: "" ,//
procDefId: "", //
vars: "",
targetKey:""
},
userDataList:[], //
assignee: null,
formConf: {}, //
formConfOpen: false, //
variables: [], //
variablesData: {}, //
variableOpen: false, //
//
form: {
projectId: 0,
workRecord: '',
issue: '',
solution: '',
},
fileList: [],
projectList: [],
returnTaskList: [], // 退
finished: 'false',
completeTitle: null,
completeOpen: false,
returnTitle: null,
returnOpen: false,
rejectOpen: false,
rejectTitle: null,
userData:[],
checkSendUser: false //
};
},
methods: {
init(procInsId, deployId, taskId, finished) {
this.open = true
this.taskForm.deployId = deployId;
this.taskForm.taskId = taskId;
this.taskForm.procInsId = procInsId;
// this.taskForm.executionId = this.$route.query && this.$route.query.executionId;
// this.taskForm.instanceId = this.$route.query && this.$route.query.procInsId;
//
// this.taskForm.procDefId = this.$route.query && this.$route.query.procDefId;
//
this.getFlowViewer(this.taskForm.procInsId, this.taskForm.executionId);
this.getModelDetail(this.taskForm.deployId);
//
if (this.taskForm.taskId) {
this.processVariables(this.taskForm.taskId)
this.getNextFlowNode(this.taskForm.taskId)
this.taskForm.deployId = null
}
this.optionList();
this.getFlowRecordList(this.taskForm.procInsId, this.taskForm.deployId);
this.finished = finished;
},
/** 查询部门下拉树结构 */
getTreeselect() {
treeselect().then(response => {
this.deptOptions = response.data;
});
},
/** 查询用户列表 */
getList() {
listUser(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
this.userList = response.rows;
this.total = response.total;
}
);
},
//
filterNode(value, data) {
if (!value) return true;
return data.label.indexOf(value) !== -1;
},
//
handleNodeClick(data) {
this.queryParams.deptId = data.id;
this.getList();
},
/** xml 文件 */
getModelDetail(deployId) {
// xml
readXml(deployId).then(res => {
this.xmlData = res.data
})
},
getFlowViewer(procInsId,executionId) {
getFlowViewer(procInsId,executionId).then(res => {
this.taskList = res.data
})
},
setIcon(val) {
if (val) {
return "el-icon-check";
} else {
return "el-icon-time";
}
},
setColor(val) {
if (val) {
return "#2bc418";
} else {
return "#b3bdbb";
}
},
//
handleSelectionChange(selection) {
if (selection) {
this.userData = selection
const selectVal = selection.map(item => item.userId);
if (selectVal instanceof Array) {
this.taskForm.values = {
"approval": selectVal.join(',')
}
} else {
this.taskForm.values = {
"approval": selectVal
}
}
}
},
//
handleClose(tag) {
this.userData.splice(this.userData.indexOf(tag), 1);
this.$refs.singleTable.toggleRowSelection(tag, false)
},
/** 流程变量赋值 */
handleCheckChange(val) {
if (val instanceof Array) {
this.taskForm.values = {
"approval": val.join(',')
}
} else {
this.taskForm.values = {
"approval": val
}
}
},
/** 流程流转记录 */
getFlowRecordList(procInsId, deployId) {
const params = {procInsId: procInsId, deployId: deployId}
flowRecord(params).then(res => {
this.flowRecordList = res.data.flowList;
//
// if (res.data.formData) {
this.form = res.data.form;
console.log("res.data.form;", res.data.form)
console.log("this.form ", this.form)
if (this.taskForm.executionId === undefined) {
this.formConfOpen = true
}
// }
}).catch(res => {
this.goBack();
})
},
fillFormData(form, data) {
form.fields.forEach(item => {
const val = data[item.__vModel__]
if (val) {
item.__config__.defaultValue = val
}
})
},
/** 获取流程变量内容 */
processVariables(taskId) {
if (taskId) {
//
getProcessVariables(taskId).then(res => {
// this.variables = res.data.variables;
this.form = res.data;
this.variableOpen = true
});
}
},
/** 查询项目列表 */
optionList() {
this.loading = true;
optionProject().then(response => {
this.projectList = response.data;
this.loading = false;
});
},
/** 根据当前任务或者流程设计配置的下一步节点 */
getNextFlowNode(taskId) {
// todo
const params = {taskId: taskId}
getNextFlowNode(params).then(res => {
const data = res.data;
if (data) {
this.checkSendUser = true
if (data.type === 'assignee') { //
this.userDataList = res.data.userList;
} else if (data.type === 'candidateUsers') { // ()
this.userDataList = res.data.userList;
this.taskForm.multiple = true;
} else if (data.type === 'candidateGroups') { // ()
res.data.roleList.forEach(role => {
role.userId = role.roleId;
role.nickName = role.roleName;
})
this.userDataList = res.data.roleList;
this.taskForm.multiple = false;
} else if (data.type === 'multiInstance') { // ?
this.userDataList = res.data.userList;
this.taskForm.multiple = true;
}else if (data.type === 'fixed') { //
this.checkSendUser = false;
}
}
})
},
/** 审批任务选择 */
handleComplete() {
this.completeOpen = true;
this.completeTitle = "审批流程";
this.getTreeselect();
},
/** 审批任务 */
taskComplete() {
if (!this.taskForm.values && this.checkSendUser){
this.msgError("请选择流程接收人员");
return;
}
if (!this.taskForm.comment){
this.msgError("请输入审批意见");
return;
}
complete(this.taskForm).then(response => {
this.msgSuccess(response.msg);
this.goBack();
});
},
/** 委派任务 */
handleDelegate() {
this.taskForm.delegateTaskShow = true;
this.taskForm.defaultTaskShow = false;
},
handleAssign(){
},
/** 返回页面 */
goBack() {
//
this.$store.dispatch("tagsView/delView", this.$route);
this.$router.go(-1)
},
/** 接收子组件传的值 */
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;
}
},
/** 申请流程表单数据提交 */
submitForm(data) {
if (data) {
const variables = data.valData;
const formData = data.formData;
formData.disabled = true;
formData.formBtns = false;
if (this.taskForm.procDefId) {
variables.variables = formData;
//
definitionStart(this.taskForm.procDefId, JSON.stringify(variables)).then(res => {
this.msgSuccess(res.msg);
this.goBack();
})
}
}
},
/** 驳回任务 */
handleReject() {
this.rejectOpen = true;
this.rejectTitle = "驳回流程";
},
/** 驳回任务 */
taskReject() {
this.$refs["taskForm"].validate(valid => {
if (valid) {
rejectTask(this.taskForm).then(res => {
this.msgSuccess(res.msg);
this.goBack();
});
}
});
},
/** 可退回任务列表 */
handleReturn() {
this.returnOpen = true;
this.returnTitle = "退回流程";
returnList(this.taskForm).then(res => {
this.returnTaskList = res.data;
this.taskForm.values = null;
})
},
/** 提交退回任务 */
taskReturn() {
this.$refs["taskForm"].validate(valid => {
if (valid) {
returnTask(this.taskForm).then(res => {
this.msgSuccess(res.msg);
this.goBack()
});
}
});
},
/** 取消回退任务按钮 */
cancelTask() {
this.taskForm.returnTaskShow = false;
this.taskForm.defaultTaskShow = true;
this.taskForm.sendUserShow = true;
this.returnTaskList = [];
},
/** 委派任务 */
submitDeleteTask() {
this.$refs["taskForm"].validate(valid => {
if (valid) {
delegate(this.taskForm).then(response => {
this.msgSuccess(response.msg);
this.goBack();
});
}
});
},
/** 取消回退任务按钮 */
cancelDelegateTask() {
this.taskForm.delegateTaskShow = false;
this.taskForm.defaultTaskShow = true;
this.taskForm.sendUserShow = true;
this.returnTaskList = [];
},
handleRemove(file, fileList) {
console.log(file, fileList);
},
handlePreview(file) {
console.log(file);
}
}
};
</script>
<style lang="scss" scoped>
.test-form {
margin: 15px auto;
width: 800px;
padding: 15px;
}
.clearfix:before,
.clearfix:after {
display: table;
content: "";
}
.clearfix:after {
clear: both
}
.box-card {
width: 100%;
margin-bottom: 20px;
}
.el-tag + .el-tag {
margin-left: 10px;
}
.my-label {
background: #E1F3D8;
}
</style>

@ -0,0 +1,203 @@
<template>
<div class="login">
<el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form">
<h3 class="title">工作流开发平台</h3>
<el-form-item prop="username">
<el-input v-model="loginForm.username" type="text" auto-complete="off" placeholder="账号">
<svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" />
</el-input>
</el-form-item>
<el-form-item prop="password">
<el-input
v-model="loginForm.password"
type="password"
auto-complete="off"
placeholder="密码"
@keyup.enter.native="handleLogin"
>
<svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" />
</el-input>
</el-form-item>
<el-form-item prop="code">
<el-input
v-model="loginForm.code"
auto-complete="off"
placeholder="验证码"
style="width: 63%"
@keyup.enter.native="handleLogin"
>
<svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon" />
</el-input>
<div class="login-code">
<img :src="codeUrl" @click="getCode" class="login-code-img"/>
</div>
</el-form-item>
<el-checkbox v-model="loginForm.rememberMe" style="margin:0px 0px 25px 0px;"></el-checkbox>
<el-form-item style="width:100%;">
<el-button
:loading="loading"
size="medium"
type="primary"
style="width:100%;"
@click.native.prevent="handleLogin"
>
<span v-if="!loading"> </span>
<span v-else> ...</span>
</el-button>
</el-form-item>
</el-form>
<!-- 底部 -->
<div class="el-login-footer">
<span>Copyright © Xuan xuan.</span>
</div>
</div>
</template>
<script>
import { getCodeImg } from "@/api/login";
import Cookies from "js-cookie";
import { encrypt, decrypt } from '@/utils/jsencrypt'
export default {
name: "Login",
data() {
return {
codeUrl: "",
cookiePassword: "",
loginForm: {
username: "tony",
password: "123456",
rememberMe: false,
code: "",
uuid: ""
},
loginRules: {
username: [
{ required: true, trigger: "blur", message: "用户名不能为空" }
],
password: [
{ required: true, trigger: "blur", message: "密码不能为空" }
],
code: [{ required: true, trigger: "change", message: "验证码不能为空" }]
},
loading: false,
redirect: undefined
};
},
watch: {
$route: {
handler: function(route) {
this.redirect = route.query && route.query.redirect;
},
immediate: true
}
},
created() {
this.getCode();
this.getCookie();
},
methods: {
getCode() {
getCodeImg().then(res => {
this.codeUrl = "data:image/gif;base64," + res.img;
this.loginForm.uuid = res.uuid;
});
},
getCookie() {
const username = Cookies.get("username");
const password = Cookies.get("password");
const rememberMe = Cookies.get('rememberMe')
this.loginForm = {
username: username === undefined ? this.loginForm.username : username,
password: password === undefined ? this.loginForm.password : decrypt(password),
rememberMe: rememberMe === undefined ? false : Boolean(rememberMe)
};
},
handleLogin() {
this.$refs.loginForm.validate(valid => {
if (valid) {
this.loading = true;
if (this.loginForm.rememberMe) {
Cookies.set("username", this.loginForm.username, { expires: 30 });
Cookies.set("password", encrypt(this.loginForm.password), { expires: 30 });
Cookies.set('rememberMe', this.loginForm.rememberMe, { expires: 30 });
} else {
Cookies.remove("username");
Cookies.remove("password");
Cookies.remove('rememberMe');
}
this.$store.dispatch("Login", this.loginForm).then(() => {
this.$router.push({ path: this.redirect || "/" }).catch(()=>{});
}).catch(() => {
this.loading = false;
this.getCode();
});
}
});
}
}
};
</script>
<style rel="stylesheet/scss" lang="scss">
.login {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
background-image: url("../assets/images/login-background.jpg");
background-size: cover;
}
.title {
margin: 0px auto 30px auto;
text-align: center;
color: #707070;
}
.login-form {
border-radius: 6px;
background: #ffffff;
width: 400px;
padding: 25px 25px 5px 25px;
.el-input {
height: 38px;
input {
height: 38px;
}
}
.input-icon {
height: 39px;
width: 14px;
margin-left: 2px;
}
}
.login-tip {
font-size: 13px;
text-align: center;
color: #bfbfbf;
}
.login-code {
width: 33%;
height: 38px;
float: right;
img {
cursor: pointer;
vertical-align: middle;
}
}
.el-login-footer {
height: 40px;
line-height: 40px;
position: fixed;
bottom: 0;
width: 100%;
text-align: center;
color: #fff;
font-family: Arial;
font-size: 12px;
letter-spacing: 1px;
}
.login-code-img {
height: 38px;
}
</style>

@ -0,0 +1,237 @@
<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">
<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>
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
</el-row>
<el-table v-loading="loading" :data="todoList" border @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" align="center"/>
<el-table-column label="任务编号" align="center" prop="taskId" :show-overflow-tooltip="true"/>
<el-table-column label="流程名称" align="center" prop="procDefName"/>
<el-table-column label="任务节点" align="center" prop="taskName"/>
<el-table-column label="流程版本" align="center">
<template slot-scope="scope">
<el-tag size="medium" >v{{scope.row.procDefVersion}}</el-tag>
</template>
</el-table-column>
<el-table-column label="流程发起人" align="center">
<template slot-scope="scope">
<label>{{scope.row.startUserName}} <el-tag type="info" size="mini">{{scope.row.startDeptName}}</el-tag></label>
</template>
</el-table-column>
<el-table-column label="接收时间" align="center" prop="createTime" width="180"/>
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<template slot-scope="scope">
<el-button
size="mini"
type="text"
icon="el-icon-edit-outline"
@click="handleProcess(scope.row)"
>处理
</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"
/>
</div>
</template>
<script>
import {
todoList,
complete,
returnList,
returnTask,
rejectTask,
getDeployment,
delDeployment,
exportDeployment
} from "@/api/flowable/todo";
export default {
name: "Deploy",
components: {},
data() {
return {
//
loading: true,
//
ids: [],
//
single: true,
//
multiple: true,
//
showSearch: true,
//
total: 0,
//
todoList: [],
//
title: "",
//
open: false,
//
queryParams: {
pageNum: 1,
pageSize: 10,
name: null,
category: null
},
//
form: {},
//
rules: {}
};
},
created() {
this.getList();
},
methods: {
/** 查询流程定义列表 */
getList() {
this.loading = true;
todoList(this.queryParams).then(response => {
this.todoList = response.data.records;
this.total = response.data.total;
this.loading = false;
});
},
//
handleProcess(row){
this.$router.push({ path: '/flowable/task/record/index',
query: {
procInsId: row.procInsId,
executionId: row.executionId,
deployId: row.deployId,
taskId: row.taskId,
finished: true
}})
},
//
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();
},
//
handleSelectionChange(selection) {
this.ids = selection.map(item => item.id)
this.single = selection.length !== 1
this.multiple = !selection.length
},
/** 新增按钮操作 */
handleAdd() {
this.reset();
this.open = true;
this.title = "添加流程定义";
},
/** 修改按钮操作 */
handleUpdate(row) {
this.reset();
const id = row.id || this.ids
getDeployment(id).then(response => {
this.form = response.data;
this.open = true;
this.title = "修改流程定义";
});
},
/** 删除按钮操作 */
handleDelete(row) {
const ids = row.id || this.ids;
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>
Loading…
Cancel
Save