feat:照片墙选择图片

src/packages/bi/src/components/photo-wall/select.vue

@@ -18,24 +18,25 @@
         <div
           class="select-img-item"
           v-for="item in imgWallPageList"
-          :key="item.id"
+          :key="item.imageUrl"
         >
           <el-checkbox
             :disabled="selectSum >= 50 && item.isSelect === 0"
             class="select-box"
-            :value="item.isSelect === 1"
+            :value="imageUrlsMap.includes(item.imageUrl)"
             @change="
               e => {
                 selectChange(e, item);
               }
             "
           ></el-checkbox>
-          <img :src="item.imgUrl" />
+          <img :src="item.imageUrl" />
         </div>
       </div>
       <div style="margin: 10px">
         <el-checkbox
           :indeterminate="selectSum > 0 && selectSum < imgWallList.length"
+          :value="selectSum === imgWallList.length"
           @change="selectAll"
         >
           全选
@@ -58,6 +59,8 @@
 </template>
 
 <script>
+import mixin from '../../mixin/index';
+
 import {
   Dialog,
   Button,
@@ -69,6 +72,7 @@ import {
 
 export default {
   name: 'select-img',
+  mixins: [mixin],
   props: {
     // 已勾选数据 [url,url]
     imageUrls: {
@@ -88,64 +92,54 @@ export default {
   data() {
     return {
       selectImgShow: false,
+      selectedImageUrls: [],
       currentPage: 1,
       pageSize: 6,
       imgWallList: []
     };
   },
   methods: {
-    openDialog() {
+    async openDialog() {
+      this.selectedImageUrls = JSON.parse(JSON.stringify(this.imageUrls));
       this.selectImgShow = true;
-      const asyncData = [];
-      for (let a = 1; a < 60; a++) {
-        asyncData.push({
-          isSelect: 0,
-          imgUrl:
-            'http://yiyang.oss-cn-beijing.aliyuncs.com/WEB/SaaS/images/2103251844.png',
-          id: a
-        });
-      }
-      this.imgWallList = [
-        {
-          isSelect: 1,
-          imgUrl:
-            'http://yiyang.oss-cn-beijing.aliyuncs.com/WEB/SaaS/images/2103251844.png',
-          id: 0
-        },
-        ...asyncData
-      ];
+      const asyncData = await this.Bi.getTaskPicList();
+      this.imgWallList = asyncData.data.data.taskImages;
     },
     // 全选/取消全选
     selectAll(e) {
-      // 选择并且超出50条弹出提示
-      if (e && this.imgWallList.length > 50) {
-        Message.error('当前可选照片超过50张，已为您自动选择前50张照片');
-        this.imgWallList.forEach(item => {
-          item.isSelect = 0;
-        });
-        this.imgWallList.slice(0, 50).forEach(item => {
-          item.isSelect = 1;
-        });
+      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.imgWallList.forEach(item => {
-          item.isSelect = e ? 1 : 0;
-        });
+        // 取消全选
+        this.selectedImageUrls = [];
       }
     },
     // 单选
     selectChange(e, item) {
-      item.isSelect = e ? 1 : 0;
+      if (e) {
+        this.selectedImageUrls.push(item);
+      } else {
+        this.selectedImageUrls = this.selectedImageUrls.filter(
+          urls => urls.imageUrl !== item.imageUrl
+        );
+      }
     },
     handleClose() {
       this.selectImgShow = false;
     },
     handleSave() {
-      this.$emit(
-        'handleSave',
-        this.imgWallList
-          .filter(item => item.isSelect === 1)
-          .map(item => item.imgUrl)
-      );
+      if (this.selectSum <= 0) {
+        Message.error('至少选择一张图片！');
+        return;
+      }
+      this.$emit('handleSave', this.selectedImageUrls);
       this.selectImgShow = false;
     }
   },
@@ -159,7 +153,10 @@ export default {
     },
     // 所选条数
     selectSum() {
-      return this.imgWallList.filter(item => item.isSelect === 1).length;
+      return this.selectedImageUrls.length;
+    },
+    imageUrlsMap() {
+      return this.selectedImageUrls.map(item => item.imageUrl);
     }
   },
   created() {}