|
|
@@ -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>
|
15724580513