Files
foton-laws-system-front/src/pages/processCenter/pages/creatProcess/bzdy/step1-1.vue
T
2021-12-22 18:32:18 +08:00

671 lines
31 KiB
Vue

<template>
<div class="bzdyStep1-1">
<!-- 标准调研流程-->
<ProcessHeader toggle>
<template slot="proName">标准调研流程</template>
<template slot="proNode">发起流程</template>
</ProcessHeader>
<div class="headerTabs">
<div class="headerTabsItem" :class="active === '1' ? 'active' : ''" @click="handleTabs('1')">基础信息</div>
<div class="headerTabsItem" :class="active === '2' ? 'active' : ''" @click="handleTabs('2')">人员信息</div>
</div>
<div class="content" v-show="active === '1'">
<div style="flex: auto; overflow: auto;">
<el-form
ref="qbkwForm"
:model="form"
:rules="formRules"
class="label-input-form"
label-width="210px"
>
<ProcessTitle>
<template slot="title">基础信息</template>
</ProcessTitle>
<el-collapse-transition>
<div class="prc-content-border" v-if="foldFormFlag === false">
<el-row :gutter="24">
<el-col :span="24">
<el-form-item label="调研标题" prop="title" class="add-form-item form-item-disabled">
<el-input
v-model="form.title"
placeholder="请输入调研标题"
clearable
></el-input>
</el-form-item>
<el-form-item label="完成时间" prop="date" class="add-form-item form-item-disabled">
<el-date-picker
v-model="form.date"
type="date"
placeholder="请选择完成时间">
</el-date-picker>
</el-form-item>
<el-form-item label="调研模板" prop="modelNameList" class="add-form-item form-item-disabled">
<el-input
disabled
style="display: none;"
v-model="form.modelNameList"
clearable
></el-input>
<div v-if="form.modelList.length > 0">
<div v-for="(item, index) in form.modelList" :key="index" style="margin-right: 5px;">
<div class="fileClass" >
<span @click="handlePreview(item)">{{ item.name }}</span>
<el-button
size="small"
@click="clickButtonToUpload(item)"
icon="el-icon-download"
style="height: 32px; margin-left: 5px;"
></el-button>
</div>
</div>
</div>
<el-button
type="primary"
class="common-button-primary"
@click="fileUpload"
size="mini">
点击上传
</el-button>
</el-form-item>
<el-form-item label="相关附件" prop="modelNameList" class="add-form-item form-item-disabled">
<el-input
disabled
style="display: none;"
v-model="form.fjNameList"
clearable
></el-input>
<div v-if="form.fjList.length > 0">
<div v-for="(item, index) in form.fjList" :key="index" style="margin-right: 5px;">
<div class="fileClass" >
<span @click="handlePreview(item)">{{ item.name }}</span>
<el-button
size="small"
@click="clickButtonToUpload(item)"
icon="el-icon-download"
style="height: 32px; margin-left: 5px;"
></el-button>
</div>
</div>
</div>
<div>
<el-button
type="primary"
class="common-button-primary"
@click="fileUpload2"
size="mini">
点击上传
</el-button>
</div>
</el-form-item>
</el-col>
</el-row>
</div>
</el-collapse-transition>
<el-button v-if="foldFormFlag === false" style="width: 100%" icon="el-icon-caret-top" @click="foldForm">隐藏基础信息</el-button>
<el-button v-if="foldFormFlag === true" style="width: 100%" icon="el-icon-caret-bottom" @click="foldForm">展开基础信息</el-button>
</el-form>
</div>
<el-collapse accordion>
<el-collapse-item title="回执说明">
<div style="margin: 10px 0;">
<el-input
type="textarea"
:rows="3"
resize="none"
placeholder="请输入意见"
v-model="commentText">
</el-input>
</div>
</el-collapse-item>
</el-collapse>
</div>
<div class="content" v-show="active === '2'">
<div class="block" style="padding-top: 20px;">
<el-timeline>
<el-form
ref="Form"
:model="roleForm"
:rules="roleFormRules"
class="label-input-form myForm">
<el-timeline-item timestamp="发起流程" placement="top" :color="roleForm.startUser ? '#66b1ff' : ''">
<el-card>
<el-form-item prop="startUserName" style="margin-bottom: 0">
<h4>流程发起人</h4>
<div style="margin-top: 10px;width: 300px;">
<el-input v-model="roleForm.startUser" style="display: none;"></el-input>
<el-input v-model="roleForm.startUserName" placeholder="流程发起人" disabled></el-input>
</div>
</el-form-item>
</el-card>
</el-timeline-item>
<el-timeline-item timestamp="选择部门责任人" placement="top" :color="roleForm.dockUserName ? '#66b1ff' : ''">
<el-card>
<el-form-item prop="dockUserName" style="margin-bottom: 0">
<h4>责任部门对接人</h4>
<div style="margin-top: 10px;width: 300px;">
<el-input v-model="roleForm.dockUserList" style="display: none;"></el-input>
<el-input v-model="roleForm.dockUserName" placeholder="选择责任人" @click.native="choiceZRRS">
</el-input>
</div>
</el-form-item>
</el-card>
</el-timeline-item>
<el-timeline-item timestamp="审批" placement="top" :color="roleForm.ministerUser ? '#66b1ff' : ''">
<el-card>
<el-form-item prop="ministerUserName" style="margin-bottom: 0">
<h4>标准法规部部长</h4>
<div style="margin-top: 10px;width: 300px;">
<el-input v-model="roleForm.ministerUser" style="display: none;"></el-input>
<el-input v-model="roleForm.ministerUserName" placeholder="选择标准法规部部长" @click.native="choiceZRR('ministerUser', '选择标准法规部部长', roleForm.ministerUser)"></el-input>
</div>
</el-form-item>
</el-card>
</el-timeline-item>
<el-timeline-item timestamp="审定" placement="top" :color="roleForm.directorUser ? '#66b1ff' : ''">
<el-card>
<el-form-item prop="directorUserName" style="margin-bottom: 0">
<h4>技术管理中心主任</h4>
<div style="margin-top: 10px;width: 300px;">
<el-input v-model="roleForm.directorUser" style="display: none;"></el-input>
<el-input v-model="roleForm.directorUserName" placeholder="选择技术管理中心主任" @click.native="choiceZRR('directorUser', '选择技术管理中心主任', roleForm.directorUser)"></el-input>
</div>
</el-form-item>
</el-card>
</el-timeline-item>
<el-timeline-item timestamp="批准人" placement="top" :color="roleForm.presidentUser ? '#66b1ff' : ''">
<el-card>
<el-form-item prop="presidentUserName" style="margin-bottom: 0">
<h4>工程研究总院院长</h4>
<div style="margin-top: 10px;width: 300px;">
<el-input v-model="roleForm.presidentUser" style="display: none;"></el-input>
<el-input v-model="roleForm.presidentUserName" placeholder="选择工程研究总院院长" @click.native="choiceZRR('presidentUser', '选择工程研究总院院长', roleForm.presidentUser)"></el-input>
</div>
</el-form-item>
</el-card>
</el-timeline-item>
</el-form>
</el-timeline>
</div>
</div>
<ProcessFooter
show-submit
:submitLoading="isSubmit"
:saveLoading="saveLoading"
@save="handleSave"
@submit="handleSubmit"
>
</ProcessFooter>
<Role-tree
is-title="选择责任部门对接人"
:is-visible.sync="modalshowflag2"
@checkedRole="checkedRole2"
:nodeList="nodeList2"
></Role-tree>
<Role-tree
check-box
:is-title="drawerTitle"
:is-visible.sync="modalshowflag"
@checkedRole="checkedRole"
:nodeList="nodeList"
></Role-tree>
<el-dialog width='400px' :visible.sync="fileMadel" title="上传文件">
<el-upload
multiple
class="upload-demo"
drag
:action="fileUrl"
ref="importfile"
name="file"
accept=".ZIP, .zip, .docx, .DOCX, .xls, .xlsx"
:before-upload="beginImportFile"
:on-success="importFileSuccess"
:on-remove="importFileRemove"
:show-file-list="true"
>
<div style="padding: 20px 0">
<i class="el-icon-upload" style="color: #3399ff"></i>
<p>点击或拖拽上传文件</p>
</div>
</el-upload>
</el-dialog>
<el-dialog width='400px' :visible.sync="fileMadel2" title="上传附件">
<el-upload
multiple
class="upload-demo"
drag
:action="fileUrl"
ref="importfile"
name="file"
accept=".ZIP, .zip, .docx, .DOCX, .xls, .xlsx, .pdf, .PDF"
:before-upload="beginImportFile"
:on-success="importFileSuccess2"
:on-remove="importFileRemove2"
:show-file-list="true"
>
<div style="padding: 20px 0">
<i class="el-icon-upload" style="color: #3399ff"></i>
<p>点击或拖拽上传文件</p>
</div>
</el-upload>
</el-dialog>
</div>
</template>
<script>
import ProcessHeader from '../../components/ProcessHeader'
import ProcessFooter from '../../components/ProcessFooter'
import ProcessTitle from '../../components/ProcessTitle'
import { saveTaskFirst, queryTaskFirst, getBusStandFileByAttId,taskDel } from 'api/process'
export default {
name: "bzdyStep1-1",
data() {
return {
foldFormFlag: false,
fileMadel2: false,
nodeList: [],
nodeList2: [],
commentText: '',
type: '',
modalshowflag: false, // drawer开关
drawerTitle: '', //drawer标题
textarea: '', // 意见
title: '', // 新增编辑抽屉标题
ListModel: false, // 新增编辑抽屉开关
active: '1', // 默认显示
isSubmit: false,
saveLoading: false,
form: {
title: '', // 调研标题
date: '', // 完成时间
fjList: [],
fjNameList: '',
modelList: [],
modelNameList: ''
},
formRules: {
title: [
{ required: true, message: '请输入调研标题', trigger: 'blur' },
],
date: [
{ type: 'date', required: true, message: '请选择完成时间', trigger: 'change' }
],
// modelNameList: [
// { required: true, message: '请上传调研结果', trigger: 'change' },
// ]
},
roleForm: {
startUserName: this.$store.getters.userInfo.userName,
startUser: this.$store.getters.userInfo.userId,
dockUserList: '',
responUserList: '',
ministerUser: '',
directorUser: '',
presidentUser: '',
dockUserName: '',
responUserListName: '',
ministerUserName: '',
directorUserName: '',
presidentUserName: ''
},
roleFormRules: {
dockUserName: [
{ required: true, message: '请选择责任部门对接人', trigger: 'change' },
],
ministerUserName: [
{ required: true, message: '请选择标准法规部部长', trigger: 'change' },
],
directorUserName: [
{ required: true, message: '请选择技术管理中心主任', trigger: 'change' },
],
presidentUserName: [
{ required: true, message: '请选择工程研究院院长', trigger: 'change' },
]
},
fileUrl: 'api/att/attFile/upload',
fileMadel: false,
modalshowflag2: false,
}
},
components: {
ProcessHeader,
ProcessFooter,
ProcessTitle
},
methods: {
clickButtonToUpload (file) {
const attId = file.attId
if (attId) {
window.location.href = '/api/att/attFile/downloadFileForSar?fileId=' + attId
} else {
this.$message.warning('文件不存在,下载失败')
}
},
getBusStandFileByAttId(attId) {
return new Promise((resolve, reject) => {
getBusStandFileByAttId({
attId
}).then(res => {
if (res.ok) {
resolve(res.data)
} else {
reject()
}
}).catch(e => {
reject(e)
})
})
},
handlePreview(file) {
const attId = file.attId
this.getBusStandFileByAttId(attId)
.then(res => {
if(res){
const editFileInfo = res
if(editFileInfo.fileSuffix === 'pdg' || editFileInfo.fileSuffix === 'PDG'){
window.open('book://ssreader/e0?url='+editFileInfo.downLoadUrl)
}else if(editFileInfo.fileSuffix === 'pdf' || editFileInfo.fileSuffix === 'PDF'){
window.open('/static/pdf/web/viewer.html?file=' + encodeURIComponent('/api/att/attFile/getFileInfo?fileId=' + editFileInfo.id))
}else {
const nowTime = new Date().getTime()
window.open(onlyOfficeUrl+'/onlyOffice?oldFileName=' + editFileInfo.oldFileName + '&fileType=' + editFileInfo.fileSuffix + '&attId=' + editFileInfo.id + '&fileUrl=' + editFileInfo.downLoadUrl + '&key=' + editFileInfo.id + nowTime+'&filePath='+editFileInfo.filePath+'&fileName='+editFileInfo.fileName)
}
}
}).catch(e => {
this.$message.warning('文件不存在,预览失败')
})
},
foldForm() {
this.foldFormFlag = !this.foldFormFlag
},
getData () {
queryTaskFirst({
bpnId: this.$route.query.bpnId
}).then(res => {
let mes = JSON.parse(res.mes)
mes.form.date = new Date(this.$moment(mes.form.date).format('YYYY-MM-DD'))
this.form = mes.form
this.roleForm = mes.roleForm
this.commentText = mes.commentText
})
},
checkedRole2 (data) {
var idList = ''
var nameList = ''
data.forEach( item => {
if (nameList.length > 0) {
nameList += ','
idList += ','
}
idList += item.id
nameList += item.name
})
this.roleForm.dockUserList = idList
this.roleForm.dockUserName = nameList
},
checkedRole (data) {
if (this.type === 'dockUser') {
this.roleForm.dockUser = data[0].id
this.roleForm.dockUserName = data[0].name
} else if (this.type === 'ministerUser') {
this.roleForm.ministerUser = data[0].id
this.roleForm.ministerUserName = data[0].name
} else if (this.type === 'directorUser') {
this.roleForm.directorUser = data[0].id
this.roleForm.directorUserName = data[0].name
} else if (this.type === 'presidentUser') {
this.roleForm.presidentUser = data[0].id
this.roleForm.presidentUserName = data[0].name
}
},
choiceZRRS () {
this.nodeList2 = []
if ( this.roleForm.dockUserList.length > 0) {
this.nodeList2 = this.roleForm.dockUserList.split(',')
}
this.modalshowflag2 = true
},
choiceZRR (type, title, id) {
this.nodeList = []
this.nodeList.push(id)
this.type = type
this.drawerTitle = title
this.modalshowflag = true
},
// 导入按钮 上传之前的钩子
beginImportFile (file) {
var filename = file.name
var index1 = filename.lastIndexOf('.')
var index2 = filename.length
var fileSuffix = filename.substring(index1, index2)
// const fileSuffix = file.name.split('.')[1] // 后缀名
// 判断上传文件格式
if (fileSuffix === '.ppt' || fileSuffix === '.docx' || fileSuffix === '.DOCX' || fileSuffix === '.PPT' || fileSuffix === '.xls' || fileSuffix === '.xlsx' || fileSuffix === '.XLS' || fileSuffix === '.XLSX' || fileSuffix === '.pdf' || fileSuffix === '.PDF') {
return true
} else {
this.spinShow = false
this.$message.error('文件' + file.name + '格式不正确,请上传PPT,DOCX,XLS文件')
return false
}
// 判断文件上传大小
// eslint-disable-next-line no-unreachable
if (file.size / 1024 / 1024 <= 200) {
return true
} else {
this.$message.error('文件' + file.name + '大小不超过200M')
return false
}
return true
},
importFileRemove (file, fileList) {
let list = ''
this.form.modelList = []
fileList.forEach(item => {
this.form.modelList.push(item)
if (list.length > 0) {
list += ','
list += item.name
} else {
list+= item.name
}
})
this.form.modelNameList = list
},
importFileRemove2 (file, fileList) {
let list = ''
this.form.fjList = []
fileList.forEach(item => {
this.form.fjList.push(item)
if (list.length > 0) {
list += ','
list += item.name
} else {
list+= item.name
}
})
this.form.fjNameList = list
},
// 导入标准数据成功后执行
importFileSuccess (response, file) {
if (response.ok) {
this.form.modelList.push(response.data)
let list = ''
this.form.modelList.forEach(item => {
if (list.length > 0) {
list += ','
list += item.name
} else {
list+= item.name
}
})
this.form.modelNameList = list
this.$message({
showClose: true,
message: response.message,
type: 'success'
})
}
},
importFileSuccess2 (response, file) {
if (response.ok) {
this.form.fjList.push(response.data)
let list = ''
this.form.fjList.forEach(item => {
if (list.length > 0) {
list += ','
list += item.name
} else {
list+= item.name
}
})
this.form.fjNameList = list
this.$message({
showClose: true,
message: response.message,
type: 'success'
})
}
},
fileUpload () {
this.fileMadel = true
},
fileUpload2 () {
this.fileMadel2 = true
},
handleTabs(name) {
this.active = name
},
handleSave() {
this.saveLoading = true
let _formData = new FormData()
_formData.append('id', this.bpnId || '')
_formData.append('createUser', this.$store.getters.userInfo.userId)
_formData.append('createUserName', this.$store.getters.userInfo.userName)
_formData.append('prcType', '2')
_formData.append('json', JSON.stringify({
form: this.form,
roleForm: this.roleForm
}))
saveTaskFirst(_formData).then(res => {
this.saveLoading = false
this.$message.success('保存成功')
this.bpnId = res.result
}).catch(e => {
this.saveLoading = false
})
},
handleSubmit() {
this.$refs['qbkwForm'].validate((valid) => {
if (valid) {
this.$refs['Form'].validate((valid) => {
if (valid) {
this.isSubmit = true
this.$http.post('lawss/activiti/startProcessRollBack', {
type: '2'
}, {}, res => {
if (res.ok) {
var json = Object.assign(this.form, this.roleForm)
json.commentText = this.commentText
this.$http.post('lawss/activiti/completeTask', {
json: JSON.stringify(json),
taskId: res.data,
userId: this.$store.getters.userInfo.userId
}, {}, res => {
if (res.success) {
this.$message.success('流程发起成功')
let taskId = {
id: this.$route.query.bpnId
}
taskDel(taskId).then(res=>{
return res
})
this.$router.push('/processCenter')
}
this.isSubmit = false
})
} else {
this.isSubmit = false
this.$message.warning('流程启动失败')
}
})
} else {
return this.$message.warning('请完善人员信息')
}
})
} else {
return this.$message.warning('请完善基础信息')
}
})
}
},
mounted () {
this.getData()
}
}
</script>
<style lang="less" scoped>
@import '~@/assets/styles/style';
.bzdyStep1-1 {
.myForm {
/deep/.el-form-item__content {
line-height: 10px;
}
}
/deep/.el-drawer__container {
.prc-content-border {
border: none;
padding: 0 20px 0;
}
}
position: relative;
height: 100%;
.fileClass {
cursor: pointer;
}
.fileClass:hover{
color: #0c91e5;
}
.headerTabs {
height: 52px;
display: flex;
align-items: center;
position: absolute;
top: 0;
right: 10px;
.headerTabsItem {
border: 1px solid #c1c1c1;
padding: 0 5px;
height: 30px;
line-height: 30px;
cursor: pointer;
}
.active {
border: 1px solid #E6A23C;
color: #fff;
background: #E6A23C;
}
}
.content {
display: flex;
flex-direction: column;
justify-content: space-between;
height: calc(~'100% - 103px');
overflow: auto;
.tableTitle {
margin-bottom: 10px;
height: 30px;
line-height: 30px;
position: relative;
font-size: 13px;
font-weight: bold;
.tableButton {
position: absolute;
right: 0;
top: 0;
}
}
}
}
</style>