多选数据处理及诊疗

src/App.vue

@@ -4,7 +4,7 @@
     </div>
 </template>
 <script>
-  // import '@/less/index.less';
+  import '@/less/index.less';
   export default {
     name:'App'
   }

src/common/CheckBox.vue

@@ -1,10 +1,10 @@
 <template>
   <div class="check-wrap" v-if="item">
-    <p class="quest">{{indx + '.' + item.name}}</p>
-    <img :src="item.url.replace('{imageUrlPrefix}',imgUrl)" v-if="item.url">
-    <p v-for="(it,index) in item.questionDetailList" class="list">
-      <img :src="checkId.includes(it.id)?check:defaultPic" @click="handleClick(it,index)">
-      <span :class="{'check':checkId.includes(it.id)}">{{it.name}}</span>
+    <p class="quest">{{indx + '.' + datas.name}}</p>
+    <img :src="datas.url.replace('{imageUrlPrefix}',imgUrl)" v-if="datas.url">
+    <p v-for="(it,index) in datas.questionDetailList" :key="it.id" class="list" @click="handleClick(it,index)">
+      <img :src="it.select==1?check:defaultPic">
+      <span :class="{'check':it.select==1}">{{it.name}}</span>
     </p>
   </div>
 </template>
@@ -19,19 +19,29 @@ import checkIcon from '../images/check.png'
         imgUrl:tools.imageUrlPrefix,
         defaultPic:icon,
         check:checkIcon,
-        checkId:[]
+        datas:{},
+        checkTxt:[]
       }
     },
     props:['item','indx'],
+    created(){
+      this.datas = JSON.parse(JSON.stringify(this.item));
+    },
     methods:{
-      handleClick(it){
-        const id = it.id;
-        let ids = this.checkId;
-        if(ids.includes(id)){
-          this.checkId.splice(ids.indexOf(id),1);
+      handleClick(it,index){
+        const list = this.datas;
+        let data = list.questionDetailList&&list.questionDetailList.slice(0);
+        let value = "";
+        if(data[index].select){
+          data[index].select = 0;
+          this.checkTxt.splice(index,1);
         }else{
-          this.checkId.push(id);
+          data[index].select = 1;
+          this.checkTxt[index] = data[index].name;
         }
+        value = this.checkTxt.filter(item=>item).join('，');
+        const newData = Object.assign({},this.datas,{questionDetailList:data},{value:value})
+        this.$emit("updata",newData);
       }
     }
   }

src/common/Radio.vue

@@ -2,8 +2,8 @@
   <div class="radio-wrap" v-if="item">
     <p class="quest">{{indx + '.' + datas.name}}</p>
     <img :src="datas.url.replace('{imageUrlPrefix}',imgUrl)" v-if="datas.url">
-    <p v-for="(it,index) in datas.questionDetailList" :key="it.id" class="list">
-      <img :src="it.select==1?check:defaultPic" @click="handleClick(it,index)">
+    <p v-for="(it,index) in datas.questionDetailList" :key="it.id" class="list" @click="handleClick(it,index)">
+      <img :src="it.select==1?check:defaultPic">
       <span :class="{'check':it.select==1}">{{it.name}}</span>
     </p>
   </div>
@@ -18,7 +18,6 @@ import {deepClone} from '@utils/tools.js'
       return{
         defaultPic:icon,
         check:checkIcon,
-        current:null,
         datas:{}
       }
     },
@@ -28,7 +27,6 @@ import {deepClone} from '@utils/tools.js'
     },
     methods:{
       handleClick(it,index){
-        this.current = index;
         const list = this.datas;
         let data = list.questionDetailList&&list.questionDetailList.slice(0); //数组深拷贝？
         let value = "";

src/components/Detail.vue

@@ -7,7 +7,11 @@
             :indx="index+1"
             :key="item.id"
             @updata="updataData"/>
-      <CheckBox v-if="item.controlType==2" :item="item" :indx="index+1"/>
+      <CheckBox v-if="item.controlType==2" 
+            :item="item" 
+            :indx="index+1"
+            :key="item.id"
+            @updata="updataData"/>
       <!-- 输入框 -->
       <div class="inp" v-if="item.controlType==6">
         <p class="name">{{index+1+'.'+item.name}}</p>

src/components/DiagTreat.vue

@@ -1,11 +1,14 @@
 <template>
   <div class="treat-wrap">
-    <div v-for="(it,i) in datas.moduleDetailDTOList" 
-        v-if="datas&&datas.moduleDetailDTOList"
+    <div v-for="(it,i) in dtoList" 
+        v-if="dtoList"
         :key="it.id">
       <div class="label" v-if="it.controlType==0">
         <p class="quest">{{it.name}}</p>
-        <span class="symp" v-for="item in it.questionMapping">{{item.name}}</span>
+        <span v-for="(item,indx) in it.questionMapping" class="symp" @click="handleClick(item,indx,i)">
+          {{item.name}}
+          <i v-if="item.select==1" @click="deletSymp(item,indx)"><img src="../images/delete.png" alt=""></i>
+        </span>
       </div>
       <UploadImg v-if="it.controlType==4" 
             :item="it" 
@@ -21,6 +24,16 @@
       <span class="back" @click="beBack">{{'返回'+ preName}}</span>
       <span class="next" @click="toNext">{{'进入'+ nextName}}</span>
     </div>
+    <!-- <div class="detail" v-if="show">
+      <DetailBox @close="closeDetal" 
+              :data="labelDetail" 
+              v-if="labelDetail.questionMapping&&labelDetail.questionMapping.length>0"
+              @pComplete="complete"/>
+    </div>
+    <Toast :message="delText" 
+          :show="showToast"
+          @comfirn="comfirnDel" 
+          @cancel="cancelDel"/> -->
   </div>
 </template>
 <script type="text/javascript">
@@ -31,21 +44,49 @@
       return{
         msg:"诊疗情况",
         chooseSymp:[{name:'未治疗'}],
-        imgs:this.$store.state.diagnose.imgSrc
+        imgs:this.$store.state.diagnose.imgSrc,
+        dtoList:[], //选项
+        details:[], //明细
+        chooseTxt:{} //选中的文字
       }
     },
     props:['datas','preName','nextName'],
+    created(){
+      let dataArr = this.datas&&this.datas.moduleDetailDTOList;
+      if(dataArr){
+        this.dtoList = JSON.parse(JSON.stringify(dataArr));
+      }
+    },
     methods:{
       beBack(){
         this.$emit('back');
       },
       toNext(){
         this.$emit('next');
+      },
+      handleClick(item,index,pIndex){ 
+        // 存值到store并实现及时更新
+        let value = item.name;
+        let currMapping = JSON.parse(JSON.stringify(this.dtoList[pIndex].questionMapping));
+        currMapping[index].select = 1
+        this.dtoList[pIndex] = Object.assign({},this.dtoList[pIndex],{questionMapping:currMapping},{value:value})
+         console.log(222,this.dtoList[pIndex],currMapping)
+      },
+      deletSymp(item,index){
+        console.log(456,item)
       }
     },
     components:{
       UploadImg
-    }
+    },
+    watch:{
+      dtoList:{
+        handler(newVal,oldVal){
+          console.log("诊疗数据更新:",newVal,oldVal); 
+        },
+        deep:true
+      }
+    },
   }
 </script>
 <style lang="less" scoped>
@@ -58,21 +99,11 @@
       font-weight: 700;
     }
     .label{
-      padding-bottom: .2rem;
-      .symp{
-        display: inline-block;
-        width:1.9rem;
+      .label;
+      img{
+        width:.56rem;
         height: .74rem;
-        line-height: .74rem;
-        border: 1px solid #DFE0E4;
-        border-radius: .08rem;
-        text-align: center;
-        color: #7C828E;
-        margin: 0 0 .3rem .3rem;
-        box-sizing: border-box;
-      }
-      .symp:nth-child(3n+2){
-        margin-left: 0;
+        vertical-align: top;
       }
     }
     .result{
@@ -88,6 +119,11 @@
         line-height: .44rem;
       }
     }
+    .choose{
+      color:#fff;
+      background: linear-gradient(-270deg, #4F4FFF, #4F8BFF);
+      box-shadow: 0 .08rem .16rem 0 rgba(79,129,255,0.40);
+    }
   }
   .foot{
     .dbfooter;

src/components/Others.vue

@@ -5,7 +5,8 @@
         :key="it.id">
       <div class="label" v-if="it.controlType==0">
         <p class="quest">{{it.name}}</p>
-        <span class="symp" v-for="item in it.questionMapping">{{item.name}}</span>
+        <!-- <span v-for="item in it.questionMapping" :class="['symp',{'over':item.name&&item.name.length>5}]">{{item.name}}</span> -->
+        <span v-for="item in it.questionMapping" class="symp">{{item.name}}</span>
       </div>
     </div>
     <div class="result">
@@ -48,22 +49,7 @@
       font-weight: 700;
     }
     .label{
-      padding-bottom: .2rem;
-      .symp{
-        display: inline-block;
-        width:1.9rem;
-        height: .74rem;
-        line-height: .74rem;
-        border: 1px solid #DFE0E4;
-        border-radius: .08rem;
-        text-align: center;
-        color: #7C828E;
-        margin: 0 0 .3rem .3rem;
-        box-sizing: border-box;
-      }
-      .symp:nth-child(3n+2){
-        margin-left: 0;
-      }
+      .label;
     }
     .result{
       .title{

src/components/Symptom.vue

@@ -236,25 +236,13 @@ import Toast from '../common/Toast.vue';
         width:.56rem;
         height: .74rem;
       }
+      .over{
+        .over;
+      }
     }
   }
   .label{
-    padding-bottom: .2rem;
-    .symp{
-      display: inline-block;
-      width:1.9rem;
-      height: .74rem;
-      line-height: .74rem;
-      border: 1px solid #DFE0E4;
-      border-radius: .08rem;
-      text-align: center;
-      color: #7C828E;
-      margin: 0 0 .3rem .3rem;
-      box-sizing: border-box;
-    }
-    .symp:nth-child(3n+2){
-      margin-left: 0;
-    }
+    .label;
   }
   .result{
     .title{

src/components/TabPage.vue

@@ -155,20 +155,8 @@ export default {
   }
   .content {
     font-size: 0.3rem;
-    padding: 0.45rem 0.6rem;
+    // padding: 0.45rem 0.6rem;
+    padding: 0.45rem 0.3rem 0.45rem 0.6rem;
   }
-  /* .footer{
-      width:100%;
-      height: .88rem;
-      line-height: .88rem;
-      color:#fff;
-      font-size: .32rem;
-      text-align: center;
-      // background: linear-gradient(-270deg, #4F8BFF 0%, #4F4FFF 100%);
-      background: linear-gradient(-270deg, #4F4FFF,#4F8BFF);
-      position: fixed;
-      bottom: 0;
-      left: 0;
-    } */
 }
 </style>

src/index.js

@@ -1,11 +1,9 @@
 import Vue from 'vue';
 import router from './router.js';
 import store from './store.js';
-import '../src/less/index.less';
-// import '../src/less/base.css';
 import App from './App.vue';
 import preview from 'vue-photo-preview';
-// import 'vue-photo-preview/dist/skin.css';
+import 'vue-photo-preview/dist/skin.css';
 Vue.use(preview);
 Vue.config.productionTip = false;
 

src/less/base.css

@@ -1,107 +0,0 @@
-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:auto;
-}
-input, textarea{
-  outline: none;
-  border: none;
-  -webkit-tap-highlight-color:transparent; 
-}
-button {
-  border: none;
-}
-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;
-}
-html,body{
-  width: 100%;
-  height: auto !important;
-  overflow-x: auto;
-}
-html{
-  margin: 0;
-  padding: 0;
-  font-size: 13.33333333vw !important;
-}
-.mask{
-  width:100%;
-  height: 100%;
-  position: fixed;
-  top:0;
-  left: 0;
-  background:rgba(0,0,0,.5);
-}
-.footer{
-  width:100%;
-  height: .88rem;
-  line-height: .88rem;
-  text-align: center;
-  color:#fff;
-  font-size: .32rem;
-  background: linear-gradient(-270deg, #4F4FFF,#4F8BFF);
-  position: fixed;
-  bottom: 0;
-  left: 0;
-}
-.dbfooter{
-  width:100%;
-  font-size: .32rem;
-  position: fixed;
-  bottom: 0;
-  left: 0;
-  background: #F2F2F5;
-}
-.back,.next{
-    display: inline-block;
-    height: .88rem;
-    line-height: .88rem;
-    text-align: center;
-    vertical-align: top;
-  }
-.back{
-  width: 2.5rem;
-  color: #7C828E;
-}
-.next{
-  width: 4.91rem;
-  color: #fff;
-  background: linear-gradient(-270deg, #4F4FFF,#4F8BFF);
-}

src/less/base.less

@@ -46,4 +46,31 @@
     color: #fff;
     background: linear-gradient(-270deg, #4F4FFF,#4F8BFF);
   }
+}
+.over{
+  font-size: .24rem !important;
+}
+.label{
+  padding-bottom: .2rem;
+  .symp{
+    display: inline-block;
+    // width:1.9rem;
+    min-width:1.9rem;
+    height: .74rem;
+    line-height: .74rem;
+    border: 1px solid #DFE0E4;
+    border-radius: .08rem;
+    text-align: center;
+    color: #7C828E;
+    // margin: 0 0 .3rem .3rem;
+    margin: 0 .3rem .3rem 0;
+    padding: 0 .05rem;
+    box-sizing: border-box;
+  }
+  /* .symp:nth-child(3n+2){
+    margin-left: 0;
+  } */
+  .over{
+    font-size: .24rem !important;
+  }
 }

src/less/index.less

@@ -15,10 +15,6 @@ input, textarea{
 button {
     border: 0 none;
 }
-// h1, h2, h3, h4, h5, h6 {
-//   font-size: 100%;
-//   font-weight: 500;
-// }
 i {
   font-style: normal;
 }
@@ -57,7 +53,7 @@ a {
     white-space: nowrap;    
     text-overflow: ellipsis;
 }
-// #app ,body,html{
+
 html,body{
   width: 100%;
   height: auto !important;
@@ -67,19 +63,9 @@ 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
+  font-size: 13.33333333vw !important;
 }
 
-/* @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{

webpack.common.js

@@ -22,56 +22,64 @@ module.exports = {
     path: path.resolve(__dirname,'dist')
   },
   module: {
-    rules: [{
-      test:/\.css$/,
-      use:[
-        'style-loader',
-        'css-loader',
-      ]
-    },{
-      test:/\.less$/,
-      use:[
-        'style-loader',
-        'css-loader',
-        'less-loader'
-      ]
-    },{
-      test: /\.(png|svg|jpg|jpeg|gif)/,
-      use:[{
-        loader: "file-loader",
-        options:{
-          limit:5000,
-          // name: 'imgs/[name].[ext]'
-          name: 'images/[name].[ext]'
-        }
-      }]
-    },{
-      test:/\.vue$/,
-      use:[
-        'vue-loader'
-      ]
-      /*use:{
-        loader:'vue-loader',
-        options:{
-          loaders:{
-            less:'vue-style-loader!css-loader!less-loader'
+    rules: [
+      {
+        test:/\.css$/,
+        use:[
+          // 'style-loader',
+          'vue-style-loader',
+          'css-loader',
+        ]
+      },
+      {
+        test:/\.less$/,
+        use:[
+          // 'style-loader',
+          'vue-style-loader',
+          'css-loader',
+          'less-loader'
+        ]
+      },
+      {
+        test: /\.(png|svg|jpg|jpeg|gif)/,
+        use:[{
+          loader: "file-loader",
+          options:{
+            limit:5000,
+            // name: 'imgs/[name].[ext]'
+            name: 'images/[name].[ext]'
+          }
+        }]
+      },
+      {
+        test:/\.vue$/,
+        /*use:[
+          'vue-loader'
+        ]*/
+        use:{
+          loader:'vue-loader',
+          options:{
+            loaders:{
+              less:'vue-style-loader!css-loader!less-loader'
+            }
           }
         }
-      }*/
-    },{
-      test: /\.js$/,
-      exclude: file => (
-        /node_modules/.test(file) &&
-        !/\.vue\.js/.test(file)
-      ),
-      use: {
-        loader: 'babel-loader',
-        options: {
-          presets: ['@babel/preset-env'],
-          // plugins: ['@babel/plugin-transform-runtime']
+      },
+      {
+        test: /\.js$/,
+        exclude: file => (
+          /node_modules/.test(file) &&
+          !/\.vue\.js/.test(file)
+        ),
+        use: {
+          loader: 'babel-loader',
+          options: {
+            presets: ['@babel/preset-env'],
+            // plugins: ['@babel/plugin-transform-runtime']
+          }
         }
       }
-    }]
+    ]
   },
   resolve: {
     extensions: ['.js', '.vue', '.json'],

webpack.dev.js

@@ -2,13 +2,13 @@ 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',
+    host:'192.168.3.6',
     port:'8082',
     openPage:'?hospitalCode=A001&hospitalDeptCode=D01&doctorCode=YS001&patientCode=1600&recordId=44',//携带参数
     proxy:{
@@ -20,13 +20,6 @@ module.exports = merge(common,{
     hot:true
   },
   plugins: [
-    new webpack.HotModuleReplacementPlugin(),
-    /*new CopyWebpackPlugin([
-      {
-        from: path.resolve(__dirname, './src/assets'),
-        to: config.dev.assetsSubDirectory,
-        ignore: ['.*']
-      }
-    ])*/
-  ]
+    new webpack.HotModuleReplacementPlugin()
+  ],
 });

webpack.prod.js

@@ -29,8 +29,8 @@ module.exports = merge(common,{
             drop_console: true // 去除console.log
           }
         },
-        cache:true,
-        parallel:true,
+        // cache:true,
+        // parallel:true,
         sourceMap:false,
       }),
       // new OptimizeCssAssesetsPlugin({})
@@ -38,27 +38,25 @@ module.exports = merge(common,{
   },
   plugins:[
     new CleanWebpackPlugin(),
-    new MiniCssExtractPlugin({
+    /*new MiniCssExtractPlugin({
       filename: 'css/[name].[hash].css',
       // chunkFilename: 'js/[id].[hash].css',
       chunkFilename: 'css/[hash].[hash].css',
-    }),
+    }),*/
   ],
-  module: {
+  /*module: {
     rules: [{
       test:/\.css$/,
       use:[{
         loader: MiniCssExtractPlugin.loader,
         options: {
-          filename:'[name].css',
-          chunkFilename:'[name].css',
-          minimize: true
-          // you can specify a publicPath here
-          // by default it use publicPath in webpackOptions.output
-          // publicPath: '../'
+          // filename:'[name].css',
+          // chunkFilename:'[name].css',
+          minimize: true,
+          publicPath: '../'
         }
       },
-        // 'css-loader'
+        'css-loader',
         {
           loader:'css-loader',
           options:{
@@ -67,14 +65,21 @@ module.exports = merge(common,{
         }
       ]
     },
-    /*{
+    {
       test:/\.less$/,
       use:[
+        {
+          loader: MiniCssExtractPlugin.loader,
+          options: {
+            minimize: true,
+            publicPath: '../'
+          }
+        },
         'style-loader',
         'css-loader',
         'less-loader'
       ]
-    }*/
+    }
     ]
-  }
+  }*/
 });