|
@@ -1,36 +1,24 @@
|
1
|
1
|
<template>
|
2
|
2
|
<div class="app-container">
|
3
|
3
|
<div class="filter-container">
|
4
|
|
- <el-input v-model="listQuery.communityId" placeholder="社区编号" style="width: 200px;" class="filter-item" @keyup.enter.native="handleFilter"/>
|
5
|
|
- <el-input v-model="listQuery.communityName" placeholder="社区名称" style="width: 200px;" class="filter-item" @keyup.enter.native="handleFilter"/>
|
|
4
|
+ <el-input v-model="listQuery.communityId" placeholder="社区编号" style="width: 200px;" class="filter-item" @keyup.enter.native="handleFilter" />
|
|
5
|
+ <el-input v-model="listQuery.communityName" placeholder="社区名称" style="width: 200px;" class="filter-item" @keyup.enter.native="handleFilter" />
|
6
|
6
|
<el-select v-model="listQuery.provinceId" placeholder="省" style="width: 90px" class="filter-item" @change="getCityList">
|
7
|
|
- <el-option v-for="item in provinceList" :key="item.id" :label="item.province" :value="item.id"/>
|
|
7
|
+ <el-option v-for="item in provinceList" :key="item.id" :label="item.province" :value="item.id" />
|
8
|
8
|
</el-select>
|
9
|
9
|
<el-select v-model="listQuery.cityId" placeholder="市" class="filter-item" style="width: 130px" @change="getDistrictList">
|
10
|
|
- <el-option v-for="item in cityList" :key="item.id" :label="item.city" :value="item.id"/>
|
|
10
|
+ <el-option v-for="item in cityList" :key="item.id" :label="item.city" :value="item.id" />
|
11
|
11
|
</el-select>
|
12
|
12
|
<el-select v-model="listQuery.districtId" placeholder="区县乡" class="filter-item" style="width: 130px">
|
13
|
|
- <el-option v-for="item in districtList" :key="item.id" :label="item.district" :value="item.id"/>
|
|
13
|
+ <el-option v-for="item in districtList" :key="item.id" :label="item.district" :value="item.id" />
|
14
|
14
|
</el-select>
|
15
|
15
|
<el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">查询</el-button>
|
16
|
16
|
<el-button class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-circle-plus" @click="handleCreate">添加</el-button>
|
17
|
17
|
<el-button v-waves class="filter-item" type="info" icon="el-icon-warning" @click="clearListQuery">清空</el-button>
|
18
|
18
|
</div>
|
19
|
19
|
|
20
|
|
- <el-table
|
21
|
|
- v-loading="listLoading"
|
22
|
|
- :key="tableKey"
|
23
|
|
- :data="list"
|
24
|
|
- border
|
25
|
|
- fit
|
26
|
|
- highlight-current-row
|
27
|
|
- style="width: 100%; margin-top: 20px;"
|
28
|
|
- @sort-change="sortChange">
|
29
|
|
- <el-table-column
|
30
|
|
- label="序号"
|
31
|
|
- align="center"
|
32
|
|
- type="index"
|
33
|
|
- width="50"/>
|
|
20
|
+ <el-table v-loading="listLoading" :key="tableKey" :data="list" border fit highlight-current-row style="width: 100%; margin-top: 20px;" @sort-change="sortChange">
|
|
21
|
+ <el-table-column label="序号" align="center" type="index" width="50" />
|
34
|
22
|
<el-table-column label="社区编号" align="center">
|
35
|
23
|
<template slot-scope="scope">
|
36
|
24
|
<span>{{ scope.row.id }}</span>
|
|
@@ -94,57 +82,42 @@
|
94
|
82
|
</el-table>
|
95
|
83
|
|
96
|
84
|
<!-- <pagination v-show="total>0" :total="total" :current-page.sync="listQuery.pageNum" :limit.sync="listQuery.pageSize" :page-sizes="[5, 10, 20, 30]" @pagination="getList" /> -->
|
97
|
|
- <el-pagination
|
98
|
|
- :total="total"
|
99
|
|
- :current-page="listQuery.pageNum"
|
100
|
|
- :page-sizes="[5, 10, 20, 30]"
|
101
|
|
- :page-size="listQuery.pageSize"
|
102
|
|
- layout="total, sizes, prev, pager, next, jumper"
|
103
|
|
- @size-change="handleSizeChange"
|
104
|
|
- @current-change="handleCurrentChange"/>
|
|
85
|
+ <el-pagination :total="total" :current-page="listQuery.pageNum" :page-sizes="[5, 10, 20, 30]" :page-size="listQuery.pageSize" layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
|
105
|
86
|
|
106
|
87
|
<el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible">
|
107
|
88
|
<el-form ref="dataForm" :rules="rules" :model="detail" label-position="left" label-width="100px" style="margin-left:50px;">
|
108
|
89
|
<el-form-item label="社区名称*">
|
109
|
|
- <el-input v-model="detail.communityName"/>
|
|
90
|
+ <el-input v-model="detail.communityName" />
|
110
|
91
|
</el-form-item>
|
111
|
92
|
<el-form-item label="社区别名">
|
112
|
|
- <el-input v-model="detail.communityAlias"/>
|
|
93
|
+ <el-input v-model="detail.communityAlias" />
|
113
|
94
|
</el-form-item>
|
114
|
95
|
<el-form-item label="所在区县*">
|
115
|
|
- <el-select v-model="detail.provinceId" placeholder="省" style="width: 90px" class="filter-item" @change="getEditCityList">
|
116
|
|
- <el-option v-for="item in provinceList" :key="item.id" :label="item.province" :value="item.id"/>
|
|
96
|
+ <el-select v-model="detail.provinceId" placeholder="省" style="width: 90px" class="filter-item" @change="getEditCityList" @blur="changeCity()">
|
|
97
|
+ <el-option v-for="item in provinceList" :key="item.id" :label="item.province" :value="item.id" />
|
117
|
98
|
</el-select>
|
118
|
|
- <el-select v-model="detail.cityId" placeholder="市" class="filter-item" style="width: 130px" @change="getEditDistrictList">
|
119
|
|
- <el-option v-for="item in editCityList" :key="item.id" :label="item.city" :value="item.id"/>
|
|
99
|
+ <el-select v-model="detail.cityId" placeholder="市" class="filter-item" style="width: 130px" @change="getEditDistrictList" @blur="changeDistrictList()">
|
|
100
|
+ <el-option v-for="item in editCityList" :key="item.id" :label="item.city" :value="item.id" />
|
120
|
101
|
</el-select>
|
121
|
102
|
<el-select v-model="detail.districtId" placeholder="区县乡" class="filter-item" style="width: 130px">
|
122
|
|
- <el-option v-for="item in editDistrictList" :key="item.id" :label="item.district" :value="item.id"/>
|
|
103
|
+ <el-option v-for="item in editDistrictList" :key="item.id" :label="item.district" :value="item.id" />
|
123
|
104
|
</el-select>
|
124
|
105
|
</el-form-item>
|
125
|
106
|
<el-form-item label="高德坐标*">
|
126
|
|
- <el-input
|
127
|
|
- v-model="detail.longitude"
|
128
|
|
- placeholder="经度"/>
|
129
|
|
- <el-input
|
130
|
|
- v-model="detail.latitude"
|
131
|
|
- placeholder="纬度"/>
|
|
107
|
+ <el-input v-model="detail.longitude" placeholder="经度" />
|
|
108
|
+ <el-input v-model="detail.latitude" placeholder="纬度" />
|
132
|
109
|
</el-form-item>
|
133
|
110
|
<!-- <el-amap-search-box class="search-box" :search-option="searchOption" :on-search-result="onSearchResult"></el-amap-search-box> -->
|
134
|
111
|
<div style="width:100%;height:200px;">
|
135
|
|
- <el-amap ref="map" :events="events" :center="mapCenter" :zoom="12" class="amap-demo" vid="amapDemo" >
|
|
112
|
+ <el-amap ref="map" :events="events" :center="mapCenter" :zoom="12" class="amap-demo" vid="amapDemo">
|
136
|
113
|
<el-amap-marker v-for="(item,index) in markers" :key="index" :position="item" />
|
137
|
114
|
</el-amap>
|
138
|
115
|
</div>
|
139
|
116
|
<el-form-item label="管理员姓名*">
|
140
|
|
- <el-input
|
141
|
|
- v-model="detail.userName"
|
142
|
|
- placeholder="建议先填写运营人员姓名"/>
|
|
117
|
+ <el-input v-model="detail.userName" placeholder="建议先填写运营人员姓名" />
|
143
|
118
|
</el-form-item>
|
144
|
119
|
<el-form-item label="管理员账号*">
|
145
|
|
- <el-input
|
146
|
|
- v-model="detail.loginName"
|
147
|
|
- placeholder="建议先填写运营人员手机号"/>
|
|
120
|
+ <el-input v-model="detail.loginName" placeholder="建议先填写运营人员手机号" />
|
148
|
121
|
</el-form-item>
|
149
|
122
|
</el-form>
|
150
|
123
|
<div slot="footer" class="dialog-footer">
|
|
@@ -170,7 +143,7 @@
|
170
|
143
|
</el-form-item>
|
171
|
144
|
<!-- <el-amap-search-box class="search-box" :search-option="searchOption" :on-search-result="onSearchResult"></el-amap-search-box> -->
|
172
|
145
|
<div style="width:100%;height:200px;">
|
173
|
|
- <el-amap ref="map" :events="events" :center="mapCenter" :zoom="12" class="amap-demo" vid="amapDemo" >
|
|
146
|
+ <el-amap ref="map" :events="events" :center="mapCenter" :zoom="12" class="amap-demo" vid="amapDemo">
|
174
|
147
|
<el-amap-marker v-for="(item,index) in markers" :key="index" :position="item" />
|
175
|
148
|
</el-amap>
|
176
|
149
|
</div>
|
|
@@ -189,8 +162,8 @@
|
189
|
162
|
|
190
|
163
|
<el-dialog :visible.sync="dialogPvVisible" title="Reading statistics">
|
191
|
164
|
<el-table :data="pvData" border fit highlight-current-row style="width: 100%">
|
192
|
|
- <el-table-column prop="key" label="Channel"/>
|
193
|
|
- <el-table-column prop="pv" label="Pv"/>
|
|
165
|
+ <el-table-column prop="key" label="Channel" />
|
|
166
|
+ <el-table-column prop="pv" label="Pv" />
|
194
|
167
|
</el-table>
|
195
|
168
|
<span slot="footer" class="dialog-footer">
|
196
|
169
|
<el-button type="primary" @click="dialogPvVisible = false">确 定</el-button>
|
|
@@ -201,54 +174,54 @@
|
201
|
174
|
</template>
|
202
|
175
|
|
203
|
176
|
<script>
|
204
|
|
-import { mapState, mapActions, mapMutations } from 'vuex'
|
205
|
|
-import waves from '@/directive/waves' // Waves directive
|
206
|
|
-import { parseTime } from '@/utils'
|
207
|
|
-import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
|
|
177
|
+import { mapState, mapActions, mapMutations } from "vuex";
|
|
178
|
+import waves from "@/directive/waves"; // Waves directive
|
|
179
|
+import { parseTime } from "@/utils";
|
|
180
|
+import Pagination from "@/components/Pagination"; // Secondary package based on el-pagination
|
208
|
181
|
|
209
|
182
|
const calendarTypeOptions = [
|
210
|
|
- { key: 'CN', display_name: 'China' },
|
211
|
|
- { key: 'US', display_name: 'USA' },
|
212
|
|
- { key: 'JP', display_name: 'Japan' },
|
213
|
|
- { key: 'EU', display_name: 'Eurozone' }
|
214
|
|
-]
|
|
183
|
+ { key: "CN", display_name: "China" },
|
|
184
|
+ { key: "US", display_name: "USA" },
|
|
185
|
+ { key: "JP", display_name: "Japan" },
|
|
186
|
+ { key: "EU", display_name: "Eurozone" }
|
|
187
|
+];
|
215
|
188
|
|
216
|
189
|
// arr to obj ,such as { CN : "China", US : "USA" }
|
217
|
190
|
const calendarTypeKeyValue = calendarTypeOptions.reduce((acc, cur) => {
|
218
|
|
- acc[cur.key] = cur.display_name
|
219
|
|
- return acc
|
220
|
|
-}, {})
|
|
191
|
+ acc[cur.key] = cur.display_name;
|
|
192
|
+ return acc;
|
|
193
|
+}, {});
|
221
|
194
|
|
222
|
195
|
export default {
|
223
|
|
- name: 'ComplexTable',
|
|
196
|
+ name: "ComplexTable",
|
224
|
197
|
components: { Pagination },
|
225
|
198
|
directives: { waves },
|
226
|
199
|
filters: {
|
227
|
200
|
statusFilter(status) {
|
228
|
201
|
const statusMap = {
|
229
|
|
- published: 'success',
|
230
|
|
- draft: 'info',
|
231
|
|
- deleted: 'danger'
|
232
|
|
- }
|
233
|
|
- return statusMap[status]
|
|
202
|
+ published: "success",
|
|
203
|
+ draft: "info",
|
|
204
|
+ deleted: "danger"
|
|
205
|
+ };
|
|
206
|
+ return statusMap[status];
|
234
|
207
|
},
|
235
|
208
|
typeFilter(type) {
|
236
|
|
- return calendarTypeKeyValue[type]
|
|
209
|
+ return calendarTypeKeyValue[type];
|
237
|
210
|
}
|
238
|
211
|
},
|
239
|
212
|
data() {
|
240
|
|
- var _self = this
|
|
213
|
+ var _self = this;
|
241
|
214
|
return {
|
242
|
215
|
events: {
|
243
|
|
- click: (e) => {
|
|
216
|
+ click: e => {
|
244
|
217
|
// _self.postData.Coordinate = e.lnglat.lat + ',' + e.lnglat.lng
|
245
|
|
- _self.detail.longitude = e.lnglat.lng
|
246
|
|
- _self.detail.latitude = e.lnglat.lat
|
|
218
|
+ _self.detail.longitude = e.lnglat.lng;
|
|
219
|
+ _self.detail.latitude = e.lnglat.lat;
|
247
|
220
|
}
|
248
|
221
|
},
|
249
|
222
|
markers: [],
|
250
|
223
|
searchOption: {
|
251
|
|
- city: '南京',
|
|
224
|
+ city: "南京",
|
252
|
225
|
citylimit: false
|
253
|
226
|
},
|
254
|
227
|
mapCenter: [118.789509, 32.019989],
|
|
@@ -265,28 +238,42 @@ export default {
|
265
|
238
|
},
|
266
|
239
|
importanceOptions: [1, 2, 3],
|
267
|
240
|
calendarTypeOptions,
|
268
|
|
- sortOptions: [{ label: 'ID Ascending', key: '+id' }, { label: 'ID Descending', key: '-id' }],
|
269
|
|
- statusOptions: ['published', 'draft', 'deleted'],
|
|
241
|
+ sortOptions: [
|
|
242
|
+ { label: "ID Ascending", key: "+id" },
|
|
243
|
+ { label: "ID Descending", key: "-id" }
|
|
244
|
+ ],
|
|
245
|
+ statusOptions: ["published", "draft", "deleted"],
|
270
|
246
|
showReviewer: false,
|
271
|
247
|
dialogFormVisible: false,
|
272
|
248
|
dialogLookFormVisible: false,
|
273
|
|
- dialogStatus: '',
|
|
249
|
+ dialogStatus: "",
|
274
|
250
|
textMap: {
|
275
|
|
- update: '编辑',
|
276
|
|
- create: '新增'
|
|
251
|
+ update: "编辑",
|
|
252
|
+ create: "新增"
|
277
|
253
|
},
|
278
|
254
|
dialogPvVisible: false,
|
279
|
255
|
pvData: [],
|
280
|
256
|
rules: {
|
281
|
|
- type: [{ required: true, message: 'type is required', trigger: 'change' }],
|
282
|
|
- createData: [{ type: 'date', required: true, message: 'createData is required', trigger: 'change' }],
|
283
|
|
- title: [{ required: true, message: 'title is required', trigger: 'blur' }]
|
|
257
|
+ type: [
|
|
258
|
+ { required: true, message: "type is required", trigger: "change" }
|
|
259
|
+ ],
|
|
260
|
+ createData: [
|
|
261
|
+ {
|
|
262
|
+ type: "date",
|
|
263
|
+ required: true,
|
|
264
|
+ message: "createData is required",
|
|
265
|
+ trigger: "change"
|
|
266
|
+ }
|
|
267
|
+ ],
|
|
268
|
+ title: [
|
|
269
|
+ { required: true, message: "title is required", trigger: "blur" }
|
|
270
|
+ ]
|
284
|
271
|
},
|
285
|
272
|
downloadLoading: false
|
286
|
|
- }
|
|
273
|
+ };
|
287
|
274
|
},
|
288
|
275
|
computed: {
|
289
|
|
- ...mapState('community', {
|
|
276
|
+ ...mapState("community", {
|
290
|
277
|
list: s => s.list,
|
291
|
278
|
detail: s => s.detail,
|
292
|
279
|
total: s => s.total,
|
|
@@ -297,269 +284,325 @@ export default {
|
297
|
284
|
editDistrictList: s => s.editDistrictList
|
298
|
285
|
})
|
299
|
286
|
},
|
|
287
|
+ // watch: {
|
|
288
|
+ // detail: {
|
|
289
|
+ // handler(New, Old) {
|
|
290
|
+ // if (New.provinceId != Old.provinceId) {
|
|
291
|
+ // this.detail.cityId = undefined;
|
|
292
|
+ // this.detail.districtId = undefined;
|
|
293
|
+ // }
|
|
294
|
+ // if (New.cityId != Old.cityId) {
|
|
295
|
+ // this.detail.districtId = undefined;
|
|
296
|
+ // }
|
|
297
|
+ // },
|
|
298
|
+ // deep: true
|
|
299
|
+ // }
|
|
300
|
+ // },
|
300
|
301
|
created() {
|
301
|
|
- this.getList()
|
302
|
|
- this.getProvinceList()
|
|
302
|
+ this.getList();
|
|
303
|
+ this.getProvinceList();
|
303
|
304
|
},
|
304
|
305
|
methods: {
|
305
|
|
- ...mapMutations('community', {
|
306
|
|
- resetDetail: 'resetDetail',
|
307
|
|
- setDetail: 'setDetail'
|
|
306
|
+ ...mapMutations("community", {
|
|
307
|
+ resetDetail: "resetDetail",
|
|
308
|
+ setDetail: "setDetail"
|
308
|
309
|
}),
|
309
|
|
- ...mapActions('community', [
|
310
|
|
- 'FetchCommunityList',
|
311
|
|
- 'CreateCommunity',
|
312
|
|
- 'UpdateCommunity',
|
313
|
|
- 'FetchProvinceList',
|
314
|
|
- 'FetchCityList',
|
315
|
|
- 'FetchDistrictList',
|
316
|
|
- 'FetchEditCityList',
|
317
|
|
- 'FetchEditDistrictList'
|
|
310
|
+ ...mapActions("community", [
|
|
311
|
+ "FetchCommunityList",
|
|
312
|
+ "CreateCommunity",
|
|
313
|
+ "UpdateCommunity",
|
|
314
|
+ "FetchProvinceList",
|
|
315
|
+ "FetchCityList",
|
|
316
|
+ "FetchDistrictList",
|
|
317
|
+ "FetchEditCityList",
|
|
318
|
+ "FetchEditDistrictList"
|
318
|
319
|
]),
|
319
|
|
- onSearchResult(pois) { // 搜索地图
|
320
|
|
- let latSum = 0
|
321
|
|
- let lngSum = 0
|
|
320
|
+ onSearchResult(pois) {
|
|
321
|
+ // 搜索地图
|
|
322
|
+ let latSum = 0;
|
|
323
|
+ let lngSum = 0;
|
322
|
324
|
if (pois.length > 0) {
|
323
|
325
|
pois.forEach(poi => {
|
324
|
|
- const { lng, lat } = poi
|
325
|
|
- lngSum += lng
|
326
|
|
- latSum += lat
|
327
|
|
- this.markers.push([poi.lng, poi.lat])
|
328
|
|
- })
|
|
326
|
+ const { lng, lat } = poi;
|
|
327
|
+ lngSum += lng;
|
|
328
|
+ latSum += lat;
|
|
329
|
+ this.markers.push([poi.lng, poi.lat]);
|
|
330
|
+ });
|
329
|
331
|
const center = {
|
330
|
332
|
lng: lngSum / pois.length,
|
331
|
333
|
lat: latSum / pois.length
|
332
|
|
- }
|
333
|
|
- this.mapCenter = [center.lng, center.lat]
|
|
334
|
+ };
|
|
335
|
+ this.mapCenter = [center.lng, center.lat];
|
334
|
336
|
}
|
335
|
337
|
},
|
336
|
338
|
setCurrent(item) {
|
337
|
|
- this.setDetail({ ...item })
|
|
339
|
+ this.setDetail({ ...item });
|
338
|
340
|
},
|
339
|
341
|
getList() {
|
340
|
|
- this.listLoading = true
|
341
|
|
- this.FetchCommunityList(this.listQuery).then(() => {
|
342
|
|
- this.listLoading = false
|
343
|
|
- }).catch(() => {
|
344
|
|
- this.loading = false
|
345
|
|
- console.log('get list error')
|
346
|
|
- })
|
|
342
|
+ this.listLoading = true;
|
|
343
|
+ this.FetchCommunityList(this.listQuery)
|
|
344
|
+ .then(() => {
|
|
345
|
+ this.listLoading = false;
|
|
346
|
+ })
|
|
347
|
+ .catch(() => {
|
|
348
|
+ this.loading = false;
|
|
349
|
+ console.log("get list error");
|
|
350
|
+ });
|
347
|
351
|
},
|
348
|
352
|
getProvinceList() {
|
349
|
|
- this.FetchProvinceList().then(() => {
|
350
|
|
- }).catch(() => {
|
351
|
|
- console.log('get list error')
|
352
|
|
- })
|
|
353
|
+ this.FetchProvinceList()
|
|
354
|
+ .then(() => {})
|
|
355
|
+ .catch(() => {
|
|
356
|
+ console.log("get list error");
|
|
357
|
+ });
|
353
|
358
|
},
|
354
|
359
|
getCityList() {
|
355
|
|
- this.listQuery.cityId = undefined
|
356
|
|
- this.listQuery.districtId = undefined
|
357
|
|
- this.FetchCityList(this.listQuery.provinceId).then(() => {
|
358
|
|
- }).catch(() => {
|
359
|
|
- console.log('get list error')
|
360
|
|
- })
|
|
360
|
+ this.listQuery.cityId = undefined;
|
|
361
|
+ this.listQuery.districtId = undefined;
|
|
362
|
+ this.FetchCityList(this.listQuery.provinceId)
|
|
363
|
+ .then(() => {})
|
|
364
|
+ .catch(() => {
|
|
365
|
+ console.log("get list error");
|
|
366
|
+ });
|
361
|
367
|
},
|
362
|
368
|
getDistrictList() {
|
363
|
|
- this.listQuery.districtId = undefined
|
364
|
|
- this.FetchDistrictList(this.listQuery.cityId).then(() => {
|
365
|
|
- }).catch(() => {
|
366
|
|
- console.log('get list error')
|
367
|
|
- })
|
|
369
|
+ this.listQuery.districtId = undefined;
|
|
370
|
+ this.FetchDistrictList(this.listQuery.cityId)
|
|
371
|
+ .then(() => {})
|
|
372
|
+ .catch(() => {
|
|
373
|
+ console.log("get list error");
|
|
374
|
+ });
|
368
|
375
|
},
|
369
|
376
|
getEditCityList() {
|
370
|
|
- this.FetchEditCityList(this.detail.provinceId).then(() => {
|
371
|
|
- }).catch(() => {
|
372
|
|
- console.log('get list error')
|
373
|
|
- })
|
|
377
|
+ this.FetchEditCityList(this.detail.provinceId)
|
|
378
|
+ .then(() => {})
|
|
379
|
+ .catch(() => {
|
|
380
|
+ console.log("get list error");
|
|
381
|
+ });
|
|
382
|
+ },
|
|
383
|
+ changeCity() {
|
|
384
|
+ console.log(1);
|
|
385
|
+ // this.detail.cityId = undefined;
|
|
386
|
+ // this.detail.districtId = undefined;
|
|
387
|
+ this.$set(this.detail,"cityId", undefined)
|
|
388
|
+ this.$set(this.detail,"districtId", undefined)
|
|
389
|
+ this.setDetail(this.detail);
|
|
390
|
+ },
|
|
391
|
+ changeDistrictList() {
|
|
392
|
+ console.log(2);
|
|
393
|
+ // this.detail.districtId = undefined;
|
|
394
|
+ this.$set(this.detail,"districtId", undefined)
|
|
395
|
+ this.setDetail(this.detail);
|
374
|
396
|
},
|
375
|
397
|
getEditDistrictList() {
|
376
|
|
- this.FetchEditDistrictList(this.detail.cityId).then(() => {
|
377
|
|
- }).catch(() => {
|
378
|
|
- console.log('get list error')
|
379
|
|
- })
|
|
398
|
+ this.FetchEditDistrictList(this.detail.cityId)
|
|
399
|
+ .then(() => {})
|
|
400
|
+ .catch(() => {
|
|
401
|
+ console.log("get list error");
|
|
402
|
+ });
|
380
|
403
|
},
|
381
|
404
|
clearListQuery() {
|
382
|
|
- this.listQuery.pageNum = 1
|
383
|
|
- this.listQuery.pageSize = 20
|
384
|
|
- this.listQuery.communityId = undefined
|
385
|
|
- this.listQuery.communityName = undefined
|
386
|
|
- this.listQuery.provinceId = undefined
|
387
|
|
- this.listQuery.cityId = undefined
|
388
|
|
- this.listQuery.districtId = undefined
|
389
|
|
- this.getList()
|
|
405
|
+ this.listQuery.pageNum = 1;
|
|
406
|
+ this.listQuery.pageSize = 20;
|
|
407
|
+ this.listQuery.communityId = undefined;
|
|
408
|
+ this.listQuery.communityName = undefined;
|
|
409
|
+ this.listQuery.provinceId = undefined;
|
|
410
|
+ this.listQuery.cityId = undefined;
|
|
411
|
+ this.listQuery.districtId = undefined;
|
|
412
|
+ this.getList();
|
390
|
413
|
},
|
391
|
414
|
handleFilter() {
|
392
|
|
- this.listQuery.pageNum = 1
|
393
|
|
- this.getList()
|
|
415
|
+ this.listQuery.pageNum = 1;
|
|
416
|
+ this.getList();
|
394
|
417
|
},
|
395
|
418
|
handleModifyStatus(row, status) {
|
396
|
419
|
this.$message({
|
397
|
|
- message: '操作成功',
|
398
|
|
- type: 'success'
|
399
|
|
- })
|
400
|
|
- row.status = status
|
|
420
|
+ message: "操作成功",
|
|
421
|
+ type: "success"
|
|
422
|
+ });
|
|
423
|
+ row.status = status;
|
401
|
424
|
},
|
402
|
425
|
sortChange(data) {
|
403
|
|
- const { prop, order } = data
|
404
|
|
- if (prop === 'id') {
|
405
|
|
- this.sortByID(order)
|
|
426
|
+ const { prop, order } = data;
|
|
427
|
+ if (prop === "id") {
|
|
428
|
+ this.sortByID(order);
|
406
|
429
|
}
|
407
|
430
|
},
|
408
|
431
|
handleSizeChange(val) {
|
409
|
432
|
// console.log(`每页 ${val} 条`);
|
410
|
|
- this.listQuery.pageSize = val
|
411
|
|
- this.getList()
|
|
433
|
+ this.listQuery.pageSize = val;
|
|
434
|
+ this.getList();
|
412
|
435
|
},
|
413
|
436
|
handleCurrentChange(val) {
|
414
|
437
|
// console.log(`当前页: ${val}`);
|
415
|
|
- this.listQuery.pageNum = val
|
416
|
|
- this.getList()
|
|
438
|
+ this.listQuery.pageNum = val;
|
|
439
|
+ this.getList();
|
417
|
440
|
},
|
418
|
441
|
sortByID(order) {
|
419
|
|
- if (order === 'ascending') {
|
420
|
|
- this.listQuery.sort = '+id'
|
|
442
|
+ if (order === "ascending") {
|
|
443
|
+ this.listQuery.sort = "+id";
|
421
|
444
|
} else {
|
422
|
|
- this.listQuery.sort = '-id'
|
|
445
|
+ this.listQuery.sort = "-id";
|
423
|
446
|
}
|
424
|
|
- this.handleFilter()
|
|
447
|
+ this.handleFilter();
|
425
|
448
|
},
|
426
|
449
|
createData() {
|
427
|
|
- this.$refs['dataForm'].validate((valid) => {
|
|
450
|
+ this.$refs["dataForm"].validate(valid => {
|
428
|
451
|
if (valid) {
|
429
|
|
- this.CreateCommunity(this.detail).then((res) => {
|
430
|
|
- this.dialogFormVisible = false
|
431
|
|
- if (res.code === '0') {
|
|
452
|
+ this.CreateCommunity(this.detail).then(res => {
|
|
453
|
+ this.dialogFormVisible = false;
|
|
454
|
+ if (res.code === 0) {
|
432
|
455
|
this.$message({
|
433
|
|
- message: '创建成功',
|
434
|
|
- type: 'success'
|
435
|
|
- })
|
436
|
|
- this.getList()
|
437
|
|
- } else if (res.code === '1') {
|
|
456
|
+ message: "创建成功",
|
|
457
|
+ type: "success"
|
|
458
|
+ });
|
|
459
|
+ this.getList();
|
|
460
|
+ } else if (res.code === 0) {
|
438
|
461
|
this.$message({
|
439
|
462
|
message: res.message,
|
440
|
|
- type: 'warning'
|
441
|
|
- })
|
|
463
|
+ type: "warning"
|
|
464
|
+ });
|
442
|
465
|
}
|
443
|
|
- })
|
|
466
|
+ });
|
444
|
467
|
}
|
445
|
|
- })
|
|
468
|
+ });
|
446
|
469
|
},
|
447
|
470
|
handleUpdate(row) {
|
448
|
|
- this.setCurrent(row)
|
449
|
|
- this.dialogStatus = 'update'
|
450
|
|
- this.dialogFormVisible = true
|
|
471
|
+ this.setCurrent(row);
|
|
472
|
+ this.dialogStatus = "update";
|
|
473
|
+ this.dialogFormVisible = true;
|
451
|
474
|
this.$nextTick(() => {
|
452
|
|
- this.$refs['dataForm'].clearValidate()
|
453
|
|
- })
|
454
|
|
- this.getEditCityList()
|
455
|
|
- this.getEditDistrictList()
|
|
475
|
+ this.$refs["dataForm"].clearValidate();
|
|
476
|
+ });
|
|
477
|
+ this.getEditCityList();
|
|
478
|
+ this.getEditDistrictList();
|
456
|
479
|
},
|
457
|
480
|
handleLook(row) {
|
458
|
|
- this.setCurrent(row)
|
459
|
|
- this.dialogLookFormVisible = true
|
|
481
|
+ this.setCurrent(row);
|
|
482
|
+ this.dialogLookFormVisible = true;
|
460
|
483
|
this.$nextTick(() => {
|
461
|
|
- this.$refs['dataForm'].clearValidate()
|
462
|
|
- })
|
463
|
|
- this.getEditCityList()
|
464
|
|
- this.getEditDistrictList()
|
|
484
|
+ this.$refs["dataForm"].clearValidate();
|
|
485
|
+ });
|
|
486
|
+ this.getEditCityList();
|
|
487
|
+ this.getEditDistrictList();
|
465
|
488
|
},
|
466
|
489
|
handleCreate() {
|
467
|
|
- this.resetDetail()
|
468
|
|
- this.dialogStatus = 'create'
|
469
|
|
- this.dialogFormVisible = true
|
|
490
|
+ this.resetDetail();
|
|
491
|
+ this.dialogStatus = "create";
|
|
492
|
+ this.dialogFormVisible = true;
|
470
|
493
|
this.$nextTick(() => {
|
471
|
|
- this.$refs['dataForm'].clearValidate()
|
472
|
|
- })
|
|
494
|
+ this.$refs["dataForm"].clearValidate();
|
|
495
|
+ });
|
473
|
496
|
},
|
474
|
497
|
updateData() {
|
475
|
|
- this.$refs['dataForm'].validate((valid) => {
|
|
498
|
+ this.$refs["dataForm"].validate(valid => {
|
476
|
499
|
if (valid) {
|
477
|
|
- this.UpdateCommunity(this.detail).then((res) => {
|
478
|
|
- this.dialogFormVisible = false
|
479
|
|
- if (res.code === '0') {
|
|
500
|
+ this.UpdateCommunity(this.detail).then(res => {
|
|
501
|
+ this.dialogFormVisible = false;
|
|
502
|
+ if (res.code === 0) {
|
480
|
503
|
this.$message({
|
481
|
|
- message: '更新成功',
|
482
|
|
- type: 'success'
|
483
|
|
- })
|
484
|
|
- this.getList()
|
485
|
|
- } else if (res.code === '1') {
|
486
|
|
- this.$message.error(res.message)
|
|
504
|
+ message: "更新成功",
|
|
505
|
+ type: "success"
|
|
506
|
+ });
|
|
507
|
+ this.getList();
|
|
508
|
+ } else if (res.code === 0) {
|
|
509
|
+ this.$message.error(res.message);
|
487
|
510
|
}
|
488
|
|
- })
|
|
511
|
+ });
|
489
|
512
|
}
|
490
|
|
- })
|
|
513
|
+ });
|
491
|
514
|
},
|
492
|
515
|
handleDelete(row) {
|
493
|
516
|
this.$notify({
|
494
|
|
- title: '成功',
|
495
|
|
- message: '删除成功',
|
496
|
|
- type: 'success',
|
|
517
|
+ title: "成功",
|
|
518
|
+ message: "删除成功",
|
|
519
|
+ type: "success",
|
497
|
520
|
duration: 2000
|
498
|
|
- })
|
499
|
|
- const index = this.list.indexOf(row)
|
500
|
|
- this.list.splice(index, 1)
|
|
521
|
+ });
|
|
522
|
+ const index = this.list.indexOf(row);
|
|
523
|
+ this.list.splice(index, 1);
|
501
|
524
|
},
|
502
|
525
|
handleDownload() {
|
503
|
|
- this.downloadLoading = true
|
504
|
|
- import('@/vendor/Export2Excel').then(excel => {
|
505
|
|
- const tHeader = ['timestamp', 'title', 'type', 'importance', 'status']
|
506
|
|
- const filterVal = ['timestamp', 'title', 'type', 'importance', 'status']
|
507
|
|
- const data = this.formatJson(filterVal, this.list)
|
|
526
|
+ this.downloadLoading = true;
|
|
527
|
+ import("@/vendor/Export2Excel").then(excel => {
|
|
528
|
+ const tHeader = ["timestamp", "title", "type", "importance", "status"];
|
|
529
|
+ const filterVal = [
|
|
530
|
+ "timestamp",
|
|
531
|
+ "title",
|
|
532
|
+ "type",
|
|
533
|
+ "importance",
|
|
534
|
+ "status"
|
|
535
|
+ ];
|
|
536
|
+ const data = this.formatJson(filterVal, this.list);
|
508
|
537
|
excel.export_json_to_excel({
|
509
|
538
|
header: tHeader,
|
510
|
539
|
data,
|
511
|
|
- filename: 'table-list'
|
512
|
|
- })
|
513
|
|
- this.downloadLoading = false
|
514
|
|
- })
|
|
540
|
+ filename: "table-list"
|
|
541
|
+ });
|
|
542
|
+ this.downloadLoading = false;
|
|
543
|
+ });
|
515
|
544
|
},
|
516
|
545
|
padDate(value) {
|
517
|
|
- value = value < 10 ? '0' + value : value
|
518
|
|
- return value
|
|
546
|
+ value = value < 10 ? "0" + value : value;
|
|
547
|
+ return value;
|
519
|
548
|
},
|
520
|
549
|
formatDate(val) {
|
521
|
|
- var value = new Date(val)
|
522
|
|
- var year = value.getFullYear()
|
523
|
|
- var month = this.padDate(value.getMonth() + 1)
|
524
|
|
- var day = this.padDate(value.getDate())
|
525
|
|
- var hour = this.padDate(value.getHours())
|
526
|
|
- var minutes = this.padDate(value.getMinutes())
|
527
|
|
- var seconds = this.padDate(value.getSeconds())
|
528
|
|
- return year + '-' + month + '-' + day + ' ' + hour + ':' + minutes + ':' + seconds
|
|
550
|
+ var value = new Date(val);
|
|
551
|
+ var year = value.getFullYear();
|
|
552
|
+ var month = this.padDate(value.getMonth() + 1);
|
|
553
|
+ var day = this.padDate(value.getDate());
|
|
554
|
+ var hour = this.padDate(value.getHours());
|
|
555
|
+ var minutes = this.padDate(value.getMinutes());
|
|
556
|
+ var seconds = this.padDate(value.getSeconds());
|
|
557
|
+ return (
|
|
558
|
+ year +
|
|
559
|
+ "-" +
|
|
560
|
+ month +
|
|
561
|
+ "-" +
|
|
562
|
+ day +
|
|
563
|
+ " " +
|
|
564
|
+ hour +
|
|
565
|
+ ":" +
|
|
566
|
+ minutes +
|
|
567
|
+ ":" +
|
|
568
|
+ seconds
|
|
569
|
+ );
|
529
|
570
|
},
|
530
|
571
|
formatJson(filterVal, jsonData) {
|
531
|
|
- return jsonData.map(v => filterVal.map(j => {
|
532
|
|
- if (j === 'timestamp') {
|
533
|
|
- return parseTime(v[j])
|
534
|
|
- } else {
|
535
|
|
- return v[j]
|
536
|
|
- }
|
537
|
|
- }))
|
|
572
|
+ return jsonData.map(v =>
|
|
573
|
+ filterVal.map(j => {
|
|
574
|
+ if (j === "timestamp") {
|
|
575
|
+ return parseTime(v[j]);
|
|
576
|
+ } else {
|
|
577
|
+ return v[j];
|
|
578
|
+ }
|
|
579
|
+ })
|
|
580
|
+ );
|
538
|
581
|
},
|
539
|
582
|
getProvinceName(provinceId) {
|
540
|
|
- const tempProvince = this.provinceList
|
|
583
|
+ const tempProvince = this.provinceList;
|
541
|
584
|
for (const i in tempProvince) {
|
542
|
585
|
if (tempProvince[i].id === provinceId) {
|
543
|
|
- return tempProvince[i].province
|
|
586
|
+ return tempProvince[i].province;
|
544
|
587
|
}
|
545
|
588
|
}
|
546
|
589
|
},
|
547
|
590
|
getCityName(cityId) {
|
548
|
|
- const tempCity = this.editCityList
|
|
591
|
+ const tempCity = this.editCityList;
|
549
|
592
|
for (const i in tempCity) {
|
550
|
593
|
if (tempCity[i].id === cityId) {
|
551
|
|
- return tempCity[i].city
|
|
594
|
+ return tempCity[i].city;
|
552
|
595
|
}
|
553
|
596
|
}
|
554
|
597
|
},
|
555
|
598
|
getDistrictName(districtId) {
|
556
|
|
- const tempDistrict = this.editDistrictList
|
|
599
|
+ const tempDistrict = this.editDistrictList;
|
557
|
600
|
for (const i in tempDistrict) {
|
558
|
601
|
if (tempDistrict[i].id === districtId) {
|
559
|
|
- return tempDistrict[i].district
|
|
602
|
+ return tempDistrict[i].district;
|
560
|
603
|
}
|
561
|
604
|
}
|
562
|
605
|
}
|
563
|
606
|
}
|
564
|
|
-}
|
|
607
|
+};
|
565
|
608
|
</script>
|