123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904 |
- <template>
- <div class="autoBox box" style="min-height: 900px;position: relative;">
- <div class="crumbs">
- <el-breadcrumb separator="/">
- <el-breadcrumb-item :to="{ path: 'home' }">{{ $t('common.Home') }}</el-breadcrumb-item>
- <el-breadcrumb-item :to="{ path: 'exhibitionService2' }">{{ $t('common.ExhibitionService') }}
- </el-breadcrumb-item>
- <el-breadcrumb-item>{{ $t('common.ExhibitionServiceDetail') }}</el-breadcrumb-item>
- </el-breadcrumb>
- </div>
- <div class="ui-body" v-if="$i18n.locale == 'zh'">
- <div class="ui-left">
- <h3>{{ listDetail.name }}</h3>
- <div class="ui-infos">
- <ul class="ui-uls">
- <li class="ui-ul-li">
- <div class="ui-li-left">
- <div class="ui-info-left">举办时间:</div>
- <div class="ui-info-right">{{ listDetail.validityStartDate | time("YYYY-MM-DD")
- }} -- {{ listDetail.validityEndDate | time("YYYY-MM-DD") }}</div>
- </div>
- <div class="ui-li-right">
- <div class="ui-info-left">举办地区:</div>
- <div class="ui-info-rights">{{ listDetail.region }}</div>
- </div>
- </li>
- <li class="ui-ul-li">
- <div class="ui-li-left">
- <div class="ui-info-left">举办地点:</div>
- <div class="ui-info-right">{{ listDetail.place }}</div>
- </div>
- <div class="ui-li-right">
- <div class="ui-info-left">展商数量:</div>
- <div class="ui-info-right">{{ listDetail.showbusinessNumber }}</div>
- </div>
- </li>
- <li class="ui-ul-info">
- <div class="ui-info-left">主办单位:</div>
- <div class="ui-info-right">{{ listDetail.company }}</div>
- </li>
- <li class="ui-ul-info">
- <div class="ui-info-left">承办单位:</div>
- <div class="ui-info-right">{{ listDetail.undertakeCompany }}</div>
- </li>
- <li class="ui-ul-info">
- <div class="ui-info-left">会展面积:</div>
- <div class="ui-info-right">{{ listDetail.area }}万平</div>
- </li>
- </ul>
- </div>
- <div class="user-btn">
- <el-button type="primary" @click="toJoin(listDetail.extendTwo)">参展报名</el-button>
- <el-button v-if="yunShang" plain @click="toTop(listDetail.exhibitionHallUrl)">云上展厅</el-button>
- </div>
- <div class="user-info" v-html="listDetail.introduceHtml"></div>
- <div class="to-user-detail" @click="aboutInfo"><span style="cursor:hand">相关会议</span></div>
- <el-dialog title="参展报名" :visible.sync="dialogFormVisible" :close-on-click-modal="false"
- style="width:100%;" :append-to-body="true" :destroy-on-close="destroyOnClose">
- <el-form :model="dynamicValidateForm" ref="dynamicValidateForm">
- <el-form-item label="展位性质" :label-width="formLabelWidth" prop="radio">
- <el-radio-group v-model="dynamicValidateForm.radio" size="medium">
- <el-radio label="参展商"></el-radio>
- <el-radio label="参展观众"></el-radio>
- </el-radio-group>
- </el-form-item>
- <el-form-item label="企业名称" :label-width="formLabelWidth" prop="unitName" :rules="[
- { required: true, message: '请输入企业名称', trigger: 'blur' }
- ]">
- <el-input v-model="dynamicValidateForm.unitName" placeholder="请输入企业名称"></el-input>
- </el-form-item>
- <el-form-item label="联系人" :label-width="formLabelWidth" prop="contact" :rules="[
- { required: true, message: '请输入联系人', trigger: 'blur' }
- ]">
- <el-input v-model="dynamicValidateForm.contact" placeholder="请输入联系人"></el-input>
- </el-form-item>
- <el-form-item label="电话" :label-width="formLabelWidth" prop="mobile" :rules="[
- { required: true, message: '请输入电话', trigger: 'blur' }
- ]">
- <el-input v-model="dynamicValidateForm.mobile" placeholder="请输入电话"></el-input>
- </el-form-item>
- <el-form-item label="邮箱" :label-width="formLabelWidth" prop="email" :rules="[
- { required: true, message: '请输入邮箱', trigger: 'blur' }
- ]">
- <el-input v-model="dynamicValidateForm.email" placeholder="请输入邮箱"></el-input>
- </el-form-item>
- <el-form-item label="备注" :label-width="formLabelWidth" prop="advisoryDetails" :rules="[
- { required: true, message: '请填写备注', trigger: 'blur' }
- ]">
- <el-input v-model="dynamicValidateForm.advisoryDetails" placeholder="请输入"></el-input>
- </el-form-item>
- <el-form-item label="上传附件" :label-width="formLabelWidth">
- <el-upload class="upload-demo" ref="upload"
- action="/api/file/upload/attachment?module=resourceshare&attachmentBusinessType=exhibition_apply"
- :limit="limit" :headers="myHeaders" :on-remove="handleRemove" :on-exceed="onExceed"
- :before-upload="beforeUpload" :on-success="handleAvatarSuccessAnnex"
- :file-list="fileList" :auto-upload="autoUpload">
- <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
- </el-upload>
- </el-form-item>
- </el-form>
- <div slot="footer" class="dialog-footer">
- <el-button @click="cancel">取 消</el-button>
- <el-button type="primary" @click="toReady()">确 定</el-button>
- </div>
- </el-dialog>
- </div>
- <div class="ui-right">
- <div style="margin-top: 20px;margin-left: 10px;">
- <div class="relevanInformation">
- <div class="informationTitle informationTitleAfter">
- <!-- <img src="@/assets/img/cooperationExchange/20200608_03.gif" alt=""
- style="height: 20px;vertical-align: middle;"> -->
- {{ $t('common.LookBackAt') }}
- </div>
- <ul class="user-out" style="overflow:auto">
- <li v-for="(item, index) in historyInfo" :key="index" @click="toDetail(item)"
- class="list-infos">· {{ item.name }}</li>
- </ul>
- </div>
- </div>
- <div style="margin-top: 20px;margin-left: 10px;">
- <div class="relevanInformation">
- <div class="informationTitle informationTitleAfter">
- <!-- <img src="@/assets/img/cooperationExchange/20200608_03.gif" alt=""
- style="height: 20px;vertical-align: middle;"> -->
- {{ $t('common.ContactInformations') }}
- </div>
- <div>
- <ul class="user-out">
- <li class="user-list-info">
- <div class="user-list-pic">
- <img src="@/assets/img/exhibition/who.png" alt="" class="user-list-pic-info">
- <i>联系人:</i>
- </div>
- <div class="user-info-d">{{ listDetail.contactMen }}</div>
- </li>
- <li class="user-list-info">
- <div class="user-list-pic">
- <img src="@/assets/img/exhibition/24gl-phoneBubble.png" alt=""
- class="user-list-pic-info">
- <i>电话:</i>
- </div>
- <div class="user-info-d">{{ listDetail.contactPhone }}</div>
- </li>
- <li class="user-list-info">
- <div class="user-list-pic">
- <img src="@/assets/img/exhibition/email.png" alt="" class="user-list-pic-info">
- <i>邮箱:</i>
- </div>
- <div class="user-info-d">{{ listDetail.email }}</div>
- </li>
- <li class="user-list-info">
- <div class="user-list-pic">
- <img src="@/assets/img/exhibition/QQ.png" alt="" class="user-list-pic-info">
- <i>QQ:</i>
- </div>
- <div class="user-info-d">{{ listDetail.qq }}</div>
- </li>
- </ul>
- </div>
- </div>
- </div>
- </div>
- </div>
- <div class="ui-body" v-if="$i18n.locale == 'en'">
- <div class="ui-left">
- <h3>{{ listDetail.name }}</h3>
- <div class="ui-infos">
- <ul class="ui-uls">
- <li class="ui-ul-li">
- <div class="ui-li-left">
- <div class="ui-info-left">Holding time:</div>
- <div class="ui-info-right">{{ listDetail.validityStartDate | time("YYYY-MM-DD")
- }} -- {{ listDetail.validityEndDate | time("YYYY-MM-DD") }}</div>
- </div>
- <div class="ui-li-right">
- <div class="ui-info-left">Hold area:</div>
- <div class="ui-info-rights">{{ listDetail.region }}</div>
- </div>
- </li>
- <li class="ui-ul-li">
- <div class="ui-li-left">
- <div class="ui-info-left">Host place:</div>
- <div class="ui-info-right">{{ listDetail.place }}</div>
- </div>
- <div class="ui-li-right">
- <div class="ui-info-left">Exhibitors number:</div>
- <div class="ui-info-right">{{ listDetail.showbusinessNumber }}</div>
- </div>
- </li>
- <li class="ui-ul-info">
- <div class="ui-info-left">Host unit:</div>
- <div class="ui-info-right">{{ listDetail.company }}</div>
- </li>
- <li class="ui-ul-info">
- <div class="ui-info-left">Responsible unit:</div>
- <div class="ui-info-right">{{ listDetail.undertakeCompany }}</div>
- </li>
- <li class="ui-ul-info">
- <div class="ui-info-left">Exhibition area:</div>
- <div class="ui-info-right">{{ listDetail.area }}Myriametre</div>
- </li>
- </ul>
- </div>
- <div class="user-btn">
- <el-button type="primary" @click="toJoin(listDetail.extendTwo)">Apply</el-button>
- <el-button v-if="yunShang" plain @click="toTop(listDetail.exhibitionHallUrl)">Exhibition</el-button>
- </div>
- <div class="user-info" v-html="listDetail.introduceHtml"></div>
- <div class="to-user-detail" @click="aboutInfo"><span style="cursor:hand">Related Conference
- Registration</span> </div>
- <el-dialog title="The exhibition registration" :visible.sync="dialogFormVisible"
- :close-on-click-modal="false" style="width:100%;" :append-to-body="true"
- :destroy-on-close="destroyOnClose">
- <el-form :model="dynamicValidateForm" ref="dynamicValidateForm">
- <el-form-item label="Nature of the booth" :label-width="formLabelWidth" prop="radio">
- <el-radio-group v-model="dynamicValidateForm.radio" size="medium">
- <el-radio label="Exhibitor"></el-radio>
- <el-radio label="The exhibition audience"></el-radio>
- </el-radio-group>
- </el-form-item>
- <el-form-item label="The name of firm" :label-width="formLabelWidth" prop="unitName" :rules="[
- { required: true, message: 'Please enter the business name', trigger: 'blur' }
- ]">
- <el-input v-model="dynamicValidateForm.unitName"
- placeholder="Please enter the business name"></el-input>
- </el-form-item>
- <el-form-item label="Contacts" :label-width="formLabelWidth" prop="contact" :rules="[
- { required: true, message: 'Please enter the contact person', trigger: 'blur' }
- ]">
- <el-input v-model="dynamicValidateForm.contact"
- placeholder="Please enter the contact person"></el-input>
- </el-form-item>
- <el-form-item label="Telephone" :label-width="formLabelWidth" prop="mobile" :rules="[
- { required: true, message: 'Please enter the telephone number', trigger: 'blur' }
- ]">
- <el-input v-model="dynamicValidateForm.mobile"
- placeholder="Please enter the telephone number"></el-input>
- </el-form-item>
- <el-form-item label="E-mail" :label-width="formLabelWidth" prop="email" :rules="[
- { required: true, message: 'Please enter email address', trigger: 'blur' }
- ]">
- <el-input v-model="dynamicValidateForm.email" placeholder="Please enter email address">
- </el-input>
- </el-form-item>
- <el-form-item label="Remark" :label-width="formLabelWidth" prop="advisoryDetails" :rules="[
- { required: true, message: 'Please fill in the remarks', trigger: 'blur' }
- ]">
- <el-input v-model="dynamicValidateForm.advisoryDetails" placeholder="Please fill in the remarks">
- </el-input>
- </el-form-item>
- <el-form-item label="Upload attachment" :label-width="formLabelWidth">
- <el-upload class="upload-demo" ref="upload"
- action="/api/file/upload/attachment?module=resourceshare&attachmentBusinessType=exhibition_apply"
- :limit="limit" :headers="myHeaders" :on-remove="handleRemove" :on-exceed="onExceed"
- :before-upload="beforeUpload" :on-success="handleAvatarSuccessAnnex"
- :file-list="fileList" :auto-upload="autoUpload">
- <el-button slot="trigger" size="small" type="primary">Select the file</el-button>
- </el-upload>
- </el-form-item>
- </el-form>
- <div slot="footer" class="dialog-footer">
- <el-button @click="cancel">Take away</el-button>
- <el-button type="primary" @click="toReady()">Determine</el-button>
- </div>
- </el-dialog>
- </div>
- <div class="ui-right">
- <div style="margin-top: 20px;margin-left: 10px;">
- <div class="relevanInformation">
- <div class="informationTitle informationTitleAfter">
- <!-- <img src="@/assets/img/cooperationExchange/20200608_03.gif" alt=""
- style="height: 20px;vertical-align: middle;"> -->
- {{ $t('common.LookBackAt') }}
- </div>
- <ul class="user-out" v-infinite-scroll="load" style="overflow:auto">
- <li v-for="(item, index) in historyInfo" :key="index" @click="toDetail(item)"
- class="list-infos">· {{ item.name }}</li>
- </ul>
- </div>
- </div>
- <div style="margin-top: 20px;margin-left: 10px;">
- <div class="relevanInformation">
- <div class="informationTitle informationTitleAfter">
- <!-- <img src="@/assets/img/cooperationExchange/20200608_03.gif" alt=""
- style="height: 20px;vertical-align: middle;"> -->
- {{ $t('common.ContactInformations') }}
- </div>
- <div>
- <ul class="user-out">
- <li class="user-list-info">
- <div class="user-list-pic">
- <img src="@/assets/img/exhibition/who.png" alt="" class="user-list-pic-info">
- <i>Contacts:</i>
- </div>
- <div class="user-info-d">{{ listDetail.contactMen }}</div>
- </li>
- <li class="user-list-info">
- <div class="user-list-pic">
- <img src="@/assets/img/exhibition/24gl-phoneBubble.png" alt=""
- class="user-list-pic-info">
- <i>Telephone:</i>
- </div>
- <div class="user-info-d">{{ listDetail.contactPhone }}</div>
- </li>
- <li class="user-list-info">
- <div class="user-list-pic">
- <img src="@/assets/img/exhibition/email.png" alt="" class="user-list-pic-info">
- <i>E-mail:</i>
- </div>
- <div class="user-info-d">{{ listDetail.email }}</div>
- </li>
- <li class="user-list-info">
- <div class="user-list-pic">
- <img src="@/assets/img/exhibition/QQ.png" alt="" class="user-list-pic-info">
- <i>QQ:</i>
- </div>
- <div class="user-info-d">{{ listDetail.qq }}</div>
- </li>
- </ul>
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
- </template>
- <script>
- import { ConventionRegistration } from "@/api/exhibition"
- import { getToken } from "@/utils/auth";
- import { getTokens } from '@/api/token'
- import { ExhibitionListsDetail } from '@/api/exhibition'
- import moment from "moment";
- export default {
- name: "exhibitionServiceDetailInfo",
- data() {
- return {
- dialogFormVisible: false,
- dynamicValidateForm: {
- unitName: '',
- contact: '',
- mobile: '',
- email: '',
- radio: '',
- advisoryDetails: '',
- },
- formLabelWidth: '150px',
- fileList: [],
- typeNum: null,
- limit: 1,
- fileInfo: {},
- autoUpload: true,
- myHeaders: { Authorization: "Bearer " + getToken() },
- detailId: null,
- three1: null,
- listDetail: {},
- historyInfo: [],
- yunShang: true,
- logNum: null,
- flag: false,
- destroyOnClose: true,
- // flagShe: false,
- }
- },
- watch: {
- '$i18n.locale'() {
- this.initData();
- },
- },
- beforeDestroy() {
- // window.onbeforeunload = function (e) {
- // var storage = window.sessionStorage;
- // storage.clear()
- // }
- // sessionStorage.removeItem('hzfw-params');
- // sessionStorage.removeItem('hzfw-query')
- },
- mounted() {
- // 缓存不存在
- if (sessionStorage.getItem('hzfw-params') == null) {
- // 原始进入方式
- let params1 = this.$route.params
- this.detailId = params1.id
- this.three1 = params1.three1
- sessionStorage.setItem('hzfw-params', JSON.stringify(params1))
- } else if (sessionStorage.getItem('hzfw-params') != null) {
- // 缓存存在 详情跳转的地方
- // 点击详情进来会保存在这里
- let params2 = JSON.parse(sessionStorage.getItem('hzfw-params'))
- if (this.$route.params.id && (params2.id != this.$route.params.id)) {
- params2 = this.$route.params
- sessionStorage.setItem('hzfw-params', JSON.stringify(params2))
- }
- this.detailId = params2.id
- this.three1 = params2.three1
- }
- // 缓存不存在
- let query3 = this.$route.query
- let num = query3.num
- if (num == 1) {
- // 点击往期回顾
- let query1 = this.$route.query
- this.detailId = query1.id
- this.three1 = query1.three1
- sessionStorage.setItem('hzfw-query', JSON.stringify(query1))
- } else {
- if (sessionStorage.getItem('hzfw-query') != null) {
- let params2 = JSON.parse(sessionStorage.getItem('hzfw-query'))
- this.detailId = params2.id
- this.three1 = params2.three1
- }
- }
- this.initData()
- },
- filters: {
- twoDecimal(value) {
- return parseFloat(String(value)).toFixed(2)
- },
- time(data, type) {
- return moment(data).format(type)
- }
- },
- methods: {
- toJoin(time) {
- console.log(time);
- let user = window.sessionStorage.getItem("user");
- if (!this.$Cookies.get('token')) {
- if (this.$i18n.locale.toUpperCase() == "ZH") {
- this.$message.error("未登录用户无法报名");
- } else {
- this.$message.error('Users who are not logged in cannot sign up')
- }
- this.logNum = 1
- let logNums = sessionStorage.setItem('num', this.logNum)
- // this.$confirm('检测到您未登录,是否登录')
- // .then(_ => {
- // this.toView('login');
- // })
- // .catch(_ => {});
- // this.toViewLogin = true;
- } else {
- if (time != '已结束') {
- if (this.$Cookies.get('token')) {
- this.dialogFormVisible = true
- } else {
- if (this.$i18n.locale.toUpperCase() == "ZH") {
- this.$message('请登录')
- } else {
- this.$message('Please log in')
- }
- }
- } else {
- if (this.$i18n.locale.toUpperCase() == "ZH") {
- this.$message('活动已结束')
- } else {
- this.$message('The event is over')
- }
- }
- }
- },
- initData() {
- let id = this.detailId
- let three1 = this.three1
- let param = {
- id: three1,
- language: this.$i18n.locale.toUpperCase(),
- }
- // console.log(three1, 'three1');
- ExhibitionListsDetail(param).then((res) => {
- console.log(res);
- this.listDetail = res.data.exhibitionManagementLists[0]
- this.historyInfo = res.data.historyDate
- this.detailId = this.listDetail.id
- // if (res.data.historyDate) {
- // this.flagShe = false
- // }
- // this.listNum=res.data.historyDate.length
- if (this.listDetail.exhibitionHallUrl) {
- this.yunShang = true
- } else {
- this.yunShang = false
- }
- })
- },
- toDetail(item) {
- // console.log(id);
- let picId = item.id
- let three1 = item.extendThree
- console.log(picId);
- this.$router.push({
- name: 'exhibitionServiceDetail', params: {
- id: picId,
- three1: three1
- }
- });
- // const { href } = this.$router.resolve({
- // name: 'exhibitionServiceDetails',
- // query: {
- // id: picId,
- // three1: three1,
- // num: 1
- // }
- // });
- // sessionStorage.removeItem('hzfw-query')
- // window.open(href, '_blank')
- },
- toTop(url) {
- window.open(url);
- },
- aboutInfo() {
- this.$router.push('conferenceServices')
- },
- cancel() {
- console.log();
- this.dialogFormVisible = false
- },
- toReady() {
- this.$refs.upload.clearFiles()
- console.log(this.fileInfo);
- this.$refs.dynamicValidateForm.validate((valid) => {
- if (valid) {
- // alert('submit!');
- if (this.dynamicValidateForm.radio == "参展商") {
- this.typeNum = 0
- } else {
- this.typeNum = 1
- }
- if (this.fileInfo.data) {
- let exhibitionApply = {
- unitName: this.dynamicValidateForm.unitName,
- contact: this.dynamicValidateForm.contact,
- mobile: this.dynamicValidateForm.mobile,
- email: this.dynamicValidateForm.email,
- type: this.typeNum,
- fileId: this.fileInfo.data.attachmentId,
- fileUrl: this.fileInfo.data.path,
- advisoryDetails:this.dynamicValidateForm.advisoryDetails,
- exhibitionId: this.detailId,
- extend1: this.listDetail.extendThree,
- extend2: this.$i18n.locale.toUpperCase()
- }
- console.log(exhibitionApply, '传给后台的参数');
- getTokens().then((res) => {
- ConventionRegistration(JSON.stringify(exhibitionApply), res.data).then((res) => {
- if (this.$i18n.locale.toUpperCase() == "ZH") {
- this.$message.success('报名成功')
- } else {
- this.$message.success('Registration success')
- }
- }).catch((error) => {
- if (this.$i18n.locale.toUpperCase() == "ZH") {
- this.$message.error('报名失败')
- } else {
- this.$message.success('Registration failed')
- }
- })
- })
- this.dialogFormVisible = false
- this.$refs.dynamicValidateForm.resetFields()
- } else {
- let exhibitionApply = {
- unitName: this.dynamicValidateForm.unitName,
- contact: this.dynamicValidateForm.contact,
- mobile: this.dynamicValidateForm.mobile,
- email: this.dynamicValidateForm.email,
- advisoryDetails:this.dynamicValidateForm.advisoryDetails,
- type: this.typeNum,
- exhibitionId: this.detailId,
- extend1: this.listDetail.extendThree,
- extend2: this.$i18n.locale.toUpperCase()
- }
- console.log(exhibitionApply, '传给后台的参数');
- getTokens().then((res) => {
- ConventionRegistration(JSON.stringify(exhibitionApply), res.data).then((res) => {
- if (this.$i18n.locale.toUpperCase() == "ZH") {
- this.$message.success('报名成功')
- } else {
- this.$message.success('Registration success')
- }
- }).catch((error) => {
- if (this.$i18n.locale.toUpperCase() == "ZH") {
- this.$message.error('报名失败')
- } else {
- this.$message.success('Registration failed')
- }
- })
- })
- this.dialogFormVisible = false
- this.$refs.dynamicValidateForm.resetFields()
- }
- } else {
- console.log('error submit!!');
- return false;
- }
- });
- },
- handleRemove(file, fileList) {
- this.files.forEach((i) => {
- if (i == file.uid) {
- var index = this.files.indexOf(i);
- this.files.splice(index, 1);
- }
- });
- },
- onExceed(files, fileList) {
- console.log(files, fileList);
- if (this.$i18n.locale.toUpperCase() == "ZH") {
- this.$message.error('最多上传一个附件')
- } else {
- this.$message.error('A maximum of one attachment can be uploaded')
- }
- },
- handleAvatarSuccessAnnex(res, file) {
- console.log(res);
- this.fileInfo = res
- console.log(this.fileInfo);
- // this.files.push(res.data.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!",
- });
- }
- this.fileList.splice(this.fileList.indexOf(file), 1);
- return false;
- }
- this.isLt2k = file.size / 1024 / 1024 < 2 ? "1" : "0";
- if (this.isLt2k === "0") {
- if (this.$i18n.locale.toUpperCase() == "ZH") {
- this.$message({
- message: "上传文件大小不能超过2M!",
- type: "error",
- });
- } else {
- this.$message({
- message: "Upload file size cannot exceed 2m!",
- type: "error",
- });
- }
- this.fileList.splice(this.fileList.indexOf(file), 1);
- return false;
- }
- },
- }
- }
- </script>
- <style lang="less" scoped>
- .box {
- margin-top: 10px;
- background: #fff;
- /* height: 500px; */
- padding: 20px 0;
- .crumbs {
- margin-left: 20px;
- }
- }
- .user-info {
- margin-top: 20px;
- }
- .ui-body {
- padding: 30px 12px;
- display: flex;
- justify-content: space-between;
- .ui-left {
- width: 63%;
- position: relative;
- h3 {
- display: inline-block;
- width: 90%;
- margin-left: 5%;
- text-align: center;
- overflow: hidden;
- white-space: nowrap;
- text-overflow: ellipsis;
- }
- .ui-infos {
- width: 100%;
- height: 240px;
- background-image: url('~@/assets/img/exhibition/Group 98.png');
- border: 1px solid #d8d6d6;
- background-size: 100% 100%;
- .ui-uls {
- width: 100%;
- height: 200px;
- padding: 20px 20px;
- .ui-ul-li {
- display: flex;
- height: 40px;
- width: 100%;
- .ui-li-left {
- width: 50%;
- height: 40px;
- display: flex;
- }
- .ui-li-right {
- width: 50%;
- height: 40px;
- display: flex;
- }
- .ui-info-left {
- width: 40%;
- height: 40px;
- line-height: 40px;
- font-size: 15px;
- color: rgb(0, 0, 0);
- text-align: center;
- }
- .ui-info-right {
- font-size: 15px;
- height: 40px;
- width: 60%;
- line-height: 40px;
- color: rgb(52, 194, 250);
- overflow: hidden;
- white-space: nowrap;
- text-overflow: ellipsis;
- }
- .ui-info-rights {
- font-size: 15px;
- height: 40px;
- width: 50%;
- line-height: 40px;
- color: rgb(52, 194, 250);
- overflow: hidden;
- white-space: nowrap;
- text-overflow: ellipsis;
- }
- }
- .ui-ul-info {
- width: 100%;
- height: 40px;
- display: flex;
- .ui-info-left {
- width: 20%;
- height: 40px;
- font-size: 15px;
- line-height: 40px;
- color: rgb(0, 0, 0);
- text-align: center;
- }
- .ui-info-right {
- height: 40px;
- width: 30%;
- line-height: 40px;
- color: rgb(52, 194, 250);
- overflow: hidden;
- white-space: nowrap;
- text-overflow: ellipsis;
- }
- }
- }
- }
- .user-btn {
- position: absolute;
- top: 220px;
- left: 510px;
- }
- .to-user-detail {
- margin-top: 50px;
- span {
- height: 30px;
- line-height: 30px;
- color: rgb(21, 138, 247);
- border-bottom: 1px solid rgb(21, 138, 247);
- cursor: pointer;
- }
- }
- }
- .ui-right {
- width: 33%;
- .relevanInformation {
- padding: 0;
- overflow: hidden;
- .informationTitle {
- border-bottom: 1px solid #2C558A;
- padding: 0 0 10px 0;
- font-weight: 600;
- font-size: 20px;
- opacity: 0.9;
- }
- .informationTitleAfter {
- position: relative;
- }
- }
- .user-out {
- margin-top: 10px;
- height: 235px;
- overflow: hidden;
- width: 100%;
- .list-infos {
- height: 45px;
- line-height: 45px;
- padding: 0 20px;
- margin-bottom: 5px;
- border-bottom: 1px solid rgb(219, 216, 216);
- cursor: pointer;
- overflow: hidden;
- white-space: nowrap;
- text-overflow: ellipsis;
- }
- }
- }
- }
- // li::before {
- // content: "";
- // display: inline-block;
- // width: 5px;
- // height: 5px;
- // line-height: 5px;
- // background-color: skyblue;
- // border-radius: 50%;
- // margin-right: 5px;
- // }
- .user-list-info {
- display: flex;
- height: 40px;
- line-height: 40px;
- margin-bottom: 5px;
- padding: 0 5px;
- .user-list-pic {
- width: 120px;
- i {
- font-style: normal;
- display: inline-block;
- transform: translateY(-14px);
- }
- .user-list-pic-info {
- width: 20px;
- height: 20px;
- padding: 10px 5px;
- }
- }
- .user-info-d {
- width: 240px;
- height: 40px;
- line-height: 40px;
- // background-color: red;
- overflow: hidden;
- white-space: nowrap;
- text-overflow: ellipsis;
- }
- }
- </style>
|