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 poolTitleTmp">模板内容：
        <span style="color:#22ccc8;fontSize:12px" v-if="type == 1">特殊标记1-只可放入主诉模块中，放入其他模块数据会显示异常；</span>
        <span style="color:#22ccc8;fontSize:12px" v-if="type == 2">特殊标记4-只可放入现病史模块中，放入其他模块数据会显示异常；</span>
        <span style="color:#22ccc8;fontSize:12px" v-if="type == 322 || type == 32 || type == 31">特殊标记1-只可放入主诉模块中，放入其他模块数据会显示异常；特殊标记4-只可放入现病史模块中，放入其他模块数据会显示异常；</span>
      </p>
      <div v-if="type == 322 || type == 32 || type == 31">
        <span style="marginLeft:10px;">
          <el-button v-if="flagLisFst == 1" type="primary" class="flagStyle" size="mini" @click="addFlg(1)" :disabled="flagLisSec == 4">1、标示主诉中添加症状展示位置</el-button>
          <el-button v-else class="flagStyle" size="mini" @click="addFlg(1)" :disabled="flagLisSec == 4">1、标示主诉中添加症状展示位置</el-button>
        </span>
        <span style="marginLeft:10px;">
          <el-button style="marginTop:3px;" v-if="flagLisSec == 4" type="primary" class="flagStyle" size="mini" @click="addFlg(4)" :disabled="flagLisFst == 1">4、标示在主诉中症状引用到现病史中展示位置
和添加症状位置</el-button>
          <el-button style="marginTop:3px;" v-else class="flagStyle" size="mini" @click="addFlg(4)" :disabled="flagLisFst == 1">4、标示在主诉中症状引用到现病史中展示位置
和添加症状位置</el-button>
        </span>
      </div>
      <div class="arrowWrap" style="float:right;marginRight:10px" v-if="type != 1 && type != 2">
        <el-button size="mini" @click="addDomTemplate(1)" v-if="type != 5 && type != 6 && type != 7 && type != 8">插入输入栏</el-button>
        <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">
          <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" class="normal" @click="addDomTemplate(0,'submitForm')">添加</el-button>
              <el-button size="mini" class="normal" @click="delSubTemplate">删除子模板</el-button>
              <el-button size="mini" class="normal" @click="addDomTemplate(1)">插入输入栏</el-button>
              <span v-if="type == 1" style="marginLeft:10px;">
                <el-button v-if="flagLisFst == 1" type="primary" class="flagStyle" size="mini" @click="addFlg(1)">1、标示主诉中添加症状展示位置</el-button>
                <el-button v-else class="flagStyle" size="mini" @click="addFlg(1)">1、标示主诉中添加症状展示位置</el-button>
              </span>
              <span v-if="type == 2" style="marginLeft:10px;">
                <el-button v-if="flagLisSec == 4" type="primary" class="flagStyle" size="mini" @click="addFlg(4)">4、标示在主诉中症状引用到现病史中展示位置
和添加症状位置</el-button>
                <el-button v-else class="flagStyle" size="mini" @click="addFlg(4)">4、标示在主诉中症状引用到现病史中展示位置
和添加症状位置</el-button>
              </span>
              <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>
            </el-form-item>
          </el-form>
      </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>
              <!-- <i class="tagFlag">{{item.flag?(item.flag == 4?2:1):''}}</i> -->
          </div>
          <p
            v-if="item.type === 'sub'"
            class="tagName  ellipsis"
            :title="'[ '+item.tagName+' ]'"
          >{{item.tagName}} 
            <i class="tagFlag">子</i>
            </p>
          <p
            v-if="item.type !== 'input' && item.type !== 'sub'"
            class="tagName  ellipsis"
            :title="'[ '+item.tagName+' ]'"
          >{{item.tagName}} <i class="tagFlag" v-if="item.flag">{{item.flag}}</i></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
    },
    signe: {
      default: '',
      type: String
    },
    rela: {
      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'
      },
      flagLisFst:-1,
      flagLisSec:-1
    }
  },
  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{    //这个是标签
              if(reviewList[m].flag == 1 || reviewList[m].flag == 4){
                
              }
              reviewList[m].id = reviewList[m].questionId
            }
          }
          this.rightTagsList = reviewList
          this.getFlagList()
        }
        this.$emit('changeActionData', this.rightTagsList, false);
        this.getSubTemplate()
      }else{
        this.getSubTemplate()
      }
      this.searchTagList()
    })
  },
  watch: {
    type(newVal, preVal) {
      if(newVal != preVal){
        this.form = {region: ''}  
        this.subTmpList = []     //子模板的id用于去重
        this.leftTagsList = []
        this.selectLeftTagsList = []
        this.rightTagsList = []
        this.selectRightTagsList = []
        this.selectRightTagsListIndex = []
        this.searchVal = ''
        this.flagLisFst = -1
        this.flagLisSec = -1
        this.getSubTemplate()      //重新获取子模板
      }
      this.searchTagList()       //重新获取标签池数据
    },
    signe(newVal, preVal) {
      if(newVal != preVal){
        this.form = {region: ''}  
        this.subTmpList = []     //子模板的id用于去重
        this.leftTagsList = []
        this.selectLeftTagsList = []
        this.rightTagsList = []
        this.selectRightTagsList = []
        this.selectRightTagsListIndex = []
        this.searchVal = ''
        this.flagLisFst = -1
        this.flagLisSec = -1
      }
      this.searchTagList()       //重新获取标签池数据
    },
    searchVal(newVal, preVal) {
      if (newVal.trim() == '') {
        this.searchTagList()
      } else if (newVal.trim() != preVal.trim()) {
        this.searchTagList()
      }
    },
  },
  methods: {
    updataData(){
      this.$emit('changeActionData', this.rightTagsList, false);
    },
    getFlagList(){
      let lis =  this.rightTagsList;
      for(let i = 0;i < lis.length;i++){
        let tmpLi = lis[i];
        if(tmpLi.flag == 1){
          this.flagLisFst = 1
        }else if(tmpLi.flag == 4){
          this.flagLisSec = 4
        }
      }
    },
    addFlg(idx){//添加标记，已经有标记了先去掉标记，再点击才能加上，没有标记的加上标记
      let selectTagFlg = this.selectRightTagsListIndex;
      let tmpSelectRightTagsList = this.selectRightTagsList;
      let tmpLis = this.rightTagsList;
      let tmpObj = tmpLis[selectTagFlg[0]],m = 0;
      if(tmpSelectRightTagsList && tmpSelectRightTagsList.length>0 && (tmpSelectRightTagsList[0].type == 'input' || tmpSelectRightTagsList[0].type == 'sub')){
        return;
      }
      for(let i = 0;i < tmpLis.length;i++){//循环右侧所有标签,点击的这个有标记，去掉标记，点击的没有标记，去掉其他标记，标记当前项
        let tmpLi = tmpLis[i];
        if(tmpLi.flag == idx){   //有标记
          if(tmpSelectRightTagsList.length == 0){//没选中
            return
          }else if(tmpSelectRightTagsList.length > 0){//有选中
            if(tmpSelectRightTagsList[0].flag == idx){//选中的有标记
              tmpLi.flag = null
              idx == 1?(this.flagLisFst = -1):(idx == 4?this.flagLisSec = -1:null)
            }else{//选中的没标记
              return
            }
          }
        }else{//没有标记，判断是否有选中，选中就加上标记，没有不做处理
          ++m
          if((m == tmpLis.length)&& tmpSelectRightTagsList && tmpSelectRightTagsList.length>0){
            tmpObj.flag = idx
            idx == 1?(this.flagLisFst = 1):(idx == 4?this.flagLisSec = 4:null)
          }
        }
      }
      this.rightTagsList = [...tmpLis]
      this.getFlagList()
    },
    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(tmpArr3.length > 0){
          this.$message({
            message:'模板中只能添加一个子模板',
            type:'warning'
          })
          return
        }
        if(tmpArr4.length == 0){
          this.$message({
            message:'请选择子模板',
            type:'warning'
          })
          return false;
        }
        tmpTag.type = 'sub'
        tmpTag.flag = '3'
        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);
      this.getFlagList()
    },
    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.getFlagList()
      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 != parseInt(this.selectRightTagsList[0].id))  //选中的子模板id去掉
      }
      this.selectLeftTagsList = []
      this.selectRightTagsList = []
      this.selectRightTagsListIndex = []
      this.$emit('changeActionData', this.rightTagsList, false);
      this.getSubTemplate()
      this.getFlagList()
    },
    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 = []
      this.getFlagList()
    },
    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);
      this.getFlagList()
    },
    searchTagList() {
      let notIds = []
      let tmpArr = this.rightTagsList.slice();
      // console.log(tmpArr)
      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 == 3?3:1,
        "notIds": notIds,
        "notTagType": [3,4,8,10]
      }
      api.searchTagList(param).then((res) => {
        if (res.data.code === '0') {
          this.leftTagsList = res.data.data
          this.selectLeftTagsList = []
          this.selectRightTagsList = []
        }
      })
    },
    getSubTemplate() {
      let param = {
        noIds:this.subTmpList,
        type:this.type,
        moduleType: this.signe,
        relationId: this.rela
      }
      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;
  }
  .poolTitleTmp {
    margin-bottom: 8px;
  }
  .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;
  }
  .tagFlag {
    position: absolute;
    right: -3px;
    top: 0;
    width: 16px;
    height: 16px;
    border-radius: 8px;
    line-height: 16px;
    text-align: center;
    // background-color: #ccc;
    color: red;
  }
  .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:0 7px 10px 5px;
        }
      }
    .formWrap {
      position: relative;
      height: 30px;
      .subTemplate {
        width: 100%;
        float: left;
        .el-form-item--mini.el-form-item, .el-form-item--small.el-form-item{
          margin-bottom: 0;
        }
        .el-button+.el-button{
          margin: 0 0 10px 10px;
        }
      }
    }
  }
  .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;
    position: relative;
    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, .el-button--mini.is-round {
      padding: 5px 8px 4px;
    }
    .normal.el-button:hover {
        color: @adminBase;
        border-color: @adminBase;
        outline: 0;
        opacity: 1;
        background-color: #fff;
    }
    .normal.el-button:active {
      color: @adminBase;
        border-color: @adminBase;
        outline: 0;
    }
    .normal.el-button:focus {
      background-color: #fff;
      color: @adminBase;
      opacity: 1;
    }
    .flagStyle.el-button:hover {
        outline: 0;
        opacity: 1;
    }
    .flagStyle.el-button:active {
        outline: 0;
    }
    .flagStyle.el-button:focus {
      opacity: 1;
    }
  }
}
  
</style>