添加

> <template>
	<!-- 添加表单 -->
	<el-form
		:model="addForm"
		:rules="rules"
		ref="addForm"
		label-width="80px"
		class="demo-ruleForm"
		style="width:50%"
	>
		<el-row>
			<el-col :span="12">
				<el-form-item label="品牌" prop="brand">
					<el-input v-model="addForm.brand"></el-input>
				</el-form-item>
				<el-form-item label="车系" prop="carSeries">
					<el-input v-model="addForm.carSeries"></el-input>
				</el-form-item>
				<el-form-item label="变速箱" prop="transmission">
					<el-radio-group v-model="addForm.transmission">
						<el-radio label="手动">手动</el-radio>
						<el-radio label="自动">自动</el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item label="价格" prop="price">
					<el-input v-model="addForm.price" placeholder="万元"></el-input>
				</el-form-item>
				<el-form-item label="上牌时间" prop="registrationTime">
					<el-date-picker
						type="month"
						placeholder="选择日期"
						v-model="addForm.registrationTime"
						style="width:100%"
						format="yyyy-MM"
					></el-date-picker>
				</el-form-item>
				<el-form-item label="里程" prop="mileage">
					<el-input v-model="addForm.mileage"></el-input>
				</el-form-item>
				<el-form-item label="归属地" prop="location">
					<el-input v-model="addForm.location"></el-input>
				</el-form-item>
			</el-col>
			<el-col :span="12">
				<el-form-item label=" " prop="picSavepath" label-width="50px">
					<div class="div-upload">
						<el-upload
							class="avatar-uploader"
							action="http://etoak.vip:9527/sysFile/fileUpload"
							:show-file-list="false"
							:on-success="handleAvatarSuccess"
							:before-upload="beforeAvatarUpload"
						>
							<img v-if="addForm.picSavepath" :src="addForm.picSavepath" class="avatar" />
							<i v-else class="el-icon-plus avatar-uploader-icon"></i>
						</el-upload>
					</div>
				</el-form-item>
			</el-col>
		</el-row>
		<el-form-item label="级别" prop="level">
			<el-select v-model="addForm.level" placeholder="级别" style="width:40%">
				<el-option label="小型车" value="小型车"></el-option>
				<el-option label="中型车" value="中型车"></el-option>
				<el-option label="紧凑型" value="紧凑型"></el-option>
				<el-option label="中大型" value="中大型"></el-option>
				<el-option label="大型车" value="大型车"></el-option>
				<el-option label="mpv" value="mpv"></el-option>
				<el-option label="suv" value="suv"></el-option>
				<el-option label="跑车" value="跑车"></el-option>
			</el-select>
		</el-form-item>
		<el-form-item label="排量" prop="displacement">
			<el-select v-model="addForm.displacement" placeholder="级别" style="width:40%">
				<el-option label="1.0L及以下" value="1.0L及以下"></el-option>
				<el-option label="1.1L~1.6L" value="1.1L~1.6L"></el-option>
				<el-option label="1.7L~2.0L" value="1.7L~2.0L"></el-option>
				<el-option label="2.1L~2.5L" value="2.1L~2.5L"></el-option>
				<el-option label="2.6L~3.0L" value="2.6L~3.0L"></el-option>
				<el-option label="3.0L以上" value="3.0L以上"></el-option>
			</el-select>
		</el-form-item>
		<el-form-item label="概述" prop="generalization">
			<el-input type="textarea" rows="5" v-model="addForm.generalization"></el-input>
		</el-form-item>
		<el-form-item style="margin-left:10%">
			<el-button type="primary" @click="submitForm('addForm')">添 加</el-button>
			<el-button @click="resetForm('addForm')">清 空</el-button>
		</el-form-item>
	</el-form>
</template>

<script>
import dao from '@/api/dao'
export default {
	data() {
		/* /^(([^0][0-9]+|0)\.([0-9]{1,2}))$/*/
		const checkPrice = (rule, value, callback) => {
			if (value === '') {
				callback(new Error('请输入价格'));
			} else {
				if (!/^\d+(\.\d{1,2})?$/.test(value)) {
					callback(new Error('请输入正确的价格,支持小数点两位'))
				}
				callback();
			}
		};
		return {
			/* 添加表单的数据 */
			addForm: {
				brand: '',
				carSeries: '',
				transmission: '',
				price: '',
				registrationTime: '',
				displacement: '',
				level: '',
				generalization: '',
				mileage: '',
				location: '',
				picSavepath: '',
				key: '574a4059535c5b4b5453501c0d08000f190808',
			},
			/* 添加表单的验证规则 */
			rules: {
				price: [
					{ required: true, validator: checkPrice, trigger: 'blur' },
				],
				mileage: [
					{ required: true, message:'请填写里程', trigger: 'blur' },
				],
				brand: [
					{ required: true, message: '请填写品牌', trigger: 'blur' },
				],
				carSeries: [
					{ required: true, message: '请填写车系', trigger: 'blur' },
				],
				registrationTime: [
					{ required: true, message: '请选择上牌时间', trigger: 'blur' }
				],
				level: [
					{ required: true, message: '请选择级别', trigger: 'blur' }
				],
				transmission: [
					{ required: true, message: '请选择变速箱类型', trigger: 'blur' }
				],
				displacement: [
					{ required: true, message: '请选择排量', trigger: 'blur' }
				],
				location: [
					{ required: true, message: '请填写归属地', trigger: 'blur' }
				],
				generalization: [
					{ required: true, message: '请填写概况', trigger: 'blur' }
				],
				picSavepath: [
					{ required: true, message: '请上传用户头像', trigger: 'blur' }
				],
			},
		};
	},
	methods: {
		/* 提交添加表单 */
		submitForm(formName) {
			this.$refs[formName].validate((valid) => {
				if (valid) {
					dao.addCar(this.addForm)
						.then(resp => {
							const result = resp.data
							if (result.flag) {
								this.$message({
									message: result.msg,
									type: 'success',
								})
								this.resetForm('addForm')
							} else {
								this.$message({
									message: result.msg,
									type: 'error',
								})
							}
						})
				} else {
					this.$message({
						message: '请填写表单信息',
						type: 'error',
					})
					return false;
				}
			});
		},
		/* 重置表单 */
		resetForm(formName) {
			this.$refs[formName].resetFields();
		},
		/* 用户头像上传成功 */
		handleAvatarSuccess(res, file) {
			/* this.addForm.path = URL.createObjectURL(file.raw); */
			this.addForm.picSavepath = res.data.path
		},
		/* 用户头像上传之前的验证 */
		beforeAvatarUpload(file) {
			const isJPG = file.type === 'image/jpeg';
			const isLt2M = file.size / 1024 / 1024 < 2;

			/* 验证图片格式 */
			if (!isJPG) {
				this.$message.error('上传头像图片只能是 JPG 格式!');
			}
			/* 验证图片大小 */
			if (!isLt2M) {
				this.$message.error('上传头像图片大小不能超过 2MB!');
			}
			return isJPG && isLt2M;
		}
	}
}
</script>

<style scoped>
.avatar-uploader .el-upload {
	border: 1px dashed #d9d9d9;
	border-radius: 6px;
	cursor: pointer;
	position: relative;
	overflow: hidden;
}
.avatar-uploader .el-upload:hover {
	border-color: #409eff;
}
.avatar-uploader-icon {
	font-size: 28px;
	color: #8c939d;
	width: 178px;
	height: 178px;
	line-height: 178px;
	text-align: center;
	border: dashed 1px silver;
	border-radius: 5px;
}
.avatar {
	width: 178px;
	height: 178px;
	display: block;
}
</style>