share-fun-web/src/views/photoManagement/imageGoodsManagement/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 { getPage, delItem, updateItem } from '@/api/photoWarehouse';

export default {
  name: 'ImageGoodsManagement',

  components: { toolbar },

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

  data() {
    return {
      columns: [
        {
          key: 'id',
          name: '标识',
          width: this.$col.b
        },
        {
          key: 'location',
          name: '上传位置',
          minWidth: this.$col.b,
          render: (h, { row }) =>
            h(
              'span',
              `${row.kindergartenName}${
                row.activityName ? '/' + row.activityName : ''
              }`
            )
        },
        {
          key: 'listPreview',
          name: '列表缩略图',
          minWidth: this.$col.b,
          render: (h, { row }) => {
            if (!row.listPreview) {
              return h('span', '图片正在处理中请稍等...');
            }
            return h('img', {
              style: {
                width: '160px',
                height: '90px'
              },
              class: 'pre-img',
              attrs: {
                src: row.listPreview
              },
              on: {
                click: () =>
                  this.$AdvanceViewImageModal({
                    items: [{ src: row.listPreview }]
                  })
              }
            });
          }
        },
        {
          key: 'detailPreview',
          name: '详情缩略图',
          minWidth: this.$col.b,
          render: (h, { row }) => {
            if (!row.detailPreview) {
              return h('span', '图片正在处理中请稍等...');
            }
            return h('img', {
              style: {
                width: '160px',
                height: '90px'
              },
              class: 'pre-img',
              attrs: {
                src: row.detailPreview
              },
              on: {
                click: () =>
                  this.$AdvanceViewImageModal({
                    items: [{ src: row.detailPreview }]
                  })
              }
            });
          }
        },
        {
          key: 'createAt',
          name: '上传时间',
          minWidth: this.$col.b
        },
        {
          key: 'likes',
          name: '点赞数',
          width: this.$col.m
        },
        {
          key: 'collections',
          name: '收藏数',
          width: this.$col.m
        },
        {
          key: 'isBeautiful',
          name: '精选',
          width: this.$col.m,
          type: 'switch',
          switchName: ['是', '否'],
          api: async row => {
            console.log(row);
            row.isBeautiful = !row.isBeautiful;
            const { success } = await updateItem(row);
            if (success) {
              this.$success('修改成功！');
            }
            this.$g_emit('photo_reload');
          }
          // type: 'tag',
          // fetchTagType: val => (val ? 'success' : 'info'),
          // tagName: row => (row.isBeautiful ? '是' : '否')
        },
        {
          key: 'isTake',
          name: '随手拍',
          width: this.$col.s,
          type: 'tag',
          fetchTagType: val => (val ? 'success' : 'info'),
          tagName: row => (row.isTake ? '是' : '否')
        },
        {
          key: 'isShow',
          name: '状态',
          width: this.$col.b,
          type: 'switch',
          switchName: ['上架', '下架'],
          api: async row => {
            console.log(row);
            row.isShow = !row.isShow;
            const { success } = await updateItem(row);
            if (success) {
              this.$success('修改成功！');
            }
            this.$g_emit('photo_reload');
          }
          // width: this.$col.s,
          // type: 'tag',
          // fetchTagType: val => (val ? 'success' : 'info'),
          // tagName: row => (row.isShow ? '上架' : '下架')
        },
        {
          key: 'action',
          name: '操作',
          width: '120',
          render: (h, { row }) => {
            const action = [];
            action.push(
              h(
                'el-button',
                {
                  props: {
                    type: 'text'
                  },
                  on: {
                    click: () =>
                      this.$ImageGoodsItemModal({
                        id: row.id
                      })
                  }
                },
                '编辑'
              )
            );
            action.push(
              h(
                'BaseBtn',
                {
                  props: {
                    popip: true,
                    txt: '删除',
                    type: 'text'
                  },
                  class: 'ml-10',
                  on: {
                    ok: () => this.handleDelItem(row)
                  }
                },
                '删除'
              )
            );

            return h('div', action);
          }
        }
      ]
    };
  },

  created() {
    this.$g_on('photo_reload', this.reload);
  },

  beforeDestroy() {
    this.$g_off('photo_reload', this.reload);
  },

  methods: {
    async handleDelItem(item) {
      const { success, msg } = await delItem({
        id: item.id
      });
      if (success) {
        this.$success('删除成功！');
        this.$g_emit('photo_reload');
      }
    }
  }
};
</script>

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