360 lines
15 KiB
HTML
360 lines
15 KiB
HTML
<!--#
|
|
layout("/layouts/platform.html"){
|
|
#-->
|
|
<style>
|
|
.table_fixed {
|
|
table-layout: fixed !important;
|
|
}
|
|
|
|
.map-search {
|
|
margin-bottom: 1rem;
|
|
border-radius: .25rem;
|
|
position: absolute;
|
|
top: 1rem;
|
|
background-color: white;
|
|
width: auto;
|
|
min-width: 22rem;
|
|
border-width: 0;
|
|
right: 1rem;
|
|
box-shadow: 0 2px 6px 0 rgba(114, 124, 245, .5);
|
|
}
|
|
.map-search .input-item{
|
|
position: relative;
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
-ms-flex-wrap: wrap;
|
|
flex-wrap: wrap;
|
|
-ms-flex-align: center;
|
|
align-items: center;
|
|
width: 100%;
|
|
height: 3rem;
|
|
}
|
|
|
|
|
|
</style>
|
|
|
|
|
|
<div id="app" v-cloak>
|
|
<guava ref="guava">
|
|
<el-card shadow="never">
|
|
<div class="search">
|
|
<div class="search-item">
|
|
<div class="search-item-label">年度：</div>
|
|
<div class="search-item-option">
|
|
<el-date-picker
|
|
placeholder="选择年度"
|
|
type="year" style="width: 100%"
|
|
v-model="pageForm.year"
|
|
value-format="yyyy">
|
|
</el-date-picker>
|
|
</div>
|
|
</div>
|
|
<div class="search-item">
|
|
<div class="search-item-label">活动名称：</div>
|
|
<div class="search-item-option">
|
|
<el-input @keyup.enter.native="doSearch" clearable placeholder="请输入内容"
|
|
clearable
|
|
style="width: 100%" v-model="pageForm.activityName">
|
|
</el-input>
|
|
</div>
|
|
</div>
|
|
<div class="search-query">
|
|
<el-button @click="doSearch" icon="el-icon-search" type="primary">搜索</el-button>
|
|
</div>
|
|
</div>
|
|
</el-card>
|
|
<el-card class="mt10" shadow="never">
|
|
<table-tool :app="this" label="活动列表">
|
|
<template #func>
|
|
<el-button @click="openAdd" size="medium" type="primary">新建活动</el-button>
|
|
</template>
|
|
</table-tool>
|
|
<el-table :data="tableData" :size="tableSize">
|
|
<el-table-column :index="indexMethod" align="center" header-align="center" label="序号" type="index"
|
|
width="80px"></el-table-column>
|
|
<el-table-column
|
|
:label="column.label"
|
|
:prop="column.prop"
|
|
:sortable="column.sortable"
|
|
align="center"
|
|
header-align="center"
|
|
show-overflow-tooltip
|
|
v-for="column in tableColumns"
|
|
>
|
|
<template scope="{row}" v-if="column.prop==='isDisabled'">
|
|
<el-switch
|
|
:active-value="false"
|
|
:inactive-value="true"
|
|
@change="(val)=>{activityStatusChange(row.notice,val,row.id)}"
|
|
active-color="#13ce66"
|
|
inactive-color="#ff4949"
|
|
v-model="row.isDisabled">
|
|
</el-switch>
|
|
</template>
|
|
<template scope="{row:{opAt}}" v-else-if="column.prop==='opAt'">
|
|
{{moment(opAt * 1000).format('YYYY-MM-DD HH:mm:ss')}}
|
|
</template>
|
|
<template scope="{row}" v-else-if="column.prop==='notice'">
|
|
<el-switch
|
|
:active-value="true"
|
|
:inactive-value="false"
|
|
@change="(val)=>{activityNoticeChange(row.isDisabled,val,row.id)}"
|
|
active-color="#13ce66"
|
|
inactive-color="#ff4949"
|
|
v-model="row.notice">
|
|
</el-switch>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="操作" width="150px">
|
|
<template scope="{row}">
|
|
<el-dropdown>
|
|
<el-button plain size="mini">
|
|
<i class="ti-settings"></i>
|
|
<span class="ti-angle-down"></span>
|
|
</el-button>
|
|
<el-dropdown-menu slot="dropdown">
|
|
<el-dropdown-item @click.native="openCode(row.id)">
|
|
活动二维码
|
|
</el-dropdown-item>
|
|
<el-dropdown-item @click.native="makeCode(row)">
|
|
签到二维码
|
|
</el-dropdown-item>
|
|
<el-dropdown-item @click.native="sendMsg(row)">
|
|
通知
|
|
</el-dropdown-item>
|
|
<el-dropdown-item @click.native="openView(row)">
|
|
查看
|
|
</el-dropdown-item>
|
|
<el-dropdown-item @click.native="openEdit(row)">
|
|
编辑
|
|
</el-dropdown-item>
|
|
<el-dropdown-item @click.native="deleteDo(row)">
|
|
删除
|
|
</el-dropdown-item>
|
|
</el-dropdown-menu>
|
|
</el-dropdown>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
<!--#include("/layouts/pagination.html"){}#-->
|
|
</el-card>
|
|
|
|
<template #view>
|
|
<!--#include("/platform/trainSingUp/manage/include_activity_view.html"){}#-->
|
|
</template>
|
|
</guava>
|
|
|
|
<el-dialog :close-on-click-modal="false" :visible.sync="courseDialog" :title="trainType + '列表'" top="50px">
|
|
|
|
<el-table :data="clickRow.courseList">
|
|
<el-table-column :label="trainType + '名称'" prop="courseName"></el-table-column>
|
|
<el-table-column label="校区" prop="campus"></el-table-column>
|
|
<el-table-column label="是否签到" prop="isMobileSign">
|
|
<template scope="{row}">
|
|
<span v-if="row.isMobileSign === true">签到</span>
|
|
<span v-else>不签到</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="签到方式" prop="signType">
|
|
<template scope="{row}">
|
|
<span v-if="row.signType === 1">扫描二维码</span>
|
|
<span v-else-if="row.signType === 2">被扫</span>
|
|
<span v-else-if="row.signType === 3">GPS定位签到</span>
|
|
<span v-else>暂无签到方式</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="是否领取礼品" prop="isReceiveGift">
|
|
<template scope="{row}">
|
|
<span v-if="row.isReceiveGift === true">领取</span>
|
|
<span v-else>不领取</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="领取方式" prop="giftType">
|
|
<template scope="{row}">
|
|
<span v-if="row.giftType === 1">扫描二维码</span>
|
|
<span v-else-if="row.giftType === 2">面对面确认</span>
|
|
<span v-else>暂无领取方式</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="操作" width="260">
|
|
<template scope="{row}">
|
|
<el-button v-if="row.signType === 1" @click="makeCourseCode(row)" size="mini" type="primary">生成二维码
|
|
</el-button>
|
|
<el-button v-else size="mini" type="text">该{{trainType}}的签到方式不支持生成二维码</el-button>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
</el-dialog>
|
|
|
|
<send-msg ref="sendMsg" :url="url"></send-msg>
|
|
<open-qr-code ref="openQRCode" :url="url"></open-qr-code>
|
|
|
|
</div>
|
|
|
|
<script>
|
|
let geocoder = null
|
|
let viewMap = null
|
|
let viewMarker = null
|
|
var vue = new Vue({
|
|
el: '#app',
|
|
mixins: [initTableMixins],
|
|
data() {
|
|
const that = this
|
|
return {
|
|
url: '',
|
|
courseDialog: false,
|
|
trainType: '',
|
|
trainTypeList: [],
|
|
campusList: [],
|
|
tableColumns: [
|
|
{label: '活动名称', prop: 'activityName'},
|
|
{label: '年度', prop: 'year'},
|
|
{label: '开始时间', prop: 'activityStartTime'},
|
|
{label: '结束时间', prop: 'activityEndTime'},
|
|
{label: '是否开启', prop: 'isDisabled'},
|
|
{label: '是否通知', prop: 'notice'},
|
|
{label: '创建时间', prop: 'opAt'},
|
|
],
|
|
viewData: {},
|
|
mapDialog: false,
|
|
mapIndex: 0,
|
|
courseTypeList: [],
|
|
courseTimeListDialog: false,
|
|
courseTimeList: [],
|
|
viewMapDialog: false,
|
|
clickRow: {},
|
|
}
|
|
},
|
|
components: {
|
|
'open-qr-code': httpVueLoader('/components/plugins/OpenQRCode.vue'),
|
|
'send-msg': httpVueLoader('/components/plugins/SendMsgByGroupId.vue'),
|
|
},
|
|
methods: {
|
|
sendMsg(row) {
|
|
this.url = `<a href="` + (APP_DOMAIN + "/platform/mobile/trainSignUpActivity/trainList") + `">点击参与</a>`
|
|
this.$refs.sendMsg.openDialog(row.activityGroupId)
|
|
},
|
|
openCode(id) {
|
|
this.$refs.openQRCode.openCode("/platform/mobile/trainSignUpActivity/trainList")
|
|
},
|
|
makeCode(row) {
|
|
this.clickRow = row
|
|
const type = this.trainTypeList.find(o => o.code === row.trainType)
|
|
this.trainType = type ? type.name : '培训班'
|
|
this.courseDialog = true
|
|
},
|
|
makeCourseCode(row) {
|
|
const o = {
|
|
courseId: row.id
|
|
}
|
|
// 生成二维码的 base64 编码
|
|
const content = jrQrcode.getQrBase64(JSON.stringify(o))
|
|
let image = new Image()
|
|
image.src = content
|
|
let viewer = new Viewer(image)
|
|
viewer.show()
|
|
},
|
|
openAdd() {
|
|
sublime.jumpPagePjax('/platform/trainSingUp/manage/activity/add')
|
|
},
|
|
//活动状态改变
|
|
async activityStatusChange(notice, val, id) {
|
|
const resp = await $.post(loc() + '/activityStatusChange', {notice: notice, isDisabled: val, id})
|
|
if (resp.code === 0) {
|
|
this.notifySuccess(resp.msg)
|
|
} else {
|
|
this.notifyError(resp.msg)
|
|
}
|
|
},
|
|
async activityNoticeChange(isDisabled, val, id) {
|
|
const resp = await $.post(loc() + '/activityStatusChange', {isDisabled: isDisabled, notice: val, id})
|
|
if (resp.code === 0) {
|
|
this.notifySuccess(resp.msg)
|
|
} else {
|
|
this.notifyError(resp.msg)
|
|
}
|
|
},
|
|
async openEdit(row) {
|
|
sublime.jumpPagePjax('/platform/trainSingUp/manage/activity/add?id=' + row.id + '&fromEdit=edit')
|
|
},
|
|
async deleteDo(row) {
|
|
const confirm = await this.$confirm('此操作将永久删除, 是否继续?', '提示', {
|
|
confirmButtonText: '确定',
|
|
cancelButtonText: '取消',
|
|
type: 'warning'
|
|
})
|
|
if (confirm === "confirm") {
|
|
const resp = await $.post(loc() + '/doDelete', {id: row.id})
|
|
this.notifySuccess("删除成功")
|
|
this.doSearch()
|
|
}
|
|
},
|
|
async openView(row) {
|
|
const {id} = row
|
|
const resp = await $.get(loc() + '/findOne', {id})
|
|
if (resp.code === 0) {
|
|
let cloneData = clone(resp.data)
|
|
cloneData.campusList = new Set(cloneData.courseList.map(v => v.campus))
|
|
this.viewData = cloneData
|
|
const type = this.trainTypeList.find(o => o.code === cloneData.trainType)
|
|
this.trainType = type ? type.name : '培训班'
|
|
this.$refs['guava'].view()
|
|
}
|
|
},
|
|
openViewMap(point) {
|
|
if (!Array.isArray(point)) {
|
|
this.$message.warning('没有设置点位，无法通过地图查看')
|
|
return
|
|
}
|
|
this.viewMapDialog = true
|
|
this.$nextTick(() => {
|
|
viewMap = new AMap.Map("viewMap", {
|
|
resizeEnable: true,
|
|
center: point,
|
|
zoom: 16
|
|
})
|
|
if (viewMarker) {
|
|
viewMap.remove(viewMarker)
|
|
}
|
|
viewMarker = new AMap.Marker({
|
|
position: point,
|
|
offset: new AMap.Pixel(-13, -30)
|
|
})
|
|
viewMap.add(viewMarker)
|
|
viewMap.setFitView(null, false, [150, 60, 100, 60]);
|
|
})
|
|
},
|
|
getAddress(position) {
|
|
// if (!geocoder) {
|
|
// geocoder = new AMap.Geocoder({
|
|
// city: "010", //城市设为北京，默认：“全国”
|
|
// radius: 1000 //范围，默认：500
|
|
// });
|
|
// }
|
|
// geocoder.getAddress(position, (status, result) => {
|
|
// if (status === 'complete' && result.regeocode) {
|
|
// const address = result.regeocode.formattedAddress
|
|
// this.formData.courseList[this.mapIndex].location = address
|
|
// } else {
|
|
// log.error('根据经纬度查询地址失败')
|
|
// }
|
|
// })
|
|
},
|
|
openViewCourseTime(courseTimeList) {
|
|
this.courseTimeList = courseTimeList
|
|
this.courseTimeListDialog = true
|
|
},
|
|
},
|
|
async created() {
|
|
this.pageData()
|
|
this.trainTypeList = await getDictOptions("trainSignUpType")
|
|
this.campusList = await getCampus()
|
|
this.courseTypeList = await getEnumOptions('TrainCourseType')
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<!--#
|
|
}
|
|
#-->
|