|
@@ -1,15 +1,84 @@
|
|
<template>
|
|
<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>
|
|
|
|
+ <div class="sumbitBox"><span class="sumbit">建立关联</span></div>
|
|
</div>
|
|
</div>
|
|
|
|
+
|
|
</template>
|
|
</template>
|
|
<script>
|
|
<script>
|
|
import api from '@api/icss.js';
|
|
import api from '@api/icss.js';
|
|
@@ -18,10 +87,72 @@ export default {
|
|
name: 'AddChemicalAndCommonMapping',
|
|
name: 'AddChemicalAndCommonMapping',
|
|
data() {
|
|
data() {
|
|
return {
|
|
return {
|
|
|
|
+ mealText: '', //化验大项搜索文字内容
|
|
|
|
+ itemText: '', //化验小项搜索文字内容
|
|
|
|
+ uniqueText: '', //公表项搜索文字内容
|
|
|
|
+ mealNameList:[],
|
|
|
|
+ itemNameList: [],
|
|
|
|
+ uniqueNameList:[],
|
|
|
|
+ form: {
|
|
|
|
+ mealName: '', //大项名称
|
|
|
|
+ itemName: '', //小项名称
|
|
|
|
+ uniqueName: '', //公表名称,必填
|
|
|
|
+ }
|
|
|
|
|
|
}
|
|
}
|
|
},
|
|
},
|
|
methods: {
|
|
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">
|
|
<style lang="less">
|
|
.AddChemicalAndCommonMappingWrapper {
|
|
.AddChemicalAndCommonMappingWrapper {
|
|
background: #fff;
|
|
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{
|
|
.leftBox , .midBox, .rightBox{
|
|
width: 40%;
|
|
width: 40%;
|
|
float: left;
|
|
float: left;
|
|
- height: 500px;
|
|
|
|
|
|
+ height: 200px;
|
|
}
|
|
}
|
|
.midBox {
|
|
.midBox {
|
|
width: 10%;
|
|
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>
|
|
</style>
|