raolu
/
PC-application


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170
							<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>服务数据对话框</title>
    <link rel="stylesheet" type="text/css" href="../../../css/bootstrap.min.css" />
    <link rel="stylesheet" type="text/css" href="../../../css/style.min.css" />
    <link rel="stylesheet" type="text/css" href="../../../css/cross.css" />
    <link rel="stylesheet" href="../../../plugins/toastr/toastr.min.css" />
    <link rel="stylesheet" href="../../../plugins/element-ui/element-ui.css" />
    <link rel="stylesheet" type="text/css" href="../css/date.css" />
    <link rel="stylesheet" href="../css/common.css" />
    <style>
      #app{
        padding: 8px 16px;
      }
      .plus-icon{
        border: 1px solid rgba(0, 0, 0, .1);
        font-size: 16px;
        padding: 7px;
      }
      .list-box{
        height: 630px;
        overflow: auto;
      }
      .item{
        padding: 8px;
        border-bottom: 1px solid rgba(0, 0, 0, .1);
      }
      .item .title{
        font-weight: bold;
        font-size: 16px;
      }
      .item .bottom{
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
      .expense{
        color: #17b3ec;
      }
      .submit-btn{
        display: block;
        margin: 10px auto 0;
      }
    </style>
  </head>
  <body>
    <div id="app" v-cloak>
      <el-tabs v-model="active" type="card" @tab-click="handleClick">
        <el-tab-pane :label="tab.type" :name="tab.code" v-for="tab in tabList">
          <div class="list-box" >
            <div class="item" v-for="item in list[active]" :key="item.code">
              <div class="title">{{item.title}}</div>
              <div class="bottom">
                <div class="expense">￥{{item.expense}}</div>
                <div>
                  <el-input-number v-model="checkList[item.code].num" size="small" v-if="checkList[item.code]&&checkList[item.code].num>0" :min="0"></el-input-number>
                  <i class="el-icon-plus plus-icon" v-else  @click="addService(item)"></i>
                </div>
              </div>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
      <el-button type="primary" @click="submit" class="submit-btn">{{setBtnText()}}</el-button>
    </div>

    <script type="text/javascript" src="../../../js/vue.js"></script>
    <script type="text/javascript" src="../../../js/jquery-2.2.4.js"></script>
    <script type="text/javascript" src="../../../js/es6-promise.js" charset="utf-8"></script>
    <script type="text/javascript" src="../../../plugins/toastr/toastr.min.js"></script>
    <script type="text/javascript" src="../../../plugins/element-ui/element-ui.js"></script>
    <script type="text/javascript" src="../../../api/http-request.js"></script>
    <script type="text/javascript" src="../../../plugins/layer/layer.min.js"></script>
    <script type="text/javascript" src="../../../api/rehabilitation-api.js"></script>
    <script type="text/javascript" src="../../../api/recover_api.js"></script>
    <script type="text/javascript" src="../../../js/underscore-1.9.1.js"></script>
    <script type="text/javascript" src="../../../js/util.js" charset="utf-8"></script>
    <script>
      new Vue({
        el: '#app',
        data() {
          return {
            tabList: [],
            active: "",
            list: {},
            checkList: {},
            btnText: ""
          }
        },
        methods: {
          getServiceType() {
            const vm = this
            httpRequest.post('doctor/serviceOrder/selectServiceTypes', {}).then(function (res) {
              vm.tabList = res.data
              if(res.data.length>0){
                vm.active = res.data[0].code
                vm.getServiceList()
              }
            })
          },
          getServiceList(){
            const vm = this
            if(this.list[this.active]){
              return
            }
            
            var params = {
              type: this.active,
              hospital: JSON.parse(localStorage.getItem("wlyyAgent")).hospital,
            }
            httpRequest.get('doctor/serviceOrder/selectServiceByHospital', {data:params}).then(function (res) {
              vm.$set(vm.list, vm.active, res.dara)
            })
          },
          handleClick(){
            this.getServiceList()
          },
          addService(item){
            this.$set(this.checkList,item.code,{
              ...item,
              num: 1
            })
            // this.checkList[item.code] = {
            //   ...item,
            //   num: 1
            // }
            // this.$forceUpdate()
            console.log(this.checkList);
            
          },
          setBtnText(){
            let count = 0
            for(let i in this.checkList){
              count += this.checkList[i].num
            }
            return `确认（已选${count}项）`
          },
          submit(){
            const arr = []
            for(let i in this.checkList){
              arr.push(this.checkList[i])
            }
            if(arr.length == 0){
              this.$message.warning("请选择服务")
              return
            }
            
            sessionStorage.setItem("serviceList", JSON.stringify(arr))

            var index = parent.layer.getFrameIndex(window.name)
            parent.layer.close(index) 
          },

        },
        mounted() {
          this.getServiceType()
          const checkList = JSON.parse(sessionStorage.getItem("serviceList")) 
          
          for(let i of checkList){
            this.$set(this.checkList,i.code,i)
          }
          
        }
      })
    </script>
  </body>
</html>