update 后台管理

src/api/hangyezixun.js

@@ -1,36 +1,36 @@
 import request           from '@/utils/request';
 
-const pre = `/industry`
+const pre = `/news`
 
-export function getIndustryAdd(data = {}) {
+export function getNewsAdd(data = {}) {
     return request({
                        url:    `${pre}/add`,
                        method: 'post',
                        data,
                    });
 }
-export function getIndustryDelete(data = {}) {
+export function getNewsDelete(data = {}) {
     return request({
                        url:    `${pre}/delete`,
                        method: 'post',
                        data,
                    });
 }
-export function getIndustryInfo(data = {}) {
+export function getNewsInfo(data = {}) {
     return request({
                        url:    `${pre}/info`,
                        method: 'post',
                        data,
                    });
 }
-export function getIndustryList(data = {}) {
+export function getNewsList(data = {}) {
     return request({
                        url:    `${pre}/list`,
                        method: 'post',
                        data,
                    });
 }
-export function getIndustryUpdate(data = {}) {
+export function getNewsUpdate(data = {}) {
     return request({
                        url:    `${pre}/update`,
                        method: 'post',

src/api/newsClassify.js

@@ -0,0 +1,56 @@
+import request           from '@/utils/request';
+
+const pre = `/news/classify`
+
+export function getNewsClassifyAdd(data = {}) {
+    return request({
+                       url:    `${pre}/add`,
+                       method: 'post',
+                       data,
+                   });
+}
+
+
+export function getNewsClassifyDelete(data = {}) {
+    return request({
+                       url:    `${pre}/delete`,
+                       method: 'post',
+                       data,
+                   });
+}
+
+
+export function getNewsClassifyInfo(data = {}) {
+    return request({
+                       url:    `${pre}/info`,
+                       method: 'post',
+                       data,
+                   });
+}
+
+
+export function getNewsClassifyList(data = {}) {
+    return request({
+                       url:    `${pre}/list`,
+                       method: 'post',
+                       data,
+                   });
+}
+
+
+export function getNewsClassifySearch(data = {}) {
+    return request({
+                       url:    `${pre}/search`,
+                       method: 'post',
+                       data,
+                   });
+}
+
+
+export function getNewsClassifyUpdate(data = {}) {
+    return request({
+                       url:    `${pre}/update`,
+                       method: 'post',
+                       data,
+                   });
+}

src/router.js

@@ -58,11 +58,11 @@ const router = new Router({
                                       },
                                       children:  [
                                           {
-                                              path: '/industry',
-                                              name: 'hangyezixun',
+                                              path: '/news',
+                                              name: 'news',
                                               meta: {
                                                   icon: "",
-                                                  title: "行业资讯"
+                                                  title: "新闻资讯"
                                               },
                                               isAdminMenu: true,
                                               component: () => {
@@ -70,8 +70,8 @@ const router = new Router({
                                               },
                                           },
                                           {
-                                              path: '/industry/config',
-                                              name: 'HangYeZiXunConfig',
+                                              path: '/news/config',
+                                              name: 'newsConfig',
                                               component: () => {
                                                   return import(/* webpackChunkName: "HangYeZiXun" */ './views/management/HangYeZiXun/HangYeZiXunConfig/index.vue');
                                               },
@@ -88,6 +88,18 @@ const router = new Router({
                                                   return import(/* webpackChunkName: "HangYeZiXun" */ './views/management/YouQingLianJie/index.vue');
                                               },
                                           },
+                                          {
+                                              path: '/newsClassify',
+                                              name: 'newsClassify',
+                                              meta: {
+                                                  icon: "",
+                                                  title: "新闻分类"
+                                              },
+                                              isAdminMenu: true,
+                                              component: () => {
+                                                  return import(/* webpackChunkName: "HangYeZiXun" */ './views/management/XinWenFenLei/index.vue');
+                                              },
+                                          },
                                       ],
                                   },
                               ],

src/views/management/HangYeZiXun/HangYeZiXunConfig/index.vue

@@ -25,6 +25,12 @@
                 <el-form-item label="访问次数:" prop="visits">
                     <el-input :maxlength="9" placeholder="请输入访问次数" v-model="configData.visits"></el-input>
                 </el-form-item>
+                <el-form-item label="新闻分类:" prop="newsClassifyId">
+                    <mySelect label="name"
+                              id="newsClassifyId"
+                              @select-change="handleSelectDoChange"
+                              placeholder="请选择新闻分类"></mySelect>
+                </el-form-item>
                 <el-form-item label="图片:" prop="pic">
                     <upload-file :imageUrl="configData.pic"
                                  :showBtnFlag="false"
@@ -54,8 +60,8 @@
             >新增
             </el-button>
             <div v-else>
-                <el-button  type="primary"  @click="handleSave('HangYeZiXun')">保存</el-button>
-                <el-button  type="primary"  @click="back">关闭</el-button>
+                <el-button type="primary" @click="handleSave('HangYeZiXun')">保存</el-button>
+                <el-button type="primary" @click="back">关闭</el-button>
             </div>
 
         </div>
@@ -63,53 +69,80 @@
 </template>
 
 <script>
-    import uploadFile       from './components/uploadFile';
-    import MtaStQuillEditor from '@/components/management/QuillEditor.vue';
-    import * as commonTools from '@/utils/admin/tools';
-    import * as HYZXService from '@/api/hangyezixun';
+    import uploadFile           from './components/uploadFile';
+    import MtaStQuillEditor     from '@/components/management/QuillEditor.vue';
+    import mySelect             from '../components/Select';
+    import * as commonTools     from '@/utils/admin/tools';
+    import * as HYZXService     from '@/api/hangyezixun';
+    import * as NewsClassifyApi from '@/api/newsClassify';
+    import Vue                  from 'vue';
+
+    const selectData = {
+        options:        [],
+        newsClassifyId: null,
+        placeholder:    '请选择新闻资讯分类',
+    };
+    let selectServiceData = Vue.observable(selectData);
 
     export default {
         name:       'HangYeZiXunConfig',
         components: {
             uploadFile,
             MtaStQuillEditor,
+            mySelect,
+        },
+        provide:    {
+            selectServiceData: selectServiceData,
+        },
+        computed:   {
+            newsClassifyId() {
+                return selectServiceData.newsClassifyId;
+            },
         },
         data() {
             return {
                 defaultValue: new Date(),
                 configData:   {
-                    content:   '',
-                    intro:     '',
-                    pic:       '',
-                    startTime: '',
-                    title:     '',
-                    visits:    '',
+                    content:        '',
+                    intro:          '',
+                    pic:            '',
+                    startTime:      '',
+                    newsClassifyId: '',
+                    title:          '',
+                    visits:         '',
                 },
                 configRules:  {
-                    title:     [
+                    title:          [
                         { required: true, message: '标题不能为空', trigger: 'blur' },
                     ],
-                    startTime: [
+                    startTime:      [
                         { required: true, message: '开始时间不能为空', trigger: 'blur' },
                     ],
-                    intro:     [
+                    intro:          [
                         { required: true, message: '描述不能为空', trigger: 'blur' },
                     ],
-                    pic:       [
+                    pic:            [
                         { required: true, message: '图片不能为空', trigger: 'blur' },
                     ],
-                    visits:    [
+                    visits:         [
                         { required: true, message: '访问次数不能为空', trigger: 'blur' },
                     ],
-                    content:   [
+                    content:        [
                         { required: true, message: '行业详情不能为空', trigger: 'blur' },
                     ],
+                    newsClassifyId: [
+                        { required: true, message: '请选择新闻分类', trigger: 'blur' },
+                    ],
                 },
                 queryData:    null,
                 userId:       null,
             };
         },
-        methods: {
+        methods:    {
+            handleSelectDoChange(data) {
+                console.log('change', data);
+                this.configData.newsClassifyId = data;
+            },
             back() {
                 window.history.go(-1);
             },
@@ -140,7 +173,8 @@
                 });
             },
             initPageData(data) {
-                // this.configData.content = data.content;
+                selectServiceData.newsClassifyId = data.newsClassifyId;
+                this.configData.newsClassifyId = data.newsClassifyId;
                 this.$refs.editorQuill.setContent(data.content);
                 this.configData.intro = data.intro;
                 this.configData.pic = data.pic;
@@ -156,7 +190,13 @@
 
                 const loading = this.$loading({ background: 'rgba(0, 0, 0, 0.7)' });
                 try {
-                    const res = await HYZXService.getIndustryInfo(opt);
+
+                    // 新闻资讯分类
+                    const { data: newsClassifyArr } = await NewsClassifyApi.getNewsClassifySearch();
+
+                    selectServiceData.options = newsClassifyArr;
+
+                    const res = await HYZXService.getNewsInfo(opt);
                     if (res.code === 0) {
                         this.initPageData(res.data);
                     }
@@ -197,13 +237,25 @@
             },
             handleAddHangYeZiXun() {
                 const opt = this.getOptions();
-                return HYZXService.getIndustryAdd(opt);
+                return HYZXService.getNewsAdd(opt);
             },
             handleSaveHangYeZiXun() {
                 const opt = this.getOptions();
-                const newOpt = Object.assign(opt, {iiId: this.queryData.iiId})
-                return HYZXService.getIndustryUpdate(newOpt);
-            }
+                const newOpt = Object.assign(opt, { iiId: this.queryData.iiId });
+                return HYZXService.getNewsUpdate(newOpt);
+            },
+            async initPage() {
+                // 新闻资讯分类
+                const loading = this.$loading({ background: 'rgba(0, 0, 0, 0.7)' });
+                try {
+                    const { data: newsClassifyArr } = await NewsClassifyApi.getNewsClassifySearch();
+                    selectServiceData.options = newsClassifyArr;
+                    loading.close();
+                } catch (e) {
+                    loading.close();
+                }
+
+            },
         },
         created() {
             this.queryData = this.$route.query;
@@ -213,6 +265,8 @@
         mounted() {
             if (this.queryData.code === 'editor' && this.queryData.iiId) {
                 this.recoverPage();
+            } else {
+                this.initPage();
             }
         },
     };

src/views/management/HangYeZiXun/components/Pagination.vue

@@ -11,17 +11,20 @@
 </template>
 
 <script>
-    import { paginationServiceData, defaultPageSizes } from './paginationData';
-
     export default {
         name:     'Pagination',
         props:    {
             pageSizes: {
                 type:    Array,
-                default: () => defaultPageSizes,
+                default: () => [],
             },
         },
         inject:   {
+            paginationServiceData: {
+                type:    Object,
+                default: () => {
+                },
+            },
             tableServiceData: {
                 type:    Object,
                 default: () => {
@@ -31,26 +34,26 @@
         computed: {
             page:  {
                 get() {
-                    return paginationServiceData.page;
+                    return this.paginationServiceData.page;
                 },
                 set(val) {
-                    paginationServiceData.page = val;
+                    this.paginationServiceData.page = val;
                 },
             },
             size:  {
                 get() {
-                    return paginationServiceData.size;
+                    return this.paginationServiceData.size;
                 },
                 set(val) {
-                    paginationServiceData.size = val;
+                    this.paginationServiceData.size = val;
                 },
             },
             total: {
                 get() {
-                    return paginationServiceData.total;
+                    return this.paginationServiceData.total;
                 },
                 set(val) {
-                    this.paginationServiceData.total = val;
+                    this.this.paginationServiceData.total = val;
                 },
             },
         },

src/views/management/HangYeZiXun/components/Select.vue

@@ -0,0 +1,69 @@
+<template>
+    <el-select v-model="value" clearable :placeholder="placeholder" @change="selectChange">
+        <el-option
+                v-for="item in options"
+                :key="item[id]"
+                :label="item[label]"
+                :value="item[id]">
+        </el-option>
+    </el-select>
+</template>
+
+<script>
+    export default {
+        name: 'Select',
+
+        props: {
+            placeholder: {
+                type: String,
+                default: '请选择'
+            },
+            id: {
+                type: String,
+                default: 'id'
+            },
+            label: {
+                type: String,
+                default: 'name'
+            }
+        },
+
+        inject: {
+            selectServiceData: {
+                type:    Object,
+                default: () => {
+                },
+            },
+        },
+
+        computed: {
+            options() {
+                return this.selectServiceData.options;
+            },
+            value:   {
+                get() {
+                    return this.selectServiceData[this.id];
+                },
+                set(val) {
+                    console.log(val)
+                    this.selectServiceData[this.id] = val;
+                },
+            },
+        },
+
+        methods: {
+            selectChange(val) {
+                console.log(val)
+                this.$emit('select-change', val)
+            }
+        },
+
+        destroyed() {
+            this.selectServiceData[this.id] = null;
+        }
+    };
+</script>
+
+<style scoped>
+
+</style>

src/views/management/HangYeZiXun/components/Table.vue

@@ -12,16 +12,19 @@
         <el-table-column
                 prop="title"
                 label="标题"
-                :show-overflow-tooltip="true"
                 width="360">
         </el-table-column>
         <el-table-column
                 prop="intro"
                 label="描述"
-                :show-overflow-tooltip="true"
                 width="360">
         </el-table-column>
         <el-table-column
+                prop="newsClassifyName"
+                label="新闻分类"
+                width="200">
+        </el-table-column>
+        <el-table-column
                 prop="pic"
                 label="图片"
                 width="300">
@@ -47,6 +50,7 @@
         </el-table-column>
         <el-table-column
                 label="操作"
+                fixed="right"
         >
             <template slot-scope="scope">
                 <el-button type="text" @click="handleEditor(scope.row)">编辑</el-button>

src/views/management/HangYeZiXun/index.vue

@@ -2,8 +2,19 @@
     <div class="admin-hangyezixun-page">
         <div class="admin-hangyexuzhi">
             <div class="top">
-                <el-button class="btn-add" size="mini" type="primary" @click="handleAddHangYeZiXun">新增</el-button>
-                <el-button class="btn-add" size="mini" type="primary" @click="handleDeleteHangYeZiXun">删除</el-button>
+                <div>
+                    <mySelect
+                            label="name"
+                            id="newsClassifyId"
+                            placeholder="请选择新闻分类"
+                    ></mySelect>
+                    <el-button class="btn-search" size="mini" type="primary" @click="handleSearch">查询</el-button>
+                </div>
+                <div>
+                    <el-button size="mini" type="primary" @click="handleAddHangYeZiXun">新增</el-button>
+                    <el-button size="mini" type="primary" @click="handleDeleteHangYeZiXun">删除
+                    </el-button>
+                </div>
             </div>
             <myTable
                     @editor="handleEditor"
@@ -12,6 +23,7 @@
             />
             <myPagination
                     class="my-Pagination"
+                    :pageSizes="defaultPageSizes"
                     @size-change="handleSizeChange"
                     @current-page="handleCurrentPage"
             />
@@ -20,32 +32,55 @@
 </template>
 
 <script>
-    import { tableServiceData }      from './components/tableData';
-    import { paginationServiceData } from './components/paginationData';
     import myPagination              from './components/Pagination';
     import myTable                   from './components/Table';
     import * as HYZXApi              from '@/api/hangyezixun';
+    import * as NewsClassifyApi      from '@/api/newsClassify';
+    import mySelect                  from './components/Select';
+    import Vue                       from 'vue';
 
     const CHANGEPAGECODE = {
         add:    'add',
         editor: 'editor',
     };
+    const selectData = {
+        options:        [],
+        newsClassifyId: null,
+        placeholder:    '请选择新闻资讯分类',
+    };
+    const tableData = {
+        myData: []
+    }
+
+    const pagination = {
+        page:  1,
+        size:  10,
+        total: 0,
+    };
+
+    const defaultPageSizes = [10, 20, 30, 40];
+    const tableServiceData = Vue.observable(tableData);
+    const selectServiceData = Vue.observable(selectData);
+    const paginationServiceData = Vue.observable(pagination);
 
     export default {
         name:       'Hangyexuzhi',
         provide:    {
             tableServiceData,
             paginationServiceData,
+            selectServiceData,
         },
         data() {
             return {
-                curIiId:         null,
-                tableSelectData: [],
+                defaultPageSizes: defaultPageSizes,
+                curIiId:          null,
+                tableSelectData:  [],
             };
         },
         components: {
             myPagination,
             myTable,
+            mySelect,
         },
         computed:   {
             myPage() {
@@ -57,8 +92,15 @@
             myTotal() {
                 return paginationServiceData.total;
             },
+            newsClassifyId() {
+                return selectServiceData.newsClassifyId;
+            },
         },
         methods:    {
+
+            handleSearch() {
+                this.getHangYeZiXunData();
+            },
             handleEditor(data) {
                 this.curIiId = data.iiId;
                 this.changePage(CHANGEPAGECODE.editor);
@@ -93,13 +135,13 @@
                 };
                 const loading = this.$loading({ background: 'rgba(0, 0, 0, 0.7)' });
                 try {
-                    const res = await HYZXApi.getIndustryDelete(opt);
+                    const res = await HYZXApi.getNewsDelete(opt);
                     loading.close();
                     if (res.code === 0 && res.data) {
                         // 删除成功重置选择状态
                         this.tableSelectData = [];
                         const newOpt = this.getOption();
-                        const res = await HYZXApi.getIndustryList(newOpt);
+                        const res = await HYZXApi.getNewsList(newOpt);
                         if (res.code === 0) {
                             this.initPageData(res.data);
                         }
@@ -111,18 +153,19 @@
             },
             getOption() {
                 const opt = {
-                    page: this.myPage,
-                    size: this.mySize,
+                    page:           this.myPage,
+                    size:           this.mySize,
+                    newsClassifyId: this.newsClassifyId,
                 };
                 return opt;
             },
             changePage(code) {
                 switch (code) {
                     case CHANGEPAGECODE.add:
-                        this.$router.push({ name: 'HangYeZiXunConfig', query: { code: 'add' } });
+                        this.$router.push({ name: 'newsConfig', query: { code: 'add' } });
                         break;
                     case CHANGEPAGECODE.editor:
-                        this.$router.push({ name: 'HangYeZiXunConfig', query: { code: 'editor', iiId: this.curIiId } });
+                        this.$router.push({ name: 'newsConfig', query: { code: 'editor', iiId: this.curIiId } });
                         break;
                     default:
                         break;
@@ -134,7 +177,7 @@
                 const loading = this.$loading({ background: 'rgba(0, 0, 0, 0.7)' });
 
                 try {
-                    const res = await HYZXApi.getIndustryList(opt);
+                    const res = await HYZXApi.getNewsList(opt);
                     if (res.code === 0) {
                         // 渲染页面
                         this.initPageData(res.data);
@@ -148,10 +191,10 @@
             async getHangYeZiXunDelete(opt) {
                 const loading = this.$loading({ background: 'rgba(0, 0, 0, 0.7)' });
                 try {
-                    const res = await HYZXApi.getIndustryDelete(opt);
+                    const res = await HYZXApi.getNewsDelete(opt);
                     loading.close();
                     if (res.code === 0 && res.data) {
-                        const res = await HYZXApi.getIndustryList(opt);
+                        const res = await HYZXApi.getNewsList(opt);
                         if (res.code === 0) {
                             this.initPageData(res.data);
                         }
@@ -166,9 +209,31 @@
                 tableServiceData.myData = listData.data;
                 paginationServiceData.total = listData.total;
             },
+            // 修正初始化
+            async initPageService() {
+                const loading = this.$loading({ background: 'rgba(0, 0, 0, 0.7)' });
+                try {
+                    // 新闻资讯分类
+                    const { data: newsClassifyArr } = await NewsClassifyApi.getNewsClassifySearch();
+                    selectServiceData.options = newsClassifyArr;
+
+                    // 新闻资讯列表
+                    const opt = this.getOption();
+                    const { code, data } = await HYZXApi.getNewsList(opt);
+                    console.log(code, data);
+                    if (code === 0) {
+                        // 渲染页面
+                        this.initPageData(data);
+                    }
+
+                    loading.close();
+                } catch (e) {
+                    loading.close();
+                }
+            },
         },
         created() {
-            this.getHangYeZiXunData();
+            this.initPageService();
         },
     };
 </script>
@@ -179,16 +244,16 @@
 
         .top {
             display: flex;
-            justify-content: flex-end;
+            justify-content: space-between;
             margin-bottom: 10px;
 
-            .btn-add {
-
+            .btn-search {
+                margin-left: 20px;
             }
         }
 
         .my-Pagination {
-           margin-top: 20px;
+            margin-top: 20px;
         }
     }
 </style>

src/views/management/XinWenFenLei/components/Pagination.vue

@@ -0,0 +1,78 @@
+<template>
+    <el-pagination
+            @size-change="handleSizeChange"
+            @current-change="handleCurrentChange"
+            :current-page.sync="page"
+            :page-sizes="pageSizes"
+            :page-size="size"
+            layout="total, sizes, prev, pager, next, jumper"
+            :total="total">
+    </el-pagination>
+</template>
+
+<script>
+    import { paginationServiceData, defaultPageSizes } from './paginationData';
+
+    export default {
+        name:     'Pagination',
+        props:    {
+            pageSizes: {
+                type:    Array,
+                default: () => defaultPageSizes,
+            },
+        },
+        inject:   {
+            tableServiceData: {
+                type:    Object,
+                default: () => {
+                },
+            },
+        },
+        computed: {
+            page:  {
+                get() {
+                    return paginationServiceData.page;
+                },
+                set(val) {
+                    paginationServiceData.page = val;
+                },
+            },
+            size:  {
+                get() {
+                    return paginationServiceData.size;
+                },
+                set(val) {
+                    paginationServiceData.size = val;
+                },
+            },
+            total: {
+                get() {
+                    return paginationServiceData.total;
+                },
+                set(val) {
+                    this.paginationServiceData.total = val;
+                },
+            },
+        },
+        watch:    {
+            total(newVal) {
+                if (newVal >= this.size && !this.tableServiceData.myData.length && this.page > 1) {
+                    this.page--;
+                    this.$emit('current-page', this.page);
+                }
+            },
+        },
+        methods:  {
+            handleSizeChange(val) {
+                this.$emit('size-change', val);
+            },
+            handleCurrentChange(val) {
+                this.$emit('current-page', val);
+            },
+        },
+    };
+</script>
+
+<style scoped>
+
+</style>

src/views/management/XinWenFenLei/components/Table.vue

@@ -0,0 +1,113 @@
+<template>
+    <el-table
+            :data="tableData"
+            border
+            class="table"
+            @selection-change="handleSelectionChange"
+            style="width: 100%">
+        <el-table-column
+                type="selection"
+                width="55">
+        </el-table-column>
+        <el-table-column
+                prop="name"
+                label="新闻分类名称"
+                :show-overflow-tooltip="true"
+                width="360">
+        </el-table-column>
+        <el-table-column
+                prop="number"
+                label="序号"
+                :show-overflow-tooltip="true"
+                width="200">
+        </el-table-column>
+        <el-table-column
+                prop="createTime"
+                label="创建时间"
+                :show-overflow-tooltip="true"
+                width="200">
+        </el-table-column>
+        <el-table-column
+                prop="updateTime"
+                label="更新时间"
+                :show-overflow-tooltip="true"
+                width="200">
+        </el-table-column>
+        <el-table-column
+                prop="updateUserName"
+                label="更新者"
+                :show-overflow-tooltip="true"
+                width="200">
+        </el-table-column>
+        <el-table-column
+                prop="createUserName"
+                label="创建者"
+                :show-overflow-tooltip="true"
+                width="200">
+        </el-table-column>
+        <el-table-column
+                label="操作"
+        >
+            <template slot-scope="scope">
+                <el-button type="text" @click="handleEditor(scope.row)">编辑</el-button>
+            </template>
+        </el-table-column>
+    </el-table>
+</template>
+
+<script>
+    export default {
+        name:     'Table',
+        inject:   {
+            tableServiceData:      {
+                type:    Object,
+                default: () => {
+                },
+            },
+            paginationServiceData: {
+                type:    Object,
+                default: () => {
+                },
+            },
+        },
+        computed: {
+            tableData() {
+                return this.tableServiceData.myData;
+            },
+        },
+        methods:  {
+            handleSelectionChange(data) {
+                const arr = [];
+                data.forEach(item => {
+                    arr.push(item.newsClassifyId);
+                });
+                this.$emit('select-change', arr);
+            },
+            handleEditor(data) {
+                this.$emit('editor', data);
+            },
+        },
+    };
+</script>
+
+<style lang="scss" scoped>
+    .table {
+        ::v-deep .is-leaf {
+            .cell {
+                text-align: center;
+            }
+        }
+
+        ::v-deep .el-table-column--selection {
+            .cell {
+                text-align: center;
+            }
+        }
+
+        .table-link {
+            text-decoration: none;
+            color: #2C98F2;
+        }
+    }
+
+</style>

src/views/management/XinWenFenLei/index.vue

@@ -0,0 +1,324 @@
+<template>
+    <div class="admin-YouQingLianJie">
+        <!--    搜索    -->
+        <div class="yqlj-search">
+            <div>
+                <el-input
+                        class="search-name"
+                        placeholder="请输入新闻分类名称"
+                        v-model="searchData"
+                        clearable>
+                </el-input>
+                <el-button size="mini" type="primary" @click="handleSearch">查询</el-button>
+            </div>
+            <div>
+                <el-button size="mini" plain @click="handleDelete">删除</el-button>
+                <el-button size="mini" type="primary" @click="handleOpenAdd">新增</el-button>
+            </div>
+        </div>
+        <!--    table    -->
+        <myTable
+                class="yqlj-table"
+                @editor="handleOpenEditor"
+                @delete="handleDelete"
+                @select-change="handleSelectChange" />
+
+        <!--    分页    -->
+        <myPagination
+                class="yqlj-pagination"
+                @size-change="handleSizeChange"
+                @current-page="handleCurrentPage" />
+
+        <!--    弹窗 新增   -->
+        <el-dialog
+                title="新增新闻分类"
+                :visible.sync="addDialogVisit"
+                width="30%"
+                @close="handleResetLinks('addForm')"
+                center>
+            <div class="add-dialog-content">
+                <el-form :model="addForm" :rules="addRules" ref="addForm" label-width="80px" class="demo-ruleForm">
+                    <el-form-item label="名称:" prop="name">
+                        <el-input v-model="addForm.name"></el-input>
+                    </el-form-item>
+                    <el-form-item label="序号:" prop="number">
+                        <el-input v-model="addForm.number"></el-input>
+                    </el-form-item>
+                </el-form>
+            </div>
+            <span slot="footer" class="dialog-footer">
+                <el-button size="mini" @click="addDialogVisit = false">取 消</el-button>
+                <el-button size="mini" type="primary" @click="handleAddLinks('addForm')">确 定</el-button>
+            </span>
+        </el-dialog>
+        <!--    弹窗 编辑   -->
+        <el-dialog
+                title="编辑新闻分类"
+                :visible.sync="editorDialogVisit"
+                width="30%"
+                @close="handleEditorReset('editorForm')"
+                @open="handleGetLinksInfo"
+                center>
+            <div class="add-dialog-content">
+                <el-form :model="editorForm" :rules="editorRules" ref="editorForm" label-width="80px"
+                         class="demo-ruleForm">
+                    <el-form-item label="名称:" prop="name">
+                        <el-input v-model="editorForm.name"></el-input>
+                    </el-form-item>
+                    <el-form-item label="序号:" prop="number">
+                        <el-input v-model="editorForm.number"></el-input>
+                    </el-form-item>
+                </el-form>
+            </div>
+            <span slot="footer" class="dialog-footer">
+                <el-button size="mini" @click="editorDialogVisit = false">取 消</el-button>
+                <el-button size="mini" type="primary" @click="handleEditorLinks('editorForm')">确 定</el-button>
+            </span>
+        </el-dialog>
+    </div>
+</template>
+
+<script>
+    import { tableServiceData }      from './components/tableData';
+    import { paginationServiceData } from './components/paginationData';
+    import myPagination              from './components/Pagination';
+    import myTable                   from './components/Table';
+    import * as NewsClassifyService  from '@/api/newsClassify';
+    import * as comminUtil           from '@/utils/admin/tools';
+
+    export default {
+        name:       'YouQingLianJie',
+        provide:    {
+            tableServiceData,
+            paginationServiceData,
+        },
+        components: {
+            myPagination,
+            myTable,
+        },
+        data() {
+            return {
+                addDialogVisit:    false,
+                editorDialogVisit: false,
+                searchData:        '',
+                tableSelectData:   [],
+                addForm:           {
+                    name:   '',
+                    number: 0,
+                },
+                addRules:          {
+                    name:   [
+                        { required: true, message: '友情链接名称不能为空', trigger: 'blur' },
+                    ],
+                    number: [
+                        { required: true, message: '序号不能为空', trigger: 'blur' },
+                    ],
+                },
+                editorForm:        {
+                    name:   '',
+                    number: 0,
+                },
+                editorRules:       {
+                    name:   [
+                        { required: true, message: '友情链接名称不能为空', trigger: 'blur' },
+                    ],
+                    number: [
+                        { required: true, message: '序号不能为空', trigger: 'blur' },
+                    ],
+                },
+                userId:            null,
+                selectRow:         null,
+            };
+        },
+        computed:   {
+            myPage() {
+                return paginationServiceData.page;
+            },
+            mySize() {
+                return paginationServiceData.size;
+            },
+            myTotal() {
+                return paginationServiceData.total;
+            },
+        },
+        methods:    {
+            handleResetLinks(formName) {
+                this.$refs[formName].resetFields();
+                this.addDialogVisit = false;
+            },
+            handleAddLinks(formName) {
+                this.$refs[formName].validate((valid) => {
+                    if (valid) {
+                        this.addLinksFun();
+                    } else {
+                        return false;
+                    }
+                });
+            },
+            async addLinksFun() {
+                const loading = this.$loading({ background: 'rgba(0, 0, 0, 0.7)' });
+                try {
+                    const opt = Object.assign({}, this.addForm, { userId: this.userId });
+                    const res = await NewsClassifyService.getNewsClassifyAdd(opt);
+                    if (res.code === 0) {
+                        this.addDialogVisit = false;
+                        const opt = this.getOption();
+                        const myData = await NewsClassifyService.getNewsClassifyList(opt);
+                        this.initPageData(myData.data);
+                        loading.close();
+                    }
+                } catch (e) {
+                    loading.close();
+                }
+                this.addDialogVisit = false;
+            },
+            handleGetLinksInfo() {
+                const opt = { newsClassifyId: this.selectRow.newsClassifyId };
+                const loading = this.$loading({ background: 'rgba(0, 0, 0, 0.7)' });
+                NewsClassifyService.getNewsClassifyInfo(opt)
+                           .then(res => {
+                               const { name, number } = res.data;
+                               this.editorForm.name = name;
+                               this.editorForm.number = number;
+                               loading.close();
+                           })
+                           .catch(err => {
+                               loading.close();
+                           });
+            },
+            handleEditorReset(formName) {
+                this.$refs[formName].resetFields();
+                this.addDialogVisit = false;
+            },
+            handleEditorLinks(formName) {
+                this.$refs[formName].validate((valid) => {
+                    if (valid) {
+                        this.editorLinksFun();
+                    } else {
+                        return false;
+                    }
+                });
+            },
+            async editorLinksFun() {
+                const loading = this.$loading({ background: 'rgba(0, 0, 0, 0.7)' });
+                try {
+                    const opt = Object.assign({}, this.editorForm, { userId: this.userId, newsClassifyId: this.selectRow.newsClassifyId });
+                    const res = await NewsClassifyService.getNewsClassifyUpdate(opt);
+                    if (res.code === 0) {
+                        this.editorDialogVisit = false;
+                        const opt = this.getOption();
+                        const myData = await NewsClassifyService.getNewsClassifyList(opt);
+                        this.initPageData(myData.data);
+                        loading.close();
+                    }
+
+                    loading.close();
+                } catch (e) {
+                    loading.close();
+                }
+                this.addDialogVisit = false;
+            },
+            getOption() {
+                const opt = {
+                    page: this.myPage,
+                    size: this.mySize,
+                    name: this.searchData,
+                };
+                return opt;
+            },
+            handleSearch() {
+                paginationServiceData.page = 1;
+                this.searchYouQingData();
+            },
+            handleOpenAdd() {
+                this.addDialogVisit = true;
+            },
+            handleOpenEditor(data) {
+                this.selectRow = data;
+                this.editorDialogVisit = true;
+            },
+            async handleDelete() {
+                if (!this.tableSelectData.length) {
+                    this.$message.warning('请选择至少一条需要删除的数据');
+                    return;
+                }
+                const opt = {
+                    newsClassifyIds: [...this.tableSelectData],
+                };
+                const loading = this.$loading({ background: 'rgba(0, 0, 0, 0.7)' });
+                try {
+                    const res = await NewsClassifyService.getNewsClassifyDelete(opt);
+                    loading.close();
+                    if (res.code === 0 && res.data) {
+                        // 删除成功重置选择状态
+                        this.tableSelectData = [];
+                        // 刷新页面
+                        const newOpt = this.getOption();
+                        const res = await NewsClassifyService.getNewsClassifyList(newOpt);
+                        if (res.code === 0) {
+                            this.initPageData(res.data);
+                        }
+                        loading.close();
+                    }
+                } catch (err) {
+                    loading.close();
+                }
+            },
+            searchYouQingData() {
+                const opt = this.getOption();
+                const loading = this.$loading({ background: 'rgba(0, 0, 0, 0.7)' });
+                NewsClassifyService.getNewsClassifyList(opt)
+                           .then(res => {
+                               this.initPageData(res.data);
+                               loading.close();
+                           })
+                           .catch(err => {
+                               loading.close();
+                           });
+            },
+            handleSizeChange(size) {
+                paginationServiceData.size = size;
+                this.searchYouQingData();
+            },
+            handleCurrentPage(page) {
+                paginationServiceData.page = page;
+                this.searchYouQingData();
+            },
+            handleSelectChange(data) {
+                this.tableSelectData = data;
+            },
+            initPageData(listData) {
+                tableServiceData.myData = listData.data;
+                paginationServiceData.total = listData.total;
+            },
+        },
+        created() {
+            const userAuth = comminUtil.getUserAuth();
+            this.userId = userAuth && userAuth.userId ? userAuth.userId : null;
+        },
+        mounted() {
+            this.searchYouQingData();
+        },
+    };
+</script>
+
+<style lang="scss" scoped>
+    .admin-YouQingLianJie {
+        padding: 20px;
+
+        .yqlj-search {
+            display: flex;
+            justify-content: space-between;
+            margin-bottom: 20px;
+
+            .search-name {
+                width: 220px;
+                margin-right: 10px;
+            }
+        }
+
+        .yqlj-pagination {
+            margin-top: 20px;
+        }
+    }
+</style>

src/views/management/YouQingLianJie/components/Pagination.vue

@@ -11,17 +11,20 @@
 </template>
 
 <script>
-    import { paginationServiceData, defaultPageSizes } from './paginationData';
-
     export default {
         name:     'Pagination',
         props:    {
             pageSizes: {
                 type:    Array,
-                default: () => defaultPageSizes,
+                default: () => [],
             },
         },
         inject:   {
+            paginationServiceData: {
+                type:    Object,
+                default: () => {
+                },
+            },
             tableServiceData: {
                 type:    Object,
                 default: () => {
@@ -31,23 +34,23 @@
         computed: {
             page:  {
                 get() {
-                    return paginationServiceData.page;
+                    return this.paginationServiceData.page;
                 },
                 set(val) {
-                    paginationServiceData.page = val;
+                    this.paginationServiceData.page = val;
                 },
             },
             size:  {
                 get() {
-                    return paginationServiceData.size;
+                    return this.paginationServiceData.size;
                 },
                 set(val) {
-                    paginationServiceData.size = val;
+                    this.paginationServiceData.size = val;
                 },
             },
             total: {
                 get() {
-                    return paginationServiceData.total;
+                    return this.paginationServiceData.total;
                 },
                 set(val) {
                     this.paginationServiceData.total = val;
@@ -70,6 +73,9 @@
                 this.$emit('current-page', val);
             },
         },
+        beforeDestroy() {
+            // this.paginationServiceData.clearData();
+        }
     };
 </script>
 

src/views/management/YouQingLianJie/components/Table.vue

@@ -11,7 +11,7 @@
         </el-table-column>
         <el-table-column
                 prop="name"
-                label="名称"
+                label="友情链接名称"
                 :show-overflow-tooltip="true"
                 width="200">
         </el-table-column>

src/views/management/YouQingLianJie/components/paginationData.js

@@ -1,14 +0,0 @@
-import Vue from 'vue';
-
-const pagination = {
-    page: 1,
-    size: 10,
-    total: 0
-}
-const defaultPageSizes = [10, 20, 30, 40];
-const paginationServiceData = Vue.observable(pagination);
-
-export {
-    paginationServiceData,
-    defaultPageSizes
-}

src/views/management/YouQingLianJie/components/tableData.js

@@ -1,11 +0,0 @@
-import Vue from 'vue';
-
-const tableData = {
-    myData: []
-}
-
-const tableServiceData = Vue.observable(tableData);
-
-export {
-    tableServiceData
-}

src/views/management/YouQingLianJie/index.vue

@@ -5,7 +5,7 @@
             <div>
                 <el-input
                         class="search-name"
-                        placeholder="请输入内容"
+                        placeholder="请输入友情链接名称"
                         v-model="searchData"
                         clearable>
                 </el-input>
@@ -26,6 +26,7 @@
         <!--    分页    -->
         <myPagination
                 class="yqlj-pagination"
+                :pageSizes="defaultPageSizes"
                 @size-change="handleSizeChange"
                 @current-page="handleCurrentPage" />
 
@@ -79,16 +80,30 @@
 </template>
 
 <script>
-    import { tableServiceData }      from './components/tableData';
-    import { paginationServiceData } from './components/paginationData';
-    import myPagination              from './components/Pagination';
-    import myTable                   from './components/Table';
-    import * as YQLJService          from '@/api/youqinglianjie';
-    import * as comminUtil           from '@/utils/admin/tools';
+    import myPagination     from './components/Pagination';
+    import myTable          from './components/Table';
+    import * as YQLJService from '@/api/youqinglianjie';
+    import * as comminUtil  from '@/utils/admin/tools';
+    import Vue              from 'vue';
 
+    const tableData = {
+        myData: [],
+    };
+
+    const pagination = {
+        page:  1,
+        size:  10,
+        total: 0,
+    };
+
+    const defaultPageSizes = [10, 20, 30, 40];
+
+    const paginationServiceData = Vue.observable(pagination);
+    const tableServiceData = Vue.observable(tableData);
     export default {
         name:       'YouQingLianJie',
         provide:    {
+            defaultPageSizes,
             tableServiceData,
             paginationServiceData,
         },
@@ -98,6 +113,7 @@
         },
         data() {
             return {
+                defaultPageSizes:  defaultPageSizes,
                 addDialogVisit:    false,
                 editorDialogVisit: false,
                 searchData:        '',