epmet-work-pc/src/views/modules/pointsManage/pointsRanking/index.vue

<template>
  <div class="g-main">
    <div class="m-search">
      <el-form :inline="true" :model="formData" ref="ref_searchform" :label-width="'100px'">
        <div>
          <el-form-item label="所属街道" prop="street">
            <el-select v-model="formData.street" placeholder="请选择" clearable>
              <el-option v-for="item in streetData" :label="item.name" :value="item.id" :key="item.id" />
            </el-select>
          </el-form-item>
          <el-form-item label="新村" prop="community">
            <el-select v-model="formData.community" placeholder="请选择" clearable>
              <el-option v-for="item in communityData" :label="item.name" :value="item.id" :key="item.id" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button style="margin-left:10px" @click="handleSearch" type="primary">查询</el-button>
            <el-button style="margin-left:10px" @click="resetSearch" type="primary">重置</el-button>
          </el-form-item>
        </div>
      </el-form>
    </div>
    <div class="m-table">
      <el-table class="table" :data="tableData" border :height="tableHeight" v-loading="tableLoading" style="width: 100%;margin-top:16px" :cell-style="{height: '6vh'}">
        <el-table-column label="排名" header-align="center" align="center" type="index" width="50"></el-table-column>
        <el-table-column prop="street" header-align="center" align="center" label="所属街道" width="260"></el-table-column>
        <el-table-column prop="community" header-align="center" align="center" label="新村" width="260"></el-table-column>
<!--        <el-table-column prop="community" header-align="center" align="center" label="村庄" width="260"></el-table-column>-->
        <el-table-column prop="name" header-align="center" align="center" label="姓名" width="260"></el-table-column>
        <el-table-column prop="idNum" header-align="center" align="center" label="身份证" width="260"></el-table-column>
        <el-table-column prop="mobile" header-align="center" align="center" label="手机" width="260"></el-table-column>
        <el-table-column prop="positions" header-align="center" align="center" label="岗位类型/当前职位" width="260"></el-table-column>
        <el-table-column prop="totalScore" header-align="center" align="center" label="积分" width="260"></el-table-column>
<!--        <el-table-column label="操作" fixed="right" width="120" header-align="center" align="center" class="operate">-->
<!--          <template slot-scope="scope">-->
<!--            <el-button type="text" style="color:#1C6AFD;" size="small" @click="handleDetail(scope.row)">查看</el-button>-->
<!--          </template>-->
<!--        </el-table-column>-->
      </el-table>
      <div>
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="pageNo"
                       :page-sizes="[10, 20, 50]" :page-size="pageSize" layout="sizes, prev, pager, next, total" :total="total">
        </el-pagination>
      </div>
    </div>
    <el-dialog :visible.sync="detailShow" v-if="detailShow" formShow :close-on-click-modal="false"
               :close-on-press-escape="false" :title="'活动详情'" width="76%" top="5vh" @closed="detailClosed">
      <div class="section-title1">基本信息</div>
      <div class="base-info-grid">
        <div class="grid-row">
          <div class="grid-cell avatar-cell">
            <img src="@/assets/images/index/list-logo.png" alt class="avatar" />
          </div>
          <div class="grid-cell info-col left-col">
            <div class="info-item">
              <label>所属组织</label>
              <span style="display: flex;align-items: center;">区委组织部</span>
            </div>
            <div class="info-item">
              <label>岗位类型</label>
              <span style="display: flex;align-items: center;">政策宣传岗·宣传思想、纠纷调解岗·督促办理、设施维护岗·制止破坏、科技推广岗·传授技术</span>
            </div>
            <div class="info-item">
              <label>手机号</label>
              <span style="display: flex;align-items: center;">13309099990</span>
            </div>
            <div class="info-item">
              <label>服务星级</label>
              <span style="display: flex;align-items: center;">三星</span>
            </div>
          </div>
          <div class="grid-cell info-col right-col">
            <div class="info-item">
              <label>党员属性</label>
              <span style="display: flex;align-items: center;">无职党员</span>
            </div>
            <div class="info-item">
              <label>姓名</label>
              <span style="display: flex;align-items: center;">王军</span>
            </div>
            <div class="info-item">
              <label>身份证</label>
              <span style="display: flex;align-items: center;">3708**********2010</span>
            </div>
            <div class="info-item">
              <label>备注说明</label>
              <span style="display: flex;align-items: center;">-</span>
            </div>
          </div>
        </div>
      </div>
      <div class="section-title">服务记录</div>
      <div class="service-record-section">
        <el-table :data="serviceList" border style="width: 100%" :header-cell-style="{background: '#f9fafe', color: '#768297', fontWeight: '500',fontSize:'14px'}">
          <el-table-column align="center" prop="index" label="序号" width="80" />
          <el-table-column align="center" prop="postType" label="岗位类型" />
          <el-table-column align="center" prop="content" label="服务内容" min-width="200" />
          <el-table-column align="center" prop="image" label="图片" width="100">
            <template slot-scope="scope">
              <el-image v-if="scope.row.image" :src="scope.row.image" style="width: 40px; height: 40px" fit="cover"/>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="location" label="服务地点" />
          <el-table-column align="center" prop="time" label="服务时间" width="150" />
          <el-table-column align="center" prop="score" label="所得积分" width="100" />
        </el-table>
        <el-pagination @size-change="handleSizeChange1" @current-change="handleCurrentChange1" :current-page="currentPage" :page-sizes="[5, 10, 20]"
                       :page-size="pageSize1" layout="prev, pager, next, jumper" :total="total1" style="margin-top: 20px; text-align: right"/>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {requestGet, requestPost} from "@/js/dai/request";
import { mapGetters } from 'vuex'

let loading // 加载动画
export default {
  data () {
    return {
      currentPage: 1,
      pageSize1: 5,
      total1: 6,
      serviceList: [
        {
          index: 1,
          postType: "政策宣传岗·宣传思想",
          content: "向群众广泛宣传习近平新时代中国特色社会主义思想,宣传党的路线方针政策,协助组织做好群众的思想政治...",
          image: "https://via.placeholder.com/40x40?text=图",
          location: "XX新村XX村居委会",
          time: "2025-08-14 09:00:00",
          score: 1
        },
        {
          index: 2,
          postType: "纠纷调解岗·督促办理",
          content: "调解张军和王虎两家土地纠纷问题",
          image: "https://via.placeholder.com/40x40?text=图",
          location: "XX新村XX村180号",
          time: "2025-08-14 09:00:00",
          score: 1
        },
        {
          index: 3,
          postType: "科技推广岗·传授技术",
          content: '<el-button type="primary" icon="el-icon-video-play" size="mini">03:00</el-button>',
          image: "https://via.placeholder.com/40x40?text=图",
          location: "XX新村XX村32号",
          time: "2025-08-14 09:00:00",
          score: 1
        },
        {
          index: 4,
          postType: "设施维护岗·制止破坏",
          content: "制止了两位想破坏小区建筑器材的行为",
          image: "",
          location: "XX新村XX村小广场",
          time: "2025-08-14 09:00:00",
          score: 1
        },
        {
          index: 5,
          postType: "科技推广岗·传授技术",
          content: "传授给群众农作物培育技术,帮助群众发家致富",
          image: "https://via.placeholder.com/40x40?text=图",
          location: "XX新村XX村",
          time: "2025-08-14 09:00:00",
          score: 1
        }
      ],
      loading: false,
      total: 0,
      pageSize: 10,
      pageNo: 0,
      tableLoading: false,
      formData: {
        street: '',
        community: '',
      },
      tableData: [],
      formTitle: '新增活动',
      detailShow: false,
      detail:{},
      nextTreeNodeData: [],
      communityData: [],
      streetData: [],
    }
  },
  async mounted () {
    const { user } = this.$store.state
    this.communityActivityList()
    this.getNextTreeNode()
    this.getNextTreeNode1()
  },
  methods: {
    async getNextTreeNode(){
      const url = "/actual/base/communityBuilding/tree/nextTreeNode";
      let params = {
        level: 'community',
      };
      let { data, code, msg } = await requestGet(url, params);
      if (code === 0) {
        this.communityData = data.list
      } else {
        this.$message.error(msg)
      }
    },
    async getNextTreeNode1(){
      const url = "/actual/base/communityBuilding/tree/nextTreeNode";
      let params = {
        level: 'street',
      };
      let { data, code, msg } = await requestGet(url, params);
      if (code === 0) {
        this.streetData = data.list
      } else {
        this.$message.error(msg)
      }
    },
    handleClose() {
      this.$emit("close");
    },
    handleSizeChange1(val) {
      this.pageSize = val;
    },
    handleCurrentChange1(val) {
      this.currentPage = val;
    },
    async communityActivityList() {
      const url = "/actual/base/scoreRecord/rank";
      let params = {
        pageSize: this.pageSize,
        pageNo: this.pageNo,
        ...this.formData,
      };
      let { data, code, msg } = await requestGet(url, params);
      if (code === 0) {
        this.total = data.total
        this.tableData = data.list
      } else {
        this.$message.error(msg)
      }
    },
    async handleSearch () {
      this.communityActivityList()
    },
    detailClosed () {
      this.detailShow = false
    },
    async handleDetail (row) {
      this.detailShow = true
      this.formTitle = '详情'
    },
    resetForm(){
    },
    handleInitAdd (e) {
      this.resetForm()
      this.formTitle = '新增'
      this.detailShow = true
    },
    //重置搜索条件
    resetSearch () {
      this.formData = {
        street: '',
        community: '',
      }
      this.pageSize = 10
      this.pageNo = 1
      // this.loadTable()
      this.communityActivityList()
    },
    handleSizeChange (val) {
      this.pageSize = val
      this.pageNo = 1
      // this.loadTable()
      this.communityActivityList()
    },
    handleCurrentChange (val) {
      this.pageNo = val
      // this.loadTable()
      this.communityActivityList()
    },
  },
  computed: {
    tableHeight () {
      return this.$store.state.inIframe ? this.clientHeight - 350 + this.iframeHeight : this.clientHeight - 350
    },

    ...mapGetters(['clientHeight', 'iframeHeight'])
  },
}
</script>
<style lang="scss" scoped >
.g-main {
  width: 100%;
}

.m-search {
  background: #ffffff;
  border-radius: 4px;
  padding: 24px 10px 10px;
  box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.1);
  margin: 20px 7px 7px;
}

.m-table {
  background: #ffffff;
  box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  margin-top: 15px;
  padding: 24px 16px 10px;
  margin: 16px 7px 7px;

}

.div_btn {
  display: flex;
  justify-content: space-between;
}
.page-container {
  padding: 15px;
  background: #fff;
}
.close-btn {
  text-align: right;
  font-size: 18px;
  cursor: pointer;
  color: #999;
  margin-bottom: 10px;
}
.title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 15px;
}
.section-title {
  font-size: 14px;
  font-weight: bold;
  margin: 30px 0 16px;
  color: #333;
}

.section-title1 {
  font-size: 14px;
  font-weight: bold;
  margin: 0px 0 16px;
  color: #333;
}
/* 核心：网格边框样式 */
.base-info-grid {
  width: 94%;
  margin: auto;
  border: 1px solid #e6e6e6;
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.grid-row {
  display: flex;
  width: 100%;
}
.grid-cell {
  border-right: 1px solid #e6e6e6;
  border-bottom: 1px solid #e6e6e6;
  box-sizing: border-box;
  padding: 10px;
}
/* 最后一列去掉右侧边框 */
.grid-cell:last-child {
  border-right: none;
}
/* 头像单元格 */
.avatar-cell {
  width: 160px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-bottom: none; /* 头像单元格只保留右侧边框 */
}
.avatar {
  width: 100px;
  height: 120px;
  border-radius: 4px;
}
/* 信息列容器 */
.info-col {
  flex: 1;
  border-bottom: none; /* 信息列只保留内部项的边框 */
  padding: 0;
}
/* 左右列均分 */
.left-col {
  border-right: 1px solid #e6e6e6;
}
/* 单个信息项（带底部边框 + 标签值竖线分隔） */
.info-item {
  padding: 10px;
  border-bottom: 1px solid #e6e6e6;
  display: flex;
  align-items: center; /* 垂直居中，更美观 */
  min-height: 40px; /* 统一行高 */
}
/* 最后一个信息项去掉底部边框 */
.info-col .info-item:last-child {
  border-bottom: none;
}
/* 标签样式 - 核心新增竖线分隔 */
.info-item label {
  width: 80px;
  text-align: right;
  font-weight: normal;
  color: #666;
  padding-right: 10px;
  flex-shrink: 0;
  /* 竖线样式 */
  border-right: 1px solid #e6e6e6;
  margin-right: 10px;
}
/* 内容样式 */
.info-item span {
  flex: 1;
  word-break: break-all;
  height: 34px;
}

/* 服务记录区域样式 */
.service-record-section {
  width: 94%;
  margin: 20px auto 0;
}
</style>