platformFront/src/components/icss/CommonTemplate.vue

<template>
  <div class="templateTagGroupWrapper clearfix">
    <div class="bottomPartLeft">
      <p class="poolTitle">标签池</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="tagList templateTagList">
          <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>
      </div>
    </div>
    <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>
    </div>
    <div class="bottomPartRight bottomPartRightTemplate">
      <p class="poolTitle">模板内容：</p>
      <div class="arrowWrap" style="float:right;marginRight:10px" v-if="type != 1 && type != 2 && type != 3">
        <i class="el-icon-arrow-left arrowWrapPub" @click="moveTag(0)"></i>
        <i class="el-icon-arrow-right arrowWrapPub" @click="moveTag(1)"></i>
      </div>
      <div class="formWrap" v-if="type == 1 || type == 2 || type == 3">
          <el-form
            class="subTemplate"
            :model="form"
          >
            <el-form-item
              label="添加子模板："
              prop="region"
              size="mini"
            >
              <el-select
                v-model="form.region"
                placeholder="请选择子模板"
              >
                <el-option
                  v-for="item in Adscriptions"
                  :label="item.name"
                  :value="item.id"
                  :key="item.id"
                ></el-option>
              </el-select>
              <el-button size="mini" @click="addDomTemplate(0,'submitForm')">添加</el-button>
              <el-button size="mini" @click="delSubTemplate">删除子模板</el-button>
              <el-button size="mini" @click="addDomTemplate(1)">插入输入栏</el-button>
            </el-form-item>
          </el-form>
        <div class="arrowWrap">
          <i class="el-icon-arrow-left arrowWrapPub" @click="moveTag(0)"></i>
          <i class="el-icon-arrow-right arrowWrapPub" @click="moveTag(1)"></i>
        </div>
      </div>
      <ul class="tagList operationPool templateTagLists">
        <li
          class="tagItem operationItem"
          v-for="(item,idx) in rightTagsList"
          :key='item.name'
          @click='selectRightTag(item,idx)'
          :style="getStyle2(item)?styles:null"
        >
          <div class="inputBox" v-if="item.type === 'input'">
              <el-input
                placeholder=""
                v-model="item.text"
                @change="updataData"
              >
              </el-input>
          </div>
          <p
            v-if="item.type === 'sub'"
            class="tagName  ellipsis"
            :title="'[ '+item.tagName+' ]'"
          >{{item.tagName}}</p>
          <p
            v-if="item.type !== 'input' && item.type !== 'sub'"
            class="tagName  ellipsis"
            :title="'[ '+item.tagName+' ]'"
          >{{item.tagName}} </p>
        </li>
      </ul>
    </div>
  </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
    },
    options: {
      default: () => {},
      type: Object
    },
  },
  data() {
    return {
      Adscriptions: [],     //子模板列表
      form: {region: ''},    //当前子模板
      addTag:{
        text:'',              //输入框内容为空
        id:'',                //id可以用index做id
        type:'input',        //sub 子模板
      },
      subTmpList:[],     //子模板的id用于去重
      leftTagsList: [],
      selectLeftTagsList: [],
      rightTagsList: [],
      selectRightTagsList: [],
      selectRightTagsListIndex: [],
      searchVal: '',
      styles: {
        background: '#eae7e7'
      },
    }
  },
  destroyed: function () {
    this.searchVal = ''
  },
  mounted() {
    this.$nextTick(()=>{
      if(this.options.id){
        if(this.options && this.options.data && this.options.data.length>0){
          let reviewList = this.options.data
          let tmpSubTmpList = this.subTmpList.slice(0)
          for(let m = 0;m < reviewList.length;m++){
            if(reviewList[m].relationModule != null){      //这是子模板,修改有子模板需要记录去重
              reviewList[m].id = reviewList[m].relationModule + 'sub'
              reviewList[m].tagName = reviewList[m].relationModuleName
              reviewList[m].type = 'sub'
              tmpSubTmpList.push(reviewList[m].relationModule)     
              this.subTmpList = tmpSubTmpList
            }else if(reviewList[m].tagType == 8){     //这个是输入框文字
              reviewList[m].id = m+'1001001001'
              reviewList[m].type = 'input'
              reviewList[m].text = reviewList[m].tagName
            }else{    //这个是标签
              reviewList[m].id = reviewList[m].questionId
            }
          }
          this.rightTagsList = reviewList
        }
        this.$emit('changeActionData', this.rightTagsList, false);
        this.getSubTemplate()
      }else{
        this.getSubTemplate()
      }
      this.searchTagList()
    })
  },
  watch: {
    type(newVal, preVal) {
      this.searchTagList()       //重新获取标签池数据
      if(newVal != preVal){
        this.form = {region: ''}  
        this.subTmpList = []     //子模板的id用于去重
        this.leftTagsList = []
        this.selectLeftTagsList = []
        this.rightTagsList = []
        this.selectRightTagsList = []
        this.selectRightTagsListIndex = []
        this.searchVal = ''
        this.getSubTemplate()      //重新获取子模板
      }
    },
    searchVal(newVal, preVal) {
      if (newVal.trim() == '') {
        this.searchTagList()
      } else if (newVal.trim() != preVal.trim()) {
        this.searchTagList()
      }
    },
  },
  methods: {
    updataData(){
      this.$emit('changeActionData', this.rightTagsList, false);
    },
    addDomTemplate(sign,dom){
      let tmpArr1 = this.rightTagsList.slice(0);
      let tmpArr2 = this.selectRightTagsListIndex.slice(0);
      let tmpArr3 = this.subTmpList.slice(0),tmpRegion = this.form.region;
      let tmpArr4 = this.Adscriptions.filter(item => item.id == tmpRegion);
      let tmpTag = Object.assign({},this.addTag);     //深度复制obj
      if(sign == 0){         //添加子模板
        if(tmpArr4.length == 0){
          this.$message({
            message:'请选择子模板',
            type:'warning'
          })
          return false;
        }
        tmpTag.type = 'sub'
        tmpArr3.push(tmpRegion)
        tmpTag.tagName = tmpArr4[0].name
        tmpTag.id = tmpArr4[0].id + 'sub'
        this.subTmpList = tmpArr3  //记录子模板id 
        this.form.region = ''
        this.getSubTemplate()
      }else{     //添加输入框
        tmpTag.type = 'input'
      }
      tmpArr1.push(tmpTag);
      for(let i =0; i < tmpArr1.length; i++){    //循环右侧所有数据
        if(tmpArr1[i].type == 'input'){
          tmpArr1[i].id = i + '1001001001'     //给添加的子模板或者输入框加上id
        }
      }
      this.rightTagsList = tmpArr1;
      this.$emit('changeActionData', this.rightTagsList, false);
    },
    moveTag(dir){
      let tmpArr1 = this.rightTagsList.slice(0);
      let tmpArr2 = this.selectRightTagsListIndex.slice(0);
      let tmpArr3 = this.selectRightTagsList.slice(0);
      if(dir == 0){     //往左
        for(let i = 0;i < tmpArr3.length;i++){     //删除选中的元素
          let tmpId = tmpArr3[i].id
          tmpArr1 = tmpArr1.filter(item => item.id !== tmpId)
        }
        let tmpArr = tmpArr1.slice(0)
        for(let k = 0;k < tmpArr2.length;k++){     //选中元素的index
          let tmpIdx = tmpArr2[k]-1
          tmpArr.splice(tmpIdx,0,tmpArr3[k])
          if(tmpArr2[k] == 0){
            return
          }
          tmpArr2[k] = (tmpArr2[k]-1)
        }
        this.selectRightTagsListIndex = tmpArr2
        this.rightTagsList = tmpArr
      }else{     //往右
        for(let i = 0;i < tmpArr3.length;i++){     //删除选中的元素
          let tmpId = tmpArr3[i].id
          tmpArr1 = tmpArr1.filter(item => item.id !== tmpId)
        }
        let tmpArr = tmpArr1.slice(0)
        for(let k = 0;k < tmpArr2.length;k++){     //选中元素的index
          let tmpIdx = tmpArr2[k]+1
          tmpArr.splice(tmpIdx,0,tmpArr3[k])
          if(tmpArr2[k] == tmpArr1.length){
            return
          }
          tmpArr2[k] = (tmpArr2[k]+1)
        }
        this.selectRightTagsListIndex = tmpArr2
        this.rightTagsList = tmpArr
      }
      this.$emit('changeActionData', this.rightTagsList, false);
    },
    delSubTemplate(){   //删除子模板
      if (this.selectRightTagsList.length>0 && this.selectRightTagsList[0].type === 'sub') {    //删除子模板，输入框或者标签就不变
        this.rightTagsList = this.rightTagsList.filter(item => item.id !== this.selectRightTagsList[0].id)
        this.subTmpList = this.subTmpList.filter(item => item.id !== this.selectRightTagsList[0].id)  //选中的子模板id去掉
      }
      this.selectLeftTagsList = []
      this.selectRightTagsList = []
      this.selectRightTagsListIndex = []
      this.$emit('changeActionData', this.rightTagsList, false);
      this.getSubTemplate()
    },
    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,idx) {
      const hasTag = this.isHasTag(tag, this.selectRightTagsList);
      let tmpArr = this.selectRightTagsListIndex;
      let tmpArr1 = this.selectRightTagsList.slice(0);
      if (hasTag) {
        this.selectRightTagsList = this.selectRightTagsList.filter(item => item.tagName !== tag.name)
        tmpArr = tmpArr.filter(item => item !== idx)
        this.selectRightTagsListIndex = tmpArr
      } else {
        tmpArr1[0] = tag;
        tmpArr[0]=idx;
        this.selectRightTagsList = tmpArr1;
        this.selectRightTagsListIndex = tmpArr;
      }
    },
    isHasTag(item, arr) {
      for (let i = 0; i < arr.length; i++) {
        if (arr[i].id === item.id) {
          return true;
        }
      }
      return false;
    },
    getStyle(item) {       //左侧选中状态
      return this.isHasTag(item, this.selectLeftTagsList)
    },
    getStyle2(item) {
      return this.isHasTag(item, this.selectRightTagsList)
    },
    toLeftList() {
      if (this.selectRightTagsList.length>0 && this.selectRightTagsList[0].type !== 'sub') {    //往左的是子模板不变或者输入框，是输入框或者标签就删除
        for (let i = 0; i < this.selectRightTagsList.length; i++) {
          this.rightTagsList = this.rightTagsList.filter(item => item.id !== this.selectRightTagsList[0].id)
        }
        this.searchTagList()
        this.$emit('changeActionData', this.rightTagsList, false);
      }
      this.selectLeftTagsList = []
      this.selectRightTagsList = []
      this.selectRightTagsListIndex = []
    },
    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)
      }
      this.selectLeftTagsList = []
      this.selectRightTagsList = []
      this.selectRightTagsListIndex = []
      this.$emit('changeActionData', this.rightTagsList, false);
    },
    searchTagList() {
      let notIds = []
      let tmpArr = this.rightTagsList.slice();
      for (let i = 0; i < tmpArr.length; i++) {
        if(tmpArr[i].type != 'sub' && tmpArr[i].type != 'input'){
          notIds.push(tmpArr[i].id)
        }
      }
      let param = {
        "tagName": this.searchVal,
        "type": this.type == 4?3:1,
        "noIds": notIds,
      }
      api.getQuestionInfos(param).then((res) => {
        if (res.data.code === '0') {
          this.leftTagsList = res.data.data
          this.selectLeftTagsList = []
          this.selectRightTagsList = []
        }
      })
    },
    getSubTemplate() {
      let param = {
        noIds:this.subTmpList,
        type:5
      }
      api.getModuleInfoSub(param).then((res) => {
        if (res.data.code === '0') {
          this.Adscriptions = res.data.data
        }
      })
    },
  }
}
</script>
<style lang="less" scoped>
@import "../../less/common.less";
.templateTagGroupWrapper {
  .bottomPartLeft {
    width: 30%;
    box-sizing: border-box;
    float: left;
  }
  .poolTitle {
    box-sizing: border-box;
    margin-bottom: 20px;
    display: inline-block;
  }
  .inputBox {
    width: 100px;
  }
  .search {
    width: 100%;
    border-bottom: 1px solid @icssBorder;
    box-sizing: border-box;
    height: 30px;
  }
  .tagList {
    overflow-y: auto;
    border: 1px solid @icssBorder;
  }
  .tagItem {
    line-height: 30px;
    padding: 0px 10px;
    box-sizing: border-box;
  }
  .operationPool {
    position: relative;
    width: 85%;
    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;
        width: 30px;
        height: 40px;
        line-height: 40px;
        margin: 0 auto;
        border: 1px solid @icssBorder;
        margin-bottom: 15px;
        font-size: 18px;
      }
    }
  }
  .bottomPartRightTemplate {
    float: left;
    width: 60%;
      .arrowWrap {
        float: right;
        background-color: #fff;
        padding-top: 1px;
        margin-right: 10px;
        .arrowWrapPub {
          border: 1px solid @adminBase;
          height: 23px;
          width: 40px;
          text-align: center;
          background: #fff;
          line-height: 23px;
          border-radius: 3px;
          margin-left: 10px;
        }
      }
    .formWrap {
      position: relative;
      height: 30px;
      .subTemplate {
        width: 470px;
        float: left;
      }
    }
  }
  .templateTagList {
    height: 450px;
  }
  .templateTagLists {
    height: 462px;
    width: 98%;
  }
  button {
    // margin-top: 20px;
  }
  .operationItem {
    display: inline-block;
    line-height: 40px;
    margin: 0 5px 10px 0;
    text-align: center;
    float: left;
    height: 40px;
    p {
      padding: 5px 0;
    }
  }
  .active {
    color: #abcdef;
  }
}
</style>
<style lang="less">
@import "../../less/common.less";
.bottomPartRightTemplate {
  .el-form-item__content {
    .el-input__inner {
      height: 28px;
      line-height:28px;
      border-radius:5px;
      font-size: 14px;
    }
    .el-select {
      margin-right:10px;
    }
    .el-button--mini[data-v-2db8be7a], .el-button--mini.is-round[data-v-2db8be7a] {
      padding: 5px 8px 4px;
    }
    .el-button:hover {
        color: @adminBase;
        border-color: @adminBase;
        outline: 0;
        opacity: 1;
        background-color: #fff;
    }
    .el-button:active {
        color: @adminBase;
        border-color: @adminBase;
        outline: 0;
    }
    .el-button:focus {
      background-color: #fff;
      color: @adminBase;
      opacity: 1;
    }
  }
}
  
</style>