4373acf5
 wesley88
1
|
1
2
3
|
<template>
<div>
<el-form :model="ruleForm" :rules="rulesHetong" ref="heForm" label-width="130px" class="demo-ruleForm">
|
|
d64cd58f
wesley88
上传验收小程序
|
4
5
6
7
8
9
10
11
|
<el-form-item label="商铺名称" prop="shopName">
<el-input v-model="ruleForm.shopName" placeholder="请输入" maxlength="50"></el-input>
</el-form-item>
<el-form-item label="商铺类型" prop="shopType">
<el-select v-model="ruleForm.shopType" placeholder="请选择" style="width: 100%;">
<el-option label="移动铺位" value="1"></el-option>
<el-option label="固定铺位" value="2"></el-option>
</el-select>
|
|
4373acf5
wesley88
1
|
12
|
|
|
d64cd58f
wesley88
上传验收小程序
|
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
|
</el-form-item>
<el-form-item label="测绘面积" prop="surveyingArea">
<el-input v-model="ruleForm.surveyingArea" placeholder="请输入">
<template slot="append">M<sup>2</sup></template>
</el-input>
</el-form-item>
<el-form-item label="产权面积" prop="propertyArea">
<el-input v-model="ruleForm.propertyArea" placeholder="请输入">
<template slot="append">M<sup>2</sup></template>
</el-input>
</el-form-item>
<el-form-item label="实际使用面积" prop="actualUsableArea">
<el-input v-model="ruleForm.actualUsableArea" placeholder="请输入">
<template slot="append">M<sup>2</sup></template>
</el-input>
</el-form-item>
<el-form-item label="所属区域" prop="belongingRegion">
<el-select v-model="ruleForm.belongingRegion" placeholder="请选择" style="width: 100%;">
<el-option label="成华区" value="成华区"></el-option>
<el-option label="武侯区" value="武侯区"></el-option>
<el-option label="锦江区" value="锦江区"></el-option>
<el-option label="青羊区" value="青羊区"></el-option>
<el-option label="金牛区" value="金牛区"></el-option>
<el-option label="双流区" value="双流区"></el-option>
<el-option label="郫都区" value="郫都区"></el-option>
<el-option label="龙泉驿区" value="龙泉驿区"></el-option>
<el-option label="温江区" value="温江区"></el-option>
</el-select>
</el-form-item>
<el-form-item label="归属部门" prop="belongingDepartment">
<el-input v-model="ruleForm.belongingDepartment" placeholder="请输入" maxlength="50">
</el-input>
</el-form-item>
<el-form-item label="负责人" prop="head">
<el-input v-model="ruleForm.head" placeholder="请输入" maxlength="20">
</el-input>
</el-form-item>
<el-form-item label="联系人" prop="contacts">
<el-input v-model="ruleForm.contacts" placeholder="请输入" maxlength="20">
</el-input>
</el-form-item>
<el-form-item label="联系方式" prop="telephone">
<el-input v-model="ruleForm.telephone" placeholder="请输入" maxlength="20">
</el-input>
</el-form-item>
<el-form-item label="详细位置" prop="detailedLocation">
<el-input v-model="ruleForm.detailedLocation" placeholder="请输入" maxlength="100">
</el-input>
</el-form-item>
<el-form-item label="地图标点" prop="mapPunctuation">
<div style="width: 100%;height: 300px;">
<newmap :lat="lat" :lng="lng" @updatecenter="updatecenter"></newmap>
</div>
</el-form-item>
<el-form-item label="商铺描述" prop="shopDescription">
<el-input maxlength="200" show-word-limit rows="4" v-model="ruleForm.shopDescription" placeholder="请输入"
type="textarea" />
</el-form-item>
|
|
0c5d2ce8
wesley88
1
|
71
|
<el-form-item label="建筑图纸" prop="architecturalDrawings">
|
|
d64cd58f
wesley88
上传验收小程序
|
72
73
74
75
76
77
|
<upimg filePath="sp" inputtype="architecturalDrawings" :value="ruleForm.architecturalDrawings"
@changimg="e=>changimg(e,'architecturalDrawings')"></upimg>
</el-form-item>
<el-form-item label="展示主图" prop="displayMainImage">
<upimg filePath="sp" inputtype="displayMainImage" :value="ruleForm.displayMainImage"
@changimg="e=>changimg(e,'displayMainImage')"></upimg>
|
|
0c5d2ce8
wesley88
1
|
78
|
</el-form-item>
|
|
4373acf5
wesley88
1
|
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
|
<el-row :gutter="20">
<el-col :span="12">
<el-form-item>
<div style="margin-top: 20px">
<el-button @click="add()" style="background-color: #3F9B6A;color: #fff;">确定</el-button>
<el-button @click="close()" class="buttonHover"
style="color: #606266;border: 1px solid #DBDBDB;background-color: #fff;">取消</el-button>
</div>
</el-form-item>
</el-col>
</el-row>
</el-form>
</div>
</template>
<script>
import MapMark from "@/components/MapContainer/MapMark";
import upimg from "@/components/ImageUpload/index"
|
|
d64cd58f
wesley88
上传验收小程序
|
97
|
import upfile from "@/components/fujianUpload/fujianList"
|
|
4373acf5
wesley88
1
|
98
99
100
101
102
103
104
105
106
107
|
import {
uploadUrl
} from '@/utils/request'
import {
miniioupload
} from '../../api/commodityLease.js'
import {
gongyuan,
lvdaoduan,
addList,
|
|
d64cd58f
wesley88
上传验收小程序
|
108
|
editList
|
|
4373acf5
wesley88
1
|
109
|
} from '../../api/information.js';
|
|
d64cd58f
wesley88
上传验收小程序
|
110
|
import newmap from "@/components/newmap/index";
|
|
4373acf5
wesley88
1
|
111
112
|
export default {
components: {
|
|
d64cd58f
wesley88
上传验收小程序
|
113
|
upfile,
|
|
4373acf5
wesley88
1
|
114
|
upimg,
|
|
d64cd58f
wesley88
上传验收小程序
|
115
116
|
MapMark,
newmap
|
|
4373acf5
wesley88
1
|
117
118
119
|
},
data() {
return {
|
|
d64cd58f
wesley88
上传验收小程序
|
120
121
|
lat:30.67,
lng:104.06,
|
|
4373acf5
wesley88
1
|
122
123
|
uploadFileUrl: uploadUrl, // 请求地址
ruleForm: {
|
|
d64cd58f
wesley88
上传验收小程序
|
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
|
shopName: '', // 商铺名称
venueNumber: '', // 场地编号
houseNumber: '', // 门牌号
architecturalForm: '', // 建筑形式
actualUsableArea: '', // 实际使用面积
belongingRegion: '', // 所属区域
belongingDepartment: '', // 归属部门
head: '', // 负责人
detailedLocation: '', // 详细位置
mapPunctuation: '', // 地图标点
architecturalDrawings: '', // 建筑图纸
shopDescription: '', // 商铺描述
displayMainImage: '', // 展示主图
otherImageVideos: '', // 其他图片视频
rentalStatus: '', // 租赁状态（0.待租 1.已租）
publishStatus: '', // 发布状态
leaseExpirationDate: '', // 租赁到期时间
createDate: '', // 创建时间
createUser: '', // 创建人
updateDate: '', // 修改时间
updateUser: '', // 修改人
businessNature: '', // 经营性质
telephone: '', // 联系方式
identityCard: '', // 身份证号码
belongingGreenwaySection: '', // 所属绿道段
belongingParkTrail: '', // 所属公园/步道
floorSpace: '', // 建筑面积
contractNumber: '' // 合同编号
|
|
4373acf5
wesley88
1
|
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
|
},
rulesHetong: {
shopName: [{
required: true,
message: '请输入商铺名称',
trigger: 'blur'
}, ],
houseNumber: [{
required: true,
message: '请输入门牌号',
trigger: 'blur'
}, ],
architecturalForm: [{
required: true,
message: '请选择建筑形式',
trigger: 'change'
}],
actualUsableArea: [{
required: true,
message: '请输入实际使用面积',
trigger: 'blur'
}],
belongingRegion: [{
required: true,
message: '请选择所属区域',
trigger: 'change'
}],
head: [{
required: true,
message: '请输入负责人',
trigger: 'blur'
}, ],
detailedLocation: [{
required: true,
message: '请输入详细位置',
trigger: 'blur'
}, ],
// displayMainImage: [{
// required: true,
// message: '请上传主图',
// trigger: 'blur'
// }, ],
// belongingGreenwaySection: [{
// required: true,
// message: '请选择所属绿道段',
// trigger: 'change'
// }],
},
uploadFiles: [],
filesLength: 1,
lvdaoList: [],
gongyuanList: [],
|
|
d64cd58f
wesley88
上传验收小程序
|
204
205
|
parentMessage: {},
edit: true
|
|
4373acf5
wesley88
1
|
206
207
208
209
210
211
212
213
214
215
216
217
|
};
},
props: {
info: {
type: Object,
default: {}
}
},
async created() {
console.error(this.info)
if (this.info.id) {
this.ruleForm = this.info
|
|
d64cd58f
wesley88
上传验收小程序
|
218
|
|
|
4373acf5
wesley88
1
|
219
220
221
222
223
|
}
const lvdao = await lvdaoduan()
this.lvdaoList = lvdao.data
},
methods: {
|
|
d64cd58f
wesley88
上传验收小程序
|
224
225
226
227
228
229
230
|
updatecenter(e) {
console.error('-----------',e)
this.ruleForm.detailedLocation = e.address
},
changimg(e, type) {
this.ruleForm[type] = e
},
|
|
4373acf5
wesley88
1
|
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
|
//获取当前时间
updateCurrentTime() {
const now = new Date();
const year = now.getFullYear();
const month = (now.getMonth() + 1).toString().padStart(2, '0');
const day = now.getDate().toString().padStart(2, '0');
const hours = now.getHours().toString().padStart(2, '0');
const minutes = now.getMinutes().toString().padStart(2, '0');
const seconds = now.getSeconds().toString().padStart(2, '0');
return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
},
//获取地图点击的经纬度
getChildDate(mapData) {
this.mapData = mapData
},
lvdaoSel(vaule) {
this.ruleForm.belongingParkTrail = ''
this.gongyuan(vaule)
},
async gongyuan(value) {
const gongyaun = await gongyuan()
this.gongyuanList = gongyaun.data.filter(item => item.superior == value);
},
add() {
|
|
d64cd58f
wesley88
上传验收小程序
|
257
258
259
260
|
console.log({
...this.ruleForm
})
// return
|
|
4373acf5
wesley88
1
|
261
262
263
264
|
if (this.ruleForm.id) {
this.$refs.heForm.validate((valid) => {
console.log(valid)
if (valid) {
|
|
4373acf5
wesley88
1
|
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
|
this.ruleForm.updateDate = this.updateCurrentTime()
// if (Object.keys(this.mapData).length != 0) {
// this.ruleForm.mapPunctuation = JSON.stringify(this.mapData)
// }
editList(this.ruleForm).then(res => {
if (res.code == 200) {
this.$message({
message: '修改成功',
type: 'success'
})
this.$emit('removeonaction', '1')
} else {
this.$message({
message: res.msg,
type: 'error'
})
}
})
} else {
this.$message({
message: '请填写完整信息',
type: 'error'
})
return false;
}
})
} else {
this.$refs.heForm.validate((valid) => {
console.log(valid)
if (valid) {
|
|
4373acf5
wesley88
1
|
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
|
this.ruleForm.createDate = this.updateCurrentTime()
this.ruleForm.mapPunctuation = JSON.stringify(this.mapData)
this.ruleForm.rentalStatus = 0
this.ruleForm.publishStatus = 0
addList(this.ruleForm).then(res => {
if (res.code == 200) {
this.$message({
message: '添加成功',
type: 'success'
})
this.$emit('removeonaction', '1')
} else {
this.$message({
message: res.msg,
type: 'error'
})
}
})
} else {
this.$message({
message: '请填写完整信息',
type: 'error'
})
return false;
}
})
}
},
close() {
this.$emit('removeonaction', '1')
},
|
|
0c5d2ce8
wesley88
1
|
329
330
|
hefuRemove(e) {
// this.ruleForm[e] = ''
|
|
4373acf5
wesley88
1
|
331
|
},
|
|
0c5d2ce8
wesley88
1
|
332
|
hefuSuccess(response, e) {
|
|
4373acf5
wesley88
1
|
333
|
console.error(response)
|
|
0c5d2ce8
wesley88
1
|
334
335
|
console.error(e)
this.ruleForm[e] = ''
|
|
4373acf5
wesley88
1
|
336
337
|
let fd = new FormData()
fd.append('file', response.raw)
|
|
0c5d2ce8
wesley88
1
|
338
|
fd.append('filePath', 'sp')
|
|
4373acf5
wesley88
1
|
339
340
|
miniioupload(fd).then(res => {
console.error(res)
|
|
0c5d2ce8
wesley88
1
|
341
|
this.ruleForm[e] = res.data
|
|
4373acf5
wesley88
1
|
342
|
})
|
|
0c5d2ce8
wesley88
1
|
343
|
}
|
|
4373acf5
wesley88
1
|
344
345
346
347
348
349
|
},
};
</script>
<style lang="scss">
|
|
4373acf5
wesley88
1
|
350
351
352
353
354
355
356
357
358
359
|
.el-dialog__header {
background-color: #F2F3F5;
text-align: left;
}
.el-dialog__title {
line-height: 30px;
font-size: 15px;
color: #303133;
}
|
|
0c5d2ce8
wesley88
1
|
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
|
.avatar-uploader .el-upload {
border: 1px dashed #3F9B6A;
border-radius: 6px;
cursor: pointer;
position: relative;
overflow: hidden;
}
.avatar-uploader .el-upload:hover {
border-color: #3F9B6A;
}
.avatar-uploader-icon {
font-size: 28px;
color: #8c939d;
width: 178px;
height: 178px;
line-height: 178px;
text-align: center;
}
.avatar {
width: 178px;
height: 178px;
display: block;
}
|
|
4373acf5
wesley88
1
|
387
|
</style>
|
