feat:照片墙的选择样式和选择图片

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

@@ -7,21 +7,21 @@
     <BiTitle :index="index" :name="name">
       <template #handler>
         <div>
-          <el-button class="bi-photo_btn">
+          <el-button @click="selectStyleShow = true" class="bi-photo_btn">
             <img
               src="http://cdn.yxvzb.com/WEB/SaaS/images/bi/svg/delete.svg"
               alt=""
             />
             选择样式
           </el-button>
-          <el-button class="bi-photo_btn">
+          <el-button @click="selectImgShow = true" class="bi-photo_btn">
             <img
               src="http://cdn.yxvzb.com/WEB/SaaS/images/bi/svg/delete.svg"
               alt=""
             />
             选择图片
           </el-button>
-          <el-button class="bi-photo_btn">
+          <el-button @click="handleRemove" class="bi-photo_btn">
             <img
               src="http://cdn.yxvzb.com/WEB/SaaS/images/bi/svg/delete.svg"
               alt=""
@@ -32,16 +32,37 @@
       </template>
     </BiTitle>
     <BiImages />
+    <SelectImages
+      v-if="selectImgShow"
+      @handleClose="selectImgShow = false"
+      @handleSave="selectImgSave"
+      :selectImgShow="selectImgShow"
+    />
+    <SelectStyle
+      v-if="selectStyleShow"
+      @handleClose="selectStyleShow = false"
+      @handleSave="selectStyleSave"
+      :selectStyleShow="selectStyleShow"
+    />
   </div>
 </template>
 
 <script>
 import BiTitle from '../../commonComponents/title.vue';
 import BiImages from './images';
+import SelectImages from './select';
+import SelectStyle from './style';
 import { heightToPage } from '../../chart-type/common';
+import { MessageBox, Message } from 'element-ui';
+
 export default {
   name: 'bi-photo-wall',
-  components: { BiTitle, BiImages },
+  components: {
+    BiTitle,
+    BiImages,
+    SelectImages,
+    SelectStyle
+  },
   props: {
     name: String,
     data: {
@@ -54,9 +75,44 @@ export default {
     }
   },
   data() {
-    return {};
+    return {
+      selectImgShow: false,
+      selectStyleShow: false
+    };
+  },
+  methods: {
+    // 选择图片的保存
+    selectImgSave(e) {
+      console.log(e);
+    },
+    // 选择样式的保存
+    selectStyleSave(e) {
+      console.log(e);
+    },
+    handleRemove() {
+      MessageBox.confirm(
+        '是否确认删除?删除后可在撤销删除里面回复该分析',
+        '提示',
+        {
+          confirmButtonText: '是',
+          cancelButtonText: '否',
+          type: 'warning'
+        }
+      )
+        .then(() => {
+          Message({
+            type: 'success',
+            message: '删除成功!'
+          });
+        })
+        .catch(() => {
+          Message({
+            type: 'info',
+            message: '已取消删除'
+          });
+        });
+    }
   },
-  methods: {},
   mounted() {},
   watch: {
     data: {

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

 <template>
-  <div></div>
+  <el-dialog
+    title="选择图片"
+    :visible.sync="selectImgShow"
+    width="36%"
+    center
+    :before-close="handleClose"
+  >
+    <div class="select-img-main">
+      <div
+        class="select-img-item"
+        v-for="item in imgWallPageList"
+        :key="item.id"
+      >
+        <el-checkbox
+          :disabled="selectSum >= 50 && item.isSelect === 0"
+          class="select-box"
+          :value="item.isSelect === 1"
+          @change="
+            e => {
+              selectChange(e, item);
+            }
+          "
+        ></el-checkbox>
+        <img :src="item.imgUrl" />
+      </div>
+    </div>
+    <div style="margin: 10px">
+      <el-checkbox
+        :indeterminate="selectSum > 0 && 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>
 </template>
 
 <script>
+import {
+  Dialog,
+  Button,
+  Checkbox,
+  CheckboxGroup,
+  Pagination,
+  Message
+} from 'element-ui';
+
 export default {
-  name: '',
+  name: 'selectImg',
+  props: {
+    selectImgShow: Boolean
+  },
   mixins: [],
-  components: {},
+  components: {
+    [Dialog.name]: Dialog,
+    [Button.name]: Button,
+    [CheckboxGroup.name]: CheckboxGroup,
+    [Checkbox.name]: Checkbox,
+    [Pagination.name]: Pagination
+  },
   data() {
-    return {};
+    return {
+      currentPage: 1,
+      pageSize: 6,
+      imgWallList: [
+        {
+          isSelect: 1,
+          imgUrl:
+            'http://yiyang.oss-cn-beijing.aliyuncs.com/WEB/SaaS/images/2103251844.png',
+          id: 0
+        }
+      ]
+    };
+  },
+  methods: {
+    // 全选/取消全选
+    selectAll(e) {
+      // 选择并且超出50条弹出提示
+      if (e && this.imgWallList.length > 50) {
+        Message.error('当前可选照片超过50张，已为您自动选择前50张照片');
+        this.imgWallList.slice(0, 50).forEach(item => {
+          item.isSelect = e ? 1 : 0;
+        });
+      } else {
+        this.imgWallList.forEach(item => {
+          item.isSelect = e ? 1 : 0;
+        });
+      }
+    },
+    // 单选
+    selectChange(e, item) {
+      item.isSelect = e ? 1 : 0;
+    },
+    handleClose() {
+      this.$emit('handleClose');
+    },
+    handleSave() {
+      this.$emit(
+        'handleSave',
+        this.imgWallList.filter(item => item.isSelect === 1)
+      );
+    }
+  },
+  computed: {
+    // 模拟分页
+    imgWallPageList() {
+      return this.imgWallList.slice(
+        (this.currentPage - 1) * this.pageSize,
+        this.currentPage * this.pageSize
+      );
+    },
+    // 所选条数
+    selectSum() {
+      return this.imgWallList.filter(item => item.isSelect === 1).length;
+    }
   },
-  computed: {},
-  watch: {},
-  methods: {},
-  created() {},
-  beforeDestroy() {}
+  created() {
+    for (let a = 1; a < 60; a++) {
+      this.imgWallList.push({
+        isSelect: 0,
+        imgUrl:
+          'http://yiyang.oss-cn-beijing.aliyuncs.com/WEB/SaaS/images/2103251844.png',
+        id: a
+      });
+    }
+  }
 };
 </script>
 
-<style scoped lang="scss"></style>
+<style scoped lang="scss">
+.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>

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

 <template>
-  <div></div>
+  <el-dialog
+    title="选择样式"
+    :visible.sync="selectStyleShow"
+    width="25%"
+    center
+    :before-close="handleClose"
+  >
+    <el-form ref="form" :model="form" label-width="80px">
+      <el-form-item label="布局样式:">
+        <el-radio-group v-model="form.layoutStyle">
+          <el-radio :label="1">流式布局</el-radio>
+          <el-radio :label="2">平铺布局</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="图片大小:">
+        <el-radio-group v-model="form.imgSize">
+          <el-radio :label="1">大图</el-radio>
+          <el-radio :label="2">中图</el-radio>
+          <el-radio :label="3">小图</el-radio>
+        </el-radio-group>
+      </el-form-item>
+    </el-form>
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="handleClose">取 消</el-button>
+      <el-button type="primary" @click="handleSave">保 存</el-button>
+    </span>
+  </el-dialog>
 </template>
 
 <script>
+import { Dialog, Button, Radio, RadioGroup, Form, FormItem } from 'element-ui';
+
 export default {
-  name: '',
+  name: 'selectStyle',
+  props: {
+    selectStyleShow: Boolean
+  },
   mixins: [],
-  components: {},
+  components: {
+    [Form.name]: Form,
+    [FormItem.name]: FormItem,
+    [Dialog.name]: Dialog,
+    [Button.name]: Button,
+    [RadioGroup.name]: RadioGroup,
+    [Radio.name]: Radio
+  },
   data() {
-    return {};
+    return {
+      form: {
+        layoutStyle: 1,
+        imgSize: 2
+      }
+    };
+  },
+  methods: {
+    handleClose() {
+      this.$emit('handleClose');
+    },
+    handleSave() {
+      this.$emit('handleSave', this.form);
+    }
   },
   computed: {},
-  watch: {},
-  methods: {},
-  created() {},
-  beforeDestroy() {}
+  created() {}
 };
 </script>
 
-<style scoped lang="scss"></style>
+<style scoped lang="scss">
+.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>