init
This commit is contained in:
kk
144
src/views/work/process/leave/detail.vue
Normal file
144
src/views/work/process/leave/detail.vue
Normal file
@@ -0,0 +1,144 @@
|
||||
<template>
|
||||
<basic-container>
|
||||
<el-form ref="form" :model="form" label-width="80px">
|
||||
<el-row type="flex" class="row-bg" justify="end">
|
||||
<el-form-item>
|
||||
<el-button @click="handleCancel">关闭</el-button>
|
||||
</el-form-item>
|
||||
</el-row>
|
||||
<el-card shadow="hover">
|
||||
<template #header>
|
||||
<div>
|
||||
<span>审批信息</span>
|
||||
</div>
|
||||
</template>
|
||||
<el-form-item label="申请人">
|
||||
<el-input :disabled="true" v-model="form.flow.assigneeName" />
|
||||
</el-form-item>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="开始时间">
|
||||
<el-input :disabled="true" v-model="form.startTime" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="结束时间">
|
||||
<el-input :disabled="true" v-model="form.endTime" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-form-item label="请假理由">
|
||||
<el-input :disabled="true" type="textarea" v-model="form.reason" />
|
||||
</el-form-item>
|
||||
</el-card>
|
||||
<el-card shadow="hover">
|
||||
<template #header>
|
||||
<div>
|
||||
<span>流程信息</span>
|
||||
</div>
|
||||
</template>
|
||||
<el-row type="flex" class="row-bg">
|
||||
<el-timeline>
|
||||
<el-timeline-item
|
||||
:key="flow.id"
|
||||
:timestamp="flow.createTime"
|
||||
v-for="flow in flowList"
|
||||
placement="top"
|
||||
>
|
||||
<el-card shadow="hover">
|
||||
<p>
|
||||
{{ flow.assigneeName }} 在 [{{ flow.createTime }}] 开始处理 [{{
|
||||
flow.historyActivityName
|
||||
}}] 环节
|
||||
</p>
|
||||
<p v-if="flow.historyActivityDurationTime !== ''">
|
||||
任务历时 [{{ flow.historyActivityDurationTime }}]
|
||||
</p>
|
||||
<p v-if="flow.comment !== ''">批复意见: [{{ flow.comment }}]</p>
|
||||
<p v-if="flow.endTime !== ''">结束时间: [{{ flow.endTime }}]</p>
|
||||
</el-card>
|
||||
</el-timeline-item>
|
||||
</el-timeline>
|
||||
</el-row>
|
||||
</el-card>
|
||||
<el-card shadow="hover">
|
||||
<template #header>
|
||||
<div>
|
||||
<span>流程跟踪</span>
|
||||
</div>
|
||||
</template>
|
||||
<el-row class="row-bg">
|
||||
<flow-design
|
||||
style="width: 100%"
|
||||
:is-display="true"
|
||||
:process-instance-id="processInstanceId"
|
||||
></flow-design>
|
||||
</el-row>
|
||||
</el-card>
|
||||
</el-form>
|
||||
</basic-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { historyFlowList, leaveDetail } from '@/api/work/process';
|
||||
import func from '@/utils/func';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
businessId: '',
|
||||
processInstanceId: '',
|
||||
src: '',
|
||||
flowList: [],
|
||||
form: {
|
||||
flow: {
|
||||
assigneeName: '',
|
||||
},
|
||||
startTime: '',
|
||||
endTime: '',
|
||||
reason: '',
|
||||
},
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.init();
|
||||
},
|
||||
watch: {
|
||||
$route(to, from) {
|
||||
if (to.path !== from.path) {
|
||||
this.init();
|
||||
}
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
init() {
|
||||
if (!this.website.design.designMode) {
|
||||
this.src = `/blade-flow/process/diagram-view?processInstanceId=${
|
||||
this.$route.params.processInstanceId
|
||||
}&t=${new Date().getTime()}`;
|
||||
}
|
||||
this.processInstanceId = this.$route.params.processInstanceId;
|
||||
this.businessId = this.$route.params.businessId;
|
||||
if (func.isEmpty(this.processInstanceId) || func.isEmpty(this.businessId)) {
|
||||
return;
|
||||
}
|
||||
historyFlowList(this.processInstanceId).then(res => {
|
||||
const data = res.data;
|
||||
if (data.success) {
|
||||
this.flowList = data.data;
|
||||
}
|
||||
});
|
||||
leaveDetail(this.businessId).then(res => {
|
||||
const data = res.data;
|
||||
if (data.success) {
|
||||
this.form = data.data;
|
||||
}
|
||||
});
|
||||
},
|
||||
handleCancel() {
|
||||
this.$router.$avueRouter.closeTag();
|
||||
this.$router.push({ path: `/work/start` });
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
114
src/views/work/process/leave/form.vue
Normal file
114
src/views/work/process/leave/form.vue
Normal file
@@ -0,0 +1,114 @@
|
||||
<template>
|
||||
<div>
|
||||
<basic-container>
|
||||
<avue-form :option="option" v-model="form" @submit="handleSubmit" />
|
||||
</basic-container>
|
||||
<basic-container v-if="this.website.design.designMode">
|
||||
<flow-design :is-display="true" :process-definition-id="processDefinitionId"></flow-design>
|
||||
</basic-container>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { leaveProcess } from '@/api/work/process';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
processDefinitionId: '',
|
||||
form: {},
|
||||
option: {
|
||||
group: [
|
||||
{
|
||||
icon: 'el-icon-view',
|
||||
label: '请假基础信息',
|
||||
prop: 'group1',
|
||||
column: [
|
||||
{
|
||||
label: '审批人员',
|
||||
prop: 'taskUser',
|
||||
type: 'select',
|
||||
dicUrl: `/blade-system/user/user-list`,
|
||||
props: {
|
||||
label: 'account',
|
||||
value: 'id',
|
||||
},
|
||||
span: 24,
|
||||
rules: [
|
||||
{
|
||||
required: true,
|
||||
message: '请选择审批人员',
|
||||
trigger: 'blur',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: '开始时间',
|
||||
prop: 'startTime',
|
||||
type: 'datetime',
|
||||
valueFormat: 'YYYY-MM-DD HH:mm:ss',
|
||||
rules: [
|
||||
{
|
||||
required: true,
|
||||
message: '请选择开始时间',
|
||||
trigger: 'blur',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: '结束时间',
|
||||
prop: 'endTime',
|
||||
type: 'datetime',
|
||||
valueFormat: 'YYYY-MM-DD HH:mm:ss',
|
||||
rules: [
|
||||
{
|
||||
required: true,
|
||||
message: '请选择结束时间',
|
||||
trigger: 'blur',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: '请假理由',
|
||||
prop: 'reason',
|
||||
type: 'textarea',
|
||||
span: 24,
|
||||
rules: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入请假理由',
|
||||
trigger: 'blur',
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
},
|
||||
created() {
|
||||
if (this.website.design.designMode) {
|
||||
this.processDefinitionId = this.$route.params.processDefinitionId;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleSubmit() {
|
||||
const params = {
|
||||
processDefinitionId: this.$route.params.processDefinitionId,
|
||||
...this.form,
|
||||
};
|
||||
leaveProcess(params).then(resp => {
|
||||
const data = resp.data;
|
||||
if (data.success) {
|
||||
this.$message.success(data.msg);
|
||||
this.$router.$avueRouter.closeTag();
|
||||
this.$router.push({ path: `/work/start` });
|
||||
} else {
|
||||
this.$message.error(data.msg || '提交失败');
|
||||
}
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
203
src/views/work/process/leave/handle.vue
Normal file
203
src/views/work/process/leave/handle.vue
Normal file
@@ -0,0 +1,203 @@
|
||||
<template>
|
||||
<basic-container>
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
|
||||
<el-row type="flex" class="row-bg" justify="end">
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="handleAgree">同意</el-button>
|
||||
<el-button type="danger" @click="handleDisagree">驳回</el-button>
|
||||
<el-button @click="handleCancel">关闭</el-button>
|
||||
</el-form-item>
|
||||
</el-row>
|
||||
<el-card shadow="hover">
|
||||
<template #header>
|
||||
<div>
|
||||
<span>审批信息</span>
|
||||
</div>
|
||||
</template>
|
||||
<el-form-item label="申请人">
|
||||
<el-input :disabled="true" v-model="form.flow.assigneeName" />
|
||||
</el-form-item>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="开始时间">
|
||||
<el-input :disabled="true" v-model="form.startTime" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="结束时间">
|
||||
<el-input :disabled="true" v-model="form.endTime" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-form-item label="请假理由">
|
||||
<el-input :disabled="true" type="textarea" v-model="form.reason" />
|
||||
</el-form-item>
|
||||
<el-form-item label="批复意见">
|
||||
<el-input type="textarea" v-model="form.comment" />
|
||||
</el-form-item>
|
||||
</el-card>
|
||||
<el-card shadow="hover">
|
||||
<template #header>
|
||||
<div>
|
||||
<span>流程信息</span>
|
||||
</div>
|
||||
</template>
|
||||
<el-row type="flex" class="row-bg">
|
||||
<el-timeline>
|
||||
<el-timeline-item
|
||||
:key="flow.id"
|
||||
:timestamp="flow.createTime"
|
||||
v-for="flow in flowList"
|
||||
placement="top"
|
||||
>
|
||||
<el-card shadow="hover">
|
||||
<p>
|
||||
{{ flow.assigneeName }} 在 [{{ flow.createTime }}] 开始处理 [{{
|
||||
flow.historyActivityName
|
||||
}}] 环节
|
||||
</p>
|
||||
<p v-if="flow.historyActivityDurationTime !== ''">
|
||||
任务历时 [{{ flow.historyActivityDurationTime }}]
|
||||
</p>
|
||||
<p v-if="flow.comment !== ''">批复意见: [{{ flow.comment }}]</p>
|
||||
<p v-if="flow.endTime !== ''">结束时间: [{{ flow.endTime }}]</p>
|
||||
</el-card>
|
||||
</el-timeline-item>
|
||||
</el-timeline>
|
||||
</el-row>
|
||||
</el-card>
|
||||
<el-card shadow="hover">
|
||||
<template #header>
|
||||
<div>
|
||||
<span>流程跟踪</span>
|
||||
</div>
|
||||
</template>
|
||||
<el-row v-if="this.website.design.designMode">
|
||||
<flow-design
|
||||
style="width: 100%"
|
||||
:is-display="true"
|
||||
:process-instance-id="processInstanceId"
|
||||
></flow-design>
|
||||
</el-row>
|
||||
<el-row v-else type="flex" class="row-bg">
|
||||
<img :src="src" alt="design" />
|
||||
</el-row>
|
||||
</el-card>
|
||||
</el-form>
|
||||
</basic-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { historyFlowList, leaveDetail } from '@/api/work/process';
|
||||
import { completeTask } from '@/api/work/work';
|
||||
import func from '@/utils/func';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
taskId: '',
|
||||
businessId: '',
|
||||
processInstanceId: '',
|
||||
src: '',
|
||||
flowList: [],
|
||||
form: {
|
||||
flow: {
|
||||
assigneeName: '',
|
||||
},
|
||||
startTime: '',
|
||||
endTime: '',
|
||||
reason: '',
|
||||
comment: '',
|
||||
},
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.init();
|
||||
},
|
||||
watch: {
|
||||
$route(to, from) {
|
||||
if (to.path !== from.path) {
|
||||
this.init();
|
||||
}
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
init() {
|
||||
if (!this.website.design.designMode) {
|
||||
this.src = `/blade-flow/process/diagram-view?processInstanceId=${
|
||||
this.$route.params.processInstanceId
|
||||
}&t=${new Date().getTime()}`;
|
||||
}
|
||||
this.taskId = this.$route.params.taskId;
|
||||
this.processInstanceId = this.$route.params.processInstanceId;
|
||||
this.businessId = this.$route.params.businessId;
|
||||
if (
|
||||
func.isEmpty(this.taskId) ||
|
||||
func.isEmpty(this.processInstanceId) ||
|
||||
func.isEmpty(this.businessId)
|
||||
) {
|
||||
return;
|
||||
}
|
||||
historyFlowList(this.processInstanceId).then(res => {
|
||||
const data = res.data;
|
||||
if (data.success) {
|
||||
this.flowList = data.data;
|
||||
}
|
||||
});
|
||||
leaveDetail(this.businessId).then(res => {
|
||||
const data = res.data;
|
||||
if (data.success) {
|
||||
this.form = data.data;
|
||||
}
|
||||
});
|
||||
},
|
||||
handleAgree() {
|
||||
if (!this.form.comment) {
|
||||
this.$message.warning('请先填写批复意见');
|
||||
return;
|
||||
}
|
||||
const params = {
|
||||
taskId: this.taskId,
|
||||
processInstanceId: this.processInstanceId,
|
||||
flag: 'ok',
|
||||
comment: this.form.comment,
|
||||
};
|
||||
completeTask(params).then(res => {
|
||||
const data = res.data;
|
||||
if (data.success) {
|
||||
this.$message.success(data.msg);
|
||||
this.$router.$avueRouter.closeTag();
|
||||
this.$router.push({ path: `/work/start` });
|
||||
} else {
|
||||
this.$message.error(data.msg || '提交失败');
|
||||
}
|
||||
});
|
||||
},
|
||||
handleDisagree() {
|
||||
if (!this.form.comment) {
|
||||
this.$message.warning('请先填写批复意见');
|
||||
return;
|
||||
}
|
||||
const params = {
|
||||
taskId: this.taskId,
|
||||
processInstanceId: this.processInstanceId,
|
||||
comment: this.form.comment,
|
||||
};
|
||||
completeTask(params).then(res => {
|
||||
const data = res.data;
|
||||
if (data.success) {
|
||||
this.$message.success(data.msg);
|
||||
this.$router.$avueRouter.closeTag();
|
||||
this.$router.push({ path: `/work/start` });
|
||||
} else {
|
||||
this.$message.error(data.msg || '提交失败');
|
||||
}
|
||||
});
|
||||
},
|
||||
handleCancel() {
|
||||
this.$router.$avueRouter.closeTag();
|
||||
this.$router.push({ path: `/work/start` });
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
Reference in New Issue
Block a user