990 lines
32 KiB
Vue
990 lines
32 KiB
Vue
<template>
|
|
<div class="part-building">
|
|
<div style="height:104rem;"></div>
|
|
<div class="screen1">
|
|
<img
|
|
:src="screen1.bannerUrl"
|
|
alt=""
|
|
style="width:100%;"
|
|
/>
|
|
</div>
|
|
<div class="screen11">
|
|
<div class="wrapper1680">
|
|
<div class="list-wrapper">
|
|
<div
|
|
v-for="(item, index) in screen1.Partner"
|
|
:key="'itemkey' + index"
|
|
class="list-item"
|
|
>
|
|
<transition name="scale">
|
|
<div
|
|
class="list-img"
|
|
:style="`--tde:${0.6 + index * 0.05}s;`"
|
|
>
|
|
<img
|
|
:src="item.imageurl"
|
|
alt=""
|
|
>
|
|
</div>
|
|
</transition>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="screen2">
|
|
<div class="wrapper1680">
|
|
<div class="formContent">
|
|
<div class="formBarContent">
|
|
<div class="formBar"></div>
|
|
<div class="formTitle">
|
|
成为合作伙伴
|
|
</div>
|
|
</div>
|
|
<el-form
|
|
ref="Partnerform"
|
|
:model="form1"
|
|
:rules="form1Rules"
|
|
label-width="130rem"
|
|
style="margin-top: 40rem"
|
|
>
|
|
<div class="formBarContent">
|
|
<el-row>
|
|
<el-col :span="6">
|
|
<el-form-item label="公司名称(个人)" prop="companyName">
|
|
<el-input v-model="form1.companyName" />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<el-form-item label="地址" prop="address">
|
|
<el-input v-model="form1.address" />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<el-form-item label="联系电话" prop="phoneNumber">
|
|
<el-input v-model="form1.phoneNumber" />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<el-form-item label="电子邮箱" prop="email">
|
|
<el-input v-model="form1.email" />
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
<el-form-item label="擅长方向">
|
|
<el-checkbox-group v-model="form1.fieldType">
|
|
<el-checkbox
|
|
v-for="(item, index) in excelInList"
|
|
:key="'excelIn' + index"
|
|
:label="item.label"
|
|
:value="item.value"
|
|
/>
|
|
</el-checkbox-group>
|
|
</el-form-item>
|
|
<el-row>
|
|
<el-col :span="12">
|
|
<el-form-item label="优势概念">
|
|
<el-input
|
|
v-model="form1.advantageConcept"
|
|
:autosize="{ minRows: 6, maxRows: 6 }"
|
|
type="textarea"
|
|
/>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<el-form-item label="合作意向概述">
|
|
<el-input
|
|
v-model="form1.cooperationIntention"
|
|
:autosize="{ minRows: 6, maxRows: 6 }"
|
|
type="textarea"
|
|
/>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
<el-form-item label="附件">
|
|
<div class="upload-file">
|
|
<el-upload
|
|
multiple
|
|
:action="uploadFileUrl"
|
|
:before-upload="handleBeforeUpload"
|
|
:file-list="fileList"
|
|
:limit="limit"
|
|
:on-error="handleUploadError"
|
|
:on-exceed="handleExceed"
|
|
:on-success="handleUploadSuccess"
|
|
:show-file-list="false"
|
|
class="upload-file-uploader"
|
|
ref="fileUpload"
|
|
>
|
|
<!-- 上传按钮 -->
|
|
<el-button size="small" type="primary">上传</el-button>
|
|
<!-- 上传提示 -->
|
|
<div class="el-upload__tip" slot="tip" v-if="isShowTip">
|
|
请上传
|
|
<template v-if="fileSize"> 大小不超过 <b style="color: #f56c6c">{{ fileSize }}MB</b> </template>
|
|
<template v-if="fileType"> 格式为 <b style="color: #f56c6c">{{ fileType.join("/") }}</b> </template>
|
|
的文件
|
|
</div>
|
|
</el-upload>
|
|
|
|
<!-- 文件列表 -->
|
|
<transition-group class="upload-file-list el-upload-list el-upload-list--text" name="el-fade-in-linear" tag="ul">
|
|
<li :key="file.url" class="el-upload-list__item ele-upload-list__item-content" v-for="(file, index) in fileList">
|
|
<el-link :href="`${file.url}`" :underline="false" target="_blank">
|
|
<span class="el-icon-document"> {{ getFileName(file.name) }} </span>
|
|
</el-link>
|
|
<div class="ele-upload-list__item-content-action">
|
|
<el-link :underline="false" @click="handleDelete(index)" type="danger">删除</el-link>
|
|
</div>
|
|
</li>
|
|
</transition-group>
|
|
</div>
|
|
</el-form-item>
|
|
</div>
|
|
<el-form-item style="text-align: center;border-top:1rem solid #B0B0B0;padding: 20rem 0rem">
|
|
<el-button class="subBtn" @click="handleAddPartner">
|
|
提交
|
|
</el-button>
|
|
</el-form-item>
|
|
</el-form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="screen3">
|
|
<div class="wrapper1680">
|
|
<div class="formContent">
|
|
<div class="formBarContent">
|
|
<div class="formBar"></div>
|
|
<div class="formTitle">
|
|
成为供应商
|
|
</div>
|
|
</div>
|
|
<el-form
|
|
:model="form"
|
|
:rules="formRules"
|
|
ref="Supperform"
|
|
label-width="140rem"
|
|
style="margin-top: 40rem"
|
|
>
|
|
<div class="formBarContent">
|
|
<el-row>
|
|
<el-col :span="6">
|
|
<el-form-item label="公司名称" prop="companyName">
|
|
<el-input v-model="form.companyName" />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<el-form-item label="公司地址" prop="address">
|
|
<el-input v-model="form.address" />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<el-form-item label="统一社会信用代码" prop="identifierCode">
|
|
<el-input v-model="form.identifierCode" />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<el-form-item label="电子邮箱" prop="email">
|
|
<el-input v-model="form.email" />
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row>
|
|
<el-col :span="12">
|
|
<el-form-item label="企业性质">
|
|
<el-checkbox-group :max="1" v-model="form.businessNature">
|
|
<el-checkbox
|
|
v-for="(item, index) in enterprisePropertyList"
|
|
:key="'enterpriseProperty' + index"
|
|
:label="item.label"
|
|
:value="item.value"
|
|
/>
|
|
</el-checkbox-group>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<el-form-item label="行业领域">
|
|
<el-input v-model="form.fieldIndustry" />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<el-form-item label="主要产品">
|
|
<el-input v-model="form.mainProducts" />
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row>
|
|
<el-col :span="6">
|
|
<el-form-item label="联系电话" prop="phoneNumber">
|
|
<el-input v-model="form.phoneNumber" />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<el-form-item label="网址" >
|
|
<el-input v-model="form.webAddress" />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<el-form-item label="设计开发能力">
|
|
<el-checkbox-group v-model="form.developmentCapability">
|
|
<el-checkbox
|
|
v-for="(item, index) in designCapabilityList"
|
|
:key="'designCapability' + index"
|
|
:label="item.label"
|
|
:value="item.value"
|
|
/>
|
|
</el-checkbox-group>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row>
|
|
<el-col :span="12">
|
|
<el-form-item label="遵守标准">
|
|
<el-checkbox-group v-model="form.complianceStandards">
|
|
<el-checkbox
|
|
v-for="(item, index) in standardsList"
|
|
:key="'standards' + index"
|
|
:label="item.label"
|
|
:value="item.value"
|
|
/>
|
|
</el-checkbox-group>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="7">
|
|
<el-form-item label="产品已获得的认证">
|
|
<el-checkbox-group :max="1" v-model="form.productCertification">
|
|
<el-checkbox
|
|
v-for="(item, index) in authenticationList"
|
|
:key="'authentication' + index"
|
|
:label="item.label"
|
|
:value="item.value"
|
|
/>
|
|
</el-checkbox-group>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="5">
|
|
<el-form-item label="" label-width="0rem">
|
|
<el-input v-show="form.productCertification[0] == '其他说明'" v-model="form.otherNotes" placeholder="请输入其他说明" />
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
<el-form-item label="质量体系情况">
|
|
<el-checkbox-group v-model="form.qualitySystem">
|
|
<el-checkbox
|
|
v-for="(item, index) in qualitySystemList"
|
|
:key="'qualitySystem' + index"
|
|
:label="item.label"
|
|
:value="item.value"
|
|
/>
|
|
</el-checkbox-group>
|
|
</el-form-item>
|
|
<el-form-item label="是否具备相关资质">
|
|
<el-checkbox-group v-model="form.relevantQualifications">
|
|
<el-checkbox
|
|
v-for="(item, index) in relevantQualificationList"
|
|
:key="'relevantQualification' + index"
|
|
:label="item.label"
|
|
:value="item.value"
|
|
/>
|
|
</el-checkbox-group>
|
|
</el-form-item>
|
|
<el-row>
|
|
<el-col :span="12">
|
|
<el-form-item label="优势概念">
|
|
<el-input
|
|
v-model="form.advantageConcept"
|
|
:autosize="{ minRows: 6, maxRows: 6 }"
|
|
type="textarea"
|
|
/>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<el-form-item label="合作意向概述">
|
|
<el-input
|
|
v-model="form.cooperationIntention"
|
|
:autosize="{ minRows: 6, maxRows: 6 }"
|
|
type="textarea"
|
|
/>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
<el-form-item label="附件">
|
|
<div class="upload-file">
|
|
<el-upload
|
|
multiple
|
|
:action="uploadFileUrl"
|
|
:before-upload="handleBeforeUpload1"
|
|
:file-list="fileList1"
|
|
:limit="limit"
|
|
:on-error="handleUploadError1"
|
|
:on-exceed="handleExceed1"
|
|
:on-success="handleUploadSuccess1"
|
|
:show-file-list="false"
|
|
class="upload-file-uploader"
|
|
ref="fileUpload1"
|
|
>
|
|
<!-- 上传按钮 -->
|
|
<el-button size="small" type="primary">上传</el-button>
|
|
<!-- 上传提示 -->
|
|
<div class="el-upload__tip" slot="tip" v-if="isShowTip">
|
|
请上传
|
|
<template v-if="fileSize"> 大小不超过 <b style="color: #f56c6c">{{ fileSize }}MB</b> </template>
|
|
<template v-if="fileType"> 格式为 <b style="color: #f56c6c">{{ fileType.join("/") }}</b> </template>
|
|
的文件
|
|
</div>
|
|
</el-upload>
|
|
|
|
<!-- 文件列表 -->
|
|
<transition-group class="upload-file-list el-upload-list el-upload-list--text" name="el-fade-in-linear" tag="ul">
|
|
<li :key="file.url" class="el-upload-list__item ele-upload-list__item-content" v-for="(file, index) in fileList1">
|
|
<el-link :href="`${file.url}`" :underline="false" target="_blank">
|
|
<span class="el-icon-document"> {{ getFileName(file.name) }} </span>
|
|
</el-link>
|
|
<div class="ele-upload-list__item-content-action">
|
|
<el-link :underline="false" @click="handleDelete1(index)" type="danger">删除</el-link>
|
|
</div>
|
|
</li>
|
|
</transition-group>
|
|
</div>
|
|
</el-form-item>
|
|
</div>
|
|
<el-form-item style="text-align: center;border-top:1rem solid #B0B0B0;padding: 20rem 0rem">
|
|
<el-button class="subBtn" @click="handleAddSupper">
|
|
提交
|
|
</el-button>
|
|
</el-form-item>
|
|
</el-form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<FootBar theme="dark"></FootBar>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { mapState } from 'vuex';
|
|
import FootBar from '@/components/FootBar.vue';
|
|
|
|
export default {
|
|
components: {
|
|
FootBar,
|
|
},
|
|
data () {
|
|
return {
|
|
screen1: {
|
|
bannerUrl: '',
|
|
Partner: [],
|
|
},
|
|
fileList1: [],
|
|
fileList2: [],
|
|
excelInList: [
|
|
{ label: '项目合作', value: '项目合作' },
|
|
{ label: '人脉资源', value: '人脉资源' },
|
|
{ label: '创新技术', value: '创新技术' },
|
|
{ label: '法律咨询', value: '法律咨询' },
|
|
{ label: '投融资', value: '投融资' },
|
|
{ label: '行业经验', value: '行业经验' },
|
|
{ label: '产品', value: '产品' },
|
|
{ label: '资质优势', value: '资质优势' },
|
|
],
|
|
enterprisePropertyList: [
|
|
{ label: '国营', value: '国营' },
|
|
{ label: '私营', value: '私营' },
|
|
{ label: '合资', value: '合资' },
|
|
{ label: '其他', value: '其他' },
|
|
],
|
|
designCapabilityList: [
|
|
{ label: '自主设计开发', value: '自主设计开发' },
|
|
{ label: '来料加工', value: '来料加工' },
|
|
{ label: '贸易代理', value: '贸易代理' },
|
|
],
|
|
standardsList: [
|
|
{ label: '国际标准', value: '国际标准' },
|
|
{ label: '国家标准', value: '国家标准' },
|
|
{ label: '行业标准', value: '行业标准' },
|
|
{ label: '企业标准', value: '企业标准' },
|
|
],
|
|
authenticationList: [
|
|
{ label: '3C', value: '3C' },
|
|
{ label: 'ROHS', value: 'ROHS' },
|
|
{ label: '其他说明', value: '其他说明' },
|
|
],
|
|
qualitySystemList: [
|
|
{ label: 'IS09001', value: 'IS09001' },
|
|
{ label: 'ISO14001', value: 'ISO14001' },
|
|
{ label: 'ISO27001', value: 'ISO27001' },
|
|
{ label: 'QS9000', value: 'QS9000' },
|
|
{ label: 'TS16849', value: 'TS16849' },
|
|
],
|
|
relevantQualificationList: [
|
|
{ label: '专利', value: '专利' },
|
|
{ label: '软件著作权', value: '软件著作权' },
|
|
{ label: '食品生产许可证', value: '食品生产许可证' },
|
|
{ label: '食品经营许可证', value: '食品经营许可证' },
|
|
{ label: '其他证书', value: '其他证书' },
|
|
],
|
|
form1Rules: {
|
|
companyName: [
|
|
{ required: true, message: '请输入公司名称(个人)', trigger: 'blur' },
|
|
],
|
|
address: [
|
|
{ required: true, message: '请输入地址', trigger: 'blur' },
|
|
],
|
|
phoneNumber: [
|
|
{ required: true, message: '请输入联系电话', trigger: 'blur' },
|
|
{
|
|
validator: function (rule, value, callback) {
|
|
const reg = /^1[3456789]\d{9}$/;
|
|
if (!reg.test(value)) {
|
|
callback(new Error('请输入手机号'));
|
|
} else {
|
|
callback();
|
|
}
|
|
},
|
|
trigger: 'blur',
|
|
},
|
|
],
|
|
email: [
|
|
{ required: true, message: '请输入电子邮箱', trigger: 'blur' },
|
|
{
|
|
validator: function (rule, value, callback) {
|
|
const reg3 = /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
|
|
if (!reg3.test(value)) {
|
|
callback(new Error('请输入邮箱'));
|
|
} else {
|
|
callback();
|
|
}
|
|
},
|
|
trigger: 'blur',
|
|
},
|
|
],
|
|
},
|
|
form1: {
|
|
propertiesType: 1,
|
|
companyName: '',
|
|
address: '',
|
|
phoneNumber: '',
|
|
email: '',
|
|
fieldType: [],
|
|
advantageConcept: '',
|
|
cooperationIntention: '',
|
|
imageurl: ''
|
|
},
|
|
formRules: {
|
|
companyName: [
|
|
{ required: true, message: '请输入公司名称', trigger: 'blur' },
|
|
],
|
|
address: [
|
|
{ required: true, message: '请输入地址', trigger: 'blur' },
|
|
],
|
|
identifierCode: [
|
|
{ required: true, message: '请输入统一社会信用代码', trigger: 'blur' },
|
|
{
|
|
validator: function (rule, value, callback) {
|
|
const reg = /^[0-9A-HJ-NPQRTUWXY]{2}\d{6}[0-9A-HJ-NPQRTUWXY]{10}$/;
|
|
if (!reg.test(value)) {
|
|
callback(new Error('请输入统一社会信用代码'));
|
|
} else {
|
|
callback();
|
|
}
|
|
},
|
|
trigger: 'blur',
|
|
},
|
|
],
|
|
phoneNumber: [
|
|
{ required: true, message: '请输入联系电话', trigger: 'blur' },
|
|
{
|
|
validator: function (rule, value, callback) {
|
|
const reg = /^1[3456789]\d{9}$/;
|
|
if (!reg.test(value)) {
|
|
callback(new Error('请输入手机号'));
|
|
} else {
|
|
callback();
|
|
}
|
|
},
|
|
trigger: 'blur',
|
|
},
|
|
],
|
|
email: [
|
|
{ required: true, message: '请输入电子邮箱', trigger: 'blur' },
|
|
{
|
|
validator: function (rule, value, callback) {
|
|
const reg3 = /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
|
|
if (!reg3.test(value)) {
|
|
callback(new Error('请输入邮箱'));
|
|
} else {
|
|
callback();
|
|
}
|
|
},
|
|
trigger: 'blur',
|
|
},
|
|
]
|
|
},
|
|
form: {
|
|
propertiesType: 2,
|
|
companyName: '',
|
|
address: '',
|
|
identifierCode: '',
|
|
email: '',
|
|
businessNature: [],
|
|
fieldIndustry: '',
|
|
mainProducts: '',
|
|
phoneNumber: '',
|
|
webAddress: '',
|
|
developmentCapability: [],
|
|
complianceStandards: [],
|
|
productCertification: [],
|
|
otherNotes: '',
|
|
qualitySystem: [],
|
|
relevantQualifications: [],
|
|
advantageConcept: '',
|
|
cooperationIntention: '',
|
|
imageurl: ''
|
|
},
|
|
// 数量限制
|
|
limit: 10,
|
|
// 大小限制(MB)
|
|
fileSize: 10,
|
|
// 文件类型, 例如['png', 'jpg', 'jpeg']
|
|
fileType: ["doc", "docx", "xls","xlsx", "ppt","pptx", "txt", "pdf"],
|
|
// 是否显示提示
|
|
isShowTip: true,
|
|
number: 0,
|
|
uploadList: [],
|
|
uploadList1: [],
|
|
// 上传文件服务器地址
|
|
uploadFileUrl: process.env.VUE_APP_API_TARGET_URL + "system/oss/addFilesUpload",
|
|
fileList: [],
|
|
fileList1: [],
|
|
loadingModal: undefined,
|
|
};
|
|
},
|
|
computed: {
|
|
...mapState({
|
|
scrollTop: state => state.scroll.scrollTop,
|
|
webScale: state => state.web.scale,
|
|
}),
|
|
},
|
|
created () {
|
|
this.$event.$emit('nav-theme', 'light');
|
|
this.getScreen1Banner();
|
|
this.getScreen1Partner();
|
|
},
|
|
methods: {
|
|
async getScreen1Banner () {
|
|
try {
|
|
const res = await this.$request.get(
|
|
'/official/index/list',
|
|
{ params: { pageNum: 1, pageSize: 1, captionName: '投资与合作/合作伙伴/banner' } },
|
|
);
|
|
this.screen1.bannerUrl = res.rows[0].imageurl;
|
|
} catch (error) {}
|
|
},
|
|
async getScreen1Partner () {
|
|
try {
|
|
const res = await this.$request.get(
|
|
'/official/index/list',
|
|
{ params: { pageNum: 1, pageSize: 10, captionName: '投资与合作/合作伙伴/合伙人' } },
|
|
);
|
|
this.screen1.Partner = res.rows.sort((a, b) => a.orders - b.orders);
|
|
} catch (error) {}
|
|
},
|
|
handleAddPartner() {
|
|
try {
|
|
this.$refs["Partnerform"].validate(valid => {
|
|
if (valid) {
|
|
this.form1.fieldType = this.form1.fieldType.toString();
|
|
this.form1.imageurl = this.fileList.map(item => item.url).toString();
|
|
this.$request.post(
|
|
'/official/companymessage/add',
|
|
this.form1,
|
|
).then(res => {
|
|
if(res.code == 200) {
|
|
this.form1= {
|
|
propertiesType: 1,
|
|
companyName: '',
|
|
address: '',
|
|
phoneNumber: '',
|
|
email: '',
|
|
fieldType: [],
|
|
advantageConcept: '',
|
|
cooperationIntention: '',
|
|
imageurl: ''
|
|
}
|
|
this.fileList = []
|
|
}
|
|
});
|
|
}
|
|
});
|
|
} catch (error) {}
|
|
},
|
|
handleAddSupper() {
|
|
try {
|
|
this.$refs["Supperform"].validate(valid => {
|
|
if (valid) {
|
|
this.form.businessNature = this.form.businessNature.toString();
|
|
this.form.developmentCapability = this.form.developmentCapability.toString();
|
|
this.form.complianceStandards = this.form.complianceStandards.toString();
|
|
this.form.productCertification = this.form.productCertification.toString();
|
|
this.form.qualitySystem = this.form.qualitySystem.toString();
|
|
this.form.relevantQualifications = this.form.relevantQualifications.toString();
|
|
this.form.imageurl = this.fileList1.map(item => item.url).toString()
|
|
this.$request.post(
|
|
'/official/companymessage/add',
|
|
this.form,
|
|
).then(res => {
|
|
if(res.code == 200) {
|
|
this.form= {
|
|
propertiesType: 2,
|
|
companyName: '',
|
|
address: '',
|
|
identifierCode: '',
|
|
email: '',
|
|
businessNature: [],
|
|
fieldIndustry: '',
|
|
mainProducts: '',
|
|
phoneNumber: '',
|
|
webAddress: '',
|
|
developmentCapability: [],
|
|
complianceStandards: [],
|
|
productCertification: [],
|
|
otherNotes: '',
|
|
qualitySystem: [],
|
|
relevantQualifications: [],
|
|
advantageConcept: '',
|
|
cooperationIntention: '',
|
|
imageurl: ''
|
|
}
|
|
this.fileList1 = []
|
|
}
|
|
});
|
|
}
|
|
});
|
|
} catch (error) {}
|
|
},
|
|
// 上传前校检格式和大小
|
|
handleBeforeUpload(file) {
|
|
// 校检文件类型
|
|
if (this.fileType) {
|
|
const fileName = file.name.split('.');
|
|
const fileExt = fileName[fileName.length - 1];
|
|
const isTypeOk = this.fileType.indexOf(fileExt) >= 0;
|
|
if (!isTypeOk) {
|
|
this.$message.error(`文件格式不正确, 请上传${this.fileType.join("/")}格式文件!`);
|
|
return false;
|
|
}
|
|
}
|
|
// 校检文件大小
|
|
if (this.fileSize) {
|
|
const isLt = file.size / 1024 / 1024 < this.fileSize;
|
|
if (!isLt) {
|
|
this.$message.error(`上传文件大小不能超过 ${this.fileSize} MB!`);
|
|
return false;
|
|
}
|
|
}
|
|
this.loadingModal = this.$loading({
|
|
lock: true,
|
|
text: '正在上传文件，请稍候...',
|
|
spinner: 'el-icon-loading',
|
|
background: 'rgba(0, 0, 0, 0.7)'
|
|
});
|
|
this.number++;
|
|
return true;
|
|
},
|
|
// 文件个数超出
|
|
handleExceed() {
|
|
this.$message.error(`上传文件数量不能超过 ${this.limit} 个!`);
|
|
},
|
|
// 上传失败
|
|
handleUploadError(err) {
|
|
this.$message.error(`上传文件失败，请重试`, err);
|
|
this.loadingModal.close();
|
|
},
|
|
// 上传成功回调
|
|
handleUploadSuccess(res, file) {
|
|
if (res.code === 200) {
|
|
this.uploadList.push({ name: res.data.fileName, url: res.data.url, ossId: res.data.ossId });
|
|
this.uploadedSuccessfully();
|
|
} else {
|
|
this.number--;
|
|
this.loadingModal.close();
|
|
this.$message.error(res.msg);
|
|
this.$refs.fileUpload.handleRemove(file);
|
|
this.uploadedSuccessfully();
|
|
}
|
|
},
|
|
// 删除文件
|
|
handleDelete(index) {
|
|
// let ossId = this.fileList[index].ossId;
|
|
// delOss(ossId);
|
|
this.fileList.splice(index, 1);
|
|
},
|
|
// 上传结束处理
|
|
uploadedSuccessfully() {
|
|
if (this.number > 0 && this.uploadList.length === this.number) {
|
|
this.fileList = this.fileList.concat(this.uploadList);
|
|
this.uploadList = [];
|
|
this.number = 0;
|
|
this.loadingModal.close();
|
|
}
|
|
},
|
|
// 获取文件名称
|
|
getFileName(name) {
|
|
// 如果是url那么取最后的名字 如果不是直接返回
|
|
if (name.lastIndexOf("/") > -1) {
|
|
return name.slice(name.lastIndexOf("/") + 1);
|
|
} else {
|
|
return name;
|
|
}
|
|
},
|
|
// 上传前校检格式和大小
|
|
handleBeforeUpload1(file) {
|
|
// 校检文件类型
|
|
if (this.fileType) {
|
|
const fileName = file.name.split('.');
|
|
const fileExt = fileName[fileName.length - 1];
|
|
const isTypeOk = this.fileType.indexOf(fileExt) >= 0;
|
|
if (!isTypeOk) {
|
|
this.$message.error(`文件格式不正确, 请上传${this.fileType.join("/")}格式文件!`);
|
|
return false;
|
|
}
|
|
}
|
|
// 校检文件大小
|
|
if (this.fileSize) {
|
|
const isLt = file.size / 1024 / 1024 < this.fileSize;
|
|
if (!isLt) {
|
|
this.$message.error(`上传文件大小不能超过 ${this.fileSize} MB!`);
|
|
return false;
|
|
}
|
|
}
|
|
this.loadingModal = this.$loading({
|
|
lock: true,
|
|
text: '正在上传文件，请稍候...',
|
|
spinner: 'el-icon-loading',
|
|
background: 'rgba(0, 0, 0, 0.7)'
|
|
});
|
|
this.number++;
|
|
return true;
|
|
},
|
|
// 文件个数超出
|
|
handleExceed1() {
|
|
this.$message.error(`上传文件数量不能超过 ${this.limit} 个!`);
|
|
},
|
|
// 上传失败
|
|
handleUploadError1(err) {
|
|
this.$message.error(`上传文件失败，请重试`, err);
|
|
this.loadingModal.close();
|
|
},
|
|
// 上传成功回调
|
|
handleUploadSuccess1(res, file) {
|
|
if (res.code === 200) {
|
|
this.uploadList1.push({ name: res.data.fileName, url: res.data.url, ossId: res.data.ossId });
|
|
this.uploadedSuccessfully1();
|
|
} else {
|
|
this.number--;
|
|
this.loadingModal.close();
|
|
this.$message.error(res.msg);
|
|
this.$refs.fileUpload1.handleRemove(file);
|
|
this.uploadedSuccessfully1();
|
|
}
|
|
},
|
|
// 删除文件
|
|
handleDelete1(index) {
|
|
this.fileList1.splice(index, 1);
|
|
},
|
|
// 上传结束处理
|
|
uploadedSuccessfully1() {
|
|
if (this.number > 0 && this.uploadList1.length === this.number) {
|
|
this.fileList1 = this.fileList1.concat(this.uploadList1);
|
|
this.uploadList1 = [];
|
|
this.number = 0;
|
|
this.loadingModal.close();
|
|
}
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
.part-building {
|
|
width: 100%;
|
|
}
|
|
.screen11 {
|
|
width: 100%;
|
|
position: absolute;
|
|
top: 0;
|
|
}
|
|
.screen11 .wrapper1680 {
|
|
height: 100%;
|
|
position: relative;
|
|
}
|
|
.screen11 .list-wrapper {
|
|
position: absolute;
|
|
top: 240rem;
|
|
width: 100%;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
padding: 0px 140rem;
|
|
box-sizing: border-box;
|
|
}
|
|
.screen11 .list-item {
|
|
border-radius: 20rem;
|
|
background: #ffffff;
|
|
margin: 0 20rem;
|
|
width: 240rem;
|
|
height: 160rem;
|
|
margin-bottom: 40rem;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
cursor: pointer;
|
|
}
|
|
.screen11 .list-item:hover {
|
|
transform: scale(1.1, 1.1);
|
|
}
|
|
.screen11 .list-img {
|
|
width: 160rem;
|
|
height: 760rem;
|
|
display: contents;
|
|
}
|
|
.screen2 {
|
|
padding: 80rem 120rem;
|
|
background: #F5F5F7;
|
|
}
|
|
.screen2 .wrapper1680 {
|
|
box-sizing: border-box;
|
|
background: #FFFFFF;
|
|
border-radius: 10rem 10rem 10rem 10rem;
|
|
}
|
|
.screen3 {
|
|
padding: 0rem 120rem 80rem;
|
|
background: #F5F5F7;
|
|
}
|
|
.screen3 .wrapper1680 {
|
|
background: #FFFFFF;
|
|
border-radius: 10rem 10rem 10rem 10rem;
|
|
}
|
|
.el-form-item {
|
|
margin-bottom: 22rem !important;
|
|
}
|
|
/deep/.el-form-item__label {
|
|
font-size: 14rem;
|
|
line-height: 40rem;
|
|
padding: 0 12rem 0 0;
|
|
}
|
|
/deep/.el-form-item__content {
|
|
line-height: 40rem;
|
|
font-size: 14rem;
|
|
}
|
|
/deep/.el-input {
|
|
font-size: 14rem;
|
|
}
|
|
/deep/.el-input__inner {
|
|
border-radius: 4rem;
|
|
border: 1rem solid #DCDFE6;
|
|
height: 40rem;
|
|
line-height: 40rem;
|
|
padding: 0 15rem;
|
|
}
|
|
/deep/.el-checkbox {
|
|
font-size: 14rem;
|
|
margin-right: 30rem;
|
|
}
|
|
/deep/.el-checkbox__inner {
|
|
border: 1rem solid #DCDFE6;
|
|
border-radius: 2rem;
|
|
width: 14rem;
|
|
height: 14rem;
|
|
}
|
|
/deep/.el-checkbox__label {
|
|
padding-left: 10rem;
|
|
line-height: 19rem;
|
|
font-size: 14rem;
|
|
}
|
|
/deep/.el-textarea {
|
|
font-size: 14rem;
|
|
}
|
|
/deep/.el-textarea__inner {
|
|
padding: 5rem 15rem;
|
|
border: 1rem solid #DCDFE6;
|
|
border-radius: 4rem;
|
|
height: 138rem !important;
|
|
min-height: 138rem !important;
|
|
}
|
|
/deep/.el-upload-list__item {
|
|
font-size: 14rem;
|
|
margin-top: 5rem;
|
|
border-radius: 4rem;
|
|
}
|
|
/deep/.el-button--small {
|
|
padding: 9rem 15rem;
|
|
font-size: 12rem;
|
|
border-radius: 3rem;
|
|
}
|
|
/deep/.el-upload-list__item-name {
|
|
margin-right: 40rem;
|
|
padding-left: 4rem;
|
|
}
|
|
/deep/.el-upload-list__item-status-label {
|
|
right: 5rem;
|
|
}
|
|
/deep/.el-upload__tip {
|
|
font-size: 12rem;
|
|
color: #606266;
|
|
margin-top: 7rem;
|
|
}
|
|
.formContent {
|
|
padding: 20rem 0rem 0rem;
|
|
}
|
|
.formBarContent {
|
|
padding: 0rem 30rem;
|
|
}
|
|
.formBar {
|
|
display: inline-block;
|
|
width: 4rem;
|
|
height: 20rem;
|
|
background: #014DB5;
|
|
}
|
|
.formTitle {
|
|
display: inline-block;
|
|
padding-left: 10rem;
|
|
font-family: MicrosoftYaHeiSemibold;
|
|
font-size: 24rem;
|
|
color: #014DB5;
|
|
line-height: 64rem;
|
|
text-align: justifyLeft;
|
|
font-style: normal;
|
|
text-transform: none;
|
|
}
|
|
.subBtn {
|
|
width: 140rem;
|
|
height: 50rem;
|
|
background: #014DB5;
|
|
border-radius: 4rem;
|
|
font-family: MicrosoftYaHei;
|
|
font-size: 18rem;
|
|
color: #FFFFFF;
|
|
text-align: center;
|
|
font-style: normal;
|
|
text-transform: none;
|
|
padding: 12rem 20rem;
|
|
}
|
|
.upload-file-uploader {
|
|
margin-bottom: 5rem;
|
|
}
|
|
.upload-file-list .el-upload-list__item {
|
|
line-height: 2rem;
|
|
margin-bottom: 10rem;
|
|
position: relative;
|
|
}
|
|
.upload-file-list .ele-upload-list__item-content {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
color: inherit;
|
|
}
|
|
.ele-upload-list__item-content-action .el-link {
|
|
margin-right: 10rem;
|
|
}
|
|
</style>
|