platformFront/src/components/admin/AuthedAdmin.vue

<template>
    <div>
        <crumbs title="已认证超管信息">
            <el-form :inline="true">
                <el-form-item label="审核时间：">
                    <el-date-picker v-model="filter.time"
                                    size="mini"
                                    value-format="yyyy-MM-dd HH:mm:ss"
                                    :default-time="['00:00:01', '23:59:59']"
                                    type="daterange"
                                    start-placeholder="开始日期"
                                    end-placeholder="结束日期"></el-date-picker>
                </el-form-item>
                <el-form-item label="机构名称：">
                    <el-input v-model="filter.orgName" clearable size="mini" placeholder="机构名称"></el-input>
                </el-form-item>
                <el-form-item label="手机号：">
                    <el-input v-model="filter.userName" clearable size="mini" placeholder="手机号"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button size="mini" @click="filterDatas">确认</el-button>
                    <el-button size="mini" type="primary" @click="exportData">导出</el-button>
                </el-form-item>
            </el-form>
        </crumbs>
        <div class="contents">
            <el-table :data="list"
                      border
                      @expand-change="showPickup"
                      :row-class-name="proLineRow">
                <el-table-column
                        type="index"
                        :index="indexMethod"
                        label="编号"
                        width="60">
                </el-table-column>
                <el-table-column
                        prop="userGmtCreate"
                        label="注册时间"
                        :show-overflow-tooltip="true"
                        width="120">
                </el-table-column>
                <el-table-column
                        prop="passauthTime"
                        :show-overflow-tooltip="true"
                        label="审核通过时间"
                        width="120">
                </el-table-column>
                <el-table-column
                        prop="linkman"
                        label="超管名称">
                </el-table-column>
                <el-table-column
                        prop="orgName"
                        label="所在机构"
                        width="120"
                >
                </el-table-column>
                <el-table-column
                        prop="position"
                        label="岗位名称">
                </el-table-column>
                <el-table-column
                        prop="userName"
                        label="手机号"
                        :show-overflow-tooltip="true"
                        width="100">
                </el-table-column>
                <el-table-column
                        prop="email"
                        :show-overflow-tooltip="true"
                        width="140"
                        label="邮箱">
                </el-table-column>
                <el-table-column
                        prop="authStatusStr"
                        label="状态">
                </el-table-column>
                <el-table-column
                        label="操作"
                        width="100">
                    <template slot-scope="scope">
                        <el-button type="text" size="small" @click="toEditAdmin(scope.row)">修改</el-button>
                        <span style="margin:0 3px;">|</span>
                        <el-button type="text" size="small" @click="showDelDialog(scope.row.userId)">删除</el-button>
                    </template>
                </el-table-column>
                <el-table-column
                        label="已开通功能"
                        width="100">
                    <template slot-scope="scope">
                        <el-button type="text" size="small" :disabled="!scope.row.userAndProdutUDTO||scope.row.userAndProdutUDTO.length==0">{{scope.row.isExpand?"收起":"展开"}}</el-button>
                    </template>
                </el-table-column>
                <el-table-column type="expand" width="15">
                    <!---------详情展开内容------------>
                    <template slot-scope="scope" v-if="scope.row.userAndProdutUDTO&&scope.row.userAndProdutUDTO.length>0">
                        <el-table :data="scope.row.userAndProdutUDTO">
                            <el-table-column label="编号"
                                             type="index"
                                             width="60"
                                             :index="indexMethod"></el-table-column>
                            <!--<el-table-column label="开通时间" prop="startTime" width="180"></el-table-column>-->
                            <el-table-column label="接入方式">
                                <template slot-scope="access">
                                    {{access.row.accessType.join(',')}}
                                </template>
                            </el-table-column>
                            <el-table-column label="结算方式">
                                <template slot-scope="charge">
                                    {{charge.row.chargeType.join(',')}}
                                </template>
                            </el-table-column>
                            <el-table-column label="开通功能" prop="productName"></el-table-column>
                            <el-table-column label="产品服务有效期" prop="endTime" width="260">
                                <template slot-scope="times">
                                    {{times.row.startTime.substr(0,10)}}～{{times.row.endTime.substr(0,10)}}
                                </template>
                            </el-table-column>
                            <!--<el-table-column label="操作">
                                <template slot-scope="detail">
                                    <el-popover
                                            placement="top-start"
                                            width="180"
                                            trigger="click">
                                        <el-form label-position="top" :inline="true">
                                            <el-form-item label="服务开始时间">
                                                <el-date-picker size="mini" type="date"
                                                           :value-format="yyyy-MM-dd"
                                                           placeholder="选择开始时间"
                                                           v-model="startT"
                                                           style="width: 100%;"></el-date-picker>
                                            </el-form-item>
                                            <el-form-item label="服务结束时间">
                                                <el-date-picker size="mini" type="date"
                                                           value-format="yyyy-MM-dd"
                                                           placeholder="选择结束时间"
                                                           v-model="endT"
                                                           style="width: 100%;"></el-date-picker>
                                            </el-form-item>
                                            <div style="text-align: center">
                                                <el-button type="primary" size="mini" @click="reBuyProduct(scope.row.productId,scope.row.userId)">确定</el-button>
                                            </div>
                                        </el-form>
                                        <el-button slot="reference" size="mini">续费</el-button>
                                    </el-popover>
                                    <el-button type="text" size="small" @click="showDelDetail(detail.row,scope.row.userAndProdutUDTO,detail.$index)">删除功能</el-button>
                                </template>
                            </el-table-column>-->
                            <el-table-column label="状态" width="80">
                                <template slot-scope="scope">
                                    <span v-if="scope.row.serviceStatus==0">已停用</span>
                                    <span v-if="scope.row.serviceStatus==1">已启用</span>
                                </template>
                            </el-table-column>
                            <el-table-column label="操作" width="60">
                                <template slot-scope="scope">
                                    <el-button v-if="scope.row.serviceStatus==0" type="text" size="small" @click="updateServiceStatus(scope.row,1)">启用</el-button>
                                    <el-button v-if="scope.row.serviceStatus==1" type="text" size="small" @click="updateServiceStatus(scope.row,0)">停用</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </template>
                    <!---------详情展开内容end------------>
                </el-table-column>
            </el-table>
        </div>
        <el-pagination v-if="total>pageSize"
                       :current-page.sync="currentPage"
                       @current-change="currentChange"
                       background
                       :page-size="pageSize"
                       layout="total,prev, pager, next, jumper"
                       :total="total">
        </el-pagination>
    </div>
</template>

<script>
  import api from '@api/admin.js';
  import utils from '@api/utils.js';

  export default {
    name: 'authed-admin',
    data: function () {
      return {
        dialogFormVisible: false,
        rejectReason: '',
        startT:'',
        endT:'',
        type:'',
        currentId: '',
        status:'',
        list: [],
        cacheData: {},
        currentPage: 1,
        pageSize: 10,
        total: 0,
        filter: {
          time: [],
          orgName: '',
          userName: ''
        }
      }
    },
    created() {
      const cur = this.$route.params&&this.$route.params.currentPage;
      if(cur){
        this.currentPage = cur;
      }
      this.getDataList();
    },
    methods: {
      showPickup(row){
        row.isExpand = !row.isExpand;
      },
      proLineRow(row){
        const disable = row.row.userAndProdutUDTO&&row.row.userAndProdutUDTO.length>0;
        if(!disable){         //不能展开
          return 'pro-line-disable';
        }else{
          return '';
        }
      },
      warning(msg,type){
        this.$message({
          showClose: true,
          message:msg,
          type:type||'warning'
        })
      },
      showConfirmDialog(msg,resolve){
        this.$alert(msg, '提示', {
          confirmButtonText: '确定',
          type: 'warning'
        }).then(() => {
          resolve();
        }).catch(() => {});
      },
      reBuyProduct(productId,userId){
        const param = {
          productId,
          userId,
          endTime:this.endT
        };
        api.reBuyProduct(param).then((res) => {
          if (res.data.code == '0') {
            this.warning(res.data.msg || '操作成功', 'success');
          } else {
            this.warning(res.data.msg || '操作失败');
          }
        }).catch((error) => {
          this.warning("服务器正忙...");
        });
      },
      showDelDetail(row,data,index){
        this.showConfirmDialog('确定要删除该功能吗？',()=> {
          api.delAdminDetail({productId:row.productId, userId:row.userId}).then((res) => {
            if (res.data.code == '0') {
              this.warning(res.data.msg || '操作成功', 'success');
              data.splice(index,1);         //删除成功后删除数据
            } else {
              this.warning(res.data.msg || '操作失败');
            }
          }).catch((error) => {
            this.warning("服务器正忙...");
          });
        });
      },
      updateServiceStatus(row,serviceStatus){
        const status=serviceStatus==0?'停用':'启用';
        this.showConfirmDialog('确定要'+status+'该功能吗？',()=> {
          api.startAndendByuserId({productId:row.productId,userId: row.userId, serviceStatus}).then((res) => {
            if (res.data.code == '0') {
              row.serviceStatus = serviceStatus;
              this.warning(res.data.msg || '操作成功', 'success');
            } else {
              this.warning(res.data.msg || '操作失败');
            }
          }).catch((error) => {
            this.warning("服务器正忙...");
          });
        });
      },
      toEditAdmin(row){
        //传参必须用命名路由
        this.$router.push({
          name:'addAdmin',
          params:{info:row,currentPage:this.currentPage}
        })
      },
      showDelDialog(id){
        this.$alert('确定要删除吗？', '提示', {
          confirmButtonText: '确定',
          callback: action => {
            if(action == 'confirm'){
              api.delSuperAdmin({id}).then((res)=>{
                if(res.data.code=='0'){
                  this.warning(res.data.msg||'操作成功','success');
                  this.getDataList(); //操作成功刷新列表
                }else{
                  this.warning(res.data.msg);
                }
              }).catch((error)=>{
                this.warning("服务器正忙...");
              });

            }
          }
        });
      },
      indexMethod(index) {
        return ((this.currentPage - 1) * this.pageSize) + index + 1;
      },
      filterDatas(){
        this.currentPage = 1;
        this.getDataList();
      },
      getDataList() {
        const param = this.getFilterItems();
        api.getAuthenticated(param).then((res) => {
          if (res.data.code == '0') {
            const data = res.data.data;
            this.list = data.records;       //当前页显示的数据
            this.cacheData[param.current] = data.records;       //缓存数据
            this.total = data.total;
          }
        }).catch((error) => {
          console.log(error);
        });
      },
      currentChange(next) {          //切换当前页
        this.currentPage = next;
        if (this.cacheData[next]) {       //如果已请求过该页数据，则使用缓存不重复请求
          this.list = this.cacheData[next];
        } else {
          this.getDataList();
        }
      },
      getFilterItems() {           //筛选
        const time = this.filter.time;
        const startTime = time&&time[0]||undefined;
        const endTime = time&&time[1]||undefined;
        const param = {
          startTime,
          endTime,
          userName: this.filter.userName||undefined,
          orgName: this.filter.orgName||undefined,
          current: this.currentPage,
          size: this.pageSize
        };
        return param;
      },
      exportData() {             //导出
        const canExport = utils.exportCondition(this.filter.time);
        if(typeof canExport == 'string'){
          this.$message({
            showClose: true,
            message:canExport,
            type:'warning'
          });
          return;
        }
        let param = this.getFilterItems();
        param.autStatus = 1;        //已认证
        api.exportAuthedAdmin(param).then((res) => {
          if (res.data.code = '0') {
            utils.downloadExportedData(res.data, '已认证超管信息表.xls');
            this.$message({showClose: true,message: "导出成功", type: 'success'});
          } else {
            this.$message({
              showClose: true,
              message: res.data.msg,
              type: 'warning'
            });
          }
        }).catch((error) => {
          this.$message({
            showClose: true,
            message: "服务器正忙...",
            type: 'warning'
          });
        });
      }
    }
  }
</script>

<style lang="less">
    @import "../../less/admin.less";
    .pro-line-disable{
        .el-table__expand-column .cell{
            display: none;
        }
    }
</style>