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_Location }}</text>
			</view>
			<view class="contentTable">
				<text class="contentTitle">科室电话：</text>
				<text class="contentText">{{ detailContentData.F_DeptPhone }}</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" v-show="isDD.indexOf('DD') >= 0 || isDD === 'GLY'">
				<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_ToDept && item.F_ToDept != '0'">送达科室：{{
                $mHelper.findParents(departList, item.F_ToDept)
              }}-{{item.F_DicName}}({{item.F_Number}})</span>
						<span v-if="findIndex >= 0 && !item.F_IsBorrow && !item.F_ToDept">{{
              $mHelper.findParents(orderTypeBBXXList, item.F_DicId) +
              "（" +
              item.F_Number +
              "）"
            }}</span>
						<span v-if="findIndex < 0 && !item.F_IsBorrow && !item.F_ToDept">{{
			  item.F_DicName +
			  "（" +
			  item.F_Number +
			  "）"
			}}</span>
						<span v-if="findIndex < 0 && item.F_IsBorrow == 1">{{
              item.F_DicName + "（借" + item.F_Number + "）"
            }}</span>
						<span v-if="findIndex < 0 && item.F_IsBorrow == 2">{{
			  item.F_DicName + "（还" + item.F_Number + "）"
			}}</span>
						<!-- <span v-if="findIndex < 0 && !item.F_IsBorrow">{{
			  item.F_DicName + "（" + item.F_Number + "）"
			}}</span> -->
						<!-- <span v-if="item.F_IsBorrow == 1">(借)</span>
            <span v-if="item.F_IsBorrow == 2">(还)</span>
            <span v-if="item.F_PaidInQuantity"
              >(实收数量:{{ item.F_PaidInQuantity }})</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">异常配送信息：</text>
				<text class="contentText" v-if="!String(this.detailContentData.SDInfo)"></text>
				<div style="color: #525252">
					<div v-for="item in detailContentData.SDInfo">
						<span v-if="item.F_ToDept && item.F_ToDept != '0'">送达科室：{{
                $mHelper.findParents(departList, item.F_ToDept)
              }}-{{item.F_DicName}}({{item.F_Number}})</span>
						<span v-if="findIndex >= 0 && !item.F_IsBorrow && !item.F_ToDept">{{
              $mHelper.findParents(orderTypeBBXXList, item.F_DicId) +
              "（" +
              item.F_Number +
              "）"
            }}</span>
						<span v-if="findIndex < 0 && !item.F_IsBorrow && !item.F_ToDept">{{
			  item.F_DicName +
			  "（" +
			  item.F_Number +
			  "）"
			}}</span>
						<span v-if="findIndex < 0 && item.F_IsBorrow == 1">{{
              item.F_DicName + "（借" + item.F_Number + "）"
            }}</span>
						<span v-if="findIndex < 0 && item.F_IsBorrow == 2">{{
              item.F_DicName + "（还" + item.F_Number + "）"
            }}</span>
						<!-- <span v-if="item.F_IsBorrow == 1">(借)</span>
            <span v-if="item.F_IsBorrow == 2">(还)</span>
            <span v-if="item.F_PaidInQuantity"
              >(实收数量:{{ item.F_PaidInQuantity }})</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" v-if="detailContentData.F_IsAbnormal != null">
				<text class="contentTitle">是否异常：</text>
				<text class="contentText">{{
          detailContentData.F_IsAbnormal == 0 ? "否" : "是"
        }}</text>
			</view>
			<view class="contentTable" v-if="detailContentData.F_IsAbnormal != null">
				<text class="contentTitle">科室交接人：</text>
				<text class="contentText">{{ detailContentData.F_Recipient || "-"}}</text>
			</view>
			<!-- <view class="contentTable" v-if="detailContentData.F_WorkOrderCodes">
				<text class="contentTitle">关联工单：</text>
				<text class="contentText">{{ detailContentData.F_WorkOrderCodes }}</text>
			</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="workOrdertype" :departid="departid" :applicationDept="applicationDept" />
			</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 == 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||evaluateDate.length==0||isdealman == detailContentData.F_DealMan">
						暂时无相关记录
					</view>
				</view>
				<view v-show="current == 1">
					<view class="detailContent showType" v-for="item in sonData" :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.DealManName }}-{{ item.DealManPhone }}</text>
						</view>
						<view class="contentTable">
							<text class="contentTitle">接单时间：</text>
							<text class="contentText">{{ item.F_AcceptTime }}</text>
						</view>
					</view>
					<view class="contentTable noCon" v-show="!sonData"> 暂时数据 </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 {
				isdealman: uni.getStorageSync('userCode'), //处理人
				isDD: uni.getStorageSync("roleCode"),
				getFontSizeValue: "1rem",
				active: 1,
				current: 0,
				workorderid: "", // 工单id
				sms_id: "", // 消息id
				tap: "", //工单切换
				roleCode: "", //角色
				departList: [], //部门数据
				orderTypeList: [], // 工单状态
				orderTypeBBXXList: [], //标本信息
				userCodeList: [], //用户信息
				detailContentData: {}, // 详情内容
				orderButtonData: [],
				departid: "",
				applicationDept: "",
				workOrdertype: "",
				sonData: [],
				findIndex: -1,
				evaluateDate: [], // 评价
				orderProcessDate: [], // 工单流程
				workOrderButton: [], // 工单按钮权限
				fileType: [".png", ".jpg", ".webp", ".bmp", ".jpeg"],
				segmenter: {
					current: 0,
					items: ["0", "1", "2"],
					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.getGongDanTypeBBXX();
			this.getDetail(0);
			this.getDetail(1);
			this.getDetail(2);
			this.getDetail(3);
			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
			// })
			this.departList = JSON.parse(uni.getStorageSync("deptTreeData"));

			// pageData.getApplicant("", (res) => {
			//   this.userCodeList = res;
			// });
			// this.isDisplay.displaySegmentedControl = true
			// this.segmenter.type = 0
			// this.segmenter.items = segmenterData[0]

			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: {
			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;
					}
				});
			},
			getGongDanTypeBBXX() {
				let dataOrderType = [];
				const params = {
					pid: 0,
					flag: 1,
				};
				this.$http.get("GongDanType/GetBBXXList", params).then((res) => {
					if (res.state.toLowerCase() === "success") {
						this.orderTypeBBXXList = res.data;
					}
				});
			},
			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 && response.data.length > 0 ?
									response.data[0] : {};
								console.log(this.detailContentData.F_WorkOrderCategory, '88999')
								this.workOrdertype = this.detailContentData.F_WorkOrderCategory;
								this.applicationDept = this.detailContentData.F_ApplicationDept;
								const identification = this.$mHelper.findParents(
									this.orderTypeList,
									this.detailContentData.F_WorkOrderCategory
								);
								console.log(identification, '8899988888888')
								if (identification) {
									this.findIndex = identification.indexOf("标本");
								}
							} 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;
							} else if (type == 3) {
								if (response.data == null) {
									this.segmenter.items = segmenterData[1];
									this.segmenter.type = "1";
								}
								this.sonData = 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;
					case "2":
						this.tap = 3;
						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>