feats

src/config/api.js

@@ -95,6 +95,28 @@ const apis = {
       url: `${commPrefix}/image`
     },
   },
+  apartment: {
+    list: {
+      method: 'get',
+      url: `${commPrefix}/buildingApartment/buildingId/:buildingId`
+    },
+    detail: {
+      method: 'get',
+      url: `${commPrefix}/buildingApartment/:id`
+    },
+    add: {
+      method: 'post',
+      url: `${commPrefix}/buildingApartment/add`
+    },
+    edit: {
+      method: 'put',
+      url: `${commPrefix}/buildingApartment/update`
+    },
+    delete: {
+      method: 'delete',
+      url: `${commPrefix}/apartment/deleted/:id`
+    }
+  }
 }
 
 export default apis

src/main.js

@@ -10,6 +10,7 @@ import store from './store'
 import 'normalize.css/normalize.css'
 import './theme.scss'
 import './assets/iconfont.css'
+import VueAMap from 'vue-amap'
 
 Vue.use(Element)
 
@@ -18,6 +19,14 @@ Vue.component('v-chart', ECharts)
 Vue.component('xm-icon', XMIcon)
 Vue.component('xm-rtl', XMRightLay)
 Vue.component('xm-search', XMSearchForm)
+Vue.use(VueAMap)
+
+VueAMap.initAMapApiLoader({
+  key: 'f0d1d4f82432504003ebf46e5e36ff03',
+  plugin: ['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PolyEditor', 'AMap.CircleEditor'],
+  // 默认高德 sdk 版本为 1.4.4
+  v: '1.4.4'
+})
 
 new Vue({
   render: h => h(App),

src/store/index.js

@@ -1,12 +1,13 @@
 import Vue from 'vue'
 import Vuex from 'vuex'
 import system from './system'
-
+import apartment from './modules/apartment'
 Vue.use(Vuex)
 
 const store = new Vuex.Store({
   ...system,
   modules: {
+    apartment,
     persons: require('./modules/persons').default,
     dynamic: require('./modules/dynamic').default,
     building: require('./modules/building').default,

src/store/modules/apartment.js

@@ -0,0 +1,92 @@
+import request from '../../utils/request'
+import apis from '../../config/api'
+
+export default {
+  namespaced: true,
+  state: {
+    apartmentts: [],
+    detail: {}
+  },
+  mutations: {
+    updateList (state, payload) {
+      state.apartments = payload
+    },
+    updateDetail (state, payload) {
+      state.detail = payload
+    }
+  },
+  actions: {
+    setDetailNull ({ commit }) {
+      commit('updateDetail', {})
+    },
+    getApartments ({ commit }, payload) {
+      return new Promise((resolve, reject) => {
+        request({
+          ...apis.apartment.list,
+          urlData: payload,
+        }).then((data) => {
+          commit('updateList', data)
+          resolve(data)
+        }).catch(({ message }) => {
+          if (typeof message === 'string') {
+            reject(message)
+          }
+        })
+      })
+    },
+    getApartmentDetail ({ commit }, payload) {
+      return new Promise((resolve, reject) => {
+        request({
+          ...apis.apartment.detail,
+          urlData:payload
+        }).then((data) => {
+          commit('updateDetail', data)
+          resolve(data)
+        }).catch(({ message }) => {
+          if (typeof message === 'string') {
+            reject(message)
+          }
+        })
+      })
+    },
+    addApartment (_, payload) {
+      return new Promise((resolve, reject) => {
+        request({
+          ...apis.apartment.add,
+          data:payload
+        }).then((data) => {
+          
+          resolve(data)
+        }).catch(() => {
+          reject()
+        })
+      })
+    },
+    editApartment (_, payload) {
+      return new Promise((resolve, reject) => {
+        request({
+          ...apis.apartment.edit,
+          urlData:{id:payload.apartmentId},
+          data:payload
+        }).then((data) => {
+          resolve(data)
+        }).catch(() => {
+          reject()
+        })
+      })
+    },
+    deleteApartment (_, payload) {
+      return new Promise((resolve, reject) => {
+        // const api = replaceApiParams(lodash.get(apis, 'apartment.'), payload)
+        request({
+          ...apis.apartment.delete,
+          urlData:payload
+        }).then(() => {
+          resolve()
+        }).catch(() => {
+          reject()
+        })
+      })
+    },
+  }
+}

src/store/modules/building.js

@@ -25,10 +25,10 @@ export default {
           ...apis.building.list,
           params: payload,
         }).then((data) => {
-          commit('updateList', data)
+          window.console.log(data)
+          commit('updateList', { ...data, list: data.records})
           resolve(data)
-        }).catch((err) => {
-          const message = err.message || err.msg
+        }).catch(({ message }) => {
           if (typeof message === 'string') {
             reject(message)
           }
@@ -41,10 +41,10 @@ export default {
           ...apis.building.detail,
           urlData: payload,
         }).then((data) => {
+          window.console.log(data)
           commit('updateDetail', data)
           resolve(data)
-        }).catch((err) => {
-          const message = err.message || err.msg
+        }).catch(({ message }) => {
           if (typeof message === 'string') {
             reject(message)
           }
@@ -54,7 +54,7 @@ export default {
     addBuilding (_, payload) {
       const { onSuccess } = payload
       request({
-        ...apis.building.add, 
+        ...apis.building.add,
         data: payload.detail,
       }).then((data) => {
         onSuccess(data)
@@ -63,8 +63,9 @@ export default {
     editBuilding (_, payload) {
       const { onSuccess } = payload
       request({
-        ...apis.building.edit, 
-        data: payload.detail,
+        ...apis.building.edit,
+        urlData: { id: payload.detail.buildingId },
+        data: payload.detail
       }).then((data) => {
         onSuccess(data)
       })
@@ -76,8 +77,7 @@ export default {
           urlData: payload,
         }).then((data) => {
           resolve(data)
-        }).catch((err) => {
-          const message = err.message || err.msg
+        }).catch(({ message }) => {
           if (typeof message === 'string') {
             reject(message)
           }
@@ -91,8 +91,7 @@ export default {
           data: payload,
         }).then((data) => {
           resolve(data)
-        }).catch((err) => {
-          const message = err.message || err.msg
+        }).catch(({ message }) => {
           if (typeof message === 'string') {
             reject(message)
           }

src/store/modules/img.js

@@ -1,4 +1,3 @@
-
 import request from '../../utils/request'
 import apis from '../../config/api'
 
@@ -8,9 +7,9 @@ export default {
   actions: {
     uploadImg (_, payload) {
       return new Promise((resolve, reject) => {
+        // const api = lodash.get(apis, 'file.upload')
         const fm = new FormData()
         fm.append('file', payload)
-
         request({
           ...apis.file.upload,
           data: fm,

src/utils/request.js

@@ -22,7 +22,7 @@ function request(params = {}) {
       }
     }).then(({ data: res }) => {
 
-      // 服务端返回包含 code, msg, data 字段
+      // 服务端返回包含 code, message, data 字段
       const { code, data } = res
 
       // 业务处理正确则返回 1000
@@ -35,9 +35,9 @@ function request(params = {}) {
     }).catch((error) => {
       // 异常情况
       if (error.response) {
-        reject({ msg: error.response.statusText })
+        reject({ message: error.response.statusText })
       } else {
-        reject({ msg: error.message })
+        reject({ message: error.message })
       }
     })
   })

src/views/building/edit.vue

@@ -0,0 +1,559 @@
+<template>
+  <el-tabs v-model="activeName">
+    <el-tab-pane label="基础信息" name="detail">
+      <el-form ref="form" :model="building" label-width="160px">
+        <el-form-item label="楼盘编号">
+          <el-input v-model="building.code"></el-input>
+        </el-form-item>
+        <el-form-item label="楼盘名称">
+          <el-input v-model="building.buildingName"></el-input>
+        </el-form-item>
+        <el-form-item label="别名">
+          <el-input v-model="building.name"></el-input>
+        </el-form-item>
+        <el-form-item label="均价">
+          <el-input v-model="building.price"></el-input>
+        </el-form-item>
+        <el-form-item label="开盘时间">
+          <el-date-picker
+            v-model="building.openingDate"
+            type="date"
+            placeholder="选择日期">
+          </el-date-picker>
+        </el-form-item>
+        <el-form-item label="电话">
+          <el-input v-model="building.tel"></el-input>
+        </el-form-item>
+        <el-form-item label="项目动态">
+          <el-input v-model="building.dynamic"></el-input>
+        </el-form-item>
+        <el-form-item label="物业类型">
+          <el-select v-model="buildingProperty" multiple placeholder="请选择">
+            <el-option v-for="(t,i) in propertyType" :key="i" :label="t.name" :value="t.id"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="销售状态">
+          <el-input v-model="building.marketStatus"></el-input>
+        </el-form-item>
+        <el-form-item label="标签">
+          <el-select
+            v-model="tags"
+            multiple
+            filterable
+            allow-create
+            default-first-option
+            placeholder="请输入标签">
+          </el-select>
+        </el-form-item>
+        <el-form-item label="项目主图">
+          <el-upload
+            :action="upFileUrl"
+            name='file'
+            list-type="picture-card"
+            :file-list="imgList"
+            :show-file-list="true"
+            :before-upload="beforeImgUpload"
+            :on-success="handleAvatarSuccess"
+            :on-remove="handleRemove">
+            <i class="el-icon-plus"></i>
+          </el-upload>
+          <el-dialog :visible.sync="dialogVisible">
+            <img width="100%" :src="dialogImageUrl" alt="">
+          </el-dialog>
+        </el-form-item>
+        <el-form-item label="地址图片">
+          <el-upload
+            class="avatar-uploader"
+            :action="upFileUrl"
+            name='file'
+            :show-file-list="false"
+            :before-upload="beforeImgUpload"
+            :on-success="handleMapImgSuccess">
+            <img v-if="building.mapImg" :src="building.mapImg" class="avatar">
+            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
+          </el-upload>
+        </el-form-item>
+        <el-form-item label="排序">
+          <el-input v-model="building.orderNo"></el-input>
+        </el-form-item>
+        <el-form-item label="优惠信息">
+          <el-input v-model="building.discount"></el-input>
+        </el-form-item>
+        <el-form-item label="首页推荐">
+          <el-radio-group v-model="building.isMain">
+            <el-radio :label="1">是</el-radio>
+            <el-radio :label="0">否</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="项目备注">
+          <div id="websiteEditorElem" style="height: 400px"></div>
+        </el-form-item>
+        <el-form-item label="楼盘区域">
+          <el-input v-model="building.buildingArea"></el-input>
+        </el-form-item>
+        <el-form-item label="项目地址">
+          <el-input v-model="building.address"></el-input>
+        </el-form-item>
+        <el-form-item label="项目坐标">
+          <el-input v-model="building.coordinate" :disabled="true"></el-input>
+        </el-form-item>
+        <el-form-item label="项目地址">
+          <div class="search">
+            <el-amap-search-box class="search-box" :search-option="searchOption" :on-search-result="onSearchResult"></el-amap-search-box>
+          </div>
+          <div class="flex-item">
+            <div style="width: 100%;">
+              <el-amap ref="map" vid="amapDemo" :center="mapCenter" :zoom="12" :events="events" class="amap-demo">
+                <el-amap-marker v-for="(item,index) in markers" :key="index" :position="item" ></el-amap-marker>
+              </el-amap>
+            </div>
+          </div>  
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" @click="onSubmit">保存</el-button>
+          <el-button @click="onCancel">取消</el-button>
+        </el-form-item>
+      </el-form>
+    </el-tab-pane>
+    <el-tab-pane label="图片设置" name="apartment" v-if="detail.buildingId">
+      <div class="system-table-search">
+        <div class="flex-h">
+          <div class="flex-item flex-h">
+            <el-button size="mini" type="success" @click='addHx'>新增图片库</el-button>
+          </div>
+        </div>
+      </div>
+      <el-table
+        :data="aparments"
+        style="width: 100%">
+        <el-table-column
+          prop="apartmentName"
+          label="名称"
+        >
+        </el-table-column>
+        <el-table-column
+          prop="apartmentType"
+          label="类型"
+        >
+          <template slot-scope="scope">
+            <span>{{scope.row.apartmentType == 'apart'?'户型':'相册'}}</span>
+          </template>
+        </el-table-column>
+        <el-table-column
+          prop="marketStatus"
+          label="销售状态"
+        >
+          <template slot-scope="scope">
+            <span>{{getSaleTypeName(scope.row.marketStatus)}}</span>
+          </template>
+        </el-table-column>
+        <el-table-column
+          prop="remark"
+          label="备注"
+        >
+        </el-table-column>
+        <el-table-column
+          prop="createDate"
+          label="创建时间"
+        >
+        </el-table-column>
+        <el-table-column
+          fixed="right"
+          label="操作"
+          width="180">
+          <template slot-scope="scope">
+            <el-button type="text" @click="handleEdit(scope.row)" size="small">编辑</el-button>
+            <el-button @click="handleDel(scope.row)" type="text" size="small">删除</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <el-dialog title="图片信息" :visible.sync="showHx">
+        <el-form ref="form" :model="aparmentInfo" label-width="160px">
+          <el-form-item label="名称">
+            <el-input v-model="aparmentInfo.apartmentName"></el-input>
+          </el-form-item>
+          <el-form-item label="类型">
+            <el-select v-model="aparmentInfo.apartmentType" placeholder="请选择">
+              <el-option label="户型" value="apart"></el-option>
+              <el-option label="相册" value="photo"></el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="销售状态">
+            <el-select v-model="aparmentInfo.marketStatus" placeholder="请选择">
+              <el-option v-for="(type,i) in saleType" :key="i" :label="type.name" :value="type.id"></el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="图片">
+            <el-upload
+              :action="upFileUrl"
+              name='file'
+              list-type="picture-card"
+              :file-list="aparmentImg"
+              :show-file-list="true"
+              :before-upload="beforeImgUpload"
+              :on-success="handleAparmentSuccess"
+              :on-remove="handleAparmentRemove">
+              <i class="el-icon-plus"></i>
+            </el-upload>
+            <el-dialog :visible.sync="dialogApartVisible">
+              <img width="100%" :src="dialogApartImageUrl" alt="">
+            </el-dialog>
+          </el-form-item>
+          <el-form-item label="备注">
+            <el-input type="textarea" v-model="aparmentInfo.remark"></el-input>
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary" @click="saveAparment">保存</el-button>
+            <el-button @click="showHx = false">取消</el-button>
+          </el-form-item>
+        </el-form>
+      </el-dialog>
+    </el-tab-pane>
+  </el-tabs>
+</template>
+
+<script>
+import { createNamespacedHelpers } from 'vuex'
+import apis from '../../config/api'
+import { mapState } from 'vuex'
+import E from 'wangeditor'
+
+const { mapState: mapBuildingState, mapActions: mapBuildingActions, mapMutations: mapBuildingMutations } = createNamespacedHelpers('building')
+
+const { mapActions: mapApartmentActions } = createNamespacedHelpers('apartment')
+
+const { mapActions: mapImgActions } = createNamespacedHelpers('img')
+
+export default {
+  data () {
+    var _self = this
+    return {
+      upFileUrl: apis.file.upload.url,
+      commPrefix: '',
+      imgurl: '',
+      loadingZm: false,
+      activeName: 'detail',
+      dialogImageUrl: '',
+      dialogVisible: false,
+      dialogApartImageUrl: '',
+      dialogApartVisible: false,
+      showHx: false,
+      markers: [],
+      imgList: [],
+      tags: [],
+      buildingProperty: [],
+      aparments: [],
+      aparmentInfo: {},
+      aparmentImg: [],
+      searchOption: {
+        city: '南京',
+        citylimit: false
+      },
+      mapCenter: [118.789509, 32.019989],
+      events: {
+        click: (e) => {
+          _self.updateDetail({..._self.building, coordinate: e.lnglat.lat + ',' + e.lnglat.lng})
+        }
+      },
+    }
+  },
+  computed: {
+    ...mapBuildingState({
+      detail: x => x.detail,
+    }),
+    ...mapState({
+      dicts: x =>  x.dicts,
+    }),
+    building: {
+      get () {
+        return this.detail
+      },
+      set (val) {
+        return this.updateDetail(val)
+      }
+    },
+    propertyType () {
+      return (this.dicts || []).filter(x => x.type === 'propertyType')
+    },
+    saleType () {
+      return (this.dicts || []).filter(x => x.type === 'saleType')
+    }
+  },
+  methods: {
+    ...mapBuildingMutations([
+      'updateDetail'
+    ]),
+    ...mapBuildingActions([
+      'getDetail',
+      'addBuilding',
+      'editBuilding'
+    ]),
+    ...mapApartmentActions([
+      'getApartments',
+      'getApartmentDetail',
+      'addApartment',
+      'editApartment',
+      'deleteApartment'
+    ]),
+    ...mapImgActions([
+      'uploadImg'
+    ]),
+    getSaleTypeName (id) {
+      return ((this.dicts || []).filter(x => x.type === 'saleType' && x.id == id) [0] || {}).name
+    },
+    onCancel () {
+      this.$router.push({name: 'buildinglist'})
+    },
+    handleRemove (file, fileList) {
+      this.imgList = fileList
+    },
+    handleAparmentRemove (file, fileList) {
+      this.aparmentImg = fileList
+    },
+    onSearchResult (pois) { // 搜索地图
+      let latSum = 0
+      let lngSum = 0
+      if (pois.length > 0) {
+        pois.forEach(poi => {
+          let { lng, lat } = poi
+          lngSum += lng
+          latSum += lat
+          this.markers.push([poi.lng, poi.lat])
+        })
+        let center = {
+          lng: lngSum / pois.length,
+          lat: latSum / pois.length
+        }
+        this.mapCenter = [center.lng, center.lat]
+      }
+    },
+    beforeImgUpload (file) {
+      if (file.type !== 'image/jpeg' && file.type !== 'image/png') {
+        this.$message.error('上传图片只能是 JPG 或 PNG 格式!')
+        return false
+      }
+      // if (file.size / 1024 > 300) {
+      //   this.$message.error('图片大小不允许超过300k!')
+      //   return false
+      // }
+      this.loading = this.$loading({
+        lock: true,
+        text: '上传中...',
+        spinner: 'el-icon-loading',
+        background: 'rgba(0, 0, 0, 0.7)'
+      })
+
+      return true
+    },
+    handleAvatarSuccess (res) {
+      this.imgList = [...this.imgList, {
+        url: res.data
+      }]
+      this.loading.close()
+    },
+    handleMapImgSuccess(res) {
+      this.building = {...this.building, mapImg: res.data }
+      this.loading.close()
+    },
+    handleAparmentSuccess (res) {
+      this.aparmentImg = [...this.aparmentImg, {
+        url: res.data
+      }]
+      this.loading.close()
+    },
+    onSubmit () {
+      const imgs = this.imgList.map((x, i) => {
+        return {
+          imgType: 'banner',
+          url: x.url,
+          orderNo: (i + 1)
+        }
+      })
+      const tag = this.tags.map(x => {
+        return {
+          tagName: x
+        }
+      })
+      const building = {...this.building, img: imgs, propertyType: this.buildingProperty.join(','), tag}
+      if (!building.buildingId) {
+        // 新增
+        this.addBuilding({
+          onSuccess: this.onCancel,
+          detail: JSON.stringify(building)
+        })
+      } else {
+        // 修改
+        this.editBuilding({
+          onSuccess: this.onCancel,
+          detail: JSON.stringify(building)
+        })
+      }
+    },
+    FormatDate (date) {
+      return (date || '').split('T')[0] === '0001-01-01' ? '' : (date || '').split('T')[0]
+    },
+    saveAparment () {
+      const imgs = this.aparmentImg.map((x, i) => {
+        return {
+          imgType: 'aparment',
+          url: x.url,
+          orderNo: (i + 1)
+        }
+      })
+      if (!this.aparmentInfo.apartmentId) {
+        this.addApartment(JSON.stringify({
+          ...this.aparmentInfo,
+          img: imgs
+        })).then(() => {
+          this.getAparmentList()
+          this.showHx = false
+        })
+      } else {
+        this.editApartment(JSON.stringify({
+          ...this.aparmentInfo,
+          img: imgs
+        })).then(() => {
+          this.getAparmentList()
+          this.showHx = false
+        })
+      }
+    },
+    addHx () {
+      this.aparmentImg = []
+      this.aparmentInfo = {buildingId: this.building.buildingId}
+      this.showHx = true
+    },
+    getAparmentList () {
+      this.getApartments({buildingId: this.$route.query.id}).then(data => {
+        this.aparments = data
+      })
+    },
+    handleEdit (row) {
+      this.aparmentImg = []
+      this.getApartmentDetail({
+        id: row.apartmentId
+      }).then(data => {
+        console.log("...",data)
+        this.aparmentImg = data.buildingImgList.map(x => {
+          return {
+            name: x.imgId,
+            url: x.url
+          }
+        })
+        this.aparmentInfo = data
+        this.showHx = true
+      })
+    },
+    handleDel (row) {
+      this.$confirm('确认删除此数据?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        if (this.building.status === 1) {
+          this.$message.error('当前楼盘处于发布状态，不允许删除！')
+          return false
+        }
+        this.deleteApartment({
+          id: row.apartmentId
+        }).then(() => {
+          this.getAparmentList()
+        })
+      })
+    }
+  },
+  mounted () {
+    const _that = this
+    const phoneEditor = new E('#websiteEditorElem')
+    phoneEditor.customConfig.onchange = function (html) {
+      _that.building = {..._that.building, remark: html}
+    }
+    phoneEditor.customConfig.customUploadImg = function (files, insert) {
+      _that.uploadImg(files[0]).then(data => {
+        insert(data[0])
+      })
+    }
+    phoneEditor.customConfig.menus = [
+      'head',  // 标题
+      'bold',  // 粗体
+      'fontSize',  // 字号
+      'fontName',  // 字体
+      'italic',  // 斜体
+      'underline',  // 下划线
+      'strikeThrough',  // 删除线
+      'foreColor',  // 文字颜色
+      'backColor',  // 背景颜色
+      'justify',  // 对齐方式
+      'image',  // 插入图片
+    ]
+    phoneEditor.create()
+    if ((this.$route.query.id || '') !== '') {
+      this.getAparmentList()
+      window.console.log(this.getDetail)
+      this.getDetail({id: this.$route.query.id}).then(data => {
+        this.buildingProperty = data.propertyType.split(',')
+        phoneEditor.txt.html(data.remark)
+        this.imgList = data.buildingImg.map(x => {
+          return {
+            name: x.imgId,
+            url: x.url
+          }
+        })
+        this.tags = data.buildingTag.map(x => x.tagName)
+      })
+    } else {
+      phoneEditor.txt.html('')
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.header{
+  width: 50px;
+  height: 50px;
+  img{
+    width: 100%;
+    height: 100%;
+  }
+}
+.avatar-uploader .el-upload {
+  border: 1px dashed #d9d9d9;
+  border-radius: 6px;
+  cursor: pointer;
+  position: relative;
+  overflow: hidden;
+}
+.avatar-uploader .el-upload:hover {
+  border-color: #409EFF;
+}
+.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;
+}
+
+.flex-item .amap-demo{
+  height: 300px;
+}
+
+.el-select{
+  width: 100% !important;
+}
+
+.el-select-dropdown{
+  z-index: 10003 !important;
+}
+
+.el-date-picker{
+  z-index: 10002 !important;
+}
+</style>

src/views/building/list.vue

@@ -0,0 +1,273 @@
+<template>
+  <div>
+    <div class="system-table-search">
+      <div class="flex-h">
+        <div class="flex-item flex-h">
+          <el-button size="mini" type="success" @click='addBuilding'>新增楼盘</el-button>
+        </div>
+        <ul>
+          <li>
+            <el-input v-model="code" placeholder="楼盘编号"></el-input>
+          </li>
+          <li>
+            <el-input v-model="name" placeholder="楼盘名称"></el-input>
+          </li>
+        </ul>
+        <el-button
+          size="mini"
+          type="primary" @click="search">搜索</el-button>
+      </div>
+      <div class="moreFilter"></div>
+    </div>
+    <el-table
+      :data="buildings.list || []"
+      style="width: 100%">
+      <el-table-column
+        type="index"
+        width="50">
+        <template slot-scope="scope">
+          <span>{{ GetIndex(scope.$index) }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column
+        prop="code"
+        label="楼盘编号">
+      </el-table-column>
+      <el-table-column
+        prop="buildingName"
+        label="楼盘名称"
+        width="180">
+      </el-table-column>
+      <el-table-column
+        prop="price"
+        label="均价"
+        width="180">
+        <template slot-scope="scope">
+          <span style="color:red">{{scope.row.price}}</span>
+        </template>
+      </el-table-column>
+      <el-table-column
+        prop="openingDate"
+        label="开盘时间">
+        <template slot-scope="scope">
+          <span>{{(scope.row.openingDate || '').split(' ')[0]}}</span>
+        </template>
+      </el-table-column>
+      <el-table-column
+        prop="address"
+        label="项目地址">
+      </el-table-column>
+      <el-table-column
+        prop="propertyType"
+        label="物业类型">
+        <template slot-scope="scope">
+          <span>{{getPropertyType(scope.row.propertyType)}}</span>
+        </template>
+      </el-table-column>
+      <el-table-column
+        prop="tel"
+        label="销售电话">
+      </el-table-column>
+      <el-table-column
+        prop="createDate"
+        label="录入时间">
+        <template slot-scope="scope">
+          <span>{{(scope.row.createDate || '').split(' ')[0]}}</span>
+        </template>
+      </el-table-column>
+      <el-table-column
+        label="发布状态">
+        <template slot-scope="scope">
+          <span>{{scope.row.status == 1 ? '已发布' : '未发布'}}</span>
+        </template>
+      </el-table-column>
+      <el-table-column
+        fixed="right"
+        label="操作"
+        width="180">
+        <template slot-scope="scope">
+          <el-button type="text" @click="handleEdit(scope.row)" size="small">编辑</el-button>
+          <el-button type="text" @click="handlePulic(scope.row)" size="small" v-if="scope.row.status === 0">发布</el-button>
+          <el-button type="text" @click="handleUnPulic(scope.row)" size="small" v-if="scope.row.status === 1">取消发布</el-button>
+          <el-button @click="handleDel(scope.row)" type="text" size="small">删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <el-pagination
+      small
+      style="margin-top:10px;"
+      layout="prev, pager, next"
+      :current-page.sync="currentPage"
+      :pageSize="pageSize"
+      :total="buildings.total || 0"
+      @current-change="getList"
+    >
+    </el-pagination>
+  </div>
+</template>
+
+<script>
+import { createNamespacedHelpers } from 'vuex';
+const {mapState: mapBuildingState, mapActions: mapBuildingActions} = createNamespacedHelpers('building')
+import { mapState } from 'vuex'
+
+export default {
+  data() {
+    return {
+      pageSize: 20,
+      currentPage: 1,
+      code: '',
+      name: ''
+    }
+  },
+  computed: {
+    ...mapBuildingState({
+      buildings: x => x.buildings
+    }),
+    ...mapState({
+      dicts: x =>  x.dicts,
+    }),
+  },
+  methods: {
+    ...mapBuildingActions([
+      'setDetailNull',
+      'getBuildings',
+      'updateBuildingStatus',
+      'delBuilding'
+    ]),
+    getPropertyType (types) {
+      let typeNames = ''
+      let typeArr = types.split(',')
+      const _that = this
+      typeArr.map(x => {
+        const name = ((_that.dicts || []).filter(d => d.type === 'propertyType' && d.id == x)[0] || {}).name
+        if (name) {
+          typeNames = typeNames + (typeNames===''?'':',') + name
+        }
+      })
+      return typeNames
+    },
+    GetIndex (inx) {
+      return (this.currentPage - 1) * this.pageSize + inx + 1
+    },
+    // FormatDate (date) {
+    //   if (date) {
+    //     return date.split(' ')[0] === '0001-01-01' ? '' : date.split(' ')[0]
+    //   } else {
+    //     return ''
+    //   }
+    // },
+    getList () {
+      this.getBuildings({
+        pageNum: this.currentPage,
+        pageSize: this.pageSize,
+        code: this.code,
+        name: this.name
+      })
+    },
+    search () {
+      this.currentPage = 1
+      this.getList()
+    },
+    addBuilding () {
+      this.setDetailNull()
+      this.$router.push({name: 'buildingedit'})
+    },
+    handleEdit (row) {
+      this.setDetailNull()
+      this.$router.push({name: 'buildingedit', query: {id: row.buildingId}})
+    },
+    handlePulic (row) {
+      this.$confirm('确认发布此数据?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        this.updateBuildingStatus({
+          id: row.buildingId,
+          status: 1
+        }).then(() => {
+          this.getList()
+        })
+      })
+    },
+    handleUnPulic (row) {
+      this.$confirm('确认取消发布此数据?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        this.updateBuildingStatus({
+          id: row.buildingId,
+          status: 0
+        }).then(() => {
+          this.getList()
+        })
+      })
+    },
+    handleDel (row) {
+      this.$confirm('确认删除此数据?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        if (row.status === 1) {
+          this.$message.error('当前楼盘处于发布状态，不允许删除！')
+          return false
+        }
+        this.delBuilding({
+          id: row.buildingId
+        }).then(() => {
+          this.getList()
+        })
+      })
+    }
+  },
+  created () {
+    this.getList()
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.list{
+    .header{
+      width: 50px;
+      height: 50px;
+      img{
+        width: 100%;
+        height: 100%;
+      }
+    }
+  }
+
+.system-table-search{
+  width: calc(100% - 40px);
+  margin: 20px auto 0;
+}
+
+.system-table-search li{
+  margin-right: 20px;
+}
+
+.system-table-search ul{
+  font-size: 0;
+  white-space: nowrap;
+}
+
+.system-table-search ul>li{
+  display: inline-block;
+}
+
+.flex-h {
+  display: flex;
+  display: -webkit-flex;
+}
+
+.flex-item {
+  flex: 1;
+  -webkit-flex: 1;
+  position: relative;
+  overflow: hidden;
+}
+</style>

src/views/index.js

@@ -65,6 +65,23 @@ const pages = [
           menuShow: false,
           title: '项目动态编辑',
         },
+      },
+      {
+        path: 'buildinglist',
+        name: 'buildinglist',
+        component: () => import('./building/list.vue'),
+        meta: {
+          menuShow: true,
+          title: '楼盘列表',
+        },
+      },
+      {
+        path: 'buildingedit',
+        name: 'buildingedit',
+        component: () => import('./building/edit.vue'),
+        meta: {
+          menuShow: false,
+        },
       }
     ]
   },