vue

VUECODE/smart-operate-manage/src/api/community.js

@@ -7,3 +7,19 @@ export function fetchList(query) {
     params: query
   })
 }
+
+export function createCommunity(data) {
+  return request({
+    url: '/community/add',
+    method: 'post',
+    data
+  })
+}
+
+export function updateCommunity(data) {
+  return request({
+    url: '/community/update',
+    method: 'post',
+    data
+  })
+}

VUECODE/smart-operate-manage/src/store/modules/community.js

@@ -1,24 +1,52 @@
-import { fetchList } from '@/api/community'
+import { fetchList, createCommunity, updateCommunity } from '@/api/community'
 
 const community = {
-  namespace: true,
+  namespaced: true,
   state: {
     total: '',
-    list: []
+    list: [],
+    detail: {},
   },
 
   mutations: {
     SET_LIST: (state, list) => {
       state.list = list
     },
+    Insert_LIST: (state, detail) => {
+      state.list = [detail, ...list]
+    },
+    UpdateList: (state, detail) => {
+      state.list = state.list.map(item => {
+        if (item.id === detail.id) {
+          return detail
+        }
+        return item
+      })
+    },
     SET_TOTAL: (state, total) => {
       state.total = total
+    },
+    setDetail: (state, item) => {
+      state.detail = item
+    },
+    resetDetail: (state) => {
+      state.detail = {
+        ...{
+          id: undefined,
+          importance: 1,
+          remark: '',
+          timestamp: new Date(),
+          title: '',
+          status: 'published',
+          type: ''
+        }
+      }
     }
   },
 
   actions: {
     // fetchList,获取社区列表
-    FetchList({ commit }, listQuery) {
+    FetchCommunityList({ commit }, listQuery) {
       return new Promise((resolve, reject) => {
         fetchList(listQuery).then(response => {
           const data = response.data
@@ -29,6 +57,26 @@ const community = {
           reject(error)
         })
       })
+    },
+
+    CreateCommunity({ commit }, datail) {
+      return new Promise((resolve, reject) => {
+        createCommunity(datail).then(response => {
+          resolve()
+        }).catch(error => {
+          reject(error)
+        })
+      })
+    },
+
+    UpdateCommunity({ commit }, datail) {
+      return new Promise((resolve, reject) => {
+        updateCommunity(datail).then(response => {
+          resolve()
+        }).catch(error => {
+          reject(error)
+        })
+      })
     }
   }
 }

VUECODE/smart-operate-manage/src/views/community/communityTable.vue

@@ -30,52 +30,52 @@
         align="center"
         type="index"
         width="50"/>
-      <el-table-column label="社区编号" prop="id" align="center" width="105">
+      <el-table-column label="社区编号" align="center" width="105">
         <template slot-scope="scope">
           <span>{{ scope.row.id }}</span>
         </template>
       </el-table-column>
-      <el-table-column label="社区名称" prop="id" align="center" width="105">
+      <el-table-column label="社区名称" align="center" width="105">
         <template slot-scope="scope">
           <span>{{ scope.row.communityName }}</span>
         </template>
       </el-table-column>
-      <el-table-column label="社区别名" prop="id" align="center" width="105">
+      <el-table-column label="社区别名" align="center" width="105">
         <template slot-scope="scope">
           <span>{{ scope.row.communityAlias }}</span>
         </template>
       </el-table-column>
-      <el-table-column label="所在地区" prop="id" align="center" width="305">
+      <el-table-column label="所在地区" align="center" width="305">
         <template slot-scope="scope">
-          <span>{{ scope.row.province_id }}{{ scope.row.city_id }}{{ scope.row.district_id }}</span>
+          <span>{{ scope.row.provinceId }}{{ scope.row.cityId }}{{ scope.row.districtId }}</span>
         </template>
       </el-table-column>
-      <el-table-column label="物业人员数量" prop="id" align="center" width="105">
+      <el-table-column label="物业人员数量" align="center" width="105">
         <template slot-scope="scope">
           <span>52</span>
         </template>
       </el-table-column>
-      <el-table-column label="已核业主数量" prop="id" align="center" width="105">
+      <el-table-column label="已核业主数量" align="center" width="105">
         <template slot-scope="scope">
           <span>123</span>
         </template>
       </el-table-column>
-      <el-table-column label="已核家属数量" prop="id" align="center" width="105">
+      <el-table-column label="已核家属数量" align="center" width="105">
         <template slot-scope="scope">
           <span>345</span>
         </template>
       </el-table-column>
-      <el-table-column label="已核租客数量" prop="id" align="center" width="105">
+      <el-table-column label="已核租客数量" align="center" width="105">
         <template slot-scope="scope">
           <span>234</span>
         </template>
       </el-table-column>
-      <el-table-column label="物业管理员" prop="id" align="center" width="105">
+      <el-table-column label="物业管理员" align="center" width="105">
         <template slot-scope="scope">
           <span>{{ scope.row.userName }}</span>
         </template>
       </el-table-column>
-      <el-table-column label="高德坐标" prop="id" align="center" width="105">
+      <el-table-column label="高德坐标" align="center" width="105">
         <template slot-scope="scope">
           <span>{{ scope.row.longitude }},{{ scope.row.latitude }}</span>
         </template>
@@ -96,28 +96,29 @@
     <pagination v-show="total>0" :total="total" :pageNum.sync="listQuery.pageNum" :pageSize.sync="listQuery.pageSize" @pagination="getList" />
 
     <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible">
-      <el-form ref="dataForm" :rules="rules" :model="temp" label-position="left" label-width="70px" style="width: 400px; margin-left:50px;">
-        <el-form-item label="类型" prop="type">
-          <el-select v-model="temp.type" class="filter-item" placeholder="Please select">
-            <el-option v-for="item in calendarTypeOptions" :key="item.key" :label="item.display_name" :value="item.key"/>
-          </el-select>
+      <el-form ref="dataForm" :rules="rules" :model="detail" label-position="left" label-width="100px" style="width: 400px; margin-left:50px;">
+        <el-form-item label="社区名称">
+           <el-input v-model="detail.communityName"/>
         </el-form-item>
-        <el-form-item label="时间" prop="timestamp">
-          <el-date-picker v-model="temp.timestamp" type="datetime" placeholder="Please pick a date"/>
+        <el-form-item label="社区别名">
+          <el-input v-model="detail.communityAlias"/>
         </el-form-item>
-        <el-form-item label="标题" prop="title">
-          <el-input v-model="temp.title"/>
+        <!-- <el-form-item label="所在区县" prop="title">
+          <el-input v-model="detail.title"/>
+        </el-form-item> -->
+        <el-form-item label="高德坐标">
+          <el-input v-model="detail.longitude"
+                    placeholder="经度"/>
+          <el-input v-model="detail.latitude"
+                    placeholder="纬度"/>
         </el-form-item>
-        <el-form-item label="状态">
-          <el-select v-model="temp.status" class="filter-item" placeholder="Please select">
-            <el-option v-for="item in statusOptions" :key="item" :label="item" :value="item"/>
-          </el-select>
+        <el-form-item label="管理员姓名">
+          <el-input v-model="detail.userName"
+                    placeholder="建议先填写运营人员姓名"/>
         </el-form-item>
-        <el-form-item label="重要性">
-          <el-rate v-model="temp.importance" :colors="['#99A9BF', '#F7BA2A', '#FF9900']" :max="3" style="margin-top:8px;"/>
-        </el-form-item>
-        <el-form-item label="点评">
-          <el-input :autosize="{ minRows: 2, maxRows: 4}" v-model="temp.remark" type="textarea" placeholder="Please input"/>
+        <el-form-item label="管理员账号">
+          <el-input v-model="detail.loginName"
+                    placeholder="建议先填写运营人员手机号"/>
         </el-form-item>
       </el-form>
       <div slot="footer" class="dialog-footer">
@@ -140,6 +141,7 @@
 </template>
 
 <script>
+import { mapState, mapActions, mapMutations } from 'vuex'
 import waves from '@/directive/waves' // Waves directive
 import { parseTime } from '@/utils'
 import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
@@ -174,11 +176,16 @@ export default {
       return calendarTypeKeyValue[type]
     }
   },
+  computed: {
+    ...mapState('community', {
+      list: s => s.list,
+      detail: s => s.detail,
+      total: s => s.total,
+    }),
+  },
   data() {
     return {
       tableKey: 0,
-      list: null,
-      total: 0,
       listLoading: true,
       listQuery: {
         pageNum: 1,
@@ -193,15 +200,6 @@ export default {
       sortOptions: [{ label: 'ID Ascending', key: '+id' }, { label: 'ID Descending', key: '-id' }],
       statusOptions: ['published', 'draft', 'deleted'],
       showReviewer: false,
-      temp: {
-        id: undefined,
-        importance: 1,
-        remark: '',
-        createData: '',
-        title: '',
-        type: '',
-        status: 'published'
-      },
       dialogFormVisible: false,
       dialogStatus: '',
       textMap: {
@@ -222,16 +220,22 @@ export default {
     this.getList()
   },
   methods: {
+    ...mapMutations('community',{
+      resetDetail: 'resetDetail',
+      setDetail: 'setDetail',
+    }),
+    ...mapActions('community', [
+      'FetchCommunityList',
+      'CreateCommunity',
+      'UpdateCommunity',
+    ]),
+    setCurrent(item) {
+      this.setDetail({...item})
+    },
     getList() {
       this.listLoading = true
-      this.$store.dispatch('community/FetchList', this.listQuery).then((data) => {
-        this.list = data.items
-        this.total = data.total
-
-        // Just to simulate the time of the request
-        setTimeout(() => {
-          this.listLoading = false
-        }, 1.5 * 1000)
+      this.FetchCommunityList(this.listQuery).then(() => {
+        this.listLoading = false 
       }).catch(() => {
         this.loading = false
         console.log('get list error')
@@ -262,34 +266,54 @@ export default {
       }
       this.handleFilter()
     },
-    resetTemp() {
-      this.temp = {
-        id: undefined,
-        importance: 1,
-        remark: '',
-        timestamp: new Date(),
-        title: '',
-        status: 'published',
-        type: ''
-      }
-    },
-    handleCreate() {
-      this.resetTemp()
+   handleCreate() {
+      this.resetDetail()
       this.dialogStatus = 'create'
       this.dialogFormVisible = true
       this.$nextTick(() => {
         this.$refs['dataForm'].clearValidate()
       })
     },
+    createData() {
+      this.$refs['dataForm'].validate((valid) => {
+        if (valid) {
+          this.CreateCommunity(this.detail).then(() => {
+            this.dialogFormVisible = false
+            this.$notify({
+              title: '成功',
+              message: '创建成功',
+              type: 'success',
+              duration: 2000
+            })
+            this.getList()
+          })
+        }
+      })
+    },
     handleUpdate(row) {
-      this.temp = Object.assign({}, row) // copy obj
-      this.temp.timestamp = new Date(this.temp.timestamp)
+      this.setCurrent(row)
       this.dialogStatus = 'update'
       this.dialogFormVisible = true
       this.$nextTick(() => {
         this.$refs['dataForm'].clearValidate()
       })
     },
+    updateData() {
+      this.$refs['dataForm'].validate((valid) => {
+        if (valid) {
+          this.UpdateCommunity(this.detail).then(() => {
+            this.dialogFormVisible = false
+            this.$notify({
+              title: '成功',
+              message: '更新成功',
+              type: 'success',
+              duration: 2000
+            })
+            this.getList()
+          })
+        }
+      })
+    },
     handleDelete(row) {
       this.$notify({
         title: '成功',