uniapp学生请假列表的新增

一.在页面中新建请假列表新增页

二.在新增页面中布局

在页面中写入姓名，班级，请假开始时间和请假结束时间

同样在add.vue页面中写入云数据库中的字段，并返回

云数据库调用表，如图所示

然后在method方法中调用

最后的效果图如下

整体代码如下

add.vue页面

<template>
    <view class="add-leave">
        <view class=" user-info">
            <view>
                <text>申诉人：</text>某某人
            </view>
            <view>
                <text>班级:</text>计应外包2班
            </view>
        </view>
        <view class="upload-img">
            <view class="title">
                上传图片
            </view>
            <view class="upload">
                <uni-file-picker :auto-upload="false" limit="3" @select="onSelect"></uni-file-picker>
            </view>
            <view class="tip">
                最多可上传三张图片
            </view>
        </view>
        <view class="reason">
            <view class="title">
                申请理由
            </view>
            <textarea v-model="reason" placeholder-style="color:#999" placeholder="请输入申请理由"></textarea>
        </view>
        <view class="time">
            <view class="left">
                开始时间
            </view>
            <view class="right">
                <picker mode="date" :value="startdate" @change="bindStartDateChange">
                    <view class="uni-input">{{startdate}}</view>
                </picker>
            </view>
        </view>
        <view class="time">
            <view class="left">
                结束时间
            </view>
            <view class="right">
                <picker mode="date" :value="enddate" @change="bindEndDateChange">
                    <view class="uni-input">{{enddate}}</view>
                </picker>
            </view>
        </view>

        <button @tap="addLeave" type="primary">确定提交</button>
    </view>

</template>

<script>
    export default {
        data() {
            const currentDate = this.getDate({
                format: true
            })
            return {
                //存储开始时间的变量
                startdate: currentDate,
                //存储结束时间的变量
                enddate: currentDate,
                //请假理由
                reason: "",
                createTime: currentDate,
                //定义一个存储附件图片
                img: []

            }
        },

        methods: {
            //选择日期的时候触发
            bindStartDateChange: function(e) {
                this.startdate = e.detail.value
            },
            bindEndDateChange: function(e) {
                this.enddate = e.detail.value
            },
            //获取当前日期  new Date()//时间对象
            getDate(type) {
                const date = new Date();
                let year = date.getFullYear();
                let month = date.getMonth() + 1;
                let day = date.getDate();

                if (type === 'start') {
                    year = year - 60;
                } else if (type === 'end') {
                    year = year + 2;
                }
                month = month > 9 ? month : '0' + month;
                day = day > 9 ? day : '0' + day;
                return `${year}-${month}-${day}`;
            },
            addLeave() {
                //后端需要有一个新增假条的接口
                //1、先拿到页面的数据  附件、理由、开始时间、结束时间、请假人、班级  请假理由
                //2、调用后端的接口，去实现新增假条的功能
                uniCloud.callFunction({
                    //函数名（接口名）
                    name: "add-leave2",
                    data: {
                        username: uni.getStorageSync("name"),
                        stuClass: "计算机应用技术软件外包2班",
                        attachment: this.img,
                        reason: this.reason,
                        startdate: this.startdate,
                        enddate: this.enddate,    
                        createTime: this.createTime
                    },
                    success: (res) => {
                        console.log(res);
                        if (res.result.code == 200) {
                            uni.showToast({
                                title: "假条添加成功",
                                icon: "none",
                                duration: 2000
                            })
                            //跳转到请假列表  思考：如何刷新数据
                            uni.navigateTo({
                                url: "/pages/index/index"
                            })
                        }
                    }
                })
            },

            onSelect(e) {
                console.log(e);
                console.log("选择了图标");
                //执行上传图片到与云存储
                //手动上传图片
                //思考成功上传图片之后怎么把得到的图片路径插入的数据库表中
                uniCloud.uploadFile({
                    //filePath要上传的文件对象  tempFilePaths临时的图片路径
                    filePath: e.tempFilePaths[0],
                    //cloudPathAsRealPath表将图片放入自己指定的云数据库里的文件夹
                    cloudPathAsRealPath: true,
                    //5-15  14:32
                    //cloudPath 文件夹/时间戳+文件的名字
                    cloudPath: 'leave/' + Date.now() + e.tempFilePaths[0].name,

                    success: (res) => {
                        console.log(res);
                        //push表示插入
                        this.img.push(res.fileID)
                    }
                })
            }
        }
    }
</script>
<!-- scoped确保里面的样式只对当前页面有效果 -->
<style lang="less" scoped>
    .add-leave {
        padding: 15px;
        background-color: #f0f0f0;
        height: 100vh;

        .user-info {
            view {
                color: #3e515c;
            }

            view:first-child {
                margin-bottom: 3px;
                font-size: 28rpx;
            }

            text {
                font-weight: bold;
                font-size: 30rpx;
            }
        }

        .upload-img {
            margin-top: 15px;

            .title {
                color: #3e515c;
                font-weight: bold;
                margin-bottom: 10px;
            }

            .tip {
                font-size: 24rpx;
                margin: 15px 0;
                color: gray;
            }

            //!important使得样式的权重最高
            /deep/.file-picker__box-content {
                background-color: white;
                border-color: white !important;
            }
        }

        .reason {
            .title {
                color: #3e515c;
                font-weight: bold;
                margin-bottom: 10px;
            }

            textarea {
                background-color: white;
                padding: 15px;
                width: 90%;
            }
        }

        .time {
            display: flex;
            margin-top: 10px;
            justify-content: space-between;
            background-color: white;
            padding: 15px;
        }

        button {
            margin-top: 20px;
        }

    }
</style>

云数据库的连接：

'use strict';
exports.main = async (event, context) => {
    //event为前端上传的参数
    console.log('event : ', event)
    //1.连接数据库
    const db=uniCloud.database();
    //2.插入数据
    var id=await db.collection('leave-table').add({
        //数据表        前端传过来的值
        name:event.username,
        stuClass:event.stuClass,
        createTime:event.createTime,
        reason:event.reason,
        startTime:event.startdate,
        endTime:event.enddate,
        status:0,
        attachment:event.attachment,
    })
    if(id){
        return{
            code:200,
            msg:"成功"
        }
        }
        else{
            return{
                code:"500",
                msg:"失败"
            }
    }
    
    
    //返回数据给客户端

};