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

<template>
	<view class="wrapper">
		<view class="detailContent">
			<view class="contentTable">
				<text class="contentTitle">工单编号：</text>
				<text class="contentText">{{ detailContentData.F_WorkOrderCode }}</text>
				<text class="textState">{{ 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(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">
				<view class="contentTitle" style="float: left;width: 70px;">报修内容：</view>
				<view class="contentText" style="margin-left: 70px;">{{ 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">{{ $mHelper.findUserName(userCodeList,detailContentData.F_Maintenancer) }}</text>
			</view>
			<view class="contentTable">
				<text class="contentTitle">联系电话：</text>
				<text class="contentText">{{ detailContentData.F_Phone }}</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">图&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;片：</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="orderButtonData.length != 0">
			<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">
					<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.F_Result }}</text>
						</view>
						<view class="contentTable">
							<text class="contentTitle">完成状态：</text>
							<text class="contentText">{{ item.dealtype }}</text>
						</view>
						<view class="contentTable">
							<text class="contentTitle">附&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;件：</text>
							<uni-file-picker readonly :value="getFileData(item.FileUrl)" :imageStyles="imageStyles"
								file-mediatype="image" />
						</view>
					</view>
					
					<view class="contentTable noCon" v-show="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">状&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;态：</text>
							<text class="contentText">{{ item.StateName }}</text>
						</view>
						<view class="contentTable">
							<text class="contentTitle">内&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;容：</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.length == 0">
						暂时无相关记录
					</view>
				</view>
				<view v-show="current == 2">
					<uni-steps :options="orderProcessDate" :steteName='"gdlc"' v-show="orderProcessDate.length > 0" />
					<view class="contentTable noCon" v-show="orderProcessDate.length == 0">
						暂时无相关记录
					</view>
				</view>
				<view v-show="current == 3">
					<uni-steps :options="maintenanceRecords" :steteName='"wxjl"' v-show="maintenanceRecords.length > 0" />
					<view class="contentTable noCon" v-show="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"></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"></htz-rate>
							<text class="contentTitle">{{ item.F_Quality | 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.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 "@/components/wangxiaohua-steps/index.vue"
	import htzRate from '@/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: '优',
					4: '优',
				}
				return data[state]
			}
		},
		data() {
			return {
				active: 1,
				current: 0,
				workorderid: "", // 工单id
				tap: '', //工单切换
				roleCode: "", //角色
				departList: [], //部门数据
				userCodeList: [], //用户信息
				detailContentData: {}, // 详情内容
				orderButtonData: [],
				departid: '',
				handleProcessListData: [], // 办理过程
				cooperationDate: [], // 协作工单
				orderProcessDate: [], // 工单流程
				maintenanceRecords: [], // 维修记录
				evaluateDate: [], // 评价工单
				workOrderButton: [], // 工单按钮权限
				backState: 0, // 返修的状态，是返修1，不是为0
				backCon: '', // 返修的内容
				segmenter: {
					current: 0,
					items: ["0", "1", "2", "3", "4"],
					type: "",
				},
				imageStyles: {
					width: 64,
					height: 64,
					border: {
						radius: '20%'
					}
				},
				isDisplay: {
					displaySegmentedControl: false, // 分段器
				},
			}
		},
		onLoad(optioin) {
			this.workorderid = optioin.wid
			this.getDetail(0)
			this.getDetail(3)
			this.getDetail(1)
			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
			})
			pageData.getApplicant('', (res) => {
				this.userCodeList = res
			})
			if (optioin.segmenter == undefined || optioin.segmenter == null || optioin.segmenter == "") {
				this.isDisplay.displaySegmentedControl = false
			} 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: {
			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.departid = this.detailContentData.F_MaintenanceDept.trim()
						} 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
						} 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;
	}
	.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;

				.contentTitle {
					// font-family: '微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑';
					font-weight: 700;
					font-style: normal;
					font-size: 14px;
					color: #555555;
					width: 70px;
					display: inline-block;
					text-align: right;
				}

				.contentText {
					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);
				}
			}
		}

		.operationButton {
			margin: 5px 0;
			padding: 17px;
			background-color: #fff;
			
			.operationButtonTitle {
				font-weight: 700;
			}

			.buttons {
				margin: 15px 0 0 0;

			}
		}

		.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>