123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403 |
- <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>
|