dvcp_v2_webapp/packages/wechat/AppBuddyMessage/components/List.vue

<template>
  <ai-list class="message">
    <template slot="title">
      <ai-title title="好友欢迎语" isShowBottomBorder></ai-title>
    </template>
    <template slot="content">
      <ai-search-bar class="search-bar">
        <template #left>
          <el-button size="small" type="primary" icon="iconfont iconAdd" @click="toAdd">添加好友欢迎语</el-button>
        </template>
        <template slot="right">
        </template>
      </ai-search-bar>
      <ai-table
        :tableData="tableData"
        :col-configs="colConfigs"
        :total="total"
        style="margin-top: 6px;"
        :current.sync="search.current"
        :size.sync="search.size"
        @getList="getList">
        <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" slot="reference">共{{ row.count }}条</div>
              <div class="message-info">
                <h2 v-if="row.content" :style="{marginBottom: row.media ? '16px' : '0'}">{{ row.content }}</h2>
                <div class="message-info__wrapper" v-if="row.media && (row.media.file || row.media.type === 'link')">
                  <img v-if="row.media.type === 'image' || row.media.type === 'miniapp'" :src="row.media.file.url">
                  <video v-if="row.media.type === 'video'" :src="row.media.file.url"></video>
                  <img v-if="row.media.type === 'link'" :src="row.media.picUrl">
                  <div class="message-info__wrapper--right">
                    <h3 v-if="row.media.type === 'miniapp'">{{ row.media.title }}</h3>
                    <h3 v-if="row.media.type === 'image'">{{ row.media.file.name }}</h3>
                    <h3 v-if="row.media.type === 'link'">{{ row.media.linkUrl }}</h3>
                    <h3 v-if="row.media.type === 'video'">{{ row.media.file.name }}</h3>
                    <p v-if="row.media.type === 'image'">{{ row.media.file.fileSizeStr }}</p>
                    <p v-if="row.media.type === 'link'">{{ row.media.title }}</p>
                    <p v-if="row.media.type === 'video'">{{ row.media.file.fileSizeStr }}</p>
                  </div>
                </div>
              </div>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column slot="options" width="120px" fixed="right" label="操作" align="center">
          <template slot-scope="{ row }">
            <div class="table-options">
              <!-- <el-button type="text" disabled @click="toAdd(row.id)" title="编辑">编辑</el-button> -->
              <el-button type="text" @click="remove(row.id)" title="删除">删除</el-button>
            </div>
          </template>
        </el-table-column>
      </ai-table>
    </template>
  </ai-list>
</template>

<script>
  export default {
    name: 'List',

    props: {
      instance: Function,
      dict: Object
    },

    data () {
      return {
        search: {
          current: 1,
          size: 10,
          content: ''
        },
        currIndex: 0,
        total: 10,
        colConfigs: [
          { prop: 'type',  label: '类型', align: 'left', width: '160',
            render: (h, params) => {
              let str = ''

              if (params.row.content) {
                str = '文字'
              }

              if (params.row.media && params.row.media.type === 'link') {
                str += this.dict.getLabel('wxMsgType', params.row.media.type) ? (params.row.content ? '+' : '') + this.dict.getLabel('wxMsgType', params.row.media.type) : ''
              }

              if (params.row.media && params.row.media.file) {
                str += this.dict.getLabel('wxMsgType', params.row.media.type) ? (params.row.content ? '+' : '') + this.dict.getLabel('wxMsgType', params.row.media.type) : ''
              }

              return h('span', {
                style: {
                }
              }, str)
            }
          },
          { slot: 'type' },
          { prop: 'users', label: '使用成员', align: 'left', formart: v => v.join(';') },
          { prop: 'createUser', label: '创建人' },
          { prop: 'createTime', label: '编辑时间' },
          { slot: 'options', label: '操作' }
        ],
        tableData: []
      }
    },

    mounted () {
      this.dict.load(['wxMsgType']).then(() => {
        this.getList()
      })
    },

    methods: {
      getList() {
        this.instance.post(`/app/wxcp/wxwelcomeword/list`, null, {
          params: {
            ...this.search
          }
        }).then(res => {
          if (res.code == 0) {
            this.tableData = res.data.records.map(item => {
              let count = 0

              if (item.content) {
                count = count + 1
              }

              if (item.media && item.media.type !== 'text') {
                count = count + 1
              }

              item.count = count
              return item
            })
            this.total = res.data.total
          }
        })
      },

      remove (id) {
        this.$confirm('确定删除该数据？').then(() => {
          this.instance.post(`/app/wxcp/wxwelcomeword/delete?id=${id}`).then(res => {
            if (res.code == 0) {
              this.$message.success('删除成功！')
              this.getList()
            }
          })
        })
      },

      toAdd (id) {
        this.$emit('change', {
          type: 'Add',
          params: {
            id
          }
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .message {
    .count {
      cursor: pointer;
      color: #2266FF;
      font-size: 14px;

      &:hover {
        opacity: 0.6;
      }
    }
  }

  .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;
      }
    }
  }
</style>