dvcp_v2_webapp/project/qianxinan/AppMassNotification/components/List.vue

<template>
  <ai-list class="List">
    <template #title>
      <ai-title title="群发通知" isShowBottomBorder></ai-title>
    </template>
    <template #content>
      <ai-search-bar>
        <template #left>
          <el-button type="primary" icon="iconfont iconAdd" @click="toAdd('')">添加</el-button>
        </template>
      </ai-search-bar>
      <ai-table :tableData="tableData" :total="page.total" :current.sync="page.current" :size.sync="page.size"
                @getList="getTableData" show-overflow-tooltip :col-configs="colConfigs" :dict="dict">
        <!-- <el-table-column slot="type" width="240px" label="消息内容" align="center">
          <template slot-scope="{ row }">
            <el-popover
              placement="bottom"
              width="400"
              :visible-arrow="false"
              popper-class="wechat-message__container"
              trigger="hover">
              <div class="count row-content" slot="reference" v-if="row.content">{{ row.content }}</div>
              <div class="message-info">
                <h2 :style="{marginBottom: row.accessUrl ? '16px' : '0'}">{{ row.content }}</h2>
                <div class="message-info__wrapper" v-if="row.accessUrl">
                  <img v-if="row.contentType == 'image'" :src="row.accessUrl">
                  <video style="width:40px; height: 40px;" v-if="row.contentType == 'video'" :src="row.accessUrl"></video>
                  <img src="../../../../examples/assets/file.png" v-if="row.contentType == 'file'" width="40" height="40"/>
                  <div class="message-info__wrapper--right">
                    <h3 v-if="row.contentType === 'image'">{{ row.media.file.name }}</h3>
                    <h3 v-if="row.contentType === 'video'">{{ row.media.file.name }}</h3>
                    <p v-if="row.contentType === 'image'">{{ row.media.file.fileSizeStr }}</p>
                    <p v-if="row.contentType === 'video'">{{ row.media.file.fileSizeStr }}</p>
                  </div>
                </div>
              </div>
            </el-popover>
          </template>
        </el-table-column>         -->
        <el-table-column slot="options" label="操作" align="center">
          <template slot-scope="{ row }">
            <el-button type="text" @click="toAdd(row.id)">详情</el-button>
            <!-- <el-button type="text" @click="handleDelete(row.id)">删除</el-button> -->
          </template>
        </el-table-column>
      </ai-table>
    </template>
  </ai-list>
</template>

<script>
import {mapState} from 'vuex'

export default {
  name: "List",
  props: {
    dict: Object,
    instance: Function,
    params: Object,
  },
  data() {
    return {
      tableData: [],
      page: {current: 1, size: 10, total: 0, pages: 0},
      id: '',
    }
  },
  created() {
    this.getTableData()
  },
  computed: {
    colConfigs() {
      let conType = {
        text: "文本",
        image: "图片",
        video: "视频",
        file: "附件"
      }
      return [
        // { prop: "fileList", label: '消息类型', align: "center", width: "250px", formart: v => v?.map(e=> conType[e.contentType]).toString() },
        { prop: "fileList", label: '消息内容', align: "center", width: "250px", formart: v => v?.filter(e=> e.contentType == 'text')[0].content },
        // { prop: "fileList", label: '消息内容', align: "center", width: "250px", formart: v => v?.filter(e => e.contentType == 'text')[0].content},
        // { slot: 'type' },
        { prop: "messageSource", label: '消息类型', align: "center", formart: v => v==1? '居民': '居民群'},
        { prop: "createTime", label: '创建时间', align: "center", width: "250px"},
        { prop: "userName", label: '创建人', align: "center", width: "250px", },
        { slot: "options" ,},
      ]
    },
    ...mapState(['user'])
  },

  methods: {
    getTableData() {
      this.instance.post(`/app/pushmessage/list?`, null, {
        params: {
          ...this.page,
        }
      }).then(res => {
        if (res?.data) {
          this.tableData = res.data.records
          this.page.total = res.data.total
        }
      })
    },

    mapType(type) {
      return {
        'image': '图片',
        'video': '视频',
        'file': '文件',
        'text': '文本'
      }[type]
    },

    toAdd(id) {
      this.$emit('change', {
        type: 'Add',
        params: {
          id: id || '',
        },
      })
    }

  },
}
</script>

<style lang="scss" scoped>
.List {
  height: 100%;
  background: #f3f4f5;

  .count {
    cursor: pointer;
    color: #2266FF;
    font-size: 14px;

    &:hover {
      opacity: 0.6;
    }
  }

}

img, video {
  width: 40px;
  height: 40px;
  margin-right: 10px;
  object-fit: cover;
}

.message-info {
  padding: 8px;
  min-height: 116px;

  h2 {
    color: #222222;
    font-weight: 500;
    font-size: 14px;
  }

  .message-info__wrapper {
    display: flex;
    align-items: center;
    width: 368px;
    height: 60px;
    padding: 10px;
    background: #FFFFFF;
    border-radius: 2px;
    border: 1px solid #D0D4DC;

    .message-info__wrapper--right {
      flex: 1;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    h3 {
      width: 100%;
      color: #222222;
      font-size: 14px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-weight: normal;
    }

    img, video {
      width: 40px;
      height: 40px;
      margin-right: 10px;
      object-fit: cover;
    }

    p {
      margin-top: 6px;
      font-size: 14px;
      color: #888888;
    }
  }
}

.row-content {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>