咨迅类型 完成

src/config/api.js

@@ -1,4 +1,4 @@
-const commPrefix = '/api/admin'
+const commPrefix = '/api/admin/'
 
 const apis = {
   system: {
@@ -126,6 +126,28 @@ const apis = {
       method: 'post',
       url: `${commPrefix}/customer/add`
     }
+  },
+  newsType: {
+    list: {
+      method: 'get',
+      url: `${commPrefix}/taNewsType`
+    },
+    add: {
+      method: 'post',
+      url: `${commPrefix}/taNewsType`
+    },
+    delete: {
+      method: 'delete',
+      url: `${commPrefix}/taNewsType/:id`
+    },
+    update: {
+      method: 'put',
+      url: `${commPrefix}/taNewsType/:id`
+    },
+    getById: {
+      method: 'get',
+      url: `${commPrefix}/taNewsType/:id`
+    }
   }
 }
 

src/store/index.js

@@ -2,6 +2,8 @@ import Vue from 'vue'
 import Vuex from 'vuex'
 import system from './system'
 import apartment from './modules/apartment'
+import news from './modules/news'
+
 Vue.use(Vuex)
 
 const store = new Vuex.Store({
@@ -13,6 +15,7 @@ const store = new Vuex.Store({
     customer: require('./modules/customer').default,
     building: require('./modules/building').default,
     img: require('./modules/img').default,
+    news
   }
 })
 

src/store/modules/news.js

@@ -0,0 +1,76 @@
+import apis from '../../config/api'
+import request from '../../utils/request'
+
+export default {
+    namespaced: true,
+    state: {
+        list: [],
+        detail: []
+    },
+    mutations: {
+
+    },
+    actions: {
+        getTypeList({ commit }, payload) { // 查询所有咨迅类型
+           return  new Promise((resolve, reject) => {
+               request({
+                   ...apis.newsType.list,
+                   params: payload,
+               }).then((data) => {
+                   resolve(data)
+               }).catch((err) => {
+                   reject(err)
+               })
+           })
+        },
+        getTypeById({ commit }, payload) { // 根据Id查询咨迅类型
+            return  new Promise((resolve, reject) => {
+                request({
+                    ...apis.newsType.getById,
+                    urlData: { id: payload.newsTypeId },
+                }).then((data) => {
+                    resolve(data)
+                }).catch((err) => {
+                    reject(err)
+                })
+            })
+        },
+        addType({ commit }, payload) { // 添加类型
+            return  new Promise((resolve, reject) => {
+                request({
+                    ...apis.newsType.add,
+                    data: payload,
+                }).then((data) => {
+                    resolve(data)
+                }).catch((err) => {
+                    reject(err)
+                })
+            })
+        },
+        updateType({ commit }, payload) { // 修改类型
+            return  new Promise((resolve, reject) => {
+                request({
+                    ...apis.newsType.update,
+                    urlData:{ id: payload.newsTypeId },
+                    data:payload
+                }).then((data) => {
+                    resolve(data)
+                }).catch((err) => {
+                    reject(err)
+                })
+            })
+        },
+        deleteType({ commit }, payload) { // 删除类型
+            return  new Promise((resolve, reject) => {
+                request({
+                    ...apis.newsType.delete,
+                    urlData: { id: payload.newsTypeId },
+                }).then((data) => {
+                    resolve(data)
+                }).catch((err) => {
+                    reject(err)
+                })
+            })
+        }
+    }
+}

src/views/index.js

@@ -175,11 +175,20 @@ const pages = [
       {
         path: '/news/type/list',
         name: 'news-type-list',
-        component: () => import('./news/index.vue'),
+        component: () => import('./news/type/index.vue'),
         meta: {
           menuShow: true,
           title: '咨迅类型',
         },
+      },
+      {
+        path: '/news/type/edi',
+        name: 'news-type-edi',
+        component: () => import('./news/type/edi/index.vue'),
+        meta: {
+          menuShow: false,
+          title: '编辑咨迅类型',
+        },
       }
     ]
   },

src/views/news/type/edi/index.vue

@@ -0,0 +1,156 @@
+<template>
+    <div id="root">
+        <el-form ref="form" :model="form" label-width="80px" class="form">
+            <el-form-item label="项目">
+                <el-select v-model="form.buildingId" placeholder="请选择">
+                    <el-option
+                            v-for="item in buildingList"
+                            :key="item.buildingId"
+                            :label="item.buildingName"
+                            :value="item.buildingId">
+                    </el-option>
+                </el-select>
+            </el-form-item>
+            <el-form-item label="图片">
+<!--                class="avatar-uploader"-->
+                <el-upload
+                        :headers="uploadHeaders"
+                        :action="upFileUrl"
+                        :show-file-list="false"
+                        :on-success="handleAvatarSuccess">
+                    <img v-if="imageUrl" :src="imageUrl" 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="form.newsTypeName"></el-input>
+            </el-form-item>
+            <el-form-item>
+                <el-button type="primary" @click="submitNewsType">保存</el-button>
+                <el-button @click="cancel">取消</el-button>
+            </el-form-item>
+        </el-form>
+    </div>
+</template>
+
+<script>
+    import apis from '../../../../config/api'
+    export default {
+        name: "index",
+        data() {
+            return {
+                upFileUrl: apis.file.upload.url,
+                buildingList: [],
+                imageUrl: '',
+                form: {
+                    newsTypeId: '',
+                    newsTypeImg: '',
+                    newsTypeName: '',
+                    buildingId: ''
+                },
+                buildingForm: {
+                    pageNum: 1,
+                    pageSize: 100
+                },
+            }
+        },
+        created() {
+            this.getBuildList()
+            this.form.newsTypeId = this.$route.query.id
+            if (this.form.newsTypeId !== undefined) {
+                this.getById()
+            }
+        },
+        computed: {
+            uploadHeaders () {
+                const token = localStorage.getItem('x-token') || ''
+                return {
+                    Authorization: `Bearer ${token}`
+                }
+            }
+        },
+        methods: {
+            handleAvatarSuccess(res, file) {
+                this.imageUrl = URL.createObjectURL(file.raw);
+                // console.log(res)
+                this.form.newsTypeImg = res.data
+            },
+            getBuildList() {
+                this.$store.dispatch('building/getBuildings', this.buildingForm).then((res) => {
+                    this.buildingList = res.records
+                }).catch(() => {
+                    console.log('building/getBuildings err')
+                })
+            },
+            submitNewsType() {
+                console.log(this.form.newsTypeId)
+                if (this.form.newsTypeId === '' || this.form.newsTypeId === undefined) {
+                    console.log('添加')
+                    this.$store.dispatch('news/addType', this.form).then((res) => {
+                        this.$message.success('操作成功！')
+                        this.$router.go(-1)
+                        // console.log(res)
+                    }).catch(() => {
+                        console.log('news/addType err')
+                    })
+
+                    return;
+                }
+
+                // 修改
+                this.$store.dispatch('news/updateType', this.form).then((res) => {
+                    this.$message.success('操作成功！')
+                    this.$router.go(-1)
+                    // console.log(res)
+                }).catch(() => {
+                    console.log('news/updateType err')
+                })
+
+            },
+            cancel() {
+                this.$router.go(-1)
+            },
+            getById() {
+                this.$store.dispatch('news/getTypeById', this.form).then((res) => {
+                    this.form.newsTypeName = res.newsTypeName
+                    this.form.newsTypeImg = res.newsTypeImg
+                    this.imageUrl = res.newsTypeImg
+                    this.form.buildingId = res.buildingId
+                }).catch(() => {
+                    console.log('news/getTypeById err')
+                })
+            }
+        }
+    }
+</script>
+
+<style scoped>
+    .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;
+    }
+    .form {
+        width: 300px;
+        margin-left: auto;
+        margin-right: auto;
+    }
+</style>

src/views/news/type/index.vue

@@ -1,8 +1,9 @@
 <template>
     <div id="root">
         <div class="operation-class">
-           <el-button type="primary">新增</el-button>
-            <el-select v-model="buildingId" placeholder="项目" style="margin-left: 20px;">
+           <el-button type="primary" @click="ediNewsType">新增</el-button>
+            &nbsp;
+            <el-select v-model="form.buildingId" placeholder="项目" @change="getList">
                 <el-option
                         v-for="item in buildingList"
                         :key="item.buildingId"
@@ -11,21 +12,130 @@
                 </el-option>
             </el-select>
         </div>
+        <div class="body">
+            <el-table
+                    :data="list"
+                    border
+                    style="width: 100%">
+                <el-table-column
+                        prop="date"
+                        label="类型图"
+                        align="center">
+                    <template slot-scope="scope">
+                        <img :src="scope.row.newsTypeImg" width="50" height="50"/>
+                    </template>
+                </el-table-column>
+                <el-table-column
+                        prop="newsTypeName"
+                        label="名称"
+                        align="center">
+                </el-table-column>
+                <el-table-column
+                        prop="newsTypeId"
+                        align="center"
+                        label="操作">
+                    <template slot-scope="scope">
+                        <router-link :to="{ name:'news-type-edi', query: { id: scope.row.newsTypeId } }">编辑</router-link>
+                        <a href="javascript:void(0);" @click="deleteNews(scope.row.newsTypeId)" class="delClass">删除</a>
+                    </template>
+                </el-table-column>
+            </el-table>
+        </div>
+        <div class="block">
+            <el-pagination
+                    @size-change="handleSizeChange"
+                    @current-change="handleCurrentChange"
+                    :current-page="form.pageNum"
+                    :page-sizes="[1, 10, 20, 30, 40]"
+                    :page-size="form.pageSize"
+                    layout="total, sizes, prev, pager, next, jumper"
+                    :total="total">
+            </el-pagination>
+        </div>
     </div>
 </template>
 
 <script>
     export default {
-        name: "newsTypeIndex",
+        name: "newsIndex",
         data() {
             return {
                 buildingList: [],
-                buildingId: ''
+                form: {
+                    buildingId: '',
+                    pageNum: 1,
+                    pageSize: 10
+                },
+                buildingForm: {
+                    pageNum: 1,
+                    pageSize: 100
+                },
+                total: 0,
+                list: []
+            }
+        },
+        created() {
+          this.getList()
+          this.getBuildList()
+        },
+        methods: {
+            deleteNews(id) {
+                // 删除操作
+                const data = { newsTypeId: id }
+                this.$store.dispatch('news/deleteType', data).then((res) => {
+                    this.getList()
+                }).catch(() => {
+                    console.log('news/deleteType err');
+                })
+            },
+            handleSizeChange(val) {
+                console.log(`每页 ${val} 条`);
+                this.form.pageSize = val
+                this.form.pageNum = 1
+                this.getList()
+            },
+            handleCurrentChange(val) {
+                console.log(`当前页: ${val}`);
+                this.form.pageNum = val
+                this.getList()
+            },
+            getList() {
+              this.$store.dispatch('news/getTypeList', this.form).then((res) => {
+                this.list = res.records
+                this.form.pageNum = res.current
+                this.form.pageSize = res.size
+                this.total = res.total
+              }).catch(() => {
+                  console.log('news/getTypeList err')
+              })
+            },
+            getBuildList() {
+                this.$store.dispatch('building/getBuildings', this.buildingForm).then((res) => {
+                    this.buildingList = res.records
+                }).catch(() => {
+                    console.log('building/getBuildings err')
+                })
+            },
+            ediNewsType() {
+                this.$router.push({ name: 'news-type-edi' })
             }
         }
     }
 </script>
 
 <style scoped>
-
+.operation-class {
+    margin-left: 20px;
+}
+.body {
+    margin-top: 10px;
+}
+.block {
+    display: flex;
+    justify-content: flex-end;
+}
+.delClass {
+    padding-left: 10px;
+    padding-right: 10px;
+}
 </style>