platformFront/src/components/icss/CommonTemplate.vue

<template>
  <div class="symptomTagGroupWrapper 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>
      <el-form
        class="subTemplate"
        ref="groups"
        :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.val"
              :key="item.id"
            ></el-option>
          </el-select>
          <el-button size="mini">添加</el-button>
          <el-button size="mini">删除子模板</el-button>
          <el-button size="mini">插入输入栏</el-button>

          <el-button icon="el-icon-arrow-left" class="changeOrder changeOrderPub"></el-button>
          <el-button icon="el-icon-arrow-right" class="changeOrderPub"></el-button>
        </el-form-item>
      </el-form>
      <ul class="tagList operationPool templateTagLists">
        <li
          class="tagItem operationItem"
          v-for="(item) in rightTagsList2"
          :key='item.id'
          :style="getStyle2(item)?styles:null"
          @click='selectRightTag(item)'
        >
          <div class="inputBox">
            <el-input
              v-if="item.type === 'input'"
              placeholder=""
              v-model="item.text"
            >
            </el-input>
          </div>
          <p
            v-if="item.tagName"
            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
    },
    sexType: {
      default: '',
      type: String
    },
    options: {
      default: () => [],
      type: Array
    },
  },
  data() {
    return {
      Adscriptions: [
        { name: '添加病情变化', val: '1', id: '001' },
        { name: '病程变化', val: '2', id: '002' },
        { name: '添加其他症状', val: '3', id: '003' },
      ],
      form: {
        region: '1',    //归属
      },
      leftTagsList: [],
      selectLeftTagsList: [],
      rightTagsList: [],
      rightTagsList2: [],
      selectRightTagsList: [],
      searchVal: '',
      styles: {
        background: '#eae7e7'
      },
    }
  },
  mounted() {
    this.rightTagsList2 = this.options
    let newArr = []
    for (let i = 0; i < this.rightTagsList2.length; i++) {
      if (this.rightTagsList2[i].tagType == 8) {
        newArr.push({ text: this.rightTagsList2[i].tagName, type: 'input', id: i + ',,,' })
      } else {
        if (i === 0) {
          newArr.push({ text: '', type: 'input', id: i + ',,,' })
        }
        newArr.push(this.rightTagsList2[i])
        if (!this.rightTagsList2[i + 1] || this.rightTagsList2[i + 1] && this.rightTagsList2[i + 1].tagType != 8) {
          newArr.push({ text: '', type: 'input', id: i + ',,,,' })
        }
      }
    }
    this.rightTagsList2 = newArr
    this.$emit('changeActionData', this.rightTagsList2, false);
    this.searchTagList()
    // this.leftTagsList = this.pool
    // console.log('TAGPOOL', this.pool)
  },
  watch: {
    pool(newVal, preVal) {
      this.leftTagsList = newVal
    },
    searchVal(newVal, preVal) {
      if (newVal.trim() == '') {
        this.searchTagList()
      } else if (newVal.trim() != preVal.trim()) {
        this.searchTagList()
      }
    },
  },
  methods: {
    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) {
      const hasTag = this.isHasTag(tag, this.selectRightTagsList)
      if (hasTag) {
        this.selectRightTagsList = this.selectRightTagsList.filter(item => item.id !== tag.id)
      } else {
        this.selectRightTagsList.push(tag);
      }
    },
    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() {
      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.selectRightTagsList.length; i++) {//每次往回移时同时删掉下面输入框
        if (this.selectRightTagsList[i].type !== 'input') {
          for (let j = 0; j < this.rightTagsList2.length; j++) {
            if (this.selectRightTagsList[i].id === this.rightTagsList2[j].id) {
              if (this.rightTagsList2.length === 3) {
                this.rightTagsList2 = []
              } else {
                this.rightTagsList2.splice(j, 2)
              }
            }
          }
        }
      }
      this.selectLeftTagsList = []
      this.selectRightTagsList = []
      this.searchTagList()
      this.$emit('changeActionData', this.rightTagsList2, false);
    },
    toRightList() {
      this.rightTagsList.push(...this.selectLeftTagsList);
      let textItem = { text: '', type: 'input' }
      for (let i = 0; i < this.selectLeftTagsList.length; i++) { //选中标签每个前后加入输入框
        if (this.rightTagsList2.length === 0) {
          let textItem1 = JSON.parse(JSON.stringify(textItem))
          textItem1.id = this.selectLeftTagsList[i].id + ',,'
          this.rightTagsList2.push(textItem1)
        }
        this.rightTagsList2.push(this.selectLeftTagsList[i]);
        let textItem2 = JSON.parse(JSON.stringify(textItem))
        textItem2.id = this.selectLeftTagsList[i].id + ','
        this.rightTagsList2.push(JSON.parse(JSON.stringify(textItem2)))
      }

      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.$emit('changeActionData', this.rightTagsList2, false);
    },
    searchTagList() {
      let notIds = []
      for (let i = 0; i < this.rightTagsList.length; i++) {
        if (typeof this.rightTagsList2[i].id === 'number') {
          notIds.push(this.rightTagsList2[i].id)
        }
      }
      let param = {
        "tagName": this.searchVal,
        "type": this.type || '',
        "notIds": notIds,
      }
      api.searchTagList(param).then((res) => {
        if (res.data.code === '0') {
          this.leftTagsList = res.data.data
          this.selectLeftTagsList = []
          this.selectRightTagsList = []
        }
      })
    }

  }
}
</script>
<style lang="less" scoped>
@import "../../less/common.less";
.symptomTagGroupWrapper {
  .bottomPartLeft {
    width: 30%;
    box-sizing: border-box;
    float: left;
  }
  .poolTitle {
    box-sizing: border-box;
    margin-bottom: 20px;
  }
  .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;
      }
    }
  }
  .bottomPartRight {
    float: left;
    width: 60%;
    .changeOrder {
      margin-left: 20px;
    }
  }
  .templateTagList {
    height: 450px;
  }
  .templateTagLists {
    height: 468px;
    width: 98%;
  }
  button {
    // margin-top: 20px;
  }
  .operationItem {
    display: inline-block;
    line-height: 40px;
    margin: 0 5px 10px 0;
    text-align: center;
    float: left;
    p {
      padding: 5px 0;
    }
  }
  .active {
    color: #abcdef;
  }
}
</style>
<style lang="less">
@import "../../less/common.less";
.bottomPartRightTemplate {
  .subTemplate {
    // display: inline-block;
  }
  .el-form-item__content {
    .el-input__inner {
      height: 30px;
      line-height:30px;
      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--mini[data-v-2db8be7a].changeOrderPub, .el-button--mini.is-round[data-v-2db8be7a].changeOrderPub {
      padding: 5px 12px;
    }
    .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>