operation.vue
4.55 KB
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
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
<template>
<main class="operation_container">
<section class="operation_content">
<el-form :model="operForm" :rules="rules" ref="operForm" label-width="100px" size="small">
<el-form-item label="标题" prop="title">
<el-input v-model="operForm.title" placeholder="给目标起个名字"></el-input>
</el-form-item>
<el-form-item label="图片" prop="idialogImageUrl">
<el-upload action="#" list-type="picture-card" :auto-upload="false" :limit="1">
<div slot="default">
<span>
上传图片
</span>
</div>
<div slot="file" slot-scope="{file}">
<img class="el-upload-list__item-thumbnail" :src="file.url" alt="">
<span class="el-upload-list__item-actions">
<span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
<i class="el-icon-view"></i>
</span>
<span v-if="!operForm.disabled" class="el-upload-list__item-delete" @click="handleRemove(file)">
<i class="el-icon-delete"></i>
</span>
</span>
</div>
</el-upload>
<span>
支持扩展名：.jpg .jpeg .png 大小1M以内
<br>
建议尺寸：384px*145px
</span>
<el-dialog :visible.sync="operForm.dialogVisible">
<img width="100%" :src="operForm.dialogImageUrl" alt="">
</el-dialog>
</el-form-item>
<el-form-item label="顺序" prop="order">
<el-select v-model="operForm.order" placeholder="请选择">
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="类型" prop="type">
<el-select v-model="operForm.type" placeholder="请选择">
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="链接" prop="link">
<el-input v-model="operForm.link" placeholder="给目标起个名字"></el-input>
</el-form-item>
<el-form-item label="启用" prop="status">
<el-switch v-model="operForm.status">
</el-switch>
</el-form-item>
<el-form-item style="text-align: right;">
<el-button type="primary" @click="submitForm('operForm')">提交</el-button>
</el-form-item>
</el-form>
</section>
</main>
</template>
<script>
export default {
name: 'CarouselOperation',
data() {
return {
operForm: {
title: '',
idialogImageUrl: '',
order: 1,
type: '',
link: '',
status: 0,
dialogVisible: false,
disabled: false
},
options: [{
value: '选项1',
label: '黄金糕'
}, {
value: '选项2',
label: '双皮奶'
}, {
value: '选项3',
label: '蚵仔煎'
}, {
value: '选项4',
label: '龙须面'
}, {
value: '选项5',
label: '北京烤鸭'
}],
rules: {
title: [
{ required: true, message: '请输入活动名称', trigger: 'blur' }
],
idialogImageUrl: [
{ required: true, message: '请选择活动区域', trigger: 'change' }
],
order: [
{ required: true, message: '请输入活动名称', trigger: 'blur' }
],
type: [
{ required: true, message: '请输入活动名称', trigger: 'blur' }
],
link: [
{ required: true, message: '请输入活动名称', trigger: 'blur' }
],
status: [
{ required: true, message: '请选择活动资源', trigger: 'change' }
]
}
}
},
methods: {
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
alert('submit!');
} else {
console.log('error submit!!');
return false;
}
});
},
handleRemove(file) {
console.log(file);
},
handlePictureCardPreview(file) {
this.dialogImageUrl = file.url;
this.dialogVisible = true;
}
}
}
</script>
<style lang="scss" scoped>
.operation_container {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
.operation_content {
width: 520px;
}
}
</style>