You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
306 lines
8.8 KiB
306 lines
8.8 KiB
<template> |
|
<nf-container v-if="moduleLoadInit"> |
|
<el-skeleton :loading="waiting" avatar :rows="8"> |
|
<h3 style="margin-bottom: 20px">{{ process.name }}</h3> |
|
<el-card shadow="never" style="margin-top: 20px"> |
|
<!-- 自定义表单区域 --> |
|
<nf-form |
|
v-if=" |
|
option && |
|
((option.column && option.column.length > 0) || |
|
(option.group && option.group.length > 0)) |
|
" |
|
v-model="form" |
|
ref="form" |
|
:option="option" |
|
@submit="handleSubmit" |
|
@error="loading = false" |
|
:upload-preview="handleUploadPreview" |
|
> |
|
</nf-form> |
|
<!-- 自定义表单区域 --> |
|
</el-card> |
|
|
|
<el-card shadow="never" style="margin-top: 20px" v-if="showExamForm"> |
|
<nf-examine-form |
|
ref="examineForm" |
|
:process="process" |
|
@user-select="handleUserSelect" |
|
></nf-examine-form> |
|
</el-card> |
|
<div style="height: 80px"></div> |
|
<el-affix position="bottom" :offset="20"> |
|
<el-row |
|
class="foot-item" |
|
:style="{ width: isCollapse ? 'calc(100% - 71px)' : 'calc(100% - 241px)' }" |
|
> |
|
<el-button type="primary" size="default" v-loading="loading" @click="handleSubmit"> |
|
发起 |
|
</el-button> |
|
<el-button |
|
v-if="permission.wf_process_draft" |
|
type="success" |
|
size="default" |
|
v-loading="loading" |
|
@click=" |
|
handleDraft({ processDefId: process.id, formKey: process.formKey, variables: form }) |
|
" |
|
> |
|
存为草稿 |
|
</el-button> |
|
</el-row> |
|
</el-affix> |
|
</el-skeleton> |
|
|
|
<!-- 人员选择弹窗 --> |
|
<nf-user-select |
|
ref="user-select" |
|
:check-type="checkType" |
|
:default-checked="defaultChecked" |
|
@onConfirm="handleUserSelectConfirm" |
|
></nf-user-select> |
|
</nf-container> |
|
</template> |
|
|
|
<script> |
|
import { submit,startProcess } from '../../../api/demo/leave.js'; |
|
import NfExamineForm from '../../../components/nf-exam-form/index.vue'; |
|
import NfUserSelect from '../../../components/nf-user-select/index.vue'; |
|
import exForm from '../../../mixins/ex-form'; |
|
import draft from '../../../mixins/draft'; |
|
|
|
export default { |
|
components: { |
|
NfUserSelect, |
|
NfExamineForm, |
|
}, |
|
mixins: [exForm, draft], |
|
watch: { |
|
'$route.query.p': { |
|
handler(val) { |
|
if (val) { |
|
const param = JSON.parse(window.atob(val)); |
|
const { processId, processDefKey, params } = param; |
|
if (processId || processDefKey) this.getForm(processId, processDefKey); |
|
if (params) this.params = params; |
|
} |
|
}, |
|
immediate: true, |
|
}, |
|
}, |
|
computed: { |
|
showExamForm() { |
|
const { hideComment, hideCopy, hideExamine } = this.process; |
|
return !hideComment || !hideCopy || !hideExamine; |
|
}, |
|
}, |
|
data() { |
|
return { |
|
form: {}, |
|
option: { |
|
menuBtn: false, |
|
column: [ |
|
{ |
|
type: 'input', |
|
label: '创建人55555777', |
|
span: 12, |
|
display: true, |
|
prop: 'creator', |
|
value: '${this.$store.getters.userInfo.nick_name}', |
|
readonly: true, |
|
}, |
|
{ |
|
type: 'input', |
|
label: '创建部门', |
|
span: 12, |
|
display: true, |
|
prop: 'creatorDept', |
|
value: '${this.$store.getters.userInfo.dept_name}', |
|
readonly: true, |
|
}, |
|
{ |
|
type: 'datetimerange', |
|
label: '请假时间', |
|
span: 12, |
|
display: true, |
|
format: 'YYYY-MM-DD HH:mm:ss', |
|
valueFormat: 'YYYY-MM-DD HH:mm:ss', |
|
prop: 'datetime', |
|
dataType: 'string', |
|
required: true, |
|
rules: [ |
|
{ |
|
required: true, |
|
message: '开始时间必须填写', |
|
}, |
|
], |
|
change: ({ value }) => { |
|
if (!value || value.length == 0) { |
|
this.form.day = undefined; |
|
} else { |
|
const d1 = Date.parse(value.split(',')[0]); |
|
const d2 = Date.parse(value.split(',')[1]); |
|
const day = (d2 - d1) / (1 * 24 * 60 * 60 * 1000); |
|
this.form.days = Number(day.toFixed(2)); |
|
} |
|
}, |
|
}, |
|
{ |
|
type: 'number', |
|
label: '请假天数', |
|
span: 12, |
|
display: true, |
|
prop: 'days', |
|
required: true, |
|
rules: [ |
|
{ |
|
required: true, |
|
message: '请假天数必须填写', |
|
}, |
|
], |
|
controls: true, |
|
controlsPosition: 'right', |
|
change: ({ value }) => { |
|
if (value) this.form.reason = '请假' + value + '天'; |
|
else this.form.reason = ''; |
|
}, |
|
}, |
|
{ |
|
type: 'textarea', |
|
label: '请假理由', |
|
span: 24, |
|
display: true, |
|
prop: 'reason', |
|
required: true, |
|
rules: [ |
|
{ |
|
required: true, |
|
message: '请假理由必须填写', |
|
}, |
|
], |
|
}, |
|
{ |
|
label: '附件', |
|
type: 'upload', |
|
propsHttp: { |
|
res: 'data', |
|
url: 'link', |
|
name: 'originalName', |
|
}, |
|
action: '/blade-resource/oss/endpoint/put-file', |
|
display: true, |
|
span: 24, |
|
showFileList: true, |
|
multiple: true, |
|
limit: 10, |
|
prop: 'attachment', |
|
dataType: 'string', |
|
}, |
|
], |
|
}, |
|
process: {}, |
|
loading: false, |
|
params: null, |
|
}; |
|
}, |
|
methods: { |
|
getForm(processId, processDefKey) { |
|
let param; |
|
let method; |
|
if (processId) { |
|
param = processId; |
|
method = 'getStartForm'; |
|
} else if (processDefKey) { |
|
param = processDefKey; |
|
method = 'getStartFormByProcessDefKey'; |
|
} |
|
this[method](param).then(res => { |
|
let { process, startForm } = res; |
|
this.form.processId = process.id; |
|
const option = this.option; |
|
const { column, group } = option; |
|
|
|
const groupArr = []; |
|
const columnArr = this.filterAvueColumn(column, startForm, true).column; |
|
if (group && group.length > 0) { |
|
// 处理group |
|
group.forEach(gro => { |
|
gro.column = this.filterAvueColumn(gro.column, startForm, true).column; |
|
if (gro.column.length > 0) groupArr.push(gro); |
|
}); |
|
} |
|
if (option.initFunction) { |
|
option.initFunction = eval((option.initFunction + '').replace(/this/g, '_this')); |
|
} |
|
option.column = columnArr; |
|
option.group = groupArr; |
|
this.option = option; |
|
|
|
setTimeout(() => { |
|
if (!this.validatenull(this.params)) { |
|
this.form = { ...this.form, ...this.params }; |
|
console.log('外部参数赋值', this.params); |
|
} |
|
}, 500); |
|
|
|
if (this.permission.wf_process_draft) { |
|
// 查询是否有草稿箱 |
|
this.initDraft({ processDefId: process.id }).then(data => { |
|
this.$confirm('是否恢复之前保存的草稿？', '提示', {}) |
|
.then(() => { |
|
this.form = JSON.parse(data); |
|
}) |
|
.catch(() => {}); |
|
}); |
|
} |
|
this.waiting = false; |
|
}); |
|
}, |
|
handleSubmit() { |
|
let form = this.deepClone(this.form); |
|
form = { |
|
...form, |
|
processDefId: form.processId, |
|
formKey: this.process.formKey, |
|
formUrl: this.process.formUrl, |
|
}; |
|
startProcess(form).then(res => { |
|
const data = res.data.data; |
|
this.form.processDefKey = this.process.key; |
|
this.form.businessKey = data.id; |
|
this.handleStartProcessByKey(true) |
|
.then((res, done) => { |
|
const processInsId = res.data.data; |
|
submit({ id: data.id, processInsId }).then(() => { |
|
this.$message.success('发起成功'); |
|
this.handleCloseTag('/plugin/workflow/pages/process/send'); |
|
if (typeof done == 'function') done(); |
|
}); |
|
}) |
|
.catch(() => { |
|
this.loading = false; |
|
}); |
|
}); |
|
}, |
|
}, |
|
}; |
|
</script> |
|
|
|
<style lang="scss" scoped> |
|
.foot-item { |
|
position: fixed; |
|
bottom: 5px; |
|
margin-left: -20px; |
|
// right: 0; |
|
z-index: 101; |
|
height: 66px; |
|
background-color: #fff; |
|
display: flex; |
|
justify-content: center; |
|
align-items: center; |
|
-webkit-transition: 0.3s; |
|
transition: 0.3s; |
|
-webkit-box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); |
|
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); |
|
} |
|
</style>
|
|
|