|
@@ -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;
|