From 02bc803f0296e5758edc63c2c005a849c2977ab0 Mon Sep 17 00:00:00 2001
From: bibi <541660090@qq.com>
Date: Wed, 16 Feb 2022 13:11:43 +0800
Subject: [PATCH] 1

---
 src/views/Basic/home/settled.vue | 271 +++++++++++++++++++------------
 1 file changed, 164 insertions(+), 107 deletions(-)

diff --git a/src/views/Basic/home/settled.vue b/src/views/Basic/home/settled.vue
index ee84d1b..f9697a3 100644
--- a/src/views/Basic/home/settled.vue
+++ b/src/views/Basic/home/settled.vue
@@ -1,20 +1,23 @@
 <template>
   <div class="content">
-    <span class="back-btn" @click='back'><a-icon type="left" style='margin-right:10px' />返回</span>
+    <span class="back-btn" @click="back"
+      ><a-icon type="left" style="margin-right: 10px" />返回</span
+    >
     <a-divider></a-divider>
     <a-form-model
       ref="ruleForm"
       :model="form"
       :rules="rules"
-      :label-col="inline"
       layout="vertical"
       :wrapper-col="wrapperCol"
     >
-      <a-form-model-item><div class="cardTitle">关联账号</div></a-form-model-item>
+      <a-form-model-item
+        ><div class="cardTitle">关联账号</div></a-form-model-item
+      >
       <a-form-model-item ref="tel" label="手机号" prop="tel">
         <a-input
           v-model="form.tel"
-          style="width:60%"
+          style="width: 60%"
           placeholder="请输入手机号"
           @blur="
             () => {
@@ -23,181 +26,241 @@
           "
         />
       </a-form-model-item>
-      <a-form-model-item prop='code'>
-         <a-row>
-          <a-col :span='8' style="margin-right:10px">
-             <a-input placeholder="请输入验证码" v-model="form.code"/>
-          </a-col>
-          <a-col :span='6'>
-              <a-button type="primary" @click="getCode">获取验证码</a-button>
-          </a-col>
-        </a-row>
+      <a-form-model-item label="手机验证码" prop="code">
+        <a-input
+          placeholder="请输入验证码"
+          v-model="form.code"
+          style="width: 60%; margin-right: 10px"
+        />
+        <a-button type="primary" @click="getCode">获取验证码</a-button>
       </a-form-model-item>
-      <a-form-model-item><div class="cardTitle">基础信息</div></a-form-model-item>
+      <a-form-model-item
+        ><div class="cardTitle">基础信息</div></a-form-model-item
+      >
       <a-row>
-        <a-col :span='12'>
+        <a-col :span="12">
           <a-form-model-item label="企业名称" prop="companyName">
-            <a-input v-model="form.companyName"
-                placeholder="请输入企业名称"
-                style="width:130%"
+            <a-input
+              v-model="form.companyName"
+              placeholder="请输入企业名称"
+              style="width: 130%"
             />
           </a-form-model-item>
         </a-col>
-        <a-col :span='12'>
+        <a-col :span="12">
           <a-form-model-item label="社会信用代码" prop="socialCreditCode">
-            <a-input v-model="form.socialCreditCode"
-                placeholder="请输入社会信用代码"
-                style="width:130%"
+            <a-input
+              v-model="form.socialCreditCode"
+              placeholder="请输入社会信用代码"
+              style="width: 130%"
             />
           </a-form-model-item>
         </a-col>
       </a-row>
       <a-row>
-        <a-col :span='12'>
+        <a-col :span="12">
           <a-form-model-item label="企业地址" prop="companyAddress">
-            <a-cascader v-model="form.companyAddress"
-                placeholder="请选择企业地址"
-                style="width:100%"
+            <a-cascader
+              :options="city"
+              :field-names="cascaderConfig"
+              @change="companyChange"
+              placeholder="请选择"
+              style="width: 100%"
             />
           </a-form-model-item>
         </a-col>
-        <a-col :span='12'>
+        <a-col :span="12">
           <a-form-model-item label="详细地址" prop="companyAddressDetail">
-            <a-input v-model="form.companyAddressDetail"
-                placeholder="请输入详细地址"
-                style="width:130%"
+            <a-input
+              v-model="form.companyAddressDetail"
+              placeholder="请输入详细地址"
+              style="width: 130%"
             />
           </a-form-model-item>
         </a-col>
       </a-row>
       <a-row>
-        <a-col :span='12'>
+        <a-col :span="12">
           <a-form-model-item label="法人姓名" prop="legalPersonName">
-            <a-input v-model="form.legalPersonName"
-                placeholder="请输入法人姓名"
-                style="width:130%"
+            <a-input
+              v-model="form.legalPersonName"
+              placeholder="请输入法人姓名"
+              style="width: 130%"
             />
           </a-form-model-item>
         </a-col>
-        <a-col :span='12'>
+        <a-col :span="12">
           <a-form-model-item label="法人身份证号" prop="legalPersonIdCard">
-            <a-input v-model="form.legalPersonIdCard"
-                placeholder="请输入法人身份证号"
-                style="width:130%"
+            <a-input
+              v-model="form.legalPersonIdCard"
+              placeholder="请输入法人身份证号"
+              style="width: 130%"
             />
           </a-form-model-item>
         </a-col>
       </a-row>
       <!-- licenseTimeStart  licenseTimeEnd -->
-      <a-form-model-item label="营业执照有效期限">
-        <a-range-picker @change="onChange" />
-      </a-form-model-item>
+      <a-row>
+        <a-col :span="12">
+          <a-form-model-item
+            label="营业执照有效期限开始时间"
+            prop="licenseTimeStart"
+          >
+            <a-date-picker v-model="form.licenseTimeStart" value-format="YYYY-MM-DD HH:mm:ss"/>
+          </a-form-model-item>
+        </a-col>
+        <a-col :span="12">
+          <a-form-model-item
+            label="营业执照有效期限结束时间（如长期可不选）"
+            prop="licenseTimeEnd"
+          >
+            <a-date-picker v-model="form.licenseTimeEnd" value-format="YYYY-MM-DD HH:mm:ss"/>
+          </a-form-model-item>
+        </a-col>
+      </a-row>
       <a-form-model-item label="法人身份证">
-        <span><span style="color:#1F519B">请上传法人身份证正面照、反面照，</span>文件大小不超过5mb，支持jpg、png格式</span>
+        <span
+          ><span style="color: #1f519b">请上传法人身份证正面照、反面照，</span
+          >文件大小不超过5mb，支持jpg、png格式</span
+        >
         <a-row>
-          <a-col :span='12'>
+          <a-col :span="12">
             头像面
             <!-- idCardFrontImgUrls -->
-            <div class="uploadImg">+</div>
+            <commonUpload @handleChange='handleChange($event,1)'/>
           </a-col>
-          <a-col :span='12'>
+          <a-col :span="12">
             国徽面
             <!-- idCardBackImgUrls -->
-            <div class="uploadImg">+</div>
+            <commonUpload @handleChange='handleChange($event,2)'/>
           </a-col>
         </a-row>
       </a-form-model-item>
       <a-form-model-item label="营业执照">
         <!-- businessLicenseImgUrls -->
-        <span><span style="color:#1F519B">请上传公司营业执照，</span>文件大小不超过5mb，支持jpg、png格式</span>
+        <span
+          ><span style="color: #1f519b">请上传公司营业执照，</span
+          >文件大小不超过5mb，支持jpg、png格式</span
+        >
         <a-row>
-          <a-col :span='12'>
+          <a-col :span="12">
             公司营业执照
-            <div class="uploadImg">+</div>
+            <commonUpload @handleChange='handleChange($event,3)'/>
           </a-col>
         </a-row>
       </a-form-model-item>
       <!-- othersImgUrls -->
       <a-form-model-item label="其他附件">
-        <span><span style="color:#1F519B">如从事某些特定行业，需要上传对应的资质证书，</span>文件大小不超过5mb，支持jpg、png格式</span>
+        <span
+          ><span style="color: #1f519b"
+            >如从事某些特定行业，需要上传对应的资质证书，</span
+          >文件大小不超过5mb，支持jpg、png格式</span
+        >
         <a-row>
-          <a-col :span='12'>
-            <div class="uploadImg">+</div>
+          <a-col :span="12">
+           <commonUpload @handleChange='handleChange($event,4)'/>
           </a-col>
         </a-row>
       </a-form-model-item>
-      <a-form-model-item label="联系人姓名" prop='contactsName'>
-        <a-input style="width:60%" v-model="form.contactsName"></a-input>
+      <a-form-model-item label="联系人姓名" prop="contactsName">
+        <a-input style="width: 60%" v-model="form.contactsName"></a-input>
       </a-form-model-item>
-       <a-form-model-item label="联系人邮箱" prop='contactsTel'>
-        <a-input style="width:60%" v-model="form.contactsTel"></a-input>
+      <a-form-model-item label="联系人电话" prop="contactsTel">
+        <a-input style="width: 60%" v-model="form.contactsTel"></a-input>
       </a-form-model-item>
-       <a-form-model-item label="联系人电话" prop='contactsEmail'>
-        <a-input style="width:60%" v-model="form.contactsEmail"></a-input>
+      <a-form-model-item label="联系人邮箱" prop="contactsEmail">
+        <a-input style="width: 60%" v-model="form.contactsEmail"></a-input>
       </a-form-model-item>
-      <a-form-model-item label="联系人地址" prop='contactsAddress'>
-        <a-cascader style="width:60%" v-model="form.contactsAddress"></a-cascader>
+      <a-form-model-item label="联系人地址" prop="contactsAddress">
+        <a-cascader
+          :options="city"
+          placeholder="请选择"
+          :field-names="cascaderConfig"
+          @change="contactChange"
+          style="width: 60%"
+        ></a-cascader>
       </a-form-model-item>
-       <a-form-model-item label="联系人详细地址" prop='contactsAddressDetail'>
-        <a-input style="width:60%" v-model="form.contactsAddressDetail"></a-input>
+      <a-form-model-item label="联系人详细地址" prop="contactsAddressDetail">
+        <a-input
+          style="width: 60%"
+          v-model="form.contactsAddressDetail"
+        ></a-input>
       </a-form-model-item>
     </a-form-model>
-    <div style="text-align:center">
+    <div style="text-align: center">
       <a-button type="primary" @click="onSubmit"> 提交 </a-button>
-        <a-button style="margin-left: 10px" @click="resetForm">
-          重置
-        </a-button>
+      <a-button style="margin-left: 10px" @click="resetForm"> 重置 </a-button>
     </div>
   </div>
 </template>
 
 <script>
-import { settledInsert } from "@/api/basic/console"
+import { settledInsert } from "@/api/basic/console";
+import { allCity } from "@/api/public";
+import { form, rules, cascaderConfig } from "./depend/settledForm";
 export default {
 	data() {
 		return {
 			// 表单
 			labelCol: { span: 4 },
 			wrapperCol: { span: 10 },
-			other: "",
-			form: {
-				tel: "",
-				code:'',
-				name: "",
-				address:""
-			},
-			rules: {
-				tel: [
-					{
-						required: true,
-						message: "请输入手机号",
-						trigger: "blur",
-					},
-					{
-						min: 11,
-						max: 11,
-						message: "手机号长度必须为 11 位",
-						trigger: "blur",
-					},
-				],
-			},
+			cascaderConfig,
+			form,
+			rules,
+			city: [],
 		};
 	},
+	mounted() {
+		this.getCity();
+	},
 	methods: {
+		async getCity() {
+			let res = await allCity();
+			this.city = res.data;
+		},
 		// 获取验证码
-		getCode(){},
+		getCode() {},
+		companyChange(data) {
+			this.form.companyAddress = data[2];
+		},
+		contactChange(data) {
+			this.form.contactsAddress = data[2];
+		},
+		handleChange(data,type) {
+			console.log(data);
+			switch (type) {
+			case 1:
+				this.form.idCardFrontImgUrls[0] = data[0].response.data
+				break;
+			case 2:
+				this.form.idCardBackImgUrls[0] = data[0].response.data
+				break;
+			case 3:
+				this.form.businessLicenseImgUrls[0] = data[0].response.data
+				break;
+			case 4:
+				this.form.othersImgUrls[0] = data[0].response.data
+				break;
+			default:
+				break;
+			}
+		},
 		onSubmit() {
 			this.$refs.ruleForm.validate(async (valid) => {
 				if (valid) {
-				 let res = await settledInsert(this.form)
-					if(res.code===200){
-						this.$message.success(res.msg)
-					}else{
-						this.$message.error(res.msg)
+					let res = await settledInsert(this.form);
+					if (res.code === 200) {
+						this.$message.success(res.msg);
+						this.back()
+					} else {
+						this.$message.error(res.msg);
 					}
 				}
 			});
 		},
+		back() {
+			this.$router.go(-1)
+		},
 		// 重置
 		resetForm() {
 			this.$refs.ruleForm.resetFields();
@@ -212,22 +275,16 @@ export default {
   padding-left: 125px;
   padding-top: 48px;
 }
-.cardTitle{
+.cardTitle {
   margin-left: -10px;
   margin-bottom: -10px;
 }
-/deep/.ant-col .ant-form-item-label{
+/deep/.ant-col .ant-form-item-label {
   margin-top: -10px;
 }
-.uploadImg{
-  background: #0000000A;
-  border:2px solid #00000029;
-  color: #00000029;
-  width: 180px;
-  height: 120px;
-  text-align: center;
-  line-height: 110px;
-  font-size:60px;
-  cursor: pointer;
+.com-name{
+  font-size: 20px;
+  font-weight: 500;
+  line-height: 26px;
 }
 </style>  
\ No newline at end of file