1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
<template>
<el-dialog :title="dialogObj.title"
:visible.sync="dialogObj.show">
<el-form label-width="80px">
<el-form-item label="名称">
<el-input v-model="form.name"></el-input>
</el-form-item>
<el-form-item label="封面">
<el-upload
class="upload-demo"
:on-remove="handleRemove"
action="/api/public/upload"
:http-request="uploadFile"
list-type="picture-card"
multiple
:limit="1"
:file-list="imgList">
</el-upload>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogObj.show = false">取 消</el-button>
<el-button type="primary" @click="onSave()">确 定</el-button>
</span>
</el-dialog>
</template>
<script>
import {getCategoryApi,addCategoryApi,updateMenuApi,uploadFileApi} from "../../service/api";
export default {
name: "menuDialog",
data(){
return {
imgList:[],
form:{
name:'',
pid:'',
cover:'',
type:0
}
}
},
methods:{
initDialog(){
switch (this.dialogObj.type) {
case 0:
this.form = {
name:'',
pid:this.dialogObj.pid,
cover:'',
type:0
};
this.imgList = [];
break;
case 1:
this.form = {
name:this.dialogObj.that.name,
pid:this.dialogObj.that.pid,
cover:this.dialogObj.that.cover,
type:0
};
this.imgList = [];
if(this.form.cover){
this.imgList.push({name:this.dialogObj.that.cover,url:this.dialogObj.that.cover,title:'',lable:''})
}
}
},
handleRemove(){
this.imgList = [];
this.form.cover = ''
},
onSave(){
if(this.imgList[0]){
this.form.cover = this.imgList[0].url;
}else{
this.form.cover = ''
}
switch (this.dialogObj.type) {
case 0:
addCategoryApi(this.form).then(res=>{
this.$message({
type: 'success',
message: '添加成功!'
});
this.dialogObj.show = false;
this.$emit('reflash')
});
break;
case 1:
updateMenuApi(this.dialogObj.category_id,this.form).then(res=>{
this.$message({
type: 'success',
message: '修改成功!'
});
this.dialogObj.show = false;
this.$emit('reflash')
})
}
},
uploadFile(a){
this.$store.dispatch('setProgress',{type:'new',id:a.file.uid});
uploadFileApi({file:a.file,type:'local'}).then(res=>{
this.imgList[0]= {name:res.url,url:process.env.IMAGE_URL_HEAD + res.url,title:'',lable:''}
})
}
},
props:[
'dialogObj'
],
watch:{
'dialogObj'(){
this.initDialog()
}
}
}
</script>
<style scoped>
</style>