JiangningUrbanManageApp/sub-enterprise/modelRequest/modelRequest.vue

<template>
	<view class="content">
		<uni-forms :model="form" ref="uForm" :rules="rules" label-width="130">
			<uni-forms-item label="申请年份" name="year">
				<u-input v-model="form.year" placeholder="请输入年份" type="number" />
			</uni-forms-item>
			<uni-forms-item label="所在地区" name="city">
				<u-input v-model="form.city" type="select" @click="showCity=true" />
			</uni-forms-item>
			<uni-forms-item label="详细地址" name="address">
				<u-input v-model="form.address" />
			</uni-forms-item>
			<uni-forms-item label="企业类型" name="enterprise_type">
				<u-input v-model="form.enterprise_type" type="select" @click="show=true" />
			</uni-forms-item>
			<uni-forms-item label="申请等级" name="applicate_level">
				<u-input v-model="form.applicate_level" type="select" @click="look=true" />
			</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 title="提交" @click="toBack()"></fixedButton>
		<u-select v-model="show" mode="mutil-column-auto" :list="option" @confirm="getOp">
		</u-select>
		<u-select v-model="look" mode="mutil-column-auto" :list="list" @confirm="getList"></u-select>
		<u-select v-model="showCity" :list="cityList" label-name="dictLabel" value-name="dictLabel"
			@confirm="ckickConfirm"></u-select>
	</view>
</template>

<script>
	import {
		getToken
	} from '@/utils/auth'
	import {
		pickFile
	} from "@/utils/pickFile";
	import fixedButton from "@/components/fixedButton/fixedButton.vue";
	import {
		uploadFile
	} from '@/api/system/user.js'
	import {
		addEnterprise
	} from "@/api/shianliaoning/enterprise.js"
	export default {
		components: {
			fixedButton
		},
		data() {
			return {
				actionHeader: {
					'Authentication': getToken()
				},
				action: getApp().globalData.config.baseUrl,
				show: false,
				look: false,
				showCity: false,
				cityList: [],
				list: [{
						value: '0',
						label: '诚信店A级'
					},
					{
						value: '1',
						label: '诚信店B级'
					},
					{
						value: '2',
						label: '诚信店C级'
					},
					{
						value: '3',
						label: '争创诚信店'
					}
				],
				option: [{
						value: '0',
						label: '保健食品经营'
					},
					{
						value: '1',
						label: '婴配食品经营'
					},
					{
						value: '2',
						label: '特医食品经营'
					},
					{
						value: '3',
						label: '保健食品生产'
					},
					{
						value: '4',
						label: '婴配食品生产'
					}
				],
				form: {
					year: '',
					//企业名字
					enterpriseName: '',
					//信用代码
					code: '',
					city: '',
					address: '',
					enterprise_type: '',
					applicate_level: '',
					//附件
					files: '',
					//原文件名称
					files_originalfilename: ''
				},
				rules: {
					// 必填规则
					year: {
						rules: [{
								required: true,
								errorMessage: '请输入申请年份',
								// blur和change事件触发检验
								trigger: ['blur'],
							},
							{
								pattern: '^[1-3]([0-9]{3})$',
								errorMessage: '请输入正确的年份',
							}
						],
					},
					city: {
						rules: [{
							required: true,
							errorMessage: '请选择地区',
							// blur和change事件触发检验
							trigger: ['blur'],
						}, ],
					},
					address: {
						rules: [{
							required: true,
							errorMessage: '请输入地址',
							// blur和change事件触发检验
							trigger: ['blur'],
						}, ],
					},
					enterprise_type: {
						rules: [{
							required: true,
							errorMessage: '请选择企业类型',
							// blur和change事件触发检验
							trigger: ['blur'],
						}, ],
					},
					applicate_level: {
						rules: [{
							required: true,
							errorMessage: '请选择申请等级',
							// blur和change事件触发检验
							trigger: ['blur'],
						}, ],
					},
				},
				//上传文件的一些变量
				fileList: [],

			}
		},
		onLoad() {
			this.getDicts("city_name").then((response) => {
				this.cityList = response.data;
			});
			this.form.code = uni.getStorageSync('USER_DATA').userDto.code
			this.form.enterpriseName = uni.getStorageSync('USER_DATA').userDto.enterpriseName
		},
		onReady() {
			// 需要在onReady中设置规则
			this.$refs.uForm.setRules(this.rules)
		},
		methods: {
			ckickConfirm(e) {
				this.form.city = e[0].label
			},
			getOp(e) {
				this.form.enterprise_type = e[0].label
			},
			getList(e) {
				this.form.applicate_level = e[0].label
			},
			// ============上传文件=============
			// 删除
			closeFile(index) {
				this.fileList.splice(index, 1)
				uni.showToast({
					title: '删除成功'
				})
			},
			// 选择
			getFilesSys: function() {
				let _this = this;
				// 上传文件 
				// pickFile.PickFile((path) => {
				// 	let fileLocalPath = "file:///" + path;
				// 	_this.fileUpload(fileLocalPath)
				// })
				// return

				// // #ifdef APP-PLUS
				// pickFile.PickFile((path) => {
				// 	let fileLocalPath = "file:///" + path;
				// 	_this.fileUpload(fileLocalPath)
				// })
				// // #endif

				// #ifdef H5
				this.$refs.files.choose()
				// #endif
			},
			// 选择完毕
			selectOut(e) {
				// if (e.tempFiles[0].extname != "pdf") {
				// 	uni.showToast({
				// 		title: '请上传pdf文件!',
				// 		icon: 'none'
				// 	})
				// 	return
				// }
				let file = e.tempFiles[0].path
				this.fileUpload(file)
			},
			//上传
			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)
					})
				})
			},


			// 图片上传成功
			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)
			},

			// ============！提交 ！=============
			toBack() {
				this.$refs.uForm.validate().then((res) => {
					if (this.fileList.length > 0) {
						this.form.files = [];
						this.form.files_originalfilename = [];
						this.fileList.forEach((item) => {
							this.form.files.push(item.url);
							this.form.files_originalfilename.push(item.name);
						});
						this.form.files = this.form.files.toString();
						this.form.files_originalfilename =
							this.form.files_originalfilename.toString();
					}
					addEnterprise(this.form).then((msg) => {
						console.log(msg);
						uni.showToast({
							title: '提交成功',
							//将值设置为 success 或者直接不用写icon这个参数
							icon: 'success',
							//显示持续时间为 2秒
							duration: 1000
						})
						setTimeout(() => {
							uni.switchTab({
								url: '/pages/company-home/index'
							});
						}, 1500)
					})
				})
			}
		}
	}
</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>