JiangningUrbanManageApp/sub-interaction/publicity/form.vue

<template>
	<view class="content">
		<uni-forms :model="form" ref="uForm" :rules="rules" label-width="130">
			<uni-forms-item label="企业名称">
				<u-input v-model="form.name" placeholder="请输入企业名称" border />
			</uni-forms-item>
			<uni-forms-item label="标准名称">
				<u-input v-model="form.standard_name" placeholder="请输入标准名称" border />
			</uni-forms-item>
			<uni-forms-item label="标准编号">
				<u-input v-model="form.standard_code" placeholder="请输入标准编号" border />
			</uni-forms-item>
			<uni-forms-item label="公开时间">
				<uni-datetime-picker type="date" ref="pickerData" v-model="form.publicate_time" @change="changeData" />
			</uni-forms-item>
			<uni-forms-item label="附件信息">
				<u-upload :action="action+'/common/uploadMinioonfile'" :header="actionHeader" @on-success="fileSuccess"
					@on-remove="fileRemove" width="150rpx" height="150rpx" max-count="3"></u-upload>
			</uni-forms-item>
		</uni-forms>
		<fixedButton @click="submit" />
	</view>
</template>

<script>
	import {
		getToken
	} from '@/utils/auth'
	import {
		uploadFile
	} from "@/api/system/user.js";
	import {
		addList
	} from "@/api/shianliaoning/publicity.js";
	export default {
		data() {
			return {
				actionHeader: {
					'Authentication': getToken()
				},
				action: getApp().globalData.config.baseUrl,
				form: {
					name: "",
					standard_name: "",
					publicate_time: "",
					text: "",
					fileName: "",
					code: "",
				},
				show: false,
				rules: {},
				fileList: [],
				fileSize: 5,
			};
		},
		onLoad(option) {
			if (option.code) this.form.code = option.code;
		},
		methods: {
			getFilesSys: function() {
				// #ifdef H5
				this.$refs.files.choose();
				// #endif
			},
			// 选择完毕
			selectOut(e) {
				let size = e.tempFiles[0].size / 1024 / 1024 < this.fileSize;
				if (!size) {
					uni.showToast({
						title: `上传文件大小不能超过 ${this.fileSize} MB!`,
						icon: "none",
					});
					return;
				}
				let file = e.tempFiles[0].path;
				this.fileUpload(file);
			},
			// 删除
			closeFile(index) {
				this.fileList.splice(index, 1);
				uni.showToast({
					title: "删除成功",
				});
			},
			//上传
			fileUpload(e) {
				console.log(e);
				let data = {
					filePath: e,
				};
				uni.showLoading({
					title: "上传中",
				});
				uploadFile(data).then((res) => {
					uni.showToast({
						title: "上传成功",
					});
					this.fileList.push({
						name: res.originalFilename,
						url: this.deletelDNS(res.url),
					});
				});
			},
			//选中日期
			changeData(e) {
				this.form.publicate_time = e;
				console.log(e, "日期");
			},
			// 图片上传成功
			fileSuccess(data, index, lists, name) {
				this.fileList.push({
					name: data.originalFilename,
					url: this.deletelDNS(data.url)
				})
			},
			//删除图片
			fileRemove(index, lists, name) {
				this.fileList.splice(index, 1)
			},
			//提交
			submit() {
				if (this.form.name == '') {
					uni.showToast({
						title: '请填写企业名称',
						icon: 'none'
					})
					return
				}

				if (this.fileList.length > 0) {
					this.form.text = [];
					this.form.fileName = [];
					this.fileList.forEach((item) => {
						this.form.text.push(item.url);
						this.form.fileName.push(item.name);
					});
					this.form.fileName = this.form.fileName.toString();

					this.form.text = this.form.text.toString();
				}
				addList(this.form).then((res) => {
					uni.showToast({
						title: "提交成功",
						success: () => {
							setTimeout(function() {
								uni.navigateBack();
							}, 1000);
						},
					});
				});
			},
		},
	};
</script>

<style lang="scss" scoped>
	.content {
		padding: 40rpx;
		background-color: white;
	}

	::v-deep .button-conatiner {
		z-index: 10;
	}

	.file-upload {
		margin-top: 20rpx;
	}

	.file-item {
		margin-top: 20rpx;
		box-sizing: border-box;
		border: 1px solid #f7f7f7;
		padding: 20rpx 10rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-radius: 10rpx;

		.file-name {
			font-size: 28rpx;
			letter-spacing: 2rpx;
		}
	}
</style>