ibms/src/views/data_admin/buildGraphy/locationPointMsg.vue

<template>
  <div id="locationPointMsg" style="width:100%;border:1px solid rgb(204,204,204)">
    <div style="padding:5px 10px;border-bottom:1px solid rgb(204,204,204);">
      <label class="item">位置标签名称:{{pointObj.Name}}</label>
      <label class="item">本地编码:{{pointObj.Id}}</label>
      <label class="item">备注:{{pointObj.Name}}</label>
    </div>
    <div style="padding:5px 10px;">
      <p>勾选需要补充到业务空间的图片信息</p>
      <div v-if="pointObj.ImageList && pointObj.ImageList.length">
        <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange"><span style="padding-left:20px">全选</span></el-checkbox>
        <div style="margin: 15px 0;"></div>
        <el-checkbox-group v-model="choImg" @change="handleCheckedCitiesChange">
          <el-checkbox v-for="item in pointObj.ImageList" :label="item" :key="item.key">
            <div style="max-width:250px;height:250px;float:left;">
              <el-image :src="`/image-service/common/image_get?systemId=dataPlatform&key=${item.Key}`" style="height:250px;"></el-image>
            </div>
          </el-checkbox>
        </el-checkbox-group>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isIndeterminate: false,
      checkAll: false,
      choImg: [],//选中的图片
    }
  },
  props: {
    pointObj: {},//标签对象
  },
  created() {
  },
  methods: {
    //是否全选
    handleCheckAllChange(val) {
      this.choImg = val ? this.pointObj.ImageList : [];
      this.isIndeterminate = false;
    },
    //选中
    handleCheckedCitiesChange(value) {
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.pointObj.ImageList.length;
      this.isIndeterminate = checkedCount > 0 && checkedCount < this.pointObj.ImageList.length;
    },
    //清空选项
    clearImg(){
      this.choImg = [];
      this.isIndeterminate = false;
    }
  }
}
</script>

<style lang="less" scoped>
#locationPointMsg {
  /deep/ .el-checkbox__input {
    position: absolute;
    left: 10px;
  }
  /deep/ .el-checkbox__inner {
    width: 20px;
    height: 20px;
  }
  /deep/ .el-checkbox__inner::after {
    left: 7px;
    top: 4px;
  }
  .item{
    padding-right:20px;
  }
}
</style>