dev/dcp-web-gate/src_old/views/ResourceSharing/ResourceSharingResourceApply.vue

<template>
    <div class="autoBox box" style="min-height: 900px;position: relative;">
        <div class="crumbs">
            <div style="overflow: hidden">
                <el-breadcrumb separator-class="el-icon-arrow-right" style="float: left">
                    <el-breadcrumb-item :to="{ path: 'home' }">{{$t('common.Home')}}</el-breadcrumb-item>
                    <el-breadcrumb-item :to="{ path: 'resourceSharing' }" class="pointer">{{$t('common.ResourceSharing')}}</el-breadcrumb-item>
                    <el-breadcrumb-item>{{$t('common.resourceApplicationForResearchResources')}}</el-breadcrumb-item>
                </el-breadcrumb>
            </div>
            <div class="content">
                <div class="addLanguage">
                    <span style="font-size: 18px;line-height: 50px;margin-left: 20px;vertical-align: middle;">{{$t('common.resourceApplicationForResearchResources')}}</span>
                </div>
                <div class="apply">
                    <div style="width: 100%;padding: 0 250px;box-sizing: border-box">
                        <el-form ref="form" :model="form" label-width="160px" :rules="formRules">
                            <el-form-item required :label="$t('common.resourceAttendance')" prop="numberOfVisitors">
                                <el-input v-model="form.numberOfVisitors" style="width: 40%;" maxlength="10" show-word-limit
                                          :placeholder="$t('common.resourcePleaseEnterTheNumberOfVisitors')">

                                </el-input>
                            </el-form-item>
                            <el-form-item required :label="$t('common.resourceVisitTime')" prop="date">
                                <el-date-picker
                                        v-model="form.date"
                                        type="datetimerange"
                                        :start-placeholder="$t('common.resourceStartTime')"
                                        :end-placeholder="$t('common.resourceEndTime')"
                                        :default-time="['12:00:00', '08:00:00']"
                                        style="width: 100%">
                                </el-date-picker>
                            </el-form-item>
                            <el-form-item required :label="$t('common.resourceTheContact')" prop="contactsName">
                                <el-input v-model="form.contactsName"  maxlength="100" show-word-limit
                                          :placeholder="$t('common.resourcePleaseEnterYourName')"
                                ></el-input>
                            </el-form-item>
                            <el-form-item required :label="$t('common.resourceToApplyForTheUnit')" prop="affiliatedUnitName">
                                <el-input v-model="form.affiliatedUnitName" maxlength="100" show-word-limit
                                          :placeholder="$t('common.resourcePleaseEnterTheUnitName')"
                                ></el-input>
                            </el-form-item>
                            <el-form-item required :label="$t('common.resourceContactPhoneNumber')" prop="contactsNumber">
                                <el-input v-model="form.contactsNumber" maxlength="100" show-word-limit
                                          :placeholder="$t('common.resourcePleaseEnterYourContactInformation')"
                                ></el-input>
                            </el-form-item>
                            <el-form-item required :label="$t('common.resourceEmail')" prop="contactsEmail">
                                <el-input v-model="form.contactsEmail" maxlength="100" show-word-limit
                                          :placeholder="$t('common.resourcePleaseEnterEmailAddress')"
                                ></el-input>
                            </el-form-item>
                            <el-form-item :label="$t('common.resourceOtherInstructions')">
                                <el-input
                                        type="textarea"
                                        :placeholder="$t('common.resourcePleaseEnterAdditionalInstructions')"
                                        v-model="form.otherInstructions"
                                        maxlength="5000"
                                        show-word-limit
                                        rows="6"
                                >
                                </el-input>
                            </el-form-item>
                            <el-form-item :label="$t('common.resourceTheAttachment')">
                                <el-upload
                                        class="upload-demo"
                                        action="/api/file/upload/attachment?module=BaseResearchApplicationForm"
                                        :before-upload="beforeUpload"
                                        :on-success="handleAvatarSuccessAnnex"
                                        :limit="1"
                                        :headers="myHeaders"
                                        :on-remove="handleRemove"
                                        :file-list="fileList">
                                    <el-button size="small" type="primary">{{$t('common.resourceSelectUploadFile')}}</el-button>
                                    <div slot="tip" class="el-upload__tip" style="display: inline-block;margin-left: 5px;">{{$t('common.resourceHint')}}{{$t('common.resourceUploadPDF')}}，{{$t('common.resourceFilesCannotExceed50Mb')}}</div>
                                </el-upload>
                            </el-form-item>
                            <el-form-item style="text-align: center;">
                                <el-button style="margin-right: 50px;" v-if="flag != false" type="primary" @click="onSubmit">{{$t('common.resourceSubmit')}}</el-button>
                                <el-button  @click="toResourceDetails">{{$t('common.resourceCancel')}}</el-button>
                            </el-form-item>
                        </el-form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import Base from "@/views/base/Base";
    import {getDicts} from '@/api/dict';
    import { formatDate } from "@/utils/formatUtils";
    import { saveOrUpdate,getBaseResearchApplications } from "@/api/research/resource/baseResearchApplication";
    import { getToken ,resetToken} from '@/utils/auth'
    import { searchFiles }  from '@/api/file';
    export default {
        name: "resourceSharingResourceApply",
        extends: Base,
        data(){
            return{
                myHeaders: {Authorization: ('Bearer ' +getToken())},
                fileList:[],
                queryId:'',
                flag: "",
                form:{
                    numberOfVisitors:'',
                    date:'',
                    dateOfVisitors:'',
                    contactsName:'',
                    affiliatedUnitName:'',
                    contactsNumber:'',
                    contactsEmail:'',
                    otherInstructions:'',
                    file:'',
                    researchResourcesEntityId:''
                },
                baseResearchApplication: {
                    numberOfVisitors:'',
                    startDateOfVisitors:'',
                    endDateOfVisitors:'',
                    contactsName:'',
                    affiliatedUnitName:'',
                    contactsNumber:'',
                    contactsEmail:'',
                    otherInstructions:'',
                    file:'',
                    researchResourcesEntityId:''
                },
            }
        },
        mounted() {
            if(this.$route.query.key){
                this.queryId = this.$route.query.key;
                this.flag = this.$route.query.value;
            }else if(this.$route.params.key){
                this.researchResourcesEntityId = this.$route.params.key.entityId;
                this.flag = this.$route.params.key.flag;
            }else{
                this.toView('resourceSharing',1)
            }
            this.initData();

        },
        computed:{
            formRules(){
                return{
                    numberOfVisitors: [
                        {
                            required: true,
                            message: this.i18n('resourcePleaseEnterTheNumberOfVisitors'),
                            trigger: ['change','blur'],
                        }
                    ],
                    date: [
                        {
                            required: true,
                            message: this.$i18n.locale=='zh'?'请输入参观时间':'Please select a visit time',
                            trigger: ['change','blur'],
                        }
                    ],
                    contactsName: [
                        {
                            required: true,
                            message: this.i18n('resourcePleaseEnterYourName'),
                            trigger: ['change','blur'],
                        }
                    ],
                    affiliatedUnitName: [
                        {
                            required: true,
                            message: this.i18n('resourcePleaseEnterTheUnitName'),
                            trigger: ['change','blur'],
                        }
                    ],
                    contactsNumber: [
                        {
                            required: true,
                            message: this.i18n('resourcePleaseEnterYourContactInformation'),
                            trigger: ['change','blur'],
                        }
                    ],
                    contactsEmail: [
                        {
                            required: true,
                            message: this.i18n('resourcePleaseEnterEmailAddress'),
                            trigger: ['change','blur'],
                        }
                    ],
                }
            },
        },
        methods:{
            handleRemove(file, fileList) {
                // this.files.forEach((i) => {
                //     if (i == file.uid) {
                //         var index = this.files.indexOf(i);
                //         this.files.splice(index, 1);
                //     }
                // })
                this.form.reserveTwo = '';
                this.form.file = '';
            },
            searchFiles() {
                var _that = this;
                 var file = {
                        attachmentBusinessId : _that.form.id,
                        attachmentBusinessType : "base_research_application_file"
                        
                        }
                    _that.fileList = [];
                    searchFiles(file).then(result => {
                        result.data.attachmentInfos.forEach((i) => {
                            var fileTo = {
                                name : i.attachmentName,
                                url : i.attachmentSavePath,
                                uid : i.id
                                }
                                _that.fileList.push(fileTo);
                            })
                            
                        })        
            },
            initData() {
                if (this.queryId) {
                        let param = {
                        id : this.queryId
                    }
                    getBaseResearchApplications(param).then(result => {
                        this.form = result.data.baseResearchApplications[0];
                        this.form.date = [];
                        this.form.date.push(formatDate( this.form.startDateOfVisitors, "YYYY-MM-DD HH:mm:ss"));
                        this.form.date.push(formatDate( this.form.endDateOfVisitors, "YYYY-MM-DD HH:mm:ss"));
                        this.searchFiles();
                    })
                }
                

            },
            onSubmit() {
                const that = this;
                console.log("that.$refs['form']")
                console.log(that.$refs['form'])
                that.$refs['form'].validate((valid) => {
                    if (valid) {
                        let date1 = that.form.date[0];
                        let date2 = that.form.date[1];
                        if (!that.form.id) {
                            date1 = date1.getTime();
                            date2 = date2.getTime();
                            that.baseResearchApplication.researchResourcesEntityId = this.$route.params.key.entityId;
                            that.baseResearchApplication.status = "1";
                            that.baseResearchApplication.reserveOne = this.$route.params.key.name;
                        } else {
                            that.baseResearchApplication.researchResourcesEntityId = that.form.researchResourcesEntityId;
                            that.baseResearchApplication.status = that.form.status;
                            that.baseResearchApplication.reserveOne = that.form.reserveOne;
                            that.baseResearchApplication.id = that.form.id;
                        }
                        that.baseResearchApplication.numberOfVisitors = that.form.numberOfVisitors;
                        that.baseResearchApplication.startDateOfVisitors = date1;
                        that.baseResearchApplication.endDateOfVisitors = date2;
                        that.baseResearchApplication.contactsName = that.form.contactsName;
                        that.baseResearchApplication.affiliatedUnitName = that.form.affiliatedUnitName;
                        that.baseResearchApplication.contactsNumber = that.form.contactsNumber;
                        that.baseResearchApplication.contactsEmail = that.form.contactsEmail;
                        that.baseResearchApplication.otherInstructions = that.form.otherInstructions;
                        that.baseResearchApplication.file = that.form.file;
                        that.baseResearchApplication.reserveTwo = that.form.reserveTwo;
                        let token = getToken();
                        this.submitHandler((token) => {
                            saveOrUpdate(JSON.stringify(that.baseResearchApplication), token).then(result => {
                                if (this.$i18n.locale.toUpperCase() == 'ZH') {
                                    this.$message({
                                        message: '申请成功',
                                        type: "success",
                                    });
                                } else {
                                    this.$message({
                                        message: 'application approved',
                                        type: "success",
                                    });
                                }
                                this.toResourceDetails()
                            }).catch((error) => {
                                this.resetToken();
                                if (this.$i18n.locale.toUpperCase() == 'ZH') {
                                    this.$message({
                                        message: '申请失败',
                                        type: "error",
                                    });
                                } else {
                                    this.$message({
                                        message: 'application failed',
                                        type: "error",
                                    });
                                }
                                this.toResourceDetails()
                            });
                        });
                    } else {
                        if (this.$i18n.locale.toUpperCase() == 'ZH') {
                            this.$message({
                                message: '必填项未填！',
                                type: 'error'
                            });
                        } else {
                            this.$message({
                                message: 'The required fields are not filled in!',
                                type: 'error'
                            });
                        }
                    }
                });
            },
            handleAvatarSuccessAnnex(res, file) {
                let attachmentId = res.data.attachmentId;
                let path = res.data.path;
                this.form.file = path;
                this.form.reserveTwo = attachmentId;
            },
            beforeUpload(file) {
                var FileExt = file.name.replace(/.+\./, "");
                if (['zip', 'pdf', 'doc', 'docx', 'excel', 'xls', 'xlsx'].indexOf(FileExt.toLowerCase()) === -1) {
                    if (this.$i18n.locale.toUpperCase() == 'ZH') {
                        this.$message({
                            type: 'warning',
                            message: '请上传zip,pdf,word,excel的附件！'
                        });
                    } else {
                        this.$message({
                            type: 'warning',
                            message: 'Please upload the attachment of zip, PDF, word and excel!'
                        });
                    }
                    return false;
                }
                this.isLt2k = file.size / 1024 / 1024 < 10 ? '1' : '0';
                if (this.isLt2k === '0') {
                    if (this.$i18n.locale.toUpperCase() == 'ZH') {
                        this.$message({
                            message: '上传文件大小不能超过10M!',
                            type: 'error'
                        });
                    } else {
                        this.$message({
                            message: 'Upload file size cannot exceed 10m!',
                            type: 'error'
                        });
                    }
                    return false;
                }
            },
            toResourceDetails(item,index){
                let params = {
                    entityId:'',
                };
                // if(this.$route.params.key){
                //     params.entityId = this.$route.params.key;
                // }
                // if(this.form.researchResourcesEntityId){
                //     params.entityId = this.form.researchResourcesEntityId
                // }
                this.toView('resourceSharing')
            },
            toViewQuery(router, json) {
                this.$router.push({ name: router, query: {key:json} });
            },
            toView(router, json) {
                this.$router.push({ name: router, params: {key:json} });
            },
            i18n (data) {
                return this.$t('common.'+data);
            },
        }
    }
</script>

<style scoped>
    .box {
        margin-top: 10px;
        background: #fff;
        /* height: 500px; */
        padding: 20px 0;
    }
    .crumbs {
        margin:0 20px;
    }
    .content{
        width: 100%;
        padding: 20px 10px;
        box-sizing: border-box;
    }
    .content .addLanguage{
        width: 100%;
        height: 50px;
        border-bottom: 1px solid #E4E7ED;
    }
    .content .apply{
        margin-top: 15px;
    }
</style>