合同审批详情页 增加小套餐中权限展示

README.md

@@ -1,4 +1,4 @@
-## 弘则移动CRM
+## 弘则移动CRM(随手办公)
 
 	1. ui使用vant 未全部引入 按需在page.json中配置
 	2. utils/config 中为项目配置

pages-approve/contract/detail.vue

@@ -18,10 +18,11 @@
 					<text >{{detail.ContractCode}}</text>
 					<van-tag color="#ECF5FF" text-color="#4A83F1" style="margin-left:5px;margin-top:2px">{{detail.ContractType}}</van-tag>
 				</view>
-				<view>
+				<view style="margin-bottom:0">
 					<text class="lable">合同期限：</text>
-					<text>{{detail.StartDate|formatDate}}~{{detail.EndDate | formatDate}}({{detail.StartDate|formateYear(detail.EndDate)}})</text>
+					<text>{{detail.StartDate|formatDate}}~{{detail.EndDate | formatDate}}</text>
 				</view>
+				<view style="padding-left:140rpx">({{detail.StartDate|formateYear(detail.EndDate)}})</view>
 				<view>
 					<text class="lable">合同金额：</text>
 					<text style="color:#FE6B7C">{{detail.Price}}元</text>
@@ -47,14 +48,25 @@
 		<!-- 服务内容 -->
 		<view class="section white-wrap service-wrap">
 			<view class="title">服务内容</view>
-			<view style="border-bottom: 1px dashed rgba(112, 112, 112, .21);margin-bottom: 30rpx;" >
-				
+			<view style="margin-bottom: 30rpx;" >
 				<view class="service-item flex" v-for="item in detail.Service" :key="item.Title">
 					<text style="width:60%">{{item.Title}}</text>
 					<text class="btn" @click="handlePreviewImg(item.Value)">查看服务单</text>
 				</view>
 			</view>
-			<view >补充内容：{{detail.Remark||'无'}}</view>
+			<view v-if="detail.Remark" style="border-top: 1px dashed rgba(112, 112, 112, .21);padding-top:10px;margin-bottom: 30rpx;">补充内容：{{detail.Remark}}</view>
+			<view style="border-top: 1px dashed rgba(112, 112, 112, .21);padding-top:10px" v-if="varietyList.length>0">
+				<view style="margin-bottom:10rpx">小套餐购买品种</view>
+				<view class="variety-list">
+					<view class="variety-item flex" v-for="item in varietyList" :key="item.ClassifyName">
+						<view class="lable">{{ item.ClassifyName }}：</view>
+						<view class="content">
+							<van-tag color="#ECF5FF" text-color="#4A83F1" v-for="tag in item.Items"
+								:key="tag.ChartPermissionId" custom-class="tag">{{ tag.PermissionName }}</van-tag>
+						</view>
+					</view>
+				</view>
+			</view>
 		</view>
 		
 		<!-- 回签附件 -->
@@ -184,12 +196,35 @@
 					return e.replace(/T/g,' ').replace(/\+08:00/g,' ').replace(/-/g,'.')
 				}
 			},
-			formateYear(start,end){
-				let starttime = new Date(start);
-				let endtime = new Date(end);
-				let difftime = endtime - starttime;
-				let ret = parseFloat((difftime / (1000 * 60 * 60 * 24 * 365)).toFixed(1));
-				return `有效期为 ${ret} 年`;
+			formateYear(s,e){
+				let flag = [1, 3, 5, 7, 8, 10, 12, 4, 6, 9, 11, 2];
+				let start = new Date(s);
+				let end = new Date(e);
+				let year = end.getFullYear() - start.getFullYear();
+				let month = end.getMonth() - start.getMonth();
+				let day = end.getDate() - start.getDate();
+				if (month < 0) {
+					year--;
+					month = end.getMonth() + (12 - start.getMonth());
+				}
+				if (day < 0) {
+					month--;
+					let index = flag.findIndex((temp) => {
+						return temp === start.getMonth() + 1
+					});
+					let monthLength;
+					if (index <= 6) {
+						monthLength = 31;
+					} else if (index > 6 && index <= 10) {
+						monthLength = 30;
+					} else {
+						monthLength = 28;
+					}
+					day = end.getDate() + (monthLength - start.getDate());
+				}
+				
+
+				return `有效期为 ${year>0?year+'年':''}${month>0?month+'个月':''}${day>0?day+'天':''}`;
 			}
 		},
 		computed:{
@@ -285,6 +320,7 @@
 				show:false,
 				showUpload:false,
 				files:[],
+				varietyList:[],
 			}
 		},
 		onLoad(options) {
@@ -389,6 +425,7 @@
 					this.detail=res.data.ContractDetail
 					this.opt=res.data.OpButton
 					this.flowNodeList=res.data.FlowNodeList
+					this.handleVariety(res.data.ContractDetail.Service)
 				}
 			},
 			
@@ -399,8 +436,22 @@
 					this.detail=res.data.ContractDetail
 					this.opt=res.data.OpButton
 					this.flowNodeList=res.data.FlowNodeList
+					this.handleVariety(res.data.ContractDetail.PermissionLookList)
 				}
 			},
+
+			// 处理小套餐选中的品种
+			handleVariety(e){	
+				let arr=e.filter(item=>{
+					return item.CheckList.length>0
+				})
+				arr.forEach(item=>{
+					item.Items=item.Items.filter(_item=>{
+						return item.CheckList.includes(_item.ChartPermissionId);
+					})
+				})
+				this.varietyList=arr
+			},
 			
 			handlePreviewImg(url){
 				uni.previewImage({
@@ -577,6 +628,28 @@
 		flex-wrap: wrap;
 		padding-top: 20rpx;
 	}
+
+	.variety-list{
+		.variety-item {
+			padding-top: 24rpx;
+			padding-bottom: 24rpx;
+			border-bottom: 1px dashed rgba(112, 112, 112, 0.2);
+		}
+
+		.variety-item:first-child {
+			padding-top: 0;
+		}
+
+		.variety-item:last-child {
+			border-bottom: none;
+		}
+
+		.tag {
+			margin-right: 10rpx;
+			margin-bottom: 10rpx;
+		}
+	}
+
 	
 	.btns-wrap {
 		justify-content: center;