data2/vue-nutritional-management.git

			@@ -1,94 +1,451 @@
			<template>
			<div class="dietarySurvey-item">

			<table id="tabledome" class="gridtable">
			<tr>
			<th colspan="4">膳食调查表</th>
			<th>初次调查日期</th>
			<th></th>
			</tr>
			<tr>
			<th colspan="4"></th>
			<th>更新日期</th>
			<th></th>
			</tr>
			<tr>
			<th colspan="4"></th>
			<th>记录者</th>
			<th></th>
			</tr>
			<tr>
			<td>
			1.人员构成
			</td>
			<td>
			<label>
			<input type="radio" id="option1" name="group1" value="独居">
			独居
			</label>
			<el-form size="small">
			<div class="tabItem">
			<table id="tabledome" class="gridtable">
			<tr>
			<th colspan="6">
			<el-row>
			<el-col :span="18">
			膳食调查表
			</el-col>
			<el-col :span="6" style="text-align: right;padding-right: 20px">
			<div><el-icon @click="openShow('chakan')"><FullScreen /></el-icon></div>
			</el-col>
			</el-row>
			</th>
			</tr>
			<tr>
			<th colspan="2">初次调查日期</th>
			<th colspan="2">更新日期</th>
			<th colspan="2">记录者</th>

			</tr>

			<tr>
			<td>
			1.人员构成
			</td>
			<td colspan="3">
			<el-form-item>
			<el-radio-group class="elradiozdi" v-model="state.tableData.人员构成.type">
			<el-radio value="A">A:独居</el-radio>
			<el-radio value="B">B:家族</el-radio>
			</el-radio-group>
			</el-form-item>

			</td>
			<td colspan="2">
			{{state.tableData.人员构成.input1}}
			</td>

			</tr>
			<tr>
			<td>
			2.烹饪主要操作者
			</td>
			<td colspan="3">
			<el-form-item>
			<el-radio-group class="elradiozdi" v-model="state.tableData.烹饪主要操作者.type">
			<el-radio value="A">A:自己</el-radio>
			<el-radio value="B">B:配偶</el-radio>
			<el-radio value="C">C:其他</el-radio>
			</el-radio-group>
			</el-form-item>

			</td>

			</td>
			<td>
			(<input type="text" class="input-underline width50"/>)人
			</td>
			<td>
			家族
			</td>
			<td colspan="2">
			(<input type="text" style="width: 50px;" class="input-underline"/>)人
			</td>

			</tr>
			<tr>
			<td>
			2.烹饪主要操作者
			</td>
			<td>
			<label>
			<input type="radio" id="option1" name="group2" value="本人">
			本人
			</label>
			<td colspan="2">
			<el-form-item>
			<el-input v-model="state.tableData.烹饪主要操作者.input1" placeholder="备注" />
			</el-form-item>
			</td>

			</tr>
			<tr>
			<td>
			3.食材采购
			</td>
			<td colspan="3">
			<el-form-item>
			<el-radio-group class="elradiozdi" v-model="state.tableData.食材采购.type">
			<el-radio value="A">A:外采</el-radio>
			<el-radio value="B">B:家种</el-radio>
			<el-radio value="C">C:其他</el-radio>
			</el-radio-group>
			</el-form-item>

			</td>
			<td colspan="2">
			<el-form-item>
			<el-input v-model="state.tableData.食材采购.input1" placeholder="备注" />
			</el-form-item>
			</td>
			</tr>
			<tr>
			<td>
			3.食物偏好
			</td>
			<td colspan="3">
			<el-form-item>
			<el-radio-group class="elradiozdi" v-model="state.tableData.食物偏好.type">
			<el-radio value="A">A:有</el-radio>
			<el-radio value="B">B:无</el-radio>
			</el-radio-group>
			</el-form-item>

			</td>
			<td colspan="2">
			<el-form-item>
			<el-input v-model="state.tableData.食物偏好.input1" placeholder="备注" />
			</el-form-item>
			</td>
			</tr>
			<tr>
			<td class="6">
			5.三天饮食记录表(食材、份量)
			</td>
			</tr>
			<tr>
			<td>
			(非)透析日时间
			</td>
			<td>早餐</td>
			<td>加餐</td>
			<td>午餐</td>
			<td>加餐</td>
			<td>晚餐</td>
			</tr>
			<tr>
			<td>
			{{state.tableData.三天饮食记录表.透析日1.日期}}
			</td>
			<td>
			{{state.tableData.三天饮食记录表.透析日1.早餐}}
			</td>
			<td>
			{{state.tableData.三天饮食记录表.透析日1.加餐1}}
			</td>
			<td>
			{{state.tableData.三天饮食记录表.透析日1.午餐}}
			</td>
			<td>
			{{state.tableData.三天饮食记录表.透析日1.加餐2}}
			</td>
			<td><el-form-item>
			<el-input v-model="state.tableData.三天饮食记录表.透析日1.晚餐" placeholder="" />
			</el-form-item>
			</td>
			</tr>
			<tr>
			<td>
			<el-form-item label="非透析日">
			<el-date-picker
			v-model="state.tableData.三天饮食记录表.非透析日.日期"
			type="date"
			placeholder=""
			format="YYYY/MM/DD"
			value-format="YYYY-MM-DD"
			/>
			</el-form-item>
			</td>
			<td>
			<el-form-item>
			<el-input v-model="state.tableData.三天饮食记录表.非透析日.早餐" placeholder="" />
			</el-form-item>
			</td>
			<td>
			<el-form-item>
			<el-input v-model="state.tableData.三天饮食记录表.非透析日.加餐1" placeholder="" />
			</el-form-item>
			</td>
			<td>
			<el-form-item>
			<el-input v-model="state.tableData.三天饮食记录表.非透析日.午餐" placeholder="" />
			</el-form-item>
			</td>
			<td>
			<el-form-item>
			<el-input v-model="state.tableData.三天饮食记录表.非透析日.加餐2" placeholder="" />
			</el-form-item>
			</td>
			<td><el-form-item>
			<el-input v-model="state.tableData.三天饮食记录表.非透析日.晚餐" placeholder="" />
			</el-form-item>
			</td>
			</tr>
			<tr>
			<td>
			<el-form-item label="透析日二">
			<el-date-picker
			v-model="state.tableData.三天饮食记录表.透析日2.日期"
			type="date"
			placeholder=""
			format="YYYY/MM/DD"
			value-format="YYYY-MM-DD"
			/>
			</el-form-item>
			</td>
			<td>
			<el-form-item>
			<el-input v-model="state.tableData.三天饮食记录表.透析日2.早餐" placeholder="" />
			</el-form-item>
			</td>
			<td>
			<el-form-item>
			<el-input v-model="state.tableData.三天饮食记录表.透析日2.加餐1" placeholder="" />
			</el-form-item>
			</td>
			<td>
			<el-form-item>
			<el-input v-model="state.tableData.三天饮食记录表.透析日2.午餐" placeholder="" />
			</el-form-item>
			</td>
			<td>
			<el-form-item>
			<el-input v-model="state.tableData.三天饮食记录表.透析日2.加餐2" placeholder="" />
			</el-form-item>
			</td>
			<td><el-form-item>
			<el-input v-model="state.tableData.三天饮食记录表.透析日2.晚餐" placeholder="" />
			</el-form-item>
			</td>
			</tr>
			<tr>
			<td>
			6.外吃
			</td>
			<td colspan="3">
			<el-form-item>
			<el-radio-group class="elradiozdi" v-model="state.tableData.外吃.type">
			<el-radio value="A">A:有</el-radio>
			<el-radio value="B">B:无</el-radio>
			</el-radio-group>
			</el-form-item>

			</td>
			<td colspan="2">
			<el-form-item>
			<el-input v-model="state.tableData.外吃.input1" placeholder="备注" />
			</el-form-item>
			</td>
			</tr>
			<tr>
			<td>
			7.日常调味料使用种类
			</td>
			<td colspan="3">
			<el-form-item>
			<el-radio-group class="elradiozdi" v-model="state.tableData.日常调味料使用种类.type">
			<el-checkbox value="味精">A:味精</el-checkbox>
			<el-checkbox value="鸡精">B:鸡精</el-checkbox>
			<el-checkbox value="蚝油">C:蚝油</el-checkbox>
			<el-checkbox value="食用盐">D:食用盐</el-checkbox>
			</el-radio-group>
			</el-form-item>

			</td>
			<td colspan="2">
			<el-form-item>
			<el-input v-model="state.tableData.日常调味料使用种类.input1" placeholder="备注" />
			</el-form-item>
			</td>
			</tr>
			<tr>
			<td>
			8.每日饮水量、种类
			</td>
			<td colspan="2">
			<el-form-item>
			<el-input v-model="state.tableData.每日饮水量种类.input1" placeholder="" />
			</el-form-item>

			</td>
			<td>
			9.睡眠
			</td>
			<td colspan="2">
			<el-form-item>
			<el-input v-model="state.tableData.睡眠.input1" placeholder="备注" />
			</el-form-item>
			</td>

			</td>
			<td>
			<label>
			<input type="radio" id="option1" name="group2" value="配偶">
			配偶
			</label>
			</tr>
			<tr>
			<td>
			10.运动
			</td>
			<td colspan="2">
			<el-form-item>
			<el-input v-model="state.tableData.运动.input1" placeholder="备注" />
			</el-form-item>
			</td>
			<td>
			11.排便情况
			</td>
			<td colspan="2">
			<el-form-item>
			<el-input v-model="state.tableData.排便情况.input1" placeholder="备注" />
			</el-form-item>
			</td>

			</td>
			<td>
			<label>
			<input type="radio" id="option1" name="group2" value="其他">
			其他
			</label>
			</tr>
			<tr>
			<td>
			12.是否吸烟?
			</td>
			<td colspan="2">
			<el-form-item>
			<el-input v-model="state.tableData.是否吸烟.input1" placeholder="备注" />
			</el-form-item>
			</td>
			<td>
			13.是否饮酒?
			</td>
			<td colspan="2">
			<el-form-item>
			<el-input v-model="state.tableData.是否饮酒.input1" placeholder="备注" />
			</el-form-item>
			</td>
			</tr>
			<tr>
			<th colspan="6">
			食物过敏调查表
			</th>
			</tr>
			<tr>
			<td>
			易过敏体质
			</td>
			<td colspan="3">
			<el-form-item>
			<el-radio-group class="elradiozdi" v-model="state.tableData.易过敏体质.type">
			<el-radio value="A">A:否</el-radio>
			<el-radio value="B">B:是</el-radio>
			</el-radio-group>
			</el-form-item>

			</td>
			<td colspan="2">
			<el-form-item>
			<el-input v-model="state.tableData.易过敏体质.input1" placeholder="备注" />
			</el-form-item>
			</td>
			</tr>
			<tr>
			<td>
			胃肠道紊乱者
			</td>
			<td colspan="3">
			<el-form-item>
			<el-radio-group class="elradiozdi" v-model="state.tableData.胃肠道紊乱者.type">
			<el-radio value="A">A:否</el-radio>
			<el-radio value="B">B:是</el-radio>
			</el-radio-group>
			</el-form-item>

			</td>
			<td colspan="2">
			<el-form-item>
			<el-input v-model="state.tableData.胃肠道紊乱者.input1" placeholder="备注" />
			</el-form-item>
			</td>
			</tr>
			<tr>
			<td>
			过敏食物
			</td>
			<td colspan="3">
			<el-form-item>
			<el-radio-group class="elradiozdi" v-model="state.tableData.过敏食物.type">
			<el-radio value="A">A:否</el-radio>
			<el-radio value="B">B:是</el-radio>
			</el-radio-group>
			</el-form-item>

			</td>
			<td colspan="2">
			<el-form-item>
			<el-input v-model="state.tableData.过敏食物.input1" placeholder="备注" />
			</el-form-item>
			</td>
			</tr>
			<tr>
			<td>
			宗教信仰
			</td>
			<td colspan="3">
			<el-form-item>
			<el-radio-group class="elradiozdi" v-model="state.tableData.宗教信仰.type">
			<el-radio value="A">A:否</el-radio>
			<el-radio value="B">B:是</el-radio>
			</el-radio-group>
			</el-form-item>

			</td>
			<td colspan="2">
			<el-form-item>
			<el-input v-model="state.tableData.宗教信仰.input1" placeholder="备注" />
			</el-form-item>
			</td>
			</tr>
			<tr>
			<td>
			过敏症状表现为以下哪些
			</td>
			<td colspan="3">
			<el-form-item>
			<el-radio-group class="elradiozdi" v-model="state.tableData.过敏症状表现为以下哪些.type">
			<el-radio value="A">A:否</el-radio>
			<el-radio value="B">B:是</el-radio>
			</el-radio-group>
			</el-form-item>

			</td>
			<td colspan="2">
			<el-form-item>
			<el-input v-model="state.tableData.过敏症状表现为以下哪些.input1" placeholder="备注" />
			</el-form-item>
			</td>
			</tr>
			<tr>
			<td>
			您是如何知道自己食物过敏
			</td>
			<td colspan="3">
			<el-form-item>
			<el-radio-group class="elradiozdi" v-model="state.tableData.您是如何知道自己食物过敏.type">
			<el-radio value="A">A:否</el-radio>
			<el-radio value="B">B:是</el-radio>
			</el-radio-group>
			</el-form-item>

			</td>
			<td colspan="2">
			<el-form-item>
			<el-input v-model="state.tableData.您是如何知道自己食物过敏.input1" placeholder="备注" />
			</el-form-item>
			</td>
			</tr>
			<tr>
			<td>
			备注
			</td>

			<td colspan="5">
			<el-form-item>
			<el-input v-model="state.tableData.备注.input1" placeholder="备注" />
			</el-form-item>
			</td>
			</tr>

			</td>
			<td colspan="2">
			<input type="text" class="input-underline"/>
			</td>

			</tr>
			<tr>
			<td>
			3.食材采购
			</td>
			<td>
			外采
			</td>
			<td>
			家种
			</td>
			<td>

			</td>
			<td colspan="2">


			</td>

			</tr>
			</table>
			<el-button @click="save">保存</el-button>
			</table>
			</div>
			</el-form>
			<!-- <el-button @click="save">保存</el-button> -->
			</div>

			</template>
			@@ -99,38 +456,63 @@
			const props = defineProps(['tableHeight'])
			const state = reactive({
			tableData: {
			表名:'膳食调查表',
			填表时间:'',
			更新时间:'',
			记录者:'',
			人员构成:{
			type:'', //只能选择独居或者家庭
			input1:'',
			input2:'',
			表名: '膳食调查表',
			填表时间: '',
			更新时间: '',
			记录者: '',
			人员构成: {
			type: '', //只能选择独居或者家庭
			input1: '',
			},
			烹饪主要操作者:{
			typr:'',
			input1:'',
			烹饪主要操作者: {
			type: '',
			input1: '',
			},
			食材采购:{
			typr:'',
			input1:'',
			食材采购: {
			type: '',
			input1: '',
			},
			食物偏好:{
			typr:'',
			input1:'',
			食物偏好: {
			type: '',
			input1: '',
			},
			食物偏好:{
			typr:'',
			input1:'',
			}
			三天饮食记录表:{
			透析日1:{日期:'',早餐:'',加餐1:'',午餐:"",加餐2:'',晚餐:''},
			非透析日:{日期:'',早餐:'',加餐1:'',午餐:"",加餐2:'',晚餐:''},
			透析日2:{日期:'',早餐:'',加餐1:'',午餐:"",加餐2:'',晚餐:''}
			},
			外吃:{
			type: '',
			input1: '',
			},
			每日饮水量种类:{
			type: '',
			input1: '',
			},
			日常调味料使用种类:{
			type: '',
			input1: '',
			},
			睡眠:{
			type: '',
			input1: '',
			},
			运动:{ type: '',input1: ''},
			排便情况:{ type: '',input1: ''},
			是否吸烟:{ type: '',input1: ''},
			是否饮酒:{ type: '',input1: ''},
			易过敏体质: {type: '', input1: '',},
			胃肠道紊乱者: {type: '', input1: '',},
			过敏食物: {type: '', input1: '',},
			宗教信仰: {type: '', input1: '',},
			过敏症状表现为以下哪些: {type: '', input1: '',},
			您是如何知道自己食物过敏: {type: '', input1: '',},
			备注: {type: '', input1: '',},


			},
			loading: false,

			})
			const tableHe = computed(() => {
			return props.tableHeight - 130
			})
			// 第一步：定义子组件里面的方法
			const getData = (str: string) => {
			@@ -138,32 +520,44 @@
			state.loading = true

			}
			const save=()=>{
			const dome=document.getElementById('tabledome')
			console.log(dome)
			// 打开查看或者编辑明细
			const openShow=(type:string)=>{
			console.log(type)
			}

			// 第二步：暴露方法
			defineExpose({ getData })
			defineExpose({ getData,openShow })
			</script>

			<style lang="scss">
			<style lang="scss">
			.gridtable {
			font-family: verdana, arial, sans-serif;
			font-size: 11px;
			color: #333333;
			border-width: 1px;
			border-color: #666666;
			border-collapse: collapse;

			}

			.gridtable th {
			border-width: 1px;
			padding: 8px;
			border-style: solid;
			border-color: #666666;
			background-color: #a4b0e2;
			}

			.gridtable td {
			border-width: 1px;
			padding: 8px;
			border-style: solid;
			border-color: #666666;
			background-color: #ffffff;
			}


			.gridtable {font-family: verdana,arial,sans-serif;font-size:11px;color:#333333;border-width: 1px;border-color: #666666;border-collapse: collapse;min-width:800px;}

			.gridtable th {border-width: 1px;padding: 8px;border-style: solid;border-color: #666666;background-color: #a4b0e2;}

			.gridtable td {border-width: 1px;padding: 8px;border-style: solid;border-color: #666666;background-color: #ffffff;min-width: 100px;}
			.input-underline {
			border: none; /* 移除所有边框 */
			border-bottom: 1px solid #ccc; /* 显示下边框 */
			outline: none; /* 移除点击输入框时浏览器可能会提供的默认轮廓线 */
			text-align: center;
			}
			.width50{
			width: 50px;
			}


			.width50 {
			width: 50px;
			}
			</style>