share-fun-web/src/views/photoManagement/photoVerifyManagement/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"
    >
      <template v-slot:batch-btn-box="{ selected }">

        <!-- <el-col :span="1.5">
          <el-button
            type="success"
            plain
            icon="el-icon-edit"
            size="mini"
            :disabled="selected | singleBatch"
            @click="handleUpdate(selected)"
            v-hasPermi="['car:brand:edit']"
            >修改</el-button
          >
        </el-col> -->
        <el-col :span="1.5">
          <el-button
            type="primary"
            plain
            size="mini"
            :disabled="selected | multipleBatch"
            @click="handleAudit(selected)"
            >批量审核</el-button
          >
        </el-col>
      </template>

    </base-table>
  </div>
</template>

<script>
import toolbar from './toolbar';
import mxFilterList from '@/mixins/filterList';
import { getPage } from '@/api/photoWarehouse';

const checkArr = (arr) => {
  if (Array.isArray(arr)) {
    if (arr.length === 0) {
      return 'null';
    } else if (arr.length === 1) {
      return 'single';
    } else {
      return 'multiple';
    }
  } else {
    throw new Error('ErrorType, we need Array', arr);
  }
};


export default {
  name: 'photoVerifyManagement',

  components: { toolbar },

  filters: {
    // 单选可用
    singleBatch: (arr) => {
      return checkArr(arr) !== 'single';
    },
    // 非空可用
    multipleBatch: (arr) => {
      return checkArr(arr) === 'null';
    },
  },


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

  data() {
    return {
      columns: [
        {
          key: 'selection',
        },
         {
          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: '上传时间',
          width: this.$col.b
        },
        {
          key: 'auditStatus',
          name: '状态',
          width: this.$col.s,
          type: 'tag',
          fetchTagType: val => {
            switch (val) {
              case 1:
                return 'success';
              case 0:
                return 'info';
              case -1:
                return 'error';
              default:
                return 'info';
            }
          },
          tagName: row => {
            switch (row.auditStatus) {
              case 1:
                return '通过';
              case 0:
                return '待审核';
              case -1:
                return '拒绝';
              default:
                return '-';
            }
          }
        },
        {
          key: 'action',
          name: '操作',
          width: '120',
          render: (h, { row }) => {
            const action = [];
            row.auditStatus !== 1 &&
              action.push(
                h(
                  'el-button',
                  {
                    props: {
                      type: 'text'
                    },
                    on: {
                      click: () =>
                        this.$PhotoVerifyItemModal({
                          id: row.id,
                          auditStatus: row.auditStatus
                        })
                    }
                  },
                  '审核'
                )
              );

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

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

  beforeDestroy() {
    this.$g_off('photo_reload', this.reload);
  },
  methods: {
    handleAudit(arr) {
      this.$PhotoVerifyMultItemModal({
        ids: arr.map(x => x.id)
      })
    }
  }
};
</script>

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