jingNing_H5_Mobile/src/pages/scanCode/index.vue

<template>
    <div class="box">
        <div class="box_title">五育评价</div>
        <van-form @submit="onSubmit">
            <van-cell-group inset>
                <div class="van-doc-demo-block mt-10px">
                    <h2 class="text-4vw text-gray-600 px-10px py-5px">学生信息</h2>
                    <div class="van-cell-group van-cell-group--inset">
                        <van-field class="bg-white" disabled v-model="newForm.wdwp_xs_xm" label="学生姓名"
                            placeholder="请输入姓名" />
                        <van-field disabled v-model="newForm.wdwp_xs_xjh" label="学籍号" placeholder="请输入学籍号" />
                    </div>
                </div>
                <div class="px-10px py-5px">
                    <div class="mr-5px min-w-80px my-10px text-4vw text-gray-600 py-5px">拍照上传</div>
                    <van-uploader v-model="fileList" :after-read="afterRead" capture="camera" :max-count="2">
                        <template #preview-cover>
                        </template>
                    </van-uploader>
                </div>
                <div class="px-10px" style="margin: 6vw 0;">检查项目 : </div>
                <div class="van-doc-demo-block mt-10px">
                    <div v-for="item in jcsmData" :key="item.xdww_id">
                        <div class="text-4vw text-gray-600 px-10px py-5px mt-10px">{{ item.xdww_name }}</div>
                        <div v-for="pf in item.xddy_dygl_wypj_wdpfx" :key="pf.xdwwp_id"
                            class="flex van-cell-group van-cell-group--inset bg-white-500">
                            <van-field :disabled="isSubmit" label-width="160" name="score" type="number" maxlength="3"
                                v-model="pf.fs" :label="pf.xdwwp_name" placeholder="请输入分数" />
                        </div>
                    </div>
                </div>
                <div class="van-doc-demo-block mt-10px">
                    <h2 class="text-4vw text-gray-600 px-10px py-5px">评分信息</h2>
                    <div class="van-cell-group van-cell-group--inset">
                        <van-field name="pfyhlx" v-model="newForm.wdwp_pfyhlx_name" is-link readonly label="评分用户类型"
                            placeholder="选择评分用户类型" @click="showPicker = true" />
                        <van-popup v-model:show="showPicker" round position="bottom">
                            <van-picker :columns="typeList" @cancel="showPicker = false" @confirm="onConfirm" />
                        </van-popup>
                        <van-field :rules="[{ required: true, message: '请填写评分用户姓名' }]" v-model="newForm.wdwp_pfyh_xm"
                            label="评分用户姓名" placeholder="请输入评分用户姓名" />
                        <van-field v-model="dateResult" is-link readonly name="datePicker" label="日期选择" placeholder="点击选择日期"
                            @click="datePicker = true" />
                        <van-popup v-model:show="datePicker" position="bottom">
                            <van-date-picker @confirm="onDateConfirm" @cancel="datePicker = false" />
                        </van-popup>
                        <van-field v-model="timeResult" is-link readonly name="timePicker" label="时间选择" placeholder="点击选择时间"
                            @click="timePicker = true" />
                        <van-popup v-model:show="timePicker" position="bottom">
                            <van-time-picker @confirm="onTimeConfirm" @cancel="timePicker = false"
                                :columns-type="['hour', 'minute', 'second']" />
                        </van-popup>
                    </div>
                </div>

            </van-cell-group>
            <div style="margin: 16px;">
                <van-button :disabled="isSubmit" round block type="primary" native-type="submit">
                    提交
                </van-button>
            </div>
        </van-form>
    </div>
</template>
<script setup>
import { showToast, showSuccessToast, showFailToast } from 'vant';
import request, { REQUEST } from '../../request/request';

let isSubmit = $ref(false);
let params = $ref({});
let newForm = $ref({
    wdwp_xs_xjh: '',
    wdwp_xs_xm: '11',
    wdwp_pfyhlx: '1',
    wdwp_pfyhlx_name: '教师',
    wdwp_pfyh_xm: '',
    wdwp_pfyh_sj: new Date(),
    wdwp_pfyh_img: [],
})

var temp1 = decodeURI(location.href).split('?');
var pram = temp1[1];
var keyValue = pram.split('&');
for (var i = 0; i < keyValue.length; i++) {
    var item = keyValue[i].split('=');
    var key = item[0];
    var value = item[1];
    params[key] = value;
}
newForm.wdwp_xs_xjh = params.xsxh;
newForm.wdwp_xs_xm = decodeURI(params.xsxm);

if (params.token) {
    request({
        url: '/user/main/login',
        data: {
            token: params.token
        }
    }).then(res => {
        if (res.code == 1) {
            localStorage.setItem('userInfo', JSON.stringify(res.data));
            getJcxm();
            isSubmit = false;
        }
    })
}
let jcsmData = $ref([]);
function getJcxm() {
    request({
        url: '/xddy/dygl_wypj_wdsz/index',
        data: {
            token: params.token,
            page: 1,
            limit: 99,
        }
    }).then(res => {
        if (res.code == '1') {
            jcsmData = [];
            res.data.page_data.forEach(item => {
                if (item.xddy_dygl_wypj_wdpfx) {
                    jcsmData.push(item)
                }
            })
        }
    })
}

// 拍照上传
let fileList = $ref([]);
const List_time = ref(new Date().toLocaleString())
const afterRead = (fileList) => {
    const { file } = fileList;
    file.status = "uploading";
    REQUEST['upload']({
        url: '/upload/main/file',
        data: { filedata: file }
    }).then(res => {
        console.log('res :>> ', res)
        console.log('fileList :>> ', fileList);
        if (res.code === '1') {
            fileList.url = window.GLOBAL_CONFIG.oss + '/' + res.data.url
            fileList.res = {
                name: res.data.file_name,
                url: fileList.url,
                origin: res.data.url,
            }
            fileList.status = 'done'
            newForm.wdwp_pfyh_img.push(res.data.file_name + "," + res.data.url);
            fileList.message = ''
            List_time.value = (new Date().toLocaleString())
        } else {
            fileProxy.status = 'failed'
            fileProxy.message = '上传失败'
        }
    }).catch((err) => {
        console.error(err)
    })
    // stxk_up({ file: file }).then((res) => {
    //     if (res.code == '1') {
    //         kkq_img.push(res.data.file_name + "," + res.data.url);
    //         file.status = "done";
    //         isButton = false;
    //     }
    // });
};
function beforeDelate(file, detail) {
    newForm.wdwp_pfyh_img.splice(detail.index, 1);
    isButton = true;
    return true;
}

// 评分用户类型
const showPicker = ref(false);
const typeList = $ref([
    { text: '教师', value: '1' },
    { text: '家长', value: '2' },
])
const onConfirm = ({ selectedOptions }) => {
    showPicker.value = false;
    newForm.wdwp_pfyhlx_name = selectedOptions[0].text;
    newForm.wdwp_pfyhlx = selectedOptions[0].value;
};

// 日期时间选择
const datePicker = ref(false);
const time = new Date();
let dateResult = $ref('');
dateResult = getTime(time).split(' ')[0]
const onDateConfirm = ({ selectedValues }) => {
    dateResult = selectedValues.join('-');
    datePicker.value = false;
};

let timeResult = $ref('');
let timePicker = $ref(false);
timeResult = getTime(time).split(' ')[1]
const onTimeConfirm = ({ selectedValues }) => {
    timeResult = selectedValues.join(':');
    timePicker = false;
};


// 提交
function onSubmit(info) {
    let arr1 = [];
    let flag = false;
    jcsmData.forEach(item => {
        let obj1 = {
            xdww_id: item.xdww_id,
            xdww_name: item.xdww_name,
            xddy_dygl_wypj_wdpfx: [],
        }
        let arr2 = [];
        item?.xddy_dygl_wypj_wdpfx.forEach(key => {
            if (!key.fs) {
                flag = true;
            }
            arr2.push({
                xdwwp_id: key.xdwwp_id,
                xdwwp_name: key.xdwwp_name,
                fs: key.fs,
            });
        })
        obj1.xddy_dygl_wypj_wdpfx = arr2;
        arr1.push(obj1);
    })
    // Object.keys(newForm).forEach((key) => {
    //     if (Array.isArray(newForm[key])) {
    //         newForm[key].forEach((item) => {
    //             Object.keys(item).forEach((key) => {
    //                 if (item[key] == "" || item[key] == null || item[key] == undefined) {
    //                     flag = true;
    //                 }
    //             });
    //         });
    //     }
    //     if (
    //         newForm[key] == "" ||
    //         newForm[key] == null ||
    //         newForm[key] == undefined
    //     ) {
    //         flag = true;
    //     }
    // });
    // if (flag) {
    //     return showToast('请填写完整~')
    // }
    // if (newForm.wdwp_pfyh_img.length == 0) {
    //     return showToast('请拍照上传照片~')
    // }
    let img = newForm?.wdwp_pfyh_img.join(';');
    let data = {
        token: params.token,
        issubmit: '1',
        api: 'json',
        pj_json: JSON.stringify(arr1),
        wdwp_pfyhlx: newForm.wdwp_pfyhlx,
        wdwp_sm_id: params.sm_id,
        wdwp_xs_xjh: newForm.wdwp_xs_xjh,
        wdwp_xs_xm: newForm.wdwp_xs_xm,
        wdwp_pfyh_xm: newForm.wdwp_pfyh_xm,
        wdwp_pfyh_sj: dateResult + ' ' + timeResult,
        wdwp_pfyh_img: img,
    };
    request({
        url: '/xddy/dygl_wypj_pjjl/batch_pj',
        data,
    }).then(res => {
        if (res.code == 1) {
            showSuccessToast(res.msg);
            isSubmit = true;
        } else {
            showFailToast(res.msg);
            isSubmit = false;
        }
    })
}
</script>
<script>
</script>
<style lang="scss" scoped>
* {
    --van-uploader-size: 15vw;
    --van-cell-group-background: #eff2f5;
    --van-cell-group-inset-padding: 5px 10px;
    --van-doc-text-color-4: #969799;
    --van-uploader-upload-background: #ffffff;
}

.flex {
    display: flex;
    align-items: center;
}

.px_15 {
    padding: 5px 20px;
}

.box {
    width: 100vw;
    padding: 3vw 2vw;
    background-color: #eff2f5 !important;

    .box_title {
        width: 100%;
        font-size: 5vw;
    }

    .box_form {
        font-size: 4vw;
    }
}

::v-deep {
    .el-form {
        .el-form-item__label {
            font-size: 4vw !important;
        }

        .el-form-item {
            margin: 5vw 0;
        }

        .el-input__inner {
            width: 70vw;
            height: 7vw;
            padding: 1vw 2vw;
            font-size: 4vw;
        }

        .pf_name_width {
            .el-input__inner {
                width: 30vw;
            }
        }

        .el-date-editor {
            .el-input__inner {
                width: 50vw;
            }
        }

        // .pop_select {
        //     font-size: 4vw !important;
        // }
    }

    .el-button {
        font-size: 4vw;
        padding: 20px 40px;
        box-sizing: content-box;
        border-radius: 20px;
        margin-top: 15vw;
    }

    .el-upload {
        .el-button {
            margin-top: 0;
        }
    }

    .el-upload-list__item {
        font-size: 4vw;
    }

    // .el-select-dropdown__item {
    //     font-size: 4vw !important;
    //     padding: 0 5px;
    // }

}

:v-deep {
    .van-uploader {
        .van-uploader__preview {
            width: 20vw;
            height: 20vw;
        }

        .van-uploader__upload {
            width: 10vw !important;
        }
    }



    .pop-select {
        .el-select-dropdown__item {
            font-size: 4vw !important;
            height: 7vw;
            line-height: 6vw;
            padding: 0 10px;
        }
    }



    .pf_name {
        min-width: 40vw;
        // text-align: right;
        padding-left: 5vw;
        color: #555;
        font-weight: 400;
    }

    .van-doc-demo-block {
        padding: 10px 20px;
    }

    .van-doc-demo-block__title {
        margin: 0;
        padding: 32px 16px 16px;
        padding-top: 32px;
        color: var(--van-doc-text-color-4);
        font-weight: 400;
        font-size: 14px;
        line-height: 16px;
    }

    .van-cell-group {
        background: var(--van-cell-group-background);
    }
}
</style>

<style lang="scss">
.elDatePicker.el-picker-panel {
    width: 53vw !important;
    padding: 0 5px;
    box-sizing: content-box;

    .el-picker-panel__content {
        width: 95%;
        font-size: 4vw;
    }

    .el-input {
        padding: 5px 0;
    }

    .el-input__inner {
        height: 6vw;
    }

    .el-input__inner,
    .el-date-picker__header-label,
    .el-date-table,
    .el-button {
        font-size: 4vw !important;
    }

    .el-date-picker__header-label {
        line-height: 5vw;
    }

    .el-picker-panel__icon-btn {
        font-size: 4vw !important;

    }

    .el-date-table td div {
        height: 50px;
    }

    .el-date-table td span {
        width: 50px;
        height: 50px;
        line-height: 50px;
    }

    .el-time-panel {
        width: 100%;
    }

    .el-time-spinner__item {
        font-size: 3vw;
        height: 50px;
        line-height: 50px;
    }

    .el-time-panel__btn {
        font-size: 3vw;
    }

    .el-time-spinner__wrapper {
        max-height: 300px;
    }

    .el-date-table td.current:not(.disabled) span {
        color: #FFF;
        background-color: #409EFF;
    }

    .el-time-panel__footer {
        height: 60px;
        line-height: 60px;
    }
}
</style>