elink-star
/
esua-epdc-admin
7
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

活动管理详情

master
曲树通 6 years ago
parent
ee2062c982
commit
19e68080eb
1 changed files with 438 additions and 395 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 833
      src/views/modules/heart/actuserclock-detail.vue

833
src/views/modules/heart/actuserclock-detail.vue
View File

@ -1,424 +1,467 @@
<template>
<div class="project-handle">
<div class="project-detail">
<div class="project-detail-tip">处理操作 :</div>
<el-form ref="dataForm" label-width="120px" label-position="right" style="width: 720px;" :model="dataForm" :rules="dataRule" @keyup.enter.native="dataFormSubmitHandle()">
<el-form-item label="是否加积分 :" prop="status">
<el-radio v-model="dataForm.status" :disabled="isAble" label="5">确认加积分</el-radio>
<el-radio v-model="dataForm.status" :disabled="isAble" label="6">拒绝加积分</el-radio>
</el-form-item>
<el-form-item label="处理意见 :" prop="failureReason">
<el-input :rows="4" v-model="dataForm.failureReason" :disabled="isAble" type="textarea" placeholder="请写明理由，100字以内"></el-input>
</el-form-item>
<el-form-item style="float: right;">
<el-button size="small" style="width: 95px" type="primary" :disabled="isAble" @click="dataFormSubmitHandle()">{{ $t('confirm') }}</el-button>
<el-button size="small" style="width: 95px" @click="backToActClockList">{{ '返回' }}</el-button>
</el-form-item>
</el-form>
<div class="container">
<div class="location"><span style="font-weight: bold;color: #606266">打卡位置 :</span> {{dataForm.address}}</div>
<div id="mapContainer" style="width:450px;height:220px;"></div>
</div>
</div>
<div class="handle-operation">
<div class="handle-operation-tip">打卡详情</div>
<el-table v-loading="dataListLoading" :data="dataList" border @selection-change="dataListSelectionChangeHandle" style="width: 100%;">
<el-table-column label="序号" type="index" show-overflow-tooltip align="center" width="50"></el-table-column>
<el-table-column prop="realName" label="报名人" header-align="center" align="center"></el-table-column>
<el-table-column prop="sex" label="性别" :formatter="formatSex" header-align="center" align="center"></el-table-column>
<el-table-column prop="age" label="年龄" header-align="center" align="center"></el-table-column>
<el-table-column prop="mobile" label="联系电话" header-align="center" align="center"></el-table-column>
<el-table-column prop="clockAddress" label="打卡地点" header-align="center" align="center"></el-table-column>
<el-table-column prop="clockDesc" label="打卡描述" header-align="center" align="center"></el-table-column>
<el-table-column label="图片" fixed="right" header-align="center" align="center" width="400">
<template slot-scope="scope">
<el-image
class="avatar1"
v-if="scope.row.clockPic[0]"
:src="scope.row.clockPic[0]"
:key="scope.row.clockPic[0]"
:preview-src-list="previewImgList"
@click="clickImg(scope.row.clockPic[0])"></el-image>
<el-image
class="avatar1"
v-if="scope.row.clockPic[1]"
:src="scope.row.clockPic[1]"
:key="scope.row.clockPic[1]"
:preview-src-list="previewImgList"
@click="clickImg(scope.row.clockPic[1])"></el-image>
<el-image
class="avatar1"
v-if="scope.row.clockPic[2]"
:src="scope.row.clockPic[2]"
:key="scope.row.clockPic[2]"
:preview-src-list="previewImgList"
@click="clickImg(scope.row.clockPic[2])"></el-image>
</template>
</el-table-column>
</el-table>
</div>
<div class="project-handle"
style="background: #ffffff;">
<div class="project-detail">
<div class="project-detail-tip">处理操作 :</div>
<el-form ref="dataForm"
:model="dataForm"
:rules="dataRule"
@keyup.enter.native="dataFormSubmitHandle()">
<el-form-item label="是否加积分 :"
prop="status">
<el-radio v-model="dataForm.status"
:disabled="isAble"
label="5">确认加积分</el-radio>
<el-radio v-model="dataForm.status"
:disabled="isAble"
label="6">拒绝加积分</el-radio>
</el-form-item>
<el-form-item label="处理意见 :"
prop="failureReason">
<el-input :rows="4"
v-model="dataForm.failureReason"
:disabled="isAble"
type="textarea"
placeholder="请写明理由，100字以内"></el-input>
</el-form-item>
<el-form-item style="float: right;">
<el-button size="small"
style="width: 95px"
type="primary"
:disabled="isAble"
@click="dataFormSubmitHandle()">{{ $t('confirm') }}</el-button>
<el-button size="small"
style="width: 95px"
@click="backToActClockList">{{ '返回' }}</el-button>
</el-form-item>
</el-form>
</div>
<div class="container">
<div class="location"><span style="font-weight: bold;color: #606266">打卡位置 :</span> {{dataForm.address}}</div>
<div id="mapContainer"
style="width:450px;height:220px;"></div>
</div>
<div class="handle-operation">
<div class="handle-operation-tip">打卡详情</div>
<el-table v-loading="dataListLoading"
:data="dataList"
border
@selection-change="dataListSelectionChangeHandle"
style="width: 100%;">
<el-table-column label="序号"
type="index"
show-overflow-tooltip
align="center"
width="50"></el-table-column>
<el-table-column prop="realName"
label="报名人"
header-align="center"
align="center"></el-table-column>
<el-table-column prop="sex"
label="性别"
:formatter="formatSex"
header-align="center"
align="center"></el-table-column>
<el-table-column prop="age"
label="年龄"
header-align="center"
align="center"></el-table-column>
<el-table-column prop="mobile"
label="联系电话"
header-align="center"
align="center"></el-table-column>
<el-table-column prop="clockAddress"
label="打卡地点"
header-align="center"
align="center"></el-table-column>
<el-table-column prop="clockDesc"
label="打卡描述"
header-align="center"
align="center"></el-table-column>
<el-table-column label="图片"
fixed="right"
header-align="center"
align="center"
width="400">
<template slot-scope="scope">
<el-image class="avatar1"
v-if="scope.row.clockPic[0]"
:src="scope.row.clockPic[0]"
:key="scope.row.clockPic[0]"
:preview-src-list="previewImgList"
@click="clickImg(scope.row.clockPic[0])"></el-image>
<el-image class="avatar1"
v-if="scope.row.clockPic[1]"
:src="scope.row.clockPic[1]"
:key="scope.row.clockPic[1]"
:preview-src-list="previewImgList"
@click="clickImg(scope.row.clockPic[1])"></el-image>
<el-image class="avatar1"
v-if="scope.row.clockPic[2]"
:src="scope.row.clockPic[2]"
:key="scope.row.clockPic[2]"
:preview-src-list="previewImgList"
@click="clickImg(scope.row.clockPic[2])"></el-image>
</template>
</el-table-column>
</el-table>
<el-pagination :current-page="page"
:page-sizes="[10, 20, 50, 100]"
:page-size="limit"
:total="total"
layout="total, sizes, prev, pager, next, jumper"
@size-change="pageSizeChangeHandle"
@current-change="pageCurrentChangeHandle">
</el-pagination>
</div>
</div>
</template>
<script>
var map;
var markerList =[];
var radiusList =[];
var clockList =[];
var markerList = [];
var radiusList = [];
var clockList = [];
import mixinViewModule from '@/mixins/view-module'
import debounce from 'lodash/debounce'
import 'element-ui/lib/theme-chalk/timeline.css'
import 'element-ui/lib/theme-chalk/timeline-item.css'
import 'element-ui/lib/theme-chalk/image.css'
export default {
mixins: [mixinViewModule],
name: 'ActUserClockDetail',
data () {
return {
mixinViewModuleOptions: {
getDataListURL: '/heart/actuserclocklog/page',
getDataListIsPage: true
},
dataForm: {
id: '',
actId: '',
status: '',
failureReason: '',
address: '',
latitude: '',
longitude: '',
radius: 200,
clockPic: []
},
previewImgList: [],
isAble: false
}
mixins: [mixinViewModule],
name: 'ActUserClockDetail',
data () {
return {
mixinViewModuleOptions: {
getDataListURL: '/heart/actuserclocklog/page',
getDataListIsPage: true
},
dataForm: {
id: '',
actId: '',
status: '',
failureReason: '',
address: '',
latitude: '',
longitude: '',
radius: 200,
clockPic: []
},
previewImgList: [],
isAble: false
}
},
mounted () {
this.dataForm.id = this.$route.query.id
this.dataForm.actId = this.$route.query.actId
this.init()
},
computed: {
dataRule () {
return {
status: [
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
],
failureReason: [
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
]
}
}
},
methods: {
backToActClockList () {
this.$emit('refreshDataList')
this.$parent.selectComponent = 'ActUserClockLog'
this.$router.push({ path: '/heart-actinfo', query: { id: this.dataForm.actId } })
},
mounted () {
this.dataForm.id = this.$route.query.id
this.dataForm.actId = this.$route.query.actId
this.init()
setMap (data) {
//步骤：定义map变量 调用 qq.maps.Map() 构造函数 获取地图显示容器
//设置地图中心点
var myLatlng = new qq.maps.LatLng(data.latitude, data.longitude);
//定义工厂模式函数
var zoom = this.capacity(data);
var myOptions = {
zoom: zoom, //设置地图缩放级别
center: myLatlng, //设置中心点样式
mapTypeId: qq.maps.MapTypeId.ROADMAP //设置地图样式详情参见MapType
}
// //获取dom元素添加地图信息
map = new qq.maps.Map(document.getElementById("mapContainer"), myOptions);
//设置圆形
var radius = new qq.maps.Circle({
center: new qq.maps.LatLng(data.latitude, data.longitude),
radius: this.dataForm.radius,
map: map
});
radiusList.push(radius);
var marker = new qq.maps.Marker({
position: myLatlng,
map: map
});
markerList.push(marker)
},
computed: {
dataRule () {
return {
status: [
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
],
failureReason: [
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
]
}
init () {
this.$nextTick(() => {
if (this.dataForm.id) {
this.getInfo();
}
})
},
methods: {
backToActClockList () {
this.$emit('refreshDataList')
this.$parent.selectComponent = 'ActUserClockLog'
this.$router.push({ path: '/heart-actinfo', query: { id: this.dataForm.actId}})
},
setMap(data) {
//步骤：定义map变量 调用 qq.maps.Map() 构造函数 获取地图显示容器
//设置地图中心点
var myLatlng = new qq.maps.LatLng(data.latitude,data.longitude);
//定义工厂模式函数
var zoom = this.capacity(data);
var myOptions = {
zoom: zoom, //设置地图缩放级别
center: myLatlng, //设置中心点样式
mapTypeId: qq.maps.MapTypeId.ROADMAP //设置地图样式详情参见MapType
}
// //获取dom元素添加地图信息
map = new qq.maps.Map(document.getElementById("mapContainer"), myOptions);
//设置圆形
var radius = new qq.maps.Circle({
center:new qq.maps.LatLng(data.latitude,data.longitude),
radius: this.dataForm.radius,
map: map
});
radiusList.push(radius);
var marker = new qq.maps.Marker({
position:myLatlng,
map:map
});
markerList.push(marker)
},
init () {
this.$nextTick(() => {
if (this.dataForm.id) {
this.getInfo();
}
})
},
// 点击查看大图
clickImg (url) {
this.previewImgList = []
this.previewImgList.push(url)
},
getDataList () {
this.dataListLoading = true
this.$http.get(
this.mixinViewModuleOptions.getDataListURL,
{
params: {
order: this.order,
orderField: this.orderField,
page: this.mixinViewModuleOptions.getDataListIsPage ? this.page : null,
limit: this.mixinViewModuleOptions.getDataListIsPage ? this.limit : null,
...this.dataForm
}
}
).then(({ data: res }) => {
this.dataListLoading = false
if (res.code !== 0) {
this.dataList = []
this.total = 0
return this.$message.error(res.msg)
}
this.dataList = this.mixinViewModuleOptions.getDataListIsPage ? res.data.list : res.data
this.total = this.mixinViewModuleOptions.getDataListIsPage ? res.data.total : 0
this.dataList.forEach((item) => {
var LogLatlng = new qq.maps.LatLng(item.clockLatitude,item.clockLongitude);
var LogMarker = new qq.maps.Marker({
position:LogLatlng,
map:map
});
markerList.push(LogMarker)
});
console.log(markerList)
// 点击查看大图
clickImg (url) {
this.previewImgList = []
this.previewImgList.push(url)
},
getDataList () {
this.dataListLoading = true
this.$http.get(
this.mixinViewModuleOptions.getDataListURL,
{
params: {
order: this.order,
orderField: this.orderField,
page: this.mixinViewModuleOptions.getDataListIsPage ? this.page : null,
limit: this.mixinViewModuleOptions.getDataListIsPage ? this.limit : null,
...this.dataForm
}
}
).then(({ data: res }) => {
this.dataListLoading = false
if (res.code !== 0) {
this.dataList = []
this.total = 0
return this.$message.error(res.msg)
}
this.dataList = this.mixinViewModuleOptions.getDataListIsPage ? res.data.list : res.data
this.total = this.mixinViewModuleOptions.getDataListIsPage ? res.data.total : 0
this.dataList.forEach((item) => {
var LogLatlng = new qq.maps.LatLng(item.clockLatitude, item.clockLongitude);
var LogMarker = new qq.maps.Marker({
position: LogLatlng,
map: map
});
markerList.push(LogMarker)
});
console.log(markerList)
}).catch(() => {
this.dataListLoading = false
})
},
// 获取信息
getInfo () {
this.$http.get(`/heart/actuserclocklog/clockDetail/${this.dataForm.id}`).then(({ data: res }) => {
if (res.code !== 0) {
return this.$message.error(res.msg)
}
this.dataForm = {
...this.dataForm,
...res.data
}
if (res.data.status != '5' && res.data.status != '6') {
this.dataForm.status = '5';
this.dataForm.failureReason = '';
} else {
this.isAble = true;
}
this.setMap(res.data)
}).catch(() => {
this.dataListLoading = false
})
},
// 获取信息
getInfo () {
this.$http.get(`/heart/actuserclocklog/clockDetail/${this.dataForm.id}`).then(({ data: res }) => {
if (res.code !== 0) {
return this.$message.error(res.msg)
}
this.dataForm = {
...this.dataForm,
...res.data
}
if (res.data.status != '5' && res.data.status != '6') {
this.dataForm.status = '5';
this.dataForm.failureReason = '';
} else {
this.isAble = true;
}
this.setMap(res.data)
this.getDataList();
}).catch(() => {})
this.getDataList();
}).catch(() => { })
},
capacity(data) {
if(0 < data.radius && data.radius <= 25){
return 18
} else if (25 < data.radius && data.radius <= 50){
return 17
} else if (50 < data.radius && data.radius <= 100){
return 16
} else if (100 < data.radius && data.radius <= 200){
return 15
} else if (200 < data.radius && data.radius <= 500){
return 14
} else if (500 < data.radius && data.radius <= 1000){
return 13
} else if (1000 < data.radius && data.radius <= 2000){
return 12
} else if (2000 < data.radius && data.radius <= 5000){
return 11
}
},
formatSex: function (row, column) {
let state = row.sex
if (state === '0') {
return '女'
} else if (state === '1') {
return '男'
},
capacity (data) {
if (0 < data.radius && data.radius <= 25) {
return 18
} else if (25 < data.radius && data.radius <= 50) {
return 17
} else if (50 < data.radius && data.radius <= 100) {
return 16
} else if (100 < data.radius && data.radius <= 200) {
return 15
} else if (200 < data.radius && data.radius <= 500) {
return 14
} else if (500 < data.radius && data.radius <= 1000) {
return 13
} else if (1000 < data.radius && data.radius <= 2000) {
return 12
} else if (2000 < data.radius && data.radius <= 5000) {
return 11
}
},
formatSex: function (row, column) {
let state = row.sex
if (state === '0') {
return '女'
} else if (state === '1') {
return '男'
}
},
// 表单提交
dataFormSubmitHandle: debounce(function () {
this.$refs['dataForm'].validate((valid) => {
if (!valid) {
return false
}
if (this.dataForm.failureReason.length > 100) {
return this.$message.error('处理意见不超过100字')
}
this.isAble = true
this.$http['post']('/heart/actuserclocklog/pointCheck', this.dataForm).then(({ data: res }) => {
this.isAble = false
if (res.code !== 0) {
return this.$message.error(res.msg)
}
this.$message({
message: this.$t('prompt.success'),
type: 'success',
duration: 500,
onClose: () => {
this.$emit('refreshDataList')
this.$parent.selectComponent = 'ActUserClockLog'
this.$router.push({ path: '/heart-actinfo', query: { id: this.dataForm.actId } })
}
},
// 表单提交
dataFormSubmitHandle: debounce(function () {
this.$refs['dataForm'].validate((valid) => {
if (!valid) {
return false
}
if (this.dataForm.failureReason.length > 100) {
return this.$message.error('处理意见不超过100字')
}
this.isAble = true
this.$http['post']('/heart/actuserclocklog/pointCheck', this.dataForm).then(({ data: res }) => {
this.isAble = false
if (res.code !== 0) {
return this.$message.error(res.msg)
}
this.$message({
message: this.$t('prompt.success'),
type: 'success',
duration: 500,
onClose: () => {
this.$emit('refreshDataList')
this.$parent.selectComponent = 'ActUserClockLog'
this.$router.push({ path: '/heart-actinfo', query: { id: this.dataForm.actId}})
}
})
}).catch(() => {})
})
}, 1000, { 'leading': true, 'trailing': false })
}
})
}).catch(() => { })
})
}, 1000, { 'leading': true, 'trailing': false })
}
}
</script>
<style lang="scss">
.avatar1 {
width: 120px;
height: 120px;
.avatar1 {
width: 120px;
height: 120px;
}
.el-image-viewer__close {
top: 16%;
}
.el-table__fixed-right::before,
.el-table__fixed::before {
background: transparent !important;
}
</style>
<style lang="scss" scoped>
.project-handle {
width: 100%;
height: 49%;
background: #ffffff;
box-sizing: border-box;
padding: 10px;
.project-detail {
background: #ffffff;
width: 60%;
height: 49%;
border: 2px solid #ccc;
box-sizing: border-box;
padding-top: 20px;
float: left;
margin-bottom: 1%;
position: relative;
.project-detail-tip {
position: absolute;
top: 0;
left: 0;
width: 80px;
height: 30px;
line-height: 30px;
color: #ffffff;
background: #4ac38b;
text-align: center;
}
.el-image-viewer__close {
top: 16%;
.el-form {
height: 100%;
float: left;
overflow-y: auto;
&::-webkit-scrollbar {
width: 5px;
height: 1px;
}
&::-webkit-scrollbar-thumb {
border-radius: 5px;
background: #ccc;
}
&::-webkit-scrollbar-track {
border-radius: 10px;
background: #fff;
}
}
.el-table__fixed-right::before, .el-table__fixed::before {
background: transparent !important;
}
.container {
background: #ffffff;
width: 40%;
height: 49%;
float: right;
.location {
height: 30px;
line-height: 30px;
}
</style>
<style lang="scss">
.project-handle {
.el-timeline {
padding-left: 9px;
font-size: 13px;
}
.el-textarea {
width: 600px !important;
}
.el-input {
width: 600px !important;
}
#map {
width: 100%;
height: calc(100% - 30px);
}
.el-form-item__label {
font-weight: bold;
}
.project-progress {
width: 20%;
height: 100%;
float: right;
border: 2px solid #ccc;
box-sizing: border-box;
margin-left: 1%;
padding-top: 20px;
overflow-y: auto;
&::-webkit-scrollbar {
width: 5px;
height: 1px;
}
</style>
<style lang="scss" scoped>
.project-handle {
width: 100%;
height: calc(100vh - 120px);
background: #ffffff;
box-sizing: border-box;
padding: 10px;
.project-detail {
width: 100%;
height: 49%;
border: 2px solid #ccc;
box-sizing: border-box;
padding: 10px;
padding-top: 20px;
float:left;
margin-bottom: 1%;
position:relative;
.project-detail-tip {
position: absolute;
top: 0;
left:0;
width: 80px;
height: 30px;
line-height: 30px;
color: #ffffff;
background: #4ac38b;
text-align:center;
}
.el-form {
width: 58%;
height: 100%;
float:left;
overflow-y:auto;
&::-webkit-scrollbar {
width: 5px;
height: 1px;
}
&::-webkit-scrollbar-thumb {
border-radius: 5px;
background: #ccc;
}
&::-webkit-scrollbar-track {
border-radius: 10px;
background: #fff;
}
}
.container {
width: 40%;
height: 100%;
float: right;
.location {
height: 30px;
line-height: 30px;
}
#map {
width: 100%;
height: calc(100% - 30px);
}
}
}
.project-progress {
width: 20%;
height: 100%;
float: right;
border: 2px solid #ccc;
box-sizing: border-box;
margin-left: 1%;
padding-top: 20px;
overflow-y:auto;
&::-webkit-scrollbar {
width: 5px;
height: 1px;
}
&::-webkit-scrollbar-thumb {
border-radius: 5px;
background: #aaa;
}
&::-webkit-scrollbar-track {
border-radius: 10px;
background: #ccc;
}
}
.handle-operation {
padding-top: 30px;
box-sizing: border-box;
width: 100%;
height: 49%;
box-sizing: border-box;
border: 2px solid #ccc;
float:left;
position: relative;
overflow-y:auto;
&::-webkit-scrollbar {
width: 5px;
height: 1px;
}
&::-webkit-scrollbar-thumb {
border-radius: 5px;
background: #aaa;
}
&::-webkit-scrollbar-track {
border-radius: 10px;
background: #ccc;
}
.handle-operation-tip {
position: absolute;
top: 0;
left:0;
width: 80px;
height: 30px;
line-height: 30px;
color: #ffffff;
background: #ff7600;
text-align:center;
}
}
&::-webkit-scrollbar-thumb {
border-radius: 5px;
background: #aaa;
}
&::-webkit-scrollbar-track {
border-radius: 10px;
background: #ccc;
}
}
.handle-operation {
padding-top: 30px;
box-sizing: border-box;
width: 100%;
height: 49%;
box-sizing: border-box;
border: 2px solid #ccc;
float: left;
position: relative;
overflow-y: auto;
&::-webkit-scrollbar {
width: 5px;
height: 1px;
}
&::-webkit-scrollbar-thumb {
border-radius: 5px;
background: #aaa;
}
&::-webkit-scrollbar-track {
border-radius: 10px;
background: #ccc;
}
.handle-operation-tip {
position: absolute;
top: 0;
left: 0;
width: 80px;
height: 30px;
line-height: 30px;
color: #ffffff;
background: #ff7600;
text-align: center;
}
}
}
</style>

Write Preview
Loading…
Cancel
Save