176 lines
5.3 KiB
Vue
176 lines
5.3 KiB
Vue
<!-- 流程业务表单 -->
|
||
<template>
|
||
<el-card shadow="never" class="aui-card--fill">
|
||
<el-form
|
||
:model="dataForm"
|
||
:rules="dataRule"
|
||
ref="dataForm"
|
||
@keyup.enter.native="dataFormSubmitHandle()"
|
||
:label-width="$i18n.locale === 'en-US' ? '120px' : '80px'"
|
||
>
|
||
<el-form-item label="申请人" prop="user">
|
||
<el-input
|
||
v-model="dataForm.applyUserName"
|
||
:disabled="fieldDisabled"
|
||
placeholder="请输入申请人"
|
||
></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="申请电话" prop="phone">
|
||
<el-input
|
||
v-model="dataForm.applyUserPhone"
|
||
:disabled="fieldDisabled"
|
||
placeholder="请输入申请人电话"
|
||
></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="申请单位" prop="unit">
|
||
<el-input
|
||
v-model="dataForm.applyUserDeptName"
|
||
:disabled="fieldDisabled"
|
||
placeholder="请输入申请单位"
|
||
></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="需求标题" prop="area">
|
||
<el-input
|
||
v-model="dataForm.demandSubject"
|
||
:disabled="fieldDisabled"
|
||
placeholder="需求标题"
|
||
></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="需求类型" prop="system">
|
||
<el-input
|
||
v-model="dataForm.detailsType"
|
||
:disabled="fieldDisabled"
|
||
placeholder="需求类型"
|
||
></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="应用领域" prop="scene">
|
||
<el-input
|
||
v-model="dataForm.detailsField"
|
||
:disabled="fieldDisabled"
|
||
placeholder="应用领域"
|
||
></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="需求描述" prop="basis">
|
||
<el-tooltip class="item" effect="dark" popper-class="kuandukuandukuandu" :content="dataForm.demandDetails" placement="top">
|
||
<el-input
|
||
v-model="dataForm.demandDetails"
|
||
:disabled="fieldDisabled"
|
||
placeholder="需求描述"
|
||
></el-input>
|
||
</el-tooltip>
|
||
</el-form-item>
|
||
<el-form-item v-if="dataForm.enclosure" label="申请附件" prop="enclosure">
|
||
<el-button @click="downloadFile(dataForm.enclosure, '申请附件')">附件下载</el-button>
|
||
</el-form-item>
|
||
</el-form>
|
||
<!-- 流程综合组件 -->
|
||
<ren-process-multiple
|
||
v-if="processVisible"
|
||
updateInstanceIdUrl="/processForm/tabilityapplication/updateInstanceId"
|
||
saveFormUrl="/processForm/tabilityapplication"
|
||
dataFormName="dataForm"
|
||
ref="renProcessMultiple"
|
||
></ren-process-multiple>
|
||
</el-card>
|
||
</template>
|
||
|
||
<script>
|
||
// 引入工作流公共方法
|
||
import processModule from '@/mixins/process-module'
|
||
export default {
|
||
// 注入公共方法
|
||
mixins: [processModule],
|
||
data () {
|
||
return {
|
||
visible: false,
|
||
// 表单属性是否可编辑
|
||
fieldDisabled: false,
|
||
dataForm: {
|
||
id: '',
|
||
user: '',
|
||
phone: '',
|
||
unit: '',
|
||
area: '',
|
||
system: '',
|
||
scene: '',
|
||
basis: ''
|
||
}
|
||
}
|
||
},
|
||
created () {
|
||
// 将业务KEY赋值给表单
|
||
this.dataForm.id = this.$route.params.businessKey
|
||
console.log(this.$route.params)
|
||
this.init()
|
||
// 流程回调
|
||
var callbacks = {
|
||
startProcessSuccessCallback: this.closeCurrentTab,
|
||
startProcessErrorCallback: this.startProcessErrorCallback,
|
||
taskHandleSuccessCallback: this.closeCurrentTab,
|
||
taskHandleErrorCallback: this.taskHandleErrorCallback,
|
||
formSaveSuccessCallback: null,
|
||
formSaveErrorCallback: null
|
||
}
|
||
// 初始化综合组件
|
||
this.initProcessMultiple(callbacks)
|
||
},
|
||
computed: {
|
||
dataRule () {
|
||
return {
|
||
user: [{ required: true, message: '请输入申请人', trigger: 'blur' }],
|
||
phone: [
|
||
{ required: true, message: '请输入申请人电话', trigger: 'blur' },
|
||
{
|
||
type: 'string',
|
||
pattern: /^1[3456789]\d{9}$/,
|
||
message: '请输入正确的电话号码',
|
||
trigger: 'blur'
|
||
}
|
||
],
|
||
unit: [{ required: true, message: '请输入申请单位', trigger: 'blur' }],
|
||
area: [{ required: true, message: '请输入所在地区', trigger: 'blur' }],
|
||
system: [
|
||
{ required: true, message: '请输入申请应用', trigger: 'blur' }
|
||
],
|
||
scene: [{ required: true, message: '请输入应用场景', trigger: 'blur' }],
|
||
basis: [{ required: true, message: '请输入申请依据', trigger: 'blur' }]
|
||
}
|
||
}
|
||
},
|
||
methods: {
|
||
init () {
|
||
this.visible = true
|
||
this.$nextTick(() => {
|
||
this.$refs.dataForm.resetFields()
|
||
if (this.dataForm.id) {
|
||
// 如业务KEY已存在，不允许编辑
|
||
this.fieldDisabled = true
|
||
this.getInfo()
|
||
}
|
||
})
|
||
},
|
||
// 获取信息
|
||
getInfo () {
|
||
this.$http
|
||
.get(`/demanData/${this.dataForm.id}`)
|
||
.then(({ data: res }) => {
|
||
if (res.code !== 0) {
|
||
return this.$message.error(res.msg)
|
||
}
|
||
this.dataForm = {
|
||
...this.dataForm,
|
||
...res.data
|
||
}
|
||
})
|
||
.catch(() => {})
|
||
},
|
||
// 启动流程出错回调
|
||
startProcessErrorCallback (data) {
|
||
console.log(data)
|
||
},
|
||
// 任务处理出错回调
|
||
taskHandleErrorCallback (data) {}
|
||
}
|
||
}
|
||
</script>
|