当前位置：首页 > news >正文

图片管理组建

news 来源：原创 2024/9/19 22:14:33

在这里插入图片描述

父

<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%;"><Modalv-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-optionv-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>