|
@@ -86,19 +86,26 @@
|
|
|
<el-input v-model="form.name" placeholder maxlength="25"></el-input>
|
|
|
</el-form-item>
|
|
|
<el-form-item label="图片" prop="image">
|
|
|
- <el-upload class="upload-demo" v-model="form.image" ref="image"
|
|
|
+ <div class="bg90 bg-height marginB10 freePic">
|
|
|
+ <el-upload
|
|
|
+ :headers="headers"
|
|
|
+ :class="{hideUpload:hideUploadEdit}"
|
|
|
:action="caerAction"
|
|
|
+ :on-preview="handlePictureCardPreview"
|
|
|
+ :on-remove="handleRemove"
|
|
|
+ :on-change="handleChange"
|
|
|
+ :file-list="fileList"
|
|
|
+ list-type="picture-card"
|
|
|
+ :on-success="handleSuccess"
|
|
|
:before-upload="caerBeforeUpload"
|
|
|
- list-type="picture"
|
|
|
:limit="1"
|
|
|
- :on-success="handleSuccess"
|
|
|
- :headers="headers"
|
|
|
- :on-remove="handleRemove"
|
|
|
- drag >
|
|
|
- <i class="el-icon-upload">
|
|
|
- <div class="el-upload__text">将文件拖到此处, 或<em>点击上传</em></div>
|
|
|
- </i>
|
|
|
+ >
|
|
|
+ <i class="el-icon-plus"></i>
|
|
|
</el-upload>
|
|
|
+ <el-dialog :visible.sync="dialogVisible">
|
|
|
+ <img width="100%" :src="form.image" alt="">
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
</el-form-item>
|
|
|
<el-form-item label="位置" prop="position">
|
|
|
<el-select v-model="form.position" placeholder="请选择">
|
|
@@ -143,6 +150,7 @@ export default {
|
|
|
},
|
|
|
data () {
|
|
|
return {
|
|
|
+ hideUploadEdit: false,
|
|
|
positions: [
|
|
|
{
|
|
|
id: 1,
|
|
@@ -165,8 +173,10 @@ export default {
|
|
|
Authorization: "Bearer " + getToken(),
|
|
|
},
|
|
|
caerAction: process.env.VUE_APP_BASE_API + "/common/upload",
|
|
|
+ fileList: [],
|
|
|
// 遮罩层
|
|
|
loading: true,
|
|
|
+ dialogVisible: false,
|
|
|
// 选中数组
|
|
|
ids: [],
|
|
|
// 非单个禁用
|
|
@@ -213,10 +223,18 @@ export default {
|
|
|
this.getList()
|
|
|
},
|
|
|
methods: {
|
|
|
+ handlePictureCardPreview(file) {
|
|
|
+ this.dialogVisible = true;
|
|
|
+ },
|
|
|
+ handleChange(file){
|
|
|
+ // 大于1张隐藏
|
|
|
+ this.hideUploadEdit = true
|
|
|
+ },
|
|
|
handleSuccess(file) {
|
|
|
this.form.image = file.url;
|
|
|
},
|
|
|
handleRemove(file) {
|
|
|
+ this.hideUploadEdit = false
|
|
|
//刚上传的图片
|
|
|
this.form.image = '';
|
|
|
},
|
|
@@ -268,16 +286,20 @@ export default {
|
|
|
},
|
|
|
// 新增 / 修改
|
|
|
addOrUpdateHandle (id) {
|
|
|
+ this.fileList=[];
|
|
|
this.form.id = id
|
|
|
if(this.form.id != null) {
|
|
|
this.title = "修改"
|
|
|
getBanner(id).then(response => {
|
|
|
- this.form = response.data;
|
|
|
+ this.form = response.data;
|
|
|
+ this.fileList.push({
|
|
|
+ 'url': this.form.image
|
|
|
+ })
|
|
|
})
|
|
|
} else {
|
|
|
this.title = "新增"
|
|
|
}
|
|
|
- console.log('form', this.form)
|
|
|
+ // console.log('form', this.form)
|
|
|
this.open = true;
|
|
|
},
|
|
|
updateStatus (id, status) {
|
|
@@ -285,7 +307,7 @@ export default {
|
|
|
if (status === 0) {
|
|
|
msg = '启动成功'
|
|
|
}
|
|
|
- this.$http.get(`/banner/updateStatus?id=` + id + '&status=' + status).then(({ data }) => {
|
|
|
+ this.$http.get(`/module/banner/updateStatus?id=` + id + '&status=' + status).then(({ data }) => {
|
|
|
if (data.code === 0) {
|
|
|
this.getList();
|
|
|
this.$message({
|
|
@@ -338,3 +360,8 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
+<style lang="scss" scoped>
|
|
|
+.freePic ::v-deep .hide .el-upload--picture-card {
|
|
|
+ display: none;
|
|
|
+}
|
|
|
+</style>
|