hi-ucs/back/src/views/modules/activiti/demo/abilitydemandapply.vue

368 lines
12 KiB
Vue
Raw Normal View History

2022-06-14 09:32:49 +08:00
<!-- 流程业务表单 -->
<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>
2022-11-15 14:57:22 +08:00
</el-tooltip>
2022-06-14 09:32:49 +08:00
</el-form-item>
<el-form-item v-if="dataForm.enclosure" label="申请附件" prop="enclosure">
2022-11-15 14:57:22 +08:00
<button
style="
width: 100px;
height: 30px;
margin-right: 10px;
background: rgb(237, 244, 252);
color: rgb(0, 135, 255);
font-size: 14px;
border-radius: 6px;
border: 1px solid rgb(187, 211, 239);
padding: 0px;
text-align: center;
cursor: pointer;
"
@click="downloadFile(dataForm.enclosure, '申请附件')"
>
附件下载
</button>
<!-- <el-button class="DownloadAttachment" @click="downloadFile(dataForm.enclosure, '申请附件')">附件下载</el-button> -->
2022-06-14 09:32:49 +08:00
</el-form-item>
</el-form>
<!-- 流程综合组件 -->
2022-08-03 12:10:56 +08:00
<!-- <ren-process-multiple
2022-06-14 09:32:49 +08:00
v-if="processVisible"
updateInstanceIdUrl="/processForm/tabilityapplication/updateInstanceId"
saveFormUrl="/processForm/tabilityapplication"
dataFormName="dataForm"
ref="renProcessMultiple"
2022-08-03 12:10:56 +08:00
></ren-process-multiple> -->
<!-- 审批 -->
<div class="agreeOr" v-if="taskId">
<div>
<el-button type="primary" @click="showDialog('同意')">同意</el-button>
<el-button type="danger" plain @click="showDialog('拒绝')"
>驳回</el-button
>
</div>
</div>
<!-- 审批弹窗 -->
<el-dialog
title="审批意见"
:close-on-click-modal="false"
:visible.sync="dialogVisible"
width="30%"
:before-close="handleClose"
>
<el-input v-model="input" placeholder="请输入审批意见"></el-input>
<span slot="footer" class="dialog-footer">
<el-button @click="handleClose2"> </el-button>
<el-button
type="primary"
@click.native="agreeOrNot($store.state.contentTabsActiveName)"
> </el-button
>
</span>
</el-dialog>
2022-06-14 09:32:49 +08:00
</el-card>
</template>
<script>
// 引入工作流公共方法
import processModule from '@/mixins/process-module'
2022-08-03 12:10:56 +08:00
import qs from 'qs'
import debounce from 'lodash/debounce'
import bus from '@/views/bus.js'
2022-06-14 09:32:49 +08:00
export default {
// 注入公共方法
mixins: [processModule],
data () {
return {
2022-08-03 12:10:56 +08:00
// visible: false,
2022-06-14 09:32:49 +08:00
// 表单属性是否可编辑
fieldDisabled: false,
dataForm: {
id: '',
user: '',
phone: '',
unit: '',
area: '',
system: '',
scene: '',
basis: ''
2022-08-03 12:10:56 +08:00
},
// 审批
dialogVisible: false,
dialogType: '',
input: '',
visible: true,
taskId: ''
2022-06-14 09:32:49 +08:00
}
},
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)
2022-08-03 12:10:56 +08:00
this.taskId = this.$route.params.taskId
this.dataForm.taskId = this.$route.params.taskId
2022-06-14 09:32:49 +08:00
},
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(() => {})
},
2022-08-03 12:10:56 +08:00
// 审批
showDialog (title) {
this.dialogVisible = true
this.dialogType = title
},
handleClose (done) {
this.$confirm('确认关闭?')
.then((_) => {
this.input = ''
done()
})
.catch((_) => {})
},
handleClose2 () {
this.dialogVisible = false
this.input = ''
},
// 同意与退回
agreeOrNot: debounce(
function (data) {
this.dataForm.taskId = this.$route.params.taskId
if (this.dialogType === '同意') {
if (this.input !== '') {
console.log('this.dataForm', this.dataForm)
const params = qs.stringify({
taskId: this.dataForm.taskId,
comment: this.input
})
console.log(params)
this.$http
.post('/act/task/complete?' + params)
.then(({ data: res }) => {
if (res.code !== 0) {
this.$message.error(res.msg)
if (this.callbacks.taskHandleErrorCallback) {
this.callbacks.taskHandleErrorCallback(res)
}
return
}
bus.$emit('AbilityResourcesRemovedInit')
this.$message({
message: this.$t('prompt.success'),
type: 'success',
duration: 500,
onClose: () => {
this.visible = false
this.dialogVisible = false
if (this.callbacks.taskHandleSuccessCallback) {
this.callbacks.taskHandleSuccessCallback(res)
}
}
})
})
.catch(() => {})
this.tabRemoveHandle(data)
} else {
this.$message.error('请输入审批意见!')
}
} else if (this.dialogType === '拒绝') {
if (this.input !== '') {
const params = qs.stringify({
taskId: this.dataForm.taskId,
comment: this.input
})
this.$http
.post('/act/task/backToFirst?', params)
.then(({ data: res }) => {
if (res.code !== 0) {
this.$message.error(res.msg)
if (this.callbacks.taskHandleErrorCallback) {
this.callbacks.taskHandleErrorCallback(res)
}
return
}
bus.$emit('AbilityResourcesRemovedInit')
this.$message({
message: this.$t('prompt.success'),
type: 'success',
duration: 500,
onClose: () => {
this.visible = false
if (this.callbacks.taskHandleSuccessCallback) {
this.callbacks.taskHandleSuccessCallback(res)
}
}
})
})
this.tabRemoveHandle(data)
} else {
this.$message.error('请输入审批意见!')
}
}
},
1000,
{ leading: true, trailing: false }
),
tabRemoveHandle (tabName) {
console.log(tabName, 'aaaaaaaaaaaaaaaaaaaaaaaaaaaaaa')
if (tabName === 'home') {
return false
}
this.$store.state.contentTabs = this.$store.state.contentTabs.filter(
(item) => item.name !== tabName
)
if (this.$store.state.contentTabs.length <= 0) {
this.$store.state.sidebarMenuActiveName =
this.$store.state.contentTabsActiveName = 'home'
return false
}
// 当前选中tab被删除
if (tabName === this.$store.state.contentTabsActiveName) {
const tab =
this.$store.state.contentTabs[
this.$store.state.contentTabs.length - 1
]
this.$router.push({
name: /^iframe_.+/.test(tab.name) ? 'iframe' : tab.name,
params: { ...tab.params },
query: { ...tab.query }
})
}
},
2022-06-14 09:32:49 +08:00
// 启动流程出错回调
startProcessErrorCallback (data) {
console.log(data)
},
// 任务处理出错回调
taskHandleErrorCallback (data) {}
}
}
</script>
2022-08-03 12:10:56 +08:00
<style lang="scss">
2022-11-15 14:57:22 +08:00
.DownloadAttachment {
position: absolute;
right: 10px;
top: -150px;
}
2022-08-03 12:10:56 +08:00
.agreeOr {
& > div {
// text-align: right;
padding-right: 40px;
margin: 20px 0;
}
}
</style>