登录模块完成

.env

+VUE_APP_API=/dev
\ No newline at end of file

src/api/apis_moudles/author.js

+// 状态管理api
+export default {
+  getVerifyImg: "/backstage/user/getVerificationCode/authority",
+  login: "/backstage/user/login/authority",
+  loginOut: "/backstage/user/exit",
+  getVerifyEmail: "/backstage/user/pwdEmail",
+  pwdReset: "/backstage/user/resetPwd",
+};

src/api/apis_moudles/base.js

 // 基础api
 export default {
   getUserInfo: `/getUserInfo`,
+  corporateCodeList: "/backstage/auth/corporateList",
 };

src/api/apis_moudles/customer.js

 // 客户管理api
-export default {};
+export default {
+  getCustomerList: "/backstage/auth/patientList",
+};

src/api/apis_moudles/index.js

 // 基础
 import base from "./base";
+// 用户状态api
+import author from "./author";
 // 报表api
 import bi from "./bi";
 // 收费查询api
@@ -17,6 +19,7 @@ import welfare from "./welfare";
 
 const apis = {
   ...base,
+  ...author,
   ...bi,
   ...chargeQuery,
   ...customer,

src/api/env.js

 // 根据环境变量确认baseurl
 let baseUrl = "";
 switch (process.env.NODE_ENV) {
-  case "dev":
+  case "development":
     // 本地地址，dev会被代理到测试环境
-    baseUrl = `${window.location.protocol}//${window.location.host}/dev`;
+    baseUrl = "/dev";
     break;
   // 正式地址
   case "production":

src/api/funcs_modules/author.js

+// 用户管理函数库
+import apis from "../apis_moudles";
+import req from "../request";
+
+function toQuery(params) {
+  if (!params) {
+    return "";
+  }
+  let query = [];
+  for (let i in params) {
+    query.push(`${i}=${params[i]}`);
+  }
+  return query.join("&");
+}
+// 对象数组
+const GETVERIFYIMG = function () {
+  return req.get(apis.getVerifyImg, { responseType: "blob" });
+};
+
+const GETVERIFYEMAIL = function (params) {
+  const queryStr = toQuery(params);
+  return req.post(apis.getVerifyEmail + "?" + queryStr);
+};
+
+const LOGIN = function (params) {
+  const queryStr = toQuery(params);
+  return req.post(apis.login + "?" + queryStr);
+};
+
+const LOGINOUT = function () {
+  return req.get(apis.loginOut);
+};
+
+const RESETPASSWORD = function (params) {
+  const queryStr = toQuery(params);
+  return req.post(apis.pwdReset + "?" + queryStr);
+};
+
+export default { GETVERIFYIMG, GETVERIFYEMAIL, LOGIN, LOGINOUT, RESETPASSWORD };

src/api/funcs_modules/base.js

@@ -8,6 +8,12 @@ const GETUSERINFO = (params) => {
     params,
   });
 };
+// get corporate Code
+const GETCORPORATECODE = (data) => {
+  return req.post(apis.corporateCodeList, {
+    data,
+  });
+};
 
 // 对象数组
-export default { GETUSERINFO };
+export default { GETUSERINFO, GETCORPORATECODE };

src/api/funcs_modules/customer.js

 // 客户管理函数库
-// import apis from "../apis_moudles/index";
-// import req from "../request";
+import apis from "../apis_moudles/";
+import req from "../request";
 
 // 对象数组
-export default {};
+const GETCUSTOMERLIST = function (data) {
+  return req.post(apis.getCustomerList, data);
+};
+
+export default { GETCUSTOMERLIST };

src/api/funcs_modules/index.js

 // 基础模块
 import base from "./base";
+// 用户状态
+import author from "./author";
 // 报表api
 import bi from "./bi";
 // 收费查询api
@@ -16,6 +18,7 @@ import verification from "./verification";
 import welfare from "./welfare";
 const funcs = {
   ...base,
+  ...author,
   ...bi,
   ...chargeQuery,
   ...customer,

src/api/request.js

 // axios二次封装
 import axios from "axios"; // 引入 axios
-import baseUrl from "./env"; // 基础url
+// import baseUrl from "./env"; // 基础url
 import Vue from "vue";
 import code from "./state_code"; // 状态码维护
 import store from "@/store";
@@ -9,7 +9,7 @@ const service = axios.create({
   validateStatus(status) {
     return status >= 200 && status <= 504; // 合法状态码
   },
-  baseURL: baseUrl, // 基础请求路径
+  baseURL: process.env.VUE_APP_API, // 基础请求路径
   timeout: 10000, // 请求超时
 });
 // 重复尝试此时
@@ -30,6 +30,7 @@ service.interceptors.request.use(
         config.data = {};
       }
     }
+    console.log(config);
     return config;
   },
   (error) => {
@@ -50,14 +51,11 @@ service.interceptors.response.use(
         // 请求失败
         reject(response);
       } else {
+        const { returnCode, returnMsg } = response.data || {};
         // 判断token有效
-        const TOKENSTATE = code.TOKEN_INVLIDE_TO_LOGIN(response.data.status);
+        const TOKENSTATE = code.TOKEN_INVLIDE_TO_LOGIN(returnCode);
         // 全局错误拦截
-        const PUBSTATE = code.PUB_ERR(
-          response.data.status,
-          response.data.message,
-          response.config
-        );
+        const PUBSTATE = code.PUB_ERR(returnCode, returnMsg, response.config);
         // 请求成功，但逻辑或者业务有错，返回具体数据，根据业务决定是否要提示 有token失效全局异常不返回
         if (TOKENSTATE && PUBSTATE) {
           resolve(response.data);

src/api/state_code.js

@@ -6,7 +6,7 @@ let that = new Vue();
 // token失效
 const TOKEN_INVLIDE_TO_LOGIN = (code) => {
   // 状态码判断
-  if (code) {
+  if (code === "1012") {
     if (store.state.common.userInfo !== "") {
       that.$msg.error({
         message: "登陆失败",
@@ -25,7 +25,11 @@ const TOKEN_INVLIDE_TO_LOGIN = (code) => {
 };
 // 全局错误处理
 const PUB_ERR = (code, message, config) => {
+  if (config.responseType && config.responseType === "blob") {
+    return true;
+  }
   console.log("错误信息", code, message, config);
+  return true;
 };
 
 export default {

src/assets/style/common.less

+@import './reset.less';
+
 // 公共样式
 li {
     list-style: none;
 }
 
-* {
-  padding: 0;
-  margin: 0;
-}
+// * {
+//     padding: 0;
+//     margin: 0;
+// }
 
 button {
     outline: none !important;
@@ -26,6 +28,18 @@ button::-moz-focus-inner {
     box-shadow: none !important;
 }
 
+.mar-left10 {
+    .mg-l(40);
+}
+
+// form部分全局样式重置
+.ant-form label{
+  .fs(19);
+}
+.ant-calendar-picker {
+    width: 100%;
+}
+
 // 媒体查询
 // 文本超长
 .too-long(@num) {

src/assets/style/reset.less

+html,
+body,
+span,
+object,
+iframe,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+blockquote,
+pre,
+abbr,
+address,
+cite,
+code,
+del,
+dfn,
+em,
+img,
+ins,
+kbd,
+q,
+samp,
+small,
+strong,
+sub,
+sup,
+var,
+b,
+i,
+dl,
+dt,
+dd,
+ol,
+ul,
+li,
+fieldset,
+form,
+label,
+legend,
+table,
+caption,
+tbody,
+tfoot,
+thead,
+tr,
+th,
+td,
+article,
+aside,
+canvas,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+menu,
+nav,
+section,
+summary,
+time,
+mark,
+audio,
+video {
+  margin: 0;
+  padding: 0;
+  border: 0;
+//   outline: 0;
+  font-size: 100%;
+  vertical-align: baseline;
+  background: transparent;
+//   box-sizing: border-box;
+}
+
+body {
+  line-height: 1;
+  height: auto;
+}
+
+:focus {
+  outline: 1;
+}
+
+article,
+aside,
+canvas,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+menu,
+nav,
+section,
+summary {
+  display: block;
+}
+
+ul {
+  list-style: none;
+}
+
+blockquote,
+q {
+  quotes: none;
+}
+
+blockquote:before,
+blockquote:after,
+q:before,
+q:after {
+  content: "";
+  content: none;
+}
+
+a {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font-size: 100%;
+  vertical-align: baseline;
+  background: transparent;
+}
+
+ins {
+  background-color: #ff9;
+  color: #000;
+  text-decoration: none;
+}
+
+mark {
+  background-color: #ff9;
+  color: #000;
+  font-style: italic;
+  font-weight: bold;
+}
+
+del {
+  text-decoration: line-through;
+}
+
+abbr[title],
+dfn[title] {
+  border-bottom: 1px dotted #000;
+
+  cursor: help;
+}
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+hr {
+  display: block;
+  height: 1px;
+  border: 0;
+  border-top: 1px solid #cccccc;
+  margin: 1em 0;
+  padding: 0;
+}
+
+input,
+select {
+  vertical-align: middle;
+}

src/components/Antd/index.js

 import Vue from "vue";
-import { Button, Input, notification, menu, dropdown } from "ant-design-vue";
+import {
+  Button,
+  Input,
+  Select,
+  DatePicker,
+  notification,
+  menu,
+  dropdown,
+  FormModel,
+  Row,
+  Col,
+  Table,
+  InputNumber,
+  message,
+} from "ant-design-vue";
 
 export default () => {
-  let els = [Button, Input, notification, menu, dropdown];
+  let els = [
+    Button,
+    Input,
+    notification,
+    menu,
+    dropdown,
+    FormModel,
+    Row,
+    Col,
+    Select,
+    DatePicker,
+    Table,
+    InputNumber,
+    message,
+  ];
   // 注册
   els.forEach((item) => {
     Vue.use(item);
   });
   // 全局提示
   Vue.prototype.$msg = notification;
+  Vue.prototype.$message = message;
 };

src/components/Lodash/index.js

-import { after } from "lodash";
+import { after, cloneDeep } from "lodash";
 import Vue from "vue";
-let lodashs = { after };
+let lodashs = { after, cloneDeep };
 export default () => {
   Vue.prototype.$lodash = lodashs;
 };

src/router/index.js

@@ -4,6 +4,8 @@ import RouterGuard from "./router.config";
 Vue.use(VueRouter);
 // 布局容器
 import Layout from "../views/layout/index.vue";
+// 登录模块
+import author from "./modules/author";
 // 客户管理
 import customer from "./modules/customer";
 // 福利信息管理
@@ -26,7 +28,7 @@ const routes = [
     children: [
       {
         path: "/",
-        redirect: "/customer",
+        redirect: "/login",
       },
       customer,
       welfare,
@@ -37,6 +39,7 @@ const routes = [
       bi,
     ],
   },
+  author,
 ];
 
 const router = new VueRouter({

src/router/modules/author.js

+export default {
+  path: "/",
+  component: () => {
+    return import(/* webpackChunkName: "bi" */ "@/views/author");
+  },
+  children: [
+    {
+      path: "login",
+      name: "login",
+      component: () => import("@/views/author/login"),
+    },
+    {
+      path: "forget",
+      name: "forget",
+      component: () => import("@/views/author/forget"),
+    },
+  ],
+};

src/router/modules/customer.js

 // 客户信息路由表,分包名称:customer
 export default {
   path: "/customer",
-  name: "Customer",
+  redirect: "/customer/info",
   component: () => {
     return import(/* webpackChunkName: "customer" */ "@/views/customer");
   },
+  children: [
+    {
+      path: "info",
+      name: "CustomerInfo",
+      component: () => import("@/views/customer/info"),
+    },
+  ],
 };

src/router/modules/menu.js

 export default [
   {
     icon: "ssiuser",
-    path: "customer",
+    path: "1",
     title: "客户信息",
     children: [
       {
-        path: "/customer",
+        path: "/customer/info",
         title: "客户信息明细",
       },
       {

src/router/router.config.js

@@ -15,12 +15,10 @@ export default (VueRouter, router) => {
   // 页面路由切换时进度条
   // let router = new VueRouter();
   router.beforeEach((to, from, next) => {
-    console.log(to.path);
     NProgress.start();
     next();
   });
   router.afterEach(() => {
-    console.log("done");
     NProgress.done();
   });
 };

src/views/author/forget.vue

+<template>
+  <div class="forget">
+    <h2 class="title">商保管理系统</h2>
+    <div class="content">
+      <p class="module-title">
+        <router-link to="/login" replace>密码登录</router-link>
+        <span class="_forget">忘记密码</span>
+      </p>
+      <div class="steps">
+        <div :class="{ 'step-item': true, 'step-active': activeStep === '1' }">
+          <div class="_flex">
+            <p class="circle">1</p>
+            <p class="line"></p>
+          </div>
+          <p>验证邮箱</p>
+        </div>
+        <div :class="{ 'step-item': true, 'step-active': activeStep === '2' }">
+          <div class="_flex">
+            <p class="line"></p>
+            <p class="circle">2</p>
+          </div>
+          <p>填写新密码</p>
+        </div>
+      </div>
+      <a-form-model ref="form" :model="form" :rules="formRules">
+        <div v-if="activeStep === '1'">
+          <a-form-model-item prop="userName">
+            <a-input
+              size="large"
+              v-model="form.userName"
+              placeholder="请输入邮箱"
+            ></a-input>
+          </a-form-model-item>
+          <a-form-model-item prop="verificationCode">
+            <a-input
+              size="large"
+              v-model="form.verificationCode"
+              placeholder="请输入验证码"
+            >
+              <a-button type="primary" slot="addonAfter" @click="getVerifyCode"
+                >发送验证码至邮箱</a-button
+              >
+            </a-input>
+          </a-form-model-item>
+          <a-form-model-item>
+            <a-button size="large" type="primary" block @click="handlerNext"
+              >下一步</a-button
+            >
+          </a-form-model-item>
+        </div>
+        <div v-if="activeStep === '2'">
+          <a-form-model-item prop="passWord">
+            <a-input
+              size="large"
+              type="password"
+              v-model="form.passWord"
+              placeholder="请输入新密码"
+            ></a-input>
+          </a-form-model-item>
+          <a-form-model-item prop="newPwd">
+            <a-input
+              size="large"
+              type="password"
+              v-model="form.newPwd"
+              placeholder="再次输入新密码"
+            ></a-input>
+          </a-form-model-item>
+          <a-form-model-item>
+            <a-button size="large" type="primary" block @click="handlerReset"
+              >确定重置密码</a-button
+            >
+          </a-form-model-item>
+        </div>
+      </a-form-model>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      activeStep: "1",
+      form: {},
+      formRules: {
+        userName: [{ required: true, message: "请输入邮箱" }],
+        passWord: [{ required: true, message: "请输入密码" }],
+        newPwd: [
+          { required: true, message: "请再次输入新密码" },
+          { validator: this.isSamePwd },
+        ],
+        verificationCode: [{ required: true, message: "请输入验证码" }],
+      },
+      verifyImg: "",
+    };
+  },
+  mounted() {
+    // this._getVerifyImg();
+  },
+  methods: {
+    isSamePwd(rule, value, callback) {
+      if (value && this.form.passWord) {
+        if (value !== this.form.passWord) {
+          return callback(new Error("两次密码输入不一致"));
+        }
+      }
+      callback();
+    },
+    getVerifyCode() {
+      this.$refs.form.validateField(["userName"], (valid) => {
+        if (valid) {
+          return false;
+        }
+        const data = {
+          userName: this.form.userName,
+        };
+        this._getVerifyEmail(data);
+      });
+    },
+    handlerNext() {
+      this.$refs.form.validateField(
+        ["userName", "verificationCode"],
+        (valid) => {
+          if (valid) {
+            return false;
+          }
+          this.activeStep = "2";
+        }
+      );
+    },
+    handlerReset() {
+      this.$refs.form.validate((valid) => {
+        if (!valid) {
+          return false;
+        }
+        const { userName, verificationCode, newPwd } = this.form;
+        this._reset({ userName, verificationCode, newPwd });
+      });
+    },
+    _getVerifyEmail(data) {
+      this.$apis.GETVERIFYEMAIL(data).then((res) => {
+        if (res.returnCode === "0000") {
+          this.$message.success(res.returnMsg || "发送成功");
+        } else {
+          this.$message.error(res.returnMsg || "发送失败");
+        }
+      });
+    },
+    _reset(data) {
+      this.$apis.RESETPASSWORD(data).then((res) => {
+        if (res.returnCode === "0000") {
+          this.$message.success(res.returnMsg || "修改成功");
+          this.$router.replace("/login");
+        } else {
+          this.$message.error(res.returnMsg || "修改失败");
+        }
+      });
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.forget {
+  .title {
+    position: absolute;
+    top: 0;
+    left: 50%;
+    .fs(21);
+    .lh(29);
+    color: #fff;
+    .pa(20, 17, 20, 17);
+    transform: translate(-50%, -50%);
+    background-color: #2b63ff;
+    &::before,
+    &::after {
+      content: "";
+      position: absolute;
+      top: 0;
+      .h(69);
+      .bd-t(solid, 35, transparent);
+      .bd-b(solid, 35, transparent);
+    }
+    &::before {
+      .l(-20);
+      .bd-r(solid, 20, #2b63ff);
+    }
+    &::after {
+      .r(-20);
+      .bd-l(solid, 20, #2b63ff);
+    }
+  }
+  .steps {
+    .pa(18, 37, 32, 37);
+    display: flex;
+    .step-item {
+      .fs(14);
+      width: 50%;
+      opacity: 0.4;
+      &:first-child {
+        ._flex {
+          .mg-l(20);
+        }
+      }
+      &:last-child {
+        text-align: right;
+        ._flex {
+          .mg-r(20);
+        }
+      }
+    }
+    ._flex {
+      display: flex;
+      align-items: center;
+      .circle {
+        .w(27);
+        .h(27);
+        .fs(12);
+        .lh(27);
+        .mg-b(4);
+        text-align: center;
+        color: #fff;
+        background-color: #373842;
+        border-radius: 50%;
+      }
+      .line {
+        flex: 1;
+        .h(3);
+        background-color: #373842;
+      }
+    }
+    .step-active {
+      opacity: 1;
+    }
+  }
+  .module-title {
+    .fs(19);
+    .lh(29);
+    .mg-b(32);
+    a {
+      color: #373842;
+      opacity: 0.4;
+    }
+    ._forget {
+      float: right;
+      font-weight: bold;
+      .fs(21);
+      color: #373842;
+    }
+  }
+  .ant-button {
+    .mg-t(13);
+  }
+}
+</style>

src/views/author/index.vue

+<template>
+  <div class="author">
+    <div class="content">
+      <h1 class="title">欢迎登陆商保管理系统</h1>
+      <router-view></router-view>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="less" scoped>
+.author {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+  background: url("../../assets/image/login_bg.png") center center no-repeat;
+  background-size: 100% 100%;
+  .title {
+    .fs(120);
+    .lh(168);
+    .pb(90);
+    color: #fff;
+  }
+  .login,
+  .forget {
+    .w(525);
+    .bd-rd(27);
+    .pa(50, 63, 10, 63);
+    margin: 0 auto;
+    position: relative;
+    background-color: #fff;
+  }
+
+  input {
+    background-color: #f8fafb;
+  }
+}
+</style>
+
+<style lang="less">
+.forget,
+.login {
+  .ant-input-group > .ant-input {
+    background-color: #f8fafb;
+  }
+}
+</style>

src/views/author/login.vue

+<template>
+  <div class="login">
+    <h2 class="title">商保管理系统</h2>
+    <div class="content">
+      <p class="module-title">
+        <span>密码登录</span>
+        <router-link class="_forget" to="/forget" replace>忘记密码</router-link>
+      </p>
+      <a-form-model ref="form" :model="form" :rules="formRules">
+        <a-form-model-item prop="userName">
+          <a-input
+            size="large"
+            v-model="form.userName"
+            placeholder="请输入用户名"
+          ></a-input>
+        </a-form-model-item>
+        <a-form-model-item prop="passWord">
+          <a-input
+            size="large"
+            type="password"
+            v-model="form.passWord"
+            placeholder="请输入密码"
+          ></a-input>
+        </a-form-model-item>
+        <a-form-model-item prop="verificationCode">
+          <a-input
+            size="large"
+            v-model="form.verificationCode"
+            placeholder="请输入验证码"
+          >
+            <img
+              :src="verifyImg"
+              class="verify-img"
+              @click="_getVerifyImg"
+              slot="addonAfter"
+            />
+          </a-input>
+        </a-form-model-item>
+        <a-form-model-item>
+          <a-button size="large" type="primary" block @click="handlerLogin"
+            >登录</a-button
+          >
+        </a-form-model-item>
+      </a-form-model>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      form: {},
+      formRules: {
+        userName: [{ required: true, message: "请输入用户名" }],
+        passWord: [{ required: true, message: "请输入密码" }],
+        verificationCode: [{ required: true, message: "请输入验证码" }],
+      },
+      verifyImg: "",
+    };
+  },
+  mounted() {
+    this._getVerifyImg();
+  },
+  methods: {
+    handlerLogin() {
+      this.$refs.form.validate((valid) => {
+        if (!valid) {
+          return false;
+        }
+        this._login();
+      });
+    },
+    _getVerifyImg() {
+      this.$apis.GETVERIFYIMG().then((res) => {
+        const url = window.URL.createObjectURL(res);
+        this.verifyImg = url || "";
+      });
+    },
+    _login() {
+      this.$apis.LOGIN(this.form).then((res) => {
+        console.log(res);
+        if (res.returnCode === "0000") {
+          console.log(res.content);
+          this.$router.replace("/customer");
+        } else {
+          this.$message.error(res.returnMsg || "出现错误");
+          this.form.verificationCode = "";
+          this._getVerifyImg();
+        }
+      });
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.login {
+  .title {
+    position: absolute;
+    top: 0;
+    left: 50%;
+    .fs(21);
+    .lh(29);
+    color: #fff;
+    .pa(20, 17, 20, 17);
+    transform: translate(-50%, -50%);
+    background-color: #2b63ff;
+    &::before,
+    &::after {
+      content: "";
+      position: absolute;
+      top: 0;
+      .h(69);
+      .bd-t(solid, 35, transparent);
+      .bd-b(solid, 35, transparent);
+    }
+    &::before {
+      .l(-20);
+      .bd-r(solid, 20, #2b63ff);
+    }
+    &::after {
+      .r(-20);
+      .bd-l(solid, 20, #2b63ff);
+    }
+  }
+  .module-title {
+    .fs(21);
+    .lh(29);
+    .mg-b(32);
+    color: #373842;
+    font-weight: bold;
+    ._forget {
+      float: right;
+      .fs(19);
+      font-weight: normal;
+      color: #373842;
+      opacity: 0.4;
+    }
+  }
+  .ant-button {
+    .mg-t(13);
+  }
+  .verify-img {
+    cursor: pointer;
+  }
+}
+</style>

src/views/customer/index.vue

 <template>
   <div class="index">
     <!-- 客户信息 -->
-    客户信息
+    <!-- 客户信息
     <a-button>按钮</a-button>
     <a-input placeholder="按需"></a-input>
     <a-button @click="() => openNotificationWithIcon('success')">
@@ -14,7 +14,8 @@
     <a-button @click="() => openNotificationWithIcon('error')">
       Error
     </a-button>
-    <Icon :name="'ssisuccess'" :size="50" />
+    <Icon :name="'ssisuccess'" :size="50" /> -->
+    <router-view></router-view>
   </div>
 </template>
 

src/views/customer/info/index.vue

+<template>
+  <div class="custom-info">
+    <!-- form -->
+    <a-form-model ref="form" layout="vertical" :model="form">
+      <a-row :gutter="40">
+        <a-col :xl="6" :sm="8">
+          <a-form-model-item label="病历号码">
+            <a-input
+              v-model="form.mrnNo"
+              size="large"
+              placeholder="请输入病历号"
+            ></a-input>
+          </a-form-model-item>
+        </a-col>
+        <a-col :xl="6" :sm="8">
+          <a-form-model-item label="客户姓名">
+            <a-input
+              v-model="form.patientName"
+              size="large"
+              placeholder="请输入客户姓名"
+            ></a-input>
+          </a-form-model-item>
+        </a-col>
+        <a-col :xl="6" :sm="8">
+          <a-form-model-item label="出生日期">
+            <a-date-picker
+              v-model="form.birthday"
+              size="large"
+              placeholder="请选择出生日期"
+            ></a-date-picker>
+          </a-form-model-item>
+        </a-col>
+        <a-col :xl="6" :sm="8">
+          <a-form-model-item label="保险公司">
+            <a-select
+              v-model="form.payorId"
+              size="large"
+              placeholder="请选择保险公司"
+            >
+              <a-select-option v-for="item in companyCode" :key="item.code">
+                {{ item.name }}
+              </a-select-option>
+            </a-select>
+          </a-form-model-item>
+        </a-col>
+        <a-col :xl="6" :sm="8">
+          <a-form-model-item label="保单号码">
+            <a-input
+              v-model="form.policyNo"
+              size="large"
+              placeholder="请输入保单号码"
+            ></a-input>
+          </a-form-model-item>
+        </a-col>
+        <a-col :xl="18" :sm="16" class="none-label">
+          <a-form-model-item label="button">
+            <a-button size="large" type="primary">新建客户信息</a-button>
+            <a-button
+              size="large"
+              class="mar-left10"
+              type="primary"
+              @click="handlerSearch"
+              >查询</a-button
+            >
+          </a-form-model-item>
+        </a-col>
+      </a-row>
+    </a-form-model>
+
+    <!-- table -->
+    <a-table
+      :columns="columns"
+      :data-source="dataList"
+      size="large"
+      row-key="mrnNo"
+      :pagination="pagination"
+      @change="onChange"
+    >
+      <template slot="operation" slot-scope="">
+        <a-button size="large" type="link">修改</a-button>
+      </template>
+    </a-table>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    const columns = [
+      { title: "病历号", dataIndex: "mrnNo", width: 120 },
+      { title: "客户姓名", dataIndex: "patientName", width: 120 },
+      { title: "出生日期", dataIndex: "birthday", width: 120 },
+      { title: "性别", dataIndex: "sex", width: 60 },
+      { title: "保险公司", dataIndex: "payorId", width: 120 },
+      { title: "保单号码", dataIndex: "policyNo", width: 120 },
+      { title: "保险有效日期", dataIndex: "startDate", width: 120 },
+      { title: "保险终止日期", dataIndex: "endDate", width: 120 },
+      {
+        title: "操作",
+        key: "operation",
+        align: "center",
+        width: "90px",
+        scopedSlots: { customRender: "operation" },
+      },
+    ];
+    return {
+      columns,
+      form: {},
+      pageForm: {},
+      companyCode: [],
+      dataList: [],
+      pager: {
+        pageNum: 1,
+        pageSize: 1,
+      },
+      total: 0,
+    };
+  },
+  mounted() {
+    this._getCustomerList();
+  },
+  computed: {
+    pagination() {
+      const { pageNum, pageSize } = this.pager;
+      const pages = Math.ceil(this.total / pageSize);
+      return {
+        current: pageNum,
+        size: "large",
+        position: "bottom",
+        align: "right",
+        hideOnSinglePage: false,
+        itemRender: (current, type, originalElement) => {
+          originalElement.children = undefined;
+          if (type === "prev") {
+            originalElement.text = "上一页";
+          }
+          if (type === "page") {
+            return (
+              <p>
+                <span class="current-page">{current}</span> / {pages}
+              </p>
+            );
+          }
+          if (type === "next") {
+            originalElement.text = "下一页";
+            return (
+              <div>
+                {originalElement}
+                <a-input-number
+                  onblur={this.onShowSizeChange}
+                  class="size-change"
+                ></a-input-number>
+              </div>
+            );
+          }
+          return originalElement;
+        },
+      };
+    },
+  },
+  methods: {
+    onChange(pager) {
+      console.log(pager);
+      const { current } = pager;
+      this.apger.pageNum = current;
+    },
+    onShowSizeChange(e) {
+      e && e.stopPropagation();
+      console.log(e);
+    },
+    handlerSearch() {
+      console.log(this.$refs.form.validate);
+      this.$refs.form.validate((valid) => {
+        if (!valid) {
+          return false;
+        }
+        this.pager.pageNum = 1;
+        this.pageForm = this.$lodash.cloneDeep(this.form);
+        this._getCustomerList();
+      });
+    },
+    _getCustomerList() {
+      const data = {
+        ...this.pageForm,
+        ...this.pager,
+      };
+      this.$apis.GETCUSTOMERLIST(data).then((res) => {
+        this.dataList = (res.content && res.content.list) || [];
+        this.total = (res.content && res.content.total) || 0;
+      });
+    },
+  },
+};
+</script>
+<style lang="less" scoped>
+.custom-info {
+  .pa(40, 48, 67, 52);
+  background-color: #fff;
+}
+.none-label {
+  text-align: right;
+  .ant-form-item-label {
+    opacity: 0;
+  }
+}
+.current-page {
+  color: #4d7cfe;
+}
+.size-change {
+  .w(107);
+  .mg-l(40);
+  background-color: #f8fafb;
+  border: none;
+}
+</style>
+<style lang="less">
+.none-label {
+  .ant-form-item-label {
+    opacity: 0;
+  }
+}
+.custom-info {
+  .ant-pagination-item-active {
+    .fs(16);
+    border: none;
+    // vertical-align: baseline;
+  }
+  .ant-pagination-item-link {
+    .fs(16);
+    .lh(22);
+    .pa(7, 15, 7, 15);
+    display: inline-block;
+    background-color: #f8fafb;
+    border: none;
+  }
+}
+</style>

src/views/layout/components/Header.vue

@@ -15,7 +15,7 @@
           <Icon v-else :name="'ssiuser'" :size="32" />
         </div>
         <a-menu slot="overlay">
-          <a-menu-item key="1"> 退出登录 </a-menu-item>
+          <a-menu-item key="1" @click="loginOut"> 退出登录 </a-menu-item>
         </a-menu>
       </a-dropdown>
     </div>
@@ -36,6 +36,15 @@ export default {
     getPopupContainer() {
       return document.querySelector(".avator");
     },
+    loginOut() {
+      this.$apis.LOGINOUT().then((res) => {
+        if (res.returnCode) {
+          this.$router.push("/login");
+        } else {
+          this.$message.error(res.returnMsg || "退出失败");
+        }
+      });
+    },
   },
 };
 </script>

src/views/layout/components/menu/index.js

@@ -60,6 +60,7 @@ export default {
                 break;
               }
             } else if (item.path && item.path === key) {
+              console.log(item, key);
               menuStack.push(item);
               this.$store.dispatch("common/setMenuStack", menuStack);
               return true;

vue.config.js

@@ -48,10 +48,10 @@ module.exports = {
     port: 8888,
     hot: true,
     proxy: {
-      "/dev": {
-        target: "http://www.jd.com",
+      "^/dev": {
+        target: "http://47.99.75.3:8070",
         pathRewrite: {
-          "/dev": "",
+          "^/dev": "/",
         },
         changeOrigin: true,
         secure: false,