|
@@ -0,0 +1,208 @@
|
|
1
|
+<template>
|
|
2
|
+ <el-form ref="form" :model="dynamic" label-width="160px">
|
|
3
|
+ <el-form-item label="所属项目">
|
|
4
|
+ <el-select v-model="dynamic.buildingId" placeholder="请选择">
|
|
5
|
+ <el-option v-for="(build,i) in buildings.list || []" :key="i" :label="build.buildingName" :value="build.buildingId"></el-option>
|
|
6
|
+ </el-select>
|
|
7
|
+ </el-form-item>
|
|
8
|
+ <el-form-item label="主图">
|
|
9
|
+ <el-upload
|
|
10
|
+ class="avatar-uploader"
|
|
11
|
+ :action="upFileUrl"
|
|
12
|
+ name='file'
|
|
13
|
+ :show-file-list="false"
|
|
14
|
+ :before-upload="beforeImgUpload"
|
|
15
|
+ :on-success="handleAvatarSuccess">
|
|
16
|
+ <img v-if="dynamic.imgUrl" :src="dynamic.imgUrl" class="avatar">
|
|
17
|
+ <i v-else class="el-icon-plus avatar-uploader-icon"></i>
|
|
18
|
+ </el-upload>
|
|
19
|
+ </el-form-item>
|
|
20
|
+ <el-form-item label="活动标题">
|
|
21
|
+ <el-input v-model="dynamic.title"></el-input>
|
|
22
|
+ </el-form-item>
|
|
23
|
+ <el-form-item label="活动时间">
|
|
24
|
+ <el-input v-model="dynamic.title" style="width:40%"></el-input>
|
|
25
|
+ <span>-</span>
|
|
26
|
+ <el-input v-model="dynamic.title" style="width:40%"></el-input>
|
|
27
|
+ </el-form-item>
|
|
28
|
+ <el-form-item label="活动地点">
|
|
29
|
+ <el-input v-model="dynamic.title"></el-input>
|
|
30
|
+ </el-form-item>
|
|
31
|
+ <el-form-item label="活动人数">
|
|
32
|
+ <el-input v-model="dynamic.title"></el-input>
|
|
33
|
+ </el-form-item>
|
|
34
|
+ <!-- <el-form-item label="链接地址">
|
|
35
|
+ <el-input v-model="dynamic.url"></el-input>
|
|
36
|
+ </el-form-item> -->
|
|
37
|
+ <el-form-item label="活动详情">
|
|
38
|
+ <div id="websiteEditorElem" style="height: 400px"></div>
|
|
39
|
+ </el-form-item>
|
|
40
|
+ <el-form-item label="是否需要报名">
|
|
41
|
+ <el-radio v-model="radio" label="1">是</el-radio>
|
|
42
|
+ <el-radio v-model="radio" label="0">否</el-radio>
|
|
43
|
+ </el-form-item>
|
|
44
|
+ <el-form-item>
|
|
45
|
+ <el-button type="primary" @click="onSubmit">保存</el-button>
|
|
46
|
+ <el-button @click="onCancel">取消</el-button>
|
|
47
|
+ </el-form-item>
|
|
48
|
+ </el-form>
|
|
49
|
+</template>
|
|
50
|
+
|
|
51
|
+<script>
|
|
52
|
+import { createNamespacedHelpers } from 'vuex'
|
|
53
|
+import apis from '../../config/api'
|
|
54
|
+import E from 'wangeditor'
|
|
55
|
+
|
|
56
|
+const { mapState: mapDynamicState, mapActions: mapDynamicActions, mapMutations: mapDynamicMutations } = createNamespacedHelpers('dynamic')
|
|
57
|
+const { mapState: mapBuildingState, mapActions: mapBuildingActions } = createNamespacedHelpers('building')
|
|
58
|
+const { mapActions: mapImgActions } = createNamespacedHelpers('img')
|
|
59
|
+
|
|
60
|
+export default {
|
|
61
|
+ data () {
|
|
62
|
+ return {
|
|
63
|
+ upFileUrl: apis.file.upload.url,
|
|
64
|
+ radio:'1'
|
|
65
|
+ }
|
|
66
|
+ },
|
|
67
|
+ computed: {
|
|
68
|
+ ...mapDynamicState({
|
|
69
|
+ detail: x => x.detail,
|
|
70
|
+ }),
|
|
71
|
+ dynamic: {
|
|
72
|
+ get () {
|
|
73
|
+ return this.detail
|
|
74
|
+ },
|
|
75
|
+ set (val) {
|
|
76
|
+ return this.updateDetail(val)
|
|
77
|
+ }
|
|
78
|
+ },
|
|
79
|
+ ...mapBuildingState({
|
|
80
|
+ buildings: x => x.buildings
|
|
81
|
+ }),
|
|
82
|
+ },
|
|
83
|
+ methods: {
|
|
84
|
+ ...mapBuildingActions([
|
|
85
|
+ 'getBuildings'
|
|
86
|
+ ]),
|
|
87
|
+ ...mapDynamicMutations([
|
|
88
|
+ 'updateDetail'
|
|
89
|
+ ]),
|
|
90
|
+ ...mapDynamicActions([
|
|
91
|
+ 'getDetail',
|
|
92
|
+ 'addDynamics',
|
|
93
|
+ 'editDynamics'
|
|
94
|
+ ]),
|
|
95
|
+ ...mapImgActions([
|
|
96
|
+ 'uploadImg'
|
|
97
|
+ ]),
|
|
98
|
+ beforeImgUpload (file) {
|
|
99
|
+ if (file.type !== 'image/jpeg' && file.type !== 'image/png') {
|
|
100
|
+ this.$message.error('上传图片只能是 JPG 或 PNG 格式!')
|
|
101
|
+ return false
|
|
102
|
+ }
|
|
103
|
+ // if (file.size / 1024 > 300) {
|
|
104
|
+ // this.$message.error('图片大小不允许超过300k!')
|
|
105
|
+ // return false
|
|
106
|
+ // }
|
|
107
|
+ this.loading = this.$loading({
|
|
108
|
+ lock: true,
|
|
109
|
+ text: '上传中...',
|
|
110
|
+ spinner: 'el-icon-loading',
|
|
111
|
+ background: 'rgba(0, 0, 0, 0.7)'
|
|
112
|
+ })
|
|
113
|
+
|
|
114
|
+ return true
|
|
115
|
+ },
|
|
116
|
+ handleAvatarSuccess (res) {
|
|
117
|
+ this.updateDetail({...this.dynamic, imgUrl: res.data})
|
|
118
|
+ this.loading.close()
|
|
119
|
+ },
|
|
120
|
+ onSubmit () {
|
|
121
|
+ if (!this.detail.dynamicId) {
|
|
122
|
+ // 新增
|
|
123
|
+ this.addDynamics({
|
|
124
|
+ detail: JSON.stringify(this.detail)
|
|
125
|
+ }).then(() => {
|
|
126
|
+ this.onCancel()
|
|
127
|
+ })
|
|
128
|
+ } else {
|
|
129
|
+ // 修改
|
|
130
|
+ this.editDynamics({
|
|
131
|
+ detail: JSON.stringify(this.detail)
|
|
132
|
+ }).then(() => {
|
|
133
|
+ this.onCancel()
|
|
134
|
+ })
|
|
135
|
+ }
|
|
136
|
+ },
|
|
137
|
+ onCancel () {
|
|
138
|
+ this.$router.push({name: 'dynamiclist'})
|
|
139
|
+ }
|
|
140
|
+ },
|
|
141
|
+ mounted () {
|
|
142
|
+ const _that = this
|
|
143
|
+ const phoneEditor = new E('#websiteEditorElem')
|
|
144
|
+ phoneEditor.customConfig.onchange = function (html) {
|
|
145
|
+ _that.dynamic = {..._that.dynamic, url: html}
|
|
146
|
+ }
|
|
147
|
+ // phoneEditor.customConfig.uploadImgServer = this.upFileUrl
|
|
148
|
+ // phoneEditor.customConfig.uploadFileName = 'uploadFiles'
|
|
149
|
+
|
|
150
|
+ phoneEditor.customConfig.customUploadImg = function (files, insert) {
|
|
151
|
+ _that.uploadImg(files[0]).then(data => {
|
|
152
|
+ insert(data)
|
|
153
|
+ })
|
|
154
|
+ }
|
|
155
|
+ phoneEditor.customConfig.menus = [
|
|
156
|
+ 'head', // 标题
|
|
157
|
+ 'bold', // 粗体
|
|
158
|
+ 'fontSize', // 字号
|
|
159
|
+ 'fontName', // 字体
|
|
160
|
+ 'italic', // 斜体
|
|
161
|
+ 'underline', // 下划线
|
|
162
|
+ 'strikeThrough', // 删除线
|
|
163
|
+ 'foreColor', // 文字颜色
|
|
164
|
+ 'backColor', // 背景颜色
|
|
165
|
+ 'justify', // 对齐方式
|
|
166
|
+ 'image', // 插入图片
|
|
167
|
+ ]
|
|
168
|
+ phoneEditor.create()
|
|
169
|
+
|
|
170
|
+ this.getBuildings({
|
|
171
|
+ pageNum: 1,
|
|
172
|
+ pageSize: 100,
|
|
173
|
+ }).then(() => {
|
|
174
|
+ if ((this.$route.query.id || '') !== '') {
|
|
175
|
+ this.getDetail({id: this.$route.query.id}).then((data) => {
|
|
176
|
+ phoneEditor.txt.html(data.url)
|
|
177
|
+ })
|
|
178
|
+ }
|
|
179
|
+ })
|
|
180
|
+ }
|
|
181
|
+}
|
|
182
|
+</script>
|
|
183
|
+
|
|
184
|
+<style lang="scss">
|
|
185
|
+ .avatar-uploader .el-upload {
|
|
186
|
+ border: 1px dashed #d9d9d9;
|
|
187
|
+ border-radius: 6px;
|
|
188
|
+ cursor: pointer;
|
|
189
|
+ position: relative;
|
|
190
|
+ overflow: hidden;
|
|
191
|
+ }
|
|
192
|
+ .avatar-uploader .el-upload:hover {
|
|
193
|
+ border-color: #409EFF;
|
|
194
|
+ }
|
|
195
|
+ .avatar-uploader-icon {
|
|
196
|
+ font-size: 28px;
|
|
197
|
+ color: #8c939d;
|
|
198
|
+ width: 178px;
|
|
199
|
+ height: 178px;
|
|
200
|
+ line-height: 178px;
|
|
201
|
+ text-align: center;
|
|
202
|
+ }
|
|
203
|
+ .avatar {
|
|
204
|
+ width: 178px;
|
|
205
|
+ height: 178px;
|
|
206
|
+ display: block;
|
|
207
|
+ }
|
|
208
|
+</style>
|