|
@@ -1,5 +1,5 @@
|
|
<template>
|
|
<template>
|
|
- <div class="symptomTagGroupWrapper clearfix">
|
|
|
|
|
|
+ <div class="symptomTagGroupWrapper clearfix">
|
|
<div class="bottomPartLeft">
|
|
<div class="bottomPartLeft">
|
|
<p class="poolTitle">标签池</p>
|
|
<p class="poolTitle">标签池</p>
|
|
<div class="pool">
|
|
<div class="pool">
|
|
@@ -7,48 +7,72 @@
|
|
placeholder="请输入搜索内容"
|
|
placeholder="请输入搜索内容"
|
|
v-model="searchVal"
|
|
v-model="searchVal"
|
|
>
|
|
>
|
|
- <i
|
|
|
|
- slot="prefix"
|
|
|
|
- class="el-input__icon el-icon-search"
|
|
|
|
- ></i>
|
|
|
|
|
|
+ <i
|
|
|
|
+ slot="prefix"
|
|
|
|
+ class="el-input__icon el-icon-search"
|
|
|
|
+ ></i>
|
|
</el-input>
|
|
</el-input>
|
|
<ul class="tagList">
|
|
<ul class="tagList">
|
|
- <li v-for="(item, index) in leftTagsList"
|
|
|
|
- class = "tagItem"
|
|
|
|
- :key='item.id'
|
|
|
|
- :title="'[ '+item.tagName+' ]'"
|
|
|
|
- :style="getStyle(item)?styles:null"
|
|
|
|
- @click='selectLeftTag(item, index, $event)'
|
|
|
|
- >
|
|
|
|
- <p class="tagName ellipsis" >{{item.tagName}} </p>
|
|
|
|
- </li>
|
|
|
|
|
|
+ <li
|
|
|
|
+ v-for="(item, index) in leftTagsList"
|
|
|
|
+ class="tagItem"
|
|
|
|
+ :key='item.id'
|
|
|
|
+ :title="'[ '+item.tagName+' ]'"
|
|
|
|
+ :style="getStyle(item)?styles:null"
|
|
|
|
+ @click='selectLeftTag(item, index, $event)'
|
|
|
|
+ >
|
|
|
|
+ <p class="tagName ellipsis">{{item.tagName}} </p>
|
|
|
|
+ </li>
|
|
</ul>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="bottomPartMid fl">
|
|
<div class="bottomPartMid fl">
|
|
- <p><span class="el-icon-arrow-right" @click="toRightList"></span></p>
|
|
|
|
- <p><span class="el-icon-arrow-left" @click="toLeftList"></span></p>
|
|
|
|
|
|
+ <p><span
|
|
|
|
+ class="el-icon-arrow-right"
|
|
|
|
+ @click="toRightList"
|
|
|
|
+ ></span></p>
|
|
|
|
+ <p><span
|
|
|
|
+ class="el-icon-arrow-left"
|
|
|
|
+ @click="toLeftList"
|
|
|
|
+ ></span></p>
|
|
</div>
|
|
</div>
|
|
<div class="bottomPartRight ">
|
|
<div class="bottomPartRight ">
|
|
- <p class="poolTitle">操作界面:</p>
|
|
|
|
|
|
+ <div class="poolTitle clearfix">
|
|
|
|
+ <span class="fl">操作界面:</span>
|
|
|
|
+ <div class="arrowWrap fr">
|
|
|
|
+ <i
|
|
|
|
+ class="el-icon-arrow-left arrowWrapPub"
|
|
|
|
+ @click="toggleTopDownList(1)"
|
|
|
|
+ ></i>
|
|
|
|
+ <i
|
|
|
|
+ class="el-icon-arrow-right arrowWrapPub"
|
|
|
|
+ @click="toggleTopDownList(2)"
|
|
|
|
+ ></i>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
<ul class="tagList operationPool templateTagList">
|
|
<ul class="tagList operationPool templateTagList">
|
|
- <li class = "tagItem operationItem"
|
|
|
|
- v-for="(item) in rightTagsList2"
|
|
|
|
- :key='item.id'
|
|
|
|
- :style="getStyle2(item)?styles:null"
|
|
|
|
- @click='selectRightTag(item)'
|
|
|
|
- >
|
|
|
|
- <div class="inputBox">
|
|
|
|
- <el-input
|
|
|
|
- v-if="item.type === 'input'"
|
|
|
|
- placeholder=""
|
|
|
|
- v-model="item.text"
|
|
|
|
- >
|
|
|
|
- </el-input>
|
|
|
|
- </div>
|
|
|
|
- <p v-if="item.tagName" class="tagName ellipsis" :title="'[ '+item.tagName+' ]'">{{item.tagName}} </p>
|
|
|
|
- </li>
|
|
|
|
- </ul>
|
|
|
|
|
|
+ <li
|
|
|
|
+ class="tagItem operationItem"
|
|
|
|
+ v-for="(item) in rightTagsList2"
|
|
|
|
+ :key='item.id'
|
|
|
|
+ :style="getStyle2(item)?styles:null"
|
|
|
|
+ @click='selectRightTag(item)'
|
|
|
|
+ >
|
|
|
|
+ <div class="inputBox">
|
|
|
|
+ <el-input
|
|
|
|
+ v-if="item.type === 'input'"
|
|
|
|
+ placeholder=""
|
|
|
|
+ v-model="item.text"
|
|
|
|
+ >
|
|
|
|
+ </el-input>
|
|
|
|
+ </div>
|
|
|
|
+ <p
|
|
|
|
+ v-if="item.tagName"
|
|
|
|
+ class="tagName ellipsis"
|
|
|
|
+ :title="'[ '+item.tagName+' ]'"
|
|
|
|
+ >{{item.tagName}} </p>
|
|
|
|
+ </li>
|
|
|
|
+ </ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</template>
|
|
@@ -57,307 +81,377 @@ import api from '@api/icss.js';
|
|
import utils from '@api/utils.js';
|
|
import utils from '@api/utils.js';
|
|
|
|
|
|
export default {
|
|
export default {
|
|
- name: "BloodPressTagGroup",
|
|
|
|
- props: {
|
|
|
|
- pool: {
|
|
|
|
- default: () => [],
|
|
|
|
- type: Array
|
|
|
|
- },
|
|
|
|
- type: {
|
|
|
|
- default: '',
|
|
|
|
- type: String
|
|
|
|
- },
|
|
|
|
- sexType: {
|
|
|
|
- default: '',
|
|
|
|
- type: String
|
|
|
|
- },
|
|
|
|
- options: {
|
|
|
|
- default: () => [],
|
|
|
|
- type: Array
|
|
|
|
- },
|
|
|
|
|
|
+ name: "BloodPressTagGroup",
|
|
|
|
+ props: {
|
|
|
|
+ pool: {
|
|
|
|
+ default: () => [],
|
|
|
|
+ type: Array
|
|
},
|
|
},
|
|
- data() {
|
|
|
|
- return {
|
|
|
|
- leftTagsList: [],
|
|
|
|
- selectLeftTagsList: [],
|
|
|
|
- rightTagsList: [],
|
|
|
|
- rightTagsList2: [],
|
|
|
|
- selectRightTagsList: [],
|
|
|
|
- searchVal: '',
|
|
|
|
- styles:{
|
|
|
|
- background:'#eae7e7'
|
|
|
|
- },
|
|
|
|
- }
|
|
|
|
|
|
+ type: {
|
|
|
|
+ default: '',
|
|
|
|
+ type: String
|
|
},
|
|
},
|
|
- mounted() {
|
|
|
|
- this.rightTagsList2 = this.options
|
|
|
|
- let newArr = []
|
|
|
|
- for (let i = 0; i < this.rightTagsList2.length; i++) {
|
|
|
|
- if(this.rightTagsList2[i].tagType == 8) {
|
|
|
|
- newArr.push({ text: this.rightTagsList2[i].tagName ,type:'input' ,id: i+',,,'})
|
|
|
|
- } else {
|
|
|
|
- if(i === 0 ) {
|
|
|
|
- newArr.push({ text: '' ,type:'input' ,id: i+',,,'})
|
|
|
|
- }
|
|
|
|
- newArr.push(this.rightTagsList2[i])
|
|
|
|
- if(!this.rightTagsList2[i+1] || this.rightTagsList2[i+1]&&this.rightTagsList2[i+1].tagType != 8) {
|
|
|
|
- newArr.push({ text: '' ,type:'input' ,id: i+',,,,'})
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
|
|
+ sexType: {
|
|
|
|
+ default: '',
|
|
|
|
+ type: String
|
|
|
|
+ },
|
|
|
|
+ options: {
|
|
|
|
+ default: () => [],
|
|
|
|
+ type: Array
|
|
|
|
+ },
|
|
|
|
+ },
|
|
|
|
+ data() {
|
|
|
|
+ return {
|
|
|
|
+ leftTagsList: [],
|
|
|
|
+ selectLeftTagsList: [],
|
|
|
|
+ rightTagsList: [],
|
|
|
|
+ rightTagsList2: [],
|
|
|
|
+ selectRightTagsList: [],
|
|
|
|
+ searchVal: '',
|
|
|
|
+ styles: {
|
|
|
|
+ background: '#eae7e7'
|
|
|
|
+ },
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ mounted() {
|
|
|
|
+ this.rightTagsList2 = this.options
|
|
|
|
+ let newArr = []
|
|
|
|
+ for (let i = 0; i < this.rightTagsList2.length; i++) {
|
|
|
|
+ if (this.rightTagsList2[i].tagType == 8) {
|
|
|
|
+ newArr.push({ text: this.rightTagsList2[i].tagName, type: 'input', id: i + ',,,' })
|
|
|
|
+ } else {
|
|
|
|
+ if (i === 0) {
|
|
|
|
+ newArr.push({ text: '', type: 'input', id: i + ',,,' })
|
|
|
|
+ }
|
|
|
|
+ newArr.push(this.rightTagsList2[i])
|
|
|
|
+ if (!this.rightTagsList2[i + 1] || this.rightTagsList2[i + 1] && this.rightTagsList2[i + 1].tagType != 8) {
|
|
|
|
+ newArr.push({ text: '', type: 'input', id: i + ',,,,' })
|
|
}
|
|
}
|
|
- this.rightTagsList2 = newArr
|
|
|
|
- this.$emit('changeActionData',this.rightTagsList2, false);
|
|
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ this.rightTagsList2 = newArr
|
|
|
|
+ this.$emit('changeActionData', this.rightTagsList2, false);
|
|
|
|
+ this.searchTagList()
|
|
|
|
+ // this.leftTagsList = this.pool
|
|
|
|
+ // console.log('TAGPOOL', this.pool)
|
|
|
|
+ },
|
|
|
|
+ watch: {
|
|
|
|
+ pool(newVal, preVal) {
|
|
|
|
+ this.leftTagsList = newVal
|
|
|
|
+ },
|
|
|
|
+ searchVal(newVal, preVal) {
|
|
|
|
+ if (newVal.trim() == '') {
|
|
this.searchTagList()
|
|
this.searchTagList()
|
|
- // this.leftTagsList = this.pool
|
|
|
|
- // console.log('TAGPOOL', this.pool)
|
|
|
|
|
|
+ } else if (newVal.trim() != preVal.trim()) {
|
|
|
|
+ this.searchTagList()
|
|
|
|
+ }
|
|
},
|
|
},
|
|
- watch: {
|
|
|
|
- pool(newVal, preVal) {
|
|
|
|
- this.leftTagsList = newVal
|
|
|
|
- },
|
|
|
|
- searchVal(newVal, preVal){
|
|
|
|
- if(newVal.trim() == ''){
|
|
|
|
- this.searchTagList()
|
|
|
|
- }else if(newVal.trim() != preVal.trim()){
|
|
|
|
- this.searchTagList()
|
|
|
|
- }
|
|
|
|
- },
|
|
|
|
- sexType(newVal, preVal) {
|
|
|
|
- if (newVal != preVal) {
|
|
|
|
- if (JSON.stringify(newVal) != JSON.stringify(preVal)) {
|
|
|
|
- this.leftTagsList = [];
|
|
|
|
- this.selectLeftTagsList = [];
|
|
|
|
- this.rightTagsList = [];
|
|
|
|
- this.rightTagsList2 = [];
|
|
|
|
- this.selectRightTagsList = [];
|
|
|
|
- this.searchVal = '';
|
|
|
|
- this.searchTagList();
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
- },
|
|
|
|
-
|
|
|
|
-
|
|
|
|
|
|
+ sexType(newVal, preVal) {
|
|
|
|
+ if (newVal != preVal) {
|
|
|
|
+ if (JSON.stringify(newVal) != JSON.stringify(preVal)) {
|
|
|
|
+ this.leftTagsList = [];
|
|
|
|
+ this.selectLeftTagsList = [];
|
|
|
|
+ this.rightTagsList = [];
|
|
|
|
+ this.rightTagsList2 = [];
|
|
|
|
+ this.selectRightTagsList = [];
|
|
|
|
+ this.searchVal = '';
|
|
|
|
+ this.searchTagList();
|
|
|
|
+ }
|
|
|
|
+ }
|
|
},
|
|
},
|
|
- methods: {
|
|
|
|
- selectLeftTag(tag, index, e) {
|
|
|
|
-
|
|
|
|
- const hasTag = this.isHasTag(tag, this.selectLeftTagsList)
|
|
|
|
- if (hasTag) {
|
|
|
|
- this.selectLeftTagsList = this.selectLeftTagsList.filter(item => item.id !== tag.id)
|
|
|
|
- } else {
|
|
|
|
- this.selectLeftTagsList.push(tag);
|
|
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+ },
|
|
|
|
+ methods: {
|
|
|
|
+ selectLeftTag(tag, index, e) {
|
|
|
|
+
|
|
|
|
+ const hasTag = this.isHasTag(tag, this.selectLeftTagsList)
|
|
|
|
+ if (hasTag) {
|
|
|
|
+ this.selectLeftTagsList = this.selectLeftTagsList.filter(item => item.id !== tag.id)
|
|
|
|
+ } else {
|
|
|
|
+ this.selectLeftTagsList.push(tag);
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ },
|
|
|
|
+ selectRightTag(tag) {
|
|
|
|
+ if (tag.type == 'input') {
|
|
|
|
+ return;
|
|
|
|
+ }
|
|
|
|
+ let tmpArr = [];
|
|
|
|
+ tmpArr.push(tag);
|
|
|
|
+ if (this.selectRightTagsList.length > 0 && tag.id == this.selectRightTagsList[0].id) {
|
|
|
|
+ this.selectRightTagsList = this.selectRightTagsList.filter(item => item.id !== tag.id)
|
|
|
|
+ } else {
|
|
|
|
+ this.selectRightTagsList = tmpArr;
|
|
|
|
+ }
|
|
|
|
+ // const hasTag = this.isHasTag(tag, this.selectRightTagsList)
|
|
|
|
+ // if (hasTag) {
|
|
|
|
+ // this.selectRightTagsList = this.selectRightTagsList.filter(item => item.id !== tag.id)
|
|
|
|
+ // } else {
|
|
|
|
+ // this.selectRightTagsList.push(tag);
|
|
|
|
+ // }
|
|
|
|
+
|
|
|
|
+ },
|
|
|
|
+ toggleTopDownList(type) {
|
|
|
|
+ if (this.selectRightTagsList.length == 0 || this.rightTagsList2.length == 0) {
|
|
|
|
+ return
|
|
|
|
+ }
|
|
|
|
+ const tmpRightSelect = JSON.parse(JSON.stringify(this.selectRightTagsList))
|
|
|
|
+ const tmpRightLis = JSON.parse(JSON.stringify(this.rightTagsList2))
|
|
|
|
+ const numLen = tmpRightLis.length
|
|
|
|
+ const numId = tmpRightSelect[0].id
|
|
|
|
+ if (type == 1) {
|
|
|
|
+ for (let i = 0; i < tmpRightLis.length; i++) {
|
|
|
|
+ if (numId === tmpRightLis[i].id) {//选中的是第几个
|
|
|
|
+ if (i == 1) {//第一个不能往上移动
|
|
|
|
+ return;
|
|
|
|
+ } else {//先把这个元素和后面的输入框从数组中删除,再添加到数组里
|
|
|
|
+ let tmp1 = tmpRightLis[i]
|
|
|
|
+ let tmp2 = tmpRightLis[i + 1]
|
|
|
|
+ tmpRightLis.splice(i, 1)
|
|
|
|
+ tmpRightLis.splice(i, 1)
|
|
|
|
+ tmpRightLis.splice(i - 2, 0, tmp1)
|
|
|
|
+ tmpRightLis.splice(i - 1, 0, tmp2)
|
|
|
|
+ this.rightTagsList2 = [...tmpRightLis]
|
|
|
|
+ this.$emit('changeActionData', this.rightTagsList2, false);
|
|
|
|
+ return
|
|
}
|
|
}
|
|
-
|
|
|
|
- },
|
|
|
|
- selectRightTag(tag) {
|
|
|
|
- const hasTag = this.isHasTag(tag, this.selectRightTagsList)
|
|
|
|
- if (hasTag) {
|
|
|
|
- this.selectRightTagsList = this.selectRightTagsList.filter(item => item.id !== tag.id)
|
|
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ } else if (type == 2) {
|
|
|
|
+ for (let i = 0; i < tmpRightLis.length; i++) {
|
|
|
|
+ if (numId === tmpRightLis[i].id) {
|
|
|
|
+ if (i == numLen - 1) {
|
|
|
|
+ return;
|
|
} else {
|
|
} else {
|
|
- this.selectRightTagsList.push(tag);
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- },
|
|
|
|
- isHasTag(item, arr) {
|
|
|
|
- for ( let i = 0; i <arr.length; i++) {
|
|
|
|
- if(arr[i].id === item.id) {
|
|
|
|
- return true;
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
- return false;
|
|
|
|
- },
|
|
|
|
- getStyle(item){ //左侧选中状态
|
|
|
|
- // console.log('selected',utils.filterArr(this.leftTagsList,item,2))
|
|
|
|
- // return utils.filterArr(this.selectLeftTagsList,item,2)
|
|
|
|
- return this.isHasTag(item, this.selectLeftTagsList)
|
|
|
|
- },
|
|
|
|
- getStyle2(item) {
|
|
|
|
- // return utils.filterArr(this.selectRightTagsList,item,2)
|
|
|
|
- return this.isHasTag(item, this.selectRightTagsList)
|
|
|
|
- },
|
|
|
|
- toLeftList() {
|
|
|
|
- // if(!this.searchVal) {
|
|
|
|
- // this.leftTagsList = this.searchTagList()
|
|
|
|
- // }
|
|
|
|
-
|
|
|
|
- for (let i = 0; i < this.selectRightTagsList.length; i++) {
|
|
|
|
- this.rightTagsList = this.rightTagsList.filter(item => item.id !== this.selectRightTagsList[i].id)
|
|
|
|
- }
|
|
|
|
- for (let i = 0; i < this.selectRightTagsList.length; i++) {//每次往回移时同时删掉下面输入框
|
|
|
|
- if (this.selectRightTagsList[i].type !== 'input') {
|
|
|
|
- for (let j = 0; j < this.rightTagsList2.length; j++) {
|
|
|
|
- if(this.selectRightTagsList[i].id === this.rightTagsList2[j].id) {
|
|
|
|
- if(this.rightTagsList2.length === 3) {
|
|
|
|
- this.rightTagsList2 = []
|
|
|
|
- } else {
|
|
|
|
- this.rightTagsList2.splice(j, 2)
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
|
|
+ let tmp1 = tmpRightLis[i]
|
|
|
|
+ let tmp2 = tmpRightLis[i + 1]
|
|
|
|
+ tmpRightLis.splice(i, 1)
|
|
|
|
+ tmpRightLis.splice(i, 1)
|
|
|
|
+ tmpRightLis.splice(i + 2, 0, tmp1)
|
|
|
|
+ tmpRightLis.splice(i + 3, 0, tmp2)
|
|
|
|
+ this.rightTagsList2 = [...tmpRightLis]
|
|
|
|
+ this.$emit('changeActionData', this.rightTagsList2, false);
|
|
|
|
+ return
|
|
}
|
|
}
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ isHasTag(item, arr) {
|
|
|
|
+ for (let i = 0; i < arr.length; i++) {
|
|
|
|
+ if (arr[i].id === item.id) {
|
|
|
|
+ return true;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ return false;
|
|
|
|
+ },
|
|
|
|
+ getStyle(item) { //左侧选中状态
|
|
|
|
+ // console.log('selected',utils.filterArr(this.leftTagsList,item,2))
|
|
|
|
+ // return utils.filterArr(this.selectLeftTagsList,item,2)
|
|
|
|
+ return this.isHasTag(item, this.selectLeftTagsList)
|
|
|
|
+ },
|
|
|
|
+ getStyle2(item) {
|
|
|
|
+ // return utils.filterArr(this.selectRightTagsList,item,2)
|
|
|
|
+ return this.isHasTag(item, this.selectRightTagsList)
|
|
|
|
+ },
|
|
|
|
+ toLeftList() {
|
|
|
|
+ // if(!this.searchVal) {
|
|
|
|
+ // this.leftTagsList = this.searchTagList()
|
|
|
|
+ // }
|
|
|
|
|
|
- // this.rightTagsList2 = [];
|
|
|
|
- // let textItem = { text: ',' }
|
|
|
|
- // for (let i = 0; i < this.rightTagsList.length; i++) {
|
|
|
|
- // if(this.rightTagsList2.length === 0) {
|
|
|
|
- // this.rightTagsList2.push(JSON.parse(JSON.stringify(textItem)))
|
|
|
|
- // }
|
|
|
|
- // this.rightTagsList2.push(this.rightTagsList[i]);
|
|
|
|
- // this.rightTagsList2.push(JSON.parse(JSON.stringify(textItem)))
|
|
|
|
- // }
|
|
|
|
- // for (let i = 0; i < this.rightTagsList.length; i++) {
|
|
|
|
- // this.leftTagsList = this.leftTagsList.filter(item => item.id !== this.rightTagsList[i].id)
|
|
|
|
- // }
|
|
|
|
- this.selectLeftTagsList = []
|
|
|
|
- this.selectRightTagsList = []
|
|
|
|
- this.searchTagList()
|
|
|
|
- this.$emit('changeActionData',this.rightTagsList2, false);
|
|
|
|
- },
|
|
|
|
- toRightList() {
|
|
|
|
- this.rightTagsList.push(...this.selectLeftTagsList);
|
|
|
|
- let textItem = { text: '' ,type:'input' }
|
|
|
|
- for (let i = 0; i < this.selectLeftTagsList.length; i++) { //选中标签每个前后加入输入框
|
|
|
|
- if(this.rightTagsList2.length === 0) {
|
|
|
|
- let textItem1 = JSON.parse(JSON.stringify(textItem))
|
|
|
|
- textItem1.id = this.selectLeftTagsList[i].id + ',,'
|
|
|
|
- this.rightTagsList2.push(textItem1)
|
|
|
|
- }
|
|
|
|
- this.rightTagsList2.push(this.selectLeftTagsList[i]);
|
|
|
|
- let textItem2 = JSON.parse(JSON.stringify(textItem))
|
|
|
|
- textItem2.id = this.selectLeftTagsList[i].id + ','
|
|
|
|
- this.rightTagsList2.push(JSON.parse(JSON.stringify(textItem2)))
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- for (let i = 0; i < this.rightTagsList.length; i++) {
|
|
|
|
- this.leftTagsList = this.leftTagsList.filter(item => item.id !== this.rightTagsList[i].id)
|
|
|
|
- }
|
|
|
|
- this.selectLeftTagsList = []
|
|
|
|
- this.selectRightTagsList = []
|
|
|
|
- this.$emit('changeActionData',this.rightTagsList2, false);
|
|
|
|
- },
|
|
|
|
- searchTagList() {
|
|
|
|
- let notIds = []
|
|
|
|
- for (let i = 0; i < this.rightTagsList2.length; i++) {
|
|
|
|
- if(typeof this.rightTagsList2[i].id === 'number') {
|
|
|
|
- notIds.push(this.rightTagsList2[i].id)
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
|
|
+ for (let i = 0; i < this.selectRightTagsList.length; i++) {
|
|
|
|
+ this.rightTagsList = this.rightTagsList.filter(item => item.id !== this.selectRightTagsList[i].id)
|
|
|
|
+ }
|
|
|
|
+ for (let i = 0; i < this.selectRightTagsList.length; i++) {//每次往回移时同时删掉下面输入框
|
|
|
|
+ if (this.selectRightTagsList[i].type !== 'input') {
|
|
|
|
+ for (let j = 0; j < this.rightTagsList2.length; j++) {
|
|
|
|
+ if (this.selectRightTagsList[i].id === this.rightTagsList2[j].id) {
|
|
|
|
+ if (this.rightTagsList2.length === 3) {
|
|
|
|
+ this.rightTagsList2 = []
|
|
|
|
+ } else {
|
|
|
|
+ this.rightTagsList2.splice(j, 2)
|
|
|
|
+ }
|
|
}
|
|
}
|
|
-
|
|
|
|
- let param1 = api.getGroupParams(3);
|
|
|
|
- let param2 = {
|
|
|
|
- "tagName": this.searchVal,
|
|
|
|
- "type": this.type || '',
|
|
|
|
- "notIds": notIds,
|
|
|
|
- "sexType": this.sexType,
|
|
|
|
- }
|
|
|
|
- let param = Object.assign({},param1,param2)
|
|
|
|
- api.searchTagList(param).then((res) => {
|
|
|
|
- if (res.data.code === '0') {
|
|
|
|
- this.leftTagsList = res.data.data
|
|
|
|
- this.selectLeftTagsList = []
|
|
|
|
- this.selectRightTagsList = []
|
|
|
|
- }
|
|
|
|
- })
|
|
|
|
-
|
|
|
|
|
|
+ }
|
|
}
|
|
}
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ // this.rightTagsList2 = [];
|
|
|
|
+ // let textItem = { text: ',' }
|
|
|
|
+ // for (let i = 0; i < this.rightTagsList.length; i++) {
|
|
|
|
+ // if(this.rightTagsList2.length === 0) {
|
|
|
|
+ // this.rightTagsList2.push(JSON.parse(JSON.stringify(textItem)))
|
|
|
|
+ // }
|
|
|
|
+ // this.rightTagsList2.push(this.rightTagsList[i]);
|
|
|
|
+ // this.rightTagsList2.push(JSON.parse(JSON.stringify(textItem)))
|
|
|
|
+ // }
|
|
|
|
+ // for (let i = 0; i < this.rightTagsList.length; i++) {
|
|
|
|
+ // this.leftTagsList = this.leftTagsList.filter(item => item.id !== this.rightTagsList[i].id)
|
|
|
|
+ // }
|
|
|
|
+ this.selectLeftTagsList = []
|
|
|
|
+ this.selectRightTagsList = []
|
|
|
|
+ this.searchTagList()
|
|
|
|
+ this.$emit('changeActionData', this.rightTagsList2, false);
|
|
|
|
+ },
|
|
|
|
+ toRightList() {
|
|
|
|
+ this.rightTagsList.push(...this.selectLeftTagsList);
|
|
|
|
+ let textItem = { text: '', type: 'input' }
|
|
|
|
+ for (let i = 0; i < this.selectLeftTagsList.length; i++) { //选中标签每个前后加入输入框
|
|
|
|
+ if (this.rightTagsList2.length === 0) {
|
|
|
|
+ let textItem1 = JSON.parse(JSON.stringify(textItem))
|
|
|
|
+ textItem1.id = this.selectLeftTagsList[i].id + ',,'
|
|
|
|
+ this.rightTagsList2.push(textItem1)
|
|
|
|
+ }
|
|
|
|
+ this.rightTagsList2.push(this.selectLeftTagsList[i]);
|
|
|
|
+ let textItem2 = JSON.parse(JSON.stringify(textItem))
|
|
|
|
+ textItem2.id = this.selectLeftTagsList[i].id + ','
|
|
|
|
+ this.rightTagsList2.push(JSON.parse(JSON.stringify(textItem2)))
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ for (let i = 0; i < this.rightTagsList.length; i++) {
|
|
|
|
+ this.leftTagsList = this.leftTagsList.filter(item => item.id !== this.rightTagsList[i].id)
|
|
|
|
+ }
|
|
|
|
+ this.selectLeftTagsList = []
|
|
|
|
+ this.selectRightTagsList = []
|
|
|
|
+ this.$emit('changeActionData', this.rightTagsList2, false);
|
|
|
|
+ },
|
|
|
|
+ searchTagList() {
|
|
|
|
+ let notIds = []
|
|
|
|
+ for (let i = 0; i < this.rightTagsList2.length; i++) {
|
|
|
|
+ if (typeof this.rightTagsList2[i].id === 'number') {
|
|
|
|
+ notIds.push(this.rightTagsList2[i].id)
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ let param1 = api.getGroupParams(3);
|
|
|
|
+ let param2 = {
|
|
|
|
+ "tagName": this.searchVal,
|
|
|
|
+ "type": this.type || '',
|
|
|
|
+ "notIds": notIds,
|
|
|
|
+ "sexType": this.sexType,
|
|
|
|
+ }
|
|
|
|
+ let param = Object.assign({}, param1, param2)
|
|
|
|
+ api.searchTagList(param).then((res) => {
|
|
|
|
+ if (res.data.code === '0') {
|
|
|
|
+ this.leftTagsList = res.data.data
|
|
|
|
+ this.selectLeftTagsList = []
|
|
|
|
+ this.selectRightTagsList = []
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
|
|
}
|
|
}
|
|
|
|
+
|
|
|
|
+ }
|
|
}
|
|
}
|
|
</script>
|
|
</script>
|
|
|
|
|
|
<style lang="less" scoped>
|
|
<style lang="less" scoped>
|
|
-@import '../../less/common.less';
|
|
|
|
|
|
+@import "../../less/common.less";
|
|
.symptomTagGroupWrapper {
|
|
.symptomTagGroupWrapper {
|
|
- .bottomPartLeft {
|
|
|
|
- width: 30%;
|
|
|
|
- box-sizing: border-box;
|
|
|
|
- float: left;
|
|
|
|
- }
|
|
|
|
- .poolTitle {
|
|
|
|
- // border-bottom: 1px solid @icssBorder;
|
|
|
|
- box-sizing: border-box;
|
|
|
|
- margin-bottom: 20px;
|
|
|
|
- }
|
|
|
|
- .pool {
|
|
|
|
- // border:1px solid @icssBorder;
|
|
|
|
-
|
|
|
|
- }
|
|
|
|
- .inputBox {
|
|
|
|
- width: 100px;
|
|
|
|
|
|
+ .arrowWrap {
|
|
|
|
+ position: absolute;
|
|
|
|
+ right: 0;
|
|
|
|
+ .arrowWrapPub {
|
|
|
|
+ border: 1px solid @icssBorder;
|
|
|
|
+ height: 23px;
|
|
|
|
+ width: 40px;
|
|
|
|
+ text-align: center;
|
|
|
|
+ background: #fff;
|
|
|
|
+ line-height: 23px;
|
|
|
|
+ border-radius: 3px;
|
|
|
|
+ margin: 0 7px 10px 5px;
|
|
}
|
|
}
|
|
- .search {
|
|
|
|
- width: 100%;
|
|
|
|
- border-bottom: 1px solid @icssBorder;
|
|
|
|
- box-sizing: border-box;
|
|
|
|
- height: 30px;
|
|
|
|
- }
|
|
|
|
- .tagList {
|
|
|
|
- height: 300px;
|
|
|
|
- overflow-y: auto;
|
|
|
|
- border: 1px solid @icssBorder;
|
|
|
|
- }
|
|
|
|
- .tagItem {
|
|
|
|
- line-height: 30px;
|
|
|
|
- padding: 0px 10px;
|
|
|
|
-
|
|
|
|
- }
|
|
|
|
- .operationPool {
|
|
|
|
- position: relative;
|
|
|
|
- width: 85%;
|
|
|
|
- padding: 10px;
|
|
|
|
- }
|
|
|
|
- .tagName {
|
|
|
|
- line-height: 30px;
|
|
|
|
- }
|
|
|
|
- .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;
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
- .bottomPartRight {
|
|
|
|
- float: left;
|
|
|
|
- width: 60%;
|
|
|
|
- }
|
|
|
|
- Button {
|
|
|
|
- margin-top: 20px;
|
|
|
|
- }
|
|
|
|
- .operationItem {
|
|
|
|
|
|
+ }
|
|
|
|
+ .bottomPartLeft {
|
|
|
|
+ width: 30%;
|
|
|
|
+ box-sizing: border-box;
|
|
|
|
+ float: left;
|
|
|
|
+ }
|
|
|
|
+ .poolTitle {
|
|
|
|
+ // border-bottom: 1px solid @icssBorder;
|
|
|
|
+ box-sizing: border-box;
|
|
|
|
+ margin-bottom: 20px;
|
|
|
|
+ position: relative;
|
|
|
|
+ }
|
|
|
|
+ .pool {
|
|
|
|
+ // border:1px solid @icssBorder;
|
|
|
|
+ }
|
|
|
|
+ .inputBox {
|
|
|
|
+ width: 100px;
|
|
|
|
+ }
|
|
|
|
+ .search {
|
|
|
|
+ width: 100%;
|
|
|
|
+ border-bottom: 1px solid @icssBorder;
|
|
|
|
+ box-sizing: border-box;
|
|
|
|
+ height: 30px;
|
|
|
|
+ }
|
|
|
|
+ .tagList {
|
|
|
|
+ height: 300px;
|
|
|
|
+ overflow-y: auto;
|
|
|
|
+ border: 1px solid @icssBorder;
|
|
|
|
+ }
|
|
|
|
+ .tagItem {
|
|
|
|
+ line-height: 30px;
|
|
|
|
+ padding: 0px 10px;
|
|
|
|
+ }
|
|
|
|
+ .operationPool {
|
|
|
|
+ position: relative;
|
|
|
|
+ width: 100%;
|
|
|
|
+ padding: 10px;
|
|
|
|
+ box-sizing: border-box;
|
|
|
|
+ }
|
|
|
|
+ .tagName {
|
|
|
|
+ line-height: 30px;
|
|
|
|
+ }
|
|
|
|
+ .tagName:before {
|
|
|
|
+ content: "[";
|
|
|
|
+ }
|
|
|
|
+ .tagName::after {
|
|
|
|
+ content: "]";
|
|
|
|
+ }
|
|
|
|
+ .bottomPartMid {
|
|
|
|
+ width: 8%;
|
|
|
|
+ margin-top: 60px;
|
|
|
|
+ p {
|
|
|
|
+ width: 100%;
|
|
|
|
+ text-align: center;
|
|
|
|
+ span {
|
|
|
|
+ cursor: pointer;
|
|
display: inline-block;
|
|
display: inline-block;
|
|
|
|
+ width: 30px;
|
|
|
|
+ height: 40px;
|
|
line-height: 40px;
|
|
line-height: 40px;
|
|
- margin: 0 5px 10px 0;
|
|
|
|
- float: left;
|
|
|
|
- text-align: center;
|
|
|
|
- p {
|
|
|
|
- padding: 5px 0;
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
- .templateTagList {
|
|
|
|
- height: 318px;
|
|
|
|
|
|
+ margin: 0 auto;
|
|
|
|
+ border: 1px solid @icssBorder;
|
|
|
|
+ margin-bottom: 15px;
|
|
|
|
+ font-size: 18px;
|
|
|
|
+ }
|
|
}
|
|
}
|
|
- .active {
|
|
|
|
- color: #aBcdef;
|
|
|
|
|
|
+ }
|
|
|
|
+ .bottomPartRight {
|
|
|
|
+ float: left;
|
|
|
|
+ width: 60%;
|
|
|
|
+ }
|
|
|
|
+ button {
|
|
|
|
+ margin-top: 20px;
|
|
|
|
+ }
|
|
|
|
+ .operationItem {
|
|
|
|
+ display: inline-block;
|
|
|
|
+ line-height: 40px;
|
|
|
|
+ margin: 0 5px 10px 0;
|
|
|
|
+ float: left;
|
|
|
|
+ text-align: center;
|
|
|
|
+ p {
|
|
|
|
+ padding: 5px 0;
|
|
}
|
|
}
|
|
|
|
+ }
|
|
|
|
+ .templateTagList {
|
|
|
|
+ height: 318px;
|
|
|
|
+ }
|
|
|
|
+ .active {
|
|
|
|
+ color: #abcdef;
|
|
|
|
+ }
|
|
}
|
|
}
|
|
</style>
|
|
</style>
|