modify-the-label.html 7.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <meta name="renderer" content="webkit">
  7. <meta http-equiv="Cache-Control" content="no-siteapp">
  8. <meta http-equiv="X-UA-Compatible" content="IE=Edge">
  9. <meta name="referrer" content="no-referrer" />
  10. <title>服务记录</title>
  11. <link rel="shortcut icon" href="../../../favicon.ico">
  12. <link rel="stylesheet" type="text/css" href="../../../css/bootstrap.min.css" />
  13. <link rel="stylesheet" type="text/css" href="../../../css/cross.css" />
  14. <link rel="stylesheet" type="text/css" href="../../../css/cross.ui.css" />
  15. <link rel="stylesheet" type="text/css" href="../../../css/style.min.css" />
  16. <style type="text/css">
  17. body{background: #f5f5f5;}
  18. .flex-box{
  19. display: -webkit-box;
  20. display: -ms-flexbox;
  21. display: flex;
  22. -webkit-box-pack: center;
  23. -ms-flex-pack: center;
  24. justify-content: center;
  25. -webkit-box-align: center;
  26. -ms-flex-align: center;
  27. align-userInfos: center;
  28. }
  29. .flex-box-item{
  30. -webkit-box-flex: 1;
  31. -ms-flex: 1;
  32. flex: 1;
  33. }
  34. [v-cloak]{display: none;}
  35. .icon{width: 21px;height: 21px;vertical-align:middle;display: inline-block;background-size: auto 100%;background-position: center center;background-repeat: no-repeat;}
  36. .icon-submit{background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyFpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6RTVDOTU5OTIzMDlEMTFFOEEwQTNGOTRDM0NEODM3N0UiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6RTVDOTU5OTEzMDlEMTFFOEEwQTNGOTRDM0NEODM3N0UiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjlEMTc4Rjc3MEE0MTExRTg5RjBBRTlCRTRGQTk3M0MzIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjlEMTc4Rjc4MEE0MTExRTg5RjBBRTlCRTRGQTk3M0MzIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+ohj6EQAAAWlJREFUeNqMkk0oBVEUx+88+dgKxcZCUiS5a56NhQUP6aWs9BYWk5WsiGQrYvVmQ7IhJEKJjQUvKTWWkvWTFMlCPl7jd+bNjGnydev3n3Nnzv/cufcew3EcFQxLl6LD0Af1UAK3kIFFOFKm7RpiIVMPegMp2IFuaIFReIU92CWvTNINd0VLJ4nXYQamqPqmosPSDegG5KDVcNLNVQTXsIBhUv02LF2B2rApvzoCdzCt/jceoU2MCVhhtY8/VqtBz0AOJyHGWrgMJcxDe8TUhJ5CFuIsko39UP+A5JRniqMncA4dmJ7865Ar0IHFtGXPY7CEaZXnoRwGJPn24hUrFOM2DDIpCpnn3ESlukDiId7lPFMnei/XUUlwBWk+jkf2VhAY8vNy9EK24jdAP5M1mIUJkt+/OdU6dOurAfxetbS02DI8u/vLH4bE1d6VSfFjGKDwgxFpculDE3qhEYq95si4RU1730/9FGAA8H55RsdHM3kAAAAASUVORK5CYII=);width: 14px;height: 14px;}
  37. .c-container{width: 500px;margin: 0 auto;padding: 10px 10px 0;overflow: hidden;background: #fff;height: 360px;position: relative;}
  38. .label-title{font-size: 15px;font-weight: bold;line-height: 1;}
  39. .label-list{margin: 0;padding: 10px 0 0 10px;font-size: 0;list-style: none;}
  40. .label-list li{width: 80px;text-align: center;margin-right: 10px;margin-bottom: 10px;cursor: not-allowed;border-radius: 10px;display: inline-block;font-size: 12px;height: 20px;line-height: 20px;border: 1px solid #c8c8c8;color: #c8c8c8;}
  41. .scroll-box{overflow-x: auto;height: 300px;}
  42. .label-list li.active,.label-list li.optional,.label-list li.luck{cursor: pointer;}
  43. .luck{color: #fff!important;}
  44. .bgc-12b7f5 li.active{background-color: #12B7F5;color: #fff;border-color: #12B7F5;}
  45. .bgc-12b7f5 li.optional,.bgc-12b7f5 li.luck{border-color: #12B7F5;color: #12B7F5;}
  46. .bgc-2DBE55 li.active{background-color: #2DBE55;color: #fff;border-color: #2DBE55;}
  47. .bgc-2DBE55 li.optional{border-color: #2DBE55;color: #2DBE55;}
  48. .bgc-ff3b30 li.active{background-color: #ff3b30;color: #fff;border-color: #ff3b30;}
  49. .bgc-ff3b30 li.optional,.bgc-ff3b30 li.luck{border-color: #ff3b30;color: #ff3b30;}
  50. .bgc-FF9630 li.active{background-color: #FF9630;color: #fff;border-color: #FF9630;}
  51. .bgc-FF9630 li.optional,.bgc-FF9630 li.luck{border-color: #FF9630;color: #FF9630;}
  52. .edit-value{background-color: transparent;border: none;border-bottom: 1px solid #FF9630;height: 15px;width: 50px;}
  53. .edit-value:hover,.edit-value:active,.edit-value:visited,.edit-value:focus{box-shadow: none;outline: none;}
  54. .add-lable{display: block;}
  55. .clear-fixed-bottom{height: 44px;}
  56. .btn-box{position: absolute;bottom: 0;left: 0;right: 0;background-color: #fff;}
  57. .btn-save{margin: 8px auto;border-color: #12b7f5;color: #333;padding: 4px 15px;background-color: #fff;}
  58. </style>
  59. </head>
  60. <body>
  61. <div class="c-container" id="app" v-cloak>
  62. <div class="scroll-box">
  63. <div class="label-row mb5">
  64. <div class="label-title">服务类型</div>
  65. <ul class="label-list bgc-12b7f5">
  66. <li :class="fw.className" @click="changeFW(fw.className,fw.code,index)" v-for="(fw,index) in fwlx">{{fw.name}}</li>
  67. </ul>
  68. </div>
  69. <div class="label-row mb5">
  70. <div class="label-title">健康情况</div>
  71. <ul class="label-list bgc-2DBE55">
  72. <li :class="jk.className" @click="changeJK(jk.className,jk.labelCode,index)" v-for="(jk,index) in jkqk">{{jk.labelName}}</li>
  73. </ul>
  74. </div>
  75. <div class="label-row mb5">
  76. <div class="label-title">疾病类型</div>
  77. <ul class="label-list bgc-ff3b30">
  78. <li :class="jb.className" @click="changeJB(jb.className,jb.labelCode,index)" v-for="(jb,index) in jblx">{{jb.labelName}}</li>
  79. </ul>
  80. </div>
  81. <div class="label-row">
  82. <div class="label-title">团队标签</div>
  83. <ul class="label-list bgc-FF9630">
  84. <li :class="td.className" v-for="(td,index) in tdbq" @click="changeTD(td.className,td.labelCode,index)">{{td.labelName}}</li>
  85. <li class="optional">
  86. <span class="add-lable" v-if="!isEdit" @click="isEdit=true">+</span>
  87. <span v-else style="position: relative;top: -2px;">
  88. <input type="text" v-model="newLabel" class="edit-value" autofocus="autofocus" />
  89. <span class="icon icon-submit" @click="addTeamLabel"></span>
  90. </span>
  91. </li>
  92. </ul>
  93. </div>
  94. </div>
  95. <div class="clear-fixed-bottom">
  96. <div class="text-center btn-box mb10">
  97. <button class="btn btn-success mr20" @click="determine">确定</button>
  98. <button class="btn btn-default" @click="close">取消</button>
  99. </div>
  100. </div>
  101. </div>
  102. <script type="text/javascript" src="../../../js/vue.js"></script>
  103. <script type="text/javascript" src="../../../js/jquery-2.2.4.js"></script>
  104. <script src="../../../js/util.js"></script>
  105. <script src="../../../api/http-request.js"></script>
  106. <script src="../../../js/underscore.js"></script>
  107. <script src="../../../api/sign_api.js"></script>
  108. <script type="text/javascript" src="../../../plugins/layer/layer.min.js" ></script>
  109. <script type="text/javascript" src="../js/modify.js"></script>
  110. </body>
  111. </html>