|
|
@@ -1,399 +1,13 @@
|
|
|
-<!-- 全部界面 -->
|
|
|
<template>
|
|
|
- <el-card class="box-card">
|
|
|
- <!-- 如果没有邮箱 -->
|
|
|
- <div class="page-none" v-if="!pageShow">
|
|
|
- <img src="/img/empty.png" alt="" />
|
|
|
- <div class="text">暂时没有绑定的邮箱！</div>
|
|
|
- </div>
|
|
|
- <div style="width: 100%; display: flex" v-if="pageShow">
|
|
|
- <div style="width: 16%">
|
|
|
- <MailLeft
|
|
|
- ref="left"
|
|
|
- @writeFromLeft="writeToMain"
|
|
|
- @customerLeft="customerLeft"
|
|
|
- @openMenu="menuToTabs"
|
|
|
- @giveMailNameByLeft="giveMailNameByLeft"
|
|
|
- @leftToRefreshTags="leftToRefreshTags"
|
|
|
- ></MailLeft>
|
|
|
- </div>
|
|
|
- <div style="width: 84%">
|
|
|
- <MailMain
|
|
|
- ref="main"
|
|
|
- :giveMailNameByLeft="mailboxName"
|
|
|
- :mainToRefreshTags="leftToRefreshListData"
|
|
|
- :switchDefaultMailbox="switchDefaultMailbox"
|
|
|
- @handleClose="handleClose"
|
|
|
- @tabToLeft="handleTabToLeft"
|
|
|
- ></MailMain>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <!-- 右边弹窗 -->
|
|
|
- <div :class="mailCon" v-if="pageShow && JudgeAuthority()">
|
|
|
- <div :class="iconCon">
|
|
|
- <i :class="iconClose" @click="handleClose(iconClose)"></i>
|
|
|
- </div>
|
|
|
- <MailRight v-show="rightStatus" />
|
|
|
- </div>
|
|
|
- </el-card>
|
|
|
+ <div class="con">此页面已废弃 , 请重新配置！</div>
|
|
|
</template>
|
|
|
|
|
|
-<script>
|
|
|
-import MailLeft from '@/components/Tenant/mailLeft'
|
|
|
-import MailRight from '@/components/Tenant/mailRight'
|
|
|
-import MailMain from '@/components/Tenant/mailMain'
|
|
|
-import { mapGetters } from 'vuex'
|
|
|
-
|
|
|
-export default {
|
|
|
- name: 'mailbox',
|
|
|
- components: { MailLeft, MailRight, MailMain },
|
|
|
- mounted() {},
|
|
|
- data() {
|
|
|
- return {
|
|
|
- drawer: true,
|
|
|
- mailCon: 'mail-right-con',
|
|
|
- iconClose: 'el-icon-right',
|
|
|
- iconCon: 'icon-con',
|
|
|
- rightStatus: true,
|
|
|
- // 左边导航传值
|
|
|
- infoToTabs: {},
|
|
|
- pageShow: true,
|
|
|
- mailboxName: '',
|
|
|
- leftToRefreshListData: '',
|
|
|
- rightData: [
|
|
|
- '/components/Tenant/mailRight/ContractMaking',
|
|
|
- '/components/Tenant/mailRight/NetDiskData',
|
|
|
- '/components/Tenant/mailRight/Document',
|
|
|
- '/components/Tenant/mailRight/Purchase',
|
|
|
- ],
|
|
|
- switchDefaultMailbox: '',
|
|
|
- }
|
|
|
- },
|
|
|
- created() {},
|
|
|
- computed: {
|
|
|
- ...mapGetters(['userInfo', 'menuAll']),
|
|
|
- },
|
|
|
- beforeRouteLeave(to, from, next) {
|
|
|
- if (!this.pageShow) {
|
|
|
- next()
|
|
|
- }
|
|
|
- if (from.path === '/tenant/bussiness/mailbox/index') {
|
|
|
- if (['reply', 'forwarding', 'editorSent', 'write'].includes(this.$refs.main.emailType)) {
|
|
|
- if (this.$refs.main.$refs[this.$refs.main.emailType] && this.$refs.main.$refs[this.$refs.main.emailType].length > 0) {
|
|
|
- for (let i = 0; i < this.$refs.main.$refs[this.$refs.main.emailType].length; i++) {
|
|
|
- this.$refs.main.$refs[this.$refs.main.emailType][i].sentForm.bodyText = document
|
|
|
- .getElementById('Editor_' + this.$refs.main.$refs[this.$refs.main.emailType][i].random + '_ifr')
|
|
|
- .contentWindow.document.getElementById('tinymce').innerHTML
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- this.$nextTick(() => {
|
|
|
- next()
|
|
|
- })
|
|
|
- } else {
|
|
|
- next()
|
|
|
- }
|
|
|
- },
|
|
|
- methods: {
|
|
|
- // 左侧要求刷新标签猎豹
|
|
|
- leftToRefreshTags(val) {
|
|
|
- this.leftToRefreshListData = val
|
|
|
- },
|
|
|
- giveMailNameByLeft(val) {
|
|
|
- if (val && val.mailboxName) {
|
|
|
- this.pageShow = true
|
|
|
- this.mailboxName = val.mailboxName
|
|
|
- let $chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678'
|
|
|
- let maxPos = $chars.length
|
|
|
- let random = ''
|
|
|
- for (let i = 0; i < 32; i++) {
|
|
|
- random += $chars.charAt(Math.floor(Math.random() * maxPos))
|
|
|
- }
|
|
|
- this.switchDefaultMailbox = random
|
|
|
- } else {
|
|
|
- this.pageShow = false
|
|
|
- this.mailboxName = ''
|
|
|
- }
|
|
|
- },
|
|
|
- // 左边点击按钮进入写信页面
|
|
|
- writeToMain() {
|
|
|
- this.$refs.main.handleWrite()
|
|
|
- },
|
|
|
- customerLeft(val) {
|
|
|
- this.$refs.main.handleCustomer(val)
|
|
|
- },
|
|
|
- // 左边导航至选项卡问题
|
|
|
- menuToTabs(val) {
|
|
|
- this.$refs.main.tabsFromLeftMenu(val)
|
|
|
- },
|
|
|
- // 点击选项卡时左边相应
|
|
|
- handleTabToLeft(item) {
|
|
|
- switch (item.type) {
|
|
|
- case 'inbox': {
|
|
|
- this.$refs.left.handleOpenMenu({ type: 0 })
|
|
|
- break
|
|
|
- }
|
|
|
- case 'unread': {
|
|
|
- this.$refs.left.handleOpenMenu({ type: 1 })
|
|
|
- break
|
|
|
- }
|
|
|
- case 'draft': {
|
|
|
- this.$refs.left.handleOpenMenu({ type: 2 })
|
|
|
- break
|
|
|
- }
|
|
|
- case 'sent': {
|
|
|
- this.$refs.left.handleOpenMenu({ type: 3 })
|
|
|
- break
|
|
|
- }
|
|
|
- case 'remove': {
|
|
|
- this.$refs.left.handleOpenMenu({ type: 4 })
|
|
|
- break
|
|
|
- }
|
|
|
- case 'rubbish': {
|
|
|
- this.$refs.left.handleOpenMenu({ type: 5 })
|
|
|
- break
|
|
|
- }
|
|
|
- case 'write': {
|
|
|
- this.$refs.left.handleOpenMenu({ type: 999 })
|
|
|
- break
|
|
|
- }
|
|
|
- case 'tags': {
|
|
|
- if (item.value) {
|
|
|
- this.$refs.left.handleOpenMenu({ type: 6, value: item.value })
|
|
|
- }
|
|
|
- break
|
|
|
- }
|
|
|
- case 'folder': {
|
|
|
- if (item.value) {
|
|
|
- this.$refs.left.handleOpenMenu({ type: 7, value: item.value })
|
|
|
- }
|
|
|
- break
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- handleClose(icon) {
|
|
|
- let iconConArr = ''
|
|
|
- let iconArr = ''
|
|
|
- let conArr = ''
|
|
|
- if (icon.split(' ').indexOf('icon-closed') !== -1) {
|
|
|
- iconConArr = 'icon-con'
|
|
|
- iconArr = 'el-icon-right'
|
|
|
- conArr = 'mail-right-con'
|
|
|
- this.rightStatus = true
|
|
|
- } else {
|
|
|
- iconConArr = 'icon-con icon-con-closed'
|
|
|
- iconArr = 'el-icon-right icon-closed'
|
|
|
- conArr = 'mail-right-con move-to-close'
|
|
|
- this.rightStatus = false
|
|
|
- }
|
|
|
- this.mailCon = conArr
|
|
|
- this.iconClose = iconArr
|
|
|
- this.iconCon = iconConArr
|
|
|
- },
|
|
|
- JudgeAuthority() {
|
|
|
- let menuData = this.menuAll.filter((item) => this.rightData.indexOf(item.path) !== -1)
|
|
|
- if (menuData && menuData.length > 0) {
|
|
|
- return true
|
|
|
- } else {
|
|
|
- return false
|
|
|
- }
|
|
|
- },
|
|
|
- },
|
|
|
-}
|
|
|
-</script>
|
|
|
-
|
|
|
-<style lang="scss" scoped>
|
|
|
-* {
|
|
|
- font-size: 12px;
|
|
|
-}
|
|
|
-.group-title {
|
|
|
- font-size: 14px;
|
|
|
- font-weight: 700;
|
|
|
-}
|
|
|
-.box-card {
|
|
|
- height: calc(100vh - 50px - 50px - 10px);
|
|
|
-}
|
|
|
-::v-deep {
|
|
|
- .el-input__inner {
|
|
|
- border-radius: 1px;
|
|
|
- }
|
|
|
- .el-button--mini {
|
|
|
- border-radius: 1px;
|
|
|
- }
|
|
|
- .tableHeader th {
|
|
|
- background-color: #edf0f5;
|
|
|
- height: 35px;
|
|
|
- padding: 0;
|
|
|
- }
|
|
|
- img {
|
|
|
- vertical-align: baseline !important;
|
|
|
- }
|
|
|
- .el-table__cell {
|
|
|
- height: 50px;
|
|
|
- }
|
|
|
- .el-table .cell {
|
|
|
- line-height: 24px !important;
|
|
|
- }
|
|
|
-}
|
|
|
-.huge-title {
|
|
|
- font-size: 16px;
|
|
|
- font-weight: 700;
|
|
|
- margin: 0 10px;
|
|
|
-}
|
|
|
-.font-red {
|
|
|
- color: #940819;
|
|
|
-}
|
|
|
-.add-container {
|
|
|
- width: 85%;
|
|
|
- margin: 0 auto;
|
|
|
- .msg-content {
|
|
|
- /* width: 99%; */
|
|
|
- background: #e9f5fb;
|
|
|
- border: 1px solid #bde2f4;
|
|
|
- height: 60px;
|
|
|
- line-height: 60px;
|
|
|
- padding-left: 10px;
|
|
|
- left: 50%;
|
|
|
- span {
|
|
|
- margin-left: 5px;
|
|
|
- }
|
|
|
- }
|
|
|
- .title-sign {
|
|
|
- width: 90px;
|
|
|
- height: 30px;
|
|
|
- border-bottom: 1px solid #940819;
|
|
|
- color: #940819;
|
|
|
- line-height: 30px;
|
|
|
- margin-top: 10px;
|
|
|
- margin-bottom: 20px;
|
|
|
- }
|
|
|
-}
|
|
|
-/deep/.hiddenSel {
|
|
|
- display: none;
|
|
|
-}
|
|
|
-.role-tree {
|
|
|
- width: 412px;
|
|
|
- height: 25px;
|
|
|
- border: 1px solid rgb(215, 215, 215);
|
|
|
- color: #c2c3c5;
|
|
|
- line-height: 25px;
|
|
|
- margin-top: 5px;
|
|
|
- border-radius: 1px;
|
|
|
- span {
|
|
|
- margin-left: 20px;
|
|
|
- }
|
|
|
-}
|
|
|
-/deep/.el-tag.el-tag--info {
|
|
|
- height: 20px;
|
|
|
- line-height: 20px;
|
|
|
- margin-left: 10px;
|
|
|
-}
|
|
|
-/deep/.el-input__inner {
|
|
|
- height: 25px !important;
|
|
|
- line-height: 25px !important;
|
|
|
-}
|
|
|
-/deep/.el-input__icon {
|
|
|
- line-height: 25px !important;
|
|
|
-}
|
|
|
-/deep/ .el-drawer__header {
|
|
|
- display: inline;
|
|
|
- margin-bottom: 10px !important;
|
|
|
-}
|
|
|
-.mail-right-con {
|
|
|
- // border-radius: 5px;
|
|
|
- border-top-left-radius: 5px;
|
|
|
- border-bottom-left-radius: 5px;
|
|
|
- z-index: 9999;
|
|
|
- position: fixed;
|
|
|
- margin-top: 100px;
|
|
|
- top: 0;
|
|
|
- width: 400px;
|
|
|
- transition: all cubic-bezier(0.05, 0.91, 0.22, 1.03) 0.5s;
|
|
|
- padding: 0px 10px;
|
|
|
- height: calc(100vh - 50px - 50px - 10px);
|
|
|
- background: white;
|
|
|
- left: 100%;
|
|
|
- margin-left: -428px;
|
|
|
- box-shadow: var(--devui-shadow-fullscreen-overlay, 0 10px 20px 0) var(--devui-shadow, rgba(0, 0, 0, 0.08));
|
|
|
- i {
|
|
|
- cursor: pointer;
|
|
|
- transition: all cubic-bezier(0, 0.88, 0, 1.29) 1s;
|
|
|
- font-size: 15px;
|
|
|
- position: relative;
|
|
|
- &:hover {
|
|
|
- color: #169bd5;
|
|
|
- transform: rotate(360deg);
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-.move-to-close {
|
|
|
- transform: translateX(400px);
|
|
|
- .mail-right {
|
|
|
- transition: all linear 0.3s;
|
|
|
- padding-left: 20px;
|
|
|
- }
|
|
|
-}
|
|
|
-.icon-closed {
|
|
|
- transform: rotate(-180deg);
|
|
|
- &:hover {
|
|
|
- transform: rotate(180deg) !important;
|
|
|
- }
|
|
|
-}
|
|
|
-.icon-con {
|
|
|
- width: 30px;
|
|
|
- height: 30px;
|
|
|
+<style scope>
|
|
|
+.con {
|
|
|
+ width: 100%;
|
|
|
+ height: 200px;
|
|
|
text-align: center;
|
|
|
- line-height: 30px;
|
|
|
- left: 100%;
|
|
|
- // top: 13px;
|
|
|
- margin-left: -17px;
|
|
|
- position: relative;
|
|
|
-}
|
|
|
-.icon-con-closed {
|
|
|
- left: 0;
|
|
|
- margin-left: -10px;
|
|
|
-}
|
|
|
-
|
|
|
-/deep/.el-card__body {
|
|
|
- padding: 0 !important;
|
|
|
-}
|
|
|
-.page-none {
|
|
|
- height: calc(100vh - 100px);
|
|
|
- width: calc(100vw - 100px);
|
|
|
- // background: green;
|
|
|
- user-select: none;
|
|
|
- img {
|
|
|
- position: absolute;
|
|
|
- width: 80px;
|
|
|
- height: 80px;
|
|
|
- top: 50%;
|
|
|
- margin-top: -80px;
|
|
|
- left: 50%;
|
|
|
- margin-left: -40px;
|
|
|
- }
|
|
|
- .text {
|
|
|
- font-size: 25px;
|
|
|
- color: #d7d7d7;
|
|
|
- text-align: center;
|
|
|
- height: 100px;
|
|
|
- top: 54%;
|
|
|
- line-height: 100px;
|
|
|
- position: absolute;
|
|
|
- margin-top: -50px;
|
|
|
- width: 300px;
|
|
|
- left: 50%;
|
|
|
- font-family: sans-serif;
|
|
|
- margin-left: -150px;
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-/deep/.el-tabs__nav-wrap {
|
|
|
- height: 31px;
|
|
|
-}
|
|
|
-/deep/.el-tabs__item {
|
|
|
- height: 30px !important;
|
|
|
- line-height: 30px;
|
|
|
- font-size: 12px;
|
|
|
+ line-height: 200px;
|
|
|
+ font-size: 20px;
|
|
|
}
|
|
|
-</style>
|
|
|
+</style>
|
cz