You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
431 lines
18 KiB
431 lines
18 KiB
<template>
|
|
<div class="flex-column">
|
|
病例分析
|
|
<a-form :form="form">
|
|
<!-- 首先遍历整个data大数组 -->
|
|
<div v-for="(item, index) in list" :key="index">
|
|
<a-form-item :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol">
|
|
<!-- 一级大标题 -->
|
|
<h2>{{ item.name }}：</h2>
|
|
</a-form-item>
|
|
<!-- 一级标题下的各种问题（questionVos），判断类型1-12，展示不同需要填写的内容 -->
|
|
<div v-for="a in item.questionVos" :key="a.name">
|
|
<a-form-item :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol" :label="a.question">
|
|
<a-input v-if="a.type === 1" @change="onChange($event, a.type, a.id)" />
|
|
<a-textarea v-else-if="a.type === 2" style="height: 100px" @change="onChange($event, a.type, a.id)" />
|
|
<a-radio-group v-else-if="a.type === 3" v-model="value" @change="onChange($event, a.type, a.id)">
|
|
<a-radio :style="radioStyle" value="高血压"> 没有单选题 </a-radio>
|
|
<a-radio :style="radioStyle" value="高血脂"> 没有单选题 </a-radio>
|
|
<a-radio :style="radioStyle" value="高血糖"> 没有单选题 </a-radio>
|
|
</a-radio-group>
|
|
<a-checkbox-group v-else-if="a.type === 4" @change="onChange($event, a.type, a.id)">
|
|
<a-row>
|
|
<a-col :span="8">
|
|
<a-checkbox value="A"> A </a-checkbox>
|
|
</a-col>
|
|
<a-col :span="8">
|
|
<a-checkbox value="B"> B </a-checkbox>
|
|
</a-col>
|
|
<a-col :span="8">
|
|
<a-checkbox value="C"> C </a-checkbox>
|
|
</a-col>
|
|
</a-row>
|
|
</a-checkbox-group>
|
|
<a-select v-else-if="a.type === 5" default-value="lucy" style="width: 120px" loading @change="onChange($event, a.type, a.id)">
|
|
<a-select-option value="1"> Lucy1 </a-select-option>
|
|
<a-select-option value="2"> Lucy2 </a-select-option>
|
|
<a-select-option value="3"> Lucy3 </a-select-option>
|
|
<a-select-option value="4"> Lucy4 </a-select-option>
|
|
</a-select>
|
|
<a-date-picker show-time placeholder="日期时间选择" v-else-if="a.type === 6" @change="onChange($event, a.type, a.id)" />
|
|
<a-upload v-else-if="a.type === 7">
|
|
<img v-if="imageUrl" :src="imageUrl" alt="avatar" />
|
|
<div v-else>
|
|
<a-icon :type="loading ? 'loading' : 'plus'" />
|
|
<div class="ant-upload-text">Upload</div>
|
|
</div>
|
|
</a-upload>
|
|
<a-radio-group v-else-if="a.type === 8" v-model="value" @change="onChange($event, a.type, a.id)">
|
|
<a-radio :style="radioStyle" value="高血压"> 高血压 </a-radio>
|
|
<a-radio :style="radioStyle" value="高血脂"> 高血脂 </a-radio>
|
|
<a-radio :style="radioStyle" value="高血糖"> 高血糖 </a-radio>
|
|
<!-- <a-radio :style="radioStyle" :value="4">
|
|
其它
|
|
<a-input v-if="value === 4" :style="{ width: 100, marginLeft: 10 }" />
|
|
</a-radio> -->
|
|
</a-radio-group>
|
|
<a-checkbox-group v-else-if="a.type === 9" @change="onChange($event, a.type, a.id)">
|
|
<a-row>
|
|
<a-col :span="24" v-for="(ques, indexNum) in a.optionVos" :key="indexNum">
|
|
<a-checkbox :value="ques.submitValue"> {{ ques.showValue }} </a-checkbox>
|
|
</a-col>
|
|
<a-col :span="100">
|
|
<a-input
|
|
v-if="
|
|
contentList.find(item => {
|
|
return (
|
|
item.testQuestionsId === a.id &&
|
|
item.contents.find(a => {
|
|
return a === '其他';
|
|
})
|
|
);
|
|
})
|
|
"
|
|
:style="{ width: 100, marginLeft: 10 }"
|
|
/>
|
|
</a-col>
|
|
</a-row>
|
|
</a-checkbox-group>
|
|
<div v-else-if="a.type === 10">
|
|
<a-select default-value="lucy" style="width: 120px" loading>
|
|
<a-select-option value="1"> 1 </a-select-option>
|
|
<a-select-option value="2"> 2 </a-select-option>
|
|
</a-select>
|
|
<a-input v-if="value === 2"></a-input>
|
|
</div>
|
|
<div v-else-if="a.type === 11">
|
|
<a-checkbox-group @change="onChange($event, a.type, a.id)">
|
|
<a-row>
|
|
<a-col :span="24" v-for="(ques, indexNum) in a.optionVos" :key="indexNum">
|
|
<a-checkbox :value="ques.submitValue"> {{ ques.showValue }} </a-checkbox>
|
|
</a-col>
|
|
<a-col :span="100">
|
|
<a-input
|
|
v-if="
|
|
contentList.find(item => {
|
|
return (
|
|
item.testQuestionsId === a.id &&
|
|
item.contents.find(a => {
|
|
return a === '其他';
|
|
})
|
|
);
|
|
})
|
|
"
|
|
:style="{ width: 100, marginLeft: 10 }"
|
|
/>
|
|
</a-col>
|
|
</a-row>
|
|
说明： <a-input :style="{ width: 100, marginLeft: 10 }" />
|
|
</a-checkbox-group>
|
|
</div>
|
|
<!-- 当类型为12时，为单选+关联 -->
|
|
<div v-else-if="a.type === 12">
|
|
<a-radio-group @change="onChange($event, a.type, a.id)">
|
|
<a-radio :style="radioStyle" :value="1"> 高血压 </a-radio>
|
|
<a-radio :style="radioStyle" :value="2"> 高血脂 </a-radio>
|
|
<a-radio :style="radioStyle" :value="3"> 高血糖 </a-radio>
|
|
<a-radio :style="radioStyle" :value="4">
|
|
其它
|
|
<a-input v-if="value === 4" :style="{ width: 100, marginLeft: 10 }" />
|
|
</a-radio>
|
|
</a-radio-group>
|
|
</div>
|
|
<div v-else-if="a.type === 13">
|
|
<a-input-number @change="onChange($event, a.type, a.id)" />
|
|
</div>
|
|
<div v-else-if="a.type === 14">图片识别</div>
|
|
</a-form-item>
|
|
</div>
|
|
<!-- 一级标题下的各种二级标题（subReportCodes） -->
|
|
<div v-for="c in item.subReportCodes" :key="c.name">
|
|
<a-form-item :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol">
|
|
<!-- 二级大标题 -->
|
|
<h3>{{ c.name }}：</h3>
|
|
</a-form-item>
|
|
<!-- 二级标题下的各种类型 -->
|
|
<div v-for="e in c.questionVos" :key="e.name">
|
|
<a-form-item :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol" :label="e.question">
|
|
<a-input v-if="e.type === 1" @change="onChange($event, e.type, e.id)" />
|
|
<a-textarea v-else-if="e.type === 2" style="height: 100px" @change="onChange($event, e.type, e.id)" />
|
|
<a-radio-group v-else-if="e.type === 3" v-model="value" @change="onChange($event, e.type, e.id)">
|
|
<a-radio :style="radioStyle" value="高血压"> 没有单选题 </a-radio>
|
|
<a-radio :style="radioStyle" value="高血脂"> 没有单选题 </a-radio>
|
|
<a-radio :style="radioStyle" value="高血糖"> 没有单选题 </a-radio>
|
|
</a-radio-group>
|
|
<a-checkbox-group v-else-if="e.type === 4" @change="onChange($event, e.type, e.id)">
|
|
<a-row>
|
|
<a-col :span="8">
|
|
<a-checkbox value="A"> A </a-checkbox>
|
|
</a-col>
|
|
<a-col :span="8">
|
|
<a-checkbox value="B"> B </a-checkbox>
|
|
</a-col>
|
|
<a-col :span="8">
|
|
<a-checkbox value="C"> C </a-checkbox>
|
|
</a-col>
|
|
</a-row>
|
|
</a-checkbox-group>
|
|
<a-select v-else-if="e.type === 5" default-value="lucy" style="width: 120px" loading @change="onChange($event, e.type, e.id)">
|
|
<a-select-option value="1"> Lucy1 </a-select-option>
|
|
<a-select-option value="2"> Lucy2 </a-select-option>
|
|
<a-select-option value="3"> Lucy3 </a-select-option>
|
|
<a-select-option value="4"> Lucy4 </a-select-option>
|
|
</a-select>
|
|
<a-date-picker show-time placeholder="日期时间选择" v-else-if="e.type === 6" @change="onChange($event, e.type, e.id)" />
|
|
<a-upload v-else-if="e.type === 7">
|
|
<img v-if="imageUrl" :src="imageUrl" alt="avatar" />
|
|
<div v-else>
|
|
<a-icon :type="loading ? 'loading' : 'plus'" />
|
|
<div class="ant-upload-text">Upload</div>
|
|
</div>
|
|
</a-upload>
|
|
<a-radio-group v-else-if="e.type === 8" v-model="value" @change="onChange($event, e.type, e.id)">
|
|
<a-radio :style="radioStyle" value="高血压"> 高血压 </a-radio>
|
|
<a-radio :style="radioStyle" value="高血脂"> 高血脂 </a-radio>
|
|
<a-radio :style="radioStyle" value="高血糖"> 高血糖 </a-radio>
|
|
<!-- <a-radio :style="radioStyle" :value="4">
|
|
其它
|
|
<a-input v-if="value === 4" :style="{ width: 100, marginLeft: 10 }" />
|
|
</a-radio> -->
|
|
</a-radio-group>
|
|
<a-checkbox-group v-else-if="e.type === 9" @change="onChange($event, e.type, e.id)">
|
|
<a-row>
|
|
<a-col :span="12" v-for="(ques, indexNum) in e.optionVos" :key="indexNum">
|
|
<a-checkbox :value="ques.submitValue"> {{ ques.showValue }} </a-checkbox>
|
|
</a-col>
|
|
{{ e.id }}
|
|
<a-col :span="100">
|
|
<a-input
|
|
v-if="
|
|
contentList.find(item => {
|
|
return (
|
|
item.testQuestionsId === e.id &&
|
|
item.contents.find(a => {
|
|
return a === '其他';
|
|
})
|
|
);
|
|
})
|
|
"
|
|
:style="{ width: 100, marginLeft: 10 }"
|
|
/>
|
|
</a-col>
|
|
</a-row>
|
|
</a-checkbox-group>
|
|
<div v-else-if="e.type === 10">
|
|
<a-select default-value="lucy" style="width: 120px" loading>
|
|
<a-select-option value="1"> 1 </a-select-option>
|
|
<a-select-option value="2"> 2 </a-select-option>
|
|
</a-select>
|
|
<a-input v-if="value === 2"></a-input>
|
|
</div>
|
|
<div v-else-if="e.type === 11">
|
|
<a-checkbox-group @change="onChange($event, e.type, e.id)">
|
|
<a-row>
|
|
<a-col :span="12">
|
|
<a-checkbox value="A"> A </a-checkbox>
|
|
</a-col>
|
|
<a-col :span="12">
|
|
<a-checkbox value="B"> B </a-checkbox>
|
|
</a-col>
|
|
<a-col :span="12">
|
|
<a-checkbox value="C"> 其他 </a-checkbox>
|
|
</a-col>
|
|
</a-row>
|
|
<a-input v-if="value === 4" :style="{ width: 100, marginLeft: 10 }" />
|
|
说明： <a-input :style="{ width: 100, marginLeft: 10 }" />
|
|
</a-checkbox-group>
|
|
</div>
|
|
<!-- 当类型为12时，为单选+关联 -->
|
|
<div v-else-if="e.type === 12">
|
|
<a-radio-group @change="onChange($event, e.type, e.id)">
|
|
<a-radio :style="radioStyle" :value="1"> 高血压 </a-radio>
|
|
<a-radio :style="radioStyle" :value="2"> 高血脂 </a-radio>
|
|
<a-radio :style="radioStyle" :value="3"> 高血糖 </a-radio>
|
|
<a-radio :style="radioStyle" :value="4">
|
|
其它
|
|
<a-input v-if="value === 4" :style="{ width: 100, marginLeft: 10 }" />
|
|
</a-radio>
|
|
</a-radio-group>
|
|
</div>
|
|
<div v-else-if="e.type === 13">
|
|
<a-input-number @change="onChange($event, e.type, e.id)" />
|
|
</div>
|
|
<div v-else-if="e.type === 14">图片识别</div>
|
|
</a-form-item>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- <a-form-item class="d-flex flex-row-reverse">
|
|
<a-button class="white--text px-10" html-type="submit" type="primary">提交</a-button>
|
|
</a-form-item> -->
|
|
</a-form>
|
|
<a-button class="white--text px-10" type="primary" @click="setData()">提交</a-button>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { selSearchCriteriaList, saveCaseMes } from 'config/api';
|
|
const formItemLayout = {
|
|
labelCol: { span: 6 },
|
|
wrapperCol: { span: 9 },
|
|
};
|
|
const tailItemLayout = { wrapperCol: { span: 18, offset: 4 } };
|
|
export default {
|
|
name: 'CaseAnalysis',
|
|
data() {
|
|
return {
|
|
formItemLayout,
|
|
tailItemLayout,
|
|
form: this.$form.createForm(this, { name: 'page-add' }),
|
|
value: 1,
|
|
radioStyle: {
|
|
display: 'block',
|
|
height: '30px',
|
|
lineHeight: '30px',
|
|
},
|
|
list: [],
|
|
contentList: [],
|
|
numList: [1, 2, 3, 4, 5],
|
|
};
|
|
},
|
|
|
|
created() {
|
|
this.handleSearchCriteriaList();
|
|
},
|
|
|
|
methods: {
|
|
async handleSearchCriteriaList() {
|
|
try {
|
|
const params = {};
|
|
const res = await selSearchCriteriaList(params);
|
|
const { code, msg, data } = res.data;
|
|
if (code === 200) {
|
|
// console.log('data: ', data);
|
|
this.list = data;
|
|
} else {
|
|
this.$message.error(msg || '查询失败');
|
|
throw msg;
|
|
}
|
|
} catch (error) {
|
|
throw new Error(`CaseSearch.vue method selSearchCriteriaList: ${error}`);
|
|
}
|
|
},
|
|
onChange(e, type, id) {
|
|
// 监听所有得题目类型得填写情况（改变事件）
|
|
if (this.contentList.find(item => item.testQuestionsId === id)) {
|
|
if (type === 1) {
|
|
// 单行文本框
|
|
this.forFn(id, e.target.value);
|
|
} else if (type === 2) {
|
|
// 多行文本框
|
|
this.forFn(id, e.target.value);
|
|
} else if (type === 3) {
|
|
// 单选
|
|
this.forFn(id, e.target.value);
|
|
} else if (type === 4) {
|
|
// 多选
|
|
alert('多选，没有这类的题，先参考多选+其他类型的题，那个有');
|
|
// this.forFn(id, e);
|
|
} else if (type === 5) {
|
|
// 下拉框
|
|
this.forFn(id, e);
|
|
} else if (type === 6) {
|
|
// 日期时间选择器，给后台返回的值是 2020-01-01 00:00:00 的格式
|
|
// console.log(this.$moment(e._d).format('YYYY-MM-DD HH:mm:ss'));
|
|
this.forFn(id, this.$moment(e._d).format('YYYY-MM-DD HH:mm:ss'));
|
|
} else if (type === 7) {
|
|
alert('上传文件，先控下');
|
|
} else if (type === 8) {
|
|
// 单选 + 其他
|
|
console.log(e.target.value);
|
|
// alert('暂时没有单选 + 其他类型的题，等导入题型之后再改');
|
|
} else if (type === 9) {
|
|
this.forFn(id, e);
|
|
// 多选 + 其他
|
|
} else if (type === 10) {
|
|
// 下拉 + 其他
|
|
} else if (type === 11) {
|
|
// 多选 + 其他 + 说明
|
|
this.forFn(id, e);
|
|
} else if (type === 12) {
|
|
// 单选 + 关联其他内容
|
|
} else if (type === 13) {
|
|
// 数字类型
|
|
} else if (type === 14) {
|
|
// 图片识别
|
|
}
|
|
} else {
|
|
if (type === 1) {
|
|
// 单行文本框
|
|
this.failFn(id, e.target.value);
|
|
} else if (type === 2) {
|
|
// 多行文本框
|
|
this.failFn(id, e.target.value);
|
|
} else if (type === 3) {
|
|
// 单选
|
|
this.failFn(id, e.target.value);
|
|
} else if (type === 4) {
|
|
// 多选
|
|
alert('多选，没有这类的题，先参考多选+其他类型的题，那个有');
|
|
} else if (type === 5) {
|
|
// 下拉框
|
|
this.failFn(id, e);
|
|
} else if (type === 6) {
|
|
// 日期时间选择器，给后台返回的值是 2020-01-01 00:00:00 的格式
|
|
// console.log(this.$moment(e._d).format('YYYY-MM-DD HH:mm:ss'));
|
|
this.failFn(id, this.$moment(e._d).format('YYYY-MM-DD HH:mm:ss'));
|
|
} else if (type === 7) {
|
|
alert('上传文件，先控下');
|
|
} else if (type === 8) {
|
|
// 单选 + 其他
|
|
console.log(e.target.value);
|
|
// alert('暂时没有单选 + 其他类型的题，等导入题型之后再改');
|
|
} else if (type === 9) {
|
|
this.failFn(id, e);
|
|
// 多选 + 其他
|
|
} else if (type === 10) {
|
|
// 下拉 + 其他
|
|
} else if (type === 11) {
|
|
this.failFn(id, e);
|
|
}
|
|
}
|
|
},
|
|
// for循环封装函数
|
|
forFn(id, value) {
|
|
const { contentList } = this;
|
|
console.log(value);
|
|
for (let i = 0; i < contentList.length; i++) {
|
|
if (contentList[i].testQuestionsId === id) {
|
|
contentList[i].contents = value;
|
|
break;
|
|
}
|
|
}
|
|
this.contentList = [...contentList];
|
|
console.log(this.contentList);
|
|
},
|
|
// 第一次填写题目答案得时候（在已经填写好的题目答案数组中没有找到当前所填得题）
|
|
failFn(id, value) {
|
|
// console.log(id, value);
|
|
let obj = {
|
|
testQuestionsId: id,
|
|
contents: value,
|
|
};
|
|
this.contentList.push(obj);
|
|
console.log(this.contentList);
|
|
},
|
|
// 提交表单
|
|
async setData() {
|
|
try {
|
|
const params = {
|
|
param: {
|
|
list: this.contentList,
|
|
patientId: 1,
|
|
timeSlot: 123,
|
|
},
|
|
};
|
|
const res = await saveCaseMes(params);
|
|
const { code, msg, data } = res.data;
|
|
if (code === 200) {
|
|
console.log(data);
|
|
} else {
|
|
console.log(msg);
|
|
}
|
|
} catch (error) {
|
|
this.$message.error('error');
|
|
}
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="stylus" scoped></style>
|
|
|