471 lines
		
	
	
		
			14 KiB
		
	
	
	
		
			Vue
		
	
	
	
		
		
			
		
	
	
			471 lines
		
	
	
		
			14 KiB
		
	
	
	
		
			Vue
		
	
	
	
|  | <!-- | |||
|  |  * @Descripttion: | |||
|  |  * @version: | |||
|  |  * @Author: 王三华 | |||
|  |  * @Date: 2023-05-09 10:57:15 | |||
|  | --> | |||
|  | <template> | |||
|  |   <div class="page"> | |||
|  |     <topBar v-if="topList.length > 0" | |||
|  |             :topList="topList" | |||
|  |             :moren="moren"></topBar> | |||
|  |     <div class="main"> | |||
|  |       <div class="thetable"> | |||
|  |         <div class="fontTitle"> {{$t('MN_F_T_14')}}</div> | |||
|  |         <div class="titleflex"> | |||
|  |           <div>{{$t('MN_F_T_228')}} :</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"> {{$t('MN_F_T_519')}} :</td> | |||
|  |             <td colspan="1" | |||
|  |                 v-if="allData.signData" | |||
|  |                 width="435px">{{ allData.signData.deptName }}</td> | |||
|  |             <td colspan="1" | |||
|  |                 width="140px" | |||
|  |                 align="center"> {{$t('MN_F_T_520')}} :</td> | |||
|  |             <td colspan="1" | |||
|  |                 v-if="allData.signData">{{ allData.signData.userName }}</td> | |||
|  |           </tr> | |||
|  |           <tr> | |||
|  |             <td colspan="1" | |||
|  |                 align="center"> {{$t('MN_F_T_558')}} :</td> | |||
|  |             <td colspan="1" | |||
|  |                 v-if="allData.signData">{{ allData.signData.approvalBusinessVal }}</td> | |||
|  |             <td colspan="1" | |||
|  |                 align="center"> {{$t('MN_F_T_559')}} :</td> | |||
|  |             <td colspan="1" | |||
|  |                 v-if="allData.signData">{{ allData.signData.creationTime }}</td> | |||
|  |           </tr> | |||
|  |           <!-- // 审批流程 -->
 | |||
|  |           <tr> | |||
|  |             <td colspan="1" | |||
|  |                 align="center"> {{$t('MN_F_T_560')}}</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="$t('CK_KS_38')"> | |||
|  |                     <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">{{$t('MN_F_T_531')}}</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="$t('CK_KS_38')"> | |||
|  |                     <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">{{$t('MY_CK_10')}}</td> | |||
|  |             <td colspan="3" | |||
|  |                 style="padding: 0"> | |||
|  |               <div > | |||
|  |                 <!-- <el-input type="textarea" | |||
|  |                           :rows="6" | |||
|  |                           :placeholder="$t('S_C_70')" | |||
|  |                           v-model="allData.remark"> | |||
|  |                 </el-input> --> | |||
|  | <noImgEditor v-model="allData.remark" | |||
|  |                       :min-height="190"/> | |||
|  |               </div> | |||
|  |             </td> | |||
|  |           </tr> | |||
|  |           <tr> | |||
|  |             <td style="height: 193px" | |||
|  |                 align="center"> {{$t('MN_F_T_561')}}</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"> | |||
|  |                           {{$t('CK_KS_25')}} | |||
|  |                         </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">{{$t('MN_F_T_669')}}</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">{{$t('MN_F_T_230')}}</el-button> | |||
|  |                 </el-upload> | |||
|  |               </div> | |||
|  |             </td> | |||
|  |           </tr> | |||
|  |         </table> | |||
|  |       </div> | |||
|  |     </div> | |||
|  |     <div class="footer"> | |||
|  |       <div style="margin: 0 auto"> | |||
|  |         <el-button class="thebtn" | |||
|  |                    @click="cancelCz"> {{ $t('ENU_P_TYPE0') }}</el-button> | |||
|  |         <el-button type="primary" | |||
|  |                    class="thebtn" | |||
|  |                    @click="saveDate"> {{ $t('MN_F_32') }}</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' | |||
|  | import { dealerSpace, makerSpace } from '@/api/manage' | |||
|  | 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: this.$t('MN_F_T_14'), | |||
|  |           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 = this.$t('ENU_CONTROL_TYPE_1')
 | |||
|  |     // } else if (controlType == 2) {
 | |||
|  |     //   this.controlTypeVal = this.$t('PER_DA_20')
 | |||
|  |     // } else {
 | |||
|  |     //   this.controlTypeVal = this.$t('ENU_CONTROL_TYPE_3')
 | |||
|  |     // }
 | |||
|  |     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 | |||
|  |       }) | |||
|  | 
 | |||
|  |       let 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() { | |||
|  |       let arr = JSON.parse(JSON.stringify(this.allData.signData.detailList)) | |||
|  |       arr.push({ | |||
|  |         pkApprover: '', | |||
|  |       }) | |||
|  |       this.$set(this.allData.signData, 'detailList', arr) | |||
|  |       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() | |||
|  |     }, | |||
|  |     // 审批流程
 | |||
|  |     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: this.$t('MY_ORD_79'), | |||
|  |         }) | |||
|  |       } | |||
|  |     }, | |||
|  |     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> |