From 4ef8e150af4fb9fe9075c1179628543ca326c1d7 Mon Sep 17 00:00:00 2001
From: zhangqi <2794379662@qq.com>
Date: Sat, 23 Jan 2021 15:18:11 +0800
Subject: [PATCH] =?UTF-8?q?feature:=E6=B7=BB=E5=8A=A0=E6=B3=95=E4=BA=BA?=
 =?UTF-8?q?=E8=AF=81=E4=B9=A6=E7=94=B3=E9=A2=86=E7=95=8C=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/services/regex.js      |   3 +-
 src/views/CA/UnitApply.vue | 299 ++++++++++++++++++++++++++++++++++++-
 src/views/CA/UserApply.vue |   1 -
 3 files changed, 299 insertions(+), 4 deletions(-)

diff --git a/src/services/regex.js b/src/services/regex.js
index 584818b..41109c4 100644
--- a/src/services/regex.js
+++ b/src/services/regex.js
@@ -1,4 +1,5 @@
 export default {
   IdCardNo: /\d{17}[\dX]/,
-  Phone: /1\d{10}/
+  Phone: /1\d{10}/,
+  Tydm: /[0-9A-HJ-NPQRTUWXY]{2}\d{6}[0-9A-HJ-NPQRTUWXY]{10}/
 };
diff --git a/src/views/CA/UnitApply.vue b/src/views/CA/UnitApply.vue
index 460dca6..87599c1 100644
--- a/src/views/CA/UnitApply.vue
+++ b/src/views/CA/UnitApply.vue
@@ -1,7 +1,302 @@
 <template>
   <div class="ca_apply">
-    ca_unit_apply
+    <Form
+      ref="ruleForm"
+      :model="form"
+      :label-col="labelCol"
+      :wrapper-col="wrapperCol"
+      :rules="rules"
+    >
+      <Row>
+        <RowCol :span="12">
+          <FormItem label="企业名称" name="unitName">
+            <Select v-model:value="form.unitName">
+              <Option
+                v-for="organize in organizeList"
+                :key="organize.id"
+                :value="organize.name"
+                >{{ organize.name }}</Option
+              >
+            </Select>
+          </FormItem>
+          <FormItem label="统一社会信用代码" name="tydm">
+            <Input v-model:value="form.tydm" />
+          </FormItem>
+          <FormItem label="经办人姓名" name="operatorName">
+            <Input v-model:value="form.operatorName" />
+          </FormItem>
+          <FormItem label="经办人身份证号" name="operatorId">
+            <Input v-model:value="form.operatorId" />
+          </FormItem>
+          <FormItem label="经办人手机号" name="operatorPhone">
+            <Input v-model:value="form.operatorPhone" />
+          </FormItem>
+          <FormItem label="邮寄地址" name="address">
+            <Input v-model:value="form.address" />
+          </FormItem>
+          <FormItem label="省市区信息" name="code">
+            <Cascader
+              v-model:value="form.code"
+              :load-data="loadAreaOptions"
+              :options="areaOptions"
+              placeholder="请选择省市区信息"
+              change-on-select
+            />
+          </FormItem>
+        </RowCol>
+        <RowCol :span="12">
+          <FormItem
+            v-for="config in uploadConfig"
+            :label="config.label"
+            :name="config.name"
+            :key="config"
+          >
+            <input hidden v-model="form[config.name]" />
+            <Upload
+              accept="image/*"
+              action="/api2/upload/uploadfile"
+              @change="info => handleChange(config, info)"
+              :beforeUpload="beforeUpload"
+              list-type="picture"
+            >
+              <Button block :disabled="config.disabled">
+                <UploadOutlined />
+                点击上传
+              </Button>
+            </Upload>
+          </FormItem>
+        </RowCol>
+      </Row>
+
+      <FormItem :wrapperCol="{ span: 10, offset: 8 }">
+        <Button type="primary" @click="onSubmit">前往申领</Button>
+        <Button style="margin-left: 10px">历史申领记录</Button>
+      </FormItem>
+    </Form>
   </div>
 </template>
+<style lang="less">
+.ca_apply {
+  width: 800px;
+  .ant-upload {
+    width: 100%;
+  }
+}
+</style>
+<script>
+import {
+  Form,
+  Input,
+  Upload,
+  message,
+  Cascader,
+  Button,
+  Select,
+  Row,
+  Col
+} from "ant-design-vue";
+import { UploadOutlined } from "@ant-design/icons-vue";
+import { get } from "@/services/http";
+import regex from "@/services/regex";
+const picUploadConfig = [
+  {
+    label: "授权委托书照片",
+    name: "LOAPicId",
+    disabled: false
+  },
+  {
+    label: "身份证正面照片",
+    name: "idCardFrontPicId",
+    disabled: false
+  },
+  {
+    label: "身份证背面照片",
+    name: "idCardBackPicId",
+    disabled: false
+  },
+  {
+    label: "营业执照照片",
+    name: "businessLicensePicId",
+    disabled: false
+  }
+];
+async function getAreaOptions(code) {
+  const res = await get("/api2/CA/AreaOptions", { code });
+  if (res.errorCode == 0) {
+    return res.data.map(p => ({
+      label: p.name,
+      value: p.code,
+      isLeaf: p.divisionLevel == 3
+    }));
+  }
+}
 
-<script></script>
+export default {
+  components: {
+    Form,
+    FormItem: Form.Item,
+    Input,
+    Upload,
+    Cascader,
+    UploadOutlined,
+    Button,
+    Select,
+    Option: Select.Option,
+    Row,
+    RowCol: Col
+  },
+  data() {
+    return {
+      uploadConfig: picUploadConfig,
+      labelCol: { span: 8 },
+      wrapperCol: { span: 14 },
+      fileList: [],
+      form: {},
+      areaOptions: [],
+      organizeList: [],
+      rules: {
+        operatorId: [
+          { required: true, message: "请输入18位身份证号码", trigger: "blur" },
+          {
+            pattern: regex.IdCardNo,
+            message: "输入正确的18位身份证号码",
+            trigger: "blur"
+          }
+        ],
+        operatorName: [
+          { required: true, message: "请输入经办人姓名", trigger: "blur" }
+        ],
+        unitName: [
+          { required: true, message: "请选择企业名称", trigger: "change" }
+        ],
+        operatorPhone: [
+          { required: true, message: "请输入你的手机号码", trigger: "blur" },
+          {
+            pattern: regex.Phone,
+            message: "请输入正确的11位手机号码",
+            trigger: "blur"
+          }
+        ],
+        tydm: [
+          {
+            required: true,
+            message: "请输入企业统一社会信用代码",
+            trigger: "blur"
+          },
+          {
+            pattern: regex.Tydm,
+            message: "请输入正确的18位统一社会信用代码",
+            trigger: "blur"
+          }
+        ],
+        address: [
+          { required: true, message: "请输入邮寄信息", trigger: "blur" }
+        ],
+        code: [
+          {
+            required: true,
+            message: "请选择省市区信息",
+            trigger: "blur",
+            transform: v => v && v.join("-")
+          },
+          {
+            pattern: /\d+-\d+-\d+/,
+            message: "信息不完整",
+            trigger: "blur",
+            transform: v => v && v.join("-")
+          }
+        ],
+        LOAPicId: [
+          {
+            required: true,
+            message: "请上传授权承诺书照片",
+            trigger: "change",
+            transform: v => v && v.toString()
+          }
+        ],
+        idCardFrontPicId: [
+          {
+            required: true,
+            message: "请上传授权承诺书照片",
+            trigger: "change",
+            transform: v => v && v.toString()
+          }
+        ],
+        idCardBackPicId: [
+          {
+            required: true,
+            message: "请上传授权承诺书照片",
+            trigger: "change",
+            transform: v => v && v.toString()
+          }
+        ],
+        businessLicensePicId: [
+          {
+            required: true,
+            message: "请上传授权承诺书照片",
+            trigger: "change",
+            transform: v => v && v.toString()
+          }
+        ]
+      }
+    };
+  },
+  computed: {
+    disabled: function() {
+      return this.fileList.length > 0;
+    }
+  },
+  async created() {
+    const organizeInfo = await get("/api2/UserInfo/Organize");
+    this.areaOptions = await getAreaOptions("");
+    this.organizeList = organizeInfo.data;
+  },
+  methods: {
+    handleChange(config, info) {
+      const name = config.name;
+      // var formValue = this.form[name];
+      // console.log(name, formValue);
+      if (info.file.status !== "uploading") {
+        // console.log(info.file.status,info.file, info.fileList);
+      }
+      if (info.file.status === "done") {
+        message.success(`${info.file.name} 文件上传成功`);
+        this.form[name] = info.file.response.id;
+        config.disabled = true;
+      } else if (info.file.status === "error") {
+        message.error(`${info.file.name} 文件上传失败`);
+      }
+      if (info.file.status === "removed") {
+        config.disabled = false;
+        this.form[name] = null;
+      }
+    },
+    beforeUpload(file) {
+      const isJpgOrPng =
+        file.type === "image/jpeg" || file.type === "image/png";
+      if (!isJpgOrPng) {
+        message.error("只能上传jpeg/png格式的图片文件");
+      }
+      const isLt2M = file.size / 1024 / 1024 < 2;
+      if (!isLt2M) {
+        message.error("文件大小超过2MB!");
+      }
+      return isJpgOrPng && isLt2M;
+    },
+    async loadAreaOptions(selectedOptions) {
+      const targetOption = selectedOptions[selectedOptions.length - 1];
+      targetOption.loading = true;
+      const options = await getAreaOptions(targetOption.value);
+      if (options) {
+        targetOption.children = options;
+      }
+      targetOption.loading = false;
+      this.areaOptions = [...this.areaOptions];
+    },
+    onSubmit() {
+      this.$refs.ruleForm.validate();
+      console.log(this.form);
+    }
+  }
+};
+</script>
diff --git a/src/views/CA/UserApply.vue b/src/views/CA/UserApply.vue
index 222bd66..f4b514a 100644
--- a/src/views/CA/UserApply.vue
+++ b/src/views/CA/UserApply.vue
@@ -59,7 +59,6 @@
 import { Form, Input, Button, Select, message, Drawer } from "ant-design-vue";
 import { get, post } from "@/services/http";
 import regex from "@/services/regex";
-console.log(regex);
 export default {
   data() {
     return {