Gyyq-Upstairs/src/views/components/ProjectDetails/Memo.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">
                <el-button type="primary" size="medium" plain
                    style="border: none;background-color: rgba(43,98,241,0.1);color: #2B62F1;">
                    <img src="../../../assets/images/detailsicon/icon-bj@2x.png" alt="编辑"
                        style="width: 0.6rem; height: 0.6rem; margin-right: 4px;">
                    编辑
                </el-button>
                <el-button type="primary" size="medium" plain
                    style="border: none;background-color: rgba(43,98,241,0.1);color: #2B62F1;" @click="handleAdd">
                    <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="content">
            <div class="descriptionsdiv">
                <el-form :model="form" @submit.native.prevent="onSubmit">
                    <el-form-item>
                        <el-col :span="11">
                            <el-date-picker type="date" placeholder="选择日期" v-model="form.date1"
                                style="width: 21.75rem;"></el-date-picker>
                        </el-col>
                    </el-form-item>
                </el-form>
            </div>
            <div class="descriptionsdivnext">
                <div class="descriptionditem">
                    <div class="itemone">2024-09-28</div>
                    <div class="itemtwo">该项目已完工，需继续更新</div>
                    <div class="itemthree">2024-09-28</div>
                </div>
                <div class="descriptionditem">
                    <div class="itemone">2024-09-28</div>
                    <div class="itemtwo">该项目已完工，需继续更新</div>
                    <div class="itemthree">2024-09-28</div>
                </div>
                <div class="descriptionditem">
                    <div class="itemone">2024-09-28</div>
                    <div class="itemtwo">该项目已完工，需继续更新</div>
                    <div class="itemthree">2024-09-28</div>
                </div>
            </div>
        </div>

        <!-- 新增弹窗表单 -->
        <el-dialog title="新增备忘录" :visible.sync="dialogVisible" width="500px">
            <el-form :model="newMemo" label-width="100px">
                <el-form-item label="姓名">
                    <el-input v-model="newMemo.name"></el-input>
                </el-form-item>
                <el-form-item label="时间">
                    <el-date-picker type="date" placeholder="选择日期" v-model="newMemo.date"
                        style="width: 100%;"></el-date-picker>
                </el-form-item>
                <el-form-item label="内容">
                    <el-input type="textarea" v-model="newMemo.content" :rows="4"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" @click="handleAddMemo">确定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
export default {
    data() {
        return {
            dynamicTags: ['标签一', '标签二', '标签三'],
            inputVisible: false,
            inputValue: '',
            form: {
                name: '',
                region: '',
                date1: null,
                date2: '',
                delivery: false,
                type: [],
                resource: '',
                desc: ''
            },
            dialogVisible: false,
            newMemo: {
                name: '',
                date: '',
                content: ''
            }
        };
    },
    methods: {
        onSubmit() {
            console.log('submit!');
            console.log(this.form);
        },
        handleClose(tag) {
            this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
        },
        showInput() {
            this.inputVisible = true;
            this.$nextTick(_ => {
                this.$refs.saveTagInput.$refs.input.focus();
            });
        },
        handleInputConfirm() {
            let inputValue = this.inputValue;
            if (inputValue) {
                this.dynamicTags.push(inputValue);
            }
            this.inputVisible = false;
            this.inputValue = '';
        },
        handleAdd() {
            this.dialogVisible = true;
        },
        handleAddMemo() {
            console.log('新增备忘录:', this.newMemo);
            // 在这里可以将新备忘录添加到列表中或提交到服务器
            this.dialogVisible = false;
            this.newMemo = {
                name: '',
                date: '',
                content: ''
            };
        }
    }
};
</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;
    gap: 1rem;
}

.content {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

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

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

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

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

.descriptionsdiv {
    width: 100%;
    margin-left: 0rem;
    height: auto;
}

.el-tag+.el-tag {
    margin-left: 10px;
}

.button-new-tag {
    margin-left: 10px;
    height: 32px;
    line-height: 30px;
    padding-top: 0;
    padding-bottom: 0;
}

.input-new-tag {
    width: 90px;
    margin-left: 10px;
    vertical-align: bottom;
}

.descriptionsdivnext {
    display: flex;
    height: 8rem;
    margin-top: -1rem;
    gap: 1rem;
}

.descriptionditem {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 21.75rem;
    height: 7rem;
    background: #FBFCFF;
    border-radius: 0.25rem 0.25rem 0.25rem 0.25rem;
    border: 0.06rem solid #E6E6E6;
    padding: .5rem;
}

.itemone {
    width: 5.88rem;
    height: 0.88rem;
    font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
    font-weight: 500;
    font-size: 0.88rem;
    color: #3D424C;
    line-height: 0.88rem;
    font-style: normal;
    text-transform: none;
}

.itemtwo {
    width: 100%;
    height: 2rem;
    font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
    font-weight: 400;
    font-size: 0.88rem;
    color: #3D424C;
    line-height: 0.88rem;
    font-style: normal;
    text-transform: none;
}

.itemthree {
    width: 6.06rem;
    height: 0.88rem;
    font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
    font-weight: 400;
    font-size: 0.88rem;
    color: #808080;
    line-height: 0.88rem;
    font-style: normal;
    text-transform: none;
}

.el-textarea__inner {
    height: 10rem !important;
    /* 固定高度 */
    resize: none;
    /* 禁止调整大小 */
}
</style>