慢病指标值维护

src/components/icss/AddChronicAndIndexRelation.vue

@@ -11,7 +11,7 @@
           linkTo="/admin/LT-YXSJWH-MBZBZGLWH"
         ></crumbs>
         <el-form :model="form" ref="ruleForm"  class="addDepartForm">
-            <el-form-item  v-if="!isEdit" label="选择诊断标签：" prop="department">
+            <el-form-item  class="addDepartFormItem"  v-if="!isEdit" label="选择诊断标签：" prop="department">
                 <input class="searchInput"  @focus="focuInput" type="text" v-model = "searchDiagVal"> 
                 <span class="searchName" @click="searchDiag">搜索</span>
                 <ul class="itemList diagList" ref="diagList">
@@ -30,11 +30,27 @@
             </el-form-item>
         </el-form>
         <div class="symptomList">
-            <table>
+            <div class="screenIndex clearfix">
+                    <label class="screenIndexLabel">选择指标项内容：</label>
+                    <input class="searchInput"  @focus="focuInput" type="text" v-model = "searchIndexVal"> 
+                    <span class="searchName" @click="searchIndex">搜索</span>
+                    <ul class="itemList indexList" ref="indexList">
+                        <li 
+                        v-for="item in indexList" 
+                        class="diagItem ellipsis"
+                        :title="item.diseaseName"
+                        @click="selectDiag(item)"
+                        :key="item.diseaseId">
+                        {{item.diseaseName}}
+                        </li>
+                    </ul>
+            </div>
+            <table class="indexTab">
+                
                 <tr>
-                    <td>已选择内容</td>
-                    <td>已选内容分组（只可输入数字，相同数字归为一组展示）</td>
-                    <td>操作</td>
+                    <td class="selectedContent">已选择内容</td>
+                    <td class="selectedContentGrop">已选内容分组（只可输入数字，相同数字归为一组展示）</td>
+                    <td class="selectedContentOpera">操作</td>
                 </tr>
             </table>
         </div>
@@ -61,16 +77,10 @@
             },
             titleText: '添加关联',
             diagList: [],
+            indexList: [],
             searchDiagVal: '',
-            searchTagVal: '',
+            searchIndexVal: '',
             isEdit: false,
-            leftTagsList:[],
-            rightTagsList:[],
-            selectLeftTagsList: [],
-            selectRightTagIndex: -1,
-            styles:{
-                background:'#eae7e7'
-            },
         }
     },
     created(){
@@ -79,19 +89,9 @@
             if(isEdit) {
                 this.titleText = '修改关联'
             } 
-            data.data.map((item) => {
-                item.id = item.scaleId
-                item.tagName = item.scaleName
-                return item
-            })
-            this.isEdit = isEdit
-            this.rightTagsList = data.data
-            this.form.diseaseId =data.diseaseId
-            this.form.diseaseName =data.diseaseName
-            this.getTagList()
+           
             
         } else {
-            this.getTagList()
             
         }
     },
@@ -109,12 +109,11 @@
             this.$router.go(-1);
         },
         searchDiag() {
-             const param = {
+            const param = {
                 "diseaseName": this.searchDiagVal,
             }
             api.queryIndexConfigDiseaseNames(param).then((res)=>{
                if(res.data.code === '0') {
-                   console.log('res.data.data', res.data.data)
                    this.diagList = res.data.data
                    this.$refs['diagList'].style.display='block'
                 }
@@ -129,52 +128,30 @@
         },
         focuInput() {
             this.$refs['diagList'].style.display='none'
+             this.$refs['indexList'].style.display='none'
+            
         },
-        getTagList() {
-            const notIds = this.selectedTags()
-            const param = {
-                "tagName": this.searchTagVal,
-                "type": '21',
-                "notIds": notIds,
-                "sexType": this.sexType,
+        searchIndex() {
+             const param = {
+                conceptName: this.searchIndexVal
             }
-            api.searchTagList(param).then((res)=>{
+            api.getAllLisConcept(param).then((res)=>{
                if(res.data.code === '0') {
-                   this.leftTagsList = res.data.data
+                   console.log('res.data.data', res.data.data)
+                   this.indexList = res.data.data
+                   this.$refs['indexList'].style.display='block'
                 }
             })
         },
-        selectedTags() {
-            let selectedTags = []
-            for (let i =0; i < this.rightTagsList.length; i++) {
-                selectedTags.push(this.rightTagsList[i].id)
-            }
-            return selectedTags
-        },
-       
-        isHasTag(item, arr) {
-            for ( let i = 0; i <arr.length; i++) {
-                if(arr[i].id === item.id) {
-                    return true;
-                }
-            }
-            return false;
-        },
-        getStyle(item){       //左侧选中状态
-            return this.isHasTag(item, this.selectLeftTagsList)
-        },
-        getStyle2(item) {
-            return this.isHasTag(item, this.selectRightTagsList)
-        },
         submitForm(formName) {
             if(!this.form.diseaseId) {
                 this.warning('请选择诊断')
                 return
             }
-            if(this.rightTagsList.length === 0) {
-                this.warning('请选择量表')
-                return
-            }
+            // if(this.rightTagsList.length === 0) {
+            //     this.warning('请选择量表')
+            //     return
+            // }
             this.showDelDialog()
         },
         showDelDialog() {
@@ -232,6 +209,7 @@
             line-height: 40px;
             padding-left: 20px;
         }
+        
         .searchInput, .searchName {
             display: inline-block;
             height: 30px;
@@ -239,6 +217,8 @@
             border: 1px solid gray;
             margin: 0px 0 0 0;
             padding: 0 5px;
+            float: left;
+            margin-top: 4px;
         }
         .isRequired .el-form-item__label::before {
             content: '*';
@@ -252,7 +232,8 @@
             display: none;
             background: #fff;
             width: 162px;
-            max-height: 80px;
+            height: 80px;
+            // max-height: 80px;
             border: 1px solid gray;
             left: 110px;
             top: 35px;
@@ -268,81 +249,53 @@
             border: 1px solid #22ccc8;
         }
         .addDepartForm {
+            position: relative;
             background-color: #fff;
             padding: 20px;
             margin: 70px 20px 0px 20px;
             border-bottom: 1px solid #c0c4cc;
         }
+        .addDepartFormItem {
+            position: relative;
+        }
         .symptomList {
             background-color: #fff;
              padding: 20px;
              margin: 0px 20px 0px 20px;
              height: 500px;
         }
-        .bottomPartLeft {
-            width: 32%;
-        }
-        .symptomPoolTitle {
+        .screenIndexLabel {
+            float: left;
             height: 40px;
             line-height: 40px;
         }
-        .symptomPool {
+        .indexTab {
             width: 100%;
-        }
-        .tagList {
-            width: 100%;
-            height: 300px;
-            border: 1px solid @icssBorder;
-            box-sizing: border-box;
-        }
-        .tagList {
-            border: 1px solid @icssBorder;
-        }
-        .tagPool {
-            height: 300px;
-            overflow-y: auto;
-
-        }
-        .tagItem {
-            position: relative;
-            line-height: 30px;
-            cursor: pointer;
-            padding: 0 10px;
-        }
-        .tagName:before {
-            content: '['
-        }
-        .tagName::after {
-            content: ']'
-        }
-        .bottomPartMid {
-            width: 8%;
-            margin-top: 60px;
-            p {
-            width: 100%;
-            text-align: center;
-            span {
-                cursor: pointer;
-                display: inline-block;
-                width: 30px;
-                height: 40px;
-                line-height: 40px;
-                margin: 0 auto;
-                border: 1px solid @icssBorder;
-                margin-bottom: 15px;
-                font-size: 18px;
+            border-collapse: collapse;
+            tr {
+                td {
+                    height: 40px;
+                    border: 1px solid #666;
+                    text-align: center;
+                }
             }
+            .selectedContent {
+                width: 25%;
+            }
+            .selectedContentGrop {
+                width: 55%;
+            }
+            .selectedContentOpera {
+                width: 20%;
             }
         }
-        .bottomPartRight {
-            width: 32%;
-        }
-        .operationPool {
-            position: relative;
+        .screenIndex {
             width: 100%;
-            height: 340px;
-            padding: 10px 0;
-            overflow-y: auto;
+            margin-bottom: 30px;
+            position: relative;
+        }
+        .indexList {
+            left: 128px;
         }
         .btn {
             position: relative;