platformFront/src/components/icss/ChronicDiseaseAdd.vue

<template>
  <div>
    <crumbs
      :title="minTitle"
      class="topBack"
      linkTo="/admin/LT-YXSYKWH-LBJGWH"
    ></crumbs>
    <div class="ChronicDiseaseAddWrap" @click="close">
      <div class="ChronicDisease">
        <p class="ChronicDiseaseTop" v-if="!editData.isEdit">
          <span>选择量表术语：</span>
          <input
            type="text"
            v-model="region"
            @click.stop
          >
          <i @click.stop="searchTagList">搜索</i>
          <ul v-if="showLis">
            <li v-for="item in AdscriptionsType" :key="item.conceptId" @click="selectLis(item.conceptId,item.name)">{{item.name}}</li>
          </ul>
        </p>
        <p class="ChronicDiseaseBtm">
          <span>已选择量表术语：</span>
          <i>{{selectName}}</i>
        </p>
      </div>
      <div class="ChronicDiseaseDetail">
        <div class="ChronicDiseaseLeft">
          <h4>操作栏：</h4>
          <div class="parts" v-for="(item,idx) in parts" :class="selectLeftPart.id == item.id?'selectDom':null" :key="item.id" @click="selectPart(item,1)">
            {{item.name}}
          </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="ChronicDiseaseRight">
          <h4>内容池：</h4>
          <div class="contentWrap">
            <div class="contentDetail clearfix" v-for="(item,idx) in contentPool" :class="selectRightPart.order == item.order?'selectDom':null" :key="item.order" @click="selectPart(item,2)">
              <span>{{item.name}}：</span>
              <div class="contentDetails">
                <quillEditor v-model="item.content" :options="editorOption" v-if="item.val == 0" class="ql-editor"></quillEditor>
              </div>
            </div>
          </div>
        </div>
        <div class="bottomPartMid upAndDown">
          <p><span
              class="el-icon-arrow-up"
              @click="movePool(1)"
            ></span></p>
          <p><span
              class="el-icon-arrow-down"
              @click="movePool(2)"
            ></span></p>
        </div>
        <div class="btn">
          <el-button
            type="primary"
            @click="submitForm"
          >确 定</el-button>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import api from '@api/icss.js';
import utils from '@api/utils.js';
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import {quillEditor, Quill} from 'vue-quill-editor'
import config from '@api/config';
import {container, ImageExtend, QuillWatch} from 'quill-image-extend-module';
Quill.register('modules/ImageExtend', ImageExtend);
/**
 * 归属type
 * 1：主诉模板 2：现病史模板 3：现病史空模板 4 : 其他史模板 5：嵌套模板 6：慢病模板
 */
export default {
  data() {
    return {
      editorOption: {
        modules: {
          toolbar: {
            container: container
          }
        }
      },
      region: '',    //量表标签
      selectName:'',
      selectId:'',
      AdscriptionsType: [],
      editData: {},
      minTitle:'量表维护-添加量表结构',
      showLis:false,
      parts:[],
      selectLeftPart:{},//左侧选中
      selectRightPart:{},//右侧选中
      contentPool:[], //内容池
    }
  },
  beforeMount:function(){
    let tmpPart = localStorage.getItem('DiseaseManage')
    this.parts = JSON.parse(tmpPart)
  },
  mounted() {
    let tmpEditData = this.$route.params
    if (tmpEditData.isEdit) {      //修改
      this.editData = tmpEditData
      this.minTitle='量表维护-修改量表结构'
      this.selectName = tmpEditData.row.name
      this.selectId = tmpEditData.row.conceptId
      let tmpScale = tmpEditData.data
      for(let i = 0;i < tmpScale.length;i++){
        tmpScale[i].val = tmpScale[i].type
        tmpScale[i].order = tmpScale[i].orderNo
        tmpScale[i].name = tmpScale[i].type == 1?'文本模块':'推送模块'
      }
      this.contentPool = tmpScale
    }
    this.$emit('changeVal', this.form, false)
  },
  methods: {
    toRightPool() {
      let tmpLeft = JSON.parse(JSON.stringify(this.selectLeftPart))
      let tmpPool = JSON.parse(JSON.stringify(this.contentPool))
      if(JSON.stringify(tmpLeft) == '{}'){
        return
      }
      if(tmpLeft.val == 2){
        for(let i = 0;i < tmpPool.length;i++){
          if(tmpPool[i].val == 2){
            // this.$message({
            //   message: '推送模块只能添加一次',
            //   type: 'warning'
            // });
            return
          }
        }
      }
      tmpPool.push(tmpLeft)
      this.selectLeftPart = {}
      for(let i = 0;i < tmpPool.length;i++){
        tmpPool[i].order = i+1
      }
      this.contentPool = tmpPool
    },
    toLeftPool() {
      let tmpRight = JSON.parse(JSON.stringify(this.selectRightPart))
      let tmpPool = JSON.parse(JSON.stringify(this.contentPool))
      if(JSON.stringify(tmpRight) == '{}'){
        return
      }
      tmpPool = tmpPool.filter((item)=>item.order != tmpRight.order)
      for(let i = 0;i < tmpPool.length;i++){
        tmpPool[i].order = i+1
      }
      this.contentPool = tmpPool
      this.selectRightPart = {}
    },
    movePool(dir) {
      let tmpRight = JSON.parse(JSON.stringify(this.selectRightPart))
      let tmpPool = JSON.parse(JSON.stringify(this.contentPool))
      if((dir == 1 && tmpRight.order == 1) || (dir == 2 && tmpRight.order == tmpPool.length)){
        return
      }
      if(JSON.stringify(tmpRight) == '{}'){
        return
      }
      tmpPool = tmpPool.filter((item)=>item.order != tmpRight.order)
      if(dir == 1){
        tmpPool.splice(tmpRight.order-2,0,tmpRight)
        for(let i = 0;i < tmpPool.length;i++){
          tmpPool[i].order = i+1
        }
      }else if(dir == 2){
        tmpPool.splice(tmpRight.order,0,tmpRight)
        for(let i = 0;i < tmpPool.length;i++){
          tmpPool[i].order = i+1
        }
      }
      this.selectRightPart = tmpRight
      this.contentPool = tmpPool
    },
    selectPart(part,dir){
      if(dir == 1){
        if(this.selectLeftPart.val == part.val){
          this.selectLeftPart = {}
        }else{
          this.selectLeftPart = part
        }
      }else if(dir == 2){
        if(this.selectRightPart.order == part.order){
          this.selectRightPart = {}
        }else{
          this.selectRightPart = part
        }
      }
    },
    close(){
      this.showLis = false
    },
    selectLis(id,name){
      this.selectName = name
      this.selectId = id
    },
    searchTagList() {
      if(this.region.trim() == ''){
        return
      }
      api.searchKnowledgeLis({name: this.region}).then((res) => {
        if (res.data.code === '0') {
          console.log(res)
          this.AdscriptionsType = res.data.data
          this.showLis = this.AdscriptionsType.length > 0
        }
      })
    },
    getParams(){
      let tmpParams = []
      let tmpPool = JSON.parse(JSON.stringify(this.contentPool))
      for(let i = 0;i < tmpPool.length;i++){
        if(tmpPool[i].val == 0 && !tmpPool[i].content){
          
        }else{
          let tmpObj = {
            "content": "",
            "orderNo": '',
            "type": ''
          }
          tmpObj.content = tmpPool[i].content || ''
          tmpObj.orderNo = tmpPool[i].order
          tmpObj.type = tmpPool[i].val
          tmpParams.push(tmpObj)
        }
      }
      return {
        "content": tmpParams,
        "conceptId": this.selectId
      }
    },
    submitForm() {
      if(this.selectName == ''){
        this.$message({
          message: '请选择量表标签',
          type: 'warning'
        });
        return
      }
      let param = this.getParams();
      if(param.content.length == 0){
        this.$message({
          message: '请添加内容池内容',
          type: 'warning'
        });
        return
      }
      this.showConfirmDialog('是否保存该量表结构？', () => {
        api.insertOrUpdate(param).then((res) => {
          if (res.data.code === '0') {
            this.warning(res.data.msg || '保存成功', 'success');
            setTimeout(() => {
              this.$router.push({
                path:'/admin/LT-YXSYKWH-LBJGWH'
              })
            }, 1000);
          }
        })
      })
    },
    showConfirmDialog(msg, resolve) {
      this.$alert(msg, '提示', {
        confirmButtonText: '确定',
        type: 'warning'
      }).then(() => {
        resolve();
      }).catch(() => {});
    },
    warning(msg, type,time) {
      this.$message({
        showClose: true,
        message: msg,
        type: type || 'warning',
        duration:time || '3000'
      })
    },
  },
  components:{
    quillEditor
  }
}
</script>
<style lang="less">
.contentDetails{
  .quill-editor .ql-toolbar.ql-snow .ql-formats  .ql-image,
  .quill-editor .ql-toolbar.ql-snow .ql-formats  .ql-video,
  .quill-editor .ql-toolbar.ql-snow .ql-formats  .ql-link{
    display: none;
  }
}
</style>

<style lang="less" scoped>
@import "../../less/common.less";
.topBack {
  top: 0;
}
.btn {
  text-align: right;
  margin-top: 20px;
}
.ChronicDiseaseAddWrap {
  margin: 20px;
  box-sizing: border-box;
  background-color: #fff;
  color: #606266;
  .ChronicDisease {
    border-bottom: 1px solid #c0c4cc;
    padding: 20px;
    margin-top: 60px;
    span {
      width: 160px;
      display: inline-block;
    }
    .ChronicDiseaseTop {
      input {
        width: 221px;
        height: 34px;
        line-height: 34px;
        padding-left: 7px;
        padding-right: 56px;
        box-sizing: border-box;
      }
      i {
        display: inline-block;
        width: 56px;
        height: 34px;
        line-height: 32px;
        border-left: 1px solid @icssBorder;
        position: relative;
        left: -57px;
        vertical-align: middle;
        text-align: center;
        cursor: pointer;
      }
      ul {
        width: 219px;
        margin-left: 160px;
        border: 1px solid @icssBorder;
        background: #fff;
        max-height: 200px;
        overflow-y: auto;
        height: auto;
        position: absolute;
        z-index: 9999;
        li {
          border: 1px solid #fff;
          padding-left: 7px;
          height: 27px;
          line-height: 27px;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
        li:hover {
          background: #f5f7fa;
        }
      }
    }
    .ChronicDiseaseBtm {
      margin: 25px 0 10px 0;
    }
  }
  .ChronicDiseaseDetail {
    padding: 20px;
    overflow: hidden;
    position: relative;
    h4 {
      margin-bottom: 10px;
    }
    .bottomPartMid {
      width: 80px;
      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;
        }
      }
    }
    .upAndDown {
      position: absolute;
      right: 0;
      top: 0;
    }
    .ChronicDiseaseLeft {
      float: left;
      .parts {
        height: 40px;
        line-height: 40px;
        width: 160px;
        text-align: center;
        font-size: 14px;
        margin: 20px 0;
        background-color: #EFEFEF;
        border: 1px solid @icssBorder;
        color: #333;
        cursor: pointer;
      }
    }
  }
  .ChronicDiseaseRight {
    padding-right: 50px;
    .contentWrap {
      color: #333;
      min-width: 400px;
      min-height: 500px;
      max-height: 600px;
      border: 1px solid @icssBorder;
      background: #fff;
      overflow-y: auto;
      .contentDetail {
        border: 1px solid #fff;
        padding: 5px;
        padding-left: 80px;
        box-sizing: border-box;
        margin: 5px;
        position: relative;
        span {
          width: 80px;
          display: inline-block;
          position: absolute;
          top: 12px;
          left: 0px;
          text-align: right;
        }
        .contentDetails {
          float: left;
          min-height: 40px;
          width: 100%;
          box-sizing: border-box;
          background-color: #EFEFEF;
        }
      }
    }
  }
  .selectDom {
    border: 1px solid @adminBase !important;
  }
}
</style>