web-retail-admin/src/views/information/policyMoney/PolicyQc.vue

585 lines
16 KiB
Vue

<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
class="el-icon-remove-outline"
v-show="allData.signData.detailList.length>0"
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"
@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
v-model="allData.remark"
type="textarea"
:rows="6"
:placeholder="'请输入'"
/>
</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%;color: #999"
: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-if="ctem.value=='memberCode'">
<div style="color: #333">{{ scope.row.memberCode }}</div>
</div>
<div v-if="ctem.value=='memberName'">
<div style="color: #333">{{ scope.row.memberName }}</div>
</div>
<div v-if="ctem.value=='enableStatusVal'">
<div style="color: #4391FD">{{ scope.row.enableStatusVal }}</div>
</div>
<div v-if="ctem.value=='transferVal'">
<div style="color: #4391FD">{{ scope.row.transferVal }}</div>
</div>
<div v-if="ctem.value=='deductMoney'">
<div style="color: #4391FD">{{ scope.row.deductMoney }}%</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>
<el-dialog
:title="'会员信息错误'"
:close-on-click-modal="false"
:visible.sync="errorShow"
width="600px"
append-to-body
>
<div>
<el-table
:data="errorData"
height="400px"
style="width: 100%"
:header-cell-style="{ background: '#EEEEEE' }"
:row-class-name="tableRowClassName"
>
<el-table-column align="center" prop="memberCode" :label="'会员编号'">
</el-table-column>
<el-table-column align="center" prop="errorMsg" :label="'报错信息'">
</el-table-column>
</el-table>
</div>
<div class="footer" style="text-align: center">
<div style="margin: 0 auto">
<el-button class="thebtn" @click="errorShow = false"> {{ '取消' }}</el-button>
<el-button type="primary" class="thebtn" @click="errorShow = false"
> {{ '确认' }}</el-button
>
</div>
</div>
</el-dialog>
</div>
</template>
<script>
import topBar from '@/components/topBar'
import * as api from '@/api/business'
import * as man from '@/api/manage'
import onlineSign from '../../dashboard/onlineSign.json'
import { getToken } from '@/utils/auth'
import { updatePolicy } from '@/api/manage'
export default {
name: 'Zxqc',
components: {
topBar
},
data() {
return {
errorShow:false,
uploadImgUrl: process.env.VUE_APP_BASE_API + '/system/upload', // 上传的图片服务器地址
headers: {
Authorization: getToken()
},
onlineSign,
moren: 'specialZxqc',
topList: [
{
name: '在线签呈',
path: 'specialZxqc'
}
],
checked: [],
errorData: [],
checkList: [],
ywsq: '',
ywsqList: [],
qcData: {},
memberPetitionVo: {
businessNo: '',
signType: '',
description: '',
petitionListVoList: [],
czlx: ''
},
orderNumber: '',
allData: {
remark: '',
signType: 1,
fileList: [],
signData: {
detailList: [],
sendList: [],
},
approvalBusiness: ''
},
signDataList: [],
fileList: [],
// 审批流程
approbalList: []
}
},
mounted() {
this.allData.updateParentParamList = JSON.parse(this.$route.query.data)
if (this.$route.query.countryData) {
this.allData.upstcyVOList = JSON.parse(this.$route.query.countryData)
}
this.allData.approvalBusiness = this.$route.query.businessType
this.allData.businessScope = this.$route.query.businessScope
this.allData.processType = this.$route.query.index
this.getSignData([this.allData.approvalBusiness])
console.error(this.allData)
// this.getDetails()
},
methods: {
tableRowClassName({ row, rowIndex }) {
if (rowIndex % 2 == 1) {
return "warning-row";
} else if (rowIndex % 2 == 0) {
return "success-row";
}
return "";
},
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', [])
this.allData.updateParentParamList.forEach((item) => {
item.editNewPlaceMemberCode = item.editNewPlaceMemberCode
})
// 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
})
},
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
})
console.error(this.allData)
// pluLists.push()
const obj1 = {
processType: this.allData.processType,
businessScope: this.allData.businessScope,
signType: this.allData.signType, // 普通件,急件,密件 ''
remark: this.allData.remark, // 备注 ''
fileList: this.allData.fileList, // 附件[]
userIdList: this.allData.userIdList, // 审批流程[],
sendIdList: this.allData.sendIdList, // 审批流程[],
plculist: this.allData.updateParentParamList,
approvalBusiness: this.allData.approvalBusiness
}
var newObj = JSON.parse(JSON.stringify(obj1))
newObj.plculist.forEach((item)=>{
delete item.transferVal
delete item.enableStatusVal
})
updatePolicy(newObj).then((res) => {
if (res.code == 200) {
this.$message({
message: res.msg,
type: 'success'
})
this.cancelCz()
} else if (res.code == 504 && res.data) {
this.errorShow = true;
this.errorData = res.data;
}
})
},
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()
},
// 审批流程
delData() {
this.allData.signData.detailList.pop()
this.$forceUpdate()
},
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()
},
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-dialog__header{
text-align: center;
}
::v-deep .el-table th:nth-child(3){
color: #4391FD;
}
::v-deep .el-table th:nth-child(4){
color: #4391FD;
}
::v-deep .el-table th:nth-child(5){
color: #4391FD;
}
::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>