患者信息页完成

dev-server.js

@@ -1,17 +0,0 @@
-const webpackDevServer = require('webpack-dev-server');
-const webpack = require('webpack');
-
-const config = require('./webpack.config.js');
-const options = {
-  contentBase: './dist',
-  hot: true,
-  host: 'localhost'
-};
-
-webpackDevServer.addDevServerEntrypoints(config,options);
-const compiler = webpack(config);
-const server = new webpackDevServer(compiler,options);
-
-server.listen(5000,'localhost',()=>{
-  console.log('dev server listening on port 5000');
-});

package.json

@@ -18,9 +18,12 @@
   "author": "zhouna",
   "license": "ISC",
   "dependencies": {
+    "axios": "^0.19.0",
     "jquery": "^3.4.1",
     "lodash": "^4.17.11",
-    "vue": "^2.6.10"
+    "qs": "^6.7.0",
+    "vue": "^2.6.10",
+    "vuex": "^3.1.1"
   },
   "devDependencies": {
     "@babel/core": "^7.4.5",
@@ -44,6 +47,7 @@
     "terser-webpack-plugin": "^1.3.0",
     "uglifyjs-webpack-plugin": "^2.1.3",
     "vue-loader": "^15.7.0",
+    "vue-router": "^3.0.6",
     "vue-template-compiler": "^2.6.10",
     "webpack": "^4.33.0",
     "webpack-cli": "^3.3.4",

server.js

@@ -1,15 +0,0 @@
-const express = require('express');
-const webpack = require('webpack');
-const webpackDevMiddleware = require('webpack-dev-middleware');
-
-const app = express();
-const config = require('./webpack.config.js');
-const compiler = webpack(config);
-
-app.use(webpackDevMiddleware(compiler,{
-  publicPath:config.output.publicPath
-}));
-
-app.listen(3000,function(){
-  console.log('app listening on port 3000...\n');
-})

src/App.vue

@@ -1,17 +1,12 @@
 <template>
     <div id="app">
-        {{message}}
+        <router-view/>
     </div>
 </template>
 <script>
-  import './index.less';
+  import '@/less/index.less';
   export default {
-    name:'app',
-    data(){
-      return {
-        message:'hello1'
-      }
-    }
+    name:'App'
   }
 </script>
 

src/components/PathInfo.vue

@@ -0,0 +1,235 @@
+<template>
+  <div class="path-wrap">
+    <p class="info">挂号用户信息查询如下：</p>
+    <div class="con">
+      <p class="name">
+        <span>{{pathInfo.patientName}}</span>|
+        <span>{{pathInfo.patientSex}}</span>|
+        <span>{{pathInfo.patientAge}}岁</span>
+      </p>
+      <div class="dept">
+        <p>
+          <span>挂号科室：</span>
+          <span>{{pathInfo.selfDeptName}}</span>
+        </p>
+        <p>
+          <span>门诊号：</span>
+          <span>{{pathInfo.recordId}}</span>
+        </p> 
+      </div>
+      <div class="doct">
+        <p>
+          <span>预约医生：</span>
+          <span>{{pathInfo.doctorName}}</span>
+        </p>
+        <p>
+          <span>预约时间：</span>
+          <span>{{pathInfo.systemTime}}</span>
+        </p>
+      </div>
+    </div>
+    <div class="out-box">
+      <div class="emery">
+        <div class="baner">
+          <p>{{pathInfo.hospitalName}}</p>
+          <p class="big">智能预问诊</p>
+        </div>
+        <div class="inner">
+          <p>该系统通过智能引导式问诊，帮助医生规范、全面的采集患者的症状、体征、病史等信息，从而实现诊疗流程的优化和配置。</p>
+          <button @click="getStart">开始</button>
+        </div>
+        <p v-if="type==3">您已完成过一次预问诊，是否再次录入预问诊信息</p>
+      </div>
+      <div class="child" v-if="child.length>0&&child[0].value==1">
+        <div class="baner">
+          <p>{{pathInfo.hospitalName}}</p>
+          <p class="big">儿童体质检测</p>
+        </div>
+        <div class="inner">
+          <p>该标准将为0-12岁儿童在为体质辨识及与中医体质相关疾病的预防、养生保健、健康管理提供依据，使体质分类科学化、规范化。</p>
+          <button>开始</button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script type="text/javascript">
+  import api from '@utils/api.js'
+  import {getUrlArgObject} from '@utils/tools.js'
+  export default {
+    name:'PathInfo',
+    data(){
+      return {
+        pathInfo:{},
+        child:[],
+        type:null //1-未做过；3-只做过问诊；4-只做过体质辨识；6-都做过
+      }
+    },
+    created(){
+      this.getPathInfo();
+      this.getSysConfig();
+    },
+    methods:{
+      getPathInfo(){
+        const params = {
+          'hospitalCode':getUrlArgObject('hospitalCode'),
+          'hospitalDeptCode':getUrlArgObject('hospitalDeptCode'),
+          'doctorCode':getUrlArgObject('doctorCode'),
+          'patientCode':getUrlArgObject('patientCode'),
+          'recordId':getUrlArgObject('recordId')
+        }
+        api.getPathInfo(params).then((res)=>{
+          const result = res.data;
+          if(result.code==0){
+            this.pathInfo = result.data;
+            this.$store.commit('savePathInfo',result.data);
+            this.recordCheck(); //校验是否填过
+            this.getAll(); //获取模板
+          }
+        })
+      },
+      getSysConfig(){
+        const param = {
+          'hospitalCode':getUrlArgObject('hospitalCode')
+        }
+        api.getSysConfig(param).then((res)=>{
+          const result = res.data;
+          if(result.code==0){
+            const datas = result.data;
+            this.child = datas.filter((item)=>{return item.code == "constitution_show"})
+            this.$store.commit('saveSysConfig',datas)
+          }
+        })
+      },
+      recordCheck(){
+        const param = {
+          'doctorId':this.pathInfo.doctorId,
+          'hospitalDeptId':this.pathInfo.selfDeptId,
+          'hospitalId':this.pathInfo.hospitalId,
+          'inquiryCode':this.pathInfo.recordId,
+          'patientId':this.pathInfo.patientId
+        }
+        api.recordCheck(param).then((res)=>{
+          const result = res.data;
+          if(result.code==0){
+            this.type = result.data.type;
+          }
+        })
+      },
+      getAll(){
+        const param = {
+          'age':this.pathInfo.patientAge,
+          'relationId':this.pathInfo.selfDeptId,
+          'mouduleType':1, //根据科室划分
+          'sexType':this.pathInfo.patientSex=='男'?1:(this.pathInfo.patientSex=='女'?2:3),
+        }
+        api.getAll(param).then((res)=>{
+          const result = res.data;
+          if(result.code==0){
+            const datas = result.data;
+            this.$store.commit('saveAll',datas)
+          }
+        })
+      },
+      getStart(){
+        this.$router.push({path:'/tab'})
+      }
+    }
+  }
+</script>
+<style lang="less" scoped>
+  .path-wrap{
+    padding-top: .7rem;
+    font-size: .28rem;
+    box-sizing: border-box;
+    .info{
+      font-size: .32rem;
+      font-weight: 700;
+      color: #040428;
+      margin-left: .6rem;
+      font-weight: bold;
+    }
+    .con{
+      margin-left: .6rem;
+      .name{
+        color: #7C828E;
+        margin-top: .27rem;
+        span{
+          margin-right: .08rem;
+        }
+      }
+      .dept,.doct{
+        display: inline-block;
+        p{
+          margin-top: .27rem;
+          span{
+            color: #7C828E;
+          }
+        }
+      }
+      .doct{
+        margin-left: .26rem;
+      }
+    }
+    .out-box{
+      white-space: nowrap;
+      overflow-x: auto;
+      padding:0 .15rem .15rem 0;
+    }
+    .emery,.child{
+      display: inline-block;
+      vertical-align: top;
+      width:5.3rem;
+      margin-top: .91rem;
+      margin-left: .6rem;
+      box-sizing: border-box;
+      .baner{
+        box-sizing: border-box;
+        width:100%;
+        height: 2.52rem;
+        padding: .66rem 0 0 .6rem;
+        p{
+          color:#fff;
+        }
+        .big{
+          font-size: .56rem;
+          margin-top: .12rem;
+        }
+      }
+      .inner{
+        height: 4.98rem;
+        box-shadow:-5px 5px 10px -4px #989da3,5px 5px 10px -4px #989da3;
+        border-radius: 0px 0px 20px 20px;
+        padding: .45rem .6rem .6rem;
+        box-sizing: border-box;
+        position: relative;
+        p{
+          font-size: .24rem;
+          line-height: .5rem;
+          white-space: normal;
+        }
+        button{
+          width: 4rem;
+          height: .88rem;
+          color: #fff;
+          font-size: .32rem;
+          margin-top: .20rem;
+          background: -webkit-gradient(linear, right top, left top, from(#4F8BFF), to(#4F4FFF));
+          background: linear-gradient(right, #4F8BFF, #4F4FFF);
+          box-shadow: 0 12px 24px 0 rgba(79,129,255,0.40);
+          border-radius: 44px;
+          position: absolute;
+          bottom: .7rem;
+        }
+      }
+    }
+    .emery .baner{
+      background: url('../images/banerbg@1.5x.png') no-repeat;
+      background-size: cover;
+    }
+    .child .baner{
+      background: url('../images/childbg@1.5x.png') no-repeat;
+      background-size: cover;
+    }
+  }
+</style>

src/components/TabPage.vue

@@ -0,0 +1,76 @@
+<template>
+  <div class="tab-wrap">
+    <div class="tab" v-if="modlues&&modlues.length>0">
+      <p v-for="(it,index) in modlues" :key="it.id">
+        <span :class="{current:index==0}" v-if="type[it.type]==1">
+          <i>{{index + 1  }}</i>
+          {{it.name}}
+        </span>
+      </p> 
+    </div>
+    <!-- 内容 -->
+    <div class="content">这里放明细</div>
+  </div>
+</template>
+<script type="text/javascript">
+  export default {
+    name:'TabPage',
+    data(){
+      let sysConfig = this.$store.state.sysConfig;
+      let allMoudles = this.$store.state.allMoudles;
+      return{
+        config:sysConfig,
+        modlues:allMoudles,
+        type:{
+          "1":sysConfig.filter(item=>item.code=="symptoms_show")[0].value,
+          "2":sysConfig.filter(item=>item.code=="diagnosis_show")[0].value,
+          "3":sysConfig.filter(item=>item.code=="omhistory_show")[0].value,
+          "4":sysConfig.filter(item=>item.code=="replenish_show")[0].value,
+        }
+      }
+    },
+    created(){
+      console.log('配置信息：',this.config,'type',this.type)
+    }
+  }
+</script>
+<style lang="less" scoped>
+  .tab-wrap{
+    width: 100%;
+    height: 100%;
+    .tab{
+      height: .82rem;
+      line-height: .82rem;
+      border-bottom: 1px solid #EDEDED;
+      box-sizing: border-box;
+      // padding: 0 .2rem;
+      padding-top: .16rem;
+      p{
+        display: inline-block;
+      }
+      span{
+        font-size: .24rem;
+        display: inline-block;
+        vertical-align: top;
+        width:1.48rem;
+        height: .5rem;
+        line-height: .5rem;
+        // background: #E5ECFC;
+        // border-radius: 25px;
+        // color: #0043E8;
+        color: #7C828E;
+        text-align: center;
+        margin-left: .2rem;
+        margin-right: .19rem;
+      }
+      .current{
+        color: #0043E8;
+        background: #E5ECFC;
+        border-radius: 25px;
+      }
+    }
+    .content{
+      font-size: .3rem;
+    }
+  }
+</style>

src/index.html

@@ -1,7 +1,11 @@
 <!doctype html>
 <html>
 <head>
-    <title>预诊</title>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
+    <!-- 去除点击事件高亮 -->
+    <meta name="msapplication-tap-highlight" content="no">
+    <title>智能预问诊</title>
 </head>
 <body>
 <div id="app"></div>

src/index.js

@@ -1,10 +1,13 @@
 import Vue from 'vue';
+import router from './router.js';
+import store from './store.js';
 import App from './App.vue';
 Vue.config.productionTip = false;
 
-
 new Vue({
   el:'#app',
+  router,
+  store,
   components:{
     App
   },

src/index.less

@@ -1,4 +0,0 @@
-body{
-  background: antiquewhite;
-  color: skyblue;
-}

src/less/base.less

@@ -0,0 +1,2 @@
+// 公用less
+@font-size: 13.33333333vw !important;

src/less/index.less

@@ -0,0 +1,107 @@
+ @import './base.less';
+body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, input, textarea, p, th, td, hr, button {
+  margin: 0;
+  padding: 0;
+  font-family: Arial, sans-serif, "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB";
+  color: #323232;
+  // -webkit-text-size-adjust:100%;
+  -webkit-text-size-adjust:auto;
+}
+input, textarea{
+  outline: none;
+  border: 0 none;
+  -webkit-tap-highlight-color:transparent;  //ios去掉选择阴影
+}
+button {
+    border: 0 none;
+}
+h1, h2, h3, h4, h5, h6 {
+  // font-size: 100%;
+  // font-weight: 500;
+}
+i {
+  font-style: normal;
+}
+ol, ul {
+  list-style: none;
+}
+a {
+  text-decoration: none;
+}
+
+.fl {
+    float: left;
+}
+
+.fr {
+    float: right;
+}
+/* 清理浮动 */
+.clearfix:after {
+    visibility: hidden;
+    display: block;
+    font-size: 0;
+    content: "";
+    clear: both;
+    height: 0;
+    line-height:0;
+}
+
+.clearfix {
+    zoom: 1; /* for IE6 IE7 */
+}
+
+/* 单行文字溢出时出现省略号，需设定宽度 */
+.ellips {
+    overflow: hidden;
+    white-space: nowrap;    
+    text-overflow: ellipsis;
+}
+// #app ,body,html{
+html,body{
+  width: 100%;
+  height: auto !important;
+  overflow-x: auto;
+}
+html{
+  margin: 0;
+  padding: 0;
+  font-size: @font-size;  //750px，1vw = 750*1%=7.5px
+  // font-size: 13.33333333vw !important;  //750px，1vw = 750*1%=7.5px
+}
+
+/* @media screen and (-webkit-device-pixel-ratio:2){
+  html{
+    font-size: @font-size * 2;
+  }
+}
+@media screen and (-webkit-device-pixel-ratio:3){
+  html{
+    font-size: @font-size * 2;
+  }
+} */
+// 兼容ipad和pc端大屏幕
+@media screen and (min-width: 560px){
+  html{
+    font-size: 54px;
+  }
+}
+
+/* @media screen and (max-width:320px){兼容iphone5
+    .symptomDes .arrorTop p {
+        padding-left: 0 !important;
+        text-align: right;
+    }
+    .resultSym {
+      overflow: hidden;
+      white-space: nowrap;    
+      text-overflow: ellipsis;
+      width: 110px;
+    }
+    .main .mainBtm .Recommend {
+      font-size: 14px !important;
+    }
+    .main .mainBtm .Recommend .btn {
+      padding: 0 10px !important;
+    }
+} */

src/router.js

@@ -0,0 +1,21 @@
+import Vue from 'vue';
+import Router from 'vue-router';
+import PathInfo from '@components/PathInfo.vue';
+import TabPage from '@components/TabPage.vue';
+Vue.use(Router);
+const router = new Router({
+  routes:[
+    {
+      path:'/',
+      name:'PathInfo',
+      component:PathInfo
+    },
+    {
+      path:'/tab',
+      name:'TabPage',
+      component:TabPage
+    },
+  ]
+})
+
+export default router;

src/store.js

@@ -0,0 +1,24 @@
+import Vue from 'vue';
+import Vuex from 'vuex';
+Vue.use(Vuex);
+
+const store = new Vuex.Store({
+  state:{
+    pathInfo:{}, //患者信息-后续提交要用
+    sysConfig:[], //系统配置项
+    allMoudles:[], //模板
+  },
+  mutations:{
+    savePathInfo(state,param){
+      state.pathInfo = param;
+    },
+    saveSysConfig(state,param){
+      state.sysConfig = param;
+    },
+    saveAll(state,param){
+      state.allMoudles = param;
+    }
+  }
+})
+
+export default store;

src/utils/api.js

@@ -0,0 +1,27 @@
+import axios from 'axios';
+
+const urls = {
+  getPathInfo:'/api/prec/patientInfo/getTopPatientInfo',//患者信息
+  getSysConfig:'/api/prec/sysSet/getSysSetInfoDatas',//配置项
+  recordCheck:'/api/prec/inquiryInfo/recordCheck',//校验是否已做过
+  getAll:'/api/prec/moduleInfo/getAll',//获取模板
+  getSymptom:'/api/prec/questionUsual/getQuestionUsual',//常用症状
+}
+
+export default {
+  getPathInfo(param){
+    return axios.post(urls.getPathInfo,param)
+  },
+  getSysConfig(param){
+    return axios.post(urls.getSysConfig,param)
+  },
+  recordCheck(param){
+    return axios.post(urls.recordCheck,param)
+  },
+  getAll(param){
+    return axios.post(urls.getAll,param)
+  },
+  getSymptom(param){
+    return axios.post(urls.getSymptom,param)
+  },
+}

src/utils/tools.js

@@ -0,0 +1,12 @@
+
+const qs = require('qs');
+
+const getUrlArgObject = (parm) => {
+    let query = window.location.search;
+    let args = qs.parse(query.substr(1));
+    return args[parm];//返回对象  
+} 
+
+module.exports =  {
+  getUrlArgObject
+}

webpack.common.js

@@ -1,7 +1,9 @@
 const path = require('path');
-const { CleanWebpackPlugin } = require('clean-webpack-plugin');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const VueLoaderPlugin = require('vue-loader/lib/plugin');
+const resolve = function (src) {
+    return path.resolve(__dirname, src);
+};
 
 module.exports = {
   entry:{
@@ -9,24 +11,11 @@ module.exports = {
     //test:path.resolve(__dirname,'src/test','test.js')
   },
   plugins: [
-    new CleanWebpackPlugin(),
     new VueLoaderPlugin(),
     new HtmlWebpackPlugin({
-      title:'预诊',
+      // title:'预诊',
       template:path.resolve(__dirname,'src','index.html'),
     }),
-    /*new HtmlWebpackPlugin({
-      title:'index',
-      filename:'index.html',      //打包后的文件名,必填，否则都会生成index.html,且后面的覆盖前面的
-      template:path.resolve(__dirname,'src','index.html'),
-      chunks:['app'],
-    }),
-    new HtmlWebpackPlugin({
-      title:'test',
-      filename:'test.html',
-      template:path.resolve(__dirname,'src/test','test.html'),
-      chunks:['test'],
-    }),*/
   ],
   output: {
     filename: "[name].bundle.js",
@@ -77,7 +66,11 @@ module.exports = {
   },
   resolve: {
     alias: {
-      'vue$':'vue/dist/vue.esm.js'      //让vue使用compiler模式，默认runtime模式要用render初始化
+      'vue$':'vue/dist/vue.esm.js' ,     //让vue使用compiler模式，默认runtime模式要用render初始化
+      '@':resolve('./src'),
+      '@components':resolve('./src/components'),
+      '@less':resolve('./src/less'),
+      '@utils':resolve('./src/utils')
     }
   }
 };

webpack.dev.js

@@ -1,20 +1,32 @@
 const merge = require('webpack-merge');
 const common = require('./webpack.common.js');
 const webpack = require('webpack');
+const config = require('./config.js');
+// const CopyWebpackPlugin = require('copy-webpack-plugin')
 
 module.exports = merge(common,{
   mode: 'development',
   devtool: "inline-source-map",
   devServer: {
-    contentBase:'./dist',
+    // contentBase:'./dist',
     port:'8082',
-    /*openPage:'index.html?a==2',
+    openPage:'?hospitalCode=A001&hospitalDeptCode=D01&doctorCode=YS001&patientCode=1600&recordId=44',//携带参数
     proxy:{
-      '/api':''
-    },*/
+      '/api':{
+        target:config.host,
+        changeOrigin:true
+      }
+    },
     hot:true
   },
   plugins: [
-    new webpack.HotModuleReplacementPlugin()
+    new webpack.HotModuleReplacementPlugin(),
+    /*new CopyWebpackPlugin([
+      {
+        from: path.resolve(__dirname, './src/assets'),
+        to: config.dev.assetsSubDirectory,
+        ignore: ['.*']
+      }
+    ])*/
   ]
 });

webpack.prod.js

@@ -3,6 +3,7 @@ const common = require('./webpack.common.js');
 const OptimizeCssAssesetsPlugin = require('optimize-css-assets-webpack-plugin');
 const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const { CleanWebpackPlugin } = require('clean-webpack-plugin');
 
 module.exports = merge(common,{
   mode:'production',
@@ -36,6 +37,7 @@ module.exports = merge(common,{
     ]
   },
   plugins:[
+    new CleanWebpackPlugin(),
     new MiniCssExtractPlugin({
       filename: 'css/[name].[hash].css',
       chunkFilename: 'js/[id].[hash].css',