updateServe.vue 36 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082
  1. <template>
  2. <div class="updateServer_container">
  3. <div class="card_cont">
  4. <div class="btn_top">
  5. <span style="fontSize:14px;color:#409EFF;cursor:pointer" @click="previewHistory">历史签约</span>
  6. </div>
  7. <div class="info">
  8. <h3 class="tit">客户信息</h3>
  9. <ul class="info_list">
  10. <li>
  11. 客户名称:{{companyInfo.CompanyName}}
  12. </li>
  13. <li>
  14. 社会信用码:{{companyInfo.CreditCode}}
  15. </li>
  16. <li>
  17. 地址:{{companyInfo.Address||''}}
  18. </li>
  19. <li>
  20. 客户类型:{{companyInfo.CompanyType}}
  21. </li>
  22. <li>
  23. 客户状态:{{companyInfo.Status}}
  24. </li>
  25. <li>
  26. 客户来源:{{companyInfo.Source}}
  27. </li>
  28. <li>
  29. 行业:{{companyInfo.IndustryName}}
  30. </li>
  31. <li>
  32. 所属销售:{{companyInfo.SellerName}}
  33. </li>
  34. <li>
  35. 备注:{{companyInfo.Reasons}}
  36. </li>
  37. </ul>
  38. </div>
  39. </div>
  40. <div class="card_cont">
  41. <div class="apply_info">
  42. <h3 style="fontSize:16px;">{{$route.path=='/updateCustom'?'续约申请':'补充协议'}}</h3>
  43. <div class="info_cont">
  44. <el-form
  45. @submit.native.prevent
  46. inline
  47. :model="dataForm"
  48. :rules="formRule"
  49. hide-required-asterisk
  50. ref="dataForm"
  51. label-width="100px"
  52. class="demo-ruleForm">
  53. <el-form-item label="选择合同类型" prop="contract_type" style="width:70%;padding-left:25px;">
  54. <!-- <i style="color:#f00;fontSize:20px;position:absolute;left:-114px;top:10%;">*</i> -->
  55. <el-radio label="续约合同" v-model="dataForm.contract_type" v-if="$route.path=='/updateCustom'">续约合同</el-radio>
  56. <el-radio label="补充协议" v-model="dataForm.contract_type" v-else>补充协议</el-radio>
  57. </el-form-item>
  58. <el-form-item label="合同期限" prop="term" style="marginRight:60px;">
  59. <i style="color:#f00;fontSize:20px;position:absolute;left:-90px;top:10%;">*</i>
  60. <el-date-picker
  61. :disabled="timeDisable"
  62. v-model="dataForm.term"
  63. type="daterange"
  64. range-separator="至"
  65. start-placeholder="开始日期"
  66. end-placeholder="结束日期"
  67. @change="dateChange"
  68. value-format="yyyy-MM-dd"
  69. :picker-options="pickerOptions"
  70. style="width:400px;">
  71. </el-date-picker>
  72. </el-form-item>
  73. <el-form-item label="合同金额" prop="amount" style="marginRight:60px;">
  74. <i style="color:#f00;fontSize:20px;position:absolute;left:-90px;top:10%;">*</i>
  75. <el-input
  76. v-model.number="dataForm.amount"
  77. placeholder="请输入金额"
  78. style="width:400px"
  79. clearable></el-input>
  80. <span style="color:#666;">元</span>
  81. </el-form-item>
  82. <el-form-item label="付款方式" prop="payway" style="marginRight:60px;">
  83. <i style="color:#f00;fontSize:20px;position:absolute;left:-90px;top:10%;">*</i>
  84. <el-select v-model="dataForm.payway" placeholder="请选择付款方式" style="width:400px;" clearable>
  85. <el-option
  86. v-for="item in ['月付','季付','半年付','年付','两年付','三年付']"
  87. :key="item"
  88. :label="item"
  89. :value="item">
  90. </el-option>
  91. </el-select>
  92. </el-form-item>
  93. <el-form-item label="付款渠道" prop="payfrom">
  94. <i style="color:#f00;fontSize:20px;position:absolute;left:-90px;top:10%;">*</i>
  95. <el-input
  96. v-model="dataForm.payfrom"
  97. placeholder="填写代支付的渠道名称,没有可以填无"
  98. style="width:400px"
  99. clearable></el-input>
  100. </el-form-item>
  101. <el-form-item label="套餐类型" prop="setmeal" style="display:block;" :rules="{ required: true, message: '请选择套餐',trigger: 'change' }" v-if="companyInfo.CompanyType=='ficc' || isRoleType== 'ficc'">
  102. <i style="color:#f00;fontSize:20px;position:absolute;left:-90px;top:10%;">*</i>
  103. <el-radio-group v-model="dataForm.setmeal" @change="setmealChange">
  104. <el-radio :label="1">大套餐</el-radio>
  105. <el-radio :label="2">小套餐</el-radio>
  106. </el-radio-group>
  107. </el-form-item>
  108. <el-form-item class="textarea_item" style="width:97%;paddingLeft:26px;" prop="CheckList">
  109. <label style="display:block;marginBottom:10px;fontSize:16px;position:relative;color:#666;">
  110. <i style="color:#f00;fontSize:20px;position:absolute;left:-15px;top:10%;">*</i>
  111. 权限设置
  112. </label>
  113. <template v-if="companyInfo.CompanyType=='权益' || isRoleType== '权益'">
  114. <raiPermissionbox ref="raiPermissionboxRef" v-for="item in authList" :key="item.ClassifyName" :data="item" :formData="dataForm"
  115. :hasNoChild="hasNoChild"></raiPermissionbox>
  116. </template>
  117. <ul v-else class="menu_lists" style="width:100%">
  118. <li v-for="item in authList" :key="item.ClassifyName" class="menu_item">
  119. <el-checkbox :indeterminate="item.isIndeterminate" v-model="item.checkAll" :disabled="setSelectPerDisabled(item)" @change="handleCheckAll(item,'auth')" style="marginRight:30px;fontWeight:bold;minWidth:90px;">{{item.ClassifyName+':'}}</el-checkbox>
  120. <el-checkbox-group v-model="item.CheckList" @change="handleChecked(item)">
  121. <el-checkbox v-for="list in item.Items" :label="list.ChartPermissionId" :key="list.ChartPermissionId" class="list_item" :disabled="list.disabled||($route.path=='/updateCustom'&&list.IsPublic==1)">{{list.PermissionName}}</el-checkbox>
  122. </el-checkbox-group>
  123. </li>
  124. </ul>
  125. </el-form-item>
  126. <el-form-item prop="imglist" style="width:97%;paddingLeft:26px;" class="textarea_item">
  127. <label style="display:block;marginBottom:10px;fontSize:16px;position:relative;color:#666;">
  128. <i style="color:#f00;fontSize:20px;position:absolute;left:-15px;top:10%;">*</i>
  129. 上传合同附件<span style="fontSize:12px;color:#f00;">(建议上传盖章后的合同,支持png、jpg、pdf格式)</span>
  130. <input type="file" name="file" @change="fileSelected()" id="file" class="true-file" style="display:none;">
  131. <el-button type="primary" size="medium" @click.native="clickinput('')" style="marginLeft:20px;">点击上传</el-button>
  132. </label>
  133. <ul class="img_cont">
  134. <li v-for="(img,index) in dataForm.imglist" :key="img" class="img_item">
  135. <!-- <el-image :src="img" alt="" style="background:#aaa;width:240px;height:180px;" :preview-src-list="dataForm.imglist" :id="'img'+index"/> -->
  136. <pdf ref="pdf" :src="img" style="width:240px;height:180px;overflow:hidden" v-if="img.indexOf('.pdf')!=-1" @click.native="preview('img'+index,index,img)"></pdf>
  137. <el-image :src="img" alt="" style="background:#aaa;width:240px;height:180px;" :id="'img'+index" v-else @click.native="preview('img'+index,index,img)"/>
  138. <i class="el-icon-zoom-in" style="position:absolute;right:12px;top:12px;color:#fff;" @click="preview('img'+index,index,img)"></i>
  139. <span style="position:absolute;right:12px;bottom:12px;color:#409EFF;fontSize:16px;cursor:pointer;" @click.stop="clickinput(index+1)">重新上传</span>
  140. </li>
  141. </ul>
  142. </el-form-item>
  143. </el-form>
  144. </div>
  145. </div>
  146. <div class="bot_cont">
  147. <div style="display:flex;justify-content:center;margin:80px 0 30px;">
  148. <el-button type="primary" style="width:80px;marginRight:24px;" @click="saveHandle">提交</el-button>
  149. <el-button type="primary" plain style="width:80px;" @click="cancelHandle">取消</el-button>
  150. </div>
  151. </div>
  152. </div>
  153. <!-- 历史签约弹窗 -->
  154. <el-dialog
  155. :visible.sync="isPreview"
  156. :modal-append-to-body='false'
  157. :show-close="false"
  158. custom-class="update_dialog"
  159. center
  160. top="7vh"
  161. width="60%">
  162. <div slot="title" style="display:flex;alignItems:center;">
  163. <span style="fontSize:16px;color:#333;fontWeight:bold;">历史签约</span>
  164. </div>
  165. <template v-if="dealList.length">
  166. <div v-for="(item,index) in dealList" :key="index" class="history_item">
  167. <el-tag style="margin-bottom:30px;" size="small">合同编号:{{item.ContractCode}}</el-tag>
  168. <ul class="detail_item">
  169. <li>
  170. <span style="min-width:300px;marginRight:260px;display:inline-block;">合同期限:{{item.StartDate+'-'+item.EndDate}}</span>
  171. <span>合同金额:{{item.Money}}元</span>
  172. </li>
  173. <li>
  174. <span style="min-width:300px;marginRight:260px;display:inline-block;">付款方式:{{item.PayMethod}}</span>
  175. <span>付款渠道:{{item.PayChannel}}</span>
  176. </li>
  177. <li class="textarea_item" style="width:97%;">
  178. <label style="display:block;marginBottom:20px;fontSize:16px;position:relative;">
  179. 权限设置
  180. </label>
  181. <ul class="menu_lists">
  182. <li v-for="auth in item.PermissionList" :key="auth.ClassifyName" class="menu_item">
  183. <el-checkbox :indeterminate="auth.CheckList.length>0&&auth.CheckList.length<auth.Items.length" v-model="auth.CheckAll" disabled @change="handleCheckAll(item)" style="marginRight:30px;fontWeight:bold;">{{auth.ClassifyName+':'}}</el-checkbox>
  184. <el-checkbox-group v-model="auth.CheckList" @change="handleChecked(item)" disabled>
  185. <el-checkbox v-for="list in auth.Items" :label="list.ChartPermissionId" :key="list.ChartPermissionId" class="list_item">{{list.PermissionName}}</el-checkbox>
  186. </el-checkbox-group>
  187. </li>
  188. </ul>
  189. </li>
  190. </ul>
  191. </div>
  192. </template>
  193. <span v-else>暂无历史合同</span>
  194. </el-dialog>
  195. <!-- 图片预览 -->
  196. <imgPreview
  197. :isShowToggle="isShowToggle"
  198. :isPreview="isPreviewimg"
  199. :arr="dataForm.imglist"
  200. :actIndex="preAct"
  201. @close="closePreview"
  202. @togglePre="togglePre"></imgPreview>
  203. </div>
  204. </template>
  205. <script>
  206. import { customInterence } from '@/api/api.js'
  207. import imgPreview from '@/components/imgPreview.vue'
  208. // import JurisdictionCheck from '../compontents/jurisdictionCheck.vue';
  209. import raiPermissionbox from './components/raiPermissionbox'
  210. import pdf from 'vue-pdf'
  211. export default {
  212. name:'',
  213. components: {imgPreview , pdf,raiPermissionbox},
  214. data () {
  215. return {
  216. temContractData:{},// 最后一份有效合同详情数据
  217. pickerOptions: {},
  218. companyInfo:JSON.parse(sessionStorage.getItem('companyInfo')) || {},//客户基本信息
  219. isRoleType:localStorage.getItem('RoleType'),
  220. authList2:[],
  221. dealList:[],//合同列表
  222. isPreview:false,//合同弹窗
  223. dataForm:{
  224. contract_type:this.$route.path=='/updateCustom'?'续约合同':'补充协议',
  225. term:'',
  226. amount:'',
  227. payway:'',
  228. payfrom:'',
  229. imglist:[],
  230. setmeal:'',
  231. qyBigServeCheck:0
  232. },
  233. formRule:{
  234. // contract_type:[
  235. // { required: true, message: '合同类型不能为空', trigger: 'blur' },
  236. // ],
  237. term:[
  238. { required: true, message: '合同期限不能为空', trigger: 'blur' },
  239. ],
  240. amount:[
  241. { required: true, message: '合同金额不能为空', trigger: 'blur' },
  242. { type: 'number', message: '合同金额必须为数字'}
  243. ],
  244. payway:[
  245. { required: true, message: '付款方式不能为空', trigger: 'change' },
  246. ],
  247. payfrom:[
  248. { required: true, message: '付款渠道不能为空', trigger: 'blur' },
  249. ],
  250. imglist:[
  251. { required: true, message: '合同附件不能为空', trigger: 'change' },
  252. ]
  253. },
  254. authList:[],//权限列表
  255. img_replace:'',//重新上传的img
  256. isPreviewimg:false,
  257. preAct:"",
  258. isShowToggle:false,//是否显示切换
  259. timeDisable:false,//是否能选择日期 补充协议不可选择日期
  260. equityCheckData:[], //权益复选框
  261. citiesEquity:[], //
  262. citiesListEquity:[], //
  263. citiesListpitchOn:[],
  264. };
  265. },
  266. // 补充协议 最大截至日期 为权限中最大的
  267. // 续约 ficc 起始时间 为权限中最大的
  268. // 权益
  269. methods: {
  270. /* 获取客户大于今天的最后一份有效合同详情 */
  271. async getLastedContractInfo(){
  272. let res=await customInterence.lastContractInfo({CompanyId:this.companyInfo.CompanyId})
  273. if(res.Ret!=200) return
  274. this.temContractData=res.Data
  275. // 续约申请
  276. if(this.$route.path=='/updateCustom'){
  277. this.initUpdateTypeData()
  278. }
  279. // 补充协议
  280. if(this.$route.path=='/addAgreement'){
  281. let today=this.formatDate(new Date())
  282. // 找出权限中最晚截止的那个作为截至日期
  283. let timearr=this.temContractData.map(item=> item.EndDate)
  284. let maxTime=Math.max.apply(null, timearr.map(item => (new Date(item)).getTime()));
  285. let endDate=this.formatDate(new Date(maxTime))
  286. this.dataForm.term=[today,endDate]
  287. this.timeDisable=true
  288. }
  289. },
  290. // 格式化时间
  291. formatDate(date){
  292. let year=date.getFullYear()
  293. let month=date.getMonth()+1
  294. let day=date.getDate()
  295. return `${year}-${month<10?'0'+month:month}-${day<10?'0'+day:day}`
  296. },
  297. // 续约申请处理数据
  298. initUpdateTypeData(){
  299. let RoleType=this.companyInfo.CompanyType
  300. if(RoleType=='ficc'){
  301. // FICC:续约合同的起始日期需要在权限中最大的时间
  302. // 找出权限中最晚截止的那个作为截至日期
  303. let timearr=this.temContractData.map(item=> item.EndDate)
  304. let maxTime=Math.max.apply(null, timearr.map(item => (new Date(item)).getTime()));
  305. let endDate=this.formatDate(new Date(maxTime))
  306. this.pickerOptions={
  307. disabledDate(time) {
  308. return time.getTime() < new Date(endDate).getTime();
  309. }
  310. }
  311. }
  312. },
  313. //选择时间 权益:续约合同期限与上一份合同期限有重叠时,不能勾选同一行业.
  314. // 选择的时间和temContractData 中的时间比较 然后格式化权限选择列表
  315. dateChange(){
  316. if(parseInt((new Date() - new Date(this.dataForm.term[1]))/(1000*3600*24)) > 0) {
  317. this.$message.error('结束日期不能小于今天!')
  318. this.dataForm.term = []
  319. return
  320. }
  321. // if(this.companyInfo.CompanyType!='权益') return
  322. // if(!this.dataForm.term) return
  323. // let time1=new Date(this.dataForm.term[0]).getTime() //选择的开始时间
  324. // let time2=new Date(this.dataForm.term[1]).getTime() //选择的结束时间
  325. // let time3=new Date(this.temContractData.StartDate).getTime()// 上份合同的开始时间
  326. // let time4=new Date(this.temContractData.EndDate).getTime()// 上份合同的结束时间
  327. // if(time1>time4||time2<time3){
  328. // //没有重叠
  329. // console.log('时间无重叠');
  330. // }else{
  331. // //时间有重叠
  332. // console.log('时间有重叠');
  333. // this.$message.warning('合同期限内行业重复')
  334. // let arr=[]
  335. // this.temContractData.PermissionList.forEach(item=>{
  336. // arr=[...arr,...item.CheckList]
  337. // })
  338. // this.authList=this.authList.map(item=>{
  339. // item.CheckList=[]
  340. // item.isIndeterminate=false
  341. // item.Items.forEach(item2=>{
  342. // if(arr.indexOf(item2.ChartPermissionId)!=-1){
  343. // item2.disabled=true
  344. // }
  345. // })
  346. // return item
  347. // })
  348. // }
  349. },
  350. // /* 重新申请获取上次申请的合同信息并回显 */
  351. // getLastContract() {
  352. // customInterence.reapplyDetail({
  353. // CompanyApprovalId:parseInt(this.companyInfo.CompanyApprovalId)
  354. // }).then(res => {
  355. // if(res.Ret === 200) {
  356. // /* 处理日期 */
  357. // let date_arr = [];
  358. // date_arr.push(res.Data.Item.StartDate);
  359. // date_arr.push(res.Data.Item.EndDate);
  360. // this.dataForm = {
  361. // term:date_arr,
  362. // contract_type: res.Data.Item.ContractType,
  363. // amount:res.Data.Item.Money,
  364. // payway:res.Data.Item.PayMethod,
  365. // payfrom:res.Data.Item.PayChannel,
  366. // imglist:res.Data.Item.ImgUrl.split('#'),//合同列表图片
  367. // setmeal:res.Data.Item.PackageType
  368. // }
  369. // if(this.companyInfo.CompanyType == '权益' || this.isRoleType== '权益') {
  370. // let newData =res.Data.Item.PermissionList.length ? res.Data.Item.PermissionList[0] : []
  371. // this.citiesEquity = newData.ItemsType || []
  372. // this.citiesListEquity = newData.Items || []
  373. // this.citiesListpitchOn = newData.CheckList || []
  374. // }else {
  375. // /* 处理权限列表 */
  376. // let newArr = [];
  377. // res.Data.Item.PermissionList.forEach(item => {
  378. // item.Items=item.Items.map(item2=>{
  379. // return{
  380. // ...item2,
  381. // disabled:false
  382. // }
  383. // })
  384. // let obj = {
  385. // checkAll:item.CheckList&&item.CheckList.length===item.Items.length?true:false,
  386. // isIndeterminate:item.CheckList&&item.CheckList.length>0 && item.CheckList.length<item.Items.length,
  387. // ...item,
  388. // }
  389. // newArr.push(obj)
  390. // })
  391. // this.authList = newArr;
  392. // this.dataForm.setmeal == 1 && this.setmealChange()
  393. // }
  394. // }
  395. // })
  396. // },
  397. getLastContract() {
  398. customInterence.reapplyDetail({
  399. CompanyApprovalId:parseInt(this.companyInfo.CompanyApprovalId)
  400. }).then(res => {
  401. if(res.Ret === 200) {
  402. /* 处理日期 */
  403. let date_arr = [];
  404. date_arr.push(res.Data.Item.StartDate);
  405. date_arr.push(res.Data.Item.EndDate);
  406. this.dataForm = {
  407. term:date_arr,
  408. contract_type: res.Data.Item.ContractType,
  409. amount:res.Data.Item.Money,
  410. payway:res.Data.Item.PayMethod,
  411. payfrom:res.Data.Item.PayChannel,
  412. imglist:res.Data.Item.ImgUrl.split('#'),//合同列表图片
  413. qyBigServeCheck:res.Data.Item.RaiPackageType
  414. }
  415. /* 处理权限列表 */
  416. let newArr = [];
  417. if(this.companyInfo.CompanyType == '权益' || this.isRoleType== '权益') {
  418. res.Data.Item.PermissionList[0].Items.map(item => {
  419. item.disabled=item.isIndeterminate=false
  420. if(item.ChartPermissionId==22 && (!item.Child)) this.hasNoChild=true
  421. })
  422. /* 处理数据把复选框 拆分成三个*/
  423. res.Data.Item.PermissionList.length&&res.Data.Item.PermissionList.forEach(item => {
  424. let arr = item.Items.filter(key=> [22,21,20,19,23,30,148,62].includes(key.ChartPermissionId))
  425. let ItemsPrivate = item.Items.filter(key=> [29,31,52,20031,20032,53,54].includes(key.ChartPermissionId))
  426. let ItemsUp = item.Items.filter(key=> key.PermissionName.includes('升级'))
  427. let ItemsBig = item.Items.filter(key=> key.ChartPermissionId==0)
  428. let obj = {
  429. ...item,
  430. Items:arr,
  431. ItemsPrivate,
  432. ItemsUp,
  433. ItemsBig
  434. }
  435. newArr.push(obj)
  436. })
  437. } else {
  438. res.Data.Item.PermissionList.forEach(item => {
  439. item.Items=item.Items.map(item2=>{
  440. return{
  441. ...item2,
  442. disabled:false
  443. }
  444. })
  445. let obj = {
  446. checkAll:item.CheckList&&item.CheckList.length===item.Items.length?true:false,
  447. isIndeterminate:item.CheckList&&item.CheckList.length>0 && item.CheckList.length<item.Items.length,
  448. ...item,
  449. }
  450. newArr.push(obj)
  451. })
  452. }
  453. this.authList = newArr;
  454. }
  455. })
  456. },
  457. /* 获取基本权限信息 */
  458. // getAuthBasic() {
  459. // customInterence.authList().then(res => {
  460. // if(res.Ret === 200) {
  461. // // if(this.companyInfo.CompanyType == '权益'|| this.isRoleType== '权益') {
  462. // // this.citiesEquity = res.Data.ListType ? res.Data.ListType[0].Items : [];
  463. // // this.citiesListEquity = res.Data.List ? res.Data.List[0].Items : [];
  464. // // }else {
  465. // let newArr = [];
  466. // res.Data.List.length&&res.Data.List.forEach(item => {
  467. // item.Items=item.Items.map(item2=>{
  468. // return{
  469. // ...item2,
  470. // disabled:false
  471. // }
  472. // })
  473. // let obj = {
  474. // checkAll:false,
  475. // isIndeterminate:item.ClassifyName === '宏观经济'?true:false,
  476. // ...item,
  477. // }
  478. // newArr.push(obj)
  479. // this.authList = newArr;
  480. // })
  481. // this.authList = newArr;
  482. // // }
  483. // }
  484. // })
  485. // },
  486. /* 获取基本权限信息 */
  487. getAuthBasic() {
  488. customInterence.authList({
  489. IsShowYanXuanKouDian:true,
  490. }).then(res => {
  491. if(res.Ret === 200) {
  492. let newArr = [];
  493. if(this.companyInfo.CompanyType == '权益' || this.isRoleType== '权益') {
  494. res.Data.List[0].Items.map(item => {
  495. item.disabled=item.isIndeterminate=false
  496. if(item.ChartPermissionId==22 && (!item.Child)) this.hasNoChild=true
  497. })
  498. /* 处理数据把复选框 拆分成三个*/
  499. res.Data.List.length&&res.Data.List.forEach(item => {
  500. let arr = item.Items.filter(key=> [22,21,20,19,23,30,148,62].includes(key.ChartPermissionId))
  501. let ItemsPrivate = item.Items.filter(key=> [29,31,52,20031,20032,53,54].includes(key.ChartPermissionId))
  502. let ItemsUp = item.Items.filter(key=> key.PermissionName.includes('升级'))
  503. let ItemsBig = item.Items.filter(key=> key.ChartPermissionId==0)
  504. let obj = {
  505. ...item,
  506. Items:arr,
  507. ItemsPrivate,
  508. ItemsUp,
  509. ItemsBig
  510. }
  511. newArr.push(obj)
  512. })
  513. }else {
  514. res.Data.List.length&&res.Data.List.forEach(item => {
  515. item.Items=item.Items||[]
  516. const temarr=item.Items?item.Items.filter(_e=>_e.IsPublic==1):[]
  517. item.Items=item.Items.map(item2=>{
  518. return{
  519. ...item2,
  520. disabled:false
  521. }
  522. })
  523. let obj = {
  524. checkAll:item.Items.length>0?temarr.length==item.Items.length:false,
  525. isIndeterminate:item.Items.length>0?temarr.length==item.Items.length?false:item.Items.some(_e=>_e.IsPublic==1):false,
  526. ...item,
  527. }
  528. newArr.push(obj)
  529. })
  530. }
  531. this.authList = newArr;
  532. }
  533. })
  534. },
  535. setSelectPerDisabled(data){
  536. const arr=data.Items?data.Items.filter(_e=>_e.IsPublic==1):[]
  537. return (this.$route.path=='/updateCustom'&&arr.length==data.Items.length) || data.disabled
  538. //($route.path=='/updateCustom'&&item.IsPublic==1) || item.disabled
  539. },
  540. /* 获取历史签约 */
  541. getDealList() {
  542. customInterence.historydeal({
  543. CompanyId:this.companyInfo.CompanyId,
  544. CompanyType:this.companyInfo.CompanyType
  545. }).then(res => {
  546. if(res.Ret === 200) {
  547. let auth = [];
  548. res.Data.List&&res.Data.List.forEach(item=> {
  549. item.StartDate = item.StartDate.replace(/-/g,'.')
  550. item.EndDate = item.EndDate.replace(/-/g,'.')
  551. item.PermissionList.forEach(auth => {
  552. auth.CheckAll = auth.CheckList&&auth.CheckList.length===auth.Items.length?true:false
  553. })
  554. })
  555. this.dealList = res.Data.List || []
  556. }
  557. })
  558. },
  559. /* 查看历史签约 */
  560. previewHistory() {
  561. this.isPreview = true
  562. },
  563. // 权益 续约合同判断
  564. // 1、勾选同行业,判断选择的期限,是否与已存在的合同期限重叠:
  565. // 有重叠则提示:同行业有重叠的合同期限,请核实后再提交
  566. // 没有重叠,则提交成功,两份合同独立执行
  567. // 2、勾选不同行业,直接提交成功,提交成功后,
  568. // 若期限有重叠,新开新的行业,使用期限按照合同期限,列表中的服务期限按照合同期限加总
  569. // 若期限无重叠,两份合同独立执行,列表中的服务期限按照执行时的合同期限
  570. // 2023-02-21 修改只需判断勾选行业的服务期限与本行业是否有重叠,无需判断勾选行业与其余行业是否有期限重叠
  571. handleValidate(e){
  572. let validate=true
  573. const newtemContractData=[]//把所有的都加上升级 id加100000
  574. this.temContractData.forEach(item=>{
  575. newtemContractData.push(item)
  576. newtemContractData.push({...item,ChartPermissionId:100000+item.ChartPermissionId,PermissionName:item.PermissionName+'(升级)'})
  577. })
  578. const time1=new Date(this.dataForm.term[0]).getTime() //选择的开始时间
  579. const time2=new Date(this.dataForm.term[1]).getTime() //选择的结束时间
  580. if(this.companyInfo.CompanyType=='权益' &&this.$route.path=='/updateCustom'){
  581. let count=0
  582. newtemContractData.forEach(item=>{
  583. let flag=e.indexOf(item.ChartPermissionId)
  584. if(flag!=-1){
  585. const time3=new Date(item.StartDate).getTime()// 上份合同的开始时间
  586. const time4=new Date(item.EndDate).getTime()// 上份合同的结束时间
  587. if(time1>time4||time2<time3){
  588. console.log(item.ChartPermissionId,'没重叠');
  589. }else{
  590. count++
  591. }
  592. }
  593. })
  594. if(count>0){
  595. validate=false
  596. }
  597. // 勾选了同行业
  598. // if(count>0){
  599. // let tag=0
  600. // let time1=new Date(this.dataForm.term[0]).getTime() //选择的开始时间
  601. // let time2=new Date(this.dataForm.term[1]).getTime() //选择的结束时间
  602. // this.temContractData.forEach(item=>{
  603. // let time3=new Date(item.StartDate).getTime()// 上份合同的开始时间
  604. // let time4=new Date(item.EndDate).getTime()// 上份合同的结束时间
  605. // if(time1>time4||time2<time3){
  606. // // 没有重叠
  607. // console.log(item.ChartPermissionId,'没重叠');
  608. // }else{
  609. // // 重叠了
  610. // tag++
  611. // }
  612. // })
  613. // if(tag>0) {
  614. // validate=false
  615. // }
  616. // }
  617. }
  618. return validate
  619. },
  620. // /* 提交 */
  621. // saveHandle() {
  622. // if(!this.dataForm.contract_type) {
  623. // this.$message.warning('合同类型不能为空!')
  624. // }else {
  625. // this.$refs.dataForm.validate((valid) => {
  626. // if (valid) {
  627. // /* 处理权限列表 */
  628. // let checkArr = [];
  629. // this.authList.forEach(item => {
  630. // if(item.CheckList.length) {checkArr.push(item.CheckList)}})
  631. // // if(this.companyInfo.CompanyType==='权益' || this.isRoleType== '权益'){
  632. // // this.$refs.childrenCheck.cities.forEach(item=>{
  633. // // item.Items.forEach(key => {
  634. // // if(key.Checked) {
  635. // // checkArr.push(key.ChartPermissionId)
  636. // // }
  637. // // })
  638. // // })
  639. // // this.$refs.childrenCheck.citiesList.forEach(item=>{
  640. // // if(item.Checked) {
  641. // // checkArr.push(item.ChartPermissionId)
  642. // // }
  643. // // })
  644. // // }else {
  645. // // this.authList.forEach(item => {
  646. // // if(item.CheckList.length) {
  647. // // checkArr.push(item.CheckList)
  648. // // }
  649. // // })
  650. // // }
  651. // if(!checkArr.length && this.companyInfo.CompanyType === '权益') {
  652. // this.$message.warning('请选择权限!');
  653. // return
  654. // }
  655. // // 判断
  656. // let flag=this.handleValidate(checkArr.flat(2))
  657. // if(!flag){
  658. // this.$message.warning('同行业有重叠的合同期限,请核实后再提交')
  659. // return false
  660. // }
  661. // let PermissionIds = checkArr.flat(2).join(',');
  662. // // let PermissionIds = (this.companyInfo.CompanyType === '权益'|| this.isRoleType== '权益') ? checkArr.join(',') : [... new Set(checkArr.flat(2))].join(',');
  663. // let params = {
  664. // CompanyId:this.companyInfo.CompanyId,
  665. // CompanyApprovalId:this.companyInfo.CompanyApprovalId?parseInt(this.companyInfo.CompanyApprovalId):0,
  666. // CompanyType:this.companyInfo.CompanyType,
  667. // ContractType: this.dataForm.contract_type,
  668. // StartDate:this.dataForm.term[0],
  669. // EndDate:this.dataForm.term[1],
  670. // ImgUrl:this.dataForm.imglist.join('#'),
  671. // Money:Number(this.dataForm.amount),
  672. // PayChannel:this.dataForm.payfrom,
  673. // PayMethod:this.dataForm.payway,
  674. // PermissionIds:PermissionIds,
  675. // PackageType:this.dataForm.setmeal ? this.dataForm.setmeal : 0
  676. // }
  677. // console.log(params);
  678. // customInterence.Update(params).then(res => {
  679. // if(res.Ret === 200) {
  680. // this.$message.success('更新成功!')
  681. // this.$router.go(-1)
  682. // }
  683. // })
  684. // }
  685. // })
  686. // }
  687. // },
  688. /* 提交 */
  689. saveHandle() {
  690. if(!this.dataForm.contract_type) {
  691. this.$message.warning('合同类型不能为空!')
  692. }else {
  693. this.$refs.dataForm.validate((valid) => {
  694. if (valid) {
  695. /* 处理权限列表 */
  696. let checkArr = [];
  697. this.authList.forEach(item => {
  698. if(item.CheckList.length) {
  699. checkArr.push(item.CheckList)
  700. }
  701. })
  702. if(!checkArr.length && this.companyInfo.CompanyType === '权益') {
  703. this.$message.warning('请选择权限!');
  704. return
  705. }
  706. // 判断
  707. let flag=this.handleValidate(checkArr.flat(2))
  708. if(!flag){
  709. this.$message.warning('同行业有重叠的合同期限,请核实后再提交')
  710. return false
  711. }
  712. const hasFiftyTwo = checkArr.flat(2).includes(52);
  713. const hasMinusSignVal = this.companyInfo.CompanyType === '权益' ? this.$refs.raiPermissionboxRef[0].minus_sign_val : 0
  714. if(hasFiftyTwo && !hasMinusSignVal) return this.$message.error('请输入研选扣点数')
  715. let PermissionIds = checkArr.flat(2).join(',');
  716. let params = {
  717. CompanyId:this.companyInfo.CompanyId,
  718. CompanyApprovalId:this.companyInfo.CompanyApprovalId?parseInt(this.companyInfo.CompanyApprovalId):0,
  719. CompanyType:this.companyInfo.CompanyType,
  720. ContractType: this.dataForm.contract_type,
  721. StartDate:this.dataForm.term[0],
  722. EndDate:this.dataForm.term[1],
  723. ImgUrl:this.dataForm.imglist.join('#'),
  724. Money:Number(this.dataForm.amount),
  725. PayChannel:this.dataForm.payfrom,
  726. PayMethod:this.dataForm.payway,
  727. PermissionIds:PermissionIds,
  728. PackageType:Number(this.dataForm.setmeal),
  729. RaiPackageType:this.dataForm.qyBigServeCheck||0,
  730. Points:hasMinusSignVal||0
  731. }
  732. console.log(params);
  733. customInterence.Update(params).then(res => {
  734. if(res.Ret === 200) {
  735. this.$message.success('更新成功!')
  736. //this.$router.go(-1)
  737. this.$router.push({path:`/${this.$route.meta.pathFrom}`})
  738. }
  739. })
  740. }
  741. })
  742. }
  743. },
  744. /* 取消返回 */
  745. cancelHandle() {
  746. //this.$router.go(-1);
  747. this.$router.push({path:`/${this.$route.meta.pathFrom}`})
  748. },
  749. /* 选择全选或取消全选 */
  750. handleCheckAll(item,type) {
  751. if(type=='auth'){
  752. //获取公有的id合集
  753. let publicIds=[]
  754. let ids = item.Items.map(item =>{
  755. if(item.IsPublic==1){
  756. publicIds.push(item.ChartPermissionId)
  757. }
  758. return item.ChartPermissionId
  759. })
  760. item.CheckList = item.checkAll ? ids : publicIds;
  761. item.isIndeterminate = publicIds.length>0&&!item.checkAll?true:false;
  762. return
  763. }
  764. // 取到所有的子菜单id
  765. let ids = item.Items.map(item =>{
  766. return item.ChartPermissionId
  767. })
  768. item.CheckList = item.checkAll ? ids : [];
  769. item.isIndeterminate = false;
  770. },
  771. /* 复选框組选中时 */
  772. handleChecked(item) {
  773. let len = item.CheckList.length;
  774. if(this.companyInfo.CompanyType == '权益' || this.isRoleType== '权益') {
  775. /* 获取大套餐行业并且判断 value里面有没有包含 大套餐的全部id*/
  776. let isCheckAllTrue = item.Items.filter(key=> ![31,29].includes(key.ChartPermissionId)&& !key.PermissionName.includes('升级')).every(val => item.CheckList.includes(val.ChartPermissionId))
  777. item.checkAll = isCheckAllTrue;
  778. item.isIndeterminate = len > 0 && !isCheckAllTrue
  779. }else{
  780. item.checkAll = len === item.Items.length;
  781. item.isIndeterminate = len > 0 && len < item.Items.length;
  782. }
  783. },
  784. /* 预览 */
  785. preview(id,index,img) {
  786. // $('#'+id).click()
  787. if(img.indexOf('.pdf') == -1) {
  788. this.preAct = index;
  789. /* 是否显示左右切换 */
  790. let bol = this.dataForm.imglist.some(item => {
  791. return item.indexOf('.pdf') != -1
  792. })
  793. // 有pdf或图片只有一张
  794. if(bol || this.dataForm.imglist.length<=1) {
  795. this.isShowToggle = false
  796. }else {
  797. this.isShowToggle = true
  798. }
  799. this.isPreviewimg = true;
  800. }else {
  801. window.open(img)
  802. }
  803. },
  804. clickinput(index){ //上传模拟点击
  805. this.img_replace = '';
  806. if(index) {
  807. this.img_replace = index
  808. }
  809. $("#file").click();
  810. },
  811. fileSelected(){ //选择文件上传
  812. if( document.getElementById('file').files[0] ){
  813. let hostfile = document.getElementById('file').files[0];
  814. let size = Math.floor(hostfile.size / 1024 / 1024);
  815. if( size>200 ){
  816. this.$message.error('上传文件大小不能大于200M!');
  817. hostfile = {};
  818. return false
  819. }
  820. if( hostfile.name.toLowerCase().includes('.png') || hostfile.name.toLowerCase().includes('.jpg') || hostfile.name.toLowerCase().includes('.jpeg') || hostfile.name.toLowerCase().includes('.pdf') ){
  821. let form = new FormData();
  822. form.append('file',hostfile); //hostfile.name
  823. this.uploadloading=true;
  824. customInterence.upload(form).then((res) => {
  825. if( res.Ret === 200 ){
  826. /* 是替换还是新增 */
  827. if(this.img_replace) {
  828. this.dataForm.imglist.splice(this.img_replace-1,1,res.Data.ResourceUrl)
  829. }else {
  830. if(this.dataForm.imglist.length >= 4) {
  831. this.$message.warning('最多上传4张')
  832. }else {
  833. this.dataForm.imglist.push(res.Data.ResourceUrl)
  834. }
  835. }
  836. }
  837. this.uploadloading=false;
  838. $("#file").val('');
  839. hostfile = {};
  840. });
  841. }else{
  842. this.$message.error('上传文件格式不正确!');
  843. }
  844. }
  845. },
  846. closePreview() {
  847. this.isPreviewimg = false;
  848. },
  849. togglePre(type) {
  850. if(type==1) {
  851. this.preAct--;
  852. if(this.preAct < 0) {
  853. this.preAct = this.dataForm.imglist.length-1;
  854. }
  855. }else {
  856. this.preAct++;
  857. if(this.preAct > this.dataForm.imglist.length-1) {
  858. this.preAct = 0;
  859. }
  860. }
  861. },
  862. //套餐的选择
  863. setmealChange(){
  864. if(this.dataForm.setmeal == '1'){
  865. this.authList.forEach(item => {
  866. if(item.ClassifyName != '市场策略') {
  867. item.Items.forEach(key => {
  868. item.CheckList.push(key.ChartPermissionId)
  869. key.Checked = true
  870. key.disabled = true
  871. })
  872. item.isIndeterminate = false
  873. item.checkAll = true
  874. item.disabled = true
  875. }
  876. })
  877. } else {
  878. console.log(this.authList);
  879. this.authList.forEach(item => {
  880. if(item.ClassifyName == '宏观经济') {
  881. item.CheckList = [1]
  882. item.isIndeterminate = true
  883. item.disabled=false
  884. item.Items[1].disabled=false
  885. item.Items[0].disabled=false
  886. }else {
  887. item.Items.forEach(key => {
  888. item.CheckList = []
  889. key.Checked = false
  890. key.disabled = false
  891. })
  892. item.isIndeterminate = false
  893. item.checkAll = false
  894. item.disabled = false
  895. }
  896. })
  897. this.$message.warning('请勾选品种')
  898. }
  899. }
  900. },
  901. created() {},
  902. mounted() {
  903. this.getDealList();
  904. this.getLastedContractInfo()
  905. if(this.$route.query.isReapply) {
  906. this.getLastContract();
  907. }else {
  908. this.getAuthBasic();
  909. }
  910. }
  911. }
  912. </script>
  913. <style lang='scss'>
  914. .updateServer_container {
  915. min-width: 1570px;
  916. *{
  917. box-sizing: border-box;
  918. }
  919. /* reset */
  920. .el-collapse {
  921. border: none;
  922. }
  923. .el-collapse-item__header {
  924. display: block;
  925. border: none;
  926. font-size: 16px;
  927. color: #333;
  928. font-weight: bold;
  929. position: relative;
  930. }
  931. .el-collapse-item__content {
  932. padding-left: 30px;
  933. }
  934. .el-collapse-item__wrap {
  935. border: none;
  936. margin-top: 20px;
  937. }
  938. .el-form-item {
  939. margin-bottom: 30px;
  940. }
  941. .el-form-item .el-checkbox-group {
  942. height: 40px;
  943. }
  944. .textarea_item .el-form-item__content {
  945. width: 100%;
  946. }
  947. /* */
  948. .card_cont {
  949. margin-bottom: 20px;
  950. border: 1px solid #ECECEC;
  951. padding: 30px;
  952. background: #fff;
  953. border-radius: 4px;
  954. box-shadow: 0 3px 6px rgba(0, 0, 0, 0.05);
  955. .btn_top {
  956. display: flex;
  957. justify-content: flex-end;
  958. }
  959. .info {
  960. margin-top: 10px;
  961. font-size: 16px;
  962. color: #666;
  963. .tit {
  964. color: #333;
  965. font-size: 16px;
  966. margin-bottom: 30px;
  967. }
  968. .info_list {
  969. display: flex;
  970. flex-wrap: wrap;
  971. padding-left: 50px;
  972. padding-bottom: 20px;
  973. li {
  974. margin-right: 113px;
  975. margin-bottom: 20px;
  976. min-width: 250px;
  977. }
  978. }
  979. }
  980. .info_cont {
  981. padding-left: 30px;
  982. margin-top: 30px;
  983. }
  984. .img_cont {
  985. width: 100%;
  986. display: flex;
  987. flex-wrap: wrap;
  988. .img_item {
  989. position: relative;
  990. margin-right: 23px;
  991. &:last-child {
  992. margin-right: 0;
  993. }
  994. }
  995. }
  996. }
  997. .menu_lists {
  998. padding: 40px 18px;
  999. border: 1px dashed #AAB4CC;
  1000. border-radius: 4px;
  1001. .menu_item {
  1002. display: flex;
  1003. // align-items: center;
  1004. margin-bottom: 40px;
  1005. &:last-child {
  1006. margin-bottom: 0;
  1007. }
  1008. .list_item {
  1009. margin-right: 30px;
  1010. &:last-child {
  1011. margin-right: 0;
  1012. }
  1013. }
  1014. }
  1015. }
  1016. .update_dialog {
  1017. max-height: 810px;
  1018. min-height: 200px;
  1019. // overflow: hidden;
  1020. overflow-y: auto;
  1021. .el-dialog__header {
  1022. background: #fff;
  1023. }
  1024. .el-dialog__body {
  1025. padding: 30px 50px !important;
  1026. }
  1027. .history_item {
  1028. margin-bottom: 60px;
  1029. .detail_item {
  1030. font-size: 16px;
  1031. color: #666;
  1032. li {
  1033. margin-bottom: 30px;
  1034. &:last-child {
  1035. margin-bottom: 0;
  1036. }
  1037. }
  1038. }
  1039. }
  1040. .menu_lists {
  1041. padding: 20px 18px;
  1042. border: 1px dashed #AAB4CC;
  1043. border-radius: 4px;
  1044. .menu_item {
  1045. display: flex;
  1046. // align-items: center;
  1047. margin-bottom: 20px;
  1048. &:last-child {
  1049. margin-bottom: 0;
  1050. }
  1051. .list_item {
  1052. margin-right: 30px;
  1053. margin-bottom: 5px;
  1054. &:last-child {
  1055. margin-right: 0;
  1056. }
  1057. }
  1058. }
  1059. }
  1060. }
  1061. }
  1062. </style>