select.vue

<template>
  <div>
    <el-button @click="openDialog" class="bi-photo_btn">
      <img
        src="http://cdn.yxvzb.com/WEB/SaaS/images/bi/svg/delete.svg"
        alt=""
      />
      选择图片
    </el-button>
    <el-dialog
      title="选择图片"
      :visible.sync="selectImgShow"
      width="700px"
      center
      :before-close="handleClose"
    >
      <div class="select-img-main">
        <div
          class="select-img-item"
          v-for="(item, index) in imgWallPageList"
          :key="item.imageUrl + index"
        >
          <el-checkbox
            :disabled="selectSum >= 50 && item.isSelect === 0"
            class="select-box"
            :value="imageUrlsMap.includes(item.imageUrl)"
            @change="
              e => {
                selectChange(e, item);
              }
            "
          ></el-checkbox>
          <img :src="item.imageUrl" />
        </div>
      </div>
      <div style="margin: 10px">
        <el-checkbox
          :indeterminate="selectSum > 0 && selectSum < imgWallList.length"
          :value="selectSum === imgWallList.length"
          @change="selectAll"
        >
          全选
        </el-checkbox>
        <span>当前选中{{ selectSum }}张</span>
        <span style="color: red">(最大选取50张)</span>
      </div>
      <el-pagination
        :current-page.sync="currentPage"
        :page-size="pageSize"
        layout="total, prev, pager, next, jumper"
        :total="imgWallList.length"
      ></el-pagination>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="handleSave">保 存</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import mixin from '../../mixin/index';

import {
  Dialog,
  Button,
  Checkbox,
  CheckboxGroup,
  Pagination,
  Message
} from 'element-ui';

export default {
  name: 'select-img',
  mixins: [mixin],
  props: {
    // 已勾选数据 [url,url]
    imageUrls: {
      type: Array,
      default() {
        return [];
      }
    }
  },
  components: {
    [Dialog.name]: Dialog,
    [Button.name]: Button,
    [CheckboxGroup.name]: CheckboxGroup,
    [Checkbox.name]: Checkbox,
    [Pagination.name]: Pagination
  },
  data() {
    return {
      selectImgShow: false,
      selectedImageUrls: [],
      currentPage: 1,
      pageSize: 6,
      imgWallList: []
    };
  },
  methods: {
    async openDialog() {
      this.selectedImageUrls = JSON.parse(JSON.stringify(this.imageUrls));
      this.selectImgShow = true;
      const asyncData = await this.Bi.getTaskPicList();
      this.imgWallList = asyncData.data.data.taskImages;
    },
    // 全选/取消全选
    selectAll(e) {
      if (e) {
        // 全部选择
        if (this.imgWallList.length > 50) {
          // 超出50条弹出提示
          Message.error('当前可选照片超过50张，已为您自动选择前50张照片');
          this.selectedImageUrls = this.imgWallList.slice(0, 50);
        } else {
          this.selectedImageUrls = this.imgWallList;
        }
      } else {
        // 取消全选
        this.selectedImageUrls = [];
      }
    },
    // 单选
    selectChange(e, item) {
      if (e) {
        this.selectedImageUrls.push(item);
      } else {
        this.selectedImageUrls = this.selectedImageUrls.filter(
          urls => urls.imageUrl !== item.imageUrl
        );
      }
    },
    handleClose() {
      this.selectImgShow = false;
    },
    handleSave() {
      if (this.selectSum <= 0) {
        Message.error('至少选择一张图片！');
        return;
      }
      this.$emit('handleSave', this.selectedImageUrls);
      this.selectImgShow = false;
    }
  },
  computed: {
    // 模拟分页
    imgWallPageList() {
      return this.imgWallList.slice(
        (this.currentPage - 1) * this.pageSize,
        this.currentPage * this.pageSize
      );
    },
    // 所选条数
    selectSum() {
      return this.selectedImageUrls.length;
    },
    imageUrlsMap() {
      return this.selectedImageUrls.map(item => item.imageUrl);
    }
  },
  created() {}
};
</script>

<style scoped lang="scss">
.bi-photo {
  // page-break-before: always;
  // page-break-after: always;
  padding-bottom: 50px;

  &_btn {
    display: inline-block;
    min-width: 42px;
    height: 42px;
    border: 1px solid #bac1ce;
    border-radius: 4px;
    vertical-align: top;
    text-align: center;
    line-height: 42px;
    padding: 0 15px;
    font-size: 16px;
    font-weight: 500;
    color: #6f7a91;
    cursor: pointer;
    position: relative;
    &_group {
      position: absolute;
      right: 16px;
      top: 50%;
      margin-top: -21px;
      z-index: 3;
      &_item {
        & + .bi-chart-title_btn_group_item {
          margin-left: 8px;
        }
      }
    }
  }
}
.select-img-main {
  display: flex;
  flex-wrap: wrap;
  .select-img-item {
    border: 1px solid rgb(182, 185, 188);
    margin: 4px;
    position: relative;
    .select-box {
      position: absolute;
      top: 15px;
      right: 15px;
    }
  }
  img {
    width: 200px;
    height: 150px;
  }
}
</style>