RMYY_CallCenter_UI/CallCenterWe.../RMYYAPP/pages/myTask/comDispatch/comDispatchD.../comDispatchD...

<template>
	<page-meta :root-font-size="getFontSizeValue"></page-meta>
	<view class="wrapper">
		<view class="detailContent">
			<view class="contentTable">
				<text class="contentTitle">工单编号：</text>
				<text class="contentText">{{ detailContentData.F_WorkOrderCode }}</text>
				<!-- <text class="textState" v-show="detailContentData.StateName">{{ detailContentData.StateName }}</text> -->
			</view>
			<view class="contentTable" v-show="detailContentData.StateName ">
				<text class="contentTitle">工单状态：</text>
				<text class="textState" style="margin-left: 10px;">{{ detailContentData.StateName }}</text>
			</view>
			<view class="contentTable">
				<text class="contentTitle">工单类型：</text>
				<text
					class="contentText">{{ $mHelper.findParents(orderTypeList,detailContentData.F_WorkOrderCategory)}}</text>
			</view>
			<view class="contentTable">
				<text class="contentTitle">申请科室：</text>
				<text class="contentText">{{ $mHelper.findParents(departList,detailContentData.F_ApplicationDept) }}</text>
			</view>
			<view class="contentTable">
				<text class="contentTitle">申请时间：</text>
				<text class="contentText">{{ detailContentData.F_CreateTime }}</text>
			</view>
			<view class="contentTable">
				<text class="contentTitle">申请人员：</text>
				<text class="contentText">{{ detailContentData.applicantname}}</text>
			</view>
			<view class="contentTable" >
				<text class="contentTitle">联系电话：</text>
				<text class="contentText" style="margin-top: -5px;">{{ detailContentData.F_Phone}} <uni-icons @click="callHandle(detailContentData.F_Phone)" class="frContentText" type="phone" size="30"></uni-icons></text>	
			</view>
			<view class="contentTable">
				<view class="contentTitle">工单内容：</view>
				<view class="contentText">{{ detailContentData.F_Content }}</view>
			</view>
			<view class="contentTable">
				<text class="contentTitle">申请位置：</text>
				<text class="contentText">{{ detailContentData.F_Location }}</text>
			</view>
			<view class="contentTable">
				<text class="contentTitle">送达地点：</text>
				<text class="contentText">{{ detailContentData.F_ToPlace }}</text>
			</view>
			<view class="contentTable">
				<text class="contentTitle">紧急情况：</text>
				<text class="contentText">{{ detailContentData.F_EmergencyTypes }}</text>
			</view>
			<view class="contentTable">
				<text class="contentTitle">超时时限：</text>
				<text class="contentText">{{ detailContentData.GapTime }}</text>
			</view>
			<view class="contentTable">
				<text class="contentTitle">接单人员：</text>
				<text class="contentText" v-if="detailContentData.DealManName">{{ detailContentData.DealManName }}</text>
			</view>
			<view class="contentTable">
				<text class="contentTitle">联系电话：</text>
				<text class="contentText" style="margin-top: -5px;">{{ detailContentData.DealManPhone}} <uni-icons @click="callHandle(detailContentData.DealManPhone)" class="frContentText" type="phone" size="30" v-if="detailContentData.DealManPhone"></uni-icons></text>	
			</view>
			<view class="contentTable">
				<text class="contentTitle">接单时间：</text>
				<text class="contentText">{{ detailContentData.F_AcceptTime }}</text>
			</view>
			<view class="contentTable">
				<text class="contentTitle">完成时间：</text>
				<text class="contentText">{{ detailContentData.F_Endtime }}</text>
			</view>
			<view class="contentTable">
				<text class="contentTitle">完成时长：</text>
				<text class="contentText">{{ detailContentData.SpendTime }}</text>
			</view>
			<view class="contentTable">
				<text class="contentTitle">配送信息：</text>
				<text class="contentText" v-if="!String(this.detailContentData.PSInfo)"></text>
				<div style="color:#525252;">
					<div v-for="item in detailContentData.PSInfo">
						<span v-if="item.F_DicName">{{item.F_DicName + '（'+ item.F_Number + '）'}}</span>
						<span v-else></span>
					</div>
				</div>
				
				<!-- <view class="contentText" style="" v-for="item in detailContentData.PSInfo">
					<text v-if="item.F_DicName">{{item.F_DicName + '（'+ item.F_Number + '）'}}</text>
					<text v-else class="contentText"></text>
				</view> -->
			</view>
			<view class="contentTable">
				<text class="contentTitle">附&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;件：</text>
				<view class="contentText" style="margin-top: 10px;">
					<view class="contentText" style="margin-top: 10px;">
						<text v-for="item in detailContentData.FileUrl">
							<img  :src="item.F_FileUrl" class="imgstyle" v-if="fileType.indexOf(item.F_FileType) > -1"  @click="downloadFile(item.F_FileUrl)">						
							<img  src="@/static/file.png" class="imgstyle" v-else @click="downloadFile(item.F_FileUrl)">
						</text>
						<text v-for="item in detailContentData.DealFileUrl">
							<img  :src="item.F_FileUrl" class="imgstyle" v-if="fileType.indexOf(item.F_FileType) > -1"  @click="downloadFile(item.F_FileUrl)">						
							<img  src="@/static/file.png" class="imgstyle" v-else @click="downloadFile(item.F_FileUrl)">
						</text>
						<text v-for="item in detailContentData.CollectFile">
							<img  :src="item.F_FileUrl" class="imgstyle" v-if="fileType.indexOf(item.F_FileType) > -1"  @click="downloadFile(item.F_FileUrl)">						
							<img  src="@/static/file.png" class="imgstyle" v-else @click="downloadFile(item.F_FileUrl)">
						</text>
					</view>
					<!-- <uni-file-picker readonly :value="getFileData(detailContentData.FileUrl)" :imageStyles="imageStyles" file-mediatype="image"/> -->
					<!-- <uni-file-picker readonly :value="getFileData(detailContentData.FileUrl)" :imageStyles="imageStyles" file-mediatype="image" v-if="detailContentData.FileUrl"/> -->
					<!-- <uni-file-picker readonly :value="getFileData(detailContentData.DealFileUrl)" :imageStyles="imageStyles" file-mediatype="image" v-if="detailContentData.DealFileUrl"/>
					<uni-file-picker readonly :value="getFileData(detailContentData.CollectFile)" :imageStyles="imageStyles" file-mediatype="image" v-if="detailContentData.CollectFile"/> -->
				</view>
			</view>
		</view>
		<yiLine>
			<view></view>
		</yiLine>

		<view class="operationButton" v-show="orderButtonData">
		<!-- <view class="operationButton" > -->
			<view>
				<text class="operationButtonTitle">操作</text>
				<buttonsComponents class="buttons" :order-button-data="orderButtonData" :wid="workorderid"
					:orderType="detailContentData.F_WorkOrderCategory" :departid="departid"
					:maintenancer="$mHelper.findUserName(userCodeList,detailContentData.F_Maintenancer) " />
			</view>
		</view>

		<yiLine>
			<view></view>
		</yiLine>
		<view style="background-color: #fff;padding: 17px;">
			<view class="segmentedControlWrapper">
				<uni-segmented-control :current="segmenter.current" :values="segmenter.items"
					@clickItem="onClickSegmentedControl" styleType="text" activeColor="#007aff" />
			</view>
			<view class="handleProcess">
				<view v-show="current == 0">
					<uni-steps :options="orderProcessDate" :steteName='"gdlc"' v-if="orderProcessDate" />
					<view class="contentTable noCon" v-else>
						暂时无相关记录
					</view>
				</view>
				<view v-show="current == 1">
					<view class="detailContent showType" v-for="item in evaluateDate" :key=item.F_Id>
						<view class="contentTable">
							<text class="contentTitle">服务态度：</text>
							<htz-rate v-model="item.F_Attitude" :readonly='true' :size="30" :type="2"></htz-rate>
							<text class="contentTitle">{{ item.F_Attitude | getEvaluateFilters }}</text>
						</view>
						<view class="contentTable">
							<text class="contentTitle">文字评价：</text>
							<text class="contentText">{{ item.F_EvaluateContent }}</text>
						</view>
					</view>
					<view class="contentTable noCon" v-show="evaluateDate">
						暂时无相关记录
					</view>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	import yiLine from "@/components/yi-line/yi-line.vue"
	import buttonsComponents from "pages/myTask/workOrderDetail/button/button"
	import pageData from "@/pages/myTask/repairList/addRepair/pageData.js"
	import uniSteps from "@/pages/components/steps/index.vue"
	import htzRate from '@/pages/components/htz-rate/htz-rate.vue'
	const segmenterData = {
		0: ["工单流程","工单评价"]
	}
	export default {
		components: {
			yiLine,
			buttonsComponents,
			uniSteps,
			htzRate
		},
		filters: {
			getEvaluateFilters(state) {
				const data = {
					1: '差',
					2: '差',
					3: '良',
					4: '优',
					5: '优',
				}
				return data[state]
			}
		},
		data() {
			return {
				getFontSizeValue:'1rem',
				active: 1,
				current: 0,
				workorderid: "", // 工单id
				sms_id: '', // 消息id
				tap: '', //工单切换
				roleCode: "", //角色
				departList: [], //部门数据
				orderTypeList: [], // 工单状态
				userCodeList: [], //用户信息
				detailContentData: {}, // 详情内容
				orderButtonData: [],
				departid: '',
				evaluateDate: [], // 评价
				orderProcessDate: [], // 工单流程
				workOrderButton: [], // 工单按钮权限
				fileType: ['.png', '.jpg' ,'.webp', '.bmp', '.jpeg'],
				segmenter: {
					current: 0,
					items: ["0", "1"],
					type: "",
				},
				imageStyles: {
					width: 64,
					height: 64,
					border: {
						radius: '20%'
					}
				},
				isDisplay: {
					displaySegmentedControl: false, // 分段器
				},
			}
		},
		onLoad(optioin) {
			this.getFontSizeValue = uni.getStorageSync('fontSizeValue')+'rem'
			this.workorderid = optioin.wid
			this.sms_id = optioin.sms_id
			this.getGongDanType()
			this.getDetail(0)
			this.getDetail(1)
			console.log(this.sms_id)
			console.log(optioin.buttons)
			if(this.sms_id) {
				this.getButtons()
			}else if(optioin.buttons) {
				JSON.parse(optioin.buttons).forEach(v => {
					let btn = this.$mButtonConfig[v.key];
					if (btn != undefined) {
						this.orderButtonData.push(btn);
					}
				})
			}
			pageData.getDet((res, data) => {
				console.log(data)
				this.departList = data
			})
			pageData.getApplicant('', (res) => {
				this.userCodeList = res
			})
			this.isDisplay.displaySegmentedControl = true
			this.segmenter.type = 0
			this.segmenter.items = segmenterData[0]
			this.roleCode = uni.getStorageSync("roleCode")
		},
		methods: {
			callHandle(phone){
				if(!phone) {
					this.$mHelper.toast('无号码信息')
					return
				}
				uni.makePhoneCall({
					phoneNumber:phone //仅为示例
				})
			},
			getButtons() {
				this.orderButtonData = []
				const params = {
					SMS_Id: this.sms_id
				}
				this.$http.get("InternalMessages/GetButtons",params).then((res)=>{
					if(res.state.toLowerCase() ==="success"){
						res.rows[0].Buttons.forEach(v => {
							let btn = this.$mButtonConfig[v.key];
							if (btn != undefined) {
								this.orderButtonData.push(btn);
							}
						})
					}
				})
			},
			getGongDanType(){
				let dataOrderType = []
				const params = {
					pid:0,
					flag:1
				}
				this.$http.get("GongDanType/GetList",params).then((res)=>{
					if(res.state.toLowerCase() ==="success"){
						this.orderTypeList = res.data
					}
				})
			},
			getFileData(fileData) {
				let newFile = []
				if (fileData && fileData.length > 0) {
					fileData.forEach((element, index) => {
						const obj = {}
						obj.url = element.F_FileUrl
						obj.extname = element.F_FileType.split('.')[1]
						obj.name = element.F_FileName
						newFile.push(obj);
					});

				}
				return newFile
			},
			getDetail(type) {
				const params = {
					WorkOrderCode: this.workorderid,
					type: type
				}
				this.$http.get("Scheduling/GetWorkOrder", params).then((response) => {
					if (response.state.toLowerCase() === "success") {
						if (type == 0) {
							this.detailContentData = response.data[0]
						} else if (type == 1) {
							this.orderProcessDate = []
							response.data.forEach(v => {
								this.orderProcessDate.push({
									F_OperationTime: v.F_OperationTime,
									username: v.username,
									F_LogContent: v.F_LogContent
								})
							})
							console.log(this.orderProcessDate)
						} else if(type == 2) {
							this.evaluateDate = response.data
						}

					}
				}).catch((e) => {
					console.log(e);
				})
			},
			onClickSegmentedControl(e) {
				this.current = e.currentIndex
				switch (String(e.currentIndex)) {
					case "0":
						this.tap = 1
						break
					case "1":
						this.tap = 2
						break
				}
				this.getDetail(this.tap)
			},
			downloadFile(url) {
				uni.downloadFile({
					url: encodeURI(url), //仅为示例，并非真实的资源
					success: (res) => {
						if (res.statusCode === 200) {
							uni.openDocument({
								filePath: res.tempFilePath,
								success: (res) =>{
								}
							})
						}
					}
				})
			}
		},
	}
</script>

<style lang="scss">
	/deep/ .uni-file-picker[data-v-363ace0e]{
		display: inline-block !important;
		width: 20% !important;
	}
	.noCon{
			height: 200px;
			text-align: center;
			// font-size: 14px;
			color: #525252;
		}
		/deep/.segmented-control__text{
			font-size: 1rem;
		}
		/deep/ .set2-test{
			font-size: 1rem;
		}
		/deep/.set-2 .set-view .setTitle{
		  font-size: 1rem;
		}
		/deep/.set-2 .set-view .setCon{
			font-size: 1rem;
		}
		.imgstyle{
			width: 64px;
		}
		.wrapper {
			// background-color: #fff; 
			// height: 100vh;
			// padding: 10px 20px 0 20px;
			.showType{
				background-color: #fff; 
				padding: 10px 13px;
				border-radius: 10px;
				box-shadow: 0px 4px 16px 0px rgba(69, 91, 99, 0.13);
				margin-bottom: 25px;
			}
			.detailContent {
				// margin: 0 0 15px 0;
				padding: 17px;
				background-color: #fff;
				
				.contentTable {
					margin: 0 0 10px 0;
					display: flex;
					.contentTitle {
						// font-family: '微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑';
						font-weight: 700;
						// text-align-last: justify;
						font-style: normal;
						// font-size: 14px;
						color: #555555;
						width: 34%;
						display: inline-block;
						text-align: right;
						
						
					}
					
					.frContentText{
						font-size: 25px !important;
						color: #1e90ff !important;
						margin-left: 15px !important;
					}
	
					.contentText {
						width: 66%;
						color: #525252;
						// font-size: 14px;
						margin-left: 10px;
					}
	
					.textState {
						// position: absolute;
						// right: 15px;
						// font-size: 12px;
						border: 1px solid #52C41A;
						padding: 2px 5px;
						color: #52C41A;
						background-color: rgba(195, 239, 161, 0.2);
						border-radius: 5px
					}
	
					.fx {
						// right: 70px;
						border: 1px solid #ff6e54;
						color: #ff6e54;
						background-color: rgba(255, 110, 84, 0.2);
						margin-left: 20px;
					}
				}
				
				
			}
	
			.operationButton {
				margin: 5px 0;
				padding: 17px;
				background-color: #fff;
				
				.operationButtonTitle {
					font-weight: 700;
				}
	
				.buttons {
					margin: 15px 0 0 0;
	
				}
			}
			
			.equipmentInfo{
				width: 100%;
				margin-top: 15px;
				border: 1px solid rgb(229, 229, 229);
				box-shadow: 0px 4px 16px 0px rgba(69, 91, 99, 0.05);
				margin-bottom: 20px;
				border-radius: 5px;
				
				.trCon {
					width: 100%;
					// font-size: 14px;
				
					.tdCon {
						display: inline-block;
						padding: 10px 0px;
						color: rgb(102, 102, 102);
						width: 31%;
						padding-right: 5px;
						text-align: center;
					}
				}
				
			}
			
			.handleProcess {
				margin: 15px 0;
	
				.handleProcessTitle {
					font-weight: 700;
				}
	
				.handleProcessContent {
					margin: 8px 0 0 0;
	
					.handleProcessContentTime text {
						// font-size: 14px;
						color: #73d13d;
					}
	
					.handleProcessContentText text {
						// font-size: 14px;
						color: #525252;
					}
				}
			}
		}
</style>