<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>
|
|
</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>
|
<td>
|
<label>
|
<input type="radio" id="option1" name="group2" value="配偶">
|
配偶
|
</label>
|
|
</td>
|
<td>
|
<label>
|
<input type="radio" id="option1" name="group2" value="其他">
|
其他
|
</label>
|
|
</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>
|
</div>
|
|
</template>
|
|
<script setup lang="ts">
|
import { computed, reactive } from 'vue';
|
|
const props = defineProps(['tableHeight'])
|
const state = reactive({
|
tableData: {
|
表名:'膳食调查表',
|
填表时间:'',
|
更新时间:'',
|
记录者:'',
|
人员构成:{
|
type:'', //只能选择独居或者家庭
|
input1:'',
|
input2:'',
|
},
|
烹饪主要操作者:{
|
typr:'',
|
input1:'',
|
},
|
食材采购:{
|
typr:'',
|
input1:'',
|
},
|
食物偏好:{
|
typr:'',
|
input1:'',
|
},
|
食物偏好:{
|
typr:'',
|
input1:'',
|
}
|
|
},
|
loading: false,
|
|
})
|
const tableHe = computed(() => {
|
return props.tableHeight - 130
|
})
|
// 第一步：定义子组件里面的方法
|
const getData = (str: string) => {
|
console.log("子组件获取显示数据！" + str);
|
state.loading = true
|
|
}
|
const save=()=>{
|
const dome=document.getElementById('tabledome')
|
console.log(dome)
|
}
|
|
// 第二步：暴露方法
|
defineExpose({ getData })
|
</script>
|
|
<style lang="scss">
|
|
|
.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;
|
}
|
|
|
</style>
|
