506 lines
15 KiB
Vue
506 lines
15 KiB
Vue
<template>
|
|
<div class="page">
|
|
<topBar v-if="topList.length > 0"
|
|
:topList="topList"
|
|
:moren="moren"></topBar>
|
|
<div class="main">
|
|
<div class="thetable">
|
|
<div class="fontTitle"> {{'在线签呈'}}</div>
|
|
<div class="titleflex">
|
|
<div>{{'编号'}} :</div>
|
|
<div>
|
|
<el-radio-group v-model="allData.signType">
|
|
<el-radio :label="ctem.value"
|
|
v-for="ctem in checkList"
|
|
:key="ctem.value">{{ ctem.label }}</el-radio>
|
|
</el-radio-group>
|
|
</div>
|
|
</div>
|
|
<table id="tfhover"
|
|
class="tftable"
|
|
border="1">
|
|
<tr>
|
|
<td colspan="1"
|
|
width="190px"
|
|
align="center"> {{'发起部门'}} :</td>
|
|
<td colspan="1"
|
|
v-if="allData.signData"
|
|
width="435px">{{ allData.signData.deptName }}</td>
|
|
<td colspan="1"
|
|
width="140px"
|
|
align="center"> {{'发起人'}} :</td>
|
|
<td colspan="1"
|
|
v-if="allData.signData">{{ allData.signData.userName }}</td>
|
|
</tr>
|
|
<tr>
|
|
<td colspan="1"
|
|
align="center"> {{'主旨'}} :</td>
|
|
<td colspan="1"
|
|
v-if="allData.signData">{{ allData.signData.approvalBusinessVal }}</td>
|
|
<td colspan="1"
|
|
align="center"> {{'日期'}} :</td>
|
|
<td colspan="1"
|
|
v-if="allData.signData">{{ allData.signData.creationTime }}</td>
|
|
</tr>
|
|
<!-- // 审批流程 -->
|
|
<tr>
|
|
<td colspan="1"
|
|
align="center"> {{'审批流程'}}</td>
|
|
<td colspan="3">
|
|
<div class="disflex">
|
|
<span v-for="(ctem, cndex) in allData.signData.detailList"
|
|
style="margin:0 5px 5px 0">
|
|
<el-select v-model="ctem.pkApprover"
|
|
filterable
|
|
size="mini"
|
|
@change="getApprover"
|
|
:placeholder="'请选择'">
|
|
<el-option v-for="item in approbalList"
|
|
:key="item.userId"
|
|
:label="item.nickName + '(' +item.deptName+')'"
|
|
:value="item.userId">
|
|
</el-option>
|
|
</el-select>
|
|
</span>
|
|
<span style="margin:0 5px 5px 0">
|
|
<i class="el-icon-remove-outline"
|
|
@click.stop="delData"
|
|
v-show="allData.signData.detailList.length>0"
|
|
style="font-size:18px;margin-right:5px"></i>
|
|
<i class="el-icon-circle-plus-outline"
|
|
style="font-size:18px"
|
|
@click.stop="addData"></i>
|
|
</span>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td colspan="1"
|
|
align="center">{{'抄送人'}}</td>
|
|
<td colspan="3">
|
|
<div class="disflex">
|
|
<span v-for="(ctem, cndex) in allData.signData.sendList"
|
|
style="margin:0 5px 5px 0">
|
|
<el-select v-model="ctem.pkSend"
|
|
filterable
|
|
size="mini"
|
|
@change="getApprover"
|
|
:placeholder="'请选择'">
|
|
<el-option v-for="item in userAllList"
|
|
:key="item.userId"
|
|
:label="item.nickName + '(' +item.deptName+')'"
|
|
:value="item.userId">
|
|
</el-option>
|
|
</el-select>
|
|
</span>
|
|
<span style="margin:0 5px 5px 0">
|
|
<i class="el-icon-remove-outline"
|
|
@click.stop="delData1"
|
|
v-show="allData.signData.sendList.length>0"
|
|
style="font-size:18px;margin-right:5px"></i>
|
|
<i class="el-icon-circle-plus-outline"
|
|
style="font-size:18px"
|
|
@click.stop="addData1"></i>
|
|
</span>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td style="height: 190px"
|
|
align="center">{{'情况说明'}}</td>
|
|
<td colspan="3"
|
|
style="padding: 0">
|
|
<div>
|
|
<!-- <el-input type="textarea"
|
|
:rows="6"
|
|
:placeholder="'请输入'"
|
|
v-model="allData.remark">
|
|
</el-input> -->
|
|
<noImgEditor v-model="allData.remark"
|
|
:min-height="190"/>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td style="min-height: 193px"
|
|
align="center"> {{'业务诉求'}}</td>
|
|
<td colspan="3"
|
|
style="padding: 0;vertical-align: top;">
|
|
<div>
|
|
<el-table :data="allData.noticeList"
|
|
style="width: 100%"
|
|
:header-cell-style="{ background: '#EEEEEE' }">
|
|
<el-table-column v-for="ctem in allData.tableTit"
|
|
:key="ctem.value"
|
|
align="center"
|
|
:prop="ctem.value"
|
|
:label="ctem.label">
|
|
<template slot-scope="scope">
|
|
<div v-show="ctem.value== 'content'">
|
|
<el-popover placement="top-start"
|
|
trigger="hover">
|
|
<div v-html="scope.row.content"></div>
|
|
<div slot="reference"
|
|
style="color:#3181E5;cursor: pointer;">查看详情</div>
|
|
</el-popover>
|
|
</div>
|
|
<div v-show="ctem.value== 'jsVal'">
|
|
<div v-for="item in scope.row.noticeGradeVOList"
|
|
:key="item.gradeKey">{{item.gradeKeyVal }}</div>
|
|
</div>
|
|
<div v-show="ctem.value== 'zsVal'">
|
|
<div v-for="item in scope.row.awardsVOList"
|
|
:key="item.awardKey">{{ item.awardKeyVal }}</div>
|
|
</div>
|
|
<div v-show="ctem.value== 'fbVal'">
|
|
<div v-for="item in scope.row.locationVOList"
|
|
:key="item.locationKey">{{ item.locationKeyVal }}</div>
|
|
</div>
|
|
<div v-show="ctem.value== 'time'">
|
|
<div>{{scope.row.startTime }}-{{ scope.row.endTime }}</div>
|
|
</div>
|
|
<div v-show="ctem.value != 'jsVal' && ctem.value !='zsVal'&& ctem.value !='fbVal'&& ctem.value !='content'">{{ scope.row[ctem.value] }}</div>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<!-- <tr>
|
|
<td style="height: 190px"
|
|
align="center">{{'附件'}}</td>
|
|
<td colspan="3"
|
|
style="padding: 0">
|
|
<div style="height: 100%;padding: 10px 20px">
|
|
<el-upload class="upload-demo"
|
|
:action="uploadImgUrl"
|
|
:on-success="handleUploadSuccess"
|
|
:on-remove="removeFile"
|
|
multiple
|
|
:headers="headers"
|
|
:file-list="fileList">
|
|
<el-button size="small"
|
|
type="primary">{{'点击上传'}}</el-button>
|
|
</el-upload>
|
|
</div>
|
|
</td>
|
|
</tr> -->
|
|
</table>
|
|
</div>
|
|
</div>
|
|
<div class="footer">
|
|
<div style="margin: 0 auto">
|
|
<el-button class="thebtn"
|
|
@click="cancelCz"> {{ '取消' }}</el-button>
|
|
<el-button type="primary"
|
|
class="thebtn"
|
|
@click="saveDate"> {{ '确认' }}</el-button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import topBar from '@/components/topBar'
|
|
import * as man from '@/api/manage'
|
|
import onlineSign from '@/views/dashboard/onlineSign.json'
|
|
import { getToken } from '@/utils/auth'
|
|
export default {
|
|
name: 'Zxqc',
|
|
components: {
|
|
topBar,
|
|
},
|
|
data() {
|
|
return {
|
|
uploadImgUrl: process.env.VUE_APP_BASE_API + '/system/upload', // 上传的图片服务器地址
|
|
headers: {
|
|
Authorization: getToken(),
|
|
},
|
|
onlineSign,
|
|
moren: 'specialZxqc',
|
|
topList: [
|
|
{
|
|
name: '在线签呈',
|
|
path: 'specialZxqc',
|
|
},
|
|
],
|
|
checked: [],
|
|
checkList: [],
|
|
ywsq: '',
|
|
ywsqList: [],
|
|
qcData: {},
|
|
memberPetitionVo: {
|
|
businessNo: '',
|
|
signType: '',
|
|
description: '',
|
|
petitionListVoList: [],
|
|
czlx: '',
|
|
},
|
|
orderNumber: '',
|
|
allData: {
|
|
remark: '',
|
|
signType: 1,
|
|
fileList: [],
|
|
signData: {
|
|
detailList: [],
|
|
sendList: [],
|
|
},
|
|
approvalBusiness: '',
|
|
},
|
|
signDataList: [],
|
|
fileList: [],
|
|
approbalList: [],
|
|
// 审批流程
|
|
approbalList: [],
|
|
userAllList: [],
|
|
type: 0,
|
|
}
|
|
},
|
|
mounted() {
|
|
this.allData.noticeList = [JSON.parse(this.$route.query.data)]
|
|
this.type = this.$route.query.type
|
|
this.allData.approvalBusiness = JSON.parse(
|
|
this.$route.query.data
|
|
).approvalBusiness
|
|
const regex = new RegExp('<img', 'gi')
|
|
this.allData.noticeList.forEach((item) => {
|
|
if (item.content) {
|
|
item.content = item.content.replace(
|
|
regex,
|
|
`<img style="max-width: 300px;"`
|
|
)
|
|
}
|
|
})
|
|
this.getSignData([this.allData.approvalBusiness])
|
|
// this.getDetails()
|
|
},
|
|
methods: {
|
|
getSignData(arr) {
|
|
man.signData(arr).then((res) => {
|
|
this.allData.signData = res.data[0]
|
|
// 签呈表头数据添加到数组
|
|
this.$set(this.allData, 'signType', 1)
|
|
this.$set(this.allData, 'remark', '')
|
|
this.$set(this.allData, 'fileList', [])
|
|
// table表头添加到数组
|
|
this.onlineSign.forEach((ctem) => {
|
|
if (this.allData.approvalBusiness == ctem.id) {
|
|
this.allData.tableTit = ctem.textList
|
|
}
|
|
})
|
|
this.$forceUpdate()
|
|
this.getApprove()
|
|
this.getSignType()
|
|
})
|
|
},
|
|
getApprove() {
|
|
// 审批流程
|
|
man.approvalUser().then((res) => {
|
|
this.approbalList = res.data
|
|
})
|
|
man.userAll().then((res) => {
|
|
this.userAllList = res.data
|
|
})
|
|
man.approvalOperation().then((res) => {
|
|
this.ywsqList = res.data
|
|
})
|
|
},
|
|
getSignType() {
|
|
man.signType().then((res) => {
|
|
this.checkList = res.data
|
|
})
|
|
},
|
|
// 审批流程
|
|
addData1() {
|
|
let arr = JSON.parse(JSON.stringify(this.allData.signData.sendList))
|
|
arr.push({
|
|
pkSend: '',
|
|
})
|
|
this.$set(this.allData.signData, 'sendList', arr)
|
|
this.$forceUpdate()
|
|
},
|
|
// 抄送
|
|
delData1() {
|
|
this.allData.signData.sendList.pop()
|
|
this.$forceUpdate()
|
|
},
|
|
saveDate() {
|
|
// 审批流程
|
|
this.allData.userIdList = this.allData.signData.detailList.map((item) => {
|
|
return item.pkApprover
|
|
})
|
|
this.allData.userIdList = this.allData.userIdList.filter((item) => item)
|
|
|
|
// 抄送流程
|
|
this.allData.sendIdList = this.allData.signData.sendList.map((item) => {
|
|
return item.pkSend
|
|
})
|
|
this.allData.sendIdList = this.allData.sendIdList.filter((item) => item)
|
|
|
|
this.allData.fileList = this.fileList.map((item) => {
|
|
return item.url
|
|
})
|
|
|
|
let apiPost = ''
|
|
if (this.type == 2) {
|
|
apiPost = man.deleteNotice
|
|
} else {
|
|
if (
|
|
this.allData.approvalBusiness == 520 ||
|
|
this.allData.approvalBusiness == 522
|
|
) {
|
|
apiPost = man.noticeSave
|
|
} else if (this.allData.approvalBusiness == 521) {
|
|
apiPost = man.noticeAdminSave
|
|
}
|
|
}
|
|
|
|
let obj = {
|
|
notice: this.allData.noticeList[0],
|
|
signType: this.allData.signType, //普通件，急件，密件 ''
|
|
remark: this.allData.remark, //备注 ''
|
|
sendIdList: this.allData.sendIdList, //附件[]
|
|
userIdList: this.allData.userIdList, //审批流程[]
|
|
}
|
|
apiPost(obj).then((res) => {
|
|
if (res.code == 200) {
|
|
this.$message({
|
|
message: res.msg,
|
|
type: 'success',
|
|
})
|
|
this.cancelCz()
|
|
}
|
|
})
|
|
},
|
|
cancelCz() {
|
|
// this.$router.go(-1)
|
|
if (this.allData.approvalBusiness == 521) {
|
|
this.$router.replace({
|
|
path: '/announcement/noticeList/admin',
|
|
})
|
|
} else if (this.allData.approvalBusiness == 520) {
|
|
this.$router.replace({
|
|
path: '/announcement/noticeList',
|
|
})
|
|
} else if (this.allData.approvalBusiness == 522) {
|
|
this.$router.replace({
|
|
path: '/announcement/email',
|
|
})
|
|
}
|
|
},
|
|
// 审批流程
|
|
getApprover() {
|
|
this.$nextTick(() => {
|
|
this.$forceUpdate()
|
|
})
|
|
},
|
|
// 审批流程
|
|
addData() {
|
|
let arr = JSON.parse(JSON.stringify(this.allData.signData.detailList))
|
|
arr.push({
|
|
pkApprover: '',
|
|
})
|
|
this.$set(this.allData.signData, 'detailList', arr)
|
|
this.$forceUpdate()
|
|
},
|
|
// 审批流程
|
|
delData() {
|
|
this.allData.signData.detailList.pop()
|
|
this.$forceUpdate()
|
|
},
|
|
handleUploadSuccess(res) {
|
|
if (res.code == 200) {
|
|
this.fileList.push(res.data)
|
|
} else {
|
|
this.$message({
|
|
type: 'error',
|
|
message: '上传失败',
|
|
})
|
|
}
|
|
},
|
|
removeFile(file, fileList) {
|
|
this.fileList.forEach((item, index) => {
|
|
if (file.uid == item.uid) {
|
|
this.fileList.splice(index, 1)
|
|
}
|
|
})
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
::v-deep .el-table thead {
|
|
color: #000000;
|
|
}
|
|
.page {
|
|
padding: 20px;
|
|
background: #f9f9f9;
|
|
font-size: 14px;
|
|
.main {
|
|
// margin-top: 20px;
|
|
background: #ffffff;
|
|
border-radius: 8px;
|
|
box-shadow: 0px 2px 20px 0px rgba(238, 238, 238, 0.5);
|
|
display: flex;
|
|
margin: 0 auto;
|
|
width: 100%;
|
|
padding: 20px;
|
|
flex-direction: column;
|
|
}
|
|
.thetable {
|
|
margin: 0 auto;
|
|
margin-bottom: 20px;
|
|
.fontTitle {
|
|
font-weight: bold;
|
|
font-size: 24px;
|
|
text-align: center;
|
|
}
|
|
.titleflex {
|
|
display: flex;
|
|
margin-top: 10px;
|
|
margin-bottom: 10px;
|
|
justify-content: space-between;
|
|
}
|
|
}
|
|
.tftable {
|
|
font-size: 14px;
|
|
border-collapse: collapse;
|
|
border-radius: 10px;
|
|
width: 1060px;
|
|
border: 1px solid #cccccc;
|
|
.spbox {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
}
|
|
th {
|
|
font-size: 14px;
|
|
// padding: 20px;
|
|
}
|
|
tr td {
|
|
font-size: 14px;
|
|
padding: 10px 20px;
|
|
height: 60px;
|
|
}
|
|
}
|
|
.footer {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
padding: 15px 0;
|
|
.thebtn {
|
|
width: 120px;
|
|
height: 38px;
|
|
}
|
|
}
|
|
}
|
|
// 审批流程
|
|
.disflex {
|
|
display: flex;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
}
|
|
</style>
|