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="联系电话" name="lxdh">
						<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="医疗机构" name="yljgdm">
						<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_great_circle"></view>
						<view class="step-content">
							<view class="step-title">{{ item.desc }}</view>
							<view class="step-desc">{{ formatDate(item.time,'{y}-{m}-{d} {h}:{i}:{s}')}}</view>
							 <div class="step-line" v-if="index + 1 == timeLine.length ? false : true" ></div>
						</view>
					</view>
				</view>
			</view>
		</pub-loading-view>
		<view v-if="!disabledRef" class="pub-button is-bg large" @click="onConfirm">确定</view>
	</view>
</template>
<script lang="ts" setup>
	import { ref, reactive } from 'vue'
	import rest from '@/stores/rest'
	import dlg from '@/lib/dlg.ts'
	import * as link from '@/lib/link'
	import { onLoad } from "@dcloudio/uni-app";
	import PickerType from './PickertType.vue'
	import { feedbackVO } from '../../lib/type';
	import { formatDate,userInfo } from '@/lib/util'

	const formRules = reactive({
		djr: {
			rules: [{
				required: true,
				errorMessage: '姓名不能为空'
			}]
		},
		lxdh: {
			rules: [{
				required: true,
				errorMessage: '请填写手机号码',
			}, {
				validateFunction: function (rule, value, data, callback) {
					let iphoneReg = (
						/^(13[0-9]|14[1579]|15[0-3,5-9]|16[6]|17[0123456789]|18[0-9]|19[0-9])\d{8}$/
					); //手机号码
					if (!iphoneReg.test(value)) {
						callback('手机号码格式不正确，请重新填写')
					}
				}
			}]
		},
		yljgdm: {
			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 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('/admin-api/zyyp/feedback/create', formData.value)
					dlg.success('已新增反馈登记！')
				}
				link.back()
			} catch (e) {
				dlg.error(e)
			}
		}).catch(err => {
			console.log('表单错误信息：', err);
		})
	}
	
	//  初始化数据
	const getInfo = async () => {
		try {
			formData.value.zjhm = userInfo.zjhm
			// 医疗机构列表
			let res = await rest.get('/admin-api/system/dept/list-all-simple', { orgType: 1 })
			if (!res) return
			// 转换数据 
			yljgList.value = (res as any[]).map(item => ({ 
				name: item.orgName, 
				value: item.orgCode ,
			}));
			// 
			if (itemId.value){
				let itemRes = await rest.get('/admin-api/zyyp/feedback/get', { id: itemId.value }) 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
			}
		} catch (e) {
			dlg.error(e)
		}
	}
	

	onLoad((data) => {
		if (data.id){
			itemId.value = data.id
		}
		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 {
			    margin: 20px 10px 0;
			    overflow: auto;
			    .step-item {
			      position: relative;
			      display: flex;
			      align-items: flex-start;
			      margin-bottom: 10rpx;
			      .step_great_circle {
			        width: 20rpx;
			        height: 20rpx;
			        border-radius: 50%;
			        background-color: #D8D8D8;
			        margin: 12rpx 20rpx 0 0;
			      }
			      .step-content {
			        width: 100%;
			        padding: 4rpx 10rpx 20rpx;
			        display: flex;
			        flex-direction: column;
			        color: #686B73;
			      }
			      .step-line {
			        position: absolute;
			        top: 38rpx;
			        left: 8rpx;
			        bottom: -15rpx;
			        width: 2rpx;
			        background-color: #EFEFEF;
			      }
			    }
			  }
		}
	}
</style>