Gyyq-Upstairs/src/views/components/ProjectDetails/Projectgift.vue

<template>
    <div class="container">
        <!-- 顶部信息 -->
        <div class="containertop">
            <div class="topleft">
                <img src="../../../assets/images/detailsicon/1.png" alt="">
                <span>项目巡礼</span>
            </div>
            <div class="topright" v-if="action === 'fill' || !action || action === 'okay'">
                <el-button type="primary" size="medium" plain
                    style="border: none;background-color: rgba(43,98,241,0.1);color: #2B62F1;" @click="openAddDialog">
                    <img src="../../../assets/images/detailsicon/icon-xz@2x.png" alt="新增"
                        style="width: 0.6rem; height: 0.6rem; margin-right: 4px;">
                    新增
                </el-button>
            </div>
        </div>

        <!-- 展示区域 -->
        <div class="image-container">
            <div v-for="(item, index) in projectList" :key="index" class="image-box">
                <img :src="baseUrl + item.img" alt="项目图片" class="image">
                <div class="close-button" @click="removeImage(index)">
                    <img src="../../../assets/images/detailsicon/icon-关闭@2x.png" alt="">
                </div>
                <div class="iconguanbi2" @click="openEditDialog(item)"> <img
                        src="../../../assets/images/detailsicon/icon-bj@2x.png" alt=""></div>
                <div class="dianjibox" @click="handleItemClick(item)"></div>
                <div class="bottombox">
                    <div class="bottomtext"><span>{{ item.xmmc || '未命名项目' }}</span></div>
                    <div class="bottomtime"><span>{{ item.sj }}</span></div>
                </div>
            </div>
        </div>
        <div v-if="projectList.length === 0" class="no-data"
            style="width: 100%; display: flex;align-items: center;justify-content: center;color: gray;">
            暂无数据
        </div>

        <!-- 新增弹窗 -->
        <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="50%">
            <el-form :model="form" :rules="rules" ref="projectForm" label-width="100px">
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="项目名称" prop="xmmc">
                            <el-input v-model="form.xmmc" placeholder="请输入项目名称"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="年度">
                            <el-date-picker v-model="form.year" type="year" value-format="yyyy" placeholder="选择年度"
                                @change="handleYearChange" style="width: 100%;" />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="网页地址">
                            <el-input placeholder="选择地址" v-model="form.webUrl" class="input-with-select">
                                <template slot="prepend">
                                    <el-select v-model="select" style="width: 5.7rem;" @change="handleProtocolChange">
                                        <el-option label="http" value="http"></el-option>
                                        <el-option label="https" value="https"></el-option>
                                    </el-select>
                                    <span class="wangzhispan">://</span>
                                </template>
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="时间">
                            <el-date-picker v-model="form.sj" type="date" value-format="yyyy-MM-dd" placeholder="选择日期" style="width: 100%;">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-form-item label="图片上传" prop="img">
                    <ImageUpload v-model="form.img" :file-list="fileList" :multiple="false" :limit="1"
                        @change="handleImageChange" />
                </el-form-item>
                <el-form-item label="说明">
                    <el-input v-model="form.content" type="textarea" :rows="4" placeholder="请输入说明"></el-input>
                </el-form-item>
                <el-form-item label="大事记">
                    <el-input v-model="form.bigEvent" type="textarea" :rows="4" placeholder="请输入大事记"></el-input>
                </el-form-item>
                <el-form-item label="新闻事件">
                    <el-input v-model="form.newsEvent" type="textarea" :rows="4" placeholder="请输入新闻事件"></el-input>
                </el-form-item>
                <el-form-item label="附件上传">
                    <FileUpload @file-uploaded="handleFileUploaded" v-model="form.fj" />
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="submitForm" :loading="loading">{{ isEditMode ? '保存' : '确 定'
                }}</el-button>
            </span>
        </el-dialog>
        <!-- 新增详情弹窗 -->
        <el-dialog title="项目详情" :visible.sync="detailVisible" width="50%">
            <el-form :model="currentItem" label-width="100px" :disabled="true">
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="项目名称">
                            <el-input v-model="currentItem.xmmc"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="年度">
                            <el-input v-model="currentItem.year"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="网页地址">
                            <el-input v-model="currentItem.webUrl"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="时间">
                            <el-input v-model="currentItem.sj"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-form-item label="项目图片">
                    <img :src="baseUrl + currentItem.img" style="max-width: 100%; max-height: 200px;" v-if="currentItem.img">
                    <span v-else>无图片</span>
                </el-form-item>
                <el-form-item label="说明">
                    <el-input v-model="currentItem.content" type="textarea" :rows="4"></el-input>
                </el-form-item>
                <el-form-item label="大事记">
                    <el-input v-model="currentItem.bigEvent" type="textarea" :rows="4"></el-input>
                </el-form-item>
                <el-form-item label="新闻事件">
                    <el-input v-model="currentItem.newsEvent" type="textarea" :rows="4"></el-input>
                </el-form-item>
                <el-form-item label="附件">
                    <el-input v-model="fjFileName" :disabled="true"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="detailVisible = false">关 闭</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import ImageUpload from '@/components/ImageUpload';
import fileUpload from '@/components/FileUpload';
import { addXmxl, getXmxlList, deleteXmxl, updataXmxl } from '@/api/ManageApi/index';

export default {
    components: { ImageUpload, fileUpload },
    props: {
        xmId: {
            type: Number,
            required: true,
            default: 0
        },
        action: {
            type: String,
            required: true
        }
    },
    data() {
        return {
            baseUrl: process.env.VUE_APP_BASE_API,
            detailVisible: false,
            currentItem: {},
            dialogVisible: false,
            isEditMode: false,
            loading: false,
            currentEditId: null,
            projectList: [],
            fileList: [],
            form: {
                bigEvent: "",
                content: "",
                fj: "",
                img: "",
                newsEvent: "",
                sj: "",
                webUrl: "",
                xmmc: "",
                year: ""
            },
            rules: {
                xmmc: [{ required: true, message: '请输入项目名称', trigger: 'blur' }],
                year: [{ required: true, message: '请选择年度', trigger: 'change' }],
                img: [{ required: true, message: '请上传项目图片', trigger: 'change' }]
            },
            select: 'http' // 默认协议类型
        }
    },
    computed: {
        dialogTitle() {
            return this.isEditMode ? '编辑项目巡礼' : '新增项目巡礼';
        },
        fjFileName() {
        return this.currentItem.fj ? this.currentItem.fj.split('/').pop() : '无附件';
     }
    },
    created() {
        this.fetchProjectList();
    },
    methods: {
        
        // 处理项目点击
        handleItemClick(item) {
            // 阻止事件冒泡，避免触发父元素的点击事件

            // 检查点击的是否是操作按钮
            const isActionButton = event.target.closest('.close-button') ||
                event.target.closest('.iconguanbi2');

            if (isActionButton) {
                return; // 如果是操作按钮，不处理主区域点击
            }

            if (item.webUrl) {
                // 有网址则在新标签页打开
                window.open(item.webUrl, '_blank');
            } else {
                // 无网址则显示详情弹窗
                this.currentItem = { ...item };
                this.detailVisible = true;
            }
        },
        // 获取项目巡礼列表
        fetchProjectList() {
            getXmxlList({ xmId: this.xmId })
                .then(response => {
                    if (response.code === 200) {
                        this.projectList = response.data || [];
                    } else {
                        this.$message.error(response.msg || '获取数据失败');
                    }
                })
        },

        // 删除项目
        async removeImage(index, event) {
            try {
                await this.$confirm('确定要删除该项目巡礼吗?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                });

                const item = this.projectList[index];
                const response = await deleteXmxl([item.id]);

                if (response.code === 200) {
                    this.$message.success('删除成功');
                    this.projectList.splice(index, 1);
                    this.$emit('deleted', item.id);
                } else {
                    throw new Error(response.msg || '删除失败');
                }
            } catch (error) {
                if (error !== 'cancel') {
                    this.$message.error(error.message || '删除失败');
                }
            }
        },
    // 处理文件上传结果
    handleFileUploaded(fileName) {
      this.form.fj = `${this.baseUrl}/${fileName}`; // 添加 baseURL 前缀
    },
        // 打开新增对话框
        openAddDialog() {
            this.isEditMode = false;
            this.currentEditId = null;
            this.resetForm();
            this.dialogVisible = true;
        },

        // 打开编辑对话框
        openEditDialog(item) {
            this.isEditMode = true;
            this.currentEditId = item.id;
            this.dialogVisible = true;

            // 填充表单数据
            this.form = {
                bigEvent: item.bigEvent || "",
                content: item.content || "",
                fj: item.fj || "",
                img: item.img || "",
                newsEvent: item.newsEvent || "",
                sj: item.sj || "",
                webUrl: item.webUrl || "",
                xmmc: item.xmmc || "",
                year: item.year ? item.year.substring(0, 4) : "" // 只取年份部分
            };

            // 设置图片
            this.fileList = item.img ? [{ url: item.img }] : [];

            // 设置协议类型
            if (item.webUrl) {
                if (item.webUrl.startsWith('https://')) {
                    this.select = 'https';
                } else if (item.webUrl.startsWith('http://')) {
                    this.select = 'http';
                } else {
                    this.select = 'http';
                    this.form.webUrl = 'http://' + item.webUrl;
                }
            } else {
                this.select = 'http';
            }
        },

        // 处理年份选择
        handleYearChange(year) {
            if (year) {
                const today = new Date();
                const currentMonth = String(today.getMonth() + 1).padStart(2, '0');
                const currentDay = String(today.getDate()).padStart(2, '0');
                this.form.year = `${year}-${currentMonth}-${currentDay}`;
            }
        },

        // 处理协议类型变化
        handleProtocolChange() {
            if (this.form.webUrl && !this.form.webUrl.startsWith(this.select + '://')) {
                this.form.webUrl = this.select + '://' + this.form.webUrl.replace(/^(https?:\/\/)?/, '');
            }
        },

        // 重置表单
        resetForm() {
            this.$refs.projectForm?.resetFields();
            this.form = {
                bigEvent: "",
                content: "",
                fj: "",
                img: "",
                newsEvent: "",
                sj: "",
                webUrl: "",
                xmmc: "",
                year: ""
            };
            this.fileList = [];
            this.select = 'http'; // 重置协议类型
        },

        // 图片上传处理
        handleImageChange(file) {
            this.form.img = file.url;
        },

        // 提交表单
        submitForm() {
            this.$refs.projectForm.validate(valid => {
                if (valid) {
                    this.loading = true;
                    if (this.isEditMode) {
                        this.handleEditXmxl();
                    } else {
                        this.handleAddXmxl();
                    }
                }
            });
        },

        // 处理新增请求
        handleAddXmxl() {
            const submitData = {
                ...this.form,
                xmId: this.xmId,
                id: 0,
                fj: "",
                createTime: "",
                createBy: "",
                createId: 0,
                updateTime: "",
                updateBy: "",
                updateId: 0,
            };

            addXmxl(submitData)
                .then(response => {
                    if (response.code === 200) {
                        this.$message.success('新增成功');
                        this.dialogVisible = false;
                        this.fetchProjectList();
                    } else {
                        this.$message.error(response.msg || '新增失败');
                    }
                })
                .catch(error => {
                    this.$message.error('请求失败');
                    console.error(error);
                })
                .finally(() => {
                    this.loading = false;
                });
        },

        // 处理编辑请求
        handleEditXmxl() {
            const submitData = {
                ...this.form,
                id: this.currentEditId,
                xmId: this.xmId
            };

            updataXmxl(submitData)
                .then(response => {
                    if (response.code === 200) {
                        this.$message.success('编辑成功');
                        this.dialogVisible = false;
                        this.fetchProjectList();
                    } else {
                        this.$message.error(response.msg || '编辑失败');
                    }
                })
                .catch(error => {
                    this.$message.error('请求失败');
                    console.error(error);
                })
                .finally(() => {
                    this.loading = false;
                });
        },

        // 格式化日期显示
        formatDate(date) {
            if (!date) return '';
            return new Date(date).toLocaleDateString();
        }
    },
    watch: {
        xmId(newVal) {
            if (newVal) {
                this.fetchProjectList();
            }
        }
    }
}
</script>

<style scoped>
.container {
    display: flex;
    flex-direction: column;
    width: 100%;
    background-color: #FFFFFF;
    box-shadow: 0rem 0.13rem 0.63rem 0rem rgba(177, 177, 177, 0.1);
    border-radius: 0.5rem 0.5rem 0.5rem 0.5rem;
    padding: .3rem 0 1rem 0;
    gap: 1rem;
    overflow: auto;
}

.containertop {
    height: auto;
    display: flex;
    justify-content: space-between;
    padding: .5rem;
    border-bottom: 1px solid #E5E5E5;
}

.topleft {
    width: 8rem;
    display: flex;
    gap: 0.4rem;
    align-items: center;
}

.topleft img {
    width: 0.81rem;
    height: 0.81rem;
}

.topleft span {
    width: auto;
    height: 1rem;
    font-family: aliregular;
    font-weight: 500;
    font-size: 1rem;
    color: #3D424C;
    line-height: 1rem;
    text-align: right;
    font-style: normal;
    text-transform: none;
}

.image-container {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: .5rem 1rem;
}

.image-box {
    position: relative;
    width: 21.75rem;
    height: 12.44rem;
    background-color: #f0f0f0;
    border-radius: 0.5rem;
    overflow: hidden;
}

.image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.close-button {
    width: 1.25rem;
    height: 1.25rem;
    position: absolute;
    top: 0.2rem;
    right: 0.2rem;
}

.close-button img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.bottombox {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: absolute;
    bottom: .5rem;
    padding: .2rem;
    width: 97%;
}

.bottomtext {
    font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
    font-weight: 500;
    font-size: 1.13rem;
    color: black;
    line-height: 1.56rem;
    text-align: left;
    font-style: normal;
    text-transform: none;
}

.bottomtime {
    font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
    font-weight: 400;
    font-size: 0.75rem;
    color: black;
    line-height: 1rem;
    text-align: left;
    font-style: normal;
    text-transform: none;
}

.iconguanbi2 {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 2rem;
    height: 2rem;
    background-color: rgba(43, 98, 241, 0.1);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.iconguanbi2 img {
    width: 1.2rem;
    height: 1.2rem;
}

.dianjibox {
    width: 18rem;
    height: 11rem;
    /* background-color: red; */
    position: absolute;
    bottom: 0rem;
}
</style>