update 友情链接

.env.development

@@ -4,8 +4,8 @@ ENV = 'development'
 # base api
 PUBLIC_PATH = '/'
 ASSETS_DIR = 'assets'
-VUE_APP_BASE_API = 'http://192.168.0.128:8080'
-VUE_APP_BASE_API_TARGET = 'http://192.168.0.128:8080'
+VUE_APP_BASE_API = 'http://192.168.0.179:8100'
+VUE_APP_BASE_API_TARGET = 'http://192.168.0.179:8100'
 
 # VUE_APP_BASE_API = 'http://192.168.0.179:8099'
 # VUE_APP_BASE_API_TARGET = 'http://192.168.0.179:8099'

src/api/youqinglianjie.js

@@ -0,0 +1,43 @@
+import request           from '@/utils/request';
+
+const pre = `/links`
+
+export function getLinksAdd(data = {}) {
+    return request({
+                       url:    `${pre}/add`,
+                       method: 'post',
+                       data,
+                   });
+}
+
+export function getLinksDelete(data = {}) {
+    return request({
+                       url:    `${pre}/delete`,
+                       method: 'post',
+                       data,
+                   });
+}
+
+export function getLinksInfo(data = {}) {
+    return request({
+                       url:    `${pre}/info`,
+                       method: 'post',
+                       data,
+                   });
+}
+
+export function getLinksList(data = {}) {
+    return request({
+                       url:    `${pre}/list`,
+                       method: 'post',
+                       data,
+                   });
+}
+
+export function getLinksUpdate(data = {}) {
+    return request({
+                       url:    `${pre}/update`,
+                       method: 'post',
+                       data,
+                   });
+}

src/router.js

@@ -85,7 +85,7 @@ const router = new Router({
                                               },
                                               isAdminMenu: true,
                                               component: () => {
-                                                  return import(/* webpackChunkName: "HangYeZiXun" */ './views/management/HangYeZiXun/YouQingLianJie/index.vue');
+                                                  return import(/* webpackChunkName: "HangYeZiXun" */ './views/management/YouQingLianJie/index.vue');
                                               },
                                           },
                                       ],

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

@@ -1,15 +0,0 @@
-<template>
-    <div>
-        友情链接
-    </div>
-</template>
-
-<script>
-    export default {
-        name: 'YouQingLianJie',
-    };
-</script>
-
-<style lang="scss" scoped>
-
-</style>

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

@@ -2,7 +2,7 @@
     <el-pagination
             @size-change="handleSizeChange"
             @current-change="handleCurrentChange"
-            :current-page="page"
+            :current-page.sync="page"
             :page-sizes="pageSizes"
             :page-size="size"
             layout="total, sizes, prev, pager, next, jumper"
@@ -14,29 +14,36 @@
     import { paginationServiceData, defaultPageSizes } from './paginationData';
 
     export default {
-        name: 'Pagination',
-        props: {
+        name:     'Pagination',
+        props:    {
             pageSizes: {
-                type: Array,
-                default: () => defaultPageSizes
-            }
+                type:    Array,
+                default: () => defaultPageSizes,
+            },
+        },
+        inject:   {
+            tableServiceData: {
+                type:    Object,
+                default: () => {
+                },
+            },
         },
         computed: {
-            page: {
-                get () {
+            page:  {
+                get() {
                     return paginationServiceData.page;
                 },
                 set(val) {
-                    paginationServiceData.size = val;
-                }
+                    paginationServiceData.page = val;
+                },
             },
-            size: {
-                get () {
+            size:  {
+                get() {
                     return paginationServiceData.size;
                 },
                 set(val) {
                     paginationServiceData.size = val;
-                }
+                },
             },
             total: {
                 get() {
@@ -44,13 +51,25 @@
                 },
                 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);
+            },
         },
-        methods: {
-            handleSizeChange() {},
-            handleCurrentChange() {},
-        }
     };
 </script>
 

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

@@ -44,7 +44,7 @@
         >
             <template slot-scope="scope">
                 <el-button type="text" @click="handleEditor(scope.row)">编辑</el-button>
-                <el-button type="text" @click="handleDelete(scope.row)">删除</el-button>
+                <el-button type="text" v-if="false" @click="handleDelete(scope.row)">删除</el-button>
             </template>
         </el-table-column>
     </el-table>
@@ -72,7 +72,6 @@
         },
         methods:  {
             handleSelectionChange(data) {
-                console.log(data);
                 const arr = [];
                 data.forEach(item => {
                     arr.push(item.iiId)

src/views/management/HangYeZiXun/index.vue

@@ -3,14 +3,17 @@
         <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>
+                <el-button class="btn-add" size="mini" type="primary" @click="handleDeleteHangYeZiXun">删除</el-button>
             </div>
             <myTable
                     @editor="handleEditor"
                     @delete="handleDelete"
                     @select-change="handleSelectChange"
             />
-            <myPagination />
+            <myPagination
+                    @size-change="handleSizeChange"
+                    @current-page="handleCurrentPage"
+            />
         </div>
     </div>
 </template>
@@ -18,9 +21,9 @@
 <script>
     import { tableServiceData }      from './components/tableData';
     import { paginationServiceData } from './components/paginationData';
-    import * as HYZXApi              from '@/api/hangyezixun';
     import myPagination              from './components/Pagination';
     import myTable                   from './components/Table';
+    import * as HYZXApi              from '@/api/hangyezixun';
 
     const CHANGEPAGECODE = {
         add:    'add',
@@ -73,6 +76,14 @@
             handleAddHangYeZiXun() {
                 this.changePage(CHANGEPAGECODE.add);
             },
+            handleSizeChange(size) {
+                paginationServiceData.size = size;
+                this.getHangYeZiXunData();
+            },
+            handleCurrentPage(page) {
+                paginationServiceData.page = page;
+                this.getHangYeZiXunData();
+            },
             async handleDeleteHangYeZiXun() {
                 if (!this.tableSelectData.length) {
                     this.$message.warning('请选择至少一条需要删除的数据');
@@ -88,8 +99,8 @@
                     if (res.code === 0 && res.data) {
                         // 删除成功重置选择状态
                         this.tableSelectData = [];
-
-                        const res = await HYZXApi.getIndustryList(opt);
+                        const newOpt = this.getOption();
+                        const res = await HYZXApi.getIndustryList(newOpt);
                         if (res.code === 0) {
                             this.initPageData(res.data);
                         }

src/views/management/YouQingLianJie/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/YouQingLianJie/components/Table.vue

@@ -0,0 +1,100 @@
+<template>
+    <el-table
+            :data="tableData"
+            border
+            @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="200">
+        </el-table-column>
+        <el-table-column
+                prop="url"
+                label="链接"
+                :show-overflow-tooltip="true"
+                width="360">
+            <template slot-scope="scope">
+                <a :href="scope.row.url" class="table-link" target="_blank">{{scope.row.url}}</a>
+            </template>
+        </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.hlId);
+                });
+                this.$emit('select-change', arr);
+            },
+            handleEditor(data) {
+                this.$emit('editor', data);
+            },
+        },
+    };
+</script>
+
+<style lang="scss" scoped>
+.table-link {
+    text-decoration:none;
+    color: #2C98F2;
+}
+</style>

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

@@ -0,0 +1,14 @@
+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

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

src/views/management/YouQingLianJie/index.vue

@@ -0,0 +1,320 @@
+<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    -->
+        <div class="yqlj-table">
+            <myTable @editor="handleOpenEditor"
+                     @delete="handleDelete"
+                     @select-change="handleSelectChange" />
+        </div>
+
+        <!--    分页    -->
+        <div class="yqlj-pagination">
+            <myPagination @size-change="handleSizeChange"
+                          @current-page="handleCurrentPage" />
+        </div>
+
+        <!--    弹窗 新增   -->
+        <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="url">
+                        <el-input v-model="addForm.url"></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="url">
+                        <el-input v-model="editorForm.url"></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 YQLJService          from '@/api/youqinglianjie';
+    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: '',
+                    url:  '',
+                },
+                addRules:          {
+                    name: [
+                        { required: true, message: '友情链接名称不能为空', trigger: 'blur' },
+                    ],
+                    url:  [
+                        { required: true, message: '友情链接不能为空', trigger: 'blur' },
+                    ],
+                },
+                editorForm:        {
+                    name: '',
+                    url:  '',
+                },
+                editorRules:       {
+                    name: [
+                        { required: true, message: '友情链接名称不能为空', trigger: 'blur' },
+                    ],
+                    url:  [
+                        { 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 YQLJService.getLinksAdd(opt);
+                    if (res.code === 0) {
+                        this.addDialogVisit = false;
+                        const opt = this.getOption();
+                        const myData = await YQLJService.getLinksList(opt);
+                        this.initPageData(myData.data);
+                        loading.close();
+                    }
+                } catch (e) {
+                    loading.close();
+                }
+                this.addDialogVisit = false;
+            },
+            handleGetLinksInfo() {
+                const opt = { hlId: this.selectRow.hlId };
+                const loading = this.$loading({ background: 'rgba(0, 0, 0, 0.7)' });
+                YQLJService.getLinksInfo(opt)
+                           .then(res => {
+                               const { name, url } = res.data;
+                               this.editorForm.name = name;
+                               this.editorForm.url = url;
+                               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, hlId: this.selectRow.hlId });
+                    const res = await YQLJService.getLinksUpdate(opt);
+                    if (res.code === 0) {
+                        this.editorDialogVisit = false;
+                        const opt = this.getOption();
+                        const myData = await YQLJService.getLinksList(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 = {
+                    hlIds: [...this.tableSelectData],
+                };
+                const loading = this.$loading({ background: 'rgba(0, 0, 0, 0.7)' });
+                try {
+                    const res = await YQLJService.getLinksDelete(opt);
+                    loading.close();
+                    if (res.code === 0 && res.data) {
+                        // 删除成功重置选择状态
+                        this.tableSelectData = [];
+                        // 刷新页面
+                        const newOpt = this.getOption();
+                        const res = await YQLJService.getLinksList(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)' });
+                YQLJService.getLinksList(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;
+            }
+        }
+    }
+</style>