ykz-wx/pages/feedback/details.vue

<template>
	<view class="feedback-list-view">
		<pub-loading-view :loaded="loaded" height="100%">
			<uni-forms ref="formRef" :modelValue="formData" :rules="formRules" label-position="top" label-width="200px">
				<view class="feedback-info">
					<view class="feedback-info-title">登记人信息</view>
					<uni-forms-item label="姓名" name="djr">
						<uni-easyinput :disabled="disabledRef" class="pub-input" :inputBorder="false" trim="all"
							v-model="formData.djr" placeholder="请输入"></uni-easyinput>
					</uni-forms-item>
					<uni-forms-item label="联系电话">
						<uni-easyinput :disabled="disabledRef" class="pub-input" :inputBorder="false" trim="all"
							v-model="formData.lxdh" placeholder="请输入"></uni-easyinput>
					</uni-forms-item>
					<uni-forms-item label="医疗机构">
						<view class="form-feedback" @click="openPickerDept">
							<view class="form-feedback-input" :class="popupDeptText?'checked':''">
								{{ popupDeptText ? popupDeptText : '请选择'}}
							</view>
							<view><text class="iconfont checkbox">&#xe656;</text></view>
						</view>
						<PickerType ref="pickerDeptRef" :feedbackArray="yljgList" :feedbackType="formData.yljgdm"
							@change="onChangeYljg" />
					</uni-forms-item>
				</view>
				<view class="feedback-info feedback-formdate">
					<uni-forms-item label="反馈类型" name="fklx">
						<view class="form-feedback" @click="openPickerType">
							<view class="form-feedback-input" :class="popupTypeText?'checked':''">
								{{ popupTypeText ? popupTypeText : '请选择'}}
							</view>
							<view><text class="iconfont checkbox">&#xe656;</text></view>
						</view>
						<PickerType ref="pickerTypeRef" :feedbackArray="feedbackArray" :feedbackType="formData.fklx"
							@change="onChangeType" />
					</uni-forms-item>
					<uni-forms-item label="反馈详情" name="fkxq">
						<uni-easyinput v-if="!disabledRef" :inputBorder="false" trim="all" type="textarea" v-model="formData.fkxq"
							placeholder="请输入"></uni-easyinput>
						<view v-else class="other-text">{{ formData.fkxq }}</view>
					</uni-forms-item>
				</view>
			</uni-forms>
			<view v-if="disabledRef" class="feedback-schedule">
				<view class="schedule-title">进度</view>
				<view class="schedule-timeline">
					<view class="step-item" v-for="(item,index) in timeLine" :key="index">
						<view class="step_circle_item">
							<view class="dot"></view>
							<view class="line"></view>
						</view>
						<view class="step_content_item">
							<view class="step_content">{{ item.desc }}</view>
							<view class="step_date">{{ formatDate(item.time,'{y}-{m}-{d} {h}:{i}:{s}')}}</view>
						</view>
					</view>
				</view>
			</view>
		</pub-loading-view>
		<view v-if="showSubmitButton" class="pub-button is-bg large submit" @click="onConfirm">提交</view>
	</view>
</template>
<script lang="ts" setup>
	import { ref, reactive, computed } from 'vue'
	import rest from '@/stores/rest'
	import dlg from '@/lib/dlg'
	import * as link from '@/lib/link'
	import { onLoad, onShow } from "@dcloudio/uni-app";
	import PickerType from './PickertType.vue'
	import { feedbackVO } from '../../lib/type';
	import { formatDate } from '@/lib/util'

	import { useUserStore } from '@/lib/store';
	const store = useUserStore();
	const globalParameter = computed(() => store.getGlobalParameter);

	const formRules = reactive({
		djr: {
			rules: [{
				required: true,
				errorMessage: '姓名不能为空'
			}]
		},
		fklx: {
			rules: [{
				required: true,
				errorMessage: '反馈类型不能为空'
			}]
		},
		fkxq: {
			rules: [{
				required: true,
				errorMessage: '反馈详情不能为空'
			}]
		},
	})

	const feedbackArray = ref([
		{
			name: '缺药补药',
			value: 1,
		},
		{
			name: '审方标准建议',
			value: 2,
		},
		{
			name: '其他建议',
			value: 3,
		},

	])
	const itemId = ref()
	const disabledRef = ref(false)
	const showSubmitButton = ref(false)
	const pickerDeptRef = ref()
	const popupDeptText = ref()
	const yljgList = ref() // 医疗机构列表
	const pickerTypeRef = ref()
	const uniType = ref('add')
	const formRef = ref()
	const popupTypeText = ref()
	const loaded = ref(false)
	const formData = ref({
		djr: '',
		lxdh: '',
		yljgmc: '',
		yljgdm: '',
		fklx: '',
		fkxq: '',
		zjhm: '',
	})
	const timeLine = ref([])

	const openPickerDept = () => {
		if (!disabledRef.value) {
			pickerDeptRef.value?.openPop()
		}
	}
	const openPickerType = () => {
		if (!disabledRef.value) {
			pickerTypeRef.value?.openPop()
		}
	}

	const onChangeYljg = (e) => {
		formData.value.yljgmc = e.name
		formData.value.yljgdm = e.value
		popupDeptText.value = e.name
	}
	const onChangeType = (e) => {
		formData.value.fklx = e.value
		popupTypeText.value = e.name
	}


	const onConfirm = async () => {
		// 校验表单
		formRef.value.validate().then(async res => {
			// 提交请求
			try {
				if (uniType.value == 'add') {
					await rest.post('/zyyp/feedback/create', formData.value, globalParameter.value.authCode)
					dlg.success('已新增反馈登记！')
				}
				link.goBJList(true)
			} catch (e) {
				dlg.error(e)
			}
		}).catch(err => {
			console.log('表单错误信息：', err);
		})
	}

	//  初始化数据
	const getInfo = async () => {
		try {
			formData.value.djr = globalParameter.value.userName
			formData.value.zjhm = globalParameter.value.zjhm
			// 医疗机构列表
			let res = await rest.get('/system/dept/list-all-simple2', { orgType: 1 }, globalParameter.value.authCode)
			if (!res) return
			// 转换数据 
			yljgList.value = (res as any[]).map(item => ({
				name: item.orgName,
				value: item.orgCode,
			}));
			// 
			if (itemId.value) {
				let itemRes = await rest.get('/zyyp/feedback/get', { id: itemId.value }, globalParameter.value.authCode) as feedbackVO
				formData.value = itemRes
				popupDeptText.value = itemRes.yljgmc
				const matchedItem = feedbackArray.value.find(item => item.value === Number(itemRes.fklx));
				popupTypeText.value = matchedItem ? matchedItem.name : '未找到匹配项';
				timeLine.value = itemRes.jd
				if (itemRes.fkzt == '1') {
					timeLine.value.push({ desc: '等待受理', time: null })
				}
				disabledRef.value = true
				showSubmitButton.value = false;
			}else {
				showSubmitButton.value = true;
			}
		} catch (e) {
			dlg.error(e)
		}
	}


	onLoad((data) => {
		itemId.value = null
		if (data.id) {
			itemId.value = data.id
		}
	})

	onShow(() => {
		getInfo()
	})
</script>

<style lang="scss" scoped>
	.feedback-list-view {
		padding: $uni-spacing-col-s3 0 0;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		height: 100%;

		// position: relative;
		:deep(.pub-loading) {
			flex: 1;
		}

		.feedback-info {
			background: #fff;
			padding: $uni-spacing-col-s4 $page-row-spacing $uni-spacing-col-s3;

			.feedback-info-title {
				font-size: $uni-font-size-lg;
				line-height: $uni-line-height-lg;
				font-weight: 800;
				margin-bottom: 24rpx;
			}

			.form-feedback {
				@include flex-between;
				border-bottom: 1px solid $uni-border-color;
				// height: 70rpx;
				padding: 8rpx 0 24rpx;
				// todo 模拟校验出错
				font-size: $uni-font-size-lg;
				line-height: $uni-line-height-lg;
				color: $uni-text-color-light;

				.form-feedback-input.checked {
					color: $uni-text-color;
				}
			}

			:deep(.is-disabled) {
				background-color: #ffffff !important;
				color: #363A44 !important;
			}

			:deep(.uni-forms-item__label) {
				color: $uni-text-color-grey;
				padding: 0rpx 0 0rpx 0; //12,4
				font-size: $uni-font-size-base;
				line-height: $uni-line-height-base;
				height: auto;
			}

			:deep(.uni-easyinput__content) {
				border-bottom: 1px solid $uni-border-color;

				.uni-easyinput__content-input {
					padding-left: 0 !important;
					height: 70rpx;

					.uni-input-wrapper {
						.uni-input-placeholder {
							font-size: $uni-font-size-lg;
							line-height: $uni-line-height-lg;
							color: $uni-text-color-light;
						}

						.uni-input-input {
							font-size: $uni-font-size-lg;
							line-height: $uni-line-height-lg;
							color: $uni-text-color;
						}
					}
				}
			}

			:deep(.uni-easyinput__content-textarea) {
				margin: 8rpx 0 4rpx;
				height: 220rpx;
				min-height: 220rpx;
				// overflow-y: auto !important;

				.uni-easyinput__placeholder-class {
					font-size: $uni-font-size-lg;
					line-height: $uni-line-height-lg;
					color: $uni-text-color-light;
				}

				.uni-textarea-textarea {
					font-size: $uni-font-size-lg;
					line-height: $uni-line-height-lg;
					color: $uni-text-color;
				}
			}
		}

		.feedback-formdate {
			margin-top: 20rpx;

			:deep(.uni-forms-item:last-of-type .uni-easyinput__content) {
				border-bottom: none;
			}
		}

		.other-text {
			margin-top: 10rpx;
			font-size: $uni-font-size-lg;
			line-height: $uni-line-height-lg;
			color: $uni-text-color;
		}

		.feedback-schedule {
			margin-top: 10rpx;
			background-color: #fff;
			padding: $uni-spacing-col-s4 $page-row-spacing $uni-spacing-col-s3;

			.schedule-title {
				font-size: 28rpx;
				font-weight: 600;
			}

			.schedule-timeline {
				padding: 20px 10px 0;
				overflow: auto;

				.step-item {
					color: $uni-text-color-grey;
					display: flex;
					min-height: 140rpx;

					.step_circle_item {
						padding-top: 4rpx;
						@include flex;
						flex-direction: column;
						margin-right: 24rpx;

						.dot {
							width: 24rpx;
							height: 24rpx;
							background: $uni-border-color;
							border-radius: 50%;
						}

						.line {
							flex: 1;
							border-left: 1px solid $uni-border-color;
							margin: 12rpx 0;
						}
					}

					.step_content_item {
						width: 100%;
						margin-bottom: 32rpx;
						font-size: 24rpx;

						.step_content {
							font-size: 28rpx;
							line-height: $uni-line-height-base;
							margin-bottom: 16rpx;
						}

						.step_date {
							margin-bottom: 8rpx;
						}
					}

					&:last-child {
						.step_circle_item {
							.line {
								display: none;
							}
						}
					}
				}
			}

			.submit {
				margin: 0 32rpx 16rpx;
			}
		}
	}
</style>