|
@@ -1,404 +0,0 @@
|
|
|
-<template>
|
|
|
- <div class="bottomPart clearfix">
|
|
|
- <div class="bottomPartLeft fl">
|
|
|
- <p class="desTitle">标签池:</p>
|
|
|
- <div class="pool">
|
|
|
- <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-right" @click="toRightPool"></span></p>
|
|
|
- <p><span class="el-icon-arrow-left" @click="toLeftPool"></span></p>
|
|
|
- </div>
|
|
|
- <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 {
|
|
|
- props: {
|
|
|
- pool: {
|
|
|
- default: () => [],
|
|
|
- type: Array
|
|
|
- },
|
|
|
- type: {
|
|
|
- default: '',
|
|
|
- type: String
|
|
|
- },
|
|
|
- sign: {
|
|
|
- default: '',
|
|
|
- type: String
|
|
|
- },
|
|
|
- choose: {
|
|
|
- default: 'single', //multiple多选
|
|
|
- type: String
|
|
|
- },
|
|
|
- },
|
|
|
- data() {
|
|
|
- return {
|
|
|
- currentDetail: {}, //当前点击的标签对应的展开数据
|
|
|
- poolDetailList: [[],[],[],[],[],[]], //默认6个部分
|
|
|
- poolDetailListAll:[], //默认6个部分转化为一维数组
|
|
|
- activePart: '-1', //选中part第几个
|
|
|
- selectArr: [false, false, false, false, false, false], //右侧选中part状态
|
|
|
- select: [], //右侧选中的项
|
|
|
- currentIdx:'', //右侧选中的第几个
|
|
|
-
|
|
|
- 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(){
|
|
|
- if(this.currentLis.length == 0){
|
|
|
- this.$message({
|
|
|
- showClose: true,
|
|
|
- message: '请选择标签池标签',
|
|
|
- type: 'warning'
|
|
|
- });
|
|
|
- return;
|
|
|
- }
|
|
|
- this.detailsTagList(this.currentLis[0])
|
|
|
- },
|
|
|
- toLeftPool(){ //往左返回数据
|
|
|
- if(this.choose == 'single' && utils.filterArr(this.selectArr,true,2) && this.poolDetailList[this.currentIdx].length > 0){
|
|
|
- console.log(this.currentIdx)
|
|
|
- let tmparr = this.poolDetailList;
|
|
|
- tmparr[this.currentIdx] = []
|
|
|
- this.poolDetailList = tmparr;
|
|
|
- this.poolDetailListAll = Array.prototype.concat.apply([],this.poolDetailList); //二维转一维
|
|
|
- this.searchTagList();
|
|
|
- this.currentLis = [];
|
|
|
- }
|
|
|
- },
|
|
|
- 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) {
|
|
|
- // this.select = this.poolDetailList[idx]
|
|
|
- this.currentIdx = 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": this.currentLis.join(','),
|
|
|
- // "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;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- this.currentLis = []; //左侧选中数据清空
|
|
|
- })
|
|
|
- }
|
|
|
- }
|
|
|
- })
|
|
|
- },
|
|
|
- }
|
|
|
-}
|
|
|
-</script>
|
|
|
-<style lang="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%;
|
|
|
- .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: 30px;
|
|
|
- height: 40px;
|
|
|
- line-height: 40px;
|
|
|
- margin: 0 auto;
|
|
|
- border: 1px solid @icssBorder;
|
|
|
- margin-bottom: 15px;
|
|
|
- font-size: 18px;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .bottomPartRight {
|
|
|
- width: 60%;
|
|
|
- .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>
|
|
|
-
|
|
|
-
|