RMYY_CallCenter_UI/CallCenterWe.../RMYYAPP/pages/myTask/workOrderDet.../workOrderDet...

<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>
				<text class="textState fx" v-show="backState == 1">返修</text> -->
			</view>
			<view class="contentTable" v-show="detailContentData.StateName ">
				<text class="contentTitle">工单状态：</text>
				<text class="textState" style="margin-left: 10px;">{{ detailContentData.StateName }}</text>
				<text class="textState fx" v-show="backState == 1">返修</text>
			</view>
			<view class="contentTable">
				<text class="contentTitle">工单类型：</text>
				<text
					class="contentText">{{ $mHelper.findParents(orderTypeList,detailContentData.F_WorkOrderCategory)}}</text>
			</view>
			<view class="contentTable" v-if="typeName.indexOf('设备类')>=0">
				<text class="contentTitle">设备资产编码：</text>
				<text class="contentText">{{ detailContentData.F_DeviceEncode }}</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.F_PlaceOfRepair }}</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">{{ $mHelper.findParents(departList,detailContentData.F_MaintenanceDept) }}</text>
			</view>
			<view class="contentTable">
				<text class="contentTitle">维修人员：</text>
				<text class="contentText">{{ detailContentData.MaintenancerName}}</text>
			</view>
			<view class="contentTable">
				<text class="contentTitle">联系方式：</text>
				<text class="contentText" style="margin-top: -5px;">{{ detailContentData.MaintenancerPhone }} <uni-icons @click="callHandle(detailContentData.MaintenancerPhone)" class="frContentText" type="phone" size="30" v-if="detailContentData.MaintenancerPhone"></uni-icons></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">{{ detailContentData.F_EmergencyTypes }}</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" v-show="backState == 1">
				<text class="contentTitle">返修内容：</text>
				<text class="contentText">{{ backCon }}</text>
			</view>
			<view class="contentTable">
				<text class="contentTitle">图<span class="place"></span>片：</text>
			
				<view class="contentText" style="margin-top: 10px;">
					<uni-file-picker readonly :value="getFileData(detailContentData.FileUrl)" :imageStyles="imageStyles" file-mediatype="image" />
				</view>
			</view>
		</view>
		<yiLine>
			<view></view>
		</yiLine>
		
		<view class="operationButton" v-show="equipmentCon && equipmentCon.length != 0">
			<view>
				<text class="operationButtonTitle">耗材信息</text>
				<table class="equipmentInfo">
					<thead style="background-color: #fafafa;">
						<tr class="trCon">
							<td class="tdCon">耗材名称</td>
							<td class="tdCon">单价</td>
							<td class="tdCon">数量</td>
							<td class="tdCon">总价</td>
						</tr>
					</thead>
					<tbody>
						<tr class="trCon" v-for="item in equipmentCon">
							<td class="tdCon" v-if="!item.F_EquipNumber">{{item.F_EquipName}}</td>
							<td class="tdCon" v-if="item.F_EquipNumber">{{item.F_EquipName}}({{item.F_EquipNumber}})</td>
							<td class="tdCon">{{item.F_EquipPrice}}</td>
							<td class="tdCon">{{item.F_EquipAmount}}</td>
							<td class="tdCon">{{item.F_EquipAmount*item.F_EquipPrice}}</td>
						</tr>
					</tbody>
				</table>
			</view>
		</view>
		
		<view class="operationButton" v-show="orderButtonData && orderButtonData.length != 0">
		<!-- <view class="operationButton"> -->
			<view>
				<text class="operationButtonTitle">操作</text>
				<buttonsComponents class="buttons" :order-button-data="orderButtonData" :wid="workorderid" :typeName="$mHelper.findParents(orderTypeList,detailContentData.F_WorkOrderCategory)"
					:orderType="detailContentData.F_WorkOrderCategory" :departid="departid" :applicationDept="applicationDept" :firstType="$mHelper.stateComm(3)"
					:maintenancer="$mHelper.findUserName(userCodeList,detailContentData.F_Maintenancer) " />
			</view>
		</view>

		<yiLine>
			<view></view>
		</yiLine>
		<view style="background-color: #fff;padding: 17px 0px;">
			<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">
					<view class="detailContent showType" v-for="item in handleProcessListData" :key=item.F_Id>
						<view class="contentTable">
							<text class="contentTitle">处理部门：</text>
							<text class="contentText">{{ $mHelper.findParents(departList,item.F_MaintenanceDept) }}</text>
						</view>
						<view class="contentTable">
							<text class="contentTitle">处理人员：</text>
							<text
								class="contentText">{{ $mHelper.findUserName(userCodeList,detailContentData.F_Maintenancer) }}</text>
						</view>
						<view class="contentTable">
							<text class="contentTitle">维修时间：</text>
							<text class="contentText">{{ item.F_ProcessingTime }}</text>
						</view>
						<view class="contentTable">
							<text class="contentTitle">完成状态：</text>
							<text class="contentText">{{ item.dealtype }}</text>
						</view>
						<view class="contentTable">
							<text class="contentTitle">处理结果：</text>
							<text class="contentText">{{ item.F_Result }}</text>
						</view>
						<view class="contentTable">
							<text class="contentTitle">处理方式：</text>
							<text class="contentText">{{ item.F_FinishType }}</text>
						</view>
						<view class="contentTable">
							<text class="contentTitle">异常原因：</text>
							<text class="contentText">{{ item.F_ExceptionTypeName }}</text>
						</view>
						<view class="contentTable" v-if="item.FileUrl && item.FileUrl.length > 0">
							<text class="contentTitle">维修前附件：</text>
							<uni-file-picker readonly :value="getFileData(item.FileUrl)" :imageStyles="imageStyles"
								file-mediatype="image" />
						</view>
						<view class="contentTable" v-if="detailContentData.PictureUrl && detailContentData.PictureUrl.length > 0">
							<text class="contentTitle">维修后附件：</text>
							<uni-file-picker readonly :value="getFileData(detailContentData.PictureUrl)" :imageStyles="imageStyles"
								file-mediatype="image" />
						</view>
					</view>
					
					<view class="contentTable noCon" v-show="!handleProcessListData || handleProcessListData.length == 0">
						暂时无相关记录
					</view>
				</view>
				<view v-show="current == 1">
					<view class="detailContent showType" v-for="item in cooperationDate" :key=item.F_Id >
						<view class="contentTable">
							<text class="contentTitle">工单编号：</text>
							<text class="contentText">{{ item.F_WorkOrderCode }}</text>
						</view>
						<view class="contentTable">
							<text class="contentTitle">协作方式：</text>
							<text class="contentText">{{ item.Mode }}</text>
						</view>
						<view class="contentTable">
							<text class="contentTitle">接单部门：</text>
							<text class="contentText">{{ $mHelper.findParents(departList,item.F_MaintenanceDept)}}</text>
						</view>
						<view class="contentTable">
							<text class="contentTitle">状<span class="place"></span>态：</text>
							<text class="contentText">{{ item.StateName }}</text>
						</view>
						<view class="contentTable">
							<text class="contentTitle">内<span class="place"></span>容：</text>
							<text class="contentText">{{ item.F_Content }}</text>
						</view>
						<view class="contentTable">
							<text class="contentTitle">创建时间：</text>
							<text class="contentText">{{ item.F_CreateTime }}</text>
						</view>
					</view>
					<view class="contentTable noCon" v-show="!cooperationDate || cooperationDate.length == 0">
						暂时无相关记录
					</view>
				</view>
				<view v-show="current == 2">
					<uni-steps :options="orderProcessDate" :steteName='"gdlc"' v-show="orderProcessDate && orderProcessDate.length > 0" />
					<view class="contentTable noCon" v-show="!orderProcessDate || orderProcessDate.length == 0">
						暂时无相关记录
					</view>
				</view>
				<view v-show="current == 3">
					<uni-steps :options="maintenanceRecords" :steteName='"wxjl"' v-show="maintenanceRecords && maintenanceRecords.length > 0" />
					<view class="contentTable noCon" v-show="!maintenanceRecords || maintenanceRecords.length == 0">
						暂时无相关记录
					</view>
				</view>
				<view v-show="current == 4">
					
					<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>
							<htz-rate v-model="item.F_Quality" :size="30" :type="2"></htz-rate>
							<text class="contentTitle">{{ item.F_Quality | getEvaluateFilters }}</text>
						</view>
						<view class="contentTable">
							<text class="contentTitle">完工时效：</text>
							<htz-rate v-model="item.F_Efficiency" :size="30" :type="2"></htz-rate>
							<text class="contentTitle">{{ item.F_Efficiency | 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 || evaluateDate.length == 0">
						暂时无相关记录
					</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: ["处理结果", "协作工单","工单流程",  "维修记录", "评价"],
		1: ["处理结果", "工单流程",  "维修记录", "评价"]
	}
	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,
				typeName: '',
				workorderid: "", // 工单id
				sms_id: '', // 消息id
				tap: '', //工单切换
				roleCode: "", //角色
				departList: [], //部门数据
				userCodeList: [], //用户信息
				detailContentData: {}, // 详情内容
				orderButtonData: [],
				departid: '',
				applicationDept: '',
				handleProcessListData: [], // 办理过程
				cooperationDate: [], // 协作工单
				orderProcessDate: [], // 工单流程
				maintenanceRecords: [], // 维修记录
				evaluateDate: [], // 评价工单
				workOrderButton: [], // 工单按钮权限
				equipmentCon:[], // 耗材数量
				backState: 0, // 返修的状态，是返修1，不是为0
				backCon: '', // 返修的内容
				orderTypeList: [],
				segmenter: {
					current: 0,
					items: ["0", "1", "2", "3", "4"],
					type: "",
				},
				imageStyles: {
					width: 64,
					height: 64,
					border: {
						radius: '20%'
					}
				},
				isDisplay: {
					displaySegmentedControl: false, // 分段器
				},
			}
		},
		async onLoad(optioin) {
			await this.getGongDanType()
			this.getFontSizeValue = uni.getStorageSync('fontSizeValue')+'rem'
			this.workorderid = optioin.wid
			this.sms_id = optioin.sms_id
			this.getDetail(0)
			this.getDetail(3)
			this.getDetail(1)
			this.getDetail(4)
			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) => {
			// 	this.departList = data
			// })
			this.departList = JSON.parse(window.localStorage.getItem('deptAllList'))
			pageData.getApplicant('', (res) => {
				this.userCodeList = res
			})
			 if(this.sms_id) {
				this.isDisplay.displaySegmentedControl = true
				this.segmenter.type = 0
				this.segmenter.items = ["处理结果", "协作工单","工单流程",  "维修记录", "评价"]
				this.getDetail(2)
			} else {
				this.isDisplay.displaySegmentedControl = true
				this.segmenter.type = optioin.segmenter
				this.segmenter.items = segmenterData[optioin.segmenter]
				this.getDetail(2)
			}
			this.roleCode = uni.getStorageSync("roleCode")
		},
		methods: {
			async getGongDanType(){
				let dataOrderType = []
				const params = {
					pid:0,
					flag:1
				}
				const res = await this.$http.get("GongDanType/GetList",params)
				if (res.state.toLowerCase() ==="success") this.orderTypeList = res.data
			},
			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);
							}
						})
					}
				})
			},
			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("FaultRepair/GetWorkOrder", params).then((response) => {
					if (response.state.toLowerCase() === "success") {
						if (type == 0) {
							this.detailContentData = response.data[0]
							this.applicationDept = this.detailContentData.F_ApplicationDept.trim()
							this.departid = this.detailContentData.F_MaintenanceDept.trim()
							this.typeName = this.$mHelper.findParents(this.orderTypeList,this.detailContentData.F_WorkOrderCategory)
						} else if (type == 1) {
							this.handleProcessListData = response.data
						} else if (type == 2) {
							if(response.data.data.length == 0) {
								this.segmenter.items = segmenterData[1]
								this.segmenter.type = '1'
							}
							this.cooperationDate = response.data.data
						} else if (type == 3) {
							this.orderProcessDate = response.data
						} else if (type == 4) {
							this.maintenanceRecords = response.data
							if(response.data.length> 0 && response.data[0].Equips) {
								this.equipmentCon = response.data[0].Equips
								console.log(this.equipmentCon.length)
							}
						} else if (type == 5) {
							this.evaluateDate = response.data
						} else if (type == 6) {
							if (response.message == '不是返修') {
								this.backState = 0
							} else if (response.message == '是返修') {
								this.backState = 1
								this.backCon = response.data
							}
						}

					}
				}).catch((e) => {
					console.log(e);
				})
			},
			onClickSegmentedControl(e) {
				this.current = e.currentIndex
				if(this.segmenter.type == '0') {
					switch (String(e.currentIndex)) {
						case "0":
							this.tap = 1
							break
						case "1":
							this.tap = 2
							break
						case "2":
							this.tap = 3
							break
						case "3":
							this.tap = 4
							break
						case "4":
							this.tap = 5
							break
					}
				}else{
					switch (String(e.currentIndex)) {
						case "0":
							this.tap = 1
							this.current = e.currentIndex
							break
						case "1":
							this.tap = 3
							this.current = e.currentIndex + 1
							break
						case "2":
							this.tap = 4
							this.current = e.currentIndex + 1
							break
						case "3":
							this.tap = 5
							this.current = e.currentIndex + 1
							break
					}
				}
				
				this.getDetail(this.tap)
			},

		},
	}
</script>

<style lang="scss">
	.noCon{
		height: 200px;
		text-align: center;
		// font-size: 14px;
		color: #525252;
	}
	/deep/.segmented-control__text{
		font-size: 1rem !important;
	}
	/deep/ .set2-test{
		font-size: 1rem !important;
	}
	/deep/.set-2 .set-view .setTitle{
	  font-size: 1rem !important;
	}
	/deep/.set-2 .set-view .setCon{
		font-size: 1rem !important;
	}

	.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;
				}
				
				.place{
					display: inline-block;
					width: 32px;
				}
				
				.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: 20%;
					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>