ErectionPlatform/pagesHome/pages/afterSalesDetails/afterSalesDetails.vue

<template>
	<BasicContainer ref='basicContainer' :option="option">
		<!-- 头部 -->
		<template #head>
			<view class="background">

			</view>

			<view class="header_title">
				<view class="">
					售后编号：{{details.pageInfo.no}}
				</view>

				<view class="mt20">
					关联任务编号：
				</view>
			</view>

		</template>

		<!-- 主体 -->
		<template #body>
			<view class="main">
				<view class="tabbar_container flex-c-sb">
					<view class="tabbar_item flex-c-c flex1" @click="()=> handleClickTabbar(0)">
						客户信息
					</view>

					<view class="tabbar_item flex-c-c flex1" @click="()=> handleClickTabbar(1)">
						售后信息
					</view>

					<view class="tabbar_item flex-c-c flex1" @click="()=> handleClickTabbar(2)">
						节点记录
					</view>

					<view class="tabbar_item flex-c-c flex1" @click="()=> handleClickTabbar(3)">
						签到记录
					</view>

					<view class="tabbar_item flex-c-c flex1" @click="()=> handleClickTabbar(4)">
						处理记录
					</view>

					<view class="active flex-c-c" :style="`transform: translateX(${details.tabbarCode * 100 +'%'})`">
						<view class="line">

						</view>
					</view>
				</view>


				<scroll-view class="scvmabx" :style="{height: details.scrollheight}" @scrolltolower="()=>{}" scroll-y="true"
					@touchmove.stop>

					<!-- 客户信息 -->
					<ClientInfo v-show="details.tabbarCode === 0" :pageInfo="details.pageInfo" :info="details.info" />

					<!-- 售后信息 -->
					<view v-show="details.tabbarCode === 1">
						<AfterSalesInfo :pageInfo="details.pageInfo" ref="afterSalesInfo" :info="details.info"
							:handleSetLoading="handleSetLoading" :handleRefresh="handleRefresh"
							:goodsTypeArr="details.goodsTypeArr" />
					</view>

					<!-- 节点信息 -->
					<NodeInfo v-show="details.tabbarCode === 2" :pageInfo="details.pageInfo" :info="details.info" />

					<!-- 签收记录 -->
					<SiginLog v-show="details.tabbarCode === 3" :pageInfo="details.pageInfo" :info="details.info" />

					<!-- 处理记录 -->
					<DutyList v-show="details.tabbarCode === 4" :pageInfo="details.pageInfo" :info="details.info" />
				</scroll-view>

				<view class="footer">
					<view class="button" v-if="details.buttonPermissionObj.siginBtn" @click="handleSigin">
						签 到
					</view>

					<view class="button" v-if="details.buttonPermissionObj.openWorkBtn" @click="handleStartWorking">
						开 工
					</view>

					<view class="button subColor" v-if="details.buttonPermissionObj.confirmWorkBtn"
						@click="handleConfirmCompletion">
						确认完工
					</view>

					<view class="button primaryColor" @click="handleConfirmCompletion">
						确认到货
					</view>

					<view class="button primaryColor" v-if="details.buttonPermissionObj.confirmSignfor"
						@click="handleCheckAndAccept">
						确认验收
					</view>

					<view class="button subColor" v-if="details.buttonPermissionObj.confirmAssign"
						@click="handleAssignATask">
						确认指派
					</view>
				</view>
			</view>

		</template>
	</BasicContainer>

	<tips ref="tip"></tips>

	<!-- #ifdef APP -->
	<saomiao2 :ishidestop="scanState !== 0"></saomiao2>
	<!-- #endif -->
</template>

<script lang="ts">
	import ClientInfo from "./clientInfo.vue"
	import AfterSalesInfo from "./afterSalesInfo.vue"
	import NodeInfo from "./nodeInfo.vue"
	import SiginLog from "./siginLog.vue"
	import DutyList from './dutyList.vue';

	export default {
		// 页面组件
		components: {
			// 客户信息
			ClientInfo,
			// 服务内容
			AfterSalesInfo,
			// 节点信息
			NodeInfo,
			// 签收记录
			SiginLog,
			DutyList
		}
	}
</script>

<script lang="ts" setup>
	import {
		postInstallSalesDetail,
		getCommonGoodsType,
		postInstallSalesStart
	} from '@/api/user.js'
	import {
		onLoad,
		onShow,
		onHide,
	} from '@dcloudio/uni-app'
	import { nextTick, reactive, ref, toRefs, computed } from "vue";
	import utils from '@/utils/utils.js'
	import useSystemSettingsStore from '@/store/useSystemSettingsStore';
	import { storeToRefs } from 'pinia';
	const { scanState } = storeToRefs(useSystemSettingsStore())
	// 组件配置
	const option = reactive({
		// 标题
		title: '任务详情',
		// 下拉刷新回调函数
		async pullDownRefreshInitPage() {
			await initpage(true)
			return null
		},
		// 触底加载回到函数
		reachBottomInitPage: () => { },
		haveData: true,
		isEnd: false,
		/** 页面loading */
		pageLoading: true
	})

	// 组件实例
	const basicContainer = ref() // 页面组件
	const tip = ref() // 提示弹窗
	const afterSalesInfo = ref()

	let details = reactive({
		show: false,
		/** 时间 */
		datatime: '',
		/** 当前页码 */
		pageNum: 1,
		/** 页数 */
		pageSize: 20,
		/** 渲染列表数据 */
		datalist: [],
		/** 扫描的码值 */
		scancode: '',
		scrollheight: '80vh',
		/** tabbar激活code */
		tabbarCode: 0,
		/** 页面数据 */
		pageInfo: {
			// 安装任务id
			id: ''
		},
		/** 数据 */
		info: {},
		goodsTypeArr: [],
		type_map: [
			{
				value: 1,
				label: "调试",
			},
			{
				value: 2,
				label: "维修",
			},
			{
				value: 3,
				label: "理赔",
			},
			{
				value: 4,
				label: "待确认",
			},
			{
				value: 5,
				label: "换货",
			},
			{
				value: 6,
				label: "工厂补单",
			}
		],
		/** 用户信息 */
		userInfo: (uni.getStorageSync('userInfo') || {}),
		/** 按钮权限 */
		buttonPermissionObj: {
			/* 
				0 -- 待确认
				1 -- 待指派
				2 -- 已指派
				3 -- 已到货
				4 -- 服务中
				5 -- 已完成
				6 -- 已验收
				7 -- 已完结
				8 -- 已关闭
			 */

			/** 提交修改 */
			submitChangeBtn: computed(() => {
				const { installSales } = details.info as any

				if (utils.getObjType(installSales) !== 'object') return false

				const _status = Number(installSales.status)

				const whiteArr = [0]

				if (whiteArr.includes(_status)) return true

				return false
			}),
			/** 签到 */
			siginBtn: computed(() => {
				const { id } = details.userInfo

				console.log('id :>> ', id);

				const { installSales, installWork } = details.info as any

				if (utils.getObjType(installSales) !== 'object' || utils.getObjType(installWork) !== 'object') return false

				if (!installWork.work_user_ids || !installWork.work_user_ids.includes(id)) return false

				const _status = Number(installSales.status)

				const whiteArr = [4]

				if (whiteArr.includes(_status)) return true

				return false
			}),
			/** 开工 */
			openWorkBtn: computed(() => {
				const { id } = details.userInfo

				console.log('id :>> ', id);

				const { installSales, installWork } = details.info as any
				console.log('installWork :>> ', installWork);

				if (utils.getObjType(installSales) !== 'object' || utils.getObjType(installWork) !== 'object') return false

				if (!installWork.work_user_ids || !installWork.work_user_ids.includes(id)) return false

				console.log('installWork.work_user_ids.includes(id) :>> ', installWork.work_user_ids.includes(id));

				const _status = Number(installSales.status)

				const _type = Number(installSales.type)

				// 是否为补货/换货
				const isReplenishment = [5, 6]

				// 补货换货单
				if (isReplenishment.includes(_type)) {
					const whiteArr = [3]

					if (whiteArr.includes(_status)) return true
				} else {
					const whiteArr = [2, 3]

					if (whiteArr.includes(_status)) return true
				}


				return false
			}),
			/** 确认完工 */
			confirmWorkBtn: computed(() => {
				const { id } = details.userInfo

				console.log('id :>> ', id);

				const { installSales, installWork } = details.info as any

				if (utils.getObjType(installSales) !== 'object' || utils.getObjType(installWork) !== 'object') return false

				if (!installWork.work_user_ids || !installWork.work_user_ids.includes(id)) return false

				const _status = Number(installSales.status)

				const whiteArr = [4]

				if (whiteArr.includes(_status)) return true

				return false
			}),
			/** 确认验收 */
			confirmSignfor: computed(() => {
				// 安装负责人存在验收权限
				const _roleWhite = [3, 4]
				if (!_roleWhite.includes(Number(details.userInfo.role_code))) return false

				const { installSales } = details.info as any

				if (utils.getObjType(installSales) !== 'object') return false

				const _status = Number(installSales.status)

				const whiteArr = [5]

				if (whiteArr.includes(_status)) return true

				return false
			}),
			/** 确认指派 */
			confirmAssign: computed(() => {
				console.log('Number(details.userInfo.role_code) :>> ', Number(details.userInfo.role_code));
				// 安装负责人存在验收权限
				const _roleWhite = [3, 4]
				if (!_roleWhite.includes(Number(details.userInfo.role_code))) return false

				const { installSales } = details.info as any

				if (utils.getObjType(installSales) !== 'object') return false
				console.log('111 :>> ', 111);
				const _status = Number(installSales.status)
				console.log('_status :>> ', _status);
				const whiteArr = [1, 2, 3]

				if (whiteArr.includes(_status)) return true
				console.log('111 :>> ', 222);
				return false
			})
		}

	})

	onLoad(async (e) => {
		console.log('e :>> ', e);
		details.pageInfo = JSON.parse(e.pageInfo)


	})

	onShow(async () => {
		// #ifdef APP
		// 初始化关闭监听
		uni.$off('scancodedate')
		// init()
		uni.$on('scancodedate', function (code) {
			console.log('code :>> ', code);
			if (code) {
				console.log(code);
				details.scancode = code
				scandata()
			}
		})
		// #endif
		try {
			option.pageLoading = true

			await Promise.all([initGoodsTypeList(), initpage()])
		} catch (err) {
			console.log('err :>> ', err);
			//TODO handle the exception
		} finally {
			option.pageLoading = false
		}

		await nextTick()
		// basicContainer.value.startPullDownRefresh()

		const _height = await utils.getViewDistanceFormTop('.scvmabx')

		details.scrollheight = Number(_height.replace('px', '')) - 100 + 'px'
	})

	/** 扫描执行回调 */
	const scandata = () => { }

	/** 初始化获取页面数据 */
	const initpage = async (isLoading = false) => {
		try {
			if (isLoading) option.pageLoading = true

			const res = await postInstallSalesDetail({ id: details.pageInfo.id })
			const { code, data } = res
			if (code !== 200) return

			console.log('data :>> ', data);
			details.info = data


			setTimeout(() => {

				if (!afterSalesInfo.value) return

				// 售后信息赋值
				afterSalesInfo.value.details.form = utils.deepClone(data.installSales || {})
				afterSalesInfo.value.details.imgList = data.installSales.images || []

				for (let i = 0; i < details.type_map.length; i++) {
					const value = details.type_map[i]

					if (value.value !== afterSalesInfo.value.details.form.type) continue
					console.log('value :>> ', value);
					afterSalesInfo.value.details.form.typeName = value.label
					afterSalesInfo.value.details.value = [i]
					break
				}
				// typeName
				console.log('afterSalesInfo.value :>> ', afterSalesInfo.value);
			}, 100)
		} catch (err) {
			console.log('err :>> ', err);
			//TODO handle the exception
		} finally {
			if (isLoading) option.pageLoading = false
		}

	}

	/** 初始化获取goodsTypeList */
	const initGoodsTypeList = async () => {
		const res = await getCommonGoodsType({})
		const { code, data } = res

		if (code !== 200) return
		details.goodsTypeArr = data || {}
	}

	/** tabbar点击事件 */
	const handleClickTabbar = (code : number) => {
		details.tabbarCode = code
	}

	/** 签到 */
	const handleSigin = () => {
		tip.value.setdetails({
			isshow: true,
			content: '签入 | 签出',
			cancelTxt: '签入',
			confirmTxt: '签出',
			success() {
				// 关闭弹窗
				tip.value.setdetails({ isshow: false })

				uni.navigateTo({
					url: '/pagesHome/pages/siginIn/siginIn?type=siginOut&id=' + details.pageInfo.id + '&pageType=installSales'

				})
			},
			cancel() {
				// 关闭弹窗
				tip.value.setdetails({ isshow: false })

				uni.navigateTo({
					url: '/pagesHome/pages/siginIn/siginIn?type=siginIn&id=' + details.pageInfo.id + '&pageType=installSales'
				})
			}
		})


	}

	/** 开工 */
	const handleStartWorking = () => {

		tip.value.setdetails({
			isshow: true,
			content: '是否确认开工',
			cancelTxt: '取 消',
			confirmTxt: '确 认',
			async success() {
				try {
					option.pageLoading = true
					tip.value.setdetails({ isshow: false })
					const res = await postInstallSalesStart({ install_sales_id: details.pageInfo.id })

					const { code } = res
					if (code !== 200) return
					basicContainer.value.startPullDownRefresh()
				} catch (err) {
					console.log('err :>> ', err);
					//TODO handle the exception
				} finally {
					option.pageLoading = false
				}

				// 关闭弹窗
			},
			cancel() {
				tip.value.setdetails({ isshow: false })
			}
		})
	}

	/** 确认完工 */
	const handleConfirmCompletion = () => {
		uni.setStorageSync('installWork', details.info.installWork)

		uni.navigateTo({
			url: '/pagesHome/pages/ParticularsOfCompletionBySales/ParticularsOfCompletionBySales?id=' + details.pageInfo.id
		})
	}

	/** 验收 */
	const handleCheckAndAccept = () => {
		uni.setStorageSync('installWork', details.info.installWork)
		uni.navigateTo({
			url: '/pagesHome/pages/checkAndAccept/checkAndAccept?id=' + details.pageInfo.id + '&pageType=installSales'
		})
	}

	/** 指派 */
	const handleAssignATask = () => {
		uni.setStorageSync('installWork', details.info.installWork)
		uni.navigateTo({
			url: '/pagesHome/pages/AssignATask/AssignATask?id=' + details.pageInfo.id + '&pageType=installSales'
		})
	}

	/** 设置loading状态 */
	const handleSetLoading = (status) => {
		option.pageLoading = status
	}

	/** 刷新数据 */
	const handleRefresh = () => {
		basicContainer.value.startPullDownRefresh()
	}
</script>

<style lang="scss" scoped>
	@import url("@/utils/style/common.scss");

	.background {
		width: 100vw;
		height: 100vh;
		position: fixed;
		background-color: var(--subjectColor);
	}

	// 顶部
	.header_title {
		padding: 40upx;
		background: var(--subjectColor);
		color: #fff;
		position: relative;
	}

	// 主体内容
	.main {
		font-family: 黑体;
		position: relative;
		border-top-right-radius: 20upx;
		border-top-left-radius: 20upx;
		background-color: #fff;
	}

	// tabber
	.tabbar_container {
		height: 100upx;
		position: relative;
		border-bottom: 2upx solid #eee;

		.tabbar_item {
			height: 100%;
		}

		.active {
			width: 20%;
			position: absolute;
			bottom: 0;
			transition: all 0.3s;
			transform: translateX(100%);

			$lineHeight: 8upx;

			.line {
				width: 40%;
				border-radius: calc($lineHeight / 2);
				height: $lineHeight;
				background: var(--subjectColor);
			}
		}
	}

	// 底部
	.footer {
		box-sizing: border-box;
		height: 100px;
		padding-top: 30upx;
		display: flex;
		justify-content: space-between;

		.button {
			height: 80upx;
			display: flex;
			align-items: center;
			justify-content: center;
			flex: 1;
			// margin: 10upx;
			border: 2upx solid #b5babf;
			border-radius: 80upx;
			margin: 0 10upx;
			padding: 0 10upx;
			font-size: 0.9rem;
			font-weight: bold;

			&.subColor {
				// border-color: var(--subjectColor);
				// color: var(--subjectColor);
				background-color: var(--subjectColor);
				color: #fff;
				border: none;
			}

			&.primaryColor {
				// border-color: var(--primaryColor);
				// color: var(--primaryColor);
				background-color: var(--primaryColor);
				color: #fff;
				border: none;
			}

			&.errColor {
				// border-color: var(--errColor);
				// color: var(--errColor);
				background-color: var(--errColor);
				color: #fff;
				border: none;
			}
		}
	}
</style>