yd_qycpfb/jp-mobile/pages/dzf/components/problemAppealItem.vue

<template>
	<view class="problemHandleItem">
		<view class="text-black font-weight-bold font-md">
			问题{{indexNo}}
		</view>
		<u--form labelPosition="left" :model="model" labelWidth="80">
			<u-form-item label="问题名称：" :required="!onlyFlag" prop="questionName">
				<u--input v-model="model.questionName" :readonly="onlyFlag" :border="onlyFlag ? 'none' : 'surround'"
					:placeholder="!onlyFlag ? '请填写问题名称' : ''">
				</u--input>
			</u-form-item>
			<view class="error-tip" v-if="!model.questionName && errorTip">
				请填写问题名称
			</view>
			<u-form-item label="问题类型：" :required="!onlyFlag" prop="questionTypeName">
				<song-data-picker style="width: 100%;" @click.native="songClick" :readonly="onlyFlag" :clearIcon="false"
					:localdata="questionTypeColumn" :placeholder="!onlyFlag ? '请选择问题类型' : ''" popup-title="请选择问题类型"
					@nodeclick="onnodeclick">
					<slot name="data">
						<view class="d-flex j-sb a-center border p-1 rounded8" style="border-color: rgb(218, 219, 222, 0.5);">
							<view class="text-secondary">
								<text v-show="model.questionTypeName">{{model.questionTypeName}}</text>
								<text v-show="!model.questionTypeName" style="color: rgb(192, 196, 204);" class="font-md">请选择问题类型</text>
							</view>
							<u-icon v-if="!onlyFlag" name="arrow-down" color="#303133" size="15">
							</u-icon>
						</view>
					</slot>
				</song-data-picker>
			</u-form-item>
			<view class="error-tip" v-if="!model.questionTypeName && errorTip">
				请选择问题类型
			</view>
			<block
				v-if="model.questionType == 'YG' || model.questionType == 'ZJ' || model.questionType == 'YDI' || model.questionType == 'CF'">
				<u-form-item label="缺口数：" :required="!onlyFlag" prop="gaps">
					<view class="d-flex a-center" v-if="model.questionType == 'YG'">
						<u--input v-model="model.gaps" v-if="!onlyFlag" type="number" :readonly="onlyFlag"
							:border="onlyFlag ? 'none' : 'surround'" :placeholder="!onlyFlag ? '请输入缺口数' : ''">
						</u--input>
						<text class="ml-1"><text v-if="onlyFlag" class="pr">{{model.gaps}}</text>人</text>
					</view>
					<view class="d-flex a-center" v-if="model.questionType == 'ZJ'">
						<u--input v-model="model.gaps" v-if="!onlyFlag" type="number" :readonly="onlyFlag"
							:border="onlyFlag ? 'none' : 'surround'" :placeholder="!onlyFlag ? '请输入缺口数' : ''">
						</u--input>
						<text class="ml-1"><text v-if="onlyFlag" class="pr">{{model.gaps}}</text>万元</text>
					</view>
					<view class="d-flex a-center" v-if="model.questionType == 'YDI'">
						<u--input v-model="model.gaps" v-if="!onlyFlag" type="number" :readonly="onlyFlag"
							:border="onlyFlag ? 'none' : 'surround'" :placeholder="!onlyFlag ? '请输入缺口数' : ''">
						</u--input>
						<text class="ml-1"><text class="pr" v-if="onlyFlag">{{model.gaps}}</text>亩</text>
					</view>
					<view class="d-flex a-center" v-if="model.questionType == 'CF'">
						<u--input v-model="model.gaps" v-if="!onlyFlag" type="number" :readonly="onlyFlag"
							:border="onlyFlag ? 'none' : 'surround'" :placeholder="!onlyFlag ? '请输入缺口数' : ''">
						</u--input>
						<text class="ml-1"><text class="pr" v-if="onlyFlag">{{model.gaps}}</text></text>
					</view>
				</u-form-item>
				<view class="error-tip" v-if="!model.gaps && errorTip">
					请输入缺口数
				</view>
			</block>
			<u-form-item label="问题描述：" :required="!onlyFlag" prop="questionDescription" class="questionDesc">
				<u--textarea v-model="model.questionDescription" :disabled="onlyFlag" maxlength='-1'
					:border="onlyFlag ? 'none' : 'surround'" :placeholder="!onlyFlag ? '请填写问题描述' : ''">
				</u--textarea>
			</u-form-item>
			<view class="error-tip" v-if="!model.questionDescription && errorTip">
				请填写问题描述
			</view>
			<u-form-item label="附件：" prop="files" v-if="model.fileList&&model.fileList.length">
				<view class="d-flex flex-wrap">
					<view class="w-100 d-flex" v-for="(item,index) in model.fileList" :key="index">
						<u--text type="primary" :text="item.name" @tap="downloadFile(index)"></u--text>
					</view>
				</view>
			</u-form-item>

		</u--form>

		<slot></slot>
	</view>
</template>

<script>
	import {Global} from "@/common/Global.js";
	import {enterpriseVisit} from "@/api/dzf/enterpriseVisit.js";
	import {Store} from "@/common/store.js";
	import {formatDate} from "@/common/util2.js"
	export default {
		props: {
			model: {
				type: Object,
				default: () => {}
			},
			readOnlyFlag: {
				type: Boolean,
				default: false
			},
			showErrorTip: {
				type: Boolean,
				default: false
			},
			column: {
				type: Array,
				default: () => []
			},
			dealProgressDict: {
				type: Array,
				default: () => []
			},
			modelIndex: {
				type: Number,
				default: 0
			},
		},
		data() {
			return {
				preTimeShow: false,
				outCharge: false
			}
		},
		computed: {
			onlyFlag() {
				return Boolean(this.readOnlyFlag)
			},
			errorTip() {
				return this.showErrorTip
			},
			questionTypeColumn() {
				const column = (this.column || []).map(ele => {
					const obj = {}
					obj.text = ele.fullName
					obj.value = ele.enCode
					return obj
				})
				return column
			},
			dealProgressColumn() {
				const column = (this.dealProgressDict || []).map(ele => {
					const obj = {}
					obj.text = ele.fullName
					obj.value = ele.enCode
					return obj
				})
				return column
			},
			indexNo() {
				return this.modelIndex + 1
			}
		},
		mounted() {
			const userInfo = Store.getUser() ? JSON.parse(Store.getUser()) : {}
			this.outCharge = userInfo?.roleLevel === '5'

			console.log("this.outCharge:", this.outCharge)
			console.log("this.readOnlyFlag:", this.readOnlyFlag)
			console.log("this.(model.preTime:", this.model)

		},
		methods: {
			downloadFile(index) {
				const downloadLink = Global.baseUrl + this.model.fileList[index].url;
				window.open(downloadLink, '_blank'); //h5直接进行跳转页面打开就可以了
				uni.downloadFile({ //调用uni中的下载方法
					url: Global.baseUrl + this.model.fileList[index].url, //后端返回的完整路径
					success: (res) => {
						console.log(res.tempFilePath, "下载");
						if (res.statusCode === 200) {
							const tempFilePath = res.tempFilePath;
							// 显示文件
							uni.openDocument({
								filePath: tempFilePath,
								success: (res) => {
									console.log(res, '打开文件成功');
								},
							});
						}
					},
					fail: (err) => {
						console.log('下载文件失败', err);
					}
				});
			},
			clearIcon(e) {
				this.$set(this.model, 'preTime', null)
			},
			// 问题类型选择变化操作
			onnodeclick(ele) {
				this.$set(this.model, 'questionTypeName', ele.text)
				this.$set(this.model, 'questionType', ele.value)
				this.model.gaps = ''
			},
			// 问题类型选择变化操作
			ondealprogressclick(ele) {
				this.$set(this.model, 'dealProgressName', ele.text)
				this.$set(this.model, 'dealProgress', ele.value)
			},
			choosePreTime() {
				if (!(this.model.status == '4' && this.outCharge)) return
				this.preTimeShow = true;
				uni.hideKeyboard()
			},
			preTimeConfirm(e) {
				this.preTimeShow = false
				console.log("preTime:", e.value)
				this.$set(this.model, 'preTime', formatDate(e.value, 'yyyy-MM-dd'))
			},
			// 问题类型--->点击
			songClick() {
				uni.hideKeyboard()
			},
			// 问题类型--->点击
			dealProgressClick() {
				uni.hideKeyboard()
			},
			// 判断是否有必填项为填写
			isRequired() {
				const query = uni.createSelectorQuery().in(this);
				let dataLength = 0
				query.selectAll('.error-tip').boundingClientRect(data => {
					dataLength = data.length
					if (dataLength) {
						uni.$u.toast('请填写完整问题诉求')
					}
				}).exec();
				return dataLength
			}
		}
	}
</script>

<style lang="scss" scoped>
	.error-tip {
		font-size: 12px;
		color: #f56c6c;
		margin-left: 160rpx;
	}
</style>