|
|
@@ -0,0 +1,551 @@
|
|
|
+<template>
|
|
|
+ <div class="app-container">
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="24">
|
|
|
+ <div class="cell">
|
|
|
+ <div class="cell-title">
|
|
|
+ <div class="title-left">
|
|
|
+ <div class="title">招商资讯</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="cell-body">
|
|
|
+ <div class="controls">
|
|
|
+ <el-form :inline="true" :model="formInline" class="demo-form-inline">
|
|
|
+ <el-form-item label="">
|
|
|
+ <el-input v-model="formInline.keyword" style="width: 150px;" prefix-icon="el-icon-search" clearable
|
|
|
+ placeholder="请输入关键字"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item>
|
|
|
+ <el-button type="primary" class="btn-search" @click="btn_search">查询</el-button>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="发布时间">
|
|
|
+ <el-date-picker v-model="formInline.search_datatime" type="daterange" align="right" start-placeholder="开始日期"
|
|
|
+ end-placeholder="结束日期" format="yyyy-MM-dd" value-format="yyyy-MM-dd">
|
|
|
+ </el-date-picker>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="是否置顶">
|
|
|
+ <el-select v-model="formInline.id" clearable placeholder="请选择" style="width: 120px;">
|
|
|
+ <el-option v-for="item in formInline.options" :key="item.id" :label="item.hotelTownship" :value="item.id">
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ <div class="btns">
|
|
|
+ <el-button type="primary" class="info-del" @click="info_del">删除</el-button>
|
|
|
+ <el-button type="primary" class="export" @click="info_update">更新</el-button>
|
|
|
+ <el-button type="primary" class="export" @click="info_get">获取文章</el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <el-table :data="tableData" height="558" style="width: 100%" :cell-style="cell_style" v-loading="loading" :key='Math.random()'
|
|
|
+ :header-cell-style="header_cell_style">
|
|
|
+ <el-table-column type="selection" width="50"></el-table-column>
|
|
|
+ <el-table-column label="标题" align="center">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <span>{{ scope.row.hotelTownshipName }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="封面图" align="center">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <span>{{ scope.row.hotelTownshipName }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="内容" align="center">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <span>{{ scope.row.hotelName }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="发布时间" align="center">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <span>{{ scope.row.checkOutTime }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="是否置顶" align="center">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <span>{{ scope.row.houseTotalPrice }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="操作" width="160" align="center">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-button @click.native.prevent="" type="text" size="small">置顶</el-button>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ <div class="pagination-table">
|
|
|
+ <el-pagination @current-change="currentPageChange" :current-page.sync="pagination.currentPage" :page-size="pagination.pageSize"
|
|
|
+ layout="prev, pager, next, jumper" :total="pagination.total">
|
|
|
+ </el-pagination>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-dialog custom-class="dialog-qingzhang" :visible.sync="dialog_info_del" :close-on-click-modal="false" :close-on-press-escape="false"
|
|
|
+ :show-close="false">
|
|
|
+ <div slot="" class="dialog-qingzhang-body">
|
|
|
+ <img src="../../icons/serveAC/del_warning.png" alt="">
|
|
|
+ <div class="dialog-qingzhang-body-txt">删除后的文章将不在民宿小程序<br>上进行展示，确定删除吗？</div>
|
|
|
+ </div>
|
|
|
+ <div slot="footer" class="dialog-footer">
|
|
|
+ <el-button class="add-user-cancel-btn" @click="dialog_info_del = false"> 取消 </el-button>
|
|
|
+ <el-button class="add-user-confirm-btn" @click=""> 确定 </el-button>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
+ <el-dialog custom-class="dialog-qingzhang" :visible.sync="dialog_info_update" :close-on-click-modal="false" :close-on-press-escape="false"
|
|
|
+ :show-close="false">
|
|
|
+ <div slot="" class="dialog-qingzhang-body">
|
|
|
+ <img src="../../icons/serveAC/del_warning.png" alt="">
|
|
|
+ <div class="dialog-qingzhang-body-txt">确定对选中的文章进行更新吗？</div>
|
|
|
+ </div>
|
|
|
+ <div slot="footer" class="dialog-footer">
|
|
|
+ <el-button class="add-user-cancel-btn" @click="dialog_info_update = false"> 取消 </el-button>
|
|
|
+ <el-button class="add-user-confirm-btn" @click=""> 确定 </el-button>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
+ <el-dialog custom-class="dialog-qingzhang" :visible.sync="dialog_info_get" :close-on-click-modal="false" :close-on-press-escape="false"
|
|
|
+ :show-close="false">
|
|
|
+ <div slot="" class="dialog-qingzhang-body">
|
|
|
+ <img src="../../icons/serveAC/del_warning.png" alt="">
|
|
|
+ <div class="dialog-qingzhang-body-txt">确定从公众号获取最新文章数据吗？</div>
|
|
|
+ </div>
|
|
|
+ <div slot="footer" class="dialog-footer">
|
|
|
+ <el-button class="add-user-cancel-btn" @click="dialog_info_get = false"> 取消 </el-button>
|
|
|
+ <el-button class="add-user-confirm-btn" @click=""> 确定 </el-button>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import {
|
|
|
+ getTableData,
|
|
|
+ getTowns,
|
|
|
+ downloadExcel
|
|
|
+ } from '@/api/stdbookMgr'
|
|
|
+
|
|
|
+ export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ currentUserLevel: this.$store.state.user.level, // 当前用户的权限
|
|
|
+ dialogImageUrl: '',
|
|
|
+ formLabelWidth: '120px',
|
|
|
+ sumAccount: '', // 总金额
|
|
|
+ // 表格单元格样式
|
|
|
+ cell_style: {
|
|
|
+ color: '#1A202B',
|
|
|
+ 'font-size': '14px',
|
|
|
+ 'font-family': 'Microsoft YaHei-3970(82674968)'
|
|
|
+ },
|
|
|
+ // 表格头部样式
|
|
|
+ header_cell_style: {
|
|
|
+ background: '#E6ECFE',
|
|
|
+ color: '#1A202B',
|
|
|
+ 'font-size': '16px',
|
|
|
+ 'font-family': 'Microsoft YaHei-3970(82674968)'
|
|
|
+ },
|
|
|
+ // 查询数据
|
|
|
+ formInline: {
|
|
|
+ options: [],
|
|
|
+ id: '',
|
|
|
+ amount1: '',
|
|
|
+ amount2: '',
|
|
|
+ search_datatime: '',
|
|
|
+ keyword: ''
|
|
|
+ },
|
|
|
+ tableData: [],
|
|
|
+ cond_data: {},
|
|
|
+ // 分页参数
|
|
|
+ pagination: {
|
|
|
+ currentPage: 1,
|
|
|
+ pageSize: 8,
|
|
|
+ total: 0
|
|
|
+ },
|
|
|
+ loading: true,
|
|
|
+ dialog_info_del: false,
|
|
|
+ dialog_info_update: false,
|
|
|
+ dialog_info_get: false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ // 检测权限
|
|
|
+ if (this.currentUserLevel !== 2) {
|
|
|
+ this.$router.replace({
|
|
|
+ path: '/data'
|
|
|
+ })
|
|
|
+ return
|
|
|
+ }
|
|
|
+ // 获取消费记录,表格数据
|
|
|
+ this.get_table_data('list')
|
|
|
+ // 获取乡镇
|
|
|
+ this.get_towns()
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ document.getElementsByClassName("el-pagination__jump")[0].childNodes[0].nodeValue = "跳至";
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ // 获取文章
|
|
|
+ info_get() {
|
|
|
+ this.dialog_info_get = true
|
|
|
+ },
|
|
|
+ // 更新文章
|
|
|
+ info_update() {
|
|
|
+ this.dialog_info_update = true
|
|
|
+ },
|
|
|
+ // 删除文章
|
|
|
+ info_del() {
|
|
|
+ this.dialog_info_del = true
|
|
|
+ },
|
|
|
+ // 获取乡镇列表
|
|
|
+ get_towns() {
|
|
|
+ getTowns().then((res) => {
|
|
|
+ if (res.code === 200) {
|
|
|
+ this.formInline.options = []
|
|
|
+ for (var i = 0; i < res.data.length; i++) {
|
|
|
+ let town = {
|
|
|
+ id: res.data[i].id,
|
|
|
+ hotelTownship: res.data[i].name
|
|
|
+ }
|
|
|
+ this.formInline.options.push(town)
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ if (res.data.length === 0) {
|
|
|
+ this.formInline.options = []
|
|
|
+ this.$message.warning('没有符合条件的数据！')
|
|
|
+ } else {
|
|
|
+ this.$message.warning(res.message)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }).catch((err) => {
|
|
|
+ // console.log(err);
|
|
|
+ this.$message.error(err.message)
|
|
|
+ });
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 获取消费记录,表格数据
|
|
|
+ */
|
|
|
+ get_table_data(param) {
|
|
|
+ this.loading = true
|
|
|
+ this.get_condtion();
|
|
|
+
|
|
|
+ let data = this.cond_data;
|
|
|
+ if (param == 'search') {
|
|
|
+ data.page = 1
|
|
|
+ this.pagination.currentPage = 1
|
|
|
+ }
|
|
|
+
|
|
|
+ var that = this
|
|
|
+ // console.log(data);
|
|
|
+ getTableData(data).then((res) => {
|
|
|
+ // console.log(res);
|
|
|
+ if (res.code === 200) {
|
|
|
+ var d = res.data
|
|
|
+ that.pagination.total = d.bookIPage.total
|
|
|
+ that.tableData = []
|
|
|
+ for (var i = 0; i < d.bookIPage.pageList.length; i++) {
|
|
|
+ that.tableData.push(d.bookIPage.pageList[i])
|
|
|
+ }
|
|
|
+
|
|
|
+ that.sumAccount = d.sumAccount.toFixed(2)
|
|
|
+ } else {
|
|
|
+ that.tableData = []
|
|
|
+ that.$message.warning('没有符合条件的数据！')
|
|
|
+ }
|
|
|
+ }).catch((err) => {
|
|
|
+ // console.log(err);
|
|
|
+ that.$message.error(err.message)
|
|
|
+ });
|
|
|
+ that.loading = false;
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 查询条件
|
|
|
+ */
|
|
|
+ get_condtion() {
|
|
|
+ let data = {
|
|
|
+ page: this.pagination.currentPage,
|
|
|
+ rows: this.pagination.pageSize
|
|
|
+ }
|
|
|
+
|
|
|
+ if (this.formInline.id !== '') {
|
|
|
+ data.id = this.formInline.id
|
|
|
+ }
|
|
|
+
|
|
|
+ if (this.formInline.amount1 !== '') {
|
|
|
+ data.amount1 = this.formInline.amount1
|
|
|
+ }
|
|
|
+
|
|
|
+ if (this.formInline.amount2 !== '') {
|
|
|
+ data.amount2 = this.formInline.amount2
|
|
|
+ }
|
|
|
+
|
|
|
+ if (this.formInline.search_datatime !== '') {
|
|
|
+ data.search_datatime = this.formInline.search_datatime
|
|
|
+ }
|
|
|
+
|
|
|
+ if (this.formInline.keyword !== '') {
|
|
|
+ data.keyword = this.formInline.keyword
|
|
|
+ }
|
|
|
+
|
|
|
+ this.cond_data = data;
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 搜索
|
|
|
+ */
|
|
|
+ btn_search() {
|
|
|
+ this.get_table_data('search')
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * currentPage 改变时会触发
|
|
|
+ * @param {Object} val
|
|
|
+ */
|
|
|
+ currentPageChange(val) {
|
|
|
+ this.pagination.currentPage = val
|
|
|
+ this.get_table_data('pages')
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+ .app-container {
|
|
|
+ background-color: #EFF2F7;
|
|
|
+ padding: 10px;
|
|
|
+
|
|
|
+ .el-row {
|
|
|
+
|
|
|
+ .el-col {
|
|
|
+ padding: 10px;
|
|
|
+
|
|
|
+ .cell {
|
|
|
+ padding: 30px;
|
|
|
+ border-radius: 10px;
|
|
|
+ background-color: #FFFFFF;
|
|
|
+ box-shadow: 0px 3px 21px 0px rgba(60, 108, 254, 0.16);
|
|
|
+
|
|
|
+ .cell-title {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ margin-bottom: 30px;
|
|
|
+ padding-bottom: 30px;
|
|
|
+ border-bottom: 1px solid #CCCCCC;
|
|
|
+
|
|
|
+ .title-left {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .title {
|
|
|
+ font-size: 22px;
|
|
|
+ font-family: Microsoft YaHei-3970(82674968);
|
|
|
+ font-weight: bold;
|
|
|
+ color: #1A202B;
|
|
|
+ }
|
|
|
+
|
|
|
+ .title-detail {
|
|
|
+ margin-left: 50px;
|
|
|
+ font-size: 18px;
|
|
|
+ font-family: Microsoft YaHei-3970(82674968);
|
|
|
+ color: #1A202B;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .title-right {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .el-button {
|
|
|
+ width: 110px;
|
|
|
+ height: 46px;
|
|
|
+ background: #2B4CFE;
|
|
|
+ font-size: 18px;
|
|
|
+ color: #FFFFFF;
|
|
|
+ font-family: Microsoft YaHei-3970(82674968);
|
|
|
+ border-radius: 5px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-button--warning {
|
|
|
+ background: #F88A64;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .cell-body {
|
|
|
+
|
|
|
+ .controls {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .demo-form-inline {
|
|
|
+ display: inline-flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: flex-start;
|
|
|
+
|
|
|
+ .el-form-item {
|
|
|
+ margin-bottom: 16px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .btn-search {
|
|
|
+ background: rgba(9, 101, 98, 1);
|
|
|
+ font-size: 14px;
|
|
|
+ color: #FFFFFF;
|
|
|
+ font-family: Microsoft YaHei-3970(82674968);
|
|
|
+ border-radius: 5px;
|
|
|
+ border: none;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .info-del {
|
|
|
+ border-radius: 5px;
|
|
|
+ background: rgba(212, 48, 48, 1);
|
|
|
+ border: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ .export {
|
|
|
+ background: rgba(9, 101, 98, 1);
|
|
|
+ font-size: 14px;
|
|
|
+ color: #FFFFFF;
|
|
|
+ font-family: Microsoft YaHei-3970(82674968);
|
|
|
+ border-radius: 5px;
|
|
|
+ border: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ .btns {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ margin-bottom: 16px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .pagination-table {
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-end;
|
|
|
+ align-items: center;
|
|
|
+ height: 30px;
|
|
|
+ margin-top: 20px;
|
|
|
+ padding-right: 100px;
|
|
|
+
|
|
|
+ ::v-deep .el-pagination {
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-end;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ ::v-deep .el-pagination ul {
|
|
|
+ display: flex;
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ ::v-deep .el-pagination button,
|
|
|
+ ::v-deep .el-pagination li {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ width: 50px;
|
|
|
+ height: 36px;
|
|
|
+ border: 1px solid #626262;
|
|
|
+ border-radius: 3px;
|
|
|
+ font-size: 14px;
|
|
|
+ margin: 0 5px;
|
|
|
+ }
|
|
|
+
|
|
|
+ ::v-deep .el-pagination span {
|
|
|
+ margin-left: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ ::v-deep .el-pagination .el-pagination__jump {
|
|
|
+ font-size: 16px;
|
|
|
+ }
|
|
|
+
|
|
|
+ ::v-deep .el-pagination .el-pagination__editor {
|
|
|
+ width: 50px;
|
|
|
+ height: 36px;
|
|
|
+ margin: 0 5px;
|
|
|
+ }
|
|
|
+
|
|
|
+ ::v-deep .el-pagination .el-input__inner {
|
|
|
+ width: 50px;
|
|
|
+ height: 36px;
|
|
|
+ border: 1px solid #626262;
|
|
|
+ margin: -4px 0 0 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .dialog-qingzhang-body {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ height: 180px;
|
|
|
+
|
|
|
+ img {
|
|
|
+ width: 72px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .dialog-qingzhang-body-txt {
|
|
|
+ height: 38px;
|
|
|
+ line-height: 38px;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 18px;
|
|
|
+ font-family: Microsoft YaHei-3970(82674968);
|
|
|
+ color: #333333;
|
|
|
+ margin-top: 20px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|
|
|
+
|
|
|
+<style>
|
|
|
+ .el-date-editor--daterange.el-input__inner {
|
|
|
+ width: 280px !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .demo-table-expand {
|
|
|
+ font-size: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .demo-table-expand label {
|
|
|
+ width: 180px;
|
|
|
+ color: #99a9bf;
|
|
|
+ }
|
|
|
+
|
|
|
+ .demo-table-expand .el-form-item {
|
|
|
+ margin-right: 0;
|
|
|
+ margin-bottom: 0;
|
|
|
+ width: 33%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .dialog-footer {
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-end;
|
|
|
+ margin-top: -10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .dialog-qingzhang {
|
|
|
+ height: 300px !important;
|
|
|
+ width: 500px !important;
|
|
|
+ margin-top: 330px !important;
|
|
|
+ border-radius: 8px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .dialog-qingzhang .el-dialog__header {
|
|
|
+ display: none !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .add-user-cancel-btn {
|
|
|
+ color: rgba(9, 101, 98, 1) !important;
|
|
|
+ border: 1px solid rgba(9, 101, 98, 1) !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .add-user-confirm-btn {
|
|
|
+ border: none !important;
|
|
|
+ background: rgba(9, 101, 98, 1) !important;
|
|
|
+ color: #fff !important;
|
|
|
+ border-radius: 5px !important;
|
|
|
+ margin-left: 28px !important;
|
|
|
+ }
|
|
|
+</style>
|
soft5566