作者 朱兆平

表单任务优化,以及自定义表单

... ... @@ -24,7 +24,8 @@ module.exports = {
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src'),
'scss_vars': '@/styles/vars.scss',
'img':resolve('src/assets/img')
'img':resolve('src/assets/img'),
'core':path.join(__dirname,'core')
}
},
module: {
... ...
... ... @@ -15,13 +15,14 @@
"common": "^0.2.5",
"echarts": "^5.0.1",
"echarts-liquidfill": "^3.0.0",
"element-ui": "^2.13.0",
"element-ui": "^2.13.2",
"eslint": "^5.14.1",
"eslint-plugin-html": "^6.0.2",
"eslint-plugin-vue": "^8.7.1",
"fecha": "^4.2.0",
"file-saver": "^2.0.2",
"font-awesome": "^4.7.0",
"form-gen-parser": "^1.0.3",
"html2canvas": "^1.0.0-rc.5",
"install": "^0.12.2",
"js-cookie": "^2.2.1",
... ... @@ -33,12 +34,12 @@
"nprogress": "^0.2.0",
"script-loader": "^0.7.2",
"sortablejs": "^1.15.0",
"vue": "^2.2.2",
"vue": "^2.5.2",
"vue-count-to": "^1.0.13",
"vue-i18n": "^8.14.0",
"vue-quill-editor": "^3.0.6",
"vue-router": "^2.3.0",
"vuex": "^2.0.0-rc.6",
"vuex": "^3.6.2",
"xlsx": "^0.15.6"
},
"devDependencies": {
... ...
... ... @@ -13,6 +13,17 @@ export default {
}
})
},
postWithFrom(url, data) {
return axios({
method: 'POST', // 请求协议
url: url, // 请求的地址
params: data, // post 请求的数据
timeout: 30000, // 超时时间, 单位毫秒
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
}
})
},
get(url, params) {
return axios({
method: 'GET',
... ...
... ... @@ -14,10 +14,17 @@ export const instanceList = params => { return http.get(`${baseUrl}/process/inst
export const histroyList = params => { return http.get(`${baseUrl}/process/histroyList`, params); };
export const processDiagram = params => { return http.getStream(`${baseUrl}/processDiagram`, params); };
export const jobsCancelApi = params => { return http.postWithFrom(`${baseUrl}/process/deleteProcess`, params); };
//任务管理
export const allTask = params => { return http.get(`${baseUrl}/task/allTask`, params); };
export const allTaskHistory = params => { return http.get(`${baseUrl}/task/allTaskHistory`, params); };
export const myTask = params => { return http.get(`${baseUrl}/task/userTask`, params); };
export const handleTask = params => { return http.post(`${baseUrl}/task/executeTaskWithForm`, params); };
//表单
export const getFormResource = params => { return http.get(`${baseUrl}/form/getFormResource`, params); };
export const getAllTaskFormInfo = params => { return http.get(`${baseUrl}/form/getAllTaskFormInfo`, params); };
... ...
... ... @@ -16,6 +16,7 @@ import * as socketApi from './api/socket'
import '@/styles/index.scss'
import sys_init from '@/common/init/sys_init'
// 条形组件
import VueBarcode from '@xkeshi/vue-barcode'; //导入条形码插件
Vue.component('barcode', VueBarcode);
... ... @@ -38,6 +39,7 @@ Vue.use(ElementUI,
// eslint-disable-next-line no-undef
size: 'mini'
})
// 注册组件库
Vue.use(VueRouter)
Vue.use(Vuex)
Vue.prototype.$axios = axios;
... ...
... ... @@ -13,6 +13,7 @@ import Department from './views/nav1/department.vue'
import Group from './views/nav1/groupcompany.vue'
import Process from './views/hqpt/Process.vue'
import Job from './views/hqpt/Job.vue'
import FormTest from './views/nav4/formTest.vue'
// import Form from './views/nav1/Form.vue'
... ... @@ -105,6 +106,7 @@ import transit from './views/transit/transit.vue'
import technological from './views/technological/technological.vue'
import example from './views/technological/example.vue'
import task from './views/technological/task.vue'
import myTask from './views/technological/myTask.vue'
import definition from './views/technological/definition.vue'
... ... @@ -193,7 +195,8 @@ let routes = [
iconCls: 'el-icon-collection',
children: [
{path: '/Way', component: Way, name: '货运单'},
{path: '/Webdialog', component: Webdialog, name: '在线客服'}
{path: '/Webdialog', component: Webdialog, name: '在线客服'},
{path: '/formtest', component: FormTest, name: '表单测试'}
]
},
{
... ... @@ -271,6 +274,7 @@ let routes = [
{ path: '/process', component: Process, name: '工单管理' },
{ path: '/job', component: Job, name: '任务管理' },
{path: '/pre1', component: PreManifest, name: '预配'},
{path:'/mytask',component:myTask,name:'我的任务'},
]
},
{
... ...
... ... @@ -73,6 +73,7 @@
label="操作">
<template slot-scope="scope">
<el-button type="success" size="mini" @click="chart(scope.$index,scope.row)">流程图</el-button>
<el-button type="warning" size="mini" @click="jobsCancel(scope.$index,scope.row)">停&nbsp;&nbsp;止</el-button>
<!-- <el-button type="warning" size="mini" @click="remove(scope.$index,scope.row)">删除</el-button>-->
<!-- <el-button type="danger" size="mini" @click="removeDel(scope.$index,scope.row)">彻底删除</el-button>-->
</template>
... ... @@ -348,7 +349,7 @@
</template>
<script>
import {instanceList,processDiagram,histroyList} from "../../api/technological";
import {instanceList,processDiagram,histroyList,jobsCancelApi} from "../../api/technological";
export default {
name: "example",
... ... @@ -411,7 +412,23 @@
this.getList();
},
methods: {
jobsCancel(index,row){
let _this = this
let para = {
processInstanceId: row.processInstanceId,
reason: "工单作废"
}
jobsCancelApi(para).then(response =>{
const res = response.data
if (res.code != '200') {
return _this.$message.error('作废失败!')
}
_this.$message.success('作废成功!')
}).catch(error => {
// 关闭加载
_this.$message.error(error.toString())
})
},
handleClick(tab){
if (tab.index == 0) {
this.getList();
... ... @@ -479,7 +496,6 @@
this.dialogloading = true;
processDiagram({processId:row.processInstanceId}).then(res =>{
// eslint-disable-next-line no-console
console.log(res)
this.form.url=window.URL.createObjectURL(res.data);
this.dialogloading = false;
});
... ...
<template>
<el-container>
<el-main>
<el-row>
<el-tabs type="border-card" @tab-click="handleClick">
<el-tab-pane label="我的待办">
<!--检索条件-->
<el-row class="toolbar" style="background-color: white;margin-bottom: 10px">
<el-col :span="6">
<el-input v-model="queryinfo.name" placeholder="任务名称" style="width: 200px" clearable>
<template slot="prepend">任务名称</template>
</el-input>
</el-col>
<el-col :span="6">
<el-input v-model="queryinfo.taskDefinitionKey " placeholder="关键字" style="width: 200px" clearable>
<template slot="prepend">关键字</template>
</el-input>
</el-col>
<el-col :span="8">
<el-button type="primary" v-on:click="geMyTask">查询</el-button>
<!-- <el-button type="success" v-on:click="toAddDialog">新增</el-button>-->
</el-col>
</el-row>
<template>
<el-table
v-loading="tableloading"
:data="tableData"
style="width: 100%"
:default-sort = "{prop: 'date', order: 'descending'}"
:header-cell-style="{background:'#6F8294',color:'#FFFFFF'}" size="mini"
>
<el-table-column
prop="name"
label="任务名称"
width="160">
</el-table-column>
<el-table-column
prop="taskDefinitionKey "
label="关键字">
</el-table-column>
<el-table-column
prop="owner"
label="所有者">
</el-table-column>
<el-table-column
prop="assignee "
label="执行者"
width="160"
show-overflow-tooltip>
</el-table-column>
<el-table-column
prop="createTime"
label="开始时间"
width="160">
</el-table-column>
<el-table-column
fixed="right"
label="操作"
width="280">
<template slot-scope="scope">
<el-button type="success" size="mini" @click="checkProcess(scope.$index,scope.row)">查看进度</el-button>
<el-button type="warning" size="mini" @click="getProcessFormInfoPromise(scope.$index,scope.row)">办理任务</el-button>
<el-button type="danger" size="mini" @click="handleTask(scope.$index,scope.row)">驳回</el-button>
</template>
</el-table-column>
</el-table>
</template>
<!--分页模块-->
<el-row style="float: right;margin-top: 20px">
<el-col>
<div class="block">
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="queryinfo.pageNum"
:page-sizes="[10, 20, 30, 40]"
:page-size="queryinfo.pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="total">
</el-pagination>
</div>
</el-col>
</el-row>
</el-tab-pane>
<el-tab-pane label="我的已办">
<!--检索条件-->
<el-row class="toolbar" style="background-color: white;margin-bottom: 10px">
<el-col :span="6">
<el-input v-model="queryinfo.name" placeholder="任务名称" style="width: 200px" clearable>
<template slot="prepend">任务名称</template>
</el-input>
</el-col>
<el-col :span="6">
<el-input v-model="queryinfo.taskDefinitionKey " placeholder="关键字" style="width: 200px" clearable>
<template slot="prepend">关键字</template>
</el-input>
</el-col>
<el-col :span="8">
<el-button type="primary" v-on:click="getAllList">查询</el-button>
<!-- <el-button type="success" v-on:click="toAddDialog">新增</el-button>-->
</el-col>
</el-row>
<template>
<el-table
v-loading="tableloading"
:data="tableData"
style="width: 100%"
:default-sort = "{prop: 'date', order: 'descending'}"
:header-cell-style="{background:'#6F8294',color:'#FFFFFF'}" size="mini"
>
<el-table-column
prop="name"
label="任务名称"
width="160">
</el-table-column>
<el-table-column
prop="taskDefinitionKey"
label="关键字">
</el-table-column>
<el-table-column
prop="owner"
label="所有者">
</el-table-column>
<el-table-column
prop="assignee"
label="执行人"
width="160"
show-overflow-tooltip>
</el-table-column>
<el-table-column
prop="createTime"
label="开始时间"
width="160">
</el-table-column>
<!-- <el-table-column-->
<!-- fixed="right"-->
<!-- label="操作"-->
<!-- width="280">-->
<!-- <template slot-scope="scope">-->
<!-- <el-button type="success" size="mini" @click="sendForm()">实例管理</el-button>-->
<!-- <el-button type="warning" size="mini" @click="remove(scope.$index,scope.row)">删除</el-button>-->
<!-- <el-button type="danger" size="mini" @click="removeDel(scope.$index,scope.row)">彻底删除</el-button>-->
<!-- </template>-->
<!-- </el-table-column>-->
</el-table>
</template>
<!--分页模块-->
<el-row style="float: right;margin-top: 20px">
<el-col>
<div class="block">
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="queryinfo.pageNum"
:page-sizes="[10, 20, 30, 40]"
:page-size="queryinfo.pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="total">
</el-pagination>
</div>
</el-col>
</el-row>
</el-tab-pane>
<el-tab-pane label="我发起的">
<!--检索条件-->
<el-row class="toolbar" style="background-color: white;margin-bottom: 10px">
<el-col :span="6">
<el-input v-model="queryinfo.name" placeholder="任务名称" style="width: 200px" clearable>
<template slot="prepend">任务名称</template>
</el-input>
</el-col>
<el-col :span="6">
<el-input v-model="queryinfo.taskDefinitionKey " placeholder="关键字" style="width: 200px" clearable>
<template slot="prepend">关键字</template>
</el-input>
</el-col>
<el-col :span="8">
<el-button type="primary" v-on:click="getMyList">查询</el-button>
<!-- <el-button type="success" v-on:click="toAddDialog">新增</el-button>-->
</el-col>
</el-row>
<template>
<el-table
v-loading="tableloading"
:data="tableData"
style="width: 100%"
:default-sort = "{prop: 'date', order: 'descending'}"
:header-cell-style="{background:'#6F8294',color:'#FFFFFF'}" size="mini"
>
<el-table-column
prop="name"
label="任务名称"
width="160">
</el-table-column>
<el-table-column
prop="taskDefinitionKey"
label="关键字">
</el-table-column>
<el-table-column
prop="owner"
label="所有者">
</el-table-column>
<el-table-column
prop="assignee"
label="执行者"
width="160"
show-overflow-tooltip>
</el-table-column>
<el-table-column
prop="createTime"
label="开始时间"
width="160">
</el-table-column>
<!-- <el-table-column-->
<!-- fixed="right"-->
<!-- label="操作"-->
<!-- width="280">-->
<!-- <template slot-scope="scope">-->
<!-- <el-button type="success" size="mini" @click="sendForm()">实例管理</el-button>-->
<!-- <el-button type="warning" size="mini" @click="remove(scope.$index,scope.row)">删除</el-button>-->
<!-- <el-button type="danger" size="mini" @click="removeDel(scope.$index,scope.row)">彻底删除</el-button>-->
<!-- </template>-->
<!-- </el-table-column>-->
</el-table>
</template>
<!--分页模块-->
<el-row style="float: right;margin-top: 20px">
<el-col>
<div class="block">
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="queryinfo.pageNum"
:page-sizes="[10, 20, 30, 40]"
:page-size="queryinfo.pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="total">
</el-pagination>
</div>
</el-col>
</el-row>
</el-tab-pane>
</el-tabs>
</el-row>
</el-main>
<el-dialog title="流程图" :visible.sync="dialogFormVisible" v-loading="dialogloading">
<el-form :model="form">
<el-form-item>
<div class="demo-image__preview">
<el-image
:src="form.url">
</el-image>
</div>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogFormVisible = false">取 消</el-button>
</div>
</el-dialog>
<el-dialog title="任务表单" :visible.sync="dialogTaskFormVisible" v-loading="dialogloading">
<el-divider content-position="left">已提交表单</el-divider>
<el-row>
<el-col :span="12" v-for="(item,index) in AllTaskFormInfoData" :key="item.id">
<el-input
v-model="item.variableValue"
:disabled="true"
v-if="item.variableType==='string'"
>
<template slot="prepend">{{typeOptions[item.variableName]}}</template>
</el-input>
<el-input
v-model="item.variableValue"
:disabled="true"
v-else-if="item.variableType==='long'"
>
<template slot="prepend">{{typeOptions[item.variableName]}}</template>
</el-input>
<el-input
v-model="item.variableValue"
:disabled="true"
v-else-if="item.variableType==='jodadate'"
>
<template slot="prepend">{{typeOptions[item.variableName]}}</template>
</el-input>
<el-switch
v-model="item.variableValue"
active-color="#13ce66"
inactive-color="#ff4949"
active-text="出库完成"
inactive-text="出库未完成"
v-else-if="item.variableType==='boolean'"
disabled
>
</el-switch>
<span v-else>
{{item.variableName}} = {{item.variableValue}} -[类型] {{item.variableType}}
</span>
</el-col>
</el-row>
<el-divider content-position="left">需要提交的表单</el-divider>
<parser :key="key2" :form-conf="formResource" @submit="handleTask" />
</el-dialog>
</el-container>
</template>
<script>
import {allTask, allTaskHistory, myTask, processDiagram, handleTask, getFormResource,getAllTaskFormInfo} from "../../api/technological";
import {loginedUserInfo} from '@/api/user';
import Parser from 'form-gen-parser'
import jsutil from "@/common/js/util";
export default {
name: "mytask",
components: {
Parser
},
data() {
return{
queryinfo:{
assignee:'',
pageNum:1,
pageSize:10,
},
form: {
url: ''
},
dialogFormVisible: false,
dialogTaskFormVisible: false,
dialogloading: false,
sysUserName:'',
total:0,
tableData: [],
tableloading:false,
key2: +new Date(),
formResource: {
"fields": [],
"formRef": "wms_truck_plan",
"formModel": "wms_truck_plan_Data",
"size": "mini",
"labelPosition": "left",
"labelWidth": 100,
"formRules": "rules",
"gutter": 5,
"disabled": false,
"span": 12,
"formBtns": true,
"unFocusedComponentBorder": true
},
submitTaskParm:{
"assignee": "",
"cascade": true,
"outcome": "",
"processDefinitionId": "",
"processInstanceId": "",
"taskDefinitionKey": "",
"taskId": "",
"variables": {}
},
AllTaskFormInfoData: [],
typeOptions: {
"truck_type" : "车辆类型",
"truck_quantity" : "车辆数量",
"waybillNo" : "运单列表",
"scheduleTime" : "预定时间",
"userCompanyId" : "企业信息",
"busnessType" : "业务类型",
"candidateUsername" : "用户名称",
"form_wms_truck_plan_outcome" : "表单输出",
"form_truck_form_outcome" : "表单输出",
"form_truck_distribute_outcome" : "表单输出",
"delivery_complete" : "出库完成"
}
}
},
mounted() {
let user = loginedUserInfo();
this.queryinfo.assignee = user.username;
console.log("当前用户名:"+this.queryinfo.assignee);
this.$nextTick(function () {
this.geMyTask();
})
},
methods: {
// 分页
handleSizeChange(val) {
this.queryinfo.pageSize= val
this.getList()
},
handleCurrentChange(val) {
this.queryinfo.pageNum = val
this.getList()
},
//查询我的任务
geMyTask() {
const _this = this
this.tableloading = true;
myTask(this.queryinfo).then((response) => {
const res = response.data
if (res.code != '200') {
return _this.$message.error('获取消息收发记录,失败!')
}
// 获取列表数据
_this.tableData = res.data
// 获取列表的总记录数
_this.total = res.total
this.tableloading = false;
_this.$message.success('获取消息收发记录,成功!')
}).catch(error => {
// 关闭加载
_this.$message.error(error.toString())
this.tableloading = false;
})
},
//查看进度
checkProcess(index,row){
console.log(row)
this.dialogFormVisible = true
this.dialogloading = true;
processDiagram({processId:row.processInstanceId}).then(res =>{
// eslint-disable-next-line no-console
this.form.url=window.URL.createObjectURL(res.data);
this.dialogloading = false;
}).catch(err => {
this.dialogloading = false;
});
},
// 提交任务
handleTask(paras){
this.dialogloading = true;
let _this=this
this.submitTaskParm.variables = paras
handleTask(this.submitTaskParm).then(response =>{
const res = response.data
if (res.code != '200') {
return _this.$message.error('获取记录失败!')
}
_this.$message.success("任务完成"+res.msg);
_this.dialogTaskFormVisible = false
_this.geMyTask()
this.dialogloading = false;
}).catch(err=>{
_this.$message.error("失败"+err);
this.dialogTaskFormVisible = false
this.dialogloading = false;
})
},
//我发起的任务
getMyList(){
},
//获取工单中已完成任务的表单数据的promise
getProcessFormInfoPromise(index,row){
this.dialogloading = true;
this.dialogTaskFormVisible = true
let _this = this;
this.getProcessFormInfo(index,row).then(data =>{
_this.getFormDefine(index,row)
_this.dialogloading = false;
}).catch(err => {
_this.$message.error(err)
_this.dialogloading = false;
})
},
//获取工单中已完成任务的表单数据
getProcessFormInfo(index,row){
let _this = this;
return new Promise((resolve,reject)=> {
getAllTaskFormInfo({processInstanceId:row.processInstanceId}).then(response =>{
const res = response.data
if (res.code != '200') {
_this.$message.error('获取已提交工单数据失败!')
}
const data =res.data;
_this.AllTaskFormInfoData = data
resolve(data);
}).catch(err => {
_this.$message.error(err)
_this.dialogloading = false;
});
})
},
//获取任务的表单定义
getFormDefine(index,row){
this.submitTaskParm.taskId = row.id
let _this = this;
return new Promise((resolve,reject)=> {
getFormResource({taskid:row.id}).then(response =>{
const res = response.data
if (res.code != '200') {
_this.$message.error('提交任务失败!')
}
const data =res.data;
resolve(data);
if (jsutil.checkNull(data)){
_this.key2 = +new Date()
_this.formResource = JSON.parse(data)
}else {
console.log("此任务没有表单定义")
}
}).catch(err => {
_this.$message.error(err)
});
})
},
//查询
getList() {
const _this = this
this.tableloading = true;
allTask(this.queryinfo).then((response) => {
const res = response.data
if (res.code != '200') {
return _this.$message.error('获取消息收发记录,失败!')
}
// 获取列表数据
_this.tableData = res.data
// 获取列表的总记录数
_this.total = res.total
this.tableloading = false;
_this.$message.success('获取消息收发记录,成功!')
}).catch(error => {
// 关闭加载
_this.$message.error(error.toString())
this.tableloading = false;
})
},
handleClick(tab, event){
if (tab.index == 0) {
this.geMyTask();
} else if (tab.index == 1) {
this.getAllList();
} else {
this.getMyList();
}
},
//查询
getAllList() {
const _this = this
this.tableloading = true;
allTaskHistory(this.queryinfo).then((response) => {
const res = response.data
if (res.code != '200') {
return _this.$message.error('获取消息收发记录,失败!')
}
// 获取列表数据
_this.tableData = res.data
// 获取列表的总记录数
_this.total = res.total
this.tableloading = false;
_this.$message.success('获取消息收发记录,成功!')
}).catch(error => {
// 关闭加载
_this.$message.error(error.toString())
this.tableloading = false;
})
},
}
}
</script>
<style scoped>
</style>
... ...
... ... @@ -13,12 +13,16 @@
</el-input>
</el-col>
<el-col :span="6">
<el-input v-model="queryinfo.taskDefinitionKey " placeholder="关键字" style="width: 200px" clearable>
<el-input v-model="queryinfo.taskDefinitionKey" placeholder="关键字" style="width: 200px" clearable>
<template slot="prepend">关键字</template>
</el-input>
</el-col>
<el-col :span="8">
<el-col :span="6">
<el-input v-model="queryinfo.assignee" placeholder="执行人或组名" style="width: 200px" clearable>
<template slot="prepend">执行人</template>
</el-input>
</el-col>
<el-col :span="6">
<el-button type="primary" v-on:click="getList">查询</el-button>
<!-- <el-button type="success" v-on:click="toAddDialog">新增</el-button>-->
... ... @@ -264,8 +268,9 @@
queryinfo:{
name:'',
taskDefinitionKey:'',
assignee:'',
pageNum:1,
pageSize:10,
pageSize:10
},
total:0,
tableData: [],
... ... @@ -317,6 +322,9 @@
this.getMyList();
}
},
getMyList(){
},
//查询
getAllList() {
const _this = this
... ...
... ... @@ -161,6 +161,8 @@
<el-button type="primary" @click="trans_add">确 定</el-button>
</div>
</el-dialog>
</el-main>
</el-container>
... ... @@ -174,6 +176,30 @@
name: "technological",
data() {
return{
//实例对象
fApi: {},
//表单数据
formvalue: {},
//表单生成规则
formrule: [
{
type: 'input',
field: 'goods_name',
title: '商品名称'
},
{
type: 'datePicker',
field: 'created_at',
title: '创建时间'
}
],
//组件参数配置
formoption: {
//表单提交事件
onSubmit: function (formData) {
alert(JSON.stringify(formData))
}
},
queryinfo:{
name:'',
key:'',
... ...