9 changed files with 241 additions and 132 deletions
@ -0,0 +1,70 @@ |
|||
;(function(window) { |
|||
var _instance = null; |
|||
window.TallPlugin = function(config) { |
|||
this.config = config; |
|||
this.props = null; |
|||
} |
|||
|
|||
// 初始化并保证是单例
|
|||
TallPlugin.init = function (config) { |
|||
if (!_instance) { |
|||
_instance = new TallPlugin(config); |
|||
} |
|||
return _instance; |
|||
} |
|||
|
|||
TallPlugin.prototype.created = function (callback) { |
|||
var _this = this; |
|||
window.postMessage('created'); |
|||
window.addEventListener('message', function ({ data, origin }) { |
|||
try { |
|||
var target = JSON.parse(data); |
|||
if (target.success) { |
|||
_this.props = JSON.parse(data); |
|||
callback && typeof callback === 'function' && callback.call(_this, _this.props); |
|||
} else { |
|||
_this.props = null; |
|||
} |
|||
} catch (e) { |
|||
_this.props = null; |
|||
} |
|||
}, false); |
|||
// DOM加载完成
|
|||
window.addEventListener('DOMContentLoaded', this.mounted, false); |
|||
// window onload
|
|||
window.addEventListener('load', this.loaded, false); |
|||
// destroy
|
|||
window.addEventListener('unload', this.destroy, false); |
|||
// error
|
|||
window.addEventListener('error', this.error, false); |
|||
return this; |
|||
} |
|||
|
|||
TallPlugin.prototype.mounted = function(callback) { |
|||
console.log('mounted'); |
|||
window.postMessage('mounted'); |
|||
callback && typeof callback === 'function' && callback.call(this); |
|||
return this; |
|||
} |
|||
|
|||
TallPlugin.prototype.loaded = function(callback) { |
|||
console.log('loaded'); |
|||
window.postMessage('loaded'); |
|||
callback && typeof callback === 'function' && callback.call(this); |
|||
return this; |
|||
} |
|||
|
|||
TallPlugin.prototype.destroy = function(callback) { |
|||
console.log('destroy'); |
|||
window.postMessage('destroy'); |
|||
callback && typeof callback === 'function' && callback.call(this); |
|||
return this; |
|||
} |
|||
|
|||
TallPlugin.prototype.error = function(callback) { |
|||
console.log('error'); |
|||
window.postMessage('error'); |
|||
callback && typeof callback === 'function' && callback.call(this); |
|||
return this; |
|||
} |
|||
})(window) |
|||
@ -0,0 +1,80 @@ |
|||
<template> |
|||
<div> |
|||
<a-button class="mr-3" type="primary">预览</a-button> |
|||
<a-modal footer title="会议记录预览" v-model="visible" width="1000px"> |
|||
<div class="fill-width"> |
|||
<!-- <a-card :bordered="false" title="会议记录预览"> --> |
|||
<a-card :bordered="false"> |
|||
<!-- <div slot="extra"> |
|||
<a-button @click="$emit('closeModal')" type="primary">返回</a-button> |
|||
</div>--> |
|||
<a-list bordered class="metting"> |
|||
<a-list-item> |
|||
<span class="font-bold mb-2">会议时间：</span> |
|||
{{ previewInfo.startTime || '' }} 至 {{ previewInfo.endTime }} |
|||
</a-list-item> |
|||
<a-list-item> |
|||
<span class="font-bold mb-2">会议地点：</span> |
|||
{{ previewInfo.place }} |
|||
</a-list-item> |
|||
<a-list-item> |
|||
<span class="font-bold mb-2">主持人：</span> |
|||
{{ previewInfo.host }} |
|||
</a-list-item> |
|||
<a-list-item class="d-flex flex-column align-left"> |
|||
<span class="font-bold mb-2">参会人员：</span> |
|||
<div class="fill-width"> |
|||
<span v-dompurify-html="previewInfo.participants"></span> |
|||
</div> |
|||
</a-list-item> |
|||
<a-list-item class="d-flex flex-column align-left"> |
|||
<span class="font-bold mb-2">研讨内容：</span> |
|||
<div class="fill-width"> |
|||
<span v-dompurify-html="previewInfo.discussionContent"></span> |
|||
</div> |
|||
</a-list-item> |
|||
<a-list-item class="d-flex flex-column align-left"> |
|||
<span class="font-bold mb-2">会议纪要：</span> |
|||
<div class="fill-width"> |
|||
<span v-dompurify-html="previewInfo.meetingMinutes"></span> |
|||
</div> |
|||
</a-list-item> |
|||
</a-list> |
|||
</a-card> |
|||
</div> |
|||
</a-modal> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import { mapState } from 'vuex'; |
|||
export default { |
|||
name: 'MeetingPreview', |
|||
data() { |
|||
return { visible: false }; |
|||
}, |
|||
|
|||
computed: mapState('home', ['previewInfo']), |
|||
|
|||
methods: { |
|||
openModal() { |
|||
this.visible = true; |
|||
}, |
|||
|
|||
onCancel() { |
|||
this.visible = false; |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="stylus" scoped> |
|||
.metting { |
|||
width: 100%; |
|||
} |
|||
|
|||
.metting >>> .ant-list-item { |
|||
padding-left: 16px; |
|||
padding-right: 16px; |
|||
} |
|||
</style> |
|||
@ -1,78 +0,0 @@ |
|||
<template> |
|||
<div> |
|||
<div class="fill-width"> |
|||
<a-card :bordered="false" title="会议记录预览"> |
|||
<div slot="extra"> |
|||
<a-button @click="$router.push('/meeting')" type="primary">返回</a-button> |
|||
</div> |
|||
<a-list bordered class="metting"> |
|||
<a-list-item> |
|||
<span class="font-bold mb-2">会议时间：</span> |
|||
{{ startTime }}至{{ endTime }} |
|||
</a-list-item> |
|||
<a-list-item> |
|||
<span class="font-bold mb-2">会议地点：</span> |
|||
{{ place }} |
|||
</a-list-item> |
|||
<a-list-item> |
|||
<span class="font-bold mb-2">主持人：</span> |
|||
{{ host }} |
|||
</a-list-item> |
|||
<a-list-item class="d-flex flex-column align-left"> |
|||
<span class="font-bold mb-2">参会人员：</span> |
|||
<div class="fill-width"> |
|||
<span v-dompurify-html="participants"></span> |
|||
</div> |
|||
</a-list-item> |
|||
<a-list-item class="d-flex flex-column align-left"> |
|||
<span class="font-bold mb-2">研讨内容：</span> |
|||
<div class="fill-width"> |
|||
<span v-dompurify-html="content"></span> |
|||
</div> |
|||
</a-list-item> |
|||
<a-list-item class="d-flex flex-column align-left"> |
|||
<span class="font-bold mb-2">会议纪要：</span> |
|||
<div class="fill-width"> |
|||
<span v-dompurify-html="meetingMinutes"></span> |
|||
</div> |
|||
</a-list-item> |
|||
</a-list> |
|||
</a-card> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: 'MeetingPreview', |
|||
data() { |
|||
return { |
|||
startTime: '2021-01-29 08:00', |
|||
endTime: '2021-01-29 10:00', |
|||
place: 'ccsens', // 会议地点 |
|||
host: '武慧娟', // 主持人 |
|||
participants: `<div>张野，后台工程师</div> |
|||
<div>王臣伟，后台工程师</div> |
|||
<div>宋瑞芳，前端工程师</div> |
|||
<div>张斌，前端工程师</div>`, // 参会人员 |
|||
content: '中医药课题数据库系统的开发', // 研讨内容 |
|||
meetingMinutes: '中医药课题数据库系统的开发分工及进度', // 会议纪要 |
|||
}; |
|||
}, |
|||
|
|||
methods: {}, |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="stylus" scoped> |
|||
.metting { |
|||
width: 80%; |
|||
margin: 30px 10%; |
|||
// font-size: 16px; |
|||
} |
|||
|
|||
.metting >>> .ant-list-item { |
|||
padding-left: 16px; |
|||
padding-right: 16px; |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue