|
|
@@ -28,7 +28,7 @@ export default Vue.extend({
|
|
|
show: false,
|
|
|
page: 0,
|
|
|
last_page: 1,
|
|
|
- is_sending: false,
|
|
|
+ is_sending: false
|
|
|
},
|
|
|
loading: false,
|
|
|
searchTimer: null,
|
|
|
@@ -48,8 +48,8 @@ export default Vue.extend({
|
|
|
this.getInvitationList()
|
|
|
},
|
|
|
methods: {
|
|
|
- getLabelName(key){
|
|
|
- let name = {
|
|
|
+ getLabelName(key) {
|
|
|
+ const name = {
|
|
|
address: '地址',
|
|
|
city: '城市',
|
|
|
company: '公司名称',
|
|
|
@@ -83,9 +83,9 @@ export default Vue.extend({
|
|
|
update_time: '更新时间',
|
|
|
user_id: '用户ID'
|
|
|
}
|
|
|
- if(name[key]){
|
|
|
+ if (name[key]) {
|
|
|
return name[key]
|
|
|
- }else {
|
|
|
+ } else {
|
|
|
return key
|
|
|
}
|
|
|
},
|
|
|
@@ -183,6 +183,13 @@ export default Vue.extend({
|
|
|
}).catch(err => {
|
|
|
|
|
|
})
|
|
|
+ },
|
|
|
+ copy(text) {
|
|
|
+ navigator.clipboard.writeText(text).then(() => {
|
|
|
+ this.$message.success('复制成功')
|
|
|
+ }).catch(() => {
|
|
|
+ this.$message.error('复制失败')
|
|
|
+ })
|
|
|
}
|
|
|
}
|
|
|
})
|
|
|
@@ -207,7 +214,7 @@ export default Vue.extend({
|
|
|
<el-table-column type="expand">
|
|
|
<template slot-scope="props">
|
|
|
<el-form class="expand-form" :inline="true" label-position="left">
|
|
|
- <el-form-item v-for="(item,key) in props.row" :label="getLabelName(key)+':'" :key="key">
|
|
|
+ <el-form-item v-for="(item,key) in props.row" :key="key" :label="getLabelName(key)+':'">
|
|
|
<span>{{ item }}</span>
|
|
|
</el-form-item>
|
|
|
</el-form>
|
|
|
@@ -268,15 +275,18 @@ export default Vue.extend({
|
|
|
/>
|
|
|
</div>
|
|
|
<el-dialog
|
|
|
- top="10vh"
|
|
|
+ top="5vh"
|
|
|
custom-class="invitation-dialog"
|
|
|
:append-to-body="true"
|
|
|
title="发送邀请函"
|
|
|
:visible.sync="invitation_data.show"
|
|
|
- width="60%"
|
|
|
+ width="90%"
|
|
|
@close="closeDialog()"
|
|
|
>
|
|
|
<div class="dialog-body">
|
|
|
+ <div class="title">模板列表</div>
|
|
|
+ <div class="title">邮件编辑器</div>
|
|
|
+ <div class="title">观众信息</div>
|
|
|
<div class="temp-list">
|
|
|
<div
|
|
|
v-for="(temp,index) in invitation_data.data"
|
|
|
@@ -291,12 +301,23 @@ export default Vue.extend({
|
|
|
<div class="view">
|
|
|
<div id="editor" />
|
|
|
</div>
|
|
|
+ <div class="var-list-cont">
|
|
|
+ <div class="var-list">
|
|
|
+ <div class="var-item" v-for="(item,key) in invitation_data.userSetting">
|
|
|
+ <div class="title">{{getLabelName(key)}}</div>
|
|
|
+ <div>{{item || '暂无数据'}}</div>
|
|
|
+ <el-button-group class="button-list">
|
|
|
+ <el-button @click="copy(item)" type="primary" size="mini" icon="el-icon-document-copy">复制</el-button>
|
|
|
+ </el-button-group>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
<span slot="footer" class="dialog-footer">
|
|
|
<el-button @click="closeDialog()">取 消</el-button>
|
|
|
<el-button :disabled="invitation_data.is_sending" type="primary" @click="sendInvitation()">
|
|
|
发 送
|
|
|
- <span v-if="invitation_data.is_sending" class="el-icon-loading"></span>
|
|
|
+ <span v-if="invitation_data.is_sending" class="el-icon-loading" />
|
|
|
</el-button>
|
|
|
</span>
|
|
|
</el-dialog>
|
|
|
@@ -356,15 +377,56 @@ export default Vue.extend({
|
|
|
<style lang="scss">
|
|
|
.invitation-dialog{
|
|
|
.dialog-body{
|
|
|
- height: 60vh;
|
|
|
+ height: 68vh;
|
|
|
display: grid;
|
|
|
- grid-template-columns: 240px 1fr;
|
|
|
- grid-gap: 12px;
|
|
|
+ grid-template-columns: 240px 1fr 360px;
|
|
|
+ grid-gap: 4px 12px;
|
|
|
.view{
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
}
|
|
|
+ .var-list-cont{
|
|
|
+ border: 2px solid #eee;
|
|
|
+ border-radius: 10px;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ position: relative;
|
|
|
+ .var-list{
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ overflow: hidden;
|
|
|
+ overflow-y: auto;
|
|
|
+ .var-item{
|
|
|
+ position: relative;
|
|
|
+ padding: 2px 6px;
|
|
|
+ border-radius: 6px;
|
|
|
+ border: 2px solid #409EFF00;
|
|
|
+ border-bottom: 2px solid #00000008;
|
|
|
+ .button-list{
|
|
|
+ opacity: 0;
|
|
|
+ position: absolute;
|
|
|
+ right: 3px;
|
|
|
+ top: 3px;
|
|
|
+ }
|
|
|
+ .title{
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 12px;
|
|
|
+ }
|
|
|
+ &:hover{
|
|
|
+ border: 2px solid #409EFF;
|
|
|
+ .button-list{
|
|
|
+ opacity: 1;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
.temp-list{
|
|
|
+ border: 2px solid #eee;
|
|
|
+ border-radius: 10px;
|
|
|
padding: 6px;
|
|
|
overflow: hidden;
|
|
|
overflow-y: auto;
|