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

<template>
	<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">
				<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_Phone }}</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: 75px;">{{ 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.GapTime }}</text>
			</view>
			<view class="contentTable">
				<text class="contentTitle" style="float: left;width: 70px;">配送信息：</text>
				<text class="contentText" v-if="detailContentData.PSInfo == []">''</text>
				<view class="contentText" style="margin-left: 75px;" v-for="item in detailContentData.PSInfo">{{item.F_DicName + '（'+ item.F_Number + '）'}}</view>
			</view>
			<view class="contentTable">
				<text class="contentTitle">附&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;件：</text>
				
				<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>
				</view>
			</view>
		</view>
		<yiLine>
			<view></view>
		</yiLine>

		<view class="operationButton" v-show="orderButtonData.length != 0">
		<!-- <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-show="orderProcessDate.length > 0" />
					<view class="contentTable noCon" v-show="orderProcessDate.length == 0">
						暂时无相关记录
					</view>
				</view>
				<view v-show="current == 2">
					<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.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"
	const segmenterData = {
		0: ["工单流程","工单评价"]
	}
	export default {
		components: {
			yiLine,
			buttonsComponents,
			uniSteps
		},
		filters: {
			getEvaluateFilters(state) {
				const data = {
					1: '差',
					2: '差',
					3: '良',
					4: '优',
					4: '优',
				}
				return data[state]
			}
		},
		data() {
			return {
				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.workorderid = optioin.wid
			this.sms_id = optioin.sms_id
			this.getGongDanType()
			this.getDetail(0)
			this.getDetail(1)
			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: {
			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) {
				this.orderProcessDate = []
				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) {
							response.data.forEach(v => {
								this.orderProcessDate.push({
									F_OperationTime: v.F_OperationTime,
									username: v.username,
									F_LogContent: v.F_LogContent
								})
							})
						} 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">
	.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;
				}
				
				.imgstyle {
					width: 64px;
					height: 64px;
					margin-right: 10px;
					border-radius: 4px;
				}
				
				.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>