|
@@ -1,29 +1,198 @@
|
|
|
<template>
|
|
|
- <div class="symptomTagGroupWrapper">
|
|
|
-
|
|
|
+ <div class="symptomTagGroupWrapper clearfix">
|
|
|
+ <div class="bottomPartLeft fl">
|
|
|
+ <p class="poolTitle">标签池</p>
|
|
|
+ <div class="pool">
|
|
|
+ <input class="search" @input="searchTag"/>
|
|
|
+ <ul class="tagList">
|
|
|
+ <li class = "tagItem"
|
|
|
+ v-for="item in leftTagsList"
|
|
|
+ :key='item.id'
|
|
|
+ @click='selectLeftTag(item)'
|
|
|
+ >
|
|
|
+ <p class="tagName">{{item.tagName}} </p>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
+ <div class="bottomPartMid fl">
|
|
|
+ <p><span class="el-icon-arrow-left" @click="toLeftList"></span></p>
|
|
|
+ <p><span class="el-icon-arrow-right" @click="toRightList"></span></p>
|
|
|
+ </div>
|
|
|
+ <div class="bottomPartRight fr">
|
|
|
+ <p class="poolTitle">操作池</p>
|
|
|
+ <ul class="tagList">
|
|
|
+ <li class = "tagItem"
|
|
|
+ v-for="item in rightTagsList"
|
|
|
+ :key='item.id'
|
|
|
+ @click='selectRightTag(item)'
|
|
|
+ >
|
|
|
+ <p class="tagName">{{item.tagName}} </p>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
<script>
|
|
|
+import api from '@api/icss.js';
|
|
|
export default {
|
|
|
name: "SymptomTagGroup",
|
|
|
props: {
|
|
|
- tagPool: {
|
|
|
- default: ()=>{return[]},
|
|
|
- type: Array
|
|
|
- }
|
|
|
+ dataPub: {},
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
+ leftTagsList: [],
|
|
|
+ selectLeftTagsList: [],
|
|
|
+ rightTagsList: [],
|
|
|
+ selectRightTagsList: [],
|
|
|
|
|
|
}
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.leftTagsList = this.dataPub.tagPool
|
|
|
+ console.log('TAGPOOL', this.dataPub)
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ selectLeftTag(tag) {
|
|
|
+ const hasTag = this.isHasTag(tag, this.selectLeftTagsList)
|
|
|
+ console.log(hasTag)
|
|
|
+ if (hasTag) {
|
|
|
+ this.selectLeftTagsList = this.selectLeftTagsList.filter(item => item.id !== tag.id)
|
|
|
+ } else {
|
|
|
+ this.selectLeftTagsList.push(tag);
|
|
|
+ }
|
|
|
+ console.log(this.selectLeftTagsList)
|
|
|
+ // this.isSelectTag(tag, this.selectLeftTagsList)
|
|
|
+
|
|
|
+ },
|
|
|
+ selectRightTag(tag) {
|
|
|
+ const hasTag = this.isHasTag(tag, this.selectRightTagsList)
|
|
|
+ console.log(hasTag)
|
|
|
+ if (hasTag) {
|
|
|
+ this.selectRightTagsList = this.selectRightTagsList.filter(item => item.id !== tag.id)
|
|
|
+ } else {
|
|
|
+ this.selectRightTagsList.push(tag);
|
|
|
+ }
|
|
|
+ console.log(this.selectRightTagsList)
|
|
|
+ // this.isSelectTag(tag, this.selectRightTagsList)
|
|
|
+
|
|
|
+ },
|
|
|
+ isHasTag(item, arr) {
|
|
|
+ for ( let i = 0; i <arr.length; i++) {
|
|
|
+ if(arr[i].id === item.id) {
|
|
|
+ return true;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return false;
|
|
|
+ },
|
|
|
+ isSelectTag(tag, arr) {
|
|
|
+ const hasTag = this.isHasTag(tag, arr)
|
|
|
+ console.log(hasTag)
|
|
|
+ if (hasTag) {
|
|
|
+ // arr = arr.filter(item => item.id !== tag.id)
|
|
|
+ arr = arr.filter((item) => {console.log('aaa',item.id === tag.id); return item.id !== tag.id})
|
|
|
+ } else {
|
|
|
+ arr.push(tag);
|
|
|
+ }
|
|
|
+ console.log(arr)
|
|
|
+ },
|
|
|
+ toLeftList() {
|
|
|
+ this.leftTagsList = this.tagPool
|
|
|
+ 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.rightTagsList.length; i++) {
|
|
|
+ this.leftTagsList = this.leftTagsList.filter(item => item.id !== this.rightTagsList[i].id)
|
|
|
+ }
|
|
|
+ this.selectRightTagsList = []
|
|
|
+ },
|
|
|
+ toRightList() {
|
|
|
+ this.rightTagsList.push(...this.selectLeftTagsList);
|
|
|
+ for (let i = 0; i < this.rightTagsList.length; i++) {
|
|
|
+ this.leftTagsList = this.leftTagsList.filter(item => item.id !== this.rightTagsList[i].id)
|
|
|
+ }
|
|
|
+ console.log(this.rightTagsList)
|
|
|
+ this.selectLeftTagsList = []
|
|
|
+ },
|
|
|
+ searchTag(value) {
|
|
|
+ console.log('value', value)
|
|
|
+ let notIds = []
|
|
|
+ for (let i = 0; i < this.rightTagsList.length; i++) {
|
|
|
+ notIds.push(rightTagsList[i].id)
|
|
|
+ }
|
|
|
+ console.log(this.dataPub)
|
|
|
+ let param = {
|
|
|
+ "tagName": value.data,
|
|
|
+ "tagType": [
|
|
|
+ 4
|
|
|
+ ],
|
|
|
+ "type": this.dataPub.region1 || ''
|
|
|
+ }
|
|
|
+ api.searchTagList(param).then((res) => {
|
|
|
+ if (res.data.code === '0') {
|
|
|
+ this.leftTagsList = res.data.data
|
|
|
+ }
|
|
|
+ })
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<style lang="less" scoped>
|
|
|
- .tagPool {
|
|
|
- width: 300px;
|
|
|
- height: 500px;
|
|
|
- border: 1px solid #000;
|
|
|
+@import '../../less/common.less';
|
|
|
+.symptomTagGroupWrapper {
|
|
|
+ .bottomPartLeft {
|
|
|
+ width: 30%;
|
|
|
+ box-sizing: border-box;
|
|
|
+ }
|
|
|
+ .poolTitle {
|
|
|
+ // border-bottom: 1px solid @icssBorder;
|
|
|
+ box-sizing: border-box;
|
|
|
+ margin-bottom: 20px;
|
|
|
+ }
|
|
|
+ .pool {
|
|
|
+ border:1px solid @icssBorder;
|
|
|
+
|
|
|
+ }
|
|
|
+ .search {
|
|
|
+ width: 100%;
|
|
|
+ border-bottom: 1px solid @icssBorder;
|
|
|
+ box-sizing: border-box;
|
|
|
+ height: 30px;
|
|
|
}
|
|
|
+ .tagList {
|
|
|
+ padding: 10px 10px;
|
|
|
+ height: 300px;
|
|
|
+ overflow-y: auto;
|
|
|
+ }
|
|
|
+ .tagItem {
|
|
|
+ line-height: 20px;
|
|
|
+ }
|
|
|
+ .tagName:before {
|
|
|
+ content: '['
|
|
|
+ }
|
|
|
+ .tagName::after {
|
|
|
+ content: ']'
|
|
|
+ }
|
|
|
+ .bottomPartMid {
|
|
|
+ width: 10%;
|
|
|
+ p {
|
|
|
+ width: 100%;
|
|
|
+ text-align: center;
|
|
|
+ span {
|
|
|
+ display: inline-block;
|
|
|
+ width: 50px;
|
|
|
+ height: 30px;
|
|
|
+ line-height: 30px;
|
|
|
+ margin: 0 auto;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .bottomPartRight {
|
|
|
+ width: 60%;
|
|
|
+ }
|
|
|
+}
|
|
|
</style>
|