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

<template>
    <div class="" style="height: 900px;margin: 20px;">
        <div v-if="!showPictureList">
            <div class="flex  f-align_item ">
                <el-button type="primary" style="margin:20px 0  20px 0" size="small"
                @click="onClick('add')">新建图片库</el-button>
            <el-input @blur="onSelect" v-model="name" placeholder="请输入内容" style="width: 200px; margin-left: 50px;"></el-input>
            </div>
         
            <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: 20px;top: -20px; ">
                                    <el-dropdown >
                                        <span class="el-dropdown-link" style="color: blue;">
                                            . . .
                                        </span>
                                        <el-dropdown-menu slot="dropdown">
                                            <el-dropdown-item  @click.native="onClickEdit(item,'edit')">修改</el-dropdown-item>
                                            <el-dropdown-item  @click.native="onClickEdit(item,'del')">删除</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.coverPicture ? `${item.coverPicture}` : 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.albumName }}
                        </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:[
        ],
        name:"",
        pageNo: 1,
        pageSize: window.localStorage.getItem("pageSize") || 20,
        taskId:"",
        tableData:[],
        total: 1,
    };
   noPictures
},
created() {},
mounted() {
    this.getTableData()
},
methods: {
    async getTableData() {
            const url = "/actual/base/albums/page";
            const { data, code, msg } = await requestGet(url, {
                name:this.name,
          
            });
            if (code === 0) {
             this.pictureList=data.list
            } else {
                this.$message.error(msg);
            }
        },
    onSelect(){
        this.getTableData()
    },
    closePictureList(){
        this.showPictureList=false  
    },
    onPictureList(){
        this.showPictureList=true
    },
    closeAdd(){
        console.log("dsfjklsdfjl");
        this.formShow=false
        this.getTableData()
    },
    onClick(type,id){
        console.log(type,"这是点击");
        this.formShow=true
        this.$nextTick(() => {
             this.$refs.ref_form.initForm(type,id);
      });
    },  
    onClickEdit(item,val){
        console.log(item,val,"ds.lm;sd");
        if (val === 'del') {
            this.$confirm("确认删除?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            })
                .then(() => {
                    this.handleDelete(item)
                })
                .catch(err => {
                    if (err == "cancel") {
                    }
                });
        } else {
            this.formShow = true
            this.$nextTick(() => {
                this.$refs.ref_form.initForm("edit", item);
            });
        }

    }, 
    async handleDelete(row) {
        const url = "/actual/base/albums/delete"
        let ids = [row.id]
        const { data, code, msg } = await requestPost(url, ids)
        if (code === 0) {
            this.$message({
                type: "success",
                message: "删除成功"
            });
            this.getTableData()
            this.loadTable()
        } else {
            this.$message.error(msg)
        }
    },

},
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>