父
<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>
