表头增加提示函数
<pre><code class="language-markdown">// 表格中表头有提示的函数
export default{
data() {
return {
}
},
methods: {
/**
* key是表头显示的内容, value是提示里面的内容，type == 1 表示是提示在文字后面，2的话提示在文字前面
*/
tipsHeaderFun({ key, value, type = 1 }, h, data) {
if (type == 1) { // 序号在前
return h('span',
{
},
[
h('span', [key]),
h('el-popover',
{
attrs: {
placement: 'top',
trigger: 'hover',
title: '',
width: 250
}
},
[
h('i',
{
class: 'el-icon-info',
style: 'color:#ccc;margin-left:5px;',
slot: 'reference'
}),
h('div', value)
])
])
} else { // 序号在后，提示在前
return h('span',
{
},
[
h('el-popover',
{
attrs: {
placement: 'top',
trigger: 'hover',
title: '',
width: 250
}
},
[
h('i',
{
class: 'el-icon-info',
style: 'color:#ccc;margin-right:5px;',
slot: 'reference'
}),
h('div', value)
]),
h('span', [key])
])
}
}
}
}</code></pre>
<p>使用</p>
<pre><code class="language-markdown"><template>
<div style="width: 100%" v-loading="formLoading">
<el-table :data='activitiesListData' :header-row-style="tableHeadStyle" row-key='activityId' fit highlight-current-row
:class="tableCss"
class="customTableHead">
<el-table-column align='center' label='活动名称' min-width="350">
<template slot-scope='scope'>
<div class="clearfix">
<div class="fl margin-r10 border-radio2 c-overflow-h width100 c-max-height67">
<img v-if="scope.row.poster" :src="scope.row.poster" class="c-width100 c-max-height67" alt="">
<el-image v-else :src="scope.row.poster" :params="{width: '100', height: '50'}" :isImg="false"></el-image>
</div>
<div class="fl c-width70">
<div class="c-fs-14 c-fc-333 c-textAlign-l c-ws-pw" :title="scope.row.name">{{scope.row.name}}</div>
<div class="c-fs-12 color-999 c-textAlign-l line-limit-length-250" :title="scope.row.place">{{scope.row.place}}</div>
<div class="c-fs-12 color-999 c-textAlign-l">
{{scope.row.enrollDate}}
</div>
</div>
</div>
</template>
</el-table-column>
<el-table-column width='100' align='center' label='状态'>
<template slot-scope='scope'>
<div>报名：{{scope.row.applyStatus == 0 ? '未开始' : (scope.row.applyStatus == 1 ? '进行中' : '已截止')}}</div>
<div>活动：{{scope.row.activityStatus == 0 ? '未开始' : (scope.row.activityStatus == 1 ? '进行中' : '已结束')}}</div>
</template>
</el-table-column>
<el-table-column width='90' align='center' label='创建时间'>
<template slot-scope='scope'>
<span class="c-fc-333">{{scope.row.createdAt.split(' ')[0]}}</span>
<div class="c-fc-333">{{scope.row.createdAt.split(' ')[1]}}</div>
</template>
</el-table-column>
<el-table-column width='80' align='center' label='排序数字' :render-header="tipsHeaderFun.bind(null, tipsHeader.sort)">
<template slot-scope='scope'>
<change-sort :disabled="!(permission >= 3)"
:value="scope.row.sort"
:row="scope.row"
@saveSort="saveSort">
</change-sort>
</template>
</el-table-column>
<el-table-column width="280" align='center' label='报名详情'>
<template slot-scope='scope'>
<div class="clearfix">
<div class="margin-b10 fl c-ww50">
<p class="color-999"><span class="c-d-inlineb c-ww50">报名人数</span><span class="c-d-inlineb c-ww50">报名成功</span></p>
<p><span class="c-d-inlineb c-ww50">{{scope.row.enrollNum}}</span><span class="c-d-inlineb c-ww50">{{scope.row.enrollChecked}}</span></p>
</div>
<div class="fl c-ww50">
<p class="color-999"><span class="c-d-inlineb c-ww50">待审核</span><span class="c-d-inlineb c-ww50">未付款</span></p>
<p><span class="c-d-inlineb c-ww50">{{scope.row.enrollUnCheck}}</span><span class="c-d-inlineb c-ww50">{{scope.row.enrollRetuen}}</span></p>
</div>
</div>
</template>
</el-table-column>
<el-table-column label='操作' align='center' width='180'>
<template slot-scope='scope'>
<div class="c-textAlign-l" v-if="permission == 3">
<b class="v-line" @click="linkToEdit(scope.row.activityId)">{{scope.row.enrollStatus=='已结束'? '查看': '编辑'}}</b>
<b class="v-line" v-if="scope.row.enrollStatus !=='已结束'" @click="openInvitation(scope.row.activityId,scope.row.isInvitionCard)">邀请卡设置</b>
</div>
<div class="c-textAlign-l" v-if="permission == 3">
<b class="v-line" @click="linkToUserList(scope.row)">名单管理</b>
<b class="v-line" @click="signManage(scope.row)">签到管理</b>
</div>
<div class="c-textAlign-l" v-if="permission == 3">
<b class="v-line" v-if="scope.row.enrollStatus=='已发布'" @click='cancelPublish(scope.row.activityId)'>取消发布</b>
<b class="v-line" v-if="scope.row.enrollStatus=='未发布'" @click='publishActivity(scope.row.activityId,scope.row.hasTicket)'>发布活动</b>
<el-dropdown @command="handleCommand" trigger="click" class="v-line">
<span class="el-dropdown-link family-PingFangSC-Regular">
更多<i class="el-icon-arrow-down"></i>
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item :command="{ id: scope.row.activityId, name:'a'}">
<el-popover popper-class="c-pv40"
class="check" @show="getShareQrcode(scope.row.activityId)" @hide="clearShareUrl"
placement="left"
width="260"
trigger="hover">
<div v-loading="qrcodeLoading">
<div class="c-textAlign-c"><img :src="qrcodeImg" width="150" height="150"/></div>
<p class="c-textAlign-c margin-b10 c-fs-12 c-fc-333">扫一扫二维码预览</p>
<div class="c-width100 c-flex-row c-flex-center">
<el-input disabled class="width200" v-model="url"></el-input>
<el-button class="btn-copy margin-0auto" type="primary" @click="copyUrl(scope.row.activityId, $event)">复制</el-button>
</div>
</div>
<div slot="reference" style="width: 100%">分享</div>
</el-popover>
</el-dropdown-item>
<!-- <el-dropdown-item :command="{ id: scope.row.activityId, name:'b'}">签到二维码</el-dropdown-item> -->
<el-dropdown-item v-if="scope.row.enrollStatus =='已发布' && showWechtPush && permission==3" :command="{ id: scope.row.activityId, name:'c'}">微信推送</el-dropdown-item>
<el-dropdown-item :command="{ id: scope.row.activityId, name:'g'}" v-if="permission==3">
<div @click="linkToInvitationList(scope.row.activityId)">邀请榜</div>
</el-dropdown-item>
<el-dropdown-item v-if="scope.row.enrollStatus =='已发布' && permission==3" :command="{ id: scope.row.activityId, name:'f'}">消息推送</el-dropdown-item>
<el-dropdown-item v-if="scope.row.enrollStatus !='已结束' && permission==3" :command="{ id: scope.row.activityId, name:'d'}">结束活动</el-dropdown-item>
<el-dropdown-item :command="{ id: scope.row.activityId, name:'e'}" v-if="permission==3">删除</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
</template>
</el-table-column>
</el-table>
<send-message v-if="dialogFormVisible"
:showSendMessage="dialogFormVisible"
:pushId="form.pushId"
from="activity"
@closeSendMessage="dialogFormVisible = false">
</send-message>
<open-invitation prodType="activities" :prodId="prodId" :isShow.sync="windowBox"></open-invitation>
</div>
</template>
<script>
import { addOrEditActivities } from '@/api/activities'
import { getQRCodeImage } from '@/api/common'
import { enableWxNotice } from '@/utils/permission'
import { creatMessage } from '@/api/message'
import clip from '@/utils/clipboard'
import openInvitation from '@/components/openInvitation/index.vue'
import { encodeUrl } from '@/utils/index'
import sendMessage from '@/views/templatePage/sendMessage/index.vue'
import tipsHeader from '@/utils/tipsHeader'
import changeSort from '@/components/changeSort/index'
export default {
name: 'activitiesListTable',
mixins: [tipsHeader],
inject: ['tableHeadStyle', 'tableCss'],
props: ['permission', 'detailUrl', 'activitiesListData', 'activityInfo', 'isShowWechatPush'],
components: { openInvitation, sendMessage, changeSort },
data() {
return {
btnLoading: false,
pickerOptions: {
disabledDate(time) {
return time.getTime() < Date.now() - 24 * 60 * 60 * 1000
}
},
tipsHeader: {
sort: {
key: '排序',
value: '手机端列表排序按照倒序排列，序号大的，产品排在前面',
type: 1
}
},
form: {
pushTime: '',
title: '',
content: '',
sendToAll: 1,
msgType: 1,
linkTitle: '',
linkUrl: '',
pusher: null,
receiver: null,
pushId: null, // 课程或活动id
pushType: null, // 1.课程，2.活动
pushStatus: 1, // 已发送
status: 0 // 未读
},
formRules: {
content: [{ required: true, message: '推送内容不能为空', trigger: 'blur' }],
pushTime: [{ required: true, message: '推送时间不能为空', trigger: 'blur' }],
title: [{ required: true, message: '推送标题不能为空', trigger: 'blur' }]
},
dialogFormVisible: false,
formLoading: false,
inputParam: {
id: -1,
activityId: -1,
userId: -1,
actTicketId: -1,
orderId: -1,
name: '',
opType: 3,
mobile: '',
fieldVal1: '',
fieldVal2: '',
fieldVal3: '',
fieldVal4: '',
fieldVal5: '',
enrollTime: '',
signUpTime: '',
issuccess: -1
},
showWechtPush: enableWxNotice(),
signList: [],
listLoading: false,
tsData: [],
qrcodeImg: null,
url: null,
prodId: null,
windowBox: false,
qrcodeLoading: false
}
},
directives: {
focus(el, { value }, { context }) {
if (value) {
context.$nextTick(() => {
el.focus()
})
}
}
},
methods: {
editSort(index) {
this.activitiesListData[index].isEdit = true
this.$set(this.activitiesListData, index, this.activitiesListData[index])
},
saveSort(data) {
const { row: { activityId }, value: sort } = data
if (sort >= 0) {
this.activityInfo.activityId = activityId
this.activityInfo.opType = 7
this.activityInfo.sort = sort
addOrEditActivities(this.activityInfo).then(res => {
this.$message({
type: 'info',
message: '保存成功'
})
this.$emit('fresh')
}).catch(err => {
console.log(err)
})
} else {
this.$message({
type: 'error',
message: '排序值不能为负数'
})
return
}
// this.activitiesListData[index].isEdit = false
},
getShareQrcode(id) {
this.url = this.detailUrl + id
this.qrcodeLoading = true
getQRCodeImage({ url: this.detailUrl + id, type: 'activity' + id }).then(res => {
this.qrcodeLoading = false
this.qrcodeImg = res.data.data.img
}).catch(() => {
this.qrcodeLoading = false
})
},
clearShareUrl() {
this.url = ''
this.qrcodeImg = ''
},
copyUrl(id, event) {
// this.$emit(this.detailUrl + id, event)
clip(this.detailUrl + id, event)
},
signManage({ activityId, name }) {
const params_name = encodeUrl(name)
this.$router.push({
name: 'signManage',
params: {
activityId,
name: params_name
}
})
},
handleCommand(command) {
// this.$message('click on item ' + command)
if (command.name == 'b') {
this.linkToQrcode(command.id)
} else if (command.name == 'a') {
// this.$emit('linckDetail', command.id)
} else if (command.name == 'c') {
// this.pushToWechat()
for (var i = 0; i < this.activitiesListData.length; i++) {
if (this.activitiesListData[i].activityId == command.id) {
this.tsData = [this.activitiesListData[i]]
break
}
}
this.$emit('wechat', this.tsData)
} else if (command.name == 'd') {
this.stopActivity(command.id)
} else if (command.name == 'e') {
this.deleteActivity(command.id)
} else if (command.name == 'f') {
this.form.pushType = 2
this.form.pushId = command.id
this.clickMessage(command.id)
}
},
clickMessage(id) {
this.dialogFormVisible = true
},
sendMessage() {
this.$refs.form.validate(valid => {
if (valid) {
if (this.btnLoading) {
return
}
this.btnLoading = true
creatMessage(this.form).then(res => {
this.btnLoading = false
if (res.data.statusCode == 200) {
this.$message({
message: '消息发送成功',
type: 'success'
})
this.clearForm()
}
}).catch((err) => {
console.log(err)
this.btnLoading = false
})
} else {
console.log('error submit!!')
return false
}
})
},
dialogCancel() {
this.clearForm()
},
handleClose() {
this.$confirm('确认关闭？')
.then(_ => {
this.clearForm()
})
.catch(_ => {})
},
clearForm() {
this.dialogFormVisible = false
this.form.pushTime = ''
this.form.title = ''
this.form.content = ''
this.form.pushType = ''
this.form.pmId = ''
},
linkToEdit(id) {
this.$router.push({ path: `/activities/edit/${id}` })
},
linkToUserList({ activityId, name }) {
const params_name = encodeUrl(name)
this.$router.push({
name: 'userList',
params: {
activityId,
name: params_name
}
})
},
linkToTicket() {
this.$router.push({ path: `/activities/ticketManage` })
},
linkToQrcode(id) {
this.$router.push({ path: `/activities/qrcode/${id}` })
},
deleteActivity(id) {
// 删除活动
this.$confirm('此操作将永久删除该活动, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.activityInfo.activityId = id
this.activityInfo.opType = 3
this.formLoading = true
addOrEditActivities(this.activityInfo).then(res => {
this.formLoading = false
if (res.data.data.retError == 0) {
this.$message({
type: 'success',
message: '删除成功!'
})
this.$emit('fresh')
}
}).catch(_ => {
this.formLoading = false
})
})
.catch(() => {
this.$message({
type: 'info',
message: '已取消删除'
})
})
},
cancelPublish(id) {
// 取消发布活动
this.$confirm('取消该已发布活动?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
})
.then(() => {
this.activityInfo.activityId = id
this.activityInfo.opType = 4
this.formLoading = true
addOrEditActivities(this.activityInfo).then(res => {
this.formLoading = false
if (res.data.data.retError == 0) {
this.$message({
type: 'success',
message: '取消发布!'
})
this.$emit('fresh')
}
}).catch(_ => {
this.formLoading = false
})
})
.catch(() => {
this.$message({
type: 'info',
message: '用户关闭弹框'
})
})
},
stopActivity(id) {
// 结束活动
this.$confirm('活动的结束时间将变成此刻，学员不能再报名和参加活动，是否确定结束活动？', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.activityInfo.activityId = id
this.activityInfo.opType = 5
this.formLoading = true
addOrEditActivities(this.activityInfo).then(res => {
this.formLoading = false
if (res.data.data.retError == 0) {
this.$message({
type: 'success',
message: '该活动已结束!'
})
this.$emit('fresh')
}
}).catch(_ => {
this.formLoading = false
})
}).catch(() => {
this.formLoading = false
this.$message({
type: 'info',
message: '用户关闭弹框'
})
})
},
pushToWechat() {
// 微信推送
this.$confirm('确定推送该活动?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
})
.then(() => {
this.$message({
type: 'success',
message: '推送成功!'
})
})
.catch(() => {
this.$message({
type: 'info',
message: '用户关闭弹框'
})
})
},
publishActivity(id, isTicket) {
// 发布活动
if (isTicket == 0) {
this.$message({
type: 'info',
message: '您还没设置票务，请先设置票务再发布'
})
return
}
this.$confirm('确定发布该活动?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
})
.then(() => {
this.activityInfo.activityId = id
this.activityInfo.opType = 6
this.formLoading = true
addOrEditActivities(this.activityInfo).then(res => {
this.formLoading = false
if (res.data.data.retError == 0) {
this.$message({
type: 'success',
message: '发布成功!'
})
this.$emit('fresh')
}
})
})
.catch(() => {
this.$message({
type: 'info',
message: '用户关闭弹框'
})
})
},
linkToInvitationList(id) {
// 点击邀请榜
this.$router.push({ name: 'invitationList', params: { id: id, from: 'activity' }})
},
openInvitation(id, isInvitationCard) {
const type = 'activities'
if (isInvitationCard == 1) {
this.$router.push({ name: 'spreadSetCommons', params: { prodType: type, prodId: id }})
} else {
this.windowBox = true
this.prodId = id
}
}
}
}
</script>
<style scoped>
.el-icon-arrow-down {
font-size: 12px;
}
.c-d-inlineb{
display: inline-block;
}
.c-ww50{
width: 50%;
}
.case {
line-height: 23px;
font-size: 10px;
}
.case>div {
padding-left: 20px;
color: #999;
}
.see:after{
content:"|";
color: #409EFF;
padding: 0 3px 0 3px;
}
</style>
</code></pre>