From ecff73f77630ecaec7f66503ed744149b49c6cf7 Mon Sep 17 00:00:00 2001
From: wangchengming <15110151257@163.com>
Date: Fri, 6 Dec 2024 17:26:33 +0800
Subject: [PATCH] 1
---
src/views/Invest/BusinessPartner/Index.vue | 430 +++++++++++++++++----
1 file changed, 362 insertions(+), 68 deletions(-)
diff --git a/src/views/Invest/BusinessPartner/Index.vue b/src/views/Invest/BusinessPartner/Index.vue
index f886bb7..8d891f2 100644
--- a/src/views/Invest/BusinessPartner/Index.vue
+++ b/src/views/Invest/BusinessPartner/Index.vue
@@ -41,35 +41,37 @@
</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="公司名称(个人)">
+ <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="地址">
- <el-input v-model="form1.companyAddress" />
+ <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="联系电话">
- <el-input v-model="form1.phone" />
+ <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="电子邮箱">
+ <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.excelIn">
+ <el-checkbox-group v-model="form1.fieldType">
<el-checkbox
v-for="(item, index) in excelInList"
:key="'excelIn' + index"
@@ -82,7 +84,7 @@
<el-col :span="12">
<el-form-item label="优势概念">
<el-input
- v-model="form1.dominanceConcept"
+ v-model="form1.advantageConcept"
:autosize="{ minRows: 6, maxRows: 6 }"
type="textarea"
/>
@@ -91,7 +93,7 @@
<el-col :span="12">
<el-form-item label="合作意向概述">
<el-input
- v-model="form1.intention"
+ v-model="form1.cooperationIntention"
:autosize="{ minRows: 6, maxRows: 6 }"
type="textarea"
/>
@@ -99,22 +101,47 @@
</el-col>
</el-row>
<el-form-item label="附件">
- <el-upload
- class="upload-demo"
- action="https://jsonplaceholder.typicode.com/posts/"
- :file-list="fileList1"
- >
- <el-button
- size="small"
- type="primary"
+ <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>
- </el-upload>
+ <!-- 上传按钮 -->
+ <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">
+ <el-button class="subBtn" @click="handleAddPartner">
提交
</el-button>
</el-form-item>
@@ -133,28 +160,30 @@
</div>
<el-form
:model="form"
- label-width="130rem"
+ :rules="formRules"
+ ref="Supperform"
+ label-width="140rem"
style="margin-top: 40rem"
>
<div class="formBarContent">
<el-row>
<el-col :span="6">
- <el-form-item label="公司名称">
+ <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="公司地址">
- <el-input v-model="form.companyAddress" />
+ <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="统一社会信用代码">
- <el-input v-model="form.uniformCode" />
+ <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="电子邮箱">
+ <el-form-item label="电子邮箱" prop="email">
<el-input v-model="form.email" />
</el-form-item>
</el-col>
@@ -162,7 +191,7 @@
<el-row>
<el-col :span="12">
<el-form-item label="企业性质">
- <el-checkbox-group v-model="form.enterpriseProperty">
+ <el-checkbox-group :max="1" v-model="form.businessNature">
<el-checkbox
v-for="(item, index) in enterprisePropertyList"
:key="'enterpriseProperty' + index"
@@ -174,29 +203,29 @@
</el-col>
<el-col :span="6">
<el-form-item label="行业领域">
- <el-input v-model="form.industryField" />
+ <el-input v-model="form.fieldIndustry" />
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="主要产品">
- <el-input v-model="form.mainProduct" />
+ <el-input v-model="form.mainProducts" />
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="6">
- <el-form-item label="联系电话">
- <el-input v-model="form.phone" />
+ <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.website" />
+ <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.designCapability">
+ <el-checkbox-group v-model="form.developmentCapability">
<el-checkbox
v-for="(item, index) in designCapabilityList"
:key="'designCapability' + index"
@@ -210,7 +239,7 @@
<el-row>
<el-col :span="12">
<el-form-item label="遵守标准">
- <el-checkbox-group v-model="form.standards">
+ <el-checkbox-group v-model="form.complianceStandards">
<el-checkbox
v-for="(item, index) in standardsList"
:key="'standards' + index"
@@ -220,9 +249,9 @@
</el-checkbox-group>
</el-form-item>
</el-col>
- <el-col :span="6">
+ <el-col :span="7">
<el-form-item label="产品已获得的认证">
- <el-checkbox-group v-model="form.authentication">
+ <el-checkbox-group :max="1" v-model="form.productCertification">
<el-checkbox
v-for="(item, index) in authenticationList"
:key="'authentication' + index"
@@ -232,9 +261,9 @@
</el-checkbox-group>
</el-form-item>
</el-col>
- <el-col :span="6">
- <el-form-item label="">
- <el-input v-model="form.otherRemark" />
+ <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>
@@ -249,7 +278,7 @@
</el-checkbox-group>
</el-form-item>
<el-form-item label="是否具备相关资质">
- <el-checkbox-group v-model="form.relevantQualification">
+ <el-checkbox-group v-model="form.relevantQualifications">
<el-checkbox
v-for="(item, index) in relevantQualificationList"
:key="'relevantQualification' + index"
@@ -262,7 +291,7 @@
<el-col :span="12">
<el-form-item label="优势概念">
<el-input
- v-model="form.dominanceConcept"
+ v-model="form.advantageConcept"
:autosize="{ minRows: 6, maxRows: 6 }"
type="textarea"
/>
@@ -271,7 +300,7 @@
<el-col :span="12">
<el-form-item label="合作意向概述">
<el-input
- v-model="form.intention"
+ v-model="form.cooperationIntention"
:autosize="{ minRows: 6, maxRows: 6 }"
type="textarea"
/>
@@ -294,7 +323,7 @@
</el-form-item>
</div>
<el-form-item style="text-align: center;border-top:1rem solid #B0B0B0;padding: 20rem 0rem">
- <el-button class="subBtn">
+ <el-button class="subBtn" @click="handleAddSupper">
提交
</el-button>
</el-form-item>
@@ -368,34 +397,136 @@ export default {
{ 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: '',
- companyAddress: '',
+ address: '',
+ phoneNumber: '',
email: '',
- phone: '',
- excelIn: [],
- dominanceConcept: '',
- intention: '',
+ fieldType: [],
+ advantageConcept: '',
+ cooperationIntention: '',
+ },
+ 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: '',
- companyAddress: '',
- uniformCode: '',
+ address: '',
+ identifierCode: '',
email: '',
- enterpriseProperty: [],
- industryField: '',
- mainProduct: '',
- phone: '',
- website: '',
- designCapability: [],
- standards: [],
- authentication: [],
- otherRemark: '',
+ businessNature: [],
+ fieldIndustry: '',
+ mainProducts: '',
+ phoneNumber: '',
+ webAddress: '',
+ developmentCapability: [],
+ complianceStandards: [],
+ productCertification: [],
+ otherNotes: '',
qualitySystem: [],
- relevantQualification: [],
- dominanceConcept: '',
- intention: '',
+ relevantQualifications: [],
+ advantageConcept: '',
+ cooperationIntention: '',
},
+ // 数量限制
+ limit: 10,
+ // 大小限制(MB)
+ fileSize: 10,
+ // 文件类型, 例如['png', 'jpg', 'jpeg']
+ fileType: ["doc", "docx", "xls","xlsx", "ppt", "txt", "pdf"],
+ // 是否显示提示
+ isShowTip: true,
+ number: 0,
+ uploadList: [],
+ // 上传文件服务器地址
+ uploadFileUrl: process.env.VUE_APP_API_TARGET_URL + "/system/oss/upload",
+ fileList: [],
+ loadingModal: undefined,
};
},
computed: {
@@ -428,6 +559,148 @@ export default {
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.$request.post(
+ '/official/companymessage/add',
+ this.form1,
+ ).then(res => {
+ if(res.code == 200) {
+ this.form1= {
+ propertiesType: 1,
+ companyName: '',
+ address: '',
+ phoneNumber: '',
+ email: '',
+ fieldType: [],
+ advantageConcept: '',
+ cooperationIntention: '',
+ }
+ }
+ });
+ }
+ });
+ } 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.$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: '',
+ }
+ }
+ });
+ }
+ });
+ } 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(`上传文件失败，请重试`);
+ 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;
+ }
+ },
},
};
</script>
@@ -480,7 +753,6 @@ export default {
background: #F5F5F7;
}
.screen2 .wrapper1680 {
- height: 565rem;
box-sizing: border-box;
background: #FFFFFF;
border-radius: 10rem 10rem 10rem 10rem;
@@ -490,7 +762,6 @@ export default {
background: #F5F5F7;
}
.screen3 .wrapper1680 {
- height: 830rem;
background: #FFFFFF;
border-radius: 10rem 10rem 10rem 10rem;
}
@@ -561,8 +832,13 @@ export default {
/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;
+ padding: 20rem 0rem 0rem;
}
.formBarContent {
padding: 0rem 30rem;
@@ -597,4 +873,22 @@ export default {
text-transform: none;
padding: 12rem 20rem;
}
+.upload-file-uploader {
+ margin-bottom: 5rem;
+}
+.upload-file-list .el-upload-list__item {
+ border: 1rem solid #e4e7ed;
+ 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>