497 lines
14 KiB
Vue
497 lines
14 KiB
Vue
<template>
|
||
<div>
|
||
<section v-show="!submitSuccessFlag">
|
||
<div style="padding: 5px; text-align: center;margin-top:5px">
|
||
<img :src="logo" style="width: auto; height: 40px" alt="logo" />
|
||
</div>
|
||
<el-form
|
||
ref="form"
|
||
label-position="top"
|
||
:model="form"
|
||
:rules="rules"
|
||
label-width="100px"
|
||
style="padding: 16px"
|
||
>
|
||
<p class="p_title_1 text-span-title" style="margin-top: 0px;" align="center">胜唐体控基础信息问卷表</p>
|
||
<!--<p style="font-size: 15px; margin-bottom: 12px;margin-top: 10px;">请您确保下方姓名、手机号正确</p>-->
|
||
<el-form-item label="1、真实姓名" prop="name" style="margin-top: 2px;">
|
||
<el-input v-model="form.name" placeholder="请输入真实姓名" maxlength="20" />
|
||
</el-form-item>
|
||
<el-form-item label="2、手机号" prop="phone" >
|
||
<el-input v-model="form.phone" type="number" placeholder="请输入手机号" />
|
||
</el-form-item>
|
||
<el-form-item label="3、性别" prop="sex">
|
||
<el-radio-group v-model="form.sex" size="small">
|
||
<el-radio :label="parseInt('0')" border>男</el-radio>
|
||
<el-radio :label="parseInt('1')" border>女</el-radio>
|
||
</el-radio-group>
|
||
</el-form-item>
|
||
<el-form-item label="4、年龄" prop="age" >
|
||
<el-input type="number" v-model="form.age" placeholder="请输入年龄（整数）" autocomplete="off" ></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="5、身高（厘米）" prop="tall" >
|
||
<el-input type="number" v-model="form.tall" placeholder="请输入身高（整数）" autocomplete="off" ></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="6、体重（斤）" prop="weight" >
|
||
<el-input v-model="form.weight" placeholder="请输入体重（可保留一位小数）" autocomplete="off"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="7、职业" prop="occupation">
|
||
<el-input placeholder="请输入职业名称" v-model="form.occupation" maxlength="50"
|
||
></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="8、病史体征(可多选)" prop="physicalSignsIdArray" >
|
||
<el-select v-model="form.physicalSignsIdArray" multiple filterable clearable placeholder="请选择病史体征">
|
||
<!--<el-option
|
||
v-for="physicalSign in physicalSignsList"
|
||
:key="physicalSign.dictValue"
|
||
:label="physicalSign.dictLabel"
|
||
:value="physicalSign.dictValue"
|
||
>
|
||
</el-option>-->
|
||
<el-option-group
|
||
v-for="(group,index) in physicalSignsGroupList"
|
||
:key="index"
|
||
:label="group.label">
|
||
<el-option
|
||
v-for="(item, j) in group.options"
|
||
:key="index+'_'+j"
|
||
:label="item.label"
|
||
:value="item.value">
|
||
</el-option>
|
||
</el-option-group>
|
||
</el-select>
|
||
<div><span class="text-span">其他病史体征</span>
|
||
<el-input type="textarea"
|
||
placeholder="请输入其他病史体征，使用，隔开"
|
||
v-model="form.otherPhysicalSigns"
|
||
maxlength="200"
|
||
show-word-limit
|
||
rows="2"
|
||
></el-input>
|
||
</div>
|
||
</el-form-item>
|
||
<el-form-item label="9、作息时间" >
|
||
<div class="margin-left">
|
||
<span class="text-span">睡觉时间</span>
|
||
<el-input placeholder="请输入睡觉时间" maxlength="20" v-model="form.timeTableArray[0]" style="width:60%;margin-left:10px"/>
|
||
</div>
|
||
<div class="margin-left" style="margin-top:8px;">
|
||
<span class="text-span">起床时间</span>
|
||
<el-input placeholder="请输入起床时间" maxlength="20" v-model="form.timeTableArray[1]" style="width:60%;margin-left:10px"/>
|
||
</div>
|
||
</el-form-item>
|
||
<el-form-item label="10、减脂经历" prop="experience" >
|
||
<el-input
|
||
type="textarea"
|
||
placeholder="请描述下减脂经历"
|
||
v-model="form.experience"
|
||
maxlength="200"
|
||
show-word-limit
|
||
rows="3"
|
||
></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="11、湿气测试（可多选）" prop="moistureDataArray" >
|
||
<el-checkbox-group v-model="form.moistureDataArray" >
|
||
<el-checkbox v-for="moistureItem in moistureDataList" style="width:100%" :label="moistureItem.dictValue" :key="moistureItem.dictValue">{{ moistureItem.dictLabel }}</el-checkbox>
|
||
</el-checkbox-group>
|
||
</el-form-item>
|
||
<el-form-item label="12、气血测试（可多选）" prop="bloodDataArray" >
|
||
<el-checkbox-group v-model="form.bloodDataArray" >
|
||
<el-checkbox v-for="bloodItem in bloodDataList" style="width:100%" :label="bloodItem.dictValue" :key="bloodItem.dictValue">{{ bloodItem.dictLabel }}</el-checkbox>
|
||
</el-checkbox-group>
|
||
</el-form-item>
|
||
<el-form-item style="text-align: center; margin: 0 auto">
|
||
<el-button
|
||
type="primary"
|
||
@click="addCustomerSurvey()"
|
||
style="width:80%"
|
||
:disabled="submitFlag"
|
||
>填写完成，提交问卷</el-button
|
||
>
|
||
</el-form-item>
|
||
</el-form>
|
||
|
||
</section>
|
||
<SimpleSurveyReport ref="simpleSurveyReportRef"></SimpleSurveyReport>
|
||
</div>
|
||
</template>
|
||
<script>
|
||
import {
|
||
getDictData,
|
||
getCustomerSurvey,
|
||
addSimpleCustomerSurvey
|
||
} from "@/api/custom/customerInvestigation";
|
||
const logo = require("@/assets/logo/st_logo.png");
|
||
import SimpleSurveyReport from "@/components/SimpleSurveyReport"
|
||
export default {
|
||
name: "index",
|
||
data() {
|
||
return {
|
||
logo,
|
||
submitFlag: false,
|
||
submitSuccessFlag: false,
|
||
moistureDataList:[],
|
||
bloodDataList:[],
|
||
physicalSignsList:[],
|
||
physicalSignsGroupList:[],
|
||
form:{
|
||
customerKey: null,
|
||
name: "",
|
||
phone: "",
|
||
sex: 1,
|
||
age: null,
|
||
tall: null,
|
||
weight: null,
|
||
physicalSignsIdArray:[],
|
||
physicalSignsId: "",
|
||
otherPhysicalSigns: "",
|
||
timeTableArray:["",""],
|
||
timeTable: "",
|
||
experience: "",
|
||
occupation: "",
|
||
bloodDataArray: [],
|
||
bloodData: "",
|
||
moistureDataArray: [],
|
||
moistureData: "",
|
||
},
|
||
rules: {
|
||
name: [{ required: true, trigger: "blur", message: "请填写姓名" }],
|
||
phone: [
|
||
//{ required: false, trigger: "blur", message: "请选择手机号" },
|
||
{
|
||
required: false,
|
||
trigger: "blur",
|
||
pattern: /^\d{5,11}$/ ,
|
||
message: "手机号格式不正确",
|
||
}
|
||
],
|
||
sex: [{ required: true, trigger: "blur", message: "请选择性别" }],
|
||
age: [
|
||
{ required: true, trigger: "blur", message: "请填写年龄" },
|
||
{
|
||
required: true,
|
||
trigger: "blur",
|
||
pattern: /^[1-9]\d*$/,
|
||
message: "年龄格式不正确",
|
||
},
|
||
],
|
||
tall: [
|
||
{ required: true, trigger: "blur", message: "请填写身高" },
|
||
{
|
||
required: true,
|
||
trigger: "blur",
|
||
pattern: /^[1-9]\d*$/,
|
||
message: "身高格式不正确",
|
||
},
|
||
],
|
||
weight: [
|
||
{ required: true, trigger: "blur", message: "请填写体重" },
|
||
{
|
||
required: true,
|
||
trigger: "blur",
|
||
pattern: /^(\d+)(\.\d{1})?$/,
|
||
message: "体重格式不正确",
|
||
},
|
||
]
|
||
}
|
||
};
|
||
},
|
||
components: {
|
||
SimpleSurveyReport
|
||
},
|
||
methods: {
|
||
addCustomerSurvey(){
|
||
this.submitFlag = true;
|
||
this.form.physicalSignsId = this.form.physicalSignsIdArray.join(",");
|
||
this.form.timeTable = this.form.timeTableArray.join(",");
|
||
this.form.bloodData = this.form.bloodDataArray.join(",");
|
||
this.form.moistureData = this.form.moistureDataArray.join(",");
|
||
this.$refs.form.validate((valid) => {
|
||
if (valid){
|
||
addSimpleCustomerSurvey(this.form).then((response) => {
|
||
if(response.code == 200){
|
||
this.goTop();
|
||
this.submitFlag = true;
|
||
this.form.standardWeight = response.data;
|
||
let self = this;
|
||
this.$notify({
|
||
title: "提交成功，正在生成报告...",
|
||
message: "",
|
||
type: "success",
|
||
duration: "1000",
|
||
onClose: function(){
|
||
self.submitSuccessFlag = true;
|
||
self.$refs.simpleSurveyReportRef.showReportView(self.form, self.moistureDataList, self.bloodDataList, self.physicalSignsList);
|
||
}
|
||
});
|
||
}else{
|
||
this.submitFlag = false;
|
||
}
|
||
});
|
||
}else{
|
||
this.$message({
|
||
message: "数据未填写完整",
|
||
type: "warning",
|
||
});
|
||
this.submitFlag = false;
|
||
}
|
||
})
|
||
},
|
||
goTop() {
|
||
window.scroll(0, 0);
|
||
},
|
||
//获取湿气
|
||
getMoistureDictData() {
|
||
getDictData("moisture_data_extended").then((response) => {
|
||
this.moistureDataList = response.data;
|
||
});
|
||
},
|
||
//获取气血
|
||
getBloodDictData() {
|
||
getDictData("blood_data_extended").then((response) => {
|
||
this.bloodDataList = response.data;
|
||
});
|
||
},
|
||
/** 查询体征列表 */
|
||
getPhysicalSignsList() {
|
||
getDictData("simple_sign_type").then((response) => {
|
||
this.physicalSignsList = response.data;
|
||
this.physicalSignsGroupList = this.dealSignList(response.data);
|
||
});
|
||
},
|
||
dealSignList(signList){
|
||
let result = [];
|
||
if(signList == null || signList.length == 0){
|
||
return result;
|
||
}
|
||
let groupObj = {};
|
||
let groupLabelArray = [];
|
||
signList.forEach(item => {
|
||
if(item.remark != null && item.remark != ""){
|
||
if(groupLabelArray.indexOf(item.remark) == -1){
|
||
groupLabelArray.push(item.remark);
|
||
}
|
||
groupObj[item.remark] = groupObj[item.remark] == undefined ? [] : groupObj[item.remark];
|
||
groupObj[item.remark].push({'value': item.dictValue, 'label': item.dictLabel});
|
||
}
|
||
});
|
||
groupLabelArray.forEach(item => {
|
||
result.push({'label': item, 'options': groupObj[item]});
|
||
})
|
||
return result;
|
||
}
|
||
},
|
||
created() {
|
||
//this.form.customerKey = this.$route.params.customerKey;
|
||
//this.getCustomerSurvey(this.form.customerKey);
|
||
this.getPhysicalSignsList();
|
||
this.getMoistureDictData();
|
||
this.getBloodDictData();
|
||
},
|
||
beforeCreate() {
|
||
document.title = this.$route.meta.title;
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style scoped>
|
||
.el-form-item {
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.p_title_1 {
|
||
font-size: 18px;
|
||
font-weight: bold;
|
||
margin-top: 30px;
|
||
}
|
||
.p_title_2 {
|
||
font-size: 16px;
|
||
font-weight: bold;
|
||
margin-top: 30px;
|
||
}
|
||
.p_title_3 {
|
||
font-size: 14px;
|
||
font-weight: bold;
|
||
margin-top: 30px;
|
||
}
|
||
.margin-left {
|
||
margin-left: 14px;
|
||
}
|
||
.el-input__inner {
|
||
width: 30%;
|
||
}
|
||
.margin-top-10 {
|
||
margin-top: 10px;
|
||
}
|
||
.width-50-left-8-right-5 {
|
||
width: 50%;
|
||
margin-left: 8px;
|
||
margin-right: 5px;
|
||
}
|
||
.width-70-left-8-right-5 {
|
||
width: 70%;
|
||
margin-left: 8px;
|
||
margin-right: 5px;
|
||
}
|
||
.text-span{
|
||
color:#606266;
|
||
font-weight: 700;
|
||
font-size: 14px
|
||
}
|
||
|
||
.text-span-title{
|
||
color:#606266;
|
||
font-weight: 800;
|
||
font-size: 16px
|
||
}
|
||
|
||
.report_div{
|
||
width: 100%;
|
||
padding-top: 25px;
|
||
padding-bottom: 200px;
|
||
background: linear-gradient(30deg, #4B8AFF, #329FFE);
|
||
}
|
||
|
||
.report_title_div{
|
||
padding: 25px 15px;
|
||
width: 90%;
|
||
margin:0 auto;
|
||
background: #FFFFFF;
|
||
box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
|
||
border-radius: 20px;
|
||
}
|
||
|
||
.report_title{
|
||
margin:0 auto;
|
||
text-align: center;
|
||
font-size: 20px;
|
||
font-family: Source Han Sans CN;
|
||
font-weight: 500;
|
||
color: #4B8AFF;
|
||
}
|
||
|
||
|
||
.report_weight{
|
||
margin-top: 25px;
|
||
border-top:2px solid #F1F1F1;
|
||
border-bottom:2px solid #F1F1F1;
|
||
padding: 0px 5%
|
||
}
|
||
|
||
.weight_name{
|
||
font-size: 18px;
|
||
font-family: Source Han Sans CN;
|
||
font-weight: 500;
|
||
color: #4B8AFF;
|
||
line-height: 50px;
|
||
margin-right:5px;
|
||
}
|
||
|
||
.weight_value{
|
||
font-size: 18px;
|
||
font-family: Source Han Sans CN;
|
||
font-weight: 400;
|
||
color: #333333;
|
||
line-height: 50px;
|
||
}
|
||
|
||
.sign_div_title{
|
||
font-size: 18px;
|
||
font-family: Source Han Sans CN;
|
||
font-weight: 500;
|
||
color: #4B8AFF;
|
||
line-height: 40px;
|
||
margin-top:10px;
|
||
}
|
||
|
||
.sign_div_title_small{
|
||
font-size: 15px;
|
||
font-family: Source Han Sans CN;
|
||
font-weight: 400;
|
||
color: #999999;
|
||
line-height: 20px;
|
||
}
|
||
|
||
.sign_type{
|
||
margin-top:10px;
|
||
padding-bottom:20px;
|
||
border-bottom:2px solid #F1F1F1;
|
||
}
|
||
|
||
.sign_type_div{
|
||
height: 30px;
|
||
background: #F1F1F1;
|
||
border-radius: 24px;
|
||
text-align: center;
|
||
margin:10px 5px;
|
||
padding: 0px 12px;
|
||
width:auto;
|
||
display:inline-block !important;
|
||
display:inline;
|
||
}
|
||
|
||
.sign_type_div_value{
|
||
font-size: 15px;
|
||
font-family: Source Han Sans CN;
|
||
font-weight: 400;
|
||
color: #333333;
|
||
line-height: 30px;
|
||
}
|
||
|
||
.blood_moisture{
|
||
margin-top: 20px;
|
||
}
|
||
|
||
.blood_moisture_title{
|
||
float: left;
|
||
font-size: 16px;
|
||
font-family: Source Han Sans CN;
|
||
font-weight: 500;
|
||
color: #4B8AFF;
|
||
line-height: 30px;
|
||
}
|
||
|
||
.blood_moisture_value{
|
||
margin-left:10px;
|
||
float: left;
|
||
width: 220px;
|
||
height:30px;
|
||
border-radius: 20px;
|
||
}
|
||
|
||
.clear{ clear:both}
|
||
|
||
.light{
|
||
background: #20d866;
|
||
}
|
||
|
||
.moderate{
|
||
background: #f0a70b;
|
||
}
|
||
|
||
.severe{
|
||
background: #e94545;
|
||
}
|
||
|
||
body{
|
||
width: 100%;
|
||
|
||
height: 100%;
|
||
|
||
background-color: #20d866;
|
||
|
||
}
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
</style>
|