|
|
@@ -1,71 +1,385 @@
|
|
|
<template>
|
|
|
<div class="bottomPart clearfix">
|
|
|
<div class="bottomPartLeft fl">
|
|
|
- <p class="poolTitle">标签池</p>
|
|
|
+ <p class="desTitle">标签池：</p>
|
|
|
<div class="pool">
|
|
|
- <div class="search">搜索</div>
|
|
|
- <ul>
|
|
|
- <li>标签</li>
|
|
|
- <li>标签</li>
|
|
|
- <li>标签</li>
|
|
|
- <li>标签</li>
|
|
|
- <li>标签</li>
|
|
|
- <li>标签</li>
|
|
|
- <li>标签</li>
|
|
|
- <li>标签</li>
|
|
|
+ <el-input
|
|
|
+ placeholder="请输入搜索内容"
|
|
|
+ v-model="searchVal"
|
|
|
+ >
|
|
|
+ <i
|
|
|
+ slot="prefix"
|
|
|
+ class="el-input__icon el-icon-search"
|
|
|
+ ></i>
|
|
|
+ </el-input>
|
|
|
+ <ul class="pubList searchList">
|
|
|
+ <li class="pubLiStyle pubLiStyleWrap ellipsis"
|
|
|
+ v-for="val in currentPool"
|
|
|
+ :title="'[ '+val.tagName+' ]'"
|
|
|
+ :key="val.id"
|
|
|
+ :style="getStyle(val.id)?styles:null"
|
|
|
+ @click="detailsTagList(val.id)"
|
|
|
+ >{{val.tagName}}</li>
|
|
|
</ul>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="bottomPartMid fl">
|
|
|
- <p><span class="el-icon-arrow-left"></span></p>
|
|
|
- <p><span class="el-icon-arrow-right"></span></p>
|
|
|
+ <p><span class="el-icon-arrow-right" @click="toRightPool"></span></p>
|
|
|
+ <p><span class="el-icon-arrow-left" @click="toLeftPool"></span></p>
|
|
|
</div>
|
|
|
- <div class="bottomPartRight fr">
|
|
|
- <span>操作界面</span>
|
|
|
+ <div class="bottomPartRight fl">
|
|
|
+ <p class="desTitle">操作界面：</p>
|
|
|
+ <div class="rightPool">
|
|
|
+ <div
|
|
|
+ class="onlyTop pubLiStyle"
|
|
|
+ :class="selectArr[0]?'activeBgc':null"
|
|
|
+ @click="selectPart(0)"
|
|
|
+ >
|
|
|
+ <template v-for="item in poolDetailList[0]">
|
|
|
+ <span class="hzx" v-for="part in item.questionDetailList" :key="part.id">{{part.name}}</span>
|
|
|
+ </template>
|
|
|
+ </div>
|
|
|
+ <div class="onlyBottom pubList">
|
|
|
+ <ul class="clearfix">
|
|
|
+ <li v-for="n in 5"
|
|
|
+ :key="n + 'part'"
|
|
|
+ class="onlyBottomPart"
|
|
|
+ :class="selectArr[n]?'activeBgc':null"
|
|
|
+ :style="{borderRight:n==5?'0':''}"
|
|
|
+ @click="selectPart(n)"
|
|
|
+ >
|
|
|
+ <ul>
|
|
|
+ <template v-for="item in poolDetailList[n]">
|
|
|
+ <li class="partDetail" v-for="part in item.questionDetailList" :key="part.id">
|
|
|
+ {{part.name}}
|
|
|
+ </li>
|
|
|
+ </template>
|
|
|
+ </ul>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="partWaring">
|
|
|
+ <ul>
|
|
|
+ <li v-for="i in 5" :key="i">
|
|
|
+ <template v-for="item in poolDetailList[i]">
|
|
|
+ <p class="partDetail" v-show="item.controlType != 1" :key="item.id + '1'">
|
|
|
+ {{1}}
|
|
|
+ </p>
|
|
|
+ <p class="partDetail" v-show="item.controlType != 2" :key="item.id + '2'">
|
|
|
+ {{2}}
|
|
|
+ </p>
|
|
|
+ </template>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
+ <span class="mutex">互斥项</span>
|
|
|
</div>
|
|
|
</template>
|
|
|
<script>
|
|
|
+import api from '@api/icss.js';
|
|
|
+import utils from '@api/utils.js';
|
|
|
+
|
|
|
export default {
|
|
|
- data(){
|
|
|
+ props: {
|
|
|
+ pool: {
|
|
|
+ default: () => [],
|
|
|
+ type: Array
|
|
|
+ },
|
|
|
+ type: {
|
|
|
+ default: '',
|
|
|
+ type: String
|
|
|
+ },
|
|
|
+ sign: {
|
|
|
+ default: '',
|
|
|
+ type: String
|
|
|
+ },
|
|
|
+ choose: {
|
|
|
+ default: 'single', //multiple多选
|
|
|
+ type: String
|
|
|
+ },
|
|
|
+ },
|
|
|
+ data() {
|
|
|
return {
|
|
|
- msg:''
|
|
|
+ currentDetail: {}, //当前点击的标签对应的展开数据
|
|
|
+ poolDetailList: [ //默认6个部分
|
|
|
+ [], [], [], [], [], []
|
|
|
+ ],
|
|
|
+ poolDetailListAll:[], //默认6个部分转化为一维数组
|
|
|
+ activePart: '-1', //选中part第几个
|
|
|
+ selectArr: [false, false, false, false, false, false], //右侧选中part状态
|
|
|
+ select: '', //右侧选中的项
|
|
|
+
|
|
|
+ styles:{
|
|
|
+ background:'#eae7e7'
|
|
|
+ }, //选中单条样式
|
|
|
+ searchVal: '', //搜索值
|
|
|
+ currentPool: [], //标签池数据
|
|
|
+ currentLis:[], //选中单条ID组合（多选）
|
|
|
+ notIds:[], //去重IDs
|
|
|
}
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ pool(newVal, preVal) {
|
|
|
+ if (JSON.stringify(newVal) != JSON.stringify(preVal)) {
|
|
|
+ this.currentPool = newVal
|
|
|
+ }
|
|
|
+ },
|
|
|
+ searchVal(newVal, preVal){
|
|
|
+ if(newVal.trim() == ''){
|
|
|
+ this.searchTagList()
|
|
|
+ }else if(newVal.trim() != preVal.trim()){
|
|
|
+ this.searchTagList()
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ toRightPool(){
|
|
|
+
|
|
|
+ },
|
|
|
+ toLeftPool(){
|
|
|
+
|
|
|
+ },
|
|
|
+ getStyle(id){ //左侧选中状态
|
|
|
+ return utils.filterArr(this.currentLis,id,2)
|
|
|
+ },
|
|
|
+ searchTagList() {
|
|
|
+ let ids = [];
|
|
|
+ this.poolDetailListAll.map((value)=>{
|
|
|
+ ids.push(value.id)
|
|
|
+ this.notIds = ids;
|
|
|
+ })
|
|
|
+ let param = {
|
|
|
+ "tagName": this.searchVal || '',
|
|
|
+ "type": this.type,
|
|
|
+ "notIds": this.notIds,
|
|
|
+ "tagType": this.sign == 2?[1]:[],
|
|
|
+ "controlType":this.sign == 2?[1,2]:[],
|
|
|
+ }
|
|
|
+ api.searchTagList(param).then((res) => {
|
|
|
+ if (res.data.code === '0') {
|
|
|
+ this.currentPool = res.data.data
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ selectPart(idx) {
|
|
|
+ let tmpFst1 = this.selectArr[0],
|
|
|
+ tmpFst2 = this.selectArr[1],
|
|
|
+ tmpFst3 = this.selectArr[2],
|
|
|
+ tmpFst4 = this.selectArr[3],
|
|
|
+ tmpFst5 = this.selectArr[4],
|
|
|
+ tmpFst6 = this.selectArr[5];
|
|
|
+ if (idx == 0) {
|
|
|
+ this.selectArr = [!tmpFst1, false, false, false, false, false];
|
|
|
+ } else if (idx == 1) {
|
|
|
+ this.selectArr = [false, !tmpFst2, false, false, false, false];
|
|
|
+ } else if (idx == 2) {
|
|
|
+ this.selectArr = [false, false, !tmpFst3, false, false, false];
|
|
|
+ } else if (idx == 3) {
|
|
|
+ this.selectArr = [false, false, false, !tmpFst4, false, false];
|
|
|
+ } else if (idx == 4) {
|
|
|
+ this.selectArr = [false, false, false, false, !tmpFst5, false];
|
|
|
+ } else if (idx == 5) {
|
|
|
+ this.selectArr = [false, false, false, false, false, !tmpFst6];
|
|
|
+ }
|
|
|
+ let tmpArr = this.selectArr;
|
|
|
+ let num = 0;
|
|
|
+ tmpArr.map((val, idx) => {
|
|
|
+ if (val) {
|
|
|
+ this.activePart = idx;
|
|
|
+ } else {
|
|
|
+ num = ++num
|
|
|
+ if (num == 6) { this.activePart = '-1' }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ detailsTagList(id) {
|
|
|
+ let plus1 = 0,plus2 = 0;
|
|
|
+ for(let j = 0;j < this.selectArr.length;j++){ //判断右侧有没有选中
|
|
|
+ if(!this.selectArr[j]){
|
|
|
+ ++plus1;
|
|
|
+ if(plus1 == 6){ //右侧未选中
|
|
|
+ for(let k = 1;k < this.poolDetailList.length;k++){
|
|
|
+ if(JSON.stringify(this.poolDetailList[k]) != '[]'){
|
|
|
+ ++plus2
|
|
|
+ if(plus2 == 5){ //右侧数据填满了
|
|
|
+ alert('请选择需要修改的模块')
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ if(this.choose == 'single'){ //单选
|
|
|
+ let tmpIds = [];
|
|
|
+ tmpIds.push(id);
|
|
|
+ this.currentLis = tmpIds;
|
|
|
+ }else{ //多选
|
|
|
+ // let tmpIds = this.currentLis;
|
|
|
+ // if(utils.filterArr(tmpIds,id,2)){
|
|
|
+ // return;
|
|
|
+ // }else{
|
|
|
+ // tmpIds.push(id);
|
|
|
+ // }
|
|
|
+ // this.currentLis = tmpIds;
|
|
|
+ }
|
|
|
+
|
|
|
+ let param = {
|
|
|
+ // "age": 0,
|
|
|
+ "ids": id,
|
|
|
+ // "sexType": 3
|
|
|
+ }
|
|
|
+ api.detailsTagList(param).then((res) => { //右侧展开内容
|
|
|
+ if (res.data.code === '0') {
|
|
|
+ const currentDetail = res.data.data[id];
|
|
|
+ this.currentDetail = currentDetail;
|
|
|
+ let num = 0;
|
|
|
+ if(this.choose == 'single'){ //判断是单选
|
|
|
+ this.selectArr.map((flg,idx)=>{ //判断右侧有没有选中
|
|
|
+ if(flg){ //有选中
|
|
|
+ let tmp = [],ids = [];
|
|
|
+ tmp.push(currentDetail);
|
|
|
+ this.poolDetailList[idx] = tmp;
|
|
|
+ this.poolDetailListAll = Array.prototype.concat.apply([],this.poolDetailList); //二维转一维
|
|
|
+ this.searchTagList();
|
|
|
+ }else{ //没选中,按順序第二个开始添加
|
|
|
+ ++num;
|
|
|
+ if(num == 6){
|
|
|
+ for(let i = 1;i < this.poolDetailList.length;i++){
|
|
|
+ let tmp = [],ids = [];
|
|
|
+ if(this.poolDetailList[i].length == 0){ //判断part里面是不是有数据，没有直接添加
|
|
|
+ tmp.push(currentDetail);
|
|
|
+ this.poolDetailList[i] = tmp;
|
|
|
+ this.poolDetailListAll = Array.prototype.concat.apply([],this.poolDetailList);
|
|
|
+ this.searchTagList();
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
<style lang="less">
|
|
|
-@import '../../less/common.less';
|
|
|
+@import "../../less/common.less";
|
|
|
.bottomPart {
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding-right: 100px;
|
|
|
+ position: relative;
|
|
|
+ padding-bottom: 500px;
|
|
|
+ .desTitle {
|
|
|
+ padding-bottom: 10px;
|
|
|
+ }
|
|
|
+ .pubList {
|
|
|
+ height: @icssHeight;
|
|
|
+ overflow: auto;
|
|
|
+ }
|
|
|
+ .pubLiStyle {
|
|
|
+ height: 30px;
|
|
|
+ line-height: 30px;
|
|
|
+ padding: 0 8px;
|
|
|
+ }
|
|
|
+ .pubLiStyleWrap:hover {
|
|
|
+ background-color: #f5f5f5;
|
|
|
+ }
|
|
|
+ .pubLiStyleWrap:before {
|
|
|
+ content: "[ ";
|
|
|
+ }
|
|
|
+ .pubLiStyleWrap:after {
|
|
|
+ content: " ]";
|
|
|
+ }
|
|
|
+ .mutex {
|
|
|
+ position: absolute;
|
|
|
+ right: 36px;
|
|
|
+ top: 36px;
|
|
|
+ }
|
|
|
.bottomPartLeft {
|
|
|
width: 30%;
|
|
|
- border:1px solid @icssBorder;
|
|
|
- box-sizing: border-box;
|
|
|
- .poolTitle {
|
|
|
- border-bottom: 1px solid @icssBorder;
|
|
|
- box-sizing: border-box;
|
|
|
- }
|
|
|
.pool {
|
|
|
-
|
|
|
+ border: 1px solid @icssBorder;
|
|
|
+ .el-input__prefix {
|
|
|
+ left: 5px;
|
|
|
+ right: auto;
|
|
|
+ }
|
|
|
+ .el-input__inner {
|
|
|
+ height: 31px;
|
|
|
+ line-height: 31px;
|
|
|
+ }
|
|
|
+ .el-input__icon {
|
|
|
+ line-height: 31px;
|
|
|
+ }
|
|
|
+ .el-input--prefix .el-input__inner {
|
|
|
+ border: 0 none;
|
|
|
+ border-bottom: 1px solid @icssBorder;
|
|
|
+ border-radius: 0;
|
|
|
+ }
|
|
|
+ .search {
|
|
|
+ border-bottom: 1px solid @icssBorder;
|
|
|
+ }
|
|
|
+ .searchList {
|
|
|
+ li {
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
.bottomPartMid {
|
|
|
width: 10%;
|
|
|
+ margin-top: 60px;
|
|
|
p {
|
|
|
width: 100%;
|
|
|
text-align: center;
|
|
|
span {
|
|
|
display: inline-block;
|
|
|
- width: 50px;
|
|
|
- height: 30px;
|
|
|
- line-height: 30px;
|
|
|
+ width: 30px;
|
|
|
+ height: 40px;
|
|
|
+ line-height: 40px;
|
|
|
margin: 0 auto;
|
|
|
+ border: 1px solid @icssBorder;
|
|
|
+ margin-bottom: 15px;
|
|
|
+ font-size: 18px;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
.bottomPartRight {
|
|
|
width: 60%;
|
|
|
- background-color: red;
|
|
|
+ .partWaring {
|
|
|
+ li {
|
|
|
+ float: left;
|
|
|
+ width: 20%;
|
|
|
+ padding: 5px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .rightPool {
|
|
|
+ border: 1px solid @icssBorder;
|
|
|
+ }
|
|
|
+ .onlyTop {
|
|
|
+ border-bottom: 1px solid @icssBorder;
|
|
|
+ .hzx{
|
|
|
+ padding: 0 30px 0 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .onlyBottom {
|
|
|
+ .onlyBottomPart {
|
|
|
+ float: left;
|
|
|
+ border-right: 1px solid @icssBorder;
|
|
|
+ box-sizing: border-box;
|
|
|
+ width: 20%;
|
|
|
+ height: @icssHeight;
|
|
|
+ overflow: auto;
|
|
|
+ .partDetail {
|
|
|
+ padding: 3px 5px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
</style>
|
zhangxc