update 重构友情链接

src/components/@Mta/components/MyInput.vue

@@ -0,0 +1,43 @@
+<template>
+    <el-input
+            class="search-name"
+            :placeholder="placeholder"
+            v-model="value"
+            @change="handleChange"
+            clearable>
+    </el-input>
+</template>
+
+<script>
+    export default {
+        name: 'MyInput',
+        props: {
+            placeholder: {
+                type: String,
+                default: '请输入'
+            },
+            action: {
+                type: String,
+                required: true
+            }
+        },
+        data() {
+            return {
+                value: ''
+            }
+        },
+        methods: {
+            handleChange(data) {
+                this.$emit('change', this.action, data)
+            },
+            setInputValue(data) {
+                this.value = data;
+                this.$emit('change', this.action, data)
+            }
+        }
+    };
+</script>
+
+<style scoped>
+
+</style>

src/components/@Mta/components/MyPagination.vue

@@ -0,0 +1,51 @@
+<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>
+    export default {
+        name:    'Pagination',
+        props:   {
+            action: {
+                type:     String,
+                required: true,
+            },
+        },
+        data() {
+            return {
+                page:  1,
+                size:  10,
+                total: 0,
+                pageSizes: [10, 50, 100]
+            };
+        },
+        watch:   {
+            total(newVal) {
+                if (newVal <= this.size * (this.page -1) && 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/router.js

@@ -213,6 +213,18 @@ const router = new Router({
                                                   return import(/* webpackChunkName: "register" */ './views/management/RegistrationManagement/index.vue');
                                               },
                                           },
+                                          {
+                                              path: '/think',
+                                              name: 'think',
+                                              meta: {
+                                                  icon: "",
+                                                  title: "think"
+                                              },
+                                              isAdminMenu: true,
+                                              component: () => {
+                                                  return import(/* webpackChunkName: "register" */ './views/think/youqinglianjie/index.vue');
+                                              },
+                                          },
                                       ],
                                   },
                               ],

src/views/think/youqinglianjie/components/addYouQingLink.vue

@@ -0,0 +1,69 @@
+<template>
+    <!--    弹窗 新增   -->
+    <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>
+</template>
+
+<script>
+    export default {
+        name: 'addYouQingLink',
+        data() {
+            return {
+                addForm:           {
+                    name: '',
+                    url:  '',
+                },
+                addRules:          {
+                    name: [
+                        { required: true, message: '友情链接名称不能为空', trigger: 'blur' },
+                    ],
+                    url:  [
+                        { required: true, message: '友情链接不能为空', trigger: 'blur' },
+                    ],
+                },
+                addDialogVisit: false
+            }
+        },
+        methods: {
+            handleAddLinks(formName) {
+                this.$refs[formName].validate((valid) => {
+                    if (valid) {
+                        this.addLinksFun();
+                    } else {
+                        return false;
+                    }
+                });
+            },
+            handleResetLinks(formName) {
+                this.$refs[formName].resetFields();
+                this.addDialogVisit = false;
+            },
+            addLinksFun() {
+                this.$emit('add-Link', this.addForm);
+            }
+        }
+    };
+</script>
+
+<style scoped>
+
+</style>

src/views/think/youqinglianjie/components/editorYouQingLink.vue

@@ -0,0 +1,78 @@
+<template>
+    <!--    弹窗 编辑   -->
+    <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>
+</template>
+
+<script>
+    export default {
+        name: 'editorYouQingLink',
+        data() {
+            return {
+                editorDialogVisit: false,
+                editorForm:        {
+                    name: '',
+                    url:  '',
+                },
+                editorRules:       {
+                    name: [
+                        { required: true, message: '友情链接名称不能为空', trigger: 'blur' },
+                    ],
+                    url:  [
+                        { required: true, message: '友情链接不能为空', trigger: 'blur' },
+                    ],
+                },
+            }
+        },
+        methods: {
+            handleEditorReset(formName) {
+                this.$refs[formName].resetFields();
+                this.addDialogVisit = false;
+            },
+            handleGetLinksInfo() {
+                this.$emit('get-data')
+            },
+            handleEditorLinks(formName) {
+                this.$refs[formName].validate((valid) => {
+                    if (valid) {
+                        this.editorLinksFun();
+                    } else {
+                        return false;
+                    }
+                });
+            },
+            setInfoData(data) {
+                this.editorForm.name = data.name;
+                this.editorForm.url = data.url;
+            },
+            editorLinksFun() {
+                this.$emit('editor-link', this.editorForm);
+            }
+        },
+    };
+</script>
+
+<style scoped>
+
+</style>

src/views/think/youqinglianjie/components/myTable.vue

@@ -0,0 +1,113 @@
+<template>
+    <el-table
+            :data="tableData"
+            border
+            class="table"
+            @selection-change="handleSelectionChange"
+            height="auto"
+            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="操作"
+                width="100"
+                fixed="right"
+        >
+            <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',
+        props: {
+            data: {
+                type: Array,
+                default: () => []
+            }
+        },
+        computed: {
+            tableData() {
+                return this.data;
+            },
+        },
+        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 {
+        ::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/think/youqinglianjie/components/searchArea.vue

@@ -0,0 +1,66 @@
+<template>
+    <div class="search-area">
+        <div>
+            <my-input
+                    ref="myInput"
+                    class="search-name"
+                    action="LinkName"
+                    placeholder="请输入友情链接名称"
+                    @change="handleChange">
+            </my-input>
+            <el-button size="medium" type="primary" @click="handleSearch">查询</el-button>
+        </div>
+        <div>
+            <el-button size="medium" plain @click="handleDelete">删除</el-button>
+            <el-button size="medium" type="primary" @click="handleOpenAdd">新增</el-button>
+        </div>
+
+    </div>
+</template>
+
+<script>
+    import MyInput from '@/components/@Mta/components/MyInput';
+
+    export default {
+        name:       'searchArea',
+        components: {
+            MyInput,
+        },
+        data() {
+            return {
+                LinkName: '',
+            };
+        },
+        methods:    {
+            handleChange(action, data) {
+                this[action] = data;
+            },
+            handleSearch() {
+                this.$emit('search', { name: this.LinkName });
+            },
+            handleDelete() {
+                this.$emit('delete');
+            },
+            handleOpenAdd() {
+                this.$emit('add');
+            },
+            setSearchData(data) {
+                this.$refs.myInput.setInputValue(data);
+            },
+
+        },
+    };
+</script>
+
+<style lang="scss" scoped>
+    .search-name {
+        width: 220px;
+        margin-right: 10px;
+    }
+
+    .search-area {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+    }
+</style>

src/views/think/youqinglianjie/index.vue

@@ -0,0 +1,278 @@
+<template>
+    <div class="you-qing-lian-jie">
+        <div class="yqlj-search">
+            <searchArea
+                    ref="searchArea"
+                    @search="handleSearch"
+                    @add="openAddDialog"
+                    @delete="handleDelete"
+            ></searchArea>
+        </div>
+        <myTable
+                class="yqlj-table"
+                :data="tableData"
+                @editor="handleOpenEditor"
+                @select-change="handleSelectChange" />
+        <myPagination
+                action="searchOpt"
+                ref="myPagination"
+                class="yqlj-pagination"
+                @size-change="handleSizeChange"
+                @current-page="handleCurrentPage" />
+
+        <!--    弹窗 新增   -->
+        <addYouQingLink ref="addYouQingLink" @add-Link="handleAddLink"></addYouQingLink>
+
+        <!--    弹窗 编辑   -->
+        <editorYouQingLink
+                ref="edditorYouQingLink"
+                @get-data="handleGetLinkInfoData"
+                @editor-link="handleEditorLink"></editorYouQingLink>
+    </div>
+</template>
+
+<script>
+    import searchArea        from './components/searchArea';
+    import myTable           from './components/myTable';
+    import addYouQingLink    from './components/addYouQingLink';
+    import editorYouQingLink from './components/editorYouQingLink';
+    import myPagination      from '@/components/@Mta/components/MyPagination';
+    import * as YQLJService  from '@/api/youqinglianjie';
+    import * as comminUtil   from '@/utils/admin/tools';
+
+    export default {
+        name:       'index',
+        components: {
+            searchArea,
+            myTable,
+            myPagination,
+            addYouQingLink,
+            editorYouQingLink,
+        },
+        data() {
+            return {
+                searchOpt:       {},
+                tableData:       [],
+                userId:          null,
+                tableSelectData: [],
+                selectRow:       [],
+            };
+        },
+        computed:   {
+            page:             {
+                get() {
+                    return this.$refs.myPagination.page;
+                },
+                set(page) {
+                    this.$refs.myPagination.page = page;
+                },
+            },
+            size:             {
+                get() {
+                    return this.$refs.myPagination.size;
+                },
+                set(size) {
+                    this.$refs.myPagination.size = size;
+                },
+            },
+            showLinkDialog:   {
+                get() {
+                    this.$refs.addYouQingLink.addDialogVisit;
+                },
+                set(data) {
+                    this.$refs.addYouQingLink.addDialogVisit = data;
+                },
+            },
+            showEditorDialog: {
+                get() {
+                    return this.$refs.edditorYouQingLink.editorDialogVisit;
+                },
+                set(data) {
+                    this.$refs.edditorYouQingLink.editorDialogVisit = data;
+                },
+            },
+        },
+        methods:    {
+            getOption() {
+                const pagination = { page: this.page, size: this.size };
+                const opt = Object.assign({}, this.searchOpt, pagination);
+                return opt;
+            },
+            /**
+             * 查询
+             */
+            async handleSearch(data) {
+                this.searchOpt = data;
+                const loading = this.$loading({ background: 'rgba(0, 0, 0, 0.7)' });
+                try {
+                    await this.httpGetLinksList();
+                    this.showLinkDialog = false;
+                    loading.close();
+                } catch (e) {
+                    loading.close();
+                }
+
+            },
+            /**
+             * 新增
+             */
+            async handleAddLink(data) {
+                const loading = this.$loading({ background: 'rgba(0, 0, 0, 0.7)' });
+                try {
+                    const res = await this.httpGetLinksAdd(data);
+                    if (res.code === 0 && res.data) {
+                        await this.httpGetLinksList();
+                        this.showLinkDialog = false;
+                        loading.close();
+                    }
+                } catch (e) {
+                    this.showLinkDialog = false;
+                    loading.close();
+                }
+            },
+            /**
+             * 打开
+             */
+            openAddDialog() {
+                this.showLinkDialog = true;
+            },
+            /**
+             * 编辑
+             */
+            handleOpenEditor(data) {
+                this.showEditorDialog = true;
+                this.selectRow = data;
+            },
+            /**
+             * 编辑
+             */
+            async handleEditorLink(data) {
+                const loading = this.$loading({ background: 'rgba(0, 0, 0, 0.7)' });
+                try {
+
+                    const res = await this.httpGetLinksUpdate(data);
+                    if (res.code === 0) {
+                        this.showEditorDialog = false;
+                        this.$message.success('更新成功');
+                        await this.httpGetLinksList();
+                    }
+                    loading.close();
+                } catch (e) {
+                    loading.close();
+                }
+            },
+            /**
+             * 详情
+             */
+            async handleGetLinkInfoData() {
+                const res = await this.httpGetLinksInfo();
+                if (res.code === 0) {
+                    this.$refs.edditorYouQingLink.setInfoData(res.data);
+                }
+            },
+            /**
+             * 删除
+             */
+            async handleDelete() {
+                if (!this.tableSelectData.length) {
+                    this.$message.warning('请选择要删除的友情链接');
+                    return false;
+                }
+                const loading = this.$loading({ background: 'rgba(0, 0, 0, 0.7)' });
+                try {
+                    const res = await this.httpGetLinksDelete();
+                    if (res.code === 0 && res.data) {
+                        // 删除成功重置选择状态
+                        this.tableSelectData = [];
+                        await this.httpGetLinksList();
+                        this.showLinkDialog = false;
+                        loading.close();
+                    }
+                } catch (e) {
+                    loading.close();
+                }
+            },
+            /**
+             * table选中
+             */
+            handleSelectChange(data) {
+                this.tableSelectData = data;
+            },
+            /**
+             * 分页功能
+             */
+            async handleSizeChange(size) {
+                this.size = size;
+                await this.httpGetLinksList();
+                this.showLinkDialog = false;
+            },
+            async handleCurrentPage(page) {
+                this.page = page;
+                await this.httpGetLinksList();
+                this.showLinkDialog = false;
+
+            },
+
+            /**
+             * 渲染页面
+             */
+            initPageData(listData) {
+                this.tableData = listData.data;
+                this.$refs.myPagination.total = listData.total;
+            },
+
+            /** Http 请求 */
+            async httpGetLinksList() {
+                const opts = this.getOption();
+                const myData = await YQLJService.getLinksList(opts);
+                this.initPageData(myData.data);
+                return myData;
+            },
+            async httpGetLinksAdd(data) {
+                const opt = Object.assign({}, data, { userId: this.userId });
+                const myData = await YQLJService.getLinksAdd(opt);
+                return myData;
+            },
+            async httpGetLinksUpdate(data) {
+                const opt = Object.assign({}, data, { userId: this.userId, hlId: this.selectRow.hlId });
+                const myData = await YQLJService.getLinksUpdate(opt);
+                return myData;
+            },
+            async httpGetLinksInfo() {
+                const opt = { hlId: this.selectRow.hlId };
+                const myData = await YQLJService.getLinksInfo(opt);
+                return myData;
+            },
+            async httpGetLinksDelete() {
+                const opt = {
+                    hlIds: [...this.tableSelectData],
+                };
+                const myData = await YQLJService.getLinksDelete(opt);
+                return myData;
+            },
+
+        },
+        created() {
+            const userAuth = comminUtil.getUserAuth();
+            this.userId = userAuth && userAuth.userId ? userAuth.userId : null;
+        },
+        mounted() {
+            this.httpGetLinksList();
+        }
+    };
+</script>
+
+<style lang="scss" scoped>
+    .you-qing-lian-jie {
+        padding: 20px;
+    }
+
+    .yqlj-table {
+        margin-top: 20px;
+        height: calc(100vh - 274px) !important;
+    }
+
+    .yqlj-pagination {
+        margin-top: 20px;
+    }
+</style>