图片 地址处理

<template>
	<div>
		<el-row>
			<el-col :span="24">
				<el-button type="success" @click="openInsertDialog">添加景点</el-button>
			</el-col>
		</el-row>
		<el-row>
			<el-col :span="23" style="text-align: left;" :offset="1">
				<div><strong>按地区:</strong>
					<el-radio-group v-model="searchForm.pid" @change="handleProvinceChange">
						<el-radio-button :label="district.id" v-for="district in districts">{{district.name}}</el-radio-button>
						<el-radio-button label="0">全部</el-radio-button>
					</el-radio-group>
				</div>
				<div><strong>按等级:</strong></div>
				<div><strong>按风格:</strong>
					<el-radio-group v-model="searchForm.type" @change="handleProvinceChange">
						<el-radio-button :label="type.id" v-for="type in types">{{type.name}}</el-radio-button>
						<el-radio-button label="0">全部</el-radio-button>
					</el-radio-group>
				</div>
			</el-col>
		</el-row>
		<el-row>
			<el-col :span="6" v-for="row in tableData ">
				<el-card>
					
					<el-avatar :size="200" shape="square" :src="row.pic"></el-avatar><br />
					<div>景点名称:{{row.name}}</div>
					<div>地区:{{row.pname}}</div>
					<div>门票:{{row.ticket}}</div>
					<div>
					等级:<span v-if="row.level==1">A</span>
					<span v-if="row.level==2">AA</span>
					<span v-if="row.level==3">AAA</span>
					<span v-if="row.level==4">AAAA</span>
					<span v-if="row.level==5">AAAAA</span>
					</div>
					<div>
						<el-button type="primary" @click="openEdittDialog(row)">修改</el-button>
						<el-button type="danger" @click="deleteBiId(row.id)">删除</el-button>
					</div>
				</el-card>
			</el-col>
		</el-row>
		<el-row>
			<el-col :span="24">
				<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="current"
				 :page-size="size" :page-sizes="sizes" layout="total, sizes, prev, pager, next, jumper" :total="total" background>
				</el-pagination>
			</el-col>
		</el-row>
		<!--添加、、、、、、、、、、、、、、-->
		<el-dialog title="添加" :visible.sync="insertDialog">
			<el-form :model="insertForm" :rules="insertFormRules">
				<el-form-item label="景点名称" prop="name">
					<el-input v-model="insertForm.name"></el-input>
				</el-form-item>

				<el-form-item label="所属风格" prop="type">
					<el-select v-model="insertForm.type">
						<el-option v-for="type in types" :value="type.id" :label="type.name"></el-option>
					</el-select>
				</el-form-item>

				<el-form-item label="景区所属省市区">
					<el-cascader v-model="xpcd" :options="pcd" :props="pcdProps"></el-cascader>
				</el-form-item>
				<el-form-item label="门票价格" prop="ticket">
					<el-input v-model="insertForm.ticket"></el-input>
				</el-form-item>
				<el-form-item label="上传图片">

					<el-upload class="avatar-uploader" action="http://localhost:81/upload" :show-file-list="false" :on-success="handleAvatarSuccess">
						<img v-if="imageUrl" :src="imageUrl" class="avatar">
						<i v-else class="el-icon-plus avatar-uploader-icon"></i>
					</el-upload>

				</el-form-item>
				<el-form-item label="项目介绍" prop="introduction">
					<el-input v-model="insertForm.introduction"></el-input>
				</el-form-item>
			</el-form>

			<span slot="footer" class="dialog-footer">
				<el-button @click="insertDialog = false">取 消</el-button>
				<el-button type="primary" @click="saveForm('insertForm')">保存</el-button>
			</span>
		</el-dialog>
		<!--修改、、、、、、、、、、、、、-->
		<el-dialog title="修改" :visible.sync="edittDialog">
			<el-form :model="editForm">
				<el-form-item label="景点名称" prop="name">
					<el-input v-model="editForm.name"></el-input>
				</el-form-item>

				<el-form-item label="所属风格" prop="type">
					<el-select v-model="editForm.type">
						<el-option v-for="type in types" :value="type.id" :label="type.name"></el-option>
					</el-select>
				</el-form-item>

				<el-form-item label="景区所属省市区">
					<el-cascader v-model="xpcd" :options="pcd" :props="pcdProps"></el-cascader>
				</el-form-item>
				<el-form-item label="门票价格" prop="ticket">
					<el-input v-model="editForm.ticket"></el-input>
				</el-form-item>
				<el-form-item label="上传图片">

					<el-upload class="avatar-uploader" action="http://localhost:81/upload" :show-file-list="false" :on-success="handleAvatarSuccess">
						<img v-if="imageUrl" :src="imageUrl" class="avatar">
						<i v-else class="el-icon-plus avatar-uploader-icon"></i>
					</el-upload>

				</el-form-item>
				<el-form-item label="项目介绍" prop="introduction">
					<el-input v-model="editForm.introduction"></el-input>
				</el-form-item>
			</el-form>

			<span slot="footer" class="dialog-footer">
				<el-button @click="edittDialog = false">取 消</el-button>
				<el-button type="primary" @click="updateForm('editForm')">保存</el-button>
			</span>
		</el-dialog>

	</div>
</template>

<script>
	export default {
		data() {
			return {
				edittDialog: false,
				imageUrl: '',
				xpcd: [],
				pcd: [],
				insertDialog: false,
				districts: [],
				types: [],
				size: 4,
				sizes: [4, 8, 12],
				current: 1,
				total: 0,
				tableData: [],
				searchForm: {
					type: '',
					pid: 0,
				},
				insertForm: {
					name: '',
					level: '',
					type: '',
					province: '',
					city: '',
					county: '',
					ticket: '',
					pic: '',
					introduction: ''
				},
				pcdProps: {
					value: 'id',
					label: 'name',
					children: 'list'
				},
				insertFormRules: {
					name: [{
						required: true,
						message: '请输入景点名称',
						trigger: 'blur'
					}, ],
				},
				editForm: {
					id: '',
					name: '',
					level: '',
					type: '',
					province: '',
					city: '',
					county: '',
					ticket: '',
					pic: '',
					introduction: ''
				}
			}
		},
		created() {
			this.initData();
			this.initDataType();
			this.initDataDistrict();
			this.initPCD();
		},
		methods: {
			initPCD() {
				this.axios.get('http://localhost:81/tDistrict/findAll').then((response) => {
					this.pcd = response.data.result;
				})
			},
			initDataDistrict() {
				this.axios.get('http://localhost:81/tDistrict/list').then((response) => {
					this.districts = response.data.result;
				})
			},
			initDataType() {
				this.axios.get('http://localhost:81/tType/list').then((response) => {
					this.types = response.data.result;
				})
			},
			initData() {
				this.axios.get('http://localhost:81/tScenic/list', {
					params: {
						current: this.current,
						size: this.size,
						type: this.searchForm.type,
						province: this.searchForm.pid,
					}
				}).then((response) => {
					this.tableData = response.data.result.records;
					this.total = response.data.result.total;
				})
			},
			handleSizeChange(val) {
				this.size = val;
				this.initData();
			},
			handleCurrentChange(val) {
				this.current = val;
				this.initData();
			},
			handleProvinceChange() {
				this.initData();
			},
			handleTypechange() {
				this.initData();
			},
			openInsertDialog() {
				this.insertDialog = true;
			},
			handleAvatarSuccess(res, file) {
				this.imageUrl = URL.createObjectURL(file.raw);
				if (this.insertDialog) {
					this.insertForm.pic = res.result;
				}else if(this.edittDialog){
					this.editForm.pic=res.result;
				}

			},
			saveForm(formName) {
				if (this.xpcd.length > 0) {
					this.insertForm.province = this.xpcd[0];
					this.insertForm.city = this.xpcd[1];
					this.insertForm.county = this.xpcd[2];

				}
				this.axios.post('http://localhost:81/tScenic/insert', this.insertForm).then((res) => {
					if (res.data.result) {
						this.$message({
							message: '添加成功',
							type: 'success'
						});
						this.insertDialog = false;
						this.initData();
					} else {
						this.$message({
							message: '添加失败',
							type: 'warning'
						});
					}
				})
			},
			openEdittDialog(row) {
				Object.assign(this.editForm, row);
				this.xpcd = [];
				this.xpcd.push(row.province);
				this.xpcd.push(row.city);
				this.xpcd.push(row.county);
				//图片回显
				this.imageUrl = row.pic;
				this.edittDialog = true;
			},
			updateForm(formName) {
				if (this.xpcd.length > 0) {
					this.editForm.province = this.xpcd[0];
					this.editForm.city = this.xpcd[1];
					this.editForm.county = this.xpcd[2];
				}
				this.axios.post('http://localhost:81/tScenic/update', this.editForm).then((res) => {
					if (res.data.result) {
						this.$message({
							message: '修改成功',
							type: 'success'
						});
						this.edittDialog = false;
						this.initData();
					} else {
						this.$message({
							message: '修改失败',
							type: 'warning'
						});
					}
				})
			},
			deleteBiId(id){
				   this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
				          confirmButtonText: '确定',
				          cancelButtonText: '取消',
				          type: 'warning'
				        }).then(() => {
				         this.axios.post('http://localhost:81/tScenic/deletes',null,{
							 params:{
								 ids:id
							 }
						 }).then((res)=>{
							 if(res.data.result){
								 this.$message({
								   type: 'info',
								   message: '已删除'
								 }); 
								 this.initData();
							 }else{
								 this.$message({
								   type: 'info',
								   message: '删除失败'
								 }); 
							 }
						 })
				        }).catch(() => {
				          this.$message({
				            type: 'info',
				            message: '已取消删除'
				          });          
				        });
			}
		}

	}
</script>

<style>
	.image {
		width: 100%;
		display: block;
	}

	.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;
	}

	.avatar {
		width: 178px;
		height: 178px;
		display: block;
	}
</style>