化验大小项与公表项关联

src/components/icss/AddChemicalAndCommonMapping.vue

@@ -1,15 +1,84 @@
 <template>
-    <div class="AddChemicalAndCommonMappingWrapper">
-        <div class="leftBox">
-            <h3>关联化验项</h3>
-        </div>
-        <div class="midBox">
-            <h3>建立关联</h3>
-        </div>
-        <div class="rightBox">
-            <h3>关联公表项</h3>
+    <div class="AddChemicalAndCommonMappingWrapper clearfix">
+        <div class="groupTitle"><i
+                class="el-icon-back"
+                @click="back"
+        ></i>化验大小项与公表项对应维护--添加关联</div>
+        <div class="AddChemicalAndCommonMappingBox clearfix">
+            <div class="titleBox clearfix">
+                <h3 class="title">关联公表项</h3>
+                <h3 class="title">关联化验项</h3> 
+            </div>
+            <div class="leftBox clearfix" >
+                
+                <div class="itemLabel clearfix">
+                    <label class="itemLabelName">选择化验大项：</label> 
+                    <input class="searchInput" @focus="focuInput" type="text" v-model = "mealText"> 
+                    <span class="searchName" @click="searchMealItem(1)">搜索</span>
+                    <ul class="itemList mealNameList" ref="mealNameList">
+                      <li 
+                        v-for="item in mealNameList" 
+                        class="mealNameItem ellipsis"
+                        :title="item.tagName"
+                        @click="selectMealName(item)"
+                        :key="item.id">
+                        {{item.tagName}}
+                      </li>
+                    </ul>
+                    
+                </div>
+                <div class="itemLabel clearfix">
+                    <label  class="itemLabelName">已选择化验大项：</label>
+                    <span>{{form.mealName}}</span>
+                </div>
+                <div class="itemLabel clearfix">
+                    <label  class="itemLabelName">选择化验小项：</label>
+                    <input class="searchInput" type="text" v-model = "itemText"> 
+                    <span class="searchName" @click="searchMealItem(2)">搜索</span>
+                    <ul class="itemList itemNameList" ref="itemNameList">
+                      <li 
+                        v-for="item in itemNameList" 
+                        class="mealNameItem ellipsis"
+                        :title="item.tagName"
+                        @click="selectItemName(item)"
+                        :key="item.id">
+                        {{item.tagName}}
+                      </li>
+                    </ul>
+                </div>
+                <div class="itemLabel">
+                    <label  class="itemLabelName">已选择化验小项：</label>
+                    <span>{{form.itemName}}</span>
+                </div>
+            </div>
+            <div class="midBox">
+                <h3>相互关联</h3>
+            </div>
+            <div class="rightBox">
+                <div class="itemLabel">
+                    <label  class="itemLabelName">选择公表项：</label>
+                    <input class="searchInput" type="text" v-model = "uniqueText"> 
+                    <span class="searchName" @click="searchMealItem">搜索</span>
+                    <ul class="itemList uniqueNameList" ref="uniqueNameList">
+                      <li 
+                        v-for="item in uniqueNameList" 
+                        class="mealNameItem ellipsis"
+                        :title="item.tagName"
+                        @click="selectUniqueName(item)"
+                        :key="item.id">
+                        {{item.tagName}}
+                      </li>
+                    </ul>
+                </div>
+                <div class="itemLabel">
+                    <label  class="itemLabelName">已选择公表项：</label>
+                    <span>{{form.uniqueName}}</span>
+                </div>
+            </div>
         </div>
+       <div class="sumbitBox"><span class="sumbit">建立关联</span></div> 
     </div>
+    
 </template>
 <script>
 import api from '@api/icss.js';
@@ -18,10 +87,72 @@ export default {
     name: 'AddChemicalAndCommonMapping',
     data() {
         return {
+            mealText: '', //化验大项搜索文字内容
+            itemText: '',   //化验小项搜索文字内容
+            uniqueText: '',     //公表项搜索文字内容
+            mealNameList:[],
+            itemNameList: [],
+            uniqueNameList:[],
+            form: {
+                mealName: '', //大项名称
+                itemName: '',   //小项名称
+                uniqueName: '',    //公表名称，必填
+            }
             
         }
     },
     methods: {
+        back() {
+            this.$router.go(-1)
+        },
+        searchMealItem(type) {
+            this.getTagList(type)
+        },
+        getTagList(type) {
+            let param = {}
+            if (type == 1) {
+                param.tagName = this.mealText
+                param.tagType = [7]
+            } else if (type == 2) {
+                param.tagName = this.itemText
+                param.tagType = [1]
+            }
+            api.searchTagList(param).then((res) => {
+                if (res.data.code === '0') {
+                     if (type == 1) {
+                         this.$refs['mealNameList'].style.display='block'
+                        this.mealNameList = res.data.data
+                    } else if (type == 2) {
+                        this.$refs['itemNameList'].style.display='block'
+                        this.itemNameList = res.data.data
+                    }
+                }
+            })
+            
+        },
+        focuInput() {
+            this.$refs['mealNameList'].style.display='none'
+            this.$refs['itemNameList'].style.display='none'
+            this.$refs['uniqueNameList'].style.display='none'
+        },
+        selectMealName(item) {
+            this.form.mealName = item.tagName
+            this.$refs['mealNameList'].style.display='none'
+            this.mealText = ''
+            this.mealNameList = []
+        },
+        selectItemName(item) {
+             this.form.itemName = item.tagName
+            this.$refs['itemNameList'].style.display='none'
+            this.itemText = ''
+            this.itemNameList = []
+        },
+        selectUniqueName(item) {
+             this.form.uniqueName = item.tagName
+            this.$refs['uniqueNameList'].style.display='none'
+            this.uniqueText = ''
+            this.uniqueNameList = []
+        }
 
     }
 }
@@ -29,13 +160,97 @@ export default {
 <style lang="less">
 .AddChemicalAndCommonMappingWrapper {
     background: #fff;
+    .groupTitle {
+        width: calc(100% - 50px);
+        height: 40px;
+        background: #fff;
+        padding: 0 20px 0 30px;
+        margin-bottom: 20px;
+        line-height: 40px;
+        position: relative;
+        z-index: 5;
+            
+    }
+    .titleBox {
+        border-bottom: 1px solid #000;
+        padding:  0 0 10px 0px;
+    }
+    .title {
+        width: 50%;
+        float: left;
+    }
+    .AddChemicalAndCommonMappingBox {
+        padding: 0 30px 20px 30px;
+    }
     .leftBox , .midBox, .rightBox{
         width: 40%;
         float: left;
-        height: 500px;
+        height: 200px;
     }
     .midBox {
         width: 10%;
+        padding:  50px 0 0 0;
+    }
+    .itemLabel {
+        width: 100%;
+        height: 40px;
+        line-height: 40px;
+        position: relative;
+    }
+    .itemLabelName, .searchInput,  .searchName{
+        float: left;
+    }
+    .itemLabelName {
+        width: 150px;
+    }
+    .searchInput, .mealNameItem {
+        padding: 0 5px;
+    }
+    .searchInput, .searchName {
+        display: inline-block;
+        height: 22px;
+        line-height: 22px;
+        border: 1px solid gray;
+        margin: 9px 0 0 0;
+    }
+    
+    .searchName {
+        border-left: none;
+    }
+    .itemList {
+        position: absolute;
+        display: none;
+        background: #fff;
+        width: 162px;
+        height: 80px;
+        border: 1px solid gray;
+        left: 150px;
+        top: 35px;
+        z-index: 2;
+        overflow-y: auto;
+    }
+    .mealNameItem {
+        height: 20px;
+        line-height: 20px;
+        font-size: 14px;
+    }
+    .mealNameItem:hover {
+        border: 1px solid #22ccc8;
+    }
+    .sumbitBox {
+        position: relative;
+        width: 100%;
+        height: 80px;
+    }
+    .sumbit {
+        position: absolute;
+        display: inline-block;
+        width: 80px;
+        height: 30px;
+        line-height: 30px;  
+        border: 1px solid #000;
+        text-align: center;
+        right: 30px;
     }
 }
 </style>