luoshan_web/pages/throughTrain/throughTrainDetails.vue

<template>
	<view class="container">
		<view class="mim-view mim-flex-vertical">
			<view v-if="detail.content" class="mim-font-16 content">
				{{detail.content || '--'}}
			</view>
			<view class="pre-box">
				<view class="pre-item" v-for="(item,index) in detail.relevant_document_urls" :key="index">
					<u-image v-if="item.type==1" :src="item.url" mode="aspectFit" @click="previewImage(index)"
						class="pre-item-image" height="160"></u-image>
					<video v-if="item.type==2" :src="item.url" class="pre-item-image" :show-fullscreen-btn="true"
						style="width: 100%; height: 100%; object-fit: cover;"></video>
				</view>
			</view>
			<u-divider border-color='#f2f2f2' bg-color='#f2f2f2' margin-top='24' margin-bottom='24' use-slot>
			</u-divider>
			<view class="mim-flex-wrap-space-between">
				<text class="mim-font-14">投诉人</text>
				<text class="mim-font-14">{{detail.complaint_name}}</text>
			</view>
			<view class="mim-flex-wrap-space-between storm">
				<text class="mim-font-14">投诉人手机号</text>
				<text class="mim-font-14">{{detail.complaint_phone}}</text>
			</view>
			<view class="mim-flex-wrap-space-between storm">
				<text class="mim-font-14">投诉时间</text>
				<text class="mim-font-14">{{detail.created_at}}</text>
			</view>
		</view>
		<view v-if="type == '1'">
			<view class="mim-view" style="margin-bottom: -48rpx;border-radius: 8rpx 8rpx 0 0;">
				<view>
					<view class="mim-font-16 bold mim-flex-wrap-left">
						<text class="mim-font-16 bold">事项分类</text>
						<text class="mim-font-16 bold mimRed">*</text>
					</view>
					<view class="select">
						<u-input type="select" v-model="category_name" placeholder='请选择事项分类'
							placeholder-style="color: #BDBDBD;" height="96" cursor-spacing="12" :clearable='false'
							disabled :custom-style="customStyle" @click="selectFenlei" />
						<u-image src='@/static/icon/jt.png' class="select_img" width="64rpx" height="64rpx"></u-image>
					</view>
					<selectLei ref="lei" @fetch-data="fetchData" />
				</view>
			</view>

			<view class="mim-view" v-for="(_, index) in list" :key="index" :class="{margin24 : index > 0 }">
				<view class="mim-font-16 bold mim-flex-wrap-space-between">
					<view class="mim-font-16 bold mim-flex-wrap-left">
						<text class="mim-font-16 bold">处理部门</text>
						<text class="mim-font-16 bold mimRed">*</text>
					</view>
					<view class="mim-flex-wrap-right">
						<text class="mim-button mim-font-14" @click="addDepartment">添加</text>
						<text v-if="index > 0" class="mim-button mim-button-del mim-font-14" style="margin-left: 24rpx;"
							@click="deleteDepartment(index)">删除</text>
					</view>
				</view>
				<view v-if="index == 0" class="mim-font-14 mimRed marginTop">*默认第一个部门为主负责部门</view>
				<view class="select">
					<u-input type="select" v-model="list[index].deal_department_name" placeholder='请选择处理部门'
						placeholder-style="color: #BDBDBD;" height="96" cursor-spacing="12" :clearable='false'
						:custom-style="customStyle" @click="selectDepartment(index)" />
					<u-image src='@/static/icon/jt.png' class="select_img" width="64rpx" height="64rpx"></u-image>
					<u-select v-if="selectVisible[index]" v-model="show" :list="select_list" @confirm="confirmSelect"
						:default-value='defaultValue[index]'></u-select>
				</view>
				<view class="marginTop">
					<view class="mim-font-16 bold mim-flex-wrap-left">
						<text class="mim-font-16 bold">处理期限（天）</text>
						<text class="mim-font-16 bold mimRed">*</text>
					</view>
					<u-input type="number" v-model="list[index].limit_day" placeholder='请填写处理期限'
						placeholder-style="color: #BDBDBD;" height="96" cursor-spacing="12" :clearable='false'
						:custom-style="customStyle" @input="validateInput(index)" />
				</view>
				<view class="marginTop">
					<view class="mim-font-16 bold mim-flex-wrap-left">
						<text class="mim-font-16 bold">处理意见</text>
						<text class="mim-font-16 bold mimRed">*</text>
					</view>
					<u-input type="textarea" v-model="list[index].body" placeholder='请填写处理意见'
						placeholder-style="color: #BDBDBD;" height="160" :auto-height='true' :clearable='false'
						:custom-style="customTestStyle" maxlength="-1" cursor-spacing="12" />
				</view>
			</view>
		</view>
		<view v-if="type != '1'" class="mim-view mim-flex-vertical">
			<view class="mim-font-16 bold">指派信息</view>
			<view class="xiezhu-item-div" v-if="detail.extra">
				<view class="xiezhu-item" v-for="(item,index) in detail.extra" :key="index">
					<view class="mim-flex-wrap-space-between storm">
						<text class="mim-font-14">指派时间</text>
						<text class="mim-font-14">{{detail.manage_messages.created_at || '--'}}</text>
					</view>
					<view class="mim-flex-wrap-space-between storm">
						<text class="mim-font-14">指派部门</text>
						<text class="mim-font-14">{{item.deal_department_name || '--'}}</text>
					</view>
					<view class="mim-flex-wrap-space-between storm">
						<text class="mim-font-14">指派人员</text>
						<text class="mim-font-14">{{detail.manage_messages.assign_admin.name || '--'}}</text>
					</view>
					<view class="mim-flex-vertical storm">
						<text class="mim-font-14">处理意见</text>
						<text class="mim-font-14 xiezhu-content">{{item.body || '--'}}</text>
					</view>
					<view class="mim-flex-wrap-space-between storm">
						<text class="mim-font-14">处理期限</text>
						<text class="mim-font-14">{{item.limit_day || '--'}}天</text>
					</view>
					<view class="mim-flex-vertical storm" v-if="type == 3 || type == 4 ">
						<text class="mim-font-14">处理结果</text>
						<text class="mim-font-14 xiezhu-content">{{item.deal_idea || '--'}}</text>
					</view>
				</view>
			</view>
		</view>

		<view class="mim-view mim-flex-vertical" v-if="type != '1'">
			<view class="mim-font-16 bold">处理信息</view>
			<view class="img_type">
				<u-image v-if="type == '2'" src="@/static/images/index/clz.png" width="240rpx" height="240rpx">
				</u-image>
				<u-image v-else-if="type =='3' || type =='4'" src="@/static/images/index/clwj.png" width="240rpx"
					height="240rpx"></u-image>
			</view>
			<view class="mim-flex-wrap-space-between storm">
				<text class="mim-font-14">处理状态</text>
				<text v-if="type == '1'" class="mim-font-14">待处理</text>
				<text v-if="type == '2'" class="mim-font-14">处理中</text>
				<text v-if="type == '3'" class="mim-font-14">处理完结</text>
				<text v-if="type == '4'" class="mim-font-14">处理完结</text>
			</view>
			<view v-if="type == '3'|| type == '4'">
				<view class="mim-flex-wrap-space-between storm">
					<text class="mim-font-14">处理时间</text>
					<text class="mim-font-14">{{detail.manage_messages.deal_time}}</text>
				</view>
				<!-- 		<view class="mim-flex-wrap-space-between storm">
					<text class="mim-font-14">处理期限</text>
					<text class="mim-font-14">{{detail.manage_messages.deal_limit_day}}天</text>
				</view>
				<view class="mim-flex-vertical storm">
					<text class="mim-font-14">处理意见</text>
					<text class="mim-font-14  xiezhu-content">{{detail.deal_idea}}</text>
				</view>
				<view class="mim-flex-vertical storm">
					<text class="mim-font-14">处理结果</text>
					<text class="mim-font-14  xiezhu-content">{{detail.deal_result || '--' }}</text>
				</view> -->
				<u-divider v-if="type == 4 " border-color='#f2f2f2' bg-color='#f2f2f2' margin-top='24'
					margin-bottom='24' use-slot></u-divider>
				<view class="mim-flex-wrap-space-between" v-if="type == 4 ">
					<text class="mim-font-14 bold">群众满意度</text>
					<text class="mim-font-14">{{detail.deal_evaluation}} 分</text>
				</view>
			</view>
		</view>

		<view class="mim-view-list"></view>
		<view class="mim-view-last" v-if="type == '1'"></view>
		<view class="mim-foot" v-if="type == '1'">
			<view class="mim-foot-button mim-flex-wrap" @click="confirm">
				确定
			</view>
		</view>
	</view>
</template>

<script>
	import selectLei from './components/selectLei.vue'
	export default {
		components: {
			selectLei
		},
		data() {
			return {
				form: {
					id: '',
					category_id: '',
					multiData: []
				},
				category_name: '',
				type: '', //1 待处理 2 处理中 3 待评价 4处理完结,
				customStyle: {
					marginTop: '24rpx',
					fontSize: '32rpx',
					paddingLeft: '24rpx',
					background: '#f7f7f7',
					borderRadius: '8rpx'
				},
				customTestStyle: {
					"box-sizing": 'border-box',
					marginTop: '24rpx',
					fontSize: '32rpx',
					padding: '32rpx 24rpx',
					background: '#f7f7f7',
					borderRadius: '8rpx',
				},
				list: [{
					deal_department_name: '', //部门名称
					department_id: '', //部门id
					limit_day: 1, //处理期限
					body: '' //处理意见
				}],
				detail: {},
				fenleiShow: false, //分类选择弹框
				show: false, //处理部门的弹框
				select_list: [], //处理部门的数组
				listFenlei: [], //分类数组
				selectVisible: [], // 存储每个 u-select 的显示状态
				defaultValue: [
					[0]
				],
				index: 0
			};
		},
		onLoad(e) {
			this.form.id = e.id
			this.getFneleiListFn()
			this.getdepartmentFn()
		},
		mounted() {
			this.throughTrainDetailsFn()
		},
		methods: {
			//获取分类选项列表
			async getFneleiListFn() {
				const res = await this.$u.api.getFneleiList({
					status: 1
				})
				if (res.status === "success") {
					this.listFenlei = res.data
				}
			},
			//回传的数据
			fetchData(data) {
				this.form.category_id = data.id
				this.category_name = data.name
			},
			//选择事项分类
			selectFenlei() {
				this.$refs['lei'].showEdit(this.listFenlei)
			},
			//显示图片
			previewImage(index) {
				const images = this.detail.relevant_document_urls
					.filter(item => item.type === 1); // 过滤出图片类型的数据
				const urls = images.map(item => item.url); // 获取图片地址数组
				const current = this.detail.relevant_document_urls[index].url; // 当前显示的图片地址
				uni.previewImage({
					current: current, // 当前显示的图片地址
					urls: urls, // 图片地址数组
				});
			},
			//添加部门
			addDepartment() {
				this.list.push({
					deal_department_name: '',
					department_id: '',
					limit_day: 1,
					body: ''
				})
				this.$u.toast('添加成功！')
			},
			//删除部门
			deleteDepartment(index) {
				this.list = this.list.filter((_, index1) => {
					return index1 !== index
				})
				this.$u.toast('删除成功！')
			},
			//确保用户输入非0正整数
			validateInput(index) {
				const value = this.list[index].limit_day;
				const regex = /^[1-9]\d*$/; // 非零正整数的正则表达式
				if (!regex.test(value)) {
					// 如果输入不符合要求，可以根据需要进行处理，比如清空输入或者修改输入值
					// this.list[index].limit_day = ''; // 清空输入
					// 或者将输入修改为符合要求的值
					this.list[index].limit_day = Number(Math.max(parseInt(value), 1));
				}
			},
			goPage(e) {
				switch (e) {
					case 'application': //申请协助页面
						this.$u.route('/pages/command/application', {
							id: this.form.id
						});
						break;
					case 'finish': //去完结页面
						this.$u.route('/pages/command/finish', {
							id: this.form.id
						});
						break;
					default:
						console.log('Unknown fruit');
						break;
				}
			},

			//页面渲染
			async throughTrainDetailsFn() {
				const res = await this.$u.api.throughTrainDetails(this.form)
				if (res.status === "success") {
					this.type = res.data.deal_status
					this.detail = res.data
				}
			},
			//确定选择的部门
			confirmSelect(e) {
				this.list[Number(this.index)].department_id = e[0].value
				this.list[Number(this.index)].deal_department_name = e[0].label
				this.show = false
			},
			//选择部门
			selectDepartment(index) {
				this.selectVisible = this.select_list.map((_, i) => i === index);
				this.show = true
				this.index = index
			},

			//获取部门列表
			async getdepartmentFn() {
				const res = await this.$u.api.getdepartment({
					status: 1,
				})
				const newArray = res.data.map(item => ({
					value: item.id,
					label: item.name
				}))
				this.select_list = newArray
			},

			//确定 
			confirm() {
				if (!this.form.category_id) {
					this.$u.toast('请选择事项分类！')
					return false
				}
				let arr = []
				arr = this.list.filter((item) => {
					return !item.department_id || !item.limit_day || !item.body
				})
				if (arr.length > 0) {
					this.$u.toast('请将处理信息填写完整！')
					return false
				}
				this.form.multiData = this.list
				console.log(this.form)
				this.confirmAssignFn()
			},
			//确定指派接口
			async confirmAssignFn() {
				const res = await this.$u.api.confirmAssign(this.form)
				if (res.status === "success") {
					this.$u.toast(res.message)
					setTimeout(() => {
						this.$u.route({
							type: 'navigateBack',
							url: '/pages/throughTrain/throughTrain'
						});
					}, 1500)
				}
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f7f7f7;

		.container {
			.mim-view {
				overflow: hidden;

				u-input {
					/deep/ .u-input__right-icon {
						display: none !important;
					}
				}

				.mim-button {
					background: rgba(20, 195, 195, 0.15);
					border: 2rpx solid #14C3C3;
					height: 56rpx;
					width: 120rpx;
					color: #14C3C3;
				}

				.mim-button-del {
					height: 56rpx;
					width: 120rpx;
					color: #DE2E27;
					background: rgba(222, 46, 39, 0.15);
					border: 2rpx solid #DE2E27;
				}

				.content {
					max-height: 550rpx;
					overflow-y: scroll;
					-webkit-overflow-scrolling: touch;
					scrollbar-width: none;
					/* Firefox */
					-ms-overflow-style: none;

					/* IE and Edge */
					&::-webkit-scrollbar {
						display: none;
					}
				}


				.xiezhu-item-div {
					.xiezhu-item {
						border-top: dashed 1px #dcdbde;
						margin-top: 30rpx;

						&:first-child {
							border-top: none !important;
							margin-top: 0rpx !important;
						}
					}
				}


				.xiezhu-content {
					padding: 20rpx;
					background-color: #f7f7f7;
					border-radius: 10rpx;
					margin-top: 10rpx;
				}

				.margin24 {
					margin-top: 24rpx;
				}

				.marginTop {
					margin-top: 24rpx;
				}

				.storm {
					margin-top: 24rpx;
				}

				.img_type {
					position: absolute;
					top: -70rpx;
					right: -50rpx;
					border-bottom: none;
				}

				.pre-box {
					margin-top: 24rpx;
					display: flex;
					align-items: center;
					// justify-content: space-between;
					flex-wrap: wrap;
				}

				.pre-item {
					width: 160rpx;
					height: 160rpx;
					overflow: hidden;
					position: relative;
					margin-left: 20rpx;
					margin-bottom: 20rpx;
				}

				.pre-item-image {
					width: 100%;
					height: 160rpx;
					object-fit: cover;
				}

				.select {
					position: relative;

					.select_img {
						position: absolute;
						right: 0;
						top: 38rpx;
					}
				}
			}

			.mim-view-last {
				padding: 56rpx;
				background: transparent;
			}

			.mim-foot {
				width: 100%;
				height: 136rpx;
				position: fixed;
				bottom: 0;
				left: 0;
				background-color: #ffffff;
				padding: 20rpx 24rpx;
				box-sizing: border-box;
				z-index: 9;

				&-button {
					width: 100%;
					border-radius: 48rpx;
					opacity: 1;
					background: #DE2E27;
					font-size: 32rpx;
					font-weight: normal;
					line-height: 32rpx;
					letter-spacing: 0px;
					color: #FFFFFF;
					height: 96rpx;
					cursor: pointer;

					&-first {
						width: 100%;
						border-radius: 48rpx;
						opacity: 1;
						background: rgba(222, 46, 39, 0.2);
						font-size: 32rpx;
						font-weight: normal;
						line-height: 32rpx;
						letter-spacing: 0px;
						color: #DE2E27;
						height: 96rpx;
						cursor: pointer;
						border: 2rpx solid #DE2E27;
						margin-right: 30rpx;
					}
				}

			}
		}

	}
</style>