epmet-work-pc/src/views/modules/base/smartExcel/cpts/picture-collection.vue

<template>
    <div class="" style="height: 900px;margin: 20px;">
        <div v-if="!showPictureList">
            <el-button type="primary" style="margin:20px 0  20px 0" size="small"
                @click="onClick('add')">新建图片库</el-button>
            <div>
                <div class="gallery">
                    <div v-for="(item, index) in pictureList" style="margin-bottom: 30px;">
                        <div style="margin: 30px 30px 100px 30px ">
                            <div style="position: relative;">
                                <div style="position: absolute;z-index: 10; right: -10px;top: -10px; ">
                                    <el-dropdown @command="onClickEdit">
                                        <span class="el-dropdown-link" style="color: blue;">
                                            . . .
                                        </span>
                                        <el-dropdown-menu slot="dropdown">
                                            <el-dropdown-item :command="item">修改</el-dropdown-item>
                                            <el-dropdown-item :command="item">删除</el-dropdown-item>
                                        </el-dropdown-menu>
                                    </el-dropdown>
                                </div>
                                <img :src="require(`@/assets/images/index/imageBackground.png`)" alt=""
                                    style="    position: absolute; cursor:pointer;  height: 180px;width: 200px; ">
                                <img :src="item.src ? `${item.src}` : require(`@/assets/images/index/noPictures.png`)"
                                    @click="onPictureList" alt="" style=" top: -20px;
                    left: -20px;;  position: absolute; cursor:pointer; height: 180px; width: 200px;">
                            </div>
                        </div>
                        <div style="position: relative; bottom: -120px;left: 30px; font-size: 14px;">{{ item.title }}
                        </div>
                    </div>
                </div>
            </div>
            <el-dialog :visible.sync="formShow" :close-on-click-modal="false" :close-on-press-escape="false"
                title="查看图片" width="950px" top="5vh" class="dialog-h" @closed="closeAdd">
                <picture-add ref="ref_form" @closeAdd="closeAdd"></picture-add>
            </el-dialog>
        </div>
         <div v-if="showPictureList"> 
            <picture-list ref="ref_form" @closeAdd="closePictureList"></picture-list>
         </div>

    </div>
</template>
<script>
import { requestPost, requestGet } from "@/js/dai/request";
import { mapGetters } from 'vuex'
import pictureAdd  from '../cpts/picture-add.vue'
import pictureList  from '../cpts/picture-list.vue'
export default {
data() {
    return {
        showPictureList:false,
        formShow:false,
        pictureList:[
            {
                id:"1001",
                src:"https://elink-esua-epdc.oss-cn-qingdao.aliyuncs.com/epmet-saas/dev/20250224/8b8a174ea85e48e684267ce1a3f10dd1.jpg",
                title:"嘉定山社区网格巡查"
            },
            {
                src:"https://elink-esua-epdc.oss-cn-qingdao.aliyuncs.com/epmet-saas/dev/20250224/8b8a174ea85e48e684267ce1a3f10dd1.jpg",
                title:"嘉定山社区网格巡查"
            },
            {
                src:"https://elink-esua-epdc.oss-cn-qingdao.aliyuncs.com/epmet-saas/dev/20250224/8b8a174ea85e48e684267ce1a3f10dd1.jpg",
                      title:"嘉定山社区网格巡查"
            },
            {
                src:"https://elink-esua-epdc.oss-cn-qingdao.aliyuncs.com/epmet-saas/dev/20250224/8b8a174ea85e48e684267ce1a3f10dd1.jpg",
                      title:"嘉定山社区网格巡查"
            },
            {
                src:"https://elink-esua-epdc.oss-cn-qingdao.aliyuncs.com/epmet-saas/dev/20250224/8b8a174ea85e48e684267ce1a3f10dd1.jpg",
                      title:"嘉定山社区网格巡查"
            },
            {
                src:"https://elink-esua-epdc.oss-cn-qingdao.aliyuncs.com/epmet-saas/dev/20250224/8b8a174ea85e48e684267ce1a3f10dd1.jpg",
                      title:"嘉定山社区网格巡查"
            },
            {
                src:"https://elink-esua-epdc.oss-cn-qingdao.aliyuncs.com/epmet-saas/dev/20250224/8b8a174ea85e48e684267ce1a3f10dd1.jpg",
                      title:"嘉定山社区网格巡查"
            },
            {
                src:"",
                      title:"嘉定山社区网格巡查"
            },
       
        ],
        pageNo: 1,
        pageSize: window.localStorage.getItem("pageSize") || 20,
        taskId:"",
        tableData:[],
        total: 1,
    };
   noPictures
},
created() {},
mounted() {
    this.getTableData()
},
methods: {
    closePictureList(){
        this.showPictureList=false  
    },
    onPictureList(){
        this.showPictureList=true
    },
    closeAdd(){
        this.formShow=false
    },
    onClick(type,id){
        console.log(type,"这是点击");
        this.formShow=true
        this.$nextTick(() => {
             this.$refs.ref_form.initForm(type,id);
      });
    },  
    onClickEdit(item){
        this.formShow=true
        this.$nextTick(() => {
             this.$refs.ref_form.initForm("edit",item);
      });
    }, 

},
components:{pictureAdd,pictureList},
computed:{
    tableHeight() {
        return (this.clientHeight - 140) + 'px'

    },
    ...mapGetters(['clientHeight', 'resolution']),
},
props: {
    taskId: {
        type: String,
        default: ""
    },
},
watch: {},
}
</script>

<style lang='scss' scoped>
@import "@/assets/scss/pages/resiInfo.scss";
@import "@/assets/scss/modules/management/list-main.scss";
.gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 2fr));
    gap: 100px;

}
</style>