303 lines
9.7 KiB
Vue
303 lines
9.7 KiB
Vue
<template>
|
||
<div class="app-container">
|
||
<el-drawer
|
||
v-if="onOpen"
|
||
:visible.sync="onOpen"
|
||
ref="drawer"
|
||
direction="rtl"
|
||
size="60%"
|
||
@close="closeCallBack"
|
||
>
|
||
<template slot="title">
|
||
<div>工程管理 【{{ title }}】</div>
|
||
</template>
|
||
<el-form
|
||
ref="form"
|
||
:model="form"
|
||
:rules="rules"
|
||
v-loading="loading"
|
||
label-width="120px"
|
||
style="padding-right: 35px;"
|
||
>
|
||
<div class="mycanvas">
|
||
<div class="canvas" ref="flowCanvas"></div>
|
||
<div class="maskLayer" />
|
||
</div>
|
||
<el-card class="box-card" style="margin-left:35px;">
|
||
<el-descriptions class="margin-top" :title="title" :column="2" size="medium" border>
|
||
<el-descriptions-item :span="2" prop="businessKey">
|
||
<template slot="label">
|
||
<i class="el-icon-map-location"></i>
|
||
所属项目<span class="cr"> *</span>
|
||
</template>
|
||
<el-select
|
||
v-model="form.businessKey"
|
||
placeholder="请选择所属项目"
|
||
style="width: 100%"
|
||
filterable
|
||
:disabled="disPro"
|
||
@change="projectChage"
|
||
>
|
||
<el-option
|
||
v-for="(item,index) in projectOptions"
|
||
:key="index"
|
||
:label="item.projectName"
|
||
:value="item.id"
|
||
>
|
||
</el-option>
|
||
</el-select>
|
||
</el-descriptions-item>
|
||
<el-descriptions-item :span="2" label-class-name="my-label" :labelStyle="labelStyle">
|
||
<template slot="label">
|
||
<i class="el-icon-school"></i>
|
||
申请单位
|
||
</template>
|
||
{{ deptName }}
|
||
</el-descriptions-item>
|
||
<el-descriptions-item :span="2" label-class-name="my-label" :labelStyle="labelStyle">
|
||
<template slot="label">
|
||
<i class="el-icon-collection-tag"></i>
|
||
申请事项
|
||
</template>
|
||
{{ title }}
|
||
</el-descriptions-item>
|
||
<el-descriptions-item label-class-name="my-label" :labelStyle="labelStyle">
|
||
<template slot="label">
|
||
<i class="el-icon-user"></i>
|
||
申请人
|
||
</template>
|
||
{{ nickName }}
|
||
</el-descriptions-item>
|
||
<el-descriptions-item label-class-name="my-label" :labelStyle="labelStyle">
|
||
<template slot="label">
|
||
<i class="el-icon-s-flag"></i>
|
||
申请日期
|
||
</template>
|
||
{{ date }}
|
||
</el-descriptions-item>
|
||
<el-descriptions-item label-class-name="my-label" :labelStyle="labelStyle">
|
||
<template slot="label">
|
||
<i class="el-icon-time"></i>
|
||
请假日期<span class="cr"> *</span>
|
||
</template>
|
||
<el-date-picker
|
||
v-model="daterangeMarksTime"
|
||
style="width: 400px"
|
||
value-format="yyyy-MM-dd"
|
||
type="daterange"
|
||
range-separator="-"
|
||
start-placeholder="开始日期"
|
||
end-placeholder="结束日期"
|
||
@change="checkTime"
|
||
></el-date-picker>
|
||
</el-descriptions-item>
|
||
<el-descriptions-item label-class-name="my-label" :labelStyle="labelStyle">
|
||
<template slot="label">
|
||
<i class="el-icon-tickets"></i>
|
||
请假时间
|
||
</template>
|
||
{{times}}
|
||
</el-descriptions-item>
|
||
<el-descriptions-item :span="2" label-class-name="my-label" :labelStyle="labelStyle">
|
||
<template slot="label">
|
||
<i class="el-icon-chat-dot-square"></i>
|
||
请假事由<span class="cr"> *</span>
|
||
</template>
|
||
<el-input
|
||
type="textarea"
|
||
v-model="form.remark"
|
||
placeholder="请输入申请说明"
|
||
rows="5"
|
||
max="1"
|
||
/>
|
||
</el-descriptions-item>
|
||
</el-descriptions>
|
||
<div style="text-align: center;margin-top: 30px;">
|
||
<el-button type="primary" @click="submitForm">提交申请</el-button>
|
||
<el-button @click="doCanel">取 消</el-button>
|
||
</div>
|
||
</el-card>
|
||
</el-form>
|
||
</el-drawer>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import store from "@/store";
|
||
import { definitionStart, flowXmlAndNode } from "@/api/flowable/definition";
|
||
import { CustomViewer as BpmnViewer } from "@/components/customBpmn";
|
||
import { getNextFlowNodeByStart } from "@/api/flowable/todo";
|
||
|
||
export default {
|
||
components: {},
|
||
props: {
|
||
closeCallBack: {
|
||
type: Function,
|
||
},
|
||
},
|
||
data() {
|
||
return {
|
||
// 抽屉层
|
||
onOpen: false,
|
||
// 遮罩层
|
||
loading: false,
|
||
// 标题
|
||
title: "",
|
||
// 表单参数
|
||
form: {
|
||
businessKey: "",
|
||
projectName: "",
|
||
files: "",
|
||
remark: "",
|
||
},
|
||
// 表单校验
|
||
rules: {},
|
||
projectOptions: null,
|
||
deptName: null,
|
||
nickName: null,
|
||
disPro: false,
|
||
bpmnViewer: null,
|
||
options: {},
|
||
taskTitle: null,
|
||
taskOpen: false,
|
||
daterangeMarksTime: [],
|
||
//label样式
|
||
labelStyle: { width: "180px" },
|
||
times:"... ...",
|
||
date:null
|
||
};
|
||
},
|
||
computed: {},
|
||
watch: {},
|
||
created() {},
|
||
mounted() {},
|
||
beforeDestroy() {},
|
||
methods: {
|
||
// 查询和我相关的项目信息
|
||
initMyProject() {
|
||
// 获取项目列表的接口
|
||
this.$api.publics.getMyProjectList({}).then((response) => {
|
||
this.projectOptions = response.rows;
|
||
if (response.rows.length == 0) {
|
||
this.$message.error("未查询到和您关联项目，请联系子公司或管理员...");
|
||
} else if (response.rows.length == 1) {
|
||
// 这里只有一个项目，默认选中并只读
|
||
this.form.businessKey = response.rows[0].id;
|
||
this.form.projectName = response.rows[0].projectName;
|
||
}
|
||
});
|
||
},
|
||
// 项目选择
|
||
projectChage(val) {
|
||
let projectName = "";
|
||
this.projectOptions.forEach((item) => {
|
||
if ((item.id = val)) {
|
||
projectName = item.projectName;
|
||
return;
|
||
}
|
||
});
|
||
this.form.projectName = projectName;
|
||
},
|
||
doCanel() {
|
||
this.onOpen = false;
|
||
},
|
||
show(options) {
|
||
this.options = options;
|
||
this.form={};
|
||
this.initMyProject();
|
||
this.title = options.name;
|
||
this.deptName = store.getters.dept.deptName;
|
||
this.nickName = store.getters.name;
|
||
this.date = this.$dt(new Date()).format("YYYY-MM-DD");
|
||
this.form.date = this.$dt(new Date()).format("YYYY-MM-DD HH:mm");
|
||
this.onOpen = true;
|
||
flowXmlAndNode({ deployId: options.deploymentId }).then((res) => {
|
||
this.initFlowImage(res.data.xmlData);
|
||
});
|
||
},
|
||
async initFlowImage(data) {
|
||
const self = this;
|
||
try {
|
||
self.bpmnViewer = new BpmnViewer({
|
||
container: this.$refs.flowCanvas,
|
||
height: "150px",
|
||
});
|
||
await self.bpmnViewer.importXML(data);
|
||
// 自适应
|
||
self.bpmnViewer.get("canvas").zoom("fit-viewport", "auto");
|
||
} catch (err) {
|
||
console.error(err.message, err.warnings);
|
||
}
|
||
},
|
||
checkTime(val) {
|
||
let time = new Date(val[1]).getTime()-new Date(val[0]).getTime();
|
||
let hours = time/3600000;
|
||
let day = (hours/24)+1;//这里默认加1天，PS:2023-09-10 2023-09-11实际请假应该为2天，而不是一天
|
||
if(hours%24>0) day++;
|
||
this.form.day=day;
|
||
this.times="共 "+day+" 天"
|
||
},
|
||
submitForm() {
|
||
this.$refs["form"].validate((valid) => {
|
||
if (valid) {
|
||
// 根据当前任务或者流程设计配置的下一步节点 todo 暂时未涉及到考虑网关、表达式和多节点情况
|
||
// getNextFlowNodeByStart({
|
||
// deploymentId: this.options.deploymentId,
|
||
// variables: this.form,
|
||
// }).then((res) => {
|
||
// const data = res.data;
|
||
// if (data) {
|
||
// console.log(data);
|
||
// this.loading = false;
|
||
// }
|
||
// });
|
||
// 启动流程并将表单数据加入流程变量
|
||
if(!this.form.businessKey){
|
||
this.$modal.msgWarning("请选择所属项目...");
|
||
return;
|
||
}
|
||
if (null != this.daterangeMarksTime && "" != this.daterangeMarksTime) {
|
||
this.form.beginDate = this.daterangeMarksTime[0];
|
||
this.form.endDate = this.daterangeMarksTime[1];
|
||
}else{
|
||
this.$modal.msgWarning("请选择请假日期...");
|
||
return;
|
||
}
|
||
if(!this.form.day){
|
||
this.$modal.msgWarning("请选择请假日期...");
|
||
return;
|
||
}
|
||
if(!this.form.remark){
|
||
this.$modal.msgWarning("请输入请假事由...");
|
||
return;
|
||
}
|
||
this.loading = true;
|
||
definitionStart(this.options.id, JSON.stringify(this.form)).then((res) => {
|
||
this.$modal.msgSuccess(res.msg);
|
||
this.loading = false;
|
||
//关闭并刷新列表
|
||
this.$refs.drawer.closeDrawer();
|
||
});
|
||
}
|
||
});
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
<style>
|
||
.bjs-powered-by {
|
||
display: none !important;
|
||
}
|
||
.maskLayer {
|
||
width: 100%;
|
||
height: 150px;
|
||
position: absolute;
|
||
z-index: 9999;
|
||
top: 66px;
|
||
}
|
||
.cr{
|
||
font-weight: 700;
|
||
color: red;
|
||
}
|
||
</style>
|