组合标签维护

src/components/qualityControl/AddCombineFeild.vue

@@ -34,22 +34,39 @@
                     <el-form-item label="显示名称：" prop="name">
                         <el-input type="text" placeholder="请输入显示名称" v-model="form.name"></el-input>
                     </el-form-item>
-                    <el-form-item label="关联缺陷条目：" prop="flawId">
-                        <el-select filterable
-                                   v-model="form.flawId"
-                                   placeholder="请选择"
-                                   size="small"
-                                   :disabled="id && !copy?true:false">
-                            <el-option
-                                    v-for="item in flawList"
-                                    :key="item.key"
-                                    :label="item.name"
-                                    :value="item.key">
-                            </el-option>
-                        </el-select>
-                    </el-form-item>
-                    <el-form-item>
-                        <el-checkbox v-model="form.intent">缩进</el-checkbox>
+                    
+                    <el-form-item label="组合内容：" prop="moduleInfo" class="formItem">
+                        <div class="moduleInfoItem" v-for="(item,index) in combineInfoList">
+                            <div class="searchBox">
+                                <el-input v-model.trim="item.searchName"  placeholder="搜索字段单元" @input="searchFiled(index)">
+                                </el-input>
+                                <ul v-if="searchIndex == index &&  item.searchResult.length > 0" class="searchResultBox">
+                                    <li class="searchItem" 
+                                        v-for="searchItem in item.searchResult" 
+                                        :title="searchItem.name"
+                                        @click="selectSearchFiled(searchItem,index)"
+                                    >
+                                        {{searchItem.name}}
+                                    </li>
+                                </ul>
+                            </div>
+                            <div>
+                                <p>已选择字段：</p>
+                                <div class="selectFiledBox">
+                                     <div class="orderBox">
+                                            <span class="el-icon-arrow-up order"  @click="upFiled(index)"></span>
+                                            <span  class="el-icon-arrow-down order" @click="downFiled(index)"></span> 
+                                        </div>
+                                    <div class="selectFiled" v-for="(it,ii) in item.selectFiled">
+                                        <span class="filedName" :class="{activeFiledName: item.activeIndex == ii}" @click="setActiveIndex(index,ii)">{{it.name}}
+                                            <span class="el-icon-circle-close delFiled" @click="delSelected(ii,index)"></span>
+                                        </span>
+                                    
+                                    </div>
+                                </div>
+                                
+                            </div>
+                        </div>
                     </el-form-item>
                     <el-button class="disclButn" size="small" type="primary" :disabled = 'saveDisable' @click="comfirn('form')">确定</el-button>
                 </el-form>
@@ -83,9 +100,28 @@
         },
         copy:null,
         saveDisable: false,  //保存按钮禁止点击
-        flawList:[],
         fieldTypes:[],
-        hisTypes:[]
+        hisTypes:[],
+         searchIndex: -1,
+        combineInfoList:[
+                {   
+                    searchName:"",
+                    activeIndex: -1,
+                    searchResult:[
+                    ],
+                    selectFiled:[
+                        {
+                            name: "4姓名"
+                        },
+                        {
+                            name: "5职业"
+                        },
+                        {
+                            name: "6年龄"
+                        }
+                    ]
+                }
+            ]
       }
     },
     created(){
@@ -114,6 +150,67 @@
             this.warning("获取枚举信息失败");
           }
         });
+      },
+       searchFiled(index){
+          this.searchIndex = index
+          const searchName = this.combineInfoList[index].searchName
+          if(!searchName){
+              return
+          }
+          const param = {
+              tagName: searchName,
+              hospitalId: this.form.hospitalId,
+              modeId:  [this.form.modeId],
+          }
+          api.getQCName(param).then(res =>{
+              if(res.data.code == '0'){
+                    this.combineInfoList[index].searchResult = []
+                    this.combineInfoList[index].searchResult.push(...res.data.data)
+              }
+          }).catch(e =>{
+              console.log(e)
+          })
+        
+      },
+      selectSearchFiled(searchItem,index){
+          this.combineInfoList[index].selectFiled.push(searchItem)
+          this.searchIndex = -1
+          this.combineInfoList[index].searchName=""
+          this.combineInfoList[index].searchResult = []
+      },
+      upFiled(index){
+          let activeIndex = this.combineInfoList[index].activeIndex
+          if(activeIndex == 0 || activeIndex == -1){
+              return
+          }
+          const current = this.combineInfoList[index].selectFiled[activeIndex]
+          const currentPre = this.combineInfoList[index].selectFiled[activeIndex-1]
+          this.combineInfoList[index].selectFiled.splice(activeIndex-1,2,current,currentPre)
+          this.combineInfoList[index].activeIndex--
+      },
+      downFiled(index){
+            let activeIndex = this.combineInfoList[index].activeIndex
+          if(activeIndex == this.combineInfoList[index].selectFiled.length -1 || activeIndex == -1){
+              return
+          }
+          const current = this.combineInfoList[index].selectFiled[activeIndex]
+          const currentNext = this.combineInfoList[index].selectFiled[activeIndex+1]
+          this.combineInfoList[index].selectFiled.splice(activeIndex,2,currentNext,current)
+            this.combineInfoList[index].activeIndex++
+
+      },
+      setActiveIndex(index, ii){
+            let activeIndex = this.combineInfoList[index].activeIndex
+            if( ii === activeIndex) {
+                this.combineInfoList[index].activeIndex = -1
+            } else {
+                this.combineInfoList[index].activeIndex = ii
+            }
+            
+      },
+        delSelected(ii,index){
+          this.combineInfoList[index].selectFiled.splice(ii,1)
+          
       },
       comfirn(form){
         /*if(!this.form.name.trim() || !this.form.refreshTime.trim()){
@@ -185,4 +282,83 @@
     .el-form-item{
         width: 600px;
     }
+    .moduleInfoItem{
+      width: 500px;
+      min-height: 200px;
+      padding: 0 50px 0 50px;
+      border: 1px solid #dcdfe6;
+      border-radius: 5px;
+      margin-bottom: 20px;
+      position: relative;
+    }
+    .searchBox{
+      width: 200px;
+      position: relative;
+    }
+    .searchResultBox{
+    position: absolute;
+    width: 200px;
+    box-sizing: border-box;
+    max-height: 200px;
+    overflow-y: auto;
+    background: #fff;
+    z-index: 2;
+    border: 1px solid #dcdfe6;
+}
+.searchItem{
+    height: 40px;
+    line-height: 40px;
+    padding: 0 20px;
+    cursor: pointer;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+}
+.searchItem:hover{
+    background-color: #F5F7FA;
+}
+.selectFiled{
+    position: relative;
+}
+.orderBox{
+    position: absolute;
+    left: -50px;
+    top: 50%;
+    width: 50px;
+    height: 84px;
+    margin-top: -42px;
+}
+.selectFiledBox{
+    position: relative;
+    min-height: 120px;
+}
+.order{
+    display: inline-block;
+    width: 30px;
+    height: 30px;
+    font-size: 30px;
+    margin-left: 5px;
+    border: 1px solid #dcdfe6;
+    cursor: pointer;
+   
+}
+.delFiled{
+    position: absolute;
+    top: -8px;
+    right: -6px;
+    cursor: pointer;
+}
+.delFiled{
+    top: -7px;
+    right: -9px;
+}
+.filedName{
+    position: relative;
+    border: 1px solid #dcdfe6;
+    border-radius: 4px;
+    padding: 5px 10px;
+}
+.activeFiledName{
+    border: 1px solid #48C5D7;
+}
 </style>

src/components/qualityControl/AddQualityControlTemp.vue

@@ -18,7 +18,8 @@
                             <el-option v-for="item in moduleList" :key="item.id" :label="item.name" :value="item.val"></el-option>
                         </el-select>
                     </el-form-item>
-                     <el-form-item label="添加模块内容：" prop="moduleInfo" class="formItem">
+                    
+                    <el-form-item label="添加模块内容：" prop="moduleInfo" class="formItem">
                         <div class="moduleInfoItem" v-for="(item,index) in moduleInfoList">
                             <div class="searchBox">
                                 <el-input v-model.trim="item.searchName"  placeholder="搜索字段单元" @input="searchFiled(index)">
@@ -127,12 +128,12 @@ export default {
                     selectFiled.push(item.questionDTO)
                 }
                 this.moduleInfoList.push({
-                searchName:"",
-                activeIndex: -1,
-                searchResult:[
-                ],
-                selectFiled:selectFiled
-            })
+                    searchName:"",
+                    activeIndex: -1,
+                    searchResult:[
+                    ],
+                    selectFiled:selectFiled
+                })
                 
             }