1

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-form-item label="地址" prop="address">
-                    <el-input v-model="form1.companyAddress" />
+                    <el-input v-model="form1.address" />
                   </el-form-item>
                 </el-col>
                 <el-col :span="6">
-                  <el-form-item label="联系电话">
+                  <el-form-item label="联系电话" prop="phoneNumber">
-                    <el-input v-model="form1.phone" />
+                    <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
+                <div class="upload-file">
-                  class="upload-demo"
+                  <el-upload
-                  action="https://jsonplaceholder.typicode.com/posts/"
+                    multiple
-                  :file-list="fileList1"
+                    :action="uploadFileUrl"
-                >
+                    :before-upload="handleBeforeUpload"
-                  <el-button
+                    :file-list="fileList"
-                    size="small"
+                    :limit="limit"
-                    type="primary"
+                    :on-error="handleUploadError"
+                    :on-exceed="handleExceed"
+                    :on-success="handleUploadSuccess"
+                    :show-file-list="false"
+                    class="upload-file-uploader"
+                    ref="fileUpload"
                   >
-                    上传
+                    <!-- 上传按钮 -->
-                  </el-button>
+                    <el-button size="small" type="primary">上传</el-button>
-                </el-upload>
+                    <!-- 上传提示 -->
+                    <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-form-item label="公司地址" prop="address">
-                    <el-input v-model="form.companyAddress" />
+                    <el-input v-model="form.address" />
                   </el-form-item>
                 </el-col>
                 <el-col :span="6">
-                  <el-form-item label="统一社会信用代码">
+                  <el-form-item label="统一社会信用代码" prop="identifierCode">
-                    <el-input v-model="form.uniformCode" />
+                    <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-form-item label="联系电话" prop="phoneNumber">
-                    <el-input v-model="form.phone" />
+                    <el-input v-model="form.phoneNumber" />
                   </el-form-item>
                 </el-col>
                 <el-col :span="6">
-                  <el-form-item label="网址">
+                  <el-form-item label="网址" >
-                    <el-input v-model="form.website" />
+                    <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-col :span="5">
-                  <el-form-item label="">
+                  <el-form-item label="" label-width="0rem">
-                    <el-input v-model="form.otherRemark" />
+                    <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: '',
+        fieldType: [],
-        excelIn: [],
+        advantageConcept: '',
-        dominanceConcept: '',
+        cooperationIntention: '',
-        intention: '',
+      },
+      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: '',
+        address: '',
-        uniformCode: '',
+        identifierCode: '',
         email: '',
-        enterpriseProperty: [],
+        businessNature: [],
-        industryField: '',
+        fieldIndustry: '',
-        mainProduct: '',
+        mainProducts: '',
-        phone: '',
+        phoneNumber: '',
-        website: '',
+        webAddress: '',
-        designCapability: [],
+        developmentCapability: [],
-        standards: [],
+        complianceStandards: [],
-        authentication: [],
+        productCertification: [],
-        otherRemark: '',
+        otherNotes: '',
         qualitySystem: [],
-        relevantQualification: [],
+        relevantQualifications: [],
-        dominanceConcept: '',
+        advantageConcept: '',
-        intention: '',
+        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>