You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
432 lines
14 KiB
432 lines
14 KiB
<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>
|