morphone1995 4 年之前
父节点
当前提交
b213da32aa
共有 1 个文件被更改,包括 146 次插入124 次删除
  1. 146 124
      src/components/preTreat/PubSelect.vue

+ 146 - 124
src/components/preTreat/PubSelect.vue

@@ -2,19 +2,19 @@
   <div class="single-container" @click="hideQas">
     <el-form>
       <div class="operation-row">
-        <el-checkbox-group size="small">
+        <el-checkbox-group size="small" v-model="checkedNum">
           <el-checkbox-button
             :label="0"
             v-if="type!=8&&type!=10"
-            :disabled="disableBtn"
+            :disabled="disabled"
             @change="handlePlaceholder(0)"
           >文字输入框占位符</el-checkbox-button>
         </el-checkbox-group>
-        <el-checkbox-group size="small">
+        <el-checkbox-group size="small" v-model="checkedText">
           <el-checkbox-button
             :label="0"
             v-if="type!=8&&type!=10"
-            :disabled="disableBtn"
+            :disabled="disabled"
             @change="handlePlaceholder(1)"
           >数字输入框占位符</el-checkbox-button>
         </el-checkbox-group>
@@ -36,7 +36,7 @@
             <el-input
               v-model="rows[i].name"
               v-bind:class="{select:focusOn==i}"
-              @focus="selectRow(i,'name')"
+              @focus="selectRow(i,'name',rows[i])"
               ref="inputName"
               @input="HandleInputName(i, rows[i].name,true)"
               @blur="emitValues"
@@ -44,14 +44,18 @@
             <el-input
               v-model="rows[i].description"
               v-bind:class="{select:focusOn==i}"
-              @focus="selectRow(i,'description')"
+              @focus="selectRow(i,'description',rows[i])"
               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($event,it.subQuestion,i)">已关联</span>
+          <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($event,it.subQuestion,i)"
+          >已关联</span>
         </el-col>
         <el-button @click="addRow">+</el-button>
         <div class="bottomPartMid bottomPartMidss">
@@ -73,7 +77,7 @@
             <el-input
               v-model="rows[i].name"
               v-bind:class="{'red':noHolder.indexOf(i)!==-1, 'select':focusOn==i}"
-              @focus="selectRow(i,'name')"
+              @focus="selectRow(i,'name',rows[i])"
               ref="inputName"
               @input="HandleInputName(i, rows[i].name,true)"
               @blur="emitValues(i)"
@@ -126,21 +130,21 @@
   </div>
 </template>
 <style lang="less">
-@import "../../less/common.less";
-.tag-active{
+@import '../../less/common.less';
+.tag-active {
   background: #ccc;
 }
 .main-area {
   position: relative;
-  .connected-qas{
-    width:190px;
-    height:200px;
+  .connected-qas {
+    width: 190px;
+    height: 200px;
     background: #fff;
     position: absolute;
-    top:29px;
+    top: 29px;
     right: -150px;
-    border:1px #ccc solid;
-    padding:5px;
+    border: 1px #ccc solid;
+    padding: 5px;
   }
   .bottomPartMid {
     position: absolute;
@@ -247,39 +251,41 @@
 }
 </style>
 <script>
-import utils from "@api/utils.js";
-import api from "@api/preTreat.js";
-import Vue from "vue";
+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 initRow = { orderNo: 0, name: '', description: '', exclusion: 0 };
 const initRows = utils.getInitRow(initRow, 4);
 export default {
-  props: ["type", "options", "ascription", "sexType","hasId","hasPool"],
+  props: ['type', 'options', 'ascription', 'sexType', 'hasId', 'hasPool'],
   data() {
     return {
       rows: [...initRows],
       selectIndex: -1,
       checkedExc: false,
+      checkedText: false,
+      checkedNum: false,
       checkedCon: false,
       focusOn: -1, //聚焦的行index
-      focusName: "name", //是否聚焦医生界面输入框
-      disableBtn: false, //占位符是否禁用
-      noHolder: "", //是否有占位符-仅多列使用
+      focusName: 'name', //是否聚焦医生界面输入框
+      disabled: false, //占位符是否禁用
+      noHolder: '', //是否有占位符-仅多列使用
       msgTimer: null, //占位符必填提示延时
-      searchVal: "",
+      searchVal: '',
       leftTagsList: [],
-      selectLeftTagsList:[],
-      tagActive:-1,
-      connectedQas:{},
-      showQas:[],
+      selectLeftTagsList: [],
+      tagActive: -1,
+      connectedQas: {},
+      showQas: [],
       styles: {
-        background: "#eae7e7"
+        background: '#eae7e7'
       },
       sex: {
-        1: "男",
-        2: "女",
-        3: "通"
+        1: '男',
+        2: '女',
+        3: '通'
       }
     };
   },
@@ -287,17 +293,17 @@ export default {
     const { options } = this.$props;
     if (options) {
       const arr = options.filter(it => {
-        if(it.subQuestion){
-          it.exclusionCon = 1
+        if (it.subQuestion) {
+          it.exclusionCon = 1;
         }
         return it.name;
       });
       this.rows = arr.length == 0 ? utils.getInitRow(initRow, 4) : arr;
-      this.$emit("pushValues", arr);
+      this.$emit('pushValues', arr);
     } else {
       this.initData();
     }
-    if(this.type==1||this.type==2){
+    if (this.type == 1 || this.type == 2) {
       this.searchTagList();
     }
   },
@@ -306,10 +312,10 @@ export default {
       this.searchTagList();
     },
     focusOn(newVal) {
-      this.selectIndex = newVal
+      this.selectIndex = newVal;
       this.checkedExc = this.rows[newVal].exclusion === 1;
       this.checkedCon = this.rows[newVal].exclusionCon === 1;
-      this.searchTagList()
+      this.searchTagList();
     },
     /*type() {
         this.initData();
@@ -319,44 +325,49 @@ export default {
     }
   },
   methods: {
-    getConnectedQas(e,ids,n){
+    getConnectedQas(e, ids, n) {
       e.stopPropagation();
-      if(this.tagActive===n){
-       this.hideQas()
+      if (this.tagActive === n) {
+        this.hideQas();
         return;
       }
-      this.tagActive=n;
-      const idArr=ids.split(",");
-      let idsA = [],qa={};
-      this.showQas=[];
-      idArr.map((it)=>{
-        qa=this.connectedQas[it];
-        if(!qa){
+      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{
+        } else {
           this.showQas.push(qa);
         }
       });
-      if(idsA.length===0){
+      if (idsA.length === 0) {
         return;
       }
       const param = {
-        age:'',
-        ids:idsA,
-        sexType:this.sexType
+        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)=>{
+      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]);
           });
         }
       });
     },
-    hideQas(){
-      this.tagActive=-1;
-      this.showQas =[]
+    hideQas() {
+      this.tagActive = -1;
+      this.showQas = [];
     },
     selectLeftTag(tag) {
       const hasTag = this.isHasTag(tag, this.selectLeftTagsList);
@@ -381,26 +392,26 @@ export default {
       return this.isHasTag(item, this.selectLeftTagsList);
     },
     searchTagList() {
-      let ids = []
+      let ids = [];
       this.rows.map((it, x) => {
-        if (it.subQuestion&&this.selectIndex===x) {
-          ids=ids.concat(it.subQuestion.split(','))
+        if (it.subQuestion && this.selectIndex === x) {
+          ids = ids.concat(it.subQuestion.split(','));
         }
       });
-      if(this.hasId!=''){
-        ids.push(this.hasId)
+      if (this.hasId != '') {
+        ids.push(this.hasId);
       }
       let param = {
         tagName: this.searchVal.trim(),
         type: this.ascription,
         notIds: ids,
-        noSubQuestion:1,
-        notControlType: ['8','4'], //组合填写单或非诊疗情况模版不能添加图片上传
+        noSubQuestion: 1,
+        notControlType: ['8', '4'], //组合填写单或非诊疗情况模版不能添加图片上传
         sexType: this.sexType,
-        tagType: ["1"] //qaType=2:组合填写单,qaType=3模板
+        tagType: ['1'] //qaType=2:组合填写单,qaType=3模板
       };
       api.questionSearch(param).then(res => {
-        if (res.data.code === "0") {
+        if (res.data.code === '0') {
           this.leftTagsList = res.data.data;
           this.selectLeftTagsList = [];
           // this.selectRightTagsList = [];
@@ -411,19 +422,19 @@ export default {
       this.rows = [...utils.getInitRow(initRow, 4)];
     },
     addRow() {
-      if(this.type == 3){
-        if(this.rows.length>5){
+      if (this.type == 3) {
+        if (this.rows.length > 5) {
           this.$message({
-            message: "多列填写类型最多添加6个选项",
-            type: "warning",
+            message: '多列填写类型最多添加6个选项',
+            type: 'warning',
             showClose: true
           });
-          return
+          return;
         }
       }
       this.rows.push(Object.assign({}, initRow, { orderNo: this.rows.length }));
     },
-    selectRow(index, name) {
+    selectRow(index, name, row) {
       this.focusOn = index;
       this.focusName = name;
       const placeReg = /(\$\{number_\S*?\})|(\$\{input_\S*?\})/g;
@@ -448,50 +459,60 @@ export default {
       this.rows.splice(inx + i, 0, item);
     },
     handlePlaceholder(type) {
+      if (type == 0) {
+        this.checkedNum = true;
+        this.checkedText = false;
+      } else if (type == 1) {
+        this.checkedNum = false;
+        this.checkedText = true;
+      }
       //占位符类型,type=0文本输入框,type=1数字输入框,type=2关联问题
       const i = this.focusOn;
       clearTimeout(this.msgTimer);
       if (i == -1) {
         this.$message({
-          message: "请先选中要操作的行",
-          type: "warning",
+          message: '请先选中要操作的行',
+          type: 'warning',
           showClose: true
         });
         return;
       }
       const maps = {
-        0: "${input_其他(点击输入)}",
-        1: "${number_其他(点击输入)}"
+        0: '${input_其他(点击输入)}',
+        1: '${number_其他(点击输入)}'
       };
       const key = this.focusName;
-      this.noHolder = this.noHolder.replace("," + i, "");
+      this.noHolder = this.noHolder.replace(',' + i, '');
       this.rows[i].name = this.rows[i].name + maps[type];
-      if (this.type != "3") {
+      if (this.type != '3') {
         this.rows[i].description = this.rows[i].description + maps[type];
       }
       this.disableBtn = true;
     },
-    handleExcluCon(){
+    handleExcluCon() {
       const i = this.focusOn;
       if (i == -1) {
         this.$message({
-          message: "请先选中要操作的行",
-          type: "warning",
+          message: '请先选中要操作的行',
+          type: 'warning',
           showClose: true
         });
-        this.checkedCon = false
+        this.checkedCon = false;
         return;
       }
-      if(this.selectLeftTagsList.length==0&&this.rows[i].exclusionCon!=1){
+      if (
+        this.selectLeftTagsList.length == 0 &&
+        this.rows[i].exclusionCon != 1
+      ) {
         this.$message({
-          message: "请选择标签池选项",
-          type: "warning",
+          message: '请选择标签池选项',
+          type: 'warning',
           showClose: true
         });
-        this.checkedCon = false
+        this.checkedCon = false;
         return;
       }
-      if (this.rows[i].exclusionCon&&this.rows[i].exclusionCon === 1) {
+      if (this.rows[i].exclusionCon && this.rows[i].exclusionCon === 1) {
         this.rows[i].exclusionCon = 0;
         this.rows[i].subQuestion = '';
         this.rows.map((it, x) => {
@@ -500,28 +521,28 @@ export default {
             it.subQuestion = '';
           }
         });
-        this.searchTagList()
+        this.searchTagList();
         return;
       }
       this.rows.map((it, x) => {
         if (x === i) {
-          let ids = []
-          this.selectLeftTagsList.map((part)=>{
-            ids.push(part.id)
-          })
+          let ids = [];
+          this.selectLeftTagsList.map(part => {
+            ids.push(part.id);
+          });
           this.selectLeftTagsList = [];
           it.exclusionCon = 1;
           it.subQuestion = ids.join(',');
         }
       });
-      this.searchTagList()
+      this.searchTagList();
     },
     handleExclu() {
       const i = this.focusOn;
       if (i == -1) {
         this.$message({
-          message: "请先选中要操作的行",
-          type: "warning",
+          message: '请先选中要操作的行',
+          type: 'warning',
           showClose: true
         });
         return;
@@ -540,47 +561,47 @@ export default {
       });
     },
     emitValues(i) {
-      if (typeof i === "number") {
+      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;
+              : this.noHolder + ',' + i;
           const that = this;
           this.msgTimer = setTimeout(function() {
             that.$message({
-              message: "请添加数字输入框或者文本输入框",
-              type: "warning",
+              message: '请添加数字输入框或者文本输入框',
+              type: 'warning',
               showClose: true
             });
           }, 500);
 
-          this.$emit("pushValues", this.rows);
+          this.$emit('pushValues', this.rows);
           return;
         }
-        this.noHolder = this.noHolder.replace("," + i, "");
+        this.noHolder = this.noHolder.replace(',' + i, '');
       }
       const items = this.rows;
-      this.$emit("pushValues", items);
+      this.$emit('pushValues', items);
     },
     HandleInputName(i, name, isName) {
       const reg = /(\$\{number_\S*?\})|(\$\{input_\S*?\})/g;
-      const pureName = name.replace(reg, "");
+      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.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",
+          message: '最多输入30个字',
+          type: 'warning',
           showClose: true
         });
         return;
@@ -589,15 +610,15 @@ export default {
     delRow() {
       if (this.focusOn == -1) {
         this.$message({
-          message: "请先选择要删除的行",
-          type: "warning",
+          message: '请先选择要删除的行',
+          type: 'warning',
           showClose: true
         });
         return;
       }
-      this.$alert("确定要删除该行吗?", "提示", {
-        confirmButtonText: "确定",
-        type: "warning"
+      this.$alert('确定要删除该行吗?', '提示', {
+        confirmButtonText: '确定',
+        type: 'warning'
       })
         .then(() => {
           this.rows.splice(this.focusOn, 1);
@@ -631,10 +652,10 @@ export default {
   margin-right: 10px;
 }
 .tagName:before {
-  content: "[";
+  content: '[';
 }
 .tagName::after {
-  content: "]";
+  content: ']';
 }
 .bottomPartLeft {
   width: 50%;
@@ -642,14 +663,14 @@ export default {
   margin: 20px 150px 20px 124px;
   margin: 20px 150px 20px 70px;
 }
-.main-area{
+.main-area {
   margin: 20px 150px 20px 70px;
 }
-.operation-row{
+.operation-row {
   margin-left: 80px;
   text-align: left;
 }
-.operation-row .del{
+.operation-row .del {
   float: right;
 }
 .poolTitle {
@@ -680,8 +701,9 @@ export default {
   min-height: 250px;
 }
 
-.main-area .inps,.main-area .el-button {
-  width:calc(100% - 120px)
+.main-area .inps,
+.main-area .el-button {
+  width: calc(100% - 120px);
 }
 .el-checkbox-group.connect {
   position: absolute;