share-fun-web/src/views/baseManagement/problemFeedbackManagement/index.vue

<template>
  <div class="">
    <toolbar @on-filter="filterData" @on-reset="filterData" />

    <base-table
      class="m-10 bg-w p-20 br-10"
      :columns="columns"
      :items="items"
      :pagination="pagination"
      :page-change="pageChange"
    />
  </div>
</template>

<script>
import toolbar from './toolbar';
import mxFilterList from '@/mixins/filterList';
import { getList } from '@/api/base/problemFeedback';

export default {
  name: 'ProblemFeedbackManagement',

  components: { toolbar },

  mixins: [
    mxFilterList({
      fetchList: getList // 在下方data再声明一个 fetchList: iGetList 同等效果
    })
  ],

  data() {
    return {
      columns: [
        {
          key: 'nickname',
          name: '用户名称',
          width: '160'
        },
        {
          key: 'phonenumber',
          name: '手机号',
          width: '180'
        },
        {
          key: 'content',
          name: '反馈内容',
          minWidth: '120',
          render: (h, { row }) => {
            let str = row.content;
            return h('BaseTooltip', {
              props: {
                txt: str
              }
            });
          }
        },
        {
          key: 'photo',
          name: '反馈图片',
          width: '100',
          render: (h, { row }) => {
            const items = row.imgUrl.split(',');
            const list = items.map(x => ({
              src: x
            }));
            if (list.length > 0) {
              return h('img', {
                style: {
                  width: '90px',
                  height: '90px'
                },
                attrs: {
                  src: list[0].src
                },
                on: {
                  click: () =>
                    this.$AdvanceViewImageModal({
                      items: list
                    })
                }
              });
            } else {
              return h('span', '-');
            }
          }
        },
        {
          key: 'createAt',
          name: '反馈时间',
          minWidth: '100'
        }
      ]
    };
  }
};
</script>

<style type="scss" scoped></style>