diff --git a/package-lock.json b/package-lock.json
index c70f5eb..afaa40d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -5,9 +5,9 @@
   "requires": true,
   "dependencies": {
     "@ant-design-vue/use": {
-      "version": "0.0.1-alpha.8",
-      "resolved": "https://registry.npmjs.org/@ant-design-vue/use/-/use-0.0.1-alpha.8.tgz",
-      "integrity": "sha512-E8OLKvsVZjthRfGCA1CT2s7FoWl1HcgxTJFrHTcfMSaNXVT9jZEcJNM3K454gvfpgz3Iu35hwDknSKC4+kMYpA==",
+      "version": "0.0.1-alpha.9",
+      "resolved": "https://registry.npm.taobao.org/@ant-design-vue/use/download/@ant-design-vue/use-0.0.1-alpha.9.tgz",
+      "integrity": "sha1-t98mFQRpORODuhwt1LolAmelhBE=",
       "requires": {
         "async-validator": "^3.4.0",
         "lodash-es": "^4.17.15",
@@ -17,25 +17,24 @@
     },
     "@ant-design/colors": {
       "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/@ant-design/colors/-/colors-5.0.1.tgz",
-      "integrity": "sha512-x1TUaRILaqy3zgFNo+kIqOa3eTYPt81H1/3E4dCjDP4Qvk/xaPEizLDFdRUcIx0cWwyu2LklwfyLHWpbYK8v6A==",
+      "resolved": "https://registry.npm.taobao.org/@ant-design/colors/download/@ant-design/colors-5.0.1.tgz",
+      "integrity": "sha1-CWcPL0SnRz17wBvpAcSOwQ8Sx6Q=",
       "requires": {
         "@ctrl/tinycolor": "^3.3.1"
       }
     },
     "@ant-design/icons-svg": {
       "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/@ant-design/icons-svg/-/icons-svg-4.1.0.tgz",
-      "integrity": "sha512-Fi03PfuUqRs76aI3UWYpP864lkrfPo0hluwGqh7NJdLhvH4iRDc3jbJqZIvRDLHKbXrvAfPPV3+zjUccfFvWOQ=="
+      "resolved": "https://registry.npm.taobao.org/@ant-design/icons-svg/download/@ant-design/icons-svg-4.1.0.tgz",
+      "integrity": "sha1-SAsCX0sg73/o9H1KSEbk/uhOoGw="
     },
     "@ant-design/icons-vue": {
-      "version": "5.1.9",
-      "resolved": "https://registry.npmjs.org/@ant-design/icons-vue/-/icons-vue-5.1.9.tgz",
-      "integrity": "sha512-4SJ8v9tXESKHNerrPPAkV9+EnuJhpY99wXgvtnbnTfE3QfpWaIw+7dP3wDxzD/Rjyz3wl3mj3mFlI889oPZoHg==",
+      "version": "6.0.0",
+      "resolved": "https://registry.npm.taobao.org/@ant-design/icons-vue/download/@ant-design/icons-vue-6.0.0.tgz",
+      "integrity": "sha1-4A7SPVNpMj7lmatPTriqpPhfeHc=",
       "requires": {
         "@ant-design/colors": "^5.0.0",
         "@ant-design/icons-svg": "^4.0.0",
-        "@babel/runtime": "^7.10.4",
         "@types/lodash": "^4.14.165",
         "lodash": "^4.17.15"
       }
@@ -1070,9 +1069,9 @@
       }
     },
     "@ctrl/tinycolor": {
-      "version": "3.3.2",
-      "resolved": "https://registry.npmjs.org/@ctrl/tinycolor/-/tinycolor-3.3.2.tgz",
-      "integrity": "sha512-28A2j9DISNtHRcfc+FSCkxIAMnQoORQYz+UQLjc0+KlsGl80MqfbG3EzqXxzVmCMatlgmHfcX7/DBoMg+ik/Fg=="
+      "version": "3.3.3",
+      "resolved": "https://registry.npm.taobao.org/@ctrl/tinycolor/download/@ctrl/tinycolor-3.3.3.tgz",
+      "integrity": "sha1-mASHdjvHySONbYjRrA3uLU3z32g="
     },
     "@hapi/address": {
       "version": "2.1.4",
@@ -1178,11 +1177,11 @@
       }
     },
     "@simonwep/pickr": {
-      "version": "1.7.4",
-      "resolved": "https://registry.npmjs.org/@simonwep/pickr/-/pickr-1.7.4.tgz",
-      "integrity": "sha512-fq7jgKJT21uWGC1mARBHvvd1JYlEf93o7SuVOB4Lr0x/2UPuNC9Oe9n/GzVeg4oVtqMDfh1wIEJpsdOJEZb+3g==",
+      "version": "1.8.0",
+      "resolved": "https://registry.npm.taobao.org/@simonwep/pickr/download/@simonwep/pickr-1.8.0.tgz",
+      "integrity": "sha1-rb/5pPfw5Z3smUZQjF5IG3q64Pg=",
       "requires": {
-        "core-js": "^3.6.5",
+        "core-js": "^3.8.0",
         "nanopop": "^2.1.0"
       }
     },
@@ -1351,9 +1350,9 @@
       "dev": true
     },
     "@types/lodash": {
-      "version": "4.14.167",
-      "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.167.tgz",
-      "integrity": "sha512-w7tQPjARrvdeBkX/Rwg95S592JwxqOjmms3zWQ0XZgSyxSLdzWaYH3vErBhdVS/lRBX7F8aBYcYJYTr5TMGOzw=="
+      "version": "4.14.168",
+      "resolved": "https://registry.npm.taobao.org/@types/lodash/download/@types/lodash-4.14.168.tgz?cache=0&sync_timestamp=1610980857811&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40types%2Flodash%2Fdownload%2F%40types%2Flodash-4.14.168.tgz",
+      "integrity": "sha1-/iRjLnm3rePxMoka//hsql5c4Ag="
     },
     "@types/mime": {
       "version": "2.0.3",
@@ -2372,14 +2371,14 @@
       }
     },
     "ant-design-vue": {
-      "version": "2.0.0-rc.8",
-      "resolved": "https://registry.npmjs.org/ant-design-vue/-/ant-design-vue-2.0.0-rc.8.tgz",
-      "integrity": "sha512-sPH/raQZhnzxUpFT5z8ONEvaf3SvUss6Llv9eBK05wqDTaj/+QSnJYflFGPZh4ScXGpJ4Pth9FMd+F0ogusGHg==",
+      "version": "2.0.0-rc.9",
+      "resolved": "https://registry.npm.taobao.org/ant-design-vue/download/ant-design-vue-2.0.0-rc.9.tgz",
+      "integrity": "sha1-n02JsCvyxvMpVjMEgAGy4Twinx4=",
       "requires": {
         "@ant-design-vue/use": "^0.0.1-0",
-        "@ant-design/icons-vue": "^5.1.9",
+        "@ant-design/icons-vue": "^6.0.0",
         "@babel/runtime": "^7.10.5",
-        "@simonwep/pickr": "~1.7.0",
+        "@simonwep/pickr": "~1.8.0",
         "array-tree-filter": "^2.1.0",
         "async-validator": "^3.3.0",
         "dom-align": "^1.10.4",
@@ -2465,8 +2464,8 @@
     },
     "array-tree-filter": {
       "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/array-tree-filter/-/array-tree-filter-2.1.0.tgz",
-      "integrity": "sha512-4ROwICNlNw/Hqa9v+rk5h22KjmzB1JGTMVKP2AKJBOCgb0yL0ASf0+YvCcLNNwquOHNX48jkeZIJ3a+oOQqKcw=="
+      "resolved": "https://registry.npm.taobao.org/array-tree-filter/download/array-tree-filter-2.1.0.tgz",
+      "integrity": "sha1-hzrAD+yDdJ8lWsjdCDgUtPYykZA="
     },
     "array-union": {
       "version": "1.0.2",
@@ -2586,8 +2585,8 @@
     },
     "async-validator": {
       "version": "3.5.1",
-      "resolved": "https://registry.npmjs.org/async-validator/-/async-validator-3.5.1.tgz",
-      "integrity": "sha512-DDmKA7sdSAJtTVeNZHrnr2yojfFaoeW8MfQN8CeuXg8DDQHTqKk9Fdv38dSvnesHoO8MUwMI2HphOeSyIF+wmQ=="
+      "resolved": "https://registry.npm.taobao.org/async-validator/download/async-validator-3.5.1.tgz",
+      "integrity": "sha1-zWK5aIskZfSEIOJ620d2CrG1VZ8="
     },
     "asynckit": {
       "version": "0.4.0",
@@ -3731,8 +3730,8 @@
     },
     "compute-scroll-into-view": {
       "version": "1.0.16",
-      "resolved": "https://registry.npmjs.org/compute-scroll-into-view/-/compute-scroll-into-view-1.0.16.tgz",
-      "integrity": "sha512-a85LHKY81oQnikatZYA90pufpZ6sQx++BoCxOEMsjpZx+ZnaKGQnCyCehTRr/1p9GBIAHTjcU9k71kSYWloLiQ=="
+      "resolved": "https://registry.npm.taobao.org/compute-scroll-into-view/download/compute-scroll-into-view-1.0.16.tgz",
+      "integrity": "sha1-W3v09xJ+osGbdQNT185ndqkO4Ig="
     },
     "concat-map": {
       "version": "0.0.1",
@@ -4730,8 +4729,8 @@
     },
     "dom-align": {
       "version": "1.12.0",
-      "resolved": "https://registry.npmjs.org/dom-align/-/dom-align-1.12.0.tgz",
-      "integrity": "sha512-YkoezQuhp3SLFGdOlr5xkqZ640iXrnHAwVYcDg8ZKRUtO7mSzSC2BA5V0VuyAwPSJA4CLIc6EDDJh4bEsD2+zA=="
+      "resolved": "https://registry.npm.taobao.org/dom-align/download/dom-align-1.12.0.tgz",
+      "integrity": "sha1-VvtxVt8LkQmYMDZNLUj4iWP1opw="
     },
     "dom-converter": {
       "version": "0.2.0",
@@ -4744,8 +4743,8 @@
     },
     "dom-scroll-into-view": {
       "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/dom-scroll-into-view/-/dom-scroll-into-view-2.0.1.tgz",
-      "integrity": "sha512-bvVTQe1lfaUr1oFzZX80ce9KLDlZ3iU+XGNE/bz9HnGdklTieqsbmsLHe+rT2XWqopvL0PckkYqN7ksmm5pe3w=="
+      "resolved": "https://registry.npm.taobao.org/dom-scroll-into-view/download/dom-scroll-into-view-2.0.1.tgz",
+      "integrity": "sha1-DezIUigB/Y0/HGujVadNOCxfmJs="
     },
     "dom-serializer": {
       "version": "0.2.2",
@@ -6993,8 +6992,8 @@
     },
     "is-mobile": {
       "version": "2.2.2",
-      "resolved": "https://registry.npmjs.org/is-mobile/-/is-mobile-2.2.2.tgz",
-      "integrity": "sha512-wW/SXnYJkTjs++tVK5b6kVITZpAZPtUrt9SF80vvxGiF/Oywal+COk1jlRkiVq15RFNEQKQY31TkV24/1T5cVg=="
+      "resolved": "https://registry.npm.taobao.org/is-mobile/download/is-mobile-2.2.2.tgz",
+      "integrity": "sha1-9snF1Q7gElTOBec5vdg18e1OmVQ="
     },
     "is-negative-zero": {
       "version": "2.0.1",
@@ -7943,8 +7942,8 @@
     },
     "lodash-es": {
       "version": "4.17.20",
-      "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.20.tgz",
-      "integrity": "sha512-JD1COMZsq8maT6mnuz1UMV0jvYD0E0aUsSOdrr1/nAG3dhqQXwRRgeW0cSqH1U43INKcqxaiVIQNOUDld7gRDA=="
+      "resolved": "https://registry.npm.taobao.org/lodash-es/download/lodash-es-4.17.20.tgz",
+      "integrity": "sha1-KfYzLu/GDoSfhpwmS8cRJq1h6Pc="
     },
     "lodash.camelcase": {
       "version": "4.3.0",
@@ -8065,8 +8064,8 @@
     },
     "loose-envify": {
       "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
-      "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
+      "resolved": "https://registry.npm.taobao.org/loose-envify/download/loose-envify-1.4.0.tgz",
+      "integrity": "sha1-ce5R+nvkyuwaY4OffmgtgTLTDK8=",
       "requires": {
         "js-tokens": "^3.0.0 || ^4.0.0"
       }
@@ -8425,8 +8424,8 @@
     },
     "moment": {
       "version": "2.29.1",
-      "resolved": "https://registry.npmjs.org/moment/-/moment-2.29.1.tgz",
-      "integrity": "sha512-kHmoybcPV8Sqy59DwNDY3Jefr64lK/by/da0ViFcuA4DH0vQg5Q6Ze5VimxkfQNSC+Mls/Kx53s7TjP1RhFEDQ=="
+      "resolved": "https://registry.npm.taobao.org/moment/download/moment-2.29.1.tgz",
+      "integrity": "sha1-sr52n6MZQL6e7qZGnAdeNQBvo9M="
     },
     "move-concurrently": {
       "version": "1.0.1",
@@ -8509,8 +8508,8 @@
     },
     "nanopop": {
       "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/nanopop/-/nanopop-2.1.0.tgz",
-      "integrity": "sha512-jGTwpFRexSH+fxappnGQtN9dspgE2ipa1aOjtR24igG0pv6JCxImIAmrLRHX+zUF5+1wtsFVbKyfP51kIGAVNw=="
+      "resolved": "https://registry.npm.taobao.org/nanopop/download/nanopop-2.1.0.tgz",
+      "integrity": "sha1-I0dlE87iQFiIr9LopLVAZrcLnmA="
     },
     "native-request": {
       "version": "1.0.8",
@@ -8806,8 +8805,8 @@
     },
     "omit.js": {
       "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/omit.js/-/omit.js-2.0.2.tgz",
-      "integrity": "sha512-hJmu9D+bNB40YpL9jYebQl4lsTW6yEHRTroJzNLqQJYHm7c+NQnJGfZmIWh8S3q3KoaxV1aLhV6B3+0N0/kyJg=="
+      "resolved": "https://registry.npm.taobao.org/omit.js/download/omit.js-2.0.2.tgz",
+      "integrity": "sha1-3ZuENvq5R6Xz/yFMslOGMeMT7C8="
     },
     "on-finished": {
       "version": "2.3.0",
@@ -10324,8 +10323,8 @@
     },
     "resize-observer-polyfill": {
       "version": "1.5.1",
-      "resolved": "https://registry.npmjs.org/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz",
-      "integrity": "sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg=="
+      "resolved": "https://registry.npm.taobao.org/resize-observer-polyfill/download/resize-observer-polyfill-1.5.1.tgz",
+      "integrity": "sha1-DpAg3T0hAkRY1OvSfiPkAmmBBGQ="
     },
     "resolve": {
       "version": "1.19.0",
@@ -10487,8 +10486,8 @@
     },
     "scroll-into-view-if-needed": {
       "version": "2.2.26",
-      "resolved": "https://registry.npmjs.org/scroll-into-view-if-needed/-/scroll-into-view-if-needed-2.2.26.tgz",
-      "integrity": "sha512-SQ6AOKfABaSchokAmmaxVnL9IArxEnLEX9j4wAZw+x4iUTb40q7irtHG3z4GtAWz5veVZcCnubXDBRyLVQaohw==",
+      "resolved": "https://registry.npm.taobao.org/scroll-into-view-if-needed/download/scroll-into-view-if-needed-2.2.26.tgz",
+      "integrity": "sha1-5JF9oMggE1/2Wtb35LfXr1aMTxM=",
       "requires": {
         "compute-scroll-into-view": "^1.0.16"
       }
@@ -10702,8 +10701,8 @@
     },
     "shallow-equal": {
       "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/shallow-equal/-/shallow-equal-1.2.1.tgz",
-      "integrity": "sha512-S4vJDjHHMBaiZuT9NPb616CSmLf618jawtv3sufLl6ivK8WocjAo58cXwbRV1cgqxH0Qbv+iUt6m05eqEa2IRA=="
+      "resolved": "https://registry.npm.taobao.org/shallow-equal/download/shallow-equal-1.2.1.tgz",
+      "integrity": "sha1-TBar+lYEOqINBQMk76aJQLDaedo="
     },
     "shebang-command": {
       "version": "1.2.0",
@@ -12286,23 +12285,23 @@
     },
     "vue-types": {
       "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/vue-types/-/vue-types-3.0.1.tgz",
-      "integrity": "sha512-UbvbzPu8DNzZRfMB1RDTFKBB6seMm80scMFdP+GkKaw00EugC3cjq9AtlS4y258vDkpAe9HfqbRO4cp63qVHXQ==",
+      "resolved": "https://registry.npm.taobao.org/vue-types/download/vue-types-3.0.1.tgz",
+      "integrity": "sha1-IOm6roZz3oCT0KmJI0aV0I1US+A=",
       "requires": {
         "is-plain-object": "3.0.1"
       },
       "dependencies": {
         "is-plain-object": {
           "version": "3.0.1",
-          "resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-3.0.1.tgz",
-          "integrity": "sha512-Xnpx182SBMrr/aBik8y+GuR4U1L9FqMSojwDQwPMmxyC6bvEqly9UBCxhauBF5vNh2gwWJNX6oDV7O+OM4z34g=="
+          "resolved": "https://registry.npm.taobao.org/is-plain-object/download/is-plain-object-3.0.1.tgz?cache=0&sync_timestamp=1599667246252&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fis-plain-object%2Fdownload%2Fis-plain-object-3.0.1.tgz",
+          "integrity": "sha1-Zi2S0kwKpDAkB7DUXSHyJRyF+Fs="
         }
       }
     },
     "warning": {
       "version": "4.0.3",
-      "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz",
-      "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==",
+      "resolved": "https://registry.npm.taobao.org/warning/download/warning-4.0.3.tgz",
+      "integrity": "sha1-Fungd+uKhtavfWSqHgX9hbRnjKM=",
       "requires": {
         "loose-envify": "^1.0.0"
       }
diff --git a/package.json b/package.json
index caa8727..4944bec 100644
--- a/package.json
+++ b/package.json
@@ -8,7 +8,7 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
-    "ant-design-vue": "^2.0.0-rc.8",
+    "ant-design-vue": "^2.0.0-rc.9",
     "axios": "^0.21.1",
     "core-js": "^3.6.5",
     "vue": "^3.0.0",
diff --git a/src/App.vue b/src/App.vue
index 015b2a1..10bfd55 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,6 +1,23 @@
 <template>
-  <router-view />
+  <router-view v-if="isShow" />
 </template>
 
 <style lang="less"></style>
-<script></script>
+<script>
+import { ref, provide, nextTick } from "vue";
+export default {
+  setup() {
+    const isShow = ref(true);
+    provide("reload", () => {
+      console.log("startReload");
+      isShow.value = false;
+      nextTick(() => {
+        isShow.value = true;
+      });
+    });
+    return {
+      isShow
+    };
+  }
+};
+</script>
diff --git a/src/router/index.js b/src/router/index.js
index c282b28..2c7247b 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -4,6 +4,7 @@ import CA from "../views/CA.vue";
 import CA_Index from "../views/CA/Index.vue";
 import CA_User from "../views/CA/UserApply.vue";
 import CA_Unit from "../views/CA/UnitApply.vue";
+import CA_Unit_composition from "../views/CA/UnitApply.composition.vue";
 
 const routes = [
   {
@@ -29,6 +30,11 @@ const routes = [
         path: "unit",
         component: CA_Unit,
         name: "企业数字证书申领"
+      },
+      {
+        path: "composition",
+        component: CA_Unit_composition,
+        name: "企业数字证书申领新"
       }
     ]
   }
diff --git a/src/services/http.js b/src/services/http.js
index 37183ee..a56c8b7 100644
--- a/src/services/http.js
+++ b/src/services/http.js
@@ -5,15 +5,15 @@ export async function get(url, params) {
     return response.data;
   } catch (error) {
     if (error.response && error.response.status == "401") {
-      return new {
+      return {
         errorCode: -1,
         errorMsg: "身份认证失败"
-      }();
+      };
     } else {
-      return new {
+      return {
         errorCode: -1,
         errorMsg: "请求出错"
-      }();
+      };
     }
   }
 }
@@ -23,15 +23,15 @@ export async function post(url, data) {
     return response.data;
   } catch (error) {
     if (error.response && error.response.status == "401") {
-      return new {
+      return {
         errorCode: -1,
         errorMsg: "身份认证失败"
-      }();
+      };
     } else {
-      return new {
+      return {
         errorCode: -1,
         errorMsg: "请求出错"
-      }();
+      };
     }
   }
 }
diff --git a/src/services/util.js b/src/services/util.js
index 2785c18..9c693c4 100644
--- a/src/services/util.js
+++ b/src/services/util.js
@@ -3,3 +3,10 @@ export function delay(ms) {
     setTimeout(reslove, ms);
   });
 }
+export function toBit(str) {
+  if (!/^[01]+$/.test(str)) throw new Error("not a valid bit value");
+  return str
+    .split("")
+    .reverse()
+    .reduce((pre, cur, idx) => pre + (1 * cur ? Math.pow(2, cur * idx) : 0), 0);
+}
diff --git a/src/views/CA/Index.vue b/src/views/CA/Index.vue
index 47cfc28..4267b5d 100644
--- a/src/views/CA/Index.vue
+++ b/src/views/CA/Index.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="ca_index">
     <Space>
-      <Button type="primary" disabled>
+      <Button type="primary">
         <router-link to="/ca/user"> 个人数字证书申领入口 </router-link>
       </Button>
       <Button>
diff --git a/src/views/CA/Result.vue b/src/views/CA/Result.vue
new file mode 100644
index 0000000..1cf7000
--- /dev/null
+++ b/src/views/CA/Result.vue
@@ -0,0 +1,30 @@
+<template>
+  <Result
+    status="success"
+    title="您的企业已经完成数字证书申领"
+    sub-title="已经申领过数字证书的企业无法再次申领，如需补办请联系管理人员"
+  >
+    <template #extra>
+      <!-- <Button type="primary">
+        申请补办
+      </Button> -->
+      <Button @click="router.back()"> 返回 </Button>
+    </template>
+  </Result>
+</template>
+<script>
+import { Result, Button } from "ant-design-vue";
+import { useRouter } from "vue-router";
+export default {
+  components: {
+    Result,
+    Button
+  },
+  setup() {
+    const router = useRouter();
+    return {
+      router
+    };
+  }
+};
+</script>
diff --git a/src/views/CA/UnitApply.composition.vue b/src/views/CA/UnitApply.composition.vue
index 09599d4..db71d18 100644
--- a/src/views/CA/UnitApply.composition.vue
+++ b/src/views/CA/UnitApply.composition.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="ca_apply">
+  <div class="ca-apply">
     <Result
       v-if="isSuccess"
       status="success"
@@ -10,152 +10,229 @@
         <!-- <Button type="primary">
         申请补办
       </Button> -->
-        <Button @click="router.back()">
-          返回
-        </Button>
+        <Button @click="router.back()" type="primary"> 返回 </Button>
+        <Button style="margin-left: 10px" @click="toggleDrawer"
+          >历史提交记录</Button
+        >
       </template>
     </Result>
-    <Form
-      v-if="!isSuccess"
-      ref="ruleForm"
-      :model="form"
-      :label-col="labelCol"
-      :wrapper-col="wrapperCol"
-      :rules="rules"
-    >
-      <Row>
-        <Col :span="12">
-          <FormItem label="企业名称" name="unitName">
-            <Select
-              v-model:value="form.unitName"
-              :disabled="disabled"
-              @change="getTydm"
-            >
-              <Option
-                v-for="organize in organizeList"
-                :key="organize.id"
-                :value="organize.name"
-                >{{ organize.name }}</Option
+    <Spin v-else :spinning="spining">
+      <Form :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }">
+        <Row>
+          <Col :span="12">
+            <FormItem label="企业名称" v-bind="validateInfos.unitName">
+              <Select
+                v-model:value="modelRef.unitName"
+                @change="getTydm"
+                :disabled="disabledFeild"
+                placeholder="请选择企业名称"
               >
-            </Select>
-          </FormItem>
-          <FormItem label="统一社会信用代码" name="tydm">
-            <Input v-model:value="form.tydm" disabled />
-          </FormItem>
-          <FormItem label="经办人姓名" name="operatorName">
-            <Input v-model:value="form.operatorName" :disabled="disabled" />
-          </FormItem>
-          <FormItem label="经办人身份证号" name="operatorId">
-            <Input v-model:value="form.operatorId" :disabled="disabled" />
-          </FormItem>
-          <FormItem label="经办人手机号" name="operatorPhone">
-            <Input v-model:value="form.operatorPhone" :disabled="disabled" />
-          </FormItem>
-          <FormItem label="手机验证码" name="phoneCode">
-            <Row :gutter="8">
-              <Col :span="12">
-                <Input v-model:value="form.phoneCode" :disabled="disabled" />
-              </Col>
-              <Col :span="12">
-                <Button @click="getCode" :disabled="disabled || countdown > 0"
-                  >获取验证码{{ countdown > 0 ? `(${countdown})` : "" }}</Button
+                <Option
+                  v-for="organize in organizeList"
+                  :key="organize.id"
+                  :value="organize.name"
+                  >{{ organize.name }}</Option
                 >
-              </Col>
-            </Row>
-          </FormItem>
-          <FormItem label="省市区信息" name="code">
-            <Cascader
-              v-model:value="form.code"
-              :load-data="loadAreaOptions"
-              :options="areaOptions"
-              placeholder="请选择省市区信息"
-              change-on-select
-              :disabled="disabled"
-            />
-          </FormItem>
-          <FormItem label="邮寄地址" name="address">
-            <Input v-model:value="form.address" :disabled="disabled" />
-          </FormItem>
-        </Col>
-        <Col :span="12">
-          <FormItem
-            v-for="config in uploadConfig"
-            :label="config.label"
-            :name="config.name"
-            :key="config"
-          >
-            <input hidden v-model="form[config.name]" />
-            <Upload
-              :disabled="disabled"
-              v-model:fileList="config.defaultFileList"
-              accept="image/*"
-              action="/api2/upload/uploadfile"
-              @change="info => handleChange(config, info)"
-              :beforeUpload="beforeUpload"
-              list-type="picture"
+              </Select>
+            </FormItem>
+            <FormItem label="统一社会信用代码" v-bind="validateInfos.tydm">
+              <Input
+                v-model:value="modelRef.tydm"
+                readonly
+                :disabled="disabledFeild"
+                placeholder="根据企业名称自动获取"
+              />
+            </FormItem>
+            <FormItem label="经办人姓名" v-bind="validateInfos.operatorName">
+              <Input
+                v-model:value="modelRef.operatorName"
+                :disabled="disabledFeild"
+                placeholder="请输入经办人姓名"
+              />
+            </FormItem>
+            <FormItem label="经办人身份证" v-bind="validateInfos.operatorId">
+              <Input
+                v-model:value="modelRef.operatorId"
+                :disabled="disabledFeild"
+                placeholder="请输入经办人身份证号码"
+              />
+            </FormItem>
+            <FormItem label="经办人手机号" v-bind="validateInfos.operatorPhone">
+              <Input
+                v-model:value="modelRef.operatorPhone"
+                :disabled="disabledFeild"
+                placeholder="请输入经办人手机号码"
+              />
+            </FormItem>
+            <FormItem label="手机验证码" v-bind="validateInfos.phoneCode">
+              <Row :gutter="8">
+                <Col :span="12">
+                  <Input
+                    v-model:value="modelRef.phoneCode"
+                    :disabled="disabledFeild"
+                  />
+                </Col>
+                <Col :span="12">
+                  <Button
+                    :disabled="disabledFeild || countdown > 0"
+                    @click="getCode"
+                  >
+                    获取验证码{{ countdown > 0 ? `(${countdown})` : "" }}
+                  </Button>
+                </Col>
+              </Row>
+            </FormItem>
+            <FormItem label="省市区信息" v-bind="validateInfos.code">
+              <Cascader
+                v-model:value="modelRef.code"
+                placeholder="请选择省市区信息"
+                :options="areaOptions"
+                :load-data="loadAreaOptions"
+                :disabled="disabledFeild"
+              />
+            </FormItem>
+            <FormItem label="邮寄地址" v-bind="validateInfos.address">
+              <Input
+                v-model:value="modelRef.address"
+                :disabled="disabledFeild"
+                placeholder="请输入证书邮寄地址"
+              />
+            </FormItem>
+          </Col>
+          <Col :span="12">
+            <FormItem label="授权委托书" v-bind="validateInfos.loaPicId">
+              <input v-model="modelRef.loaPicId" hidden />
+              <Upload
+                accept="image/*"
+                action="/api2/upload/uploadfile"
+                v-model:fileList="loaPicFileList"
+                :beforeUpload="beforeUpload"
+                list-type="picture"
+                @change="info => handleChange(info, 'loaPicId')"
+                :disabled="disabledUpload"
+              >
+                <Button block :disabled="disabledUpload">
+                  <UploadOutlined />
+                  点击{{ modelRef.loaPicId ? "替换" : "上传" }}
+                </Button>
+              </Upload>
+            </FormItem>
+            <FormItem
+              label="身份证正面照"
+              v-bind="validateInfos.idCardFrontPicId"
             >
-              <Button block :disabled="disabled || config.disabled">
-                <UploadOutlined />
-                点击上传
-              </Button>
-            </Upload>
-          </FormItem>
-        </Col>
-      </Row>
-
-      <FormItem :wrapperCol="{ span: 10, offset: 8 }">
-        <Button
-          v-if="currentId == 0"
-          style="margin-left: 10px"
-          type="primary"
-          @click="createUnitApply"
-          >申领登记</Button
-        >
-        <Button
-          v-if="currentId !== 0 && currentStatus == null"
-          style="margin-left: 10px"
-          type="primary"
-          @click="sendUnitApply"
-          >发起申领</Button
-        >
-        <Button
-          v-if="currentId !== 0 && currentStatus == 0"
-          style="margin-left: 10px"
-          type="primary"
-          @click="queryOrder"
-          >查询结果</Button
-        >
-        <Button style="margin-left: 10px" @click="showDrawer"
-          >历史申领记录</Button
-        >
-      </FormItem>
-    </Form>
+              <input v-model="modelRef.idCardFrontPicId" hidden />
+              <Upload
+                accept="image/*"
+                action="/api2/upload/uploadfile"
+                v-model:fileList="idCardFrontPicFileList"
+                :beforeUpload="beforeUpload"
+                list-type="picture"
+                @change="info => handleChange(info, 'idCardFrontPicId')"
+                :disabled="disabledUpload"
+              >
+                <Button block :disabled="disabledUpload">
+                  <UploadOutlined />
+                  点击{{ modelRef.idCardFrontPicId ? "替换" : "上传" }}
+                </Button>
+              </Upload>
+            </FormItem>
+            <FormItem
+              label="身份证背面照"
+              v-bind="validateInfos.idCardBackPicId"
+            >
+              <input v-model="modelRef.idCardBackPicId" hidden />
+              <Upload
+                accept="image/*"
+                action="/api2/upload/uploadfile"
+                v-model:fileList="idCardBackPicFileList"
+                :beforeUpload="beforeUpload"
+                list-type="picture"
+                @change="info => handleChange(info, 'idCardBackPicId')"
+                :disabled="disabledUpload"
+              >
+                <Button block :disabled="disabledUpload">
+                  <UploadOutlined />
+                  点击{{ modelRef.idCardBackPicId ? "替换" : "上传" }}
+                </Button>
+              </Upload>
+            </FormItem>
+            <FormItem
+              label="营业许可证照片"
+              v-bind="validateInfos.businessLicensePicId"
+            >
+              <input v-model="modelRef.businessLicensePicId" hidden />
+              <Upload
+                accept="image/*"
+                action="/api2/upload/uploadfile"
+                v-model:fileList="businessLicenseFileList"
+                :beforeUpload="beforeUpload"
+                list-type="picture"
+                @change="info => handleChange(info, 'businessLicensePicId')"
+                :disabled="disabledUpload"
+              >
+                <Button block :disabled="disabledUpload">
+                  <UploadOutlined />
+                  点击{{ modelRef.businessLicensePicId ? "替换" : "上传" }}
+                </Button>
+              </Upload>
+            </FormItem>
+          </Col>
+        </Row>
+        <FormItem :wrapper-col="{ span: 12, offset: 10 }">
+          <Button v-if="progressingId" type="primary" @click="onSubmit"
+            >查询</Button
+          >
+          <Button v-else type="primary" @click="onSubmit">提交</Button>
+          <Button style="margin-left: 10px" @click="toggleDrawer"
+            >历史提交记录</Button
+          >
+        </FormItem>
+      </Form>
+    </Spin>
   </div>
   <Drawer
     title="历史申领记录"
     placement="right"
     :closable="false"
-    v-model:visible="drawVisible"
-    width="350px"
+    v-model:visible="showDrawer"
+    width="450px"
   >
+    <Empty v-if="!(unitApplyList && unitApplyList.length > 0)" />
     <div
       v-for="unitApply in unitApplyList"
       :key="unitApply.id"
-      style="padding:10px"
+      style="padding: 10px"
     >
-      <p>
-        {{ unitApply.unitName
-        }}<Tag :color="['orange', 'green', 'red'][unitApply.status]">{{
-          ["进行中", "已成功", "已失败"][unitApply.status] || "未申领"
-        }}</Tag>
-      </p>
-      <p>经办人: {{ unitApply.operatorName }} {{ unitApply.operatorPhone }}</p>
-      <p>发起时间: {{ unitApply.time }}</p>
+      <Card size="small">
+        <template #title>
+          {{ unitApply.unitName
+          }}<Tag :color="['orange', 'green', 'red'][unitApply.status]">{{
+            ["进行中", "已成功", "已失败"][unitApply.status] || "未申领"
+          }}</Tag>
+        </template>
+        <template #extra>
+          <Button
+            v-if="unitApply.status == 2"
+            type="link"
+            @click="modifyOrder(unitApply)"
+            :disabled="disabledModify"
+            >重新申请</Button
+          >
+        </template>
+        <p>
+          经办人: {{ unitApply.operatorName }} {{ unitApply.operatorPhone }}
+        </p>
+        <p>发起时间: {{ unitApply.time }}</p>
+        <p v-if="unitApply.dealReason">
+          不通过原因:{{ unitApply.dealReason }}
+        </p></Card
+      >
     </div>
   </Drawer>
 </template>
 <style lang="less">
-.ca_apply {
+.ca-apply {
   width: 800px;
   .ant-upload {
     width: 100%;
@@ -165,50 +242,29 @@
 <script>
 import {
   Form,
-  Input,
-  Upload,
-  message,
-  Cascader,
-  Button,
-  Select,
   Row,
   Col,
+  Button,
+  Input,
+  Cascader,
+  Upload,
+  message,
+  Spin,
+  Select,
   Drawer,
+  Empty,
   Tag,
+  Card,
   Modal,
   Result
 } from "ant-design-vue";
 import { UploadOutlined } from "@ant-design/icons-vue";
+import { useForm } from "@ant-design-vue/use";
+import { computed, onMounted, reactive, ref, toRaw, inject } from "vue";
 import { get, post } from "@/services/http";
-import { delay } from "@/services/util";
 import regex from "@/services/regex";
+import { toBit } from "@/services/util";
 import { useRouter } from "vue-router";
-const picUploadConfig = [
-  {
-    label: "授权委托书照片",
-    name: "loaPicId",
-    disabled: false,
-    defaultFileList: []
-  },
-  {
-    label: "身份证正面照片",
-    name: "idCardFrontPicId",
-    disabled: false,
-    defaultFileList: []
-  },
-  {
-    label: "身份证背面照片",
-    name: "idCardBackPicId",
-    disabled: false,
-    defaultFileList: []
-  },
-  {
-    label: "营业执照照片",
-    name: "businessLicensePicId",
-    disabled: false,
-    defaultFileList: []
-  }
-];
 async function getAreaOptions(code) {
   const res = await get("/api2/CA/AreaOptions", { code });
   if (res.errorCode == 0) {
@@ -219,192 +275,218 @@ async function getAreaOptions(code) {
     }));
   }
 }
+const editfeildFlag = toBit("0001");
+const editPicFlag = toBit("0010");
+const editModifyFlag = toBit("0100");
 export default {
   components: {
     Form,
     FormItem: Form.Item,
-    Input,
-    Upload,
-    Cascader,
-    UploadOutlined,
-    Button,
-    Select,
-    Option: Select.Option,
     Row,
     Col,
+    Button,
+    Input,
+    Cascader,
+    Upload,
+    UploadOutlined,
+    Spin,
+    Select,
+    Option: Select.Option,
     Drawer,
+    Empty,
     Tag,
+    Card,
     Result
   },
-  data() {
-    return {
-      uploadConfig: picUploadConfig,
-      labelCol: { span: 8 },
-      wrapperCol: { span: 14 },
-      form: {},
-      currentId: 0,
-      currentStatus: null,
-      unitApplyList: [],
-      areaOptions: [],
-      organizeList: [],
-      drawVisible: false,
-      disabled: true,
-      countdown: 0,
-      isSuccess: false,
-      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()
-          }
-        ],
-        phoneCode: [
-          { required: true, message: "请输入短信验证码", trigger: "change" }
-        ]
-      },
-      router: useRouter()
-    };
-  },
-  async created() {
-    const organizeInfo = await get("/api2/UserInfo/Organize");
-    const unitApplyList = await get("/api2/CA/UnitApplyList");
-    this.areaOptions = await getAreaOptions("");
-    this.organizeList = organizeInfo.data;
-    const current = unitApplyList.data.find(
-      d => d.status == null || d.status == 0
+  setup() {
+    const modelRef = reactive({
+      id: null,
+      orderNo: null,
+      unitName: "",
+      tydm: "",
+      operatorName: "",
+      operatorId: "",
+      operatorPhone: "",
+      phoneCode: "",
+      code: [],
+      address: "",
+      loaPicId: null,
+      idCardFrontPicId: null,
+      idCardBackPicId: null,
+      businessLicensePicId: null
+    });
+    const loaPicFileList = ref([]);
+    const idCardFrontPicFileList = ref([]);
+    const idCardBackPicFileList = ref([]);
+    const businessLicenseFileList = ref([]);
+    const rulesRef = reactive({
+      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",
+          type: "number"
+        }
+      ],
+      idCardFrontPicId: [
+        {
+          required: true,
+          message: "请上传身份证正面照片",
+          trigger: "change",
+          type: "number"
+        }
+      ],
+      idCardBackPicId: [
+        {
+          required: true,
+          message: "请上传身份证背面照片",
+          trigger: "change",
+          type: "number"
+        }
+      ],
+      businessLicensePicId: [
+        {
+          required: true,
+          message: "请上营业执照照片",
+          trigger: "change",
+          type: "number"
+        }
+      ],
+      phoneCode: [
+        { required: true, message: "请输入短信验证码", trigger: "change" }
+      ]
+    });
+    const { resetFields, validate, validateInfos } = useForm(
+      modelRef,
+      rulesRef
     );
-    this.isSuccess = !!unitApplyList.data.find(d => d.status == 1);
-    this.unitApplyList = unitApplyList.data;
-    if (current) {
-      //省市信息初始化
-      const [code0, code1] = current.code;
-      var option0 = this.areaOptions.find(o => o.value == code0);
-      option0.children = await getAreaOptions(code0);
-      var option1 = option0.children.find(o => o.value == code1);
-      option1.children = await getAreaOptions(code1);
-      this.form = current;
-      this.currentId = current.id;
-      this.currentStatus = current.status;
-      picUploadConfig[0].defaultFileList.push({
-        uid: -1,
-        status: "done",
-        url: current.loaPicPath
+    const useReload = inject("reload");
+    const queryUnitApply = async id => {
+      const res = await get("/api2/CA/QueryUnitApplyResult", {
+        id
       });
-      picUploadConfig[1].defaultFileList.push({
-        uid: -1,
-        status: "done",
-        url: current.idCardFrontPicPath
-      });
-      picUploadConfig[2].defaultFileList.push({
-        uid: -1,
-        status: "done",
-        url: current.idCardBackPicPath
-      });
-      picUploadConfig[3].defaultFileList.push({
-        uid: -1,
-        status: "done",
-        url: current.businessLicensePicPath
-      });
-    } else {
-      this.disabled = false;
-    }
-  },
-  methods: {
-    handleChange(config, info) {
-      const name = config.name;
-      if (info.file.status !== "uploading") {
-        // console.log(info.file.status,info.file, info.fileList);
+      if (res.errorCode == 0) {
+        Modal.success({
+          title: "完成",
+          content: "数字证书申领流程已完成",
+          onOk: useReload
+        });
+      } else {
+        Modal.info({ title: "当前状态", content: res.errorMsg });
       }
-      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} 文件上传失败`);
+    };
+    const sendUnitApply = async id => {
+      const resp = await get("/api2/CA/SendCreateOrder", {
+        orderId: id
+      });
+      if (resp.errorCode != 0) {
+        message.error(resp.errorMsg);
+      } else {
+        message.success("发起申请成功", 2, useReload);
       }
-      if (info.file.status === "removed") {
-        config.disabled = false;
-        this.form[name] = null;
+    };
+    const createUnitApply = async () => {
+      try {
+        await validate();
+        const resp = await post("/api2/CA/createUnitApply", toRaw(modelRef));
+        if (resp.errorCode != 0) {
+          message.error(resp.errorMsg);
+        } else {
+          message.success("提交成功", (onclose = useReload));
+          await sendUnitApply(resp.data);
+        }
+      } catch {
+        0;
       }
-    },
-    beforeUpload(file) {
+    };
+    const modifyUnitApply = async () => {
+      try {
+        await validate([
+          "loaPicId",
+          "idCardFrontPicId",
+          "idCardBackPicId",
+          "businessLicensePicId"
+        ]);
+        const resp = await post("/api2/CA/modifyUnitApply", toRaw(modelRef));
+        if (resp.errorCode != 0) {
+          message.error(resp.errorMsg);
+        } else {
+          message.success("提交成功", (onclose = useReload));
+          await sendUnitApply(resp.data);
+        }
+      } catch (error) {
+        1;
+      }
+    };
+    const onSubmit = async e => {
+      e.preventDefault();
+      if (progressingId == 0) {
+        if (modelRef.orderNo) {
+          await modifyUnitApply();
+        } else {
+          await createUnitApply();
+        }
+      } else {
+        var current = toRaw(unitApplyList.value).find(
+          p => p.id == progressingId
+        );
+        if (current.status == null) {
+          await sendUnitApply(progressingId);
+        } else if (current.status == 0) {
+          await queryUnitApply(progressingId);
+        }
+      }
+    };
+    const beforeUpload = file => {
       const isJpgOrPng =
         file.type === "image/jpeg" || file.type === "image/png";
       if (!isJpgOrPng) {
@@ -415,9 +497,29 @@ export default {
         message.error("文件大小超过2MB!");
       }
       return isJpgOrPng && isLt2M;
-    },
-    async loadAreaOptions(selectedOptions) {
-      console.log(selectedOptions);
+    };
+    const handleChange = (info, name) => {
+      console.log(info.file.status, info.file, info.fileList);
+      // if (info.file.status !== "uploading") {
+      // }
+      if (info.file.status === "done") {
+        message.success(`${info.file.name} 文件上传成功`);
+        modelRef[name] = info.file.response.id;
+        if (info.fileList.length > 1) {
+          info.fileList.shift();
+        }
+      } else if (info.file.status === "error") {
+        message.error(`${info.file.name} 文件上传失败`);
+        info.fileList.pop();
+      }
+      if (info.file.status === "removed") {
+        modelRef[name] = null;
+      }
+    };
+    const areaOptions = ref([]);
+    const spining = ref(false);
+    const organizeList = ref([]);
+    const loadAreaOptions = async selectedOptions => {
       const targetOption = selectedOptions[selectedOptions.length - 1];
       targetOption.loading = true;
       const options = await getAreaOptions(targetOption.value);
@@ -425,82 +527,162 @@ export default {
         targetOption.children = options;
       }
       targetOption.loading = false;
-      this.areaOptions = [...this.areaOptions];
-    },
-    async createUnitApply() {
-      try {
-        await this.$refs.ruleForm.validate();
-      } catch (error) {
-        console.log("error", error);
-        return;
-      }
-      const resp = await post("/api2/CA/createUnitApply", this.form);
-      if (resp.errorCode != 0) {
-        message.error(resp.errorMsg);
-      } else {
-        message.success("登记成功");
-        this.disabled = true;
-        this.currentId = resp.data;
-        this.currentStatus = null;
-        await delay(500);
-        await this.sendUnitApply();
-      }
-    },
-    async sendUnitApply() {
-      if (this.currentId && this.currentStatus === null) {
-        const resp = await get("/api2/CA/SendCreateOrder", {
-          orderId: this.currentId
-        });
-        if (resp.errorCode != 0) {
-          message.error(resp.errorMsg);
-        } else {
-          message.success(resp.errorMsg);
-          this.currentStatus = 0;
-        }
-      }
-    },
-    //查询结果
-    async queryOrder() {
-      const res = await get("/api2/CA/QueryUnitApplyResult", {
-        id: this.currentId
-      });
-      if (res.errorCode == 0) {
-        Modal.success({ title: "完成", content: "数字证书申领流程已完成" });
-      } else {
-        Modal.info({ title: "当前状态", content: res.errorMsg });
-      }
-    },
-    showDrawer() {
-      this.drawVisible = true;
-    },
-    async getCode() {
-      if (!regex.Phone.test(this.form.operatorPhone)) {
-        message.error("请输入正确的手机号码");
-        return;
-      }
-      var res = await get("/api2/CA/GetPhoneCode", {
-        type: 1,
-        phone: this.form.operatorPhone
-      });
-      if (res.errorCode !== 0) {
-        message.error(res.errorMsg);
-        return;
-      }
-      this.countdown = 60;
-      var handle = setInterval(() => {
-        this.countdown--;
-        this.countdown < 0 && clearInterval(handle);
-      }, 1000);
-    },
-    async getTydm() {
-      const unitName = this.form.unitName;
+    };
+    const getTydm = async () => {
+      const unitName = modelRef.unitName;
       const res = await get("/api2/CA/GetTydm", { unitName });
       if (res.errorCode !== 0) {
         message.error(res.errorMsg);
       } else {
-        this.form.tydm = res.data;
+        modelRef.tydm = res.data;
       }
-    }
+    };
+    const countdown = ref(0);
+    const getCode = async () => {
+      try {
+        await validate("operatorPhone");
+      } catch (error) {
+        return;
+      }
+      var res = await get("/api2/CA/GetPhoneCode", {
+        type: 1,
+        phone: modelRef.operatorPhone
+      });
+      if (res.errorCode !== 0) {
+        message.error(res.errorMsg);
+        return;
+      }
+      countdown.value = 60;
+      var handle = setInterval(() => {
+        countdown.value--;
+        countdown.value < 0 && clearInterval(handle);
+      }, 1000);
+    };
+    const editStatus = ref(toBit("0000"));
+    const disabledFeild = computed(
+      () => (editStatus.value & editfeildFlag) == 0
+    );
+    const disabledUpload = computed(
+      () => (editStatus.value & editPicFlag) == 0
+    );
+    const disabledModify = computed(
+      () => (editStatus.value & editModifyFlag) == 0
+    );
+    const initPage = unitApply => {
+      for (const key in toRaw(modelRef)) {
+        if (Object.hasOwnProperty.call(unitApply, key)) {
+          const element = unitApply[key];
+          modelRef[key] = element;
+        }
+      }
+      loaPicFileList.value = [
+        {
+          uid: "-1",
+          status: "done",
+          url: unitApply.loaPicPath
+        }
+      ];
+      idCardFrontPicFileList.value = [
+        {
+          uid: "-1",
+          status: "done",
+          url: unitApply.idCardFrontPicPath
+        }
+      ];
+      idCardBackPicFileList.value = [
+        {
+          uid: "-1",
+          status: "done",
+          url: unitApply.idCardBackPicPath
+        }
+      ];
+      businessLicenseFileList.value = [
+        {
+          uid: "-1",
+          status: "done",
+          url: unitApply.businessLicensePicPath
+        }
+      ];
+    };
+    const modifyOrder = unitApply => {
+      initPage(unitApply);
+      editStatus.value = toBit("0000") | editPicFlag | editModifyFlag;
+    };
+    let progressingId = 0;
+    const unitApplyList = ref([]);
+    const isSuccess = ref(false);
+    onMounted(async () => {
+      spining.value = true;
+      const options = await getAreaOptions("");
+      const organizeInfoRes = await get("/api2/UserInfo/Organize");
+      if (organizeInfoRes.errorCode != 0) {
+        message.error(organizeInfoRes.errorMsg);
+        spining.value = false;
+        return;
+      }
+      organizeList.value = organizeInfoRes.data;
+      const unitApplyListRes = await get("/api2/CA/UnitApplyList");
+      if (unitApplyListRes.errorCode != 0) {
+        message.error(unitApplyListRes.errorMsg);
+        spining.value = false;
+        return;
+      }
+      unitApplyList.value = unitApplyListRes.data;
+      const current = unitApplyListRes.data.find(
+        d => d.status == null || d.status == 0
+      );
+      if (current) {
+        progressingId = current.id;
+        initPage(current);
+      } else {
+        const successApply = unitApplyListRes.data.find(d => d.status == 1);
+        if (successApply) {
+          isSuccess.value = true;
+        } else {
+          editStatus.value =
+            editStatus.value | editfeildFlag | editPicFlag | editModifyFlag;
+        }
+      }
+      areaOptions.value = options;
+      spining.value = false;
+      console.log(toRaw(modelRef));
+    });
+    const showDrawer = ref(false);
+    const toggleDrawer = () => {
+      showDrawer.value = !showDrawer.value;
+    };
+    return {
+      modelRef,
+      loaPicFileList,
+      idCardFrontPicFileList,
+      idCardBackPicFileList,
+      businessLicenseFileList,
+      rulesRef,
+      validate,
+      validateInfos,
+      editStatus,
+      onSubmit,
+      resetFields,
+      beforeUpload,
+      handleChange,
+      areaOptions,
+      loadAreaOptions,
+      spining,
+      organizeList,
+      unitApplyList,
+      getTydm,
+      getCode,
+      countdown,
+      disabledFeild,
+      disabledUpload,
+      disabledModify,
+      showDrawer,
+      toggleDrawer,
+      isSuccess,
+      modifyOrder,
+      router: useRouter(),
+      progressingId
+    };
   }
 };
 </script>
diff --git a/src/views/CA/UserApply.vue b/src/views/CA/UserApply.vue
index 7e35bca..db85e34 100644
--- a/src/views/CA/UserApply.vue
+++ b/src/views/CA/UserApply.vue
@@ -30,7 +30,7 @@
         <Button type="primary" @click="onSubmit" v-if="!disableEdit"
           >前往申领</Button
         >
-        <Button type="primary" @click="goCertUrl" v-if="disableEdit"
+        <Button type="primary" @click="getStatus" v-if="disableEdit"
           >继续申领流程</Button
         >
         <Button style="margin-left: 10px" @click="showDrawer"
@@ -133,6 +133,26 @@ export default {
       } else {
         message.error(res.errorMsg);
       }
+    },
+    async getStatus() {
+      const res = await get("/api2/CA/UserApplyGetStatus", {
+        id: this.currentApplyId
+      });
+      if (res.errorCode == 0) {
+        const status = res.data;
+        message.info(
+          "当前状态:" +
+            [
+              "待审核,请耐心等待结果",
+              "审核通过,请等待授权通过",
+              "已授权，请等待证书发放",
+              "已发放，申领已完成",
+              "已拒绝，请重新申请或联系管理员"
+            ][status]
+        );
+      } else {
+        await this.goCertUrl();
+      }
     }
   },
   components: {
diff --git a/vue.config.js b/vue.config.js
index 6e12d0c..53c32b8 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -19,5 +19,8 @@ module.exports = {
       .options({
         fix: true
       });
+  },
+  configureWebpack: {
+    devtool: "source-map"
   }
 };