platformFront/src/components/preTreat/PubSelect.vue

<template>
  <div class="single-container">
    <el-form>
      <div class="operation-row">
        <el-checkbox-group size="small">
          <el-checkbox-button
            :label="0"
            v-if="type!=8&&type!=10"
            :disabled="disableBtn"
            @change="handlePlaceholder(0)"
          >文字输入框占位符</el-checkbox-button>
        </el-checkbox-group>
        <el-checkbox-group size="small">
          <el-checkbox-button
            :label="0"
            v-if="type!=8&&type!=10"
            :disabled="disableBtn"
            @change="handlePlaceholder(1)"
          >数字输入框占位符</el-checkbox-button>
        </el-checkbox-group>
        <el-checkbox-group size="small" v-if="type==2" v-model="checkedExc">
          <el-checkbox-button :label="0" @change="handleExclu">互斥项</el-checkbox-button>
        </el-checkbox-group>
        <el-button type="danger" size="small" class="del" @click="delRow">删除</el-button>
      </div>
      <div class="main-area" v-if="type!=3">
        <el-col class="col-title">
          <span>
            <i>*</i>填写单医生界面展示标准内容
          </span>
          <span>填写单患者界面展示通俗内容</span>
        </el-col>
        <!-- <p class="static-tip" v-if="type==8">默认展示有/无</p> -->
        <el-col v-for="(it,i) in rows" :key="i">
          <div class="inps">
            <el-input
              v-model="rows[i].name"
              v-bind:class="{select:focusOn==i}"
              @focus="selectRow(i,'name')"
              ref="inputName"
              @input="HandleInputName(i, rows[i].name,true)"
              @blur="emitValues"
            ></el-input>
            <el-input
              v-model="rows[i].description"
              v-bind:class="{select:focusOn==i}"
              @focus="selectRow(i,'description')"
              ref="inputDesc"
              @input="HandleInputName(i, rows[i].description)"
              @blur="emitValues"
            ></el-input>
          </div>
          <el-tag v-if="it.exclusion" type="info" size="mini">互斥项</el-tag>
          <span :class="tagActive===i?'tag-active el-tag--mini el-tag el-tag--info':'el-tag--mini el-tag el-tag--info'" v-if="it.exclusionCon" @click="getConnectedQas(it.subQuestion,i)">已关联</span>
        </el-col>
        <el-button @click="addRow">+</el-button>
        <div class="bottomPartMid bottomPartMidss">
          <p>
            <span class="el-icon-arrow-up" @click="orderUpDown(-1)"></span>
          </p>
          <p>
            <span class="el-icon-arrow-down" @click="orderUpDown(1)"></span>
          </p>
        </div>
        <div class="connected-qas" v-if="showQas.length>0">
          <p style="margin-bottom: 10px;">关联的问题：</p>
          <p v-for="(qa,i) in showQas">{{i+1}}. {{qa.name}}</p>
        </div>
      </div>
      <div class="main-area sigle-row" v-if="type==3">
        <el-col v-for="(it,i) in rows" :key="i">
          <div class="inps">
            <el-input
              v-model="rows[i].name"
              v-bind:class="{'red':noHolder.indexOf(i)!==-1, 'select':focusOn==i}"
              @focus="selectRow(i,'name')"
              ref="inputName"
              @input="HandleInputName(i, rows[i].name,true)"
              @blur="emitValues(i)"
            ></el-input>
          </div>
          <el-tag v-if="it.exclusion" type="info" size="mini">互斥项</el-tag>
        </el-col>
        <el-button @click="addRow" class="little">+</el-button>
        <div class="bottomPartMid bottomPartMidss">
          <p>
            <span class="el-icon-arrow-up" @click="orderUpDown(-1)"></span>
          </p>
          <p>
            <span class="el-icon-arrow-down" @click="orderUpDown(1)"></span>
          </p>
        </div>
      </div>
      <div v-if="type==1||type==2" 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 tagPool">
            <li
              v-for="(item, index) in leftTagsList"
              class="tagItem"
              :key="item.id"
              :title="'[ '+item.tagName+' ]('+sex[item.sexType]+(item.required?'、必':'')+')'"
              :style="getStyle(item)?styles:null"
              @click="selectLeftTag(item, index, $event)"
            >
              <p class="ellipsis">
                <span class="tagName">{{item.tagName}}</span>
                <span>({{sex[item.sexType]}}{{item.required?'、必':''}}{{item.flag==1?'、时间':''}}{{item.flag==2?'、诱因':''}}{{item.flag==3?'、伴随':''}})</span>
              </p>
            </li>
          </ul>

          <el-checkbox-group size="small" v-model="checkedCon" class="connect">
            <el-checkbox-button
              :label="0"
              v-if="type==1||type==2"
              @change="handleExcluCon"
            >{{checkedCon?'取消关联':'添加关联'}}</el-checkbox-button>
          </el-checkbox-group>
        </div>
      </div>
    </el-form>
  </div>
</template>
<style lang="less">
@import "../../less/common.less";
.tag-active{
  background: #ccc;
}
.main-area {
  position: relative;
  .connected-qas{
    width:190px;
    height:200px;
    background: #fff;
    position: absolute;
    top:29px;
    right: -150px;
    border:1px #ccc solid;
    padding:5px;
  }
  .bottomPartMid {
    position: absolute;
    top: 29px;
    right: -50px;
  }
}
.main-area .static-tip {
  border: 1px solid #dcdfe6;
  height: 38px;
  width: 130px;
  position: absolute;
  top: 29px;
  left: -130px;
  line-height: 38px;
  text-align: center;
}
.main-area .el-col .el-input.red .el-input__inner {
  border-color: red;
}
.el-checkbox-button--small .el-checkbox-button__inner {
  font-size: 14px;
}
.el-checkbox-button.is-disabled:first-child .el-checkbox-button__inner {
  border-color: @disableColor;
  border-left-color: @disableColor;
  color: @disableColor;
}
.el-checkbox-button:last-child .el-checkbox-button__inner {
  border-radius: 3px;
  border-color: @adminBase;
  color: @adminBase;
  margin-right: 15px;
}
.el-checkbox-button.is-checked:first-child .el-checkbox-button__inner {
  background-color: @adminBase;
  border-left-color: @adminBase;
  color: #fff;
}
.el-checkbox-group {
  display: inline-block;
}
.operation-row {
  margin-left: 150px;
  /*text-align: right;*/
  .del {
    margin-left: 150px;
  }
  .tip {
    color: #48c5d7;
  }
}
.main-area {
  width: 80%;
  min-width: 400px;
  margin: 20px 150px 20px 124px;
  &.sigle-row {
    width: 60%;
    margin: 20px 150px 20px 30%;
    .bottomPartMid {
      top: 0;
      right: 40%;
    }
  }
  .inps {
    display: inline-block;
    width: calc(100% - 60px);
  }
  .el-tag {
    margin-left: 10px;
  }
  .col-title {
    margin-bottom: 10px;
    span {
      display: inline-block;
      width: calc(50% - 30px);
      font-size: 12px;
      i {
        color: #f56c6c;
        margin-right: 3px;
      }
    }
  }
  .el-col .el-input {
    width: 50%;
    display: inline-block;
    .el-input__inner {
      border-radius: 0;
    }
    &.select {
      input {
        border-color: @adminBase;
      }
    }
  }

  .el-button {
    width: calc(100% - 60px);
    border-radius: 0;
    &.little {
      width: calc(50% - 30px);
    }
  }
}
</style>
<script>
import utils from "@api/utils.js";
import api from "@api/preTreat.js";
import Vue from "vue";

//单行数据
const initRow = { orderNo: 0, name: "", description: "", exclusion: 0 };
const initRows = utils.getInitRow(initRow, 4);
export default {
  props: ["type", "options", "ascription", "sexType"],
  data() {
    return {
      rows: [...initRows],
      checkedExc: false,
      checkedCon: false,
      focusOn: -1, //聚焦的行index
      focusName: "name", //是否聚焦医生界面输入框
      disableBtn: false, //占位符是否禁用
      noHolder: "", //是否有占位符-仅多列使用
      msgTimer: null, //占位符必填提示延时
      searchVal: "",
      leftTagsList: [],
      selectLeftTagsList:[],
      tagActive:-1,
      connectedQas:{},
      showQas:[],
      styles: {
        background: "#eae7e7"
      },
      sex: {
        1: "男",
        2: "女",
        3: "通"
      }
    };
  },
  mounted() {
    const { options } = this.$props;
    if (options) {
      const arr = options.filter(it => {
        if(it.subQuestion){
          it.exclusionCon = 1
        }
        return it.name;
      });
      this.rows = arr.length == 0 ? utils.getInitRow(initRow, 4) : arr;
      this.$emit("pushValues", arr);
    } else {
      this.initData();
    }
    if(this.type==1||this.type==2){
      this.searchTagList();
    }
  },
  watch: {
    searchVal(newVal, preVal) {
      this.searchTagList();
    },
    focusOn(newVal) {
      this.checkedExc = this.rows[newVal].exclusion === 1;
      this.checkedCon = this.rows[newVal].exclusionCon === 1;
    },
    /*type() {
        this.initData();
      },*/
    sexType() {
      this.initData();
    }
  },
  methods: {
    getConnectedQas(ids,n){
      if(this.tagActive===n){
        this.tagActive=-1;
        this.showQas=[];
        return;
      }
      this.tagActive=n;
      const idArr=ids.split(",");
      let idsA = [],qa={};
      this.showQas=[];
      idArr.map((it)=>{
        qa=this.connectedQas[it];
        if(!qa){
          idsA.push(it);
        }else{
          this.showQas.push(qa);
        }
      });
      if(idsA.length===0){
        return;
      }
      const param = {
        age:'',
        ids:idsA,
        sexType:this.sexType
      };
      api.getByIds(param).then((res)=>{
        if(res.data.code=='0'){
          this.connectedQas=Object.assign({},this.connectedQas,res.data.data);
          idsA.map((q)=>{
            this.showQas.push(this.connectedQas[q]);
          });
        }
      });
    },
    selectLeftTag(tag) {
      const hasTag = this.isHasTag(tag, this.selectLeftTagsList);
      if (hasTag) {
        this.selectLeftTagsList = this.selectLeftTagsList.filter(
          item => item.id !== tag.id
        );
      } else {
        this.selectLeftTagsList.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);
    },
    searchTagList() {
      let ids = []
      this.rows.map((it, x) => {
        if (it.subQuestion) {
          ids=ids.concat(it.subQuestion.split(','))
        }
      });
      let param = {
        tagName: this.searchVal.trim(),
        type: this.ascription,
        notIds: ids,
        notControlType: ['8'], //组合填写单或非诊疗情况模版不能添加图片上传
        sexType: this.sexType,
        tagType: ["1"] //qaType=2:组合填写单，qaType=3模板
      };
      api.questionSearch(param).then(res => {
        if (res.data.code === "0") {
          this.leftTagsList = res.data.data;
          this.selectLeftTagsList = [];
          // this.selectRightTagsList = [];
        }
      });
    },
    initData() {
      this.rows = [...utils.getInitRow(initRow, 4)];
    },
    addRow() {
      this.rows.push(Object.assign({}, initRow, { orderNo: this.rows.length }));
    },
    selectRow(index, name) {
      this.focusOn = index;
      this.focusName = name;
      const placeReg = /(\$\{number_\S*?\})|(\$\{input_\S*?\})/g;
      if (placeReg.test(this.rows[index][name])) {
        this.disableBtn = true;
        return;
      }
      this.disableBtn = false;
    },
    orderUpDown(i) {
      const item = this.rows[this.focusOn]; //要调整位置的行
      const inx = this.focusOn;
      if (
        inx === -1 ||
        (inx === 0 && i === -1) ||
        (inx === this.rows.length - 1 && i === 1)
      ) {
        return;
      }
      this.focusOn = inx + i;
      this.rows.splice(inx, 1);
      this.rows.splice(inx + i, 0, item);
    },
    handlePlaceholder(type) {
      //占位符类型，type=0文本输入框，type=1数字输入框，type=2关联问题
      const i = this.focusOn;
      clearTimeout(this.msgTimer);
      if (i == -1) {
        this.$message({
          message: "请先选中要操作的行",
          type: "warning",
          showClose: true
        });
        return;
      }
      const maps = {
        0: "${input_其他（点击输入）}",
        1: "${number_其他（点击输入）}"
      };
      const key = this.focusName;
      this.noHolder = this.noHolder.replace("," + i, "");
      this.rows[i].name = this.rows[i].name + maps[type];
      if (this.type != "3") {
        this.rows[i].description = this.rows[i].description + maps[type];
      }
      this.disableBtn = true;
    },
    handleExcluCon(){
      const i = this.focusOn;
      if (i == -1) {
        this.$message({
          message: "请先选中要操作的行",
          type: "warning",
          showClose: true
        });
        this.checkedCon = false
        return;
      }
      if(this.selectLeftTagsList.length==0&&this.rows[i].exclusionCon!=1){
        this.$message({
          message: "请选择标签池选项",
          type: "warning",
          showClose: true
        });
        this.checkedCon = false
        return;
      }
      if (this.rows[i].exclusionCon&&this.rows[i].exclusionCon === 1) {
        this.rows[i].exclusionCon = 0;
        this.rows[i].subQuestion = '';
        this.rows.map((it, x) => {
          if (x === i) {
            this.selectLeftTagsList = [];
            it.subQuestion = '';
          }
        });
        this.searchTagList()
        return;
      }
      this.rows.map((it, x) => {
        if (x === i) {
          let ids = []
          this.selectLeftTagsList.map((part)=>{
            ids.push(part.id)
          })
          this.selectLeftTagsList = [];
          it.exclusionCon = 1;
          it.subQuestion = ids.join(',');
        }
      });
      this.searchTagList()
    },
    handleExclu() {
      const i = this.focusOn;
      if (i == -1) {
        this.$message({
          message: "请先选中要操作的行",
          type: "warning",
          showClose: true
        });
        return;
      }
      if (this.rows[i].exclusion === 1) {
        this.rows[i].exclusion = 0;
        return;
      }
      this.rows.map((it, x) => {
        if (x === i) {
          it.exclusion = 1;
        }
        // else{
        //   it.exclusion = 0;
        // }
      });
    },
    emitValues(i) {
      if (typeof i === "number") {
        const reg = /(\$\{number_\S*?\})|(\$\{input_\S*?\})/g;
        const name = this.rows[i].name;
        if (name && !reg.test(name)) {
          this.noHolder =
            this.noHolder.indexOf(i) != -1
              ? this.noHolder
              : this.noHolder + "," + i;
          const that = this;
          this.msgTimer = setTimeout(function() {
            that.$message({
              message: "请添加数字输入框或者文本输入框",
              type: "warning",
              showClose: true
            });
          }, 500);

          this.$emit("pushValues", this.rows);
          return;
        }
        this.noHolder = this.noHolder.replace("," + i, "");
      }
      const items = this.rows;
      this.$emit("pushValues", items);
    },
    HandleInputName(i, name, isName) {
      const reg = /(\$\{number_\S*?\})|(\$\{input_\S*?\})/g;
      const pureName = name.replace(reg, "");
      const hasPlace = reg.test(name);
      if (hasPlace && this.disableBtn == false) {
        this.disableBtn = true;
      } else if (!hasPlace && this.disableBtn == true) {
        this.rows[i][isName ? "description" : "name"] = this.rows[i][
          isName ? "description" : "name"
        ].replace(reg, "");
        this.disableBtn = false;
      }
      if (pureName.length > 30) {
        this.$message({
          message: "最多输入30个字",
          type: "warning",
          showClose: true
        });
        return;
      }
    },
    delRow() {
      if (this.focusOn == -1) {
        this.$message({
          message: "请先选择要删除的行",
          type: "warning",
          showClose: true
        });
        return;
      }
      this.$alert("确定要删除该行吗？", "提示", {
        confirmButtonText: "确定",
        type: "warning"
      })
        .then(() => {
          this.rows.splice(this.focusOn, 1);
          this.focusOn = -1;
          this.emitValues();
        })
        .catch(() => {});
    }
  }
};
</script>
<style lang="less" scoped>
.attributeBox {
  position: absolute;
  right: -100px;
  top: 2px;
}
.tagItem {
  position: relative;
  line-height: 30px;
  cursor: pointer;
  padding: 0 10px;
}
.operationPool {
  position: relative;
  width: 60%;
  min-height: 300px;
  padding: 10px 0;
}
.tagName {
  margin-right: 10px;
}
.tagName:before {
  content: "[";
}
.tagName::after {
  content: "]";
}
.bottomPartLeft {
  width: 50%;
  box-sizing: border-box;
  margin: 20px 150px 20px 124px;
  margin: 20px 150px 20px 70px;
}
.main-area{
  margin: 20px 150px 20px 70px;
}
.operation-row{
  margin-left: 80px;
  text-align: left;
}
.operation-row .del{
  float: right;
}
.poolTitle {
  // border-bottom: 1px solid @icssBorder;
  box-sizing: border-box;
  margin-bottom: 20px;
}
.pool {
  // border:1px solid @icssBorder;
}
.search {
  width: 100%;
  border-bottom: 1px solid #c0c4cc;
  box-sizing: border-box;
  height: 30px;
}
.tagList {
  border: 1px solid #c0c4cc;
}
.tagPool {
  height: 300px;
  overflow-y: auto;
}
.NoiseTemplateWrapper .btn {
  margin-top: 250px !important;
}
.bottomPartLeft {
  min-height: 250px;
}

.main-area .inps,.main-area .el-button {
  width:calc(100% - 120px)
}
.el-checkbox-group.connect {
  position: absolute;
  right: -150px;
  top: 0;
}
.pool {
  position: relative;
}
</style>