tcm-cloud-uin-app/pages/ypczk/djfk/uploadZg/zgMeasureList.vue

<template>
	<view>
		<view class="list_content">
			<view class="list_item">整改项</view>
			<view class="list_item_text">{{props.zgData.rectificationItems}}</view>
		</view>
		<view class="list_content">
			<view class="list_item">说明</view>
			<view class="list_item_text">{{props.zgData.explains}}</view>
		</view>
		<view class="list_content" v-if="props.zgData.rectificationUrls!=null && props.zgData.rectificationUrls!=''">
			<view class="list_item">附件</view>
		</view>
		<view v-if="props.zgData.rectificationUrls!=null && props.zgData.rectificationUrls!=''">
			<uni-file-picker :modelValue="showImageStr(props.zgData.rectificationUrls)" :readonly="false"></uni-file-picker>
		</view>
		<view class="list_content">
			<view class="list_item">整改措施</view>
		</view>
		<view class="measure_text">
			<textarea placeholder="请输入整改措施内容（可填写500字）" v-model="props.zgData.rectificationMeasure" :disabled="props.disabled" maxlength="500" class="measure_text_input"></textarea>
		</view>
		<view class="list_content">
			<view class="list_item">图片</view>
		</view>
		<view>
			<uni-file-picker :modelValue="showImage(props.zgData.measureUrls)" limit="4" @select="selectImg" @delete="deleteImg" :readonly="props.disabled"></uni-file-picker>
		</view>
	</view>
</template>

<script setup>
import { reactive,watch } from "vue";
import {uploadImageModelValue} from '@/pages/controls/image/OssService';
import {onLoad,onShow,onUnload,onPullDownRefresh} from "@dcloudio/uni-app";
import http from '@/utils/request';
import { UrlPath } from "@/utils/commonuni"

const props=defineProps({
	zgData:Object,
	disabled:Boolean
})

// 选中图片，将选中的图片添加列表
const selectImg=(e)=>{
	if (props.zgData.measureUrls == null || props.zgData.measureUrls == undefined){
		props.zgData.measureUrls = []
	}
	e.tempFiles.forEach(file=>{
		uni.showLoading({
			title: '图片上传....',
			mask: true
		});
		http.upload("admin-api/infra/file/upload",{file:file.file}).then(e => {
			uni.hideLoading()
			props.zgData.measureUrls.push(e)
		})
	})
}

// 删除图片，并将其从列表中删除
const deleteImg=(val)=>{
	if (val.index != -1) {
		props.zgData.measureUrls.splice(val.index,1)
	}
}
const showImageStr = (urlStr) => {
	const rawPrefix = UrlPath.getBaseUrl()
	const prefix = rawPrefix.replace(/\/+$/, '');
	const urlArray = urlStr.split(",").map(url => prefix + url);
	return urlArray
}
// 显示图片
const showImage=(urlStr)=>{
	if (!urlStr)return
	const rawPrefix = UrlPath.getBaseUrl()
	const prefix = rawPrefix.replace(/\/+$/, '');
	const result = urlStr.map(url => {
		return prefix + url;
	});
	return result;
}

</script>

<style lang="scss" scoped>
.list_content{
	display: flex;
	padding: 10rpx 20rpx;
	.list_item{
		font-size: 15px;
		font-weight: 400;
		letter-spacing: 0px;
		line-height: 21.72px;
		color: rgba(102, 102, 102, 1);
		vertical-align: top;
	}
	.list_item_text{
		padding-right: 20rpx;
		padding-left: 30rpx;
		flex: 1;
		text-align: right;
		font-size: 15px;
		font-weight: 400;
		letter-spacing: 0.5px;
		line-height: 22px;
		color: rgba(51, 51, 51, 1);
	}
}
.measure_text{
	border:1px solid rgba(235, 237, 240, 1);
	::v-deep .uni-textarea-placeholder{
		font-size: 14px;
		color: rgba(153, 153, 153, 1);
	}
	.measure_text_input{
		padding: 20rpx;
	}
}
</style>