subject_gxj/xj_project_app/pages/questionInput/input/index.vue

<template>
	<view class="container">
		<page-title>问题录入</page-title>

		<view class="cards-list">
			<view class="card only-card">
				<!-- 项目名称 -->
				<view class="card-item first-card-item">
					<view class="card-item-name">项目名称</view>
					<view class="card-item-description">{{pageForm.subName || "--"}}</view>
				</view>

				<!-- 监管单位 -->
				<view class="card-item">
					<view class="card-item-name">监管单位</view>
					<view class="card-item-description">{{pageForm.manage || "--"}}</view>
				</view>

				<!-- 项目内容 -->
				<view class="card-item">
					<view class="card-item-name">项目内容</view>
				</view>
				<view class="card-item">
					<u--textarea v-model="pageForm.subContent" disabled class="card-item-textarea"></u--textarea>
				</view>

				<!-- 问题类型 -->
				<view class="card-item">
					<view class="card-item-name">问题类型</view>
					<view class="card-item-description" @click="kindChooseOpen()">
						<view v-if="pageForm.kind">{{pageForm.kind}}</view>
						<view v-else class="remind-text">请选择类型</view>
						<u-icon name="arrow-right" color="#343437" size="16" customStyle="margin:auto 0 auto 10rpx"></u-icon>
					</view>
				</view>

				<!-- 问题来源 -->
				<view class="card-item">
					<view class="card-item-name">问题来源</view>
					<view class="card-item-description" @click="sourceChooseOpen()">
						<view v-if="pageForm.source">{{pageForm.source}}</view>
						<view v-else class="remind-text">请选择来源</view>
						<u-icon name="arrow-right" color="#343437" size="16" customStyle="margin:auto 0 auto 10rpx"></u-icon>
					</view>
				</view>

				<!-- 当前问题描述 -->
				<view class="card-item">
					<view class="card-item-name">当前问题描述</view>
				</view>
				<view class="card-item">
					<u--textarea v-model="pageForm.title" class="card-item-textarea"></u--textarea>
				</view>

				<!-- 要求完成日期 -->
				<view class="card-item">
					<view class="card-item-name">要求完成日期</view>
					<view class="card-item-description" @click="timeChooseOpen()">
						<view v-if="pageForm.date_conf">{{pageForm.date_conf}}</view>
						<view v-else class="remind-text">请选择日期</view>
						<u-icon name="arrow-right" color="#343437" size="16" customStyle="margin:auto 0 auto 10rpx"></u-icon>
					</view>
				</view>

				<!-- 附件 -->
				<view class="card-item flex-align-start">
					<view class="card-item-name">附件</view>
					<u-upload :fileList="uploadList" :maxCount="1" @afterRead="afterRead" @delete="delFile" name="file"
						uploadIcon="plus"></u-upload>
				</view>
			</view>

			<view class="confirm-btn" @click="confirmParams()">保存</view>

			<!-- 问题类型选择 -->
			<u-picker :show="kindShow" :columns="kindList" @confirm="kindChooseClose" @cancel="kindChooseClose"
				@close="kindChooseClose" closeOnClickOverlay></u-picker>

			<!-- 问题来源选择 -->
			<u-picker :show="sourceShow" :columns="sourceList" @confirm="sourceChooseClose" @cancel="sourceChooseClose"
				@close="sourceChooseClose" closeOnClickOverlay></u-picker>

			<!-- 要求完成日期选择 -->
			<u-datetime-picker :show="timeShow" @confirm="timeChooseClose" @cancel="timeChooseClose" @close="timeChooseClose"
				v-model="date_conf" mode="date" closeOnClickOverlay></u-datetime-picker>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from "vue"

	import {
		onLoad,
	} from "@dcloudio/uni-app"

	import config from '@/config.js'

	import {
		timeFormat
	} from "@/utils/timeFormatter.js"

	import {
		uploadFilePromise
	} from "@/utils/request_new.js"

	import {
		getQuestionInputById,
		saveQuestionInputById
	} from "@/api/work/questionInputAndTrace.js"

	// 获取问题详情
	function getQuestionDetail(paramData) {
		getQuestionInputById(paramData).then(res => {
			pageForm.value.id = res.data.subId;
			pageForm.value.subName = res.data.subName;
			pageForm.value.manage = res.data.manage;
			pageForm.value.subContent = res.data.subContent;
			kindList.value.push(res.data.wtlx.map(item => item.title));
			kindChooseList.value = res.data.wtlx;
			sourceList.value.push(res.data.wtly.map(item => item.title));
			sourceChooseList.value = res.data.wtly;
		})
	}

	// 主要数据
	let pageForm = ref({
		id: null,
		subName: null,
		manage: null,
		subContent: null,
		kind: null,
		source: null,
		title: null,
		date_conf: null,
		file_name: null,
		file_addre: null,
		file_type: null,
	})

	// ====================类型列表
	let kindList = ref([]);
	let kindChooseList = ref([]);
	let kindShow = ref(false);

	function kindChooseOpen() {
		kindShow.value = true
	}

	function kindChooseClose(e) {
		if (e) pageForm.value.kind = e.value[0]
		kindShow.value = false
	}

	// ====================来源列表
	let sourceList = ref([]);
	let sourceChooseList = ref([]);
	let sourceShow = ref(false);

	function sourceChooseOpen() {
		sourceShow.value = true
	}

	function sourceChooseClose(e) {
		if (e) pageForm.value.source = e.value[0]
		sourceShow.value = false
	}

	// ====================要求完成日期
	let date_conf = ref(null);
	let timeShow = ref(false);

	function timeChooseOpen() {
		timeShow.value = true;
	}

	function timeChooseClose(e) {
		if (e) {
			let time = timeFormat(e.value);
			pageForm.value.date_conf = time;
		}

		timeShow.value = false;
	}

	// ====================附件上传
	let uploadList = ref([])

	// 上传文件操作
	async function afterRead(event) {
		let lists = [].concat(event.file);
		let fileListLen = uploadList.value.length;
		lists.map((item) => {
			uploadList.value.push({
				...item,
				status: 'uploading',
				message: '上传中'
			})
		})

		for (let i = 0; i < lists.length; i++) {
			const resultObj = await uploadFilePromise(lists[i].url);
			// let resultObj = JSON.parse(result);
			// 给表单赋值
			pageForm.value.file_name = resultObj.data.resultList[0].name;
			pageForm.value.file_addre = resultObj.data.resultList[0].id;
			pageForm.value.file_type = resultObj.data.resultList[0].ftype

			// 取消上传中状态
			let item = uploadList.value[fileListLen]
			uploadList.value.splice(fileListLen, 1, Object.assign(item, {
				status: 'success',
				message: '',
				url: resultObj.data.resultList[0].pathName
			}))
			fileListLen++
		}
	}

	// 删除文件
	function delFile(event) {
		uploadList.value.splice(event.index, 1);
		pageForm.value.file_name = null;
		pageForm.value.file_addre = null;
		pageForm.value.file_type = null;
	}

	// ====================提交数据
	function confirmParams() {
		let kind_sourceid = sourceChooseList.value.find(item => item.title === pageForm.value.source)?.id;
		let kind_typeid = kindChooseList.value.find(item => item.title === pageForm.value.kind)?.id;
		let date_conf = pageForm.value.date_conf ? pageForm.value.date_conf.replaceAll("/", "-") : null

		let params = {
			kind_sourceid,
			kind_typeid,
			date_conf,
			sub_id: pageForm.value.id,
			title: pageForm.value.title,
			file_name: pageForm.value.file_name,
			file_addre: pageForm.value.file_addre,
			file_type: pageForm.value.file_type,
		}
		saveQuestionInputById(params).then(res => {
			if (res.success) {
				uni.showToast({
					title: "提交成功。",
					icon: "success",
					duration: 2000
				})
			}
		})
	}

	onLoad(options => {
		let now = new Date()
		date_conf.value = timeFormat(now)

		getQuestionDetail(options)
	})
</script>

<style lang="scss">
	::v-deep .u-upload__button {
		margin-left: 30rpx;
		background-color: #EAF0FA;
		border-radius: 20rpx;
	}
</style>