图片管理组建

父

<template>
  <div style="height: 100%;">
    <!-- 加载中 -->
    <div class="demo-spin-cols" :style="loading">
      <Icon type="ios-loading" size=18 class="demo-spin-icon-load"></Icon>
      <div>加载中</div>
    </div>
    <div class="dade_top">
        <el-input class="dade_inputSearch" placeholder="请输入名称" v-model="name"clearable></el-input>
        <el-button type="primary" @click='change(1)'>搜索</el-button>
        <el-button type="primary" @click='imgsc(1)'>选择图片</el-button>
    </div>
    <imgList ref="pop" :imgs="imgs"></imgList>
  </div>
</template>

<script>
  import url from '../../../assets/urlImg.js';
  export default {
    data() {
      return {
        
      }
    },
    components: {
      "imgList": () => import('../comm/imgList.vue')
    },
    created(){
    
    },
    mounted(){
      this.url = url;
      this.urlimg = url+"/admin/Common/img";
      console.log(this.url);
      this.change(1);
    },
    methods: {
      // 子组件调用
      imgs(e){
        console.log(e)
      },
      imgsc(){
        this.$refs.pop.imgsel();
      }
    },
  }
</script>
<style scoped>
  .el-input--suffix .el-input__inner {
      padding-right: 30px;
      width: 300px !important;
  }
  .el-input {
      position: relative !important;
      font-size: 14px !important;
      display: inline-block !important;
      width: 300px !important;
  }
</style>

组件

<template>
  <div style="height: 100%;">
      <Modal
          v-model="modal1"
          title="图片管理"
          :loading='loadings'
          width='1000'
          @on-ok="shopAdd">
          <div class="modals" style="display: flex;width: 100%;">
            <div style="width: 180px;">
              <el-row :gutter="24">
                <el-col :span="24">
                  <el-card shadow="hover" :body-style="{ padding: '0px' }">
                    <div style="height: 68vh;overflow: auto;width: 178px;">
                      <div v-for="it in [0,1,2,3,4]" :key="it">
                        <div v-if="id == it" @click="djimg(it)" class="dadeimg" style="line-height: 30px;cursor: pointer;padding: 5px;background-color: #eaefff;">
                          333
                          <el-popover placement="top-start" width="328" trigger="click">
                             <div>
                               <el-input size="small" v-model="input" placeholder="组名称"></el-input>
                               <div style="margin-top: 10px;margin-left: 170px;">
                                 <el-button size="small" slot="reference">修改</el-button>
                                 <el-button size="small" slot="reference">删除</el-button>
                               </div>
                             </div>
                             <el-button style="position: absolute;right: 20px;color: #9c9c9c;" type="text" size="small" slot="reference"><i class="el-icon-more"></i></el-button>
                           </el-popover>
                        </div>
                        <div v-else @click="djimg(it)" class="dadeimg" style="line-height: 30px;cursor: pointer;padding: 5px;">
                          333
                        </div>
                      </div>
                    </div>
                  </el-card>
                   <el-popover placement="top-start" width="328" trigger="click">
                      <div>
                        <el-input size="small" v-model="input" placeholder="组名称"></el-input>
                        <div style="margin-top: 10px;margin-left: 243px;">
                          <el-button size="small" slot="reference">新增</el-button>
                        </div>
                      </div>
                      <el-button slot="reference" style="width: 180px;margin-top: 3px;">新建分组</el-button>
                    </el-popover>
                </el-col>
              </el-row>
            </div>
            <div >
              <div style="display: flex;">
                <el-input class="dade_inputSearch" size="small" placeholder="图片名称" v-model="name"clearable></el-input>
                <el-button type="primary" style="margin-left: 2px;" size="small" @click='change(1)'>搜索</el-button>
              </div>
              <div>
                <el-row :gutter="24">
                  <el-col :span="24">
                    <el-card :body-style="{ 'padding-top': '2px' }" shadow="never"  style="position: absolute;margin-top: 5px;width: 788px;height: 68.8vh;overflow: auto;">

                      <el-row :gutter="12">
                        <el-col :span="8" v-for="is in [1,1,1,1,1,1,1,1,1]">
                          <el-card shadow="hover" :body-style="{ padding: '5px' }" style="height: 215px;margin-top: 5px;">
                            <img style="width: 100%;height: 150px;" src="https://img04.sogoucdn.com/app/a/201025/d2ba80ac9f0a568e8052d5de7cb788ec"/>
                            <div>未命名</div>
                            <el-checkbox v-model="checked"></el-checkbox>
                            <el-popover placement="top-start" width="328" trigger="click">
                               <div>
                                 <el-input size="small" v-model="input" placeholder="图片名称"></el-input>
                                 <el-select style="margin-top: 10px;" size="small" v-model="value" placeholder="分组">
                                     <el-option
                                       v-for="item in options"
                                       :key="item.value"
                                       :label="item.label"
                                       :value="item.value">
                                     </el-option>
                                   </el-select>
                                 <div style="margin-top: 10px;margin-left: 243px;">
                                   <el-button size="small" slot="reference">保存</el-button>
                                 </div>
                               </div>
                               <el-button size="mini" slot="reference" style="width: 120px;margin-top: 3px;margin-left: 5px;">编制图片</el-button>
                             </el-popover>
                             <span style="cursor: pointer;margin-left: 50px;color: red;font-size: 15px;"><i class="el-icon-delete"></i></span>
                          </el-card>
                        </el-col>
                      </el-row>
                      <div class="dade_bottom" style="margin-top: 10px;">
                        <Page :total="total" :page-size='pageSize' show-total show-elevator @on-change="change"/>
                      </div>
                    </el-card>
                  </el-col>
                </el-row>

              </div>
            </div>
            <div style="display: flex;width: 100%;justify-content: right;">
              <el-upload
                :action="urlimg"
                :show-file-list="false"
                :on-preview="handlePictureCardPreview"
                :before-upload="beforeAvatarUpload"
                :on-remove="handleRemove"
                :on-exceed="handleExceed"
                :on-success="success">
                <el-button size="small" type="primary">点击上传</el-button>
              </el-upload>
            </div>
          </div>
      </Modal>
  </div>
</template>

<script>
  import url from '../../../assets/urlImg.js';
  export default {
    props:['imgs'],
    data() {
      return {
        url:'',
        checked:'',
        tableData: [],
        modal1: false,
        loadings:false,
        total:0,
        pageSize:6,
        id:"0"
      }
    },
    created(){

    },
    mounted(){
      this.url = url;
      this.urlimg = url+"/admin/Common/img";
      console.log(this.url);
      this.change(1);
    },
    methods: {
      djimg(id){
        this.id = id;
      },
      shopAdd(){

      },
      imgsel(){
        this.modal1 = true;
      },
      //删除图片
      handleRemove(file, fileList) {
        console.log(fileList);
        // this.fileList = fileList;
      },
      handleExceed(files, fileList) {

      },
      beforeAvatarUpload(file){
        const isLt2M = file.size / 1024 / 1024 < 2;
        if(isLt2M == false){
          this.$message.warning('头像不能大于2m')
          return false;
        }
      },
      handlePictureCardPreview(file) {
        // this.dialogImageUrl = file.url;
        // this.dialogVisible = true;
      },
      success(response, file, fileList){
        console.log(fileList[0]['response'][0]);
        // this.fileList = fileList;
        this.fileList = [];
      },
      //分页搜索
      change(page){
        // this.loading = '';
        this.modal1 = false;
        this.$myhttp.get('admin/Img/index?page='+page+'&name='+this.name,{
        'Content-Type': 'application/json'
        }).then(backdata=>{
           this.loading = 'display:none';
           let data = backdata.data;
           var _this = this;
           this.tableData = data.data;
           this.total = data.data.count;
        });
      },
    },
  }
</script>
<style scoped>
  .el-input--suffix .el-input__inner {
      padding-right: 30px;
      width: 300px !important;
  }
  .el-input {
      position: relative !important;
      font-size: 14px !important;
      display: inline-block !important;
      width: 300px !important;
  }
</style>