|
|
@@ -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="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;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .yqlj-pagination {
|
|
|
+ margin-top: 20px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|
wangguoyu