|
|
@@ -1,350 +1,594 @@
|
|
|
<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" :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" :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>
|
|
|
- </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>
|
|
|
- <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>
|
|
|
- </el-form>
|
|
|
- </div>
|
|
|
+ <div class="single-container">
|
|
|
+ <el-form>
|
|
|
+ <div class="operation-row">
|
|
|
+ <el-checkbox-group size="small" v-model="checkedCon">
|
|
|
+ <el-checkbox-button
|
|
|
+ :label="0"
|
|
|
+ v-if="type==1||type==2"
|
|
|
+ @change="handleExcluCon"
|
|
|
+ >添加关联</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(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>
|
|
|
+ <el-tag v-if="it.exclusionCon" type="info" size="mini">已关联</el-tag>
|
|
|
+ </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>
|
|
|
+ <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>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-form>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
<style lang="less">
|
|
|
- @import "../../less/common.less";
|
|
|
- .main-area{
|
|
|
- position: relative;
|
|
|
- .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;
|
|
|
+@import "../../less/common.less";
|
|
|
+.main-area {
|
|
|
+ position: relative;
|
|
|
+ .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%;
|
|
|
}
|
|
|
- .el-checkbox-button--small .el-checkbox-button__inner{
|
|
|
- font-size: 14px;
|
|
|
+ }
|
|
|
+ .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-checkbox-button.is-disabled:first-child .el-checkbox-button__inner{
|
|
|
- border-color: @disableColor;
|
|
|
- border-left-color: @disableColor;
|
|
|
- color: @disableColor;
|
|
|
+ }
|
|
|
+ .el-col .el-input {
|
|
|
+ width: 50%;
|
|
|
+ display: inline-block;
|
|
|
+ .el-input__inner {
|
|
|
+ border-radius: 0;
|
|
|
}
|
|
|
- .el-checkbox-button:last-child .el-checkbox-button__inner{
|
|
|
- border-radius: 3px;
|
|
|
+ &.select {
|
|
|
+ input {
|
|
|
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);
|
|
|
- }
|
|
|
- }
|
|
|
+ .el-button {
|
|
|
+ width: calc(100% - 60px);
|
|
|
+ border-radius: 0;
|
|
|
+ &.little {
|
|
|
+ width: calc(50% - 30px);
|
|
|
}
|
|
|
+ }
|
|
|
+}
|
|
|
</style>
|
|
|
<script>
|
|
|
- import utils from '@api/utils.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 initRows = utils.getInitRow(initRow,4);
|
|
|
- export default {
|
|
|
- props:['type','options','ascription','sexType'],
|
|
|
- data(){
|
|
|
- return {
|
|
|
- rows:[...initRows],
|
|
|
- checkedExc:false,
|
|
|
- focusOn:-1, //聚焦的行index
|
|
|
- focusName:'name', //是否聚焦医生界面输入框
|
|
|
- disableBtn:false, //占位符是否禁用
|
|
|
- noHolder:'', //是否有占位符-仅多列使用
|
|
|
- msgTimer:null, //占位符必填提示延时
|
|
|
+//单行数据
|
|
|
+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:[],
|
|
|
+ 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();
|
|
|
},
|
|
|
- mounted(){
|
|
|
- const {options} = this.$props;
|
|
|
- if(options){
|
|
|
- const arr = options.filter((it)=>{
|
|
|
- return it.name;
|
|
|
- });
|
|
|
- this.rows = arr.length==0?utils.getInitRow(initRow,4):arr;
|
|
|
- this.$emit('pushValues',arr);
|
|
|
- }else{
|
|
|
- this.initData();
|
|
|
- }
|
|
|
+ focusOn(newVal) {
|
|
|
+ this.checkedExc = this.rows[newVal].exclusion === 1;
|
|
|
+ this.checkedCon = this.rows[newVal].exclusionCon === 1;
|
|
|
},
|
|
|
- watch: {
|
|
|
- focusOn(newVal){
|
|
|
- this.checkedExc = this.rows[newVal].exclusion===1;
|
|
|
- },
|
|
|
- /*type() {
|
|
|
+ /*type() {
|
|
|
this.initData();
|
|
|
},*/
|
|
|
- sexType() {
|
|
|
- this.initData();
|
|
|
- },
|
|
|
+ sexType() {
|
|
|
+ this.initData();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ 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);
|
|
|
+ }
|
|
|
},
|
|
|
- methods:{
|
|
|
- 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数字输入框
|
|
|
- const i = this.focusOn;
|
|
|
- clearTimeout(this.msgTimer);
|
|
|
- if(i==-1){
|
|
|
- this.$message({
|
|
|
- message: '请先选中要操作的行',
|
|
|
- type: 'warning',
|
|
|
- showClose: true,
|
|
|
- });
|
|
|
- return ;
|
|
|
+ isHasTag(item, arr) {
|
|
|
+ for (let i = 0; i < arr.length; i++) {
|
|
|
+ if (arr[i].id === item.id) {
|
|
|
+ return true;
|
|
|
}
|
|
|
- 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];
|
|
|
+ }
|
|
|
+ return false;
|
|
|
+ },
|
|
|
+ getStyle(item) {
|
|
|
+ //左侧选中状态
|
|
|
+ return this.isHasTag(item, this.selectLeftTagsList);
|
|
|
+ },
|
|
|
+ searchTagList() {
|
|
|
+ let param = {
|
|
|
+ tagName: this.searchVal.trim(),
|
|
|
+ type: this.ascription,
|
|
|
+ notIds: [],
|
|
|
+ notControlType: [], //组合填写单或非诊疗情况模版不能添加图片上传
|
|
|
+ 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;
|
|
|
- },
|
|
|
- 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;
|
|
|
- }
|
|
|
+ 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
|
|
|
});
|
|
|
- },
|
|
|
- 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);
|
|
|
+ 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
|
|
|
+ });
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ if(this.selectLeftTagsList.length==0&&this.rows[i].exclusionCon!=1){
|
|
|
+ this.$message({
|
|
|
+ message: "请选择标签池选项",
|
|
|
+ type: "warning",
|
|
|
+ showClose: true
|
|
|
+ });
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ if (this.rows[i].exclusionCon&&this.rows[i].exclusionCon === 1) {
|
|
|
+ this.rows[i].exclusionCon = 0;
|
|
|
+ this.rows[i].subQuestion = '';
|
|
|
+ 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.$emit('pushValues',this.rows);
|
|
|
- return;
|
|
|
- }
|
|
|
- this.noHolder = this.noHolder.replace(','+i,'');
|
|
|
+ },
|
|
|
+ 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;
|
|
|
}
|
|
|
- const items = this.rows;
|
|
|
- this.$emit('pushValues',items);
|
|
|
- },
|
|
|
- HandleInputName(i, name, isName) {
|
|
|
+ // else{
|
|
|
+ // it.exclusion = 0;
|
|
|
+ // }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ emitValues(i) {
|
|
|
+ if (typeof i === "number") {
|
|
|
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;
|
|
|
- }
|
|
|
+ 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);
|
|
|
|
|
|
- },
|
|
|
- delRow(){
|
|
|
- if(this.focusOn==-1){
|
|
|
- this.$message({
|
|
|
- message: '请先选择要删除的行',
|
|
|
- type: 'warning',
|
|
|
- showClose: true,
|
|
|
- });
|
|
|
+ this.$emit("pushValues", this.rows);
|
|
|
return;
|
|
|
}
|
|
|
- this.$alert('确定要删除该行吗？', '提示', {
|
|
|
- confirmButtonText: '确定',
|
|
|
- type: 'warning'
|
|
|
- }).then(() => {
|
|
|
- this.rows.splice(this.focusOn,1);
|
|
|
+ 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(() => {});
|
|
|
- }
|
|
|
+ })
|
|
|
+ .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)
|
|
|
+}
|
|
|
+</style>
|
zhouna