boss/pages/main/index/cancel_account.vue

<template>

  <section id="dev_check">
   <el-select v-model="value" @change="changeSelect" placeholder="请选择">
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value">
      </el-option>
    </el-select>
    <section class="table">
      <el-table
                :data="tableData"
                style="width: 100%">
                <el-table-column
                  prop="uid"
                  label="用户uid"
                  >
                  <template slot-scope="scope">
                       <el-button
                           type="text"
                           @click="clickUID(scope.row)"
                         >{{scope.row.uid}}</el-button>
                   </template>
                </el-table-column>

                <el-table-column
                  prop="create_time"
                  label="申请时间" :formatter="dateFormatStart">
                </el-table-column>
                <el-table-column
                  label="来源" :formatter="dateFormatStart">
                  <template slot-scope="scope">
                    <span v-if="scope.row.source_type">
                      <el-tooltip class="item" effect="dark" :content="scope.row.version" placement="top">
                        <el-link type="primary">{{scope.row['source_type'] || '--'}}</el-link>
                      </el-tooltip>
                    </span>
                    <span v-else>--</span>
                  </template>
                </el-table-column>

                <el-table-column
                  prop="update_time"
                  label="注销时间" :formatter="dateFormat">
                </el-table-column>

                <el-table-column
                  prop="reason"
                  label="注销理由">
                </el-table-column>

                <el-table-column
                  prop="status"
                  label="当前状态">

                 <template slot-scope="scope">
                    <template v-if="scope.row['status'] == 1">
                       <p>待注销</p>
                     </template>
                     <template v-else>
                        <p>已注销</p>
                      </template>
               </template>

                </el-table-column>

                <el-table-column
                  prop="nickname"
                  label="操作人">
                </el-table-column>

                <el-table-column
                  label="操作">
                  <template slot-scope="scope">
                      <template v-if="scope.row['status'] == 1">
                         <el-button
                             type="text"
                             @click="cancelAccount(scope.row)"
                           >确认注销</el-button>
                        <el-button
                          type="text"
                          @click="refuseCancelAccount(scope.row)"
                        >拒绝注销</el-button>
                       </template>
                 </template>

                </el-table-column>
              </el-table>
    </section>

    <el-pagination
          background
          @current-change="changePagination"
          @size-change="changePageSize"
          :current-page.sync="currentPage"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="20"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totalCount"
        ></el-pagination>


  </section>
</template>

<script>
export default {
  data() {
    return {
      // 列表数据
      tableData: [],
     options: [{
               value: '0',
               label: '已注销'
             }, {
               value: '1',
               label: '待注销'
             }],
             value: '1',
             totalCount: 0,
             currentPage: 1,
             currentPageSize: 10,
    };
  },
  watch: {
      $route(to, from) {
        this.handleRouteParams();
      }
    },
    created: function () {
        this.getTableData();
      },
  methods: {
  // 点击用户的 uid
      clickUID(item) {
            if(Number(item.status) > 0){
                window.open(
                    this.$store.state.domainConfig.siteUrl + `/rooter/user/${item.uid}`
                );
            }else{
                window.open(
                    this.$store.state.domainConfig.siteUrl + `/rooter/canceluser/${item.uid}`
                );
            }
      },
    // 页码变动
        changePagination(page) {
          this.$router.replace({
             path: `/main/cancel_account`,
             query: { page, value: this.value }
          });
        },
        // 切换当页显示条数
        changePageSize(pageSize) {
           this.currentPageSize = pageSize;
         },
       // 筛选框变动
        changeSelect() {
          this.$router.replace({
            path: `/main/cancel_account`,
            query: { page: this.currentPage, value: this.value}
          });
        },
        dateFormatStart:function(item){
            let d = new Date(Number(item.create_time) * 1000);
             return d.getFullYear() + '-' + (d.getMonth() + 1) + '-' + d.getDate() + '  ' + d.getHours() + ':' + d.getMinutes() + ':' + d.getSeconds();
        },
        dateFormat:function(item){
            if(item.update_time > 0){
                 let d = new Date(Number(item.update_time) * 1000);
                 return d.getFullYear() + '-' + (d.getMonth() + 1) + '-' + d.getDate() + '  ' + d.getHours() + ':' + d.getMinutes() + ':' + d.getSeconds();
            }
        },
        /**
        * 路由钩子触发获取路由携带query, 首次进入也算一次
        */
      handleRouteParams() {
        this.currentPage = Number(this.$route.query.page);
        this.value = this.$route.query.value;
        this.getTableData();
      },
      // 获取列表数据
        async getTableData() {
          this.tableData = [];
          let page = this.currentPage;
          let limit = this.currentPageSize;
          let status = this.value;
          let body = { page, limit, status};
          let res = await this.$post("/api/admin/cancelAccount/findWaitCancelAccount", body);
          let data = res.data;
          this.tableData = res.data.list;
          this.totalCount = Number(data.count);
          this.currentPage = data.page;
        },
        // 确认注销账号
        async cancelAccount(item) {
            let uid = item.uid
            let body = {uid: uid}
            let res = await this.$post("/api/admin/cancelAccount/cancelAccount", body);
            if (res.status > 0)
                    this.$message({
                      message: res.info,
                      type: "success"
                    });
          this.getTableData();
        },
      // 拒绝注销账号
        async refuseCancelAccount(item) {
            let uid = item.uid
            let body = {uid: uid}
            let res = await this.$post("/api/admin/cancelAccount/refuseCancelAccount", body);
            if (res.status > 0)
                    this.$message({
                      message: res.info,
                      type: "success"
                    });
          this.getTableData();
        }
  }

};
</script>

<style scoped>
.table {
  height: calc(100% - 60px);
}
.img {
  width: 100%;
  height: auto;
}
</style>