542 lines
15 KiB
Vue
542 lines
15 KiB
Vue
<!--
|
||
* @Descripttion:
|
||
* @version:
|
||
* @Author: 王三华
|
||
* @Date: 2023-05-09 10:57:15
|
||
-->
|
||
<template>
|
||
<div class="page">
|
||
<topBar
|
||
v-if="topList.length > 0"
|
||
:top-list="topList"
|
||
:moren="moren"
|
||
/>
|
||
<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
|
||
v-for="ctem in checkList"
|
||
:key="ctem.value"
|
||
:label="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
|
||
v-if="allData.signData"
|
||
colspan="1"
|
||
width="435px"
|
||
>{{ allData.signData.deptName }}</td>
|
||
<td
|
||
colspan="1"
|
||
width="140px"
|
||
align="center"
|
||
> {{ '发起人' }} :</td>
|
||
<td
|
||
v-if="allData.signData"
|
||
colspan="1"
|
||
>{{ allData.signData.userName }}</td>
|
||
</tr>
|
||
<tr>
|
||
<td
|
||
colspan="1"
|
||
align="center"
|
||
> {{ '主旨' }} :</td>
|
||
<td
|
||
v-if="allData.signData"
|
||
colspan="1"
|
||
>{{ allData.signData.approvalBusinessVal }}</td>
|
||
<td
|
||
colspan="1"
|
||
align="center"
|
||
> {{ '日期' }} :</td>
|
||
<td
|
||
v-if="allData.signData"
|
||
colspan="1"
|
||
>{{ 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"
|
||
:placeholder="'请选择'"
|
||
@change="getApprover"
|
||
>
|
||
<el-option
|
||
v-for="item in approbalList"
|
||
:key="item.userId"
|
||
:label="item.nickName + '(' +item.deptName+')'"
|
||
:value="item.userId"
|
||
/>
|
||
</el-select>
|
||
</span>
|
||
<span style="margin:0 5px 5px 0">
|
||
<i
|
||
v-show="allData.signData.detailList.length>0"
|
||
class="el-icon-remove-outline"
|
||
style="font-size:18px;margin-right:5px"
|
||
@click.stop="delData"
|
||
/>
|
||
<i
|
||
class="el-icon-circle-plus-outline"
|
||
style="font-size:18px"
|
||
@click.stop="addData"
|
||
/>
|
||
</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"
|
||
:placeholder="'请选择'"
|
||
@change="getApprover"
|
||
>
|
||
<el-option
|
||
v-for="item in userAllList"
|
||
:key="item.userId"
|
||
:label="item.nickName + '(' +item.deptName+')'"
|
||
:value="item.userId"
|
||
/>
|
||
</el-select>
|
||
</span>
|
||
<span style="margin:0 5px 5px 0">
|
||
<i
|
||
v-show="allData.signData.sendList.length>0"
|
||
class="el-icon-remove-outline"
|
||
style="font-size:18px;margin-right:5px"
|
||
@click.stop="delData1"
|
||
/>
|
||
<i
|
||
class="el-icon-circle-plus-outline"
|
||
style="font-size:18px"
|
||
@click.stop="addData1"
|
||
/>
|
||
</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="height: 193px"
|
||
align="center"
|
||
> {{ '业务诉求' }}</td>
|
||
<td
|
||
colspan="3"
|
||
style="padding: 0;vertical-align: top;"
|
||
>
|
||
<div>
|
||
<el-table
|
||
:data="allData.updateParentParamList"
|
||
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== 'actExplain'">
|
||
<div
|
||
style="color: #48B2FD;text-decoration:underline;cursor: pointer"
|
||
@click="details"
|
||
>
|
||
{{ '查看详情' }}
|
||
</div>
|
||
</div>
|
||
<div v-show="ctem.value!= 'actExplain'">
|
||
<div>
|
||
{{ scope.row[ctem.value] }}
|
||
</div>
|
||
</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 '../../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: 'giftGoodsZxqc',
|
||
topList: [
|
||
{
|
||
name: '在线签呈',
|
||
path: 'giftGoodsZxqc'
|
||
}
|
||
],
|
||
checkList: [],
|
||
allData: {
|
||
remark: '',
|
||
signType: 1,
|
||
fileList: [],
|
||
signData: {
|
||
detailList: [],
|
||
sendList: []
|
||
},
|
||
approvalBusiness: ''
|
||
},
|
||
signDataList: [],
|
||
fileList: [],
|
||
approbalList: [],
|
||
// 审批流程
|
||
userAllList: [],
|
||
allObj: {},
|
||
controlType: '' // （1=新增,2=修改,3=删除）
|
||
}
|
||
},
|
||
mounted() {
|
||
// 业务诉求
|
||
this.allObj = JSON.parse(this.$route.query.data)
|
||
// let controlType = this.$route.query.controlType
|
||
// if (controlType == 1) {
|
||
// this.controlTypeVal = '新增'
|
||
// } else if (controlType == 2) {
|
||
// this.controlTypeVal = '修改'
|
||
// } else {
|
||
// this.controlTypeVal = '删除'
|
||
// }
|
||
this.allData.updateParentParamList = [this.allObj.activityParam]
|
||
// 签呈类型
|
||
this.allData.approvalBusiness = this.$route.query.approvalBusiness
|
||
this.getSignData([this.allData.approvalBusiness])
|
||
},
|
||
methods: {
|
||
details(code) {
|
||
this.$router.push({
|
||
path: '/marketing/giftGoods/addGiftGoodsInfo',
|
||
query: {
|
||
controlType: 4,
|
||
data: JSON.stringify(this.allObj)
|
||
}
|
||
})
|
||
},
|
||
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
|
||
})
|
||
},
|
||
getSignType() {
|
||
man.signType().then((res) => {
|
||
this.checkList = res.data
|
||
})
|
||
},
|
||
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
|
||
})
|
||
|
||
const obj = {
|
||
activityParam: this.allObj.activityParam,
|
||
controlType: this.allObj.controlType,
|
||
signType: this.allData.signType, // 普通件，急件，密件
|
||
remark: this.allData.remark, // 备注
|
||
fileList: this.allData.fileList, // 附件[]
|
||
userIdList: this.allData.userIdList, // 审批流程[]
|
||
sendIdList: this.allData.sendIdList // 审批流程[]
|
||
}
|
||
|
||
man.waresOnline(obj).then((res) => {
|
||
if (res.code == 200) {
|
||
this.$message({
|
||
message: res.msg,
|
||
type: 'success'
|
||
})
|
||
this.$router.push({
|
||
path: '/marketing/giftGoods/giftGoodsList'
|
||
})
|
||
}
|
||
})
|
||
},
|
||
cancelCz() {
|
||
this.$router.go(-1)
|
||
},
|
||
// 审批流程
|
||
getApprover() {
|
||
this.$nextTick(() => {
|
||
this.$forceUpdate()
|
||
})
|
||
},
|
||
// 审批流程
|
||
addData() {
|
||
const arr = JSON.parse(JSON.stringify(this.allData.signData.detailList))
|
||
arr.push({
|
||
pkApprover: ''
|
||
})
|
||
this.$set(this.allData.signData, 'detailList', arr)
|
||
this.$forceUpdate()
|
||
},
|
||
// 审批流程
|
||
addData1() {
|
||
const 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()
|
||
},
|
||
// 审批流程
|
||
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>
|