zhengbasai/library/components/VabNotice/index.vue

<script>
  import { handleTree } from '@/utils/publicMethods' //将列表转坏为树形
  import { nextTick } from 'vue'
  import { doDelete, getList } from './api/index'
  import { Plus, Sort, Search, Refresh } from '@element-plus/icons-vue'

  export default defineComponent({
    name: 'MenuManagement',
    components: {
      Edit: defineAsyncComponent(() => import('./components/NoticeEdit.vue')),
    },
    setup() {
      const $baseConfirm = inject('$baseConfirm')
      const $baseMessage = inject('$baseMessage')

      const state = reactive({
        editRef: null,
        dataTreeList: null,
        refreshTable: true,
        expand: false, //列表展开收起
        data: [],
        defaultProps: {
          children: 'children',
          label: 'label',
        },
        list: [],
        listLoading: true,
        queryForm: {
          sortedBy: 'desc',
          orderBy: 'sort',
        },
      })

      //点击查看站内信
      const lookNotice = () => {
        state['editRef'].showEdit()
      }

      return {
        ...toRefs(state),
        lookNotice,
        Plus,
        Sort,
        Search,
        Refresh,
      }
    },
  })
</script>

<template>
  <!-- v-if="theme.showNotice" -->
  <el-badge type="danger" :value="badge">
    <div @click="lookNotice"><vab-icon icon="mail-unread-line" /></div>

    <edit ref="editRef" @fetch-data="fetchData" />
  </el-badge>
</template>

<style lang="scss" scoped>
  :deep() {
    .el-drawer__body {
      padding: 0px;
    }
  }

  .notice-list {
    height: 29vh;

    ul {
      padding: 0 15px 0 0;
      margin: 0;

      li {
        display: flex;
        align-items: center;
        padding: 10px 0 10px 0;

        :deep() {
          .el-avatar {
            flex-shrink: 0;
            width: 50px;
            height: 50px;
            border-radius: 50%;
          }
        }

        span {
          margin-left: 10px;
        }
      }
    }
  }

  .notice-clear {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 0 0 0;
    font-size: 14px;
    text-align: center;
    cursor: pointer;
    border-top: 1px solid #e8eaec;

    i {
      margin-right: 3px;
    }
  }
</style>