景点白名单列表 - 管理系统
<template>
<div>
<el-card class="crumbs-card">
<div class="crumbs">
<el-breadcrumb separator="\/">
<el-breadcrumb-item :to="{ path: '\/main\/' }">首页</el-breadcrumb-item>
<el-breadcrumb-item :to="{ path: '\/main\/first' }">白名单列表</el-breadcrumb-item>
</el-breadcrumb>
</div>
</el-card>
<el-card class="container">
<el-form :inline="true" class="demo-form-inline">
<el-form-item label="景点名">
<el-input v-model="name" placeholder=""></el-input>
</el-form-item>
<el-form-item label="地点">
<el-input v-model="site" placeholder=""></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="getV">查询</el-button>
<el-button type="primary" @click="toAddSpot">添加景点</el-button>
<el-button type="danger" v-if="ids.length > 0" @click="removes">删除选中</el-button>
<pre><code> </el-form-item>
</el-form>
<el-table
@selection-change="selectChange"
:data="spots"
style="width: 100%">
<el-table-column
type="selection"
width="55">
</el-table-column>
<el-table-column
prop="name"
label="景点名称">
</el-table-column>
<el-table-column
prop="site"
label="地点">
</el-table-column>
<el-table-column
prop="introduce"
label="介绍">
</el-table-column>
<el-table-column
label="图片">
<template slot-scope="scope">
<img :src="picUrl() + scope.row.path" width="100px">
</template>
</el-table-column>
<el-table-column
prop="recommend"
label="是否推荐">
<template slot-scope="scope">
<el-switch
:value="scope.row.recommend == 1"
active-color="#13ce66"
inactive-color="#ff4949">
</el-switch>
</template>
</el-table-column>
<el-table-column
label="操作">
<template slot-scope="scope">
<!--<el-button type="text" @click="">设置为推荐</el-button>-->
<el-button type="text" @click="openEdit(scope.row)">编辑</el-button>
<el-button type="text" @click="remove(scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
<el-pagination
background
@size-change="pageSizeChange"
@current-change="pageNoChange"
:current-page="pageNo"
:page-sizes="[10, 20, 30, 40, 100]"
:page-size="pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="total">
</el-pagination>
</el-card>
<!--编辑弹框-->
<el-dialog title="景点信息" width="40%" :visible.sync="dialogFormVisible">
<el-form ref="form" label-width="80px">
<el-form-item label="景点名">
<el-input v-model="editSpot.name"></el-input>
</el-form-item>
<el-form-item label="地点">
<el-input v-model="editSpot.site"></el-input>
</el-form-item>
<el-form-item label="简介">
<el-input type="textarea" v-model="editSpot.introduce"></el-input>
</el-form-item>
<el-form-item label="原始图片">
<img :src="picUrl() + editSpot.path" width="100px">
</el-form-item>
<el-form-item label="图片" prop="path">
<el-input type="text" v-model="editSpot.path" hidden></el-input>
<el-upload
action="\/api\/file\/upload"
list-type="picture-card"
:on-preview="handlePictureCardPreview"
:on-success="uploadSuccess"
:limit="number"
:on-change="UploadImage"
:on-remove="handleRemove">
<i class="el-icon-plus"></i>
</el-upload>
<el-dialog :visible.sync="dialogVisible">
<img width="100%" :src="picUrl() + editSpot.path" alt="">
</el-dialog>
</el-form-item>
<el-form-item label="联系电话">
<el-input v-model="editSpot.phone"></el-input>
</el-form-item>
<el-form-item label="路径推荐">
<el-input type="textarea" v-model="editSpot.strategy"></el-input>
</el-form-item>
<el-form-item label="是否推荐">
<!--<el-input v-model="editSpot.recommend"></el-input>-->
<el-switch v-model="editSpot.recommend"></el-switch>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogFormVisible = false">取 消</el-button>
<el-button type="primary" @click="saveSpot">确 定</el-button>
</div>
</el-dialog>
</div>
</code></pre>
</template>
<script>
import {getSpotList, removeByIds, removeById, updateSpot} from '@api/spot'
export default {
name: 'spotList',
data: function () {
return {
pr: '',
dialogImageUrl: '',
dialogVisible: false,
dialogFormVisible: false,
editSpot: {},
spots: [],
pageNo: 1,
pageSize: 10,
total: 0,
name: '',
site: '',
ids: []
}
},
methods: {
getV () {
let obj = {
pageNo: this.pageNo,
pageSize: this.pageSize,
name: this.name,
site: this.site
}
getSpotList(obj).then(res => {
// 这里的res就是后端直接返回的json
this.spots = res.data.records
this.total = res.data.total
})
},
handleRemove (file, fileList) {
console.log(file, fileList)
},
handlePictureCardPreview (file) {
this.dialogImageUrl = file.url
this.dialogVisible = true
},
uploadSuccess (res) {
this.dialogImageUrl = res.url
this.editSpot.path = res.url
},
picUrl () {
return this.pr
},
toAddSpot () {
this.$router.push({path: '\/main\/spot\/add'})
},
// 表格选择项发生变化
selectChange (value) {
this.ids = value.map(spot => spot.id)
},
// 保存
saveSpot () {
console.info(this.editSpot)
this.editSpot.recommend = this.editSpot.recommend ? 1 : 0
updateSpot(this.editSpot).then(res => {
this.$message({
message: '修改成功',
type: 'success'
})
this.dialogFormVisible = false
this.getV()
})
},
// 打开编辑
openEdit (obj) {
// 克隆对象 克隆了再用
let newObjj = JSON.parse(JSON.stringify(obj))
this.editSpot = newObjj
this.editSpot.recommend = this.editSpot.recommend === 1
this.dialogFormVisible = true
},
// 批量删除
removes () {
this.$confirm('此操作将永久删除选中数据, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
let obj = {ids: this.ids}
removeByIds(obj).then(res => {
this.$message({
message: '删除成功',
type: 'success'
})
this.getV()
})
}).catch(() => {
})
},
// 点击删除
remove (spot) {
this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
let obj = {id: spot.id}
removeById(obj).then(res => {
this.$message({
message: '删除成功',
type: 'success'
})
this.getV()
})
}).catch(() => {
})
},
// 页码改变
pageNoChange (value) {
this.pageNo = value
this.getV()
},
// 页面大小改变
pageSizeChange (value) {
this.pageSize = value
this.getV()
}
},
// 生命周期
// 页面刚创建时
created: function () {
this.pr = 'http://localhost:8081/'
this.getV()
}
}
</script>
<style scoped>
</style>
原文地址: https://www.cveoy.top/t/topic/p0Bn 著作权归作者所有。请勿转载和采集!