yuezhilian-admin/src/view/fund/message-publish.vue

<template>
  <div class="page-box" v-loading="loading > 0">
    <Header :title="title"></Header>
    <div class="container">
      <div class="content">
        <!-- 表格 -->
        <div class="filter-box">
          <div class="filter">
            <div class="filter-item">
              <div class="label">审核状态：</div>
              <el-select v-model="filter.way" size="small" class="select" placeholder="请选择">
                <el-option v-for="item in statusList" :key="item.value" :label="item.name" :value="item.value">
                </el-option>
              </el-select>
            </div>
          </div>
          <div class="btn-box">
            <button class="search" @click="search">筛选</button>
            <button class="reset" @click="reset">重置</button>
          </div>
        </div>
        <el-table :data="list" class="table no-border-table" ref="table" :header-cell-style="{
          border: 'none',
          color: '#333',
          background: '#f6f6f6',
          borderBottom: '1px solid #E8E8E8',
          height: '54px',
        }" :row-style="{
  height: '54px',
}">
          <el-table-column prop="uid" align="center" label="发布人ID"></el-table-column>
          <el-table-column prop="subject" align="center" label="主题"></el-table-column>
          <el-table-column prop="phone" align="center" label="联系电话"></el-table-column>
          <el-table-column prop="status" align="center" label="状态">
            <div slot-scope="scope">
              {{ statusMap[scope.row.way]}}
            </div>
          </el-table-column>
          <el-table-column label="操作" align="center" width="180">
            <div slot-scope="scope" style="display: flex; justify-content: center">
              <button size="mini" class="table-btn" @click="handleDelete(scope.row.id)" v-if="scope.row.way !== 1">
                删除
              </button>
              <button size="mini" class="table-btn" @click="handlePass(scope.row.id)" v-if="scope.row.way === 1">
                通过
              </button>
              <button size="mini" class="table-btn" @click="rejectModal(scope.row.id)" v-if="scope.row.way === 1">
                驳回
              </button>
              <button size="mini" class="table-btn" @click="toDetail(scope.row.id)">
                详情
              </button>
            </div>
          </el-table-column>
        </el-table>
      </div>
      <!-- 分页按钮 -->
      <div class="footer">
        <el-pagination @current-change="handleCurrentChange" :current-page.sync="currentPage" background
          layout="total, prev, pager, next, jumper" :page-size="size" :total="total"></el-pagination>
      </div>
      <el-dialog title="确认驳回该订单吗？" width="450px" :visible.sync="rejectVisible">
        <div class="reject-title"><span>*</span>请填写驳回理由</div>
        <div style="padding: 0 16px">
          <div class="remark-box">
            <textarea rows="8" class="remark" v-model="remark" placeholder="驳回理由"></textarea>
          </div>
        </div>
        <div slot="footer" class="dialog-footer">
          <!-- <el-button @click.native="reject()" class="cancel-btn">驳 回</el-button> -->
          <el-button @click.native="rejectVisible = false" class="cancel-btn btn">取 消</el-button>
          <el-button type="primary" @click.native="handleReject" class="confirm-btn btn">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
import Header from '../../components/common/header';
export default {
  components: {
    Header
  },
  name: 'balanceExamine',
  data() {
    return {
      currentPage: 1, // 当前页码
      size: 20, // 每页条数
      total: 0, // 总页数
      loading: 0, // 加载中
      title: {
        // 页面标题
        firstTitile: '消息管理',
        secondTitle: '消息管理'
      },
      filter: {
        way: -1
      },
      statusList: [
        {
          name: '全部',
          value: -1
        },
        {
          name: '审核中',
          value: 1
        },
        {
          name: '已通过',
          value: 2
        }
      ],
      statusMap: {
        1: '审核中',
        2: '已通过'
      },
      list: [], // 用户列表
      rejectVisible: false,
      id: null,
      remark: ''
    };
  },

  mounted() {
    // 获取列表
    this.getList();
  },
  computed: {},
  methods: {
    // 切换页码
    handleCurrentChange(page) {
      this.currentPage = page;
      this.getList();
    },
    // 获取列表
    getList() {
      this.loading++;
      this.httpGet(this.$root.getMessageList, {
        page: this.currentPage,
        size: this.size,
        ...this.filter
      }).then(
        (res) => {
          this.loading--;
          this.list = res.list;
          this.total = res.total;
        },
        (res) => {
          this.loading--;
          this.$message.error(res);
        }
      );
    },
    // 过滤
    search() {
      this.currentPage = 1;
      this.getList();
    },
    // 重置过滤
    reset() {
      this.filter = {
        way: -1
      };
      this.getList();
    },
    handleDelete(id) {
      this.$confirm(
        `<p class='title'><i class='icon el-icon-question'></i>提醒</p><p class='text'>确定要删除吗？</p>`,
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          cancelButtonClass: 'cancel-btn',
          confirmButtonClass: 'confirm-btn',
          customClass: 'confirm-box',
          dangerouslyUseHTMLString: true,
          showClose: false,
          type: 'none'
        }
      ).then(() => {
        this.loading++;
        this.httpDelete(this.$root.deleteMessage, {
          id
        }).then(
          (res) => {
            this.$message({
              message: '操作成功',
              type: 'success'
            });
            this.loading--;
            this.getList();
          },
          (res) => {
            this.loading--;
            this.$message.error(res);
          }
        );
      });
    },
    handlePass(id) {
      this.$confirm(
        `<p class='title'><i class='icon el-icon-question'></i>提醒</p><p class='text'>确定要通过吗？</p>`,
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          cancelButtonClass: 'cancel-btn',
          confirmButtonClass: 'confirm-btn',
          customClass: 'confirm-box',
          dangerouslyUseHTMLString: true,
          showClose: false,
          type: 'none'
        }
      ).then(() => {
        this.loading++;
        this.httpPut(this.$root.passMessage, {
          id
        }).then(
          (res) => {
            this.$message({
              message: '操作成功',
              type: 'success'
            });
            this.loading--;
            this.getList();
          },
          (res) => {
            this.loading--;
            this.$message.error(res);
          }
        );
      });
    },
    rejectModal(id) {
      this.rejectVisible = true;
      this.id = id;
    },
    handleReject() {
      this.loading++;
      this.httpPut(this.$root.refuseMessage, {
        id: this.id,
        remark: this.remark
      }).then(
        (res) => {
          this.rejectVisible = false;
          this.$message({
            message: '操作成功',
            type: 'success'
          });
          this.loading--;
          this.getList();
        },
        (res) => {
          this.loading--;
          this.$message.error(res);
        }
      );
    },
    toDetail(id) {
      this.$router.push({
        name: 'messageDetail',
        query: {
          id
        }
      });
    }
  }
};
</script>
<style lang="stylus" rel="stylesheet/stylus">
@import '~assets/public.styl';
</style>
<style lang="stylus" rel="stylesheet/stylus" scoped>
@import '~assets/main.styl';

.page-box {
  height: 100%;
  width: 100%;
  flex-y(flex-start, flex-start);
  overflow-y: hidden;
  background: bg-color;

  .container {
    box-sizing: border-box;
    height: 100%;
    width: 100%;
    overflow-y: auto;
    flex-y(flex-start, flex-start);
    padding: 10px;

    // content 表格
    .content {
      flex: 1;
      width: 100%;
      font-size: 14px;
      background: white;
      box-sizing: border-box;
      padding: 24px 32px;
      border-radius: 2px;

      // 按钮
      .btn {
        width: 100px;
        height: 32px;
        line-height: 32px;
        confirm-btn();
        font-size: 14px;
        margin: 16px 0;
      }

      // 表格按钮
      .table-btn {
        // width: 65px;
        height: 24px;
        line-height: 24px;
        color: gray3;
        font-size: 12px;
        margin-right: 8px;
        cancel-btn();
        padding: 0 8px;
      }

      .filter-item {
        margin-right: 12px;
      }

      .select, .input {
        width: 125px;
      }

      .date-input {
        width: 360px;
      }

      .btn-box {
        margin: 0;
      }

      .table {
        margin-top: 24px !important;
      }

      .table-img {
        height: 32px;
        width: 32px;
        border-radius: 4px;
        object-fit: fill;
      }
    }
  }

  .footer {
    width: 100%;
    padding: 24px;
    box-sizing: border-box;
    flex-x(flex-end);
    background: white;
  }

  .dialog-content {
    flex-y();
  }

  .form {
    width: 100%;
    flex-center();
    margin: 8px 0;
  }

  .reject-title {
    border-top: 1px solid #eee;
    padding: 12px 13px 0;
    word(14px, #666);

    span {
      color: #FD4545;
      display: inline-block;
      width: 15px;
    }
  }

  .remark-box {
    width: 100%;
    padding-left: 15px;
    box-sizing: border-box;
  }

  .remark {
    border: 1px solid #f1f1f1;
    width: 100%;
    margin: 12px 0;
    padding: 12px;
    box-sizing: border-box;
  }
}
</style>