更新膳食调差

chenyc

2024-09-14 901c277599e4abd4fc2f0cde8f9c2b853e779d5a

更新膳食调差

 .env.development

@@ -2,4 +2,5 @@
ENV = development

# 本地环境接口地址
VITE_API_URL = 'http://testbs.ihemodialysis.com/'
# VITE_API_URL = 'http://testbs.ihemodialysis.com/'
VITE_API_URL = 'https://hemobs.icoldchain.cn/'

 src/api/tiaochabiao/index.ts

New file
@@ -0,0 +1,45 @@
import request from "/@/utils/request";
export function Add(params: any) {
    return request({
        url: '/nutrition/food/survey/add',
        method: 'post',
        data: params,
    });
}
export function update(params: any) {
    return request({
        url: '/nutrition/food/survey/update',
        method: 'post',
        data: params,
    });
}export function deleteId(params: string) {
    return request({
        url: '/nutrition/food/survey/delete',
        method: 'post',
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded',
        },
        data: params,
    });
}
export function list(params: object) {
    return request({
        url: '/nutrition/food/survey/list',
        method: 'post',
        params,
    });
}

export interface tiaochabiaoInfo {
   id:number,
   code:string,
   clientCode:string,
   patientCode:string,
   // 调差日期
   surveryTime:string,
   //调查人用户编号
   surveryPerson:string,
   //调查内容
   surveryJsonBody:string,
   updateTime:string
}

 src/i18n/lang/zh-cn.ts

@@ -1,6 +1,7 @@
// 定义内容
export default {
    router: {
        tiaochabiao1:'调查表',
        home: '首页',
        system: '系统设置',
        systemMenu: '菜单管理',

 src/layout/navBars/topBar/breadcrumb.vue

@@ -109,6 +109,7 @@
// 路由更新时
onBeforeRouteUpdate((to) => {
    initRouteSplit(to.path);
    alert(to.path)
});
</script>


 src/router/backEnd.ts

@@ -43,6 +43,7 @@
    await useUserInfo().setUserInfos();
    // 获取路由菜单数据
    const res = await getBackEndControlRoutes();
    console.log(res,'路由获取')
    // 无登录权限时，添加判断
    // https://gitee.com/lyt-top/vue-next-admin/issues/I64HVO
    if (res.data.length <= 0) return Promise.resolve(true);

 src/router/frontEnd.ts

@@ -26,11 +26,14 @@
    // 触发初始化用户信息 pinia
    // https://gitee.com/lyt-top/vue-next-admin/issues/I5F1HP
    await useUserInfo(pinia).setUserInfos();
    console.log('前端初始化信息')
    // 无登录权限时，添加判断
    // https://gitee.com/lyt-top/vue-next-admin/issues/I64HVO
    if (useUserInfo().userInfos.roles.length <= 0) return Promise.resolve(true);
    // 添加动态路由
    await setAddRoute();
    console.log('222')
    console.log(router)
    // 设置递归过滤有权限的路由到 pinia routesList 中（已处理成多级嵌套路由）及缓存多级嵌套数组处理后的一维数组
    setFilterMenuAndCacheTagsViewRoutes();
}
@@ -42,6 +45,8 @@
 * @link 参考：https://next.router.vuejs.org/zh/api/#addroute
 */
export async function setAddRoute() {
    const li=await setFilterRouteEnd()
    console.log(li)
    await setFilterRouteEnd().forEach((route: RouteRecordRaw) => {
        router.addRoute(route);
    });

 src/router/index.ts

@@ -98,7 +98,11 @@
    if (to.path === '/login' && !token) {
        next();
        NProgress.done();
    } else {
    }else if (to.path === '/tiaochabiao1' && !token) {
        next();
        NProgress.done();
    }
     else {
        if (!token) {
            next(`/login?redirect=${to.path}&params=${JSON.stringify(to.query ? to.query : to.params)}`);
            Session.clear();

 src/router/route.ts

@@ -1180,7 +1180,8 @@
                },
            },
        ],
    },

    }
];

/**
@@ -1204,6 +1205,14 @@
        meta: {
            title: 'message.staticRoutes.noPower',
            isHide: true,
        },
    },
    {
        path: '/tiaochabiao1',
        name: 'tiaochabiao1',
        component: () => import('/@/views/tiaochabiao/demo1.vue'),
        meta: {
            title: '调差表',
        },
    },
];
@@ -1243,4 +1252,13 @@
            title: 'message.router.visualizingLinkDemo2',
        },
    },
    {
        path: '/visualizingDemo3',
        name: 'visualizingDemo3',
        component: () => import('/@/views/visualizing/demo3.vue'),
        meta: {
            title: 'message.router.visualizingLinkDemo2',
        },
    },
	
];

 src/stores/userInfo.ts

@@ -11,6 +11,7 @@
    state: (): UserInfosState => ({
        userInfos: {
            userName: '',
            code:'',
            photo: '',
            time: 0,
            roles: [],
@@ -28,6 +29,7 @@
                console.log('Session里没有userInfo')
                const userInfos = <UserInfos>await this.getApiUserInfo();
                this.userInfos = userInfos;
                console.log('完成了')
            }
        },
        // 模拟接口数据
@@ -41,6 +43,7 @@
                setTimeout(() => {
                    // 模拟数据，请求接口时，记得删除多余代码及对应依赖的引入
                    const userName = userRet.userName
                    const userCode = userRet.code
                    // 模拟数据
                    let defaultRoles: Array<string> = [];
                    let defaultAuthBtnList: Array<string> = [];
@@ -73,6 +76,7 @@
                    // 用户信息模拟数据
                    const userInfos = {
                        userName: userName,
                        code:userCode,
                        photo:userRet.userAvatar===''
                                ? 'https://img2.baidu.com/it/u=1978192862,2048448374&fm=253&fmt=auto&app=138&f=JPEG?w=504&h=500'
                                : userRet.userAvatar,
@@ -82,6 +86,8 @@
                        clientCode:userRet.currentClientInfo.code,
                        clientName:userRet.currentClientInfo.clientName,
                    };
                    console.log('-----------------2222------------------------------')
                    console.log(defaultRoles)
                    // Session.set('userInfo', userInfos);
                    resolve(userInfos);
                }, 0);

 src/theme/element.scss

@@ -245,13 +245,14 @@
            margin: 0 auto !important;
            position: absolute;
            .el-dialog__body {
                padding: 20px !important;
                padding: 0px !important;
            }
        }
    }
}
.el-dialog__body {
    max-height: calc(90vh - 111px) !important;
    // max-height: calc(90vh - 111px) !important;
    padding: 0;
    overflow-y: auto;
    overflow-x: hidden;
}

 src/views/home/components/dietaryDtaile.vue

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

 src/views/home/components/dietary_survey.vue

@@ -1,49 +1,245 @@
<template>
    <div class="dietarySurvey-home">
        <div v-if="patientsInfo.id">
            222
           <ItemTable></ItemTable>

    <div class="dietarySurvey-home" >
        <el-row   style="padding-left: 10px;">
            <el-form size="small" :inline="true" :model="state.formInline"> 
                <!-- <el-form-item label="填报人">
                    <el-select style="width: 120px;"
                        v-model="state.formInline.user"
                        placeholder="Activity zone"
                        clearable
                    >
                        <el-option label="Zone one" value="shanghai" />
                        <el-option label="Zone two" value="beijing" />
                    </el-select>
                </el-form-item> -->
                <el-form-item label="填报日期">
                    <el-date-picker
                        v-model="state.formInline.date"
                        type="daterange"
                        unlink-panels
                        range-separator="To"
                        start-placeholder="开始"
                        end-placeholder="结束"
                        :shortcuts="shortcuts"
                        format="YYYY/MM/DD"
                        value-format="YYYY-MM-DD"
                    />
                <!-- <el-date-picker style="width: 120px;"
                    v-model="state.formInline.date"
                    type="date"
                    placeholder="Pick a date"
                    clearable
                /> -->
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit">查询</el-button>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" plain @click="addItem">添加</el-button>
                </el-form-item>
            </el-form>
        </el-row>
        <div v-if="patientsInfo.id"  class="divcont">
            <el-table size="default" :data="state.tableData" stripe style="width: 100%"  :height="tableHe">
                <el-table-column fixed label="NO" type="index" widtd="80" >
                        <template #header>
                            <el-icon @click="onSubmit"><RefreshRight /></el-icon>
                        </template>
                      
                    </el-table-column>
                    <el-table-column  prop="surveryTime" label="填表时间" show-overflow-tooltip />
                    <el-table-column  prop="surveryPersonName" label="填表人" show-overflow-tooltip />
                    <el-table-column  prop="updateTime" label="更新时间" show-overflow-tooltip />
                    <el-table-column  label="操作" >
                        <template #default="scope">
                            <el-button size="small" @click="handleEdit(scope.$index, scope.row)">
                                    编辑
                            </el-button>
                            <el-button
                            size="small"
                            type="danger"
                            @click="handleDelete(scope.$index, scope.row)"
                            >
                                 删除
                            </el-button>
                        </template>
                    </el-table-column>
            </el-table>
            <el-pagination
                v-model:current-page="state.page"
                v-model:page-size="state.size"
                :page-sizes="[10, 20, 30, 40]"
                layout="total, sizes, prev, pager, next, jumper"
                :total="state.total"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                />
        </div>
        <el-empty v-else description="无数据，请先选择患者"></el-empty>
        <el-empty v-if="!patientsInfo.id" description="无数据，请先选择患者"></el-empty>
        <editDietary  @shuaxin="onSubmit" ref="editDietaryRef"></editDietary>
    </div>

</template>

<script setup lang="ts">
import { storeToRefs } from 'pinia';
import { usePatientsInfo } from '/@/stores/patientsInfo';
import { computed, reactive } from 'vue';
import {list,tiaochabiaoInfo,deleteId} from '/@/api/tiaochabiao/index'
import { computed, reactive, ref } from 'vue';
import ItemTable from './dietaryDtaile.vue'
import editDietary from './editDietary.vue'
import { useRoute,useRouter } from 'vue-router';
import { ElLoading, ElMessage, ElMessageBox } from 'element-plus';
const storesPat = usePatientsInfo();
const { patientsInfo } = storeToRefs(storesPat);
const props = defineProps(['tableHeight'])
const editDietaryRef=ref()
const router = useRouter()
const shortcuts = [
  {
    text: '上一周',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
      return [start, end]
    },
  },
  {
    text: '上一个月',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
      return [start, end]
    },
  },
  {
    text: '前三个月',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
      return [start, end]
    },
  },
]
const state = reactive({
    tableData: [],
    page:1,
    size:10,
    total:0,
    loading: false,
    formInline:{
        user: '',
        date: [],
    },
    dialogTableVisible:false
})
const tableHe = computed(() => {
    return props.tableHeight - 130
    return (props.tableHeight-200)+'px'
})
const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`)
  state.size=val
  onSubmit()
}
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`)
  state.page=val
  onSubmit()
}

const onSubmit=()=>{
    console.log(state.formInline)
    const pasm={
        page: state.page,
        size: state.size,
        wherecondition: `patient_code = '${patientsInfo.value.code}'`,
        ordercondition: 'survery_time desc'
    }
    if(state.formInline.date.length===2){
        pasm.wherecondition+=` and survery_time BETWEEN '${state.formInline.date[0]} 00:00:00' AND '${state.formInline.date[1]} 23:59:59'`
    }
    const loading = ElLoading.service({
        lock: true,
        text: 'Loading',
        background: 'rgba(0, 0, 0, 0.7)',
    })
    list(pasm).then(re=>{
        state.tableData=re.data.list
        state.total=re.data.total
    }).finally(()=>{
        loading.close()
    })
}
const addItem=()=>{
    editDietaryRef.value.openShow('add')
    // router.push({path:'/tiaochabiao1',query:{type:'add',id:0}})
}
// 第一步：定义子组件里面的方法
const getData = (str: string) => {
    console.log("子组件获取显示数据！" + str);
    console.log(props.tableHeight)
    var pam = {
        patientCode: patientsInfo.value.code,
    const pasm = {
        page: 1,
        size: 100,
        orderType: 1,
        orderIsUse: 2,
        desc: 1,
        orderName: '',
        size: 10,
        wherecondition:`patient_code='${patientsInfo.value.code}'`,
        ordercondition:'survery_time DESC'
    }
    if(state.formInline.date.length===2){
        pasm.wherecondition+=`and survery_time BETWEEN '${state.formInline.date[0]} 00:00:00' AND '${state.formInline.date[1]} 23:59:59'`
    }
    const loading = ElLoading.service({
        lock: true,
        text: 'Loading',
        background: 'rgba(0, 0, 0, 0.7)',
    })
    list(pasm).then(re=>{
        console.log(re)
        state.tableData=re.data.list
        state.total=re.data.total
    }).finally(()=>{
        loading.close()
    })

    state.loading = true

}

// 第二步：暴露方法
defineExpose({ getData })
/**
 * 编辑
 */
const handleEdit = (index: number, row: any) => {
  console.log(index, row)
  editDietaryRef.value.openShow('update',row)
}
const handleDelete = (index: number, row: any) => {
  console.log(index, row)
  ElMessageBox.confirm(
    '你确定要删除该条记录?',
    'Warning',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
        deleteId(`id=${row.id}`).then(re=>{
            ElMessage.success('删除成功')
            onSubmit()
        }).catch(e=>{
            ElMessage.error('删除失败！')
        })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消操作',
      })
    })
 
}
</script>

<style  lang="scss">
@@ -63,6 +259,18 @@
    .width50{
        width: 50px;
    }
.infinite-list {
    overflow: auto;
    padding: 0;
    margin: 0;
    list-style: none;
}
.infinite-list .infinite-list-item {
  display: flex;
}

.divcont{
    overflow-y: auto; /* 垂直滚动条 */
}

</style>

 src/views/home/components/editDietary.vue

New file
@@ -0,0 +1,683 @@
<template>
    <div class="dietarySurvey-item">
        <el-dialog  v-model="state.dialogTableVisible" title="膳食调查表" :fullscreen="true" width="100%">
            <div class="container" style="width: 100%; height: 100%;overflow: auto;">
                <div>
                    <div>
                        <el-form size="small">
                            <div style="width: 100%">
                                <table id="tabledome" class="gridtable">

                                    <tr>
                                        <th colspan="2">
                                            <el-form-item label="初次调查日期">
                                                <el-date-picker v-model="state.tableData.初次调查日期" type="date" style="width: 100px;"
                                                    placeholder="" format="YYYY/MM/DD" value-format="YYYY-MM-DD" />
                                            </el-form-item>

                                        </th>
                                        <th colspan="2">
                                            <el-form-item label="更新日期">
                                                <el-date-picker v-model="state.tableData.更新日期" type="date" style="width: 100px;"
                                                    placeholder="" format="YYYY/MM/DD" value-format="YYYY-MM-DD" />
                                            </el-form-item>


                                        </th>
                                        <th colspan="2">记录者:{{ state.tableData.记录者 }}</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">
                                            <el-form-item>
                                                <el-input v-model="state.tableData.人员构成.input1" type="textarea"
                                                    :autosize="{ minRows: 1, maxRows: 6 }" placeholder="备注" />
                                                <!-- <input type="text" v-model="state.tableData.人员构成.input1" class="input-underline" placeholder="备注"  /> -->
                                            </el-form-item>
                                        </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 colspan="2">
                                            <el-form-item>
                                                <el-input v-model="state.tableData.烹饪主要操作者.input1" type="textarea"
                                                    :autosize="{ minRows: 1, maxRows: 6 }" 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" type="textarea"
                                                    :autosize="{ minRows: 1, maxRows: 6 }" 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" type="textarea"
                                                    :autosize="{ minRows: 1, maxRows: 6 }" 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>
                                            <el-form-item label="透析日一">
                                                <el-date-picker v-model="state.tableData.三天饮食记录表.透析日1.日期" type="date" style="width: 100px;"
                                                    placeholder="" format="MM/DD" value-format="YYYY-MM-DD" />
                                            </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.三天饮食记录表.透析日1.加餐1" 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.三天饮食记录表.透析日1.加餐2" placeholder="" />
                                            </el-form-item>
                                        </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" style="width: 100px;"
                                                    placeholder="" format="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" style="width: 100px;"
                                                    placeholder="" format="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" type="textarea"
                                                    :autosize="{ minRows: 1, maxRows: 6 }" 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" type="textarea"
                                                    :autosize="{ minRows: 1, maxRows: 6 }" placeholder="备注" />
                                            </el-form-item>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            8.每日饮水量、种类
                                        </td>
                                        <td colspan="2">
                                            <el-form-item>
                                                <el-input v-model="state.tableData.每日饮水量种类.input1" type="textarea"
                                                    :autosize="{ minRows: 1, maxRows: 6 }" placeholder="" />
                                            </el-form-item>

                                        </td>
                                        <td>
                                            9.睡眠
                                        </td>
                                        <td colspan="2">
                                            <el-form-item>
                                                <el-input v-model="state.tableData.睡眠.input1" type="textarea"
                                                    :autosize="{ minRows: 1, maxRows: 6 }" placeholder="备注" />
                                            </el-form-item>
                                        </td>

                                    </tr>
                                    <tr>
                                        <td>
                                            10.运动
                                        </td>
                                        <td colspan="2">
                                            <el-form-item>
                                                <el-input v-model="state.tableData.运动.input1" type="textarea"
                                                    :autosize="{ minRows: 1, maxRows: 6 }" placeholder="备注" />
                                            </el-form-item>
                                        </td>
                                        <td>
                                            11.排便情况
                                        </td>
                                        <td colspan="2">
                                            <el-form-item>
                                                <el-input v-model="state.tableData.排便情况.input1" type="textarea"
                                                    :autosize="{ minRows: 1, maxRows: 6 }" placeholder="备注" />
                                            </el-form-item>
                                        </td>

                                    </tr>
                                    <tr>
                                        <td>
                                            12.是否吸烟?
                                        </td>
                                        <td colspan="2">
                                            <el-form-item>
                                                <el-input v-model="state.tableData.是否吸烟.input1" type="textarea"
                                                    :autosize="{ minRows: 1, maxRows: 6 }" placeholder="备注" />
                                            </el-form-item>
                                        </td>
                                        <td>
                                            13.是否饮酒?
                                        </td>
                                        <td colspan="2">
                                            <el-form-item>
                                                <el-input v-model="state.tableData.是否饮酒.input1" type="textarea"
                                                    :autosize="{ minRows: 1, maxRows: 6 }" 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" type="textarea"
                                                    :autosize="{ minRows: 1, maxRows: 6 }" 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" type="textarea"
                                                    :autosize="{ minRows: 1, maxRows: 6 }" 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" type="textarea"
                                                    :autosize="{ minRows: 1, maxRows: 6 }" 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" type="textarea"
                                                    :autosize="{ minRows: 1, maxRows: 6 }" 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" type="textarea"
                                                    :autosize="{ minRows: 1, maxRows: 6 }" 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" type="textarea"
                                                    :autosize="{ minRows: 1, maxRows: 6 }" placeholder="备注" />
                                            </el-form-item>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            备注
                                        </td>

                                        <td colspan="5">
                                            <el-form-item>
                                                <el-input v-model="state.tableData.备注.input1" type="textarea"
                                                    :autosize="{ minRows: 1, maxRows: 6 }" placeholder="备注" />
                                            </el-form-item>
                                        </td>
                                    </tr>




                                </table>
                            </div>
                        </el-form>
                    </div>

                </div>
            </div>
            <template #footer>
                <div class="dialog-footer" style="text-align: center">
                    <el-button @click="funhui">取消</el-button>
                    <el-button type="primary" @click="onSubmit">
                        保存
                    </el-button>
                </div>
            </template>
        </el-dialog>


    </div>

</template>

<script setup lang="ts" name="visualizingLinkDemo2">
import { reactive, onMounted, onUnmounted, ref } from 'vue';
import { formatDate } from '/@/utils/formatTime';
import { NextLoading } from '/@/utils/loading';
import { useUserInfo } from '/@/stores/userInfo';
import { usePatientsInfo } from '/@/stores/patientsInfo';
const storesPat = usePatientsInfo();
import {Add,update,deleteId,tiaochabiaoInfo} from '/@/api/tiaochabiao/index'
import { storeToRefs } from 'pinia';
import { useRoute,useRouter } from 'vue-router';
import { ElMessage } from 'element-plus';
const stores = useUserInfo();
const { patientsInfo } = storeToRefs(storesPat);
const { userInfos } = storeToRefs(stores);
const router = useRouter()
const emit = defineEmits([ "shuaxin" ]);
const state = reactive({
    dialogTableVisible:false,
    tableData: {
        表名: '膳食调查表',
        初次调查日期:"",
        填表日期: '',
        更新日期: '',
        记录者: '陈银成',
        人员构成: {
            type: '', //只能选择独居或者家庭
            input1: '',
        },
        烹饪主要操作者: {
            type: '',
            input1: '',
        },
        食材采购: {
            type: '',
            input1: '',
        },
        食物偏好: {
            type: '',
            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,
    viewInfo:{
        id: 0,
        code: '',
        clientCode: userInfos.value.clientCode,
        patientCode: patientsInfo.value.code,
        surveryTime: formatDate(new Date(), 'YYYY-mm-dd HH:MM:SS'),
        surveryPerson: userInfos.value.code,
        surveryJsonBody: '',
        updateTime: ''
    }

})

const funhui=()=>{
    state.dialogTableVisible=false
}
const onSubmit = () => {
  console.log('submit!')
  console.log(state.tableData)
  const info:tiaochabiaoInfo={
    id: state.viewInfo.id,
    code: state.viewInfo.code,
    clientCode: userInfos.value.clientCode,
    patientCode: patientsInfo.value.code,
    surveryTime: formatDate(new Date(), 'YYYY-mm-dd HH:MM:SS'),
    surveryPerson: userInfos.value.code,
    surveryJsonBody: JSON.stringify(state.tableData),
    updateTime: ''
  }
  console.log(info)
  if(info.id===0){
    Add(info).then(re=>{
        console.log(re.data)
        state.dialogTableVisible=false
        emit('shuaxin')
    })
  }else if(info.id>0){
    info.surveryTime=state.viewInfo.surveryTime
    update(info).then(re=>{
        console.log(re.data)
        state.dialogTableVisible=false
        emit('shuaxin')
    })
  }
  
}
// 第一步：定义子组件里面的方法
const getData = (str: string) => {
    console.log("子组件获取显示数据！" + str);
    state.loading = true

}
// 打开查看或者编辑明细
const openShow = (type: string,mode:tiaochabiaoInfo) => {
    console.log(type)
    if(type==='add'){
        state.tableData.初次调查日期=formatDate(new Date(),'YYYY-mm-dd')
        state.tableData.更新日期=formatDate(new Date(),'YYYY-mm-dd')
        state.tableData.记录者=userInfos.value.userName
        state.dialogTableVisible = true
    }
    else if(type==='update'){
        console.log(mode)
        state.viewInfo=mode
        state.tableData=JSON.parse(mode.surveryJsonBody)
        state.dialogTableVisible = true


    }
   
}

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


<style scoped 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;
}

</style>

 src/views/home/components/lis_.ui.vue

@@ -32,6 +32,24 @@
            <div class="child">
                34222222222222222222222222222222222222222222222222222222222反倒是水水水水水水水水水水水水水水水水十大啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊
            </div>
            <div class="child">
                34222222222222222222222222222222222222222222222222222222222反倒是水水水水水水水水水水水水水水水水十大啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊
            </div>
            <div class="child">
                34222222222222222222222222222222222222222222222222222222222反倒是水水水水水水水水水水水水水水水水十大啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊
            </div>
            <div class="child">
                34222222222222222222222222222222222222222222222222222222222反倒是水水水水水水水水水水水水水水水水十大啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊
            </div>
            <div class="child">
                34222222222222222222222222222222222222222222222222222222222反倒是水水水水水水水水水水水水水水水水十大啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊
            </div>
            <div class="child">
                34222222222222222222222222222222222222222222222222222222222反倒是水水水水水水水水水水水水水水水水十大啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊
            </div>
            <div class="child">
                34222222222222222222222222222222222222222222222222222222222反倒是水水水水水水水水水水水水水水水水十大啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊
            </div>
           </div>
        </div>
        <el-empty v-else description="无数据，请先选择患者"></el-empty>

 src/views/home/index.vue

@@ -1,47 +1,48 @@
<template>
    <div class="home-container layout-pd ">
        <el-row :gutter="15" >
            <el-col :xs="8" :sm="6" :md="4" :lg="3" class="patTabel">
                <el-table :data="state.filterTableData" 
                stripe 
                :height="state.tableHeight.left"
                size="default"
                highlight-current-row
                @current-change="handleCurrentChange"
                style="width: 100%">
    <div class="home-container layout-pd ">
        <el-row>
            <el-col class="patTabel" :xs="6" :sm="6" :md="4" :lg="3" :xl="3" v-if="state.isTable">
                <el-table :data="state.filterTableData" stripe :height="state.tableHeight.left" size="default"
                    highlight-current-row @current-change="handleCurrentChange" style="width: 100%">
                    <el-table-column>
                        <template #header>
                            <div class="home-title">
                                    <el-avatar shape="square" style="width: 16px; height: 16px;background-color: #ffffff;margin-right: 10px;margin-left: 10px;" fit="contain" :src="huanzheliebiao" />
                                    <div class="titleHome">患者列表</div>
                                <el-avatar shape="square"
                                    style="width: 16px; height: 16px;background-color: #ffffff;margin-right: 10px;margin-left: 10px;"
                                    fit="contain" :src="huanzheliebiao" />
                                <div class="titleHome">患者列表</div>
                            </div>
                            <el-input size="default"  @change="getPatients"  v-model="state.search" placeholder="支持模糊查询"  :prefix-icon="Search"/>
                            <el-input size="default" @change="getPatients" v-model="state.search" placeholder="支持模糊查询"
                                :prefix-icon="Search" />
                        </template>
                        <template #default="scope">
                            <el-row>
                                <el-col :span="12">{{scope.row.patientName}}</el-col>
                                <el-col :span="6">{{scope.row.patientGenderText}}</el-col>
                                <el-col :span="6">{{scope.row.age}}</el-col>
                                <el-col :span="12">{{ scope.row.patientName }}</el-col>
                                <el-col :span="6">{{ scope.row.patientGenderText }}</el-col>
                                <el-col :span="6">{{ scope.row.age }}</el-col>
                            </el-row>
                        </template>
                    </el-table-column>
                </el-table>
            </el-col>
            <el-col :xs="14" :sm="18" :md="20" :lg="21" class="detailRight">
            <el-col :xs="6" :sm="18" :md="20" :lg="21" :xl="21" >
                <el-tabs v-model="state.activeName" class="demo-tabs" @tab-click="handleClick">
                    <el-tab-pane label="患者档案" name="患者档案">
                        <template #label>
                            <span class="custom-tabs-label home-title">
                                <el-icon><Avatar /></el-icon>
                                <el-icon>
                                    <Avatar />
                                </el-icon>
                                <span style="margin-left: 5px">患者档案</span>
                            </span>
                        </template>
                        <patientFile :tableHeight="state.tableHeight.detailRight"  ref="patientFileRef"></patientFile>
                    </el-tab-pane>
                    <el-tab-pane label="生化数据" name="生化数据">
                        <template #label>
                            <span class="custom-tabs-label home-title">
                                <el-icon><Aim /></el-icon>
                                <el-icon>
                                    <Aim />
                                </el-icon>
                                <span style="margin-left: 5px">生化数据</span>
                            </span>
                        </template>
@@ -50,16 +51,20 @@
                    <el-tab-pane label="用药记录" name="用药记录">
                        <template #label>
                            <span class="custom-tabs-label home-title">
                                <el-icon><Edit /></el-icon>
                                <el-icon>
                                    <Edit />
                                </el-icon>
                                <span style="margin-left: 5px">用药记录</span>
                            </span>
                        </template>
                        <MedicationRecords :tableHeight="state.tableHeight.detailRight" ref="MedicationRecordsRef"></MedicationRecords>

                    </el-tab-pane>
                    <el-tab-pane label="历史服务" name="历史服务">
                        <template #label>
                            <span class="custom-tabs-label home-title">
                                <el-icon><ZoomIn /></el-icon>
                                <el-icon>
                                    <ZoomIn />
                                </el-icon>
                                <span style="margin-left: 5px">历史服务</span>
                            </span>
                        </template>
@@ -68,16 +73,20 @@
                    <el-tab-pane label="膳食调查" name="膳食调查">
                        <template #label>
                            <span class="custom-tabs-label home-title">
                                <el-icon><Notification /></el-icon>
                                <el-icon>
                                    <Notification />
                                </el-icon>
                                <span style="margin-left: 5px">膳食调查</span>
                            </span>
                        </template>
                        <dietarySurvey></dietarySurvey>
                        
                    </el-tab-pane>
                    <el-tab-pane label="营养筛查评估" name="营养筛查评估">
                        <template #label>
                            <span class="custom-tabs-label home-title">
                                <el-icon><Histogram /></el-icon>
                                <el-icon>
                                    <Histogram />
                                </el-icon>
                                <span style="margin-left: 5px">营养筛查评估</span>
                            </span>
                        </template>
@@ -86,7 +95,9 @@
                    <el-tab-pane label="方案" name="方案">
                        <template #label>
                            <span class="custom-tabs-label home-title">
                                <el-icon><Grid /></el-icon>
                                <el-icon>
                                    <Grid />
                                </el-icon>
                                <span style="margin-left: 5px">方案</span>
                            </span>
                        </template>
@@ -95,27 +106,39 @@
                    <el-tab-pane label="随访记录" name="随访记录">
                        <template #label>
                            <span class="custom-tabs-label home-title">
                                <el-icon><ChatDotRound /></el-icon>
                                <el-icon>
                                    <ChatDotRound />
                                </el-icon>
                                <span style="margin-left: 5px">随访记录</span>
                            </span>
                        </template>
                        Task
                    </el-tab-pane>
                </el-tabs>
                <div class="itemDoby">
                    <patientFile v-if="state.activeName === '患者档案'" :tableHeight="state.tableHeight.detailRight"
                        ref="patientFileRef" />
                    <lisUi v-if="state.activeName === '生化数据'" ref="lisUiRef">
                    </lisUi>
                    <MedicationRecords v-if="state.activeName === '用药记录'"  :tableHeight="state.tableHeight.detailRight" ref="MedicationRecordsRef">
                    </MedicationRecords>
                    <dietarySurvey ref="dietarySurveyRef" v-if="state.activeName === '膳食调查'"  :tableHeight="state.tableHeight.detailRight"></dietarySurvey>

                </div>

            </el-col>
        </el-row>
        <div class="fixed-div" v-show="patientsInfo.patientName">
            <el-avatar :size="80" :src="patientsInfo.patientAvatarIcon" />
            <div>{{patientsInfo.patientName}}</div>
            
            <div @click="state.isTable = false">{{ patientsInfo.patientName }}</div>
        </div>
    </div>
    </div>
</template>

<script setup lang="ts" name="home">
import huanzheliebiao from '/@/assets/imgs/huanzheliebiao.png'
import { reactive, onMounted, ref, watch, nextTick, onActivated, markRaw } from 'vue';
import {QueryList} from '/@/api/Patients'
import { QueryList } from '/@/api/Patients'
import { storeToRefs } from 'pinia';
import { useUserInfo } from '/@/stores/userInfo';
import { usePatientsInfo } from '/@/stores/patientsInfo';
@@ -126,7 +149,7 @@
import { ElLoading, TabsPaneContext } from 'element-plus'
import { Search } from '@element-plus/icons-vue'
// 用药记录
import MedicationRecords from './components/Medication_records.vue' 
import MedicationRecords from './components/Medication_records.vue'
// 膳食调查
import dietarySurvey from './components/dietary_survey.vue'
// 患者档案
@@ -134,38 +157,38 @@
// 化验结果
import lisUi from './components/lis_.ui.vue'
interface User {
    code:string,
    code: string,
    patientName: string
    patientGenderText: string
    age: string
}
const MedicationRecordsRef=ref()
const patientFileRef=ref()
const currentRow=ref()
const lisUiRef=ref()
const MedicationRecordsRef = ref()
const patientFileRef = ref()
const currentRow = ref()
const lisUiRef = ref()
const dietarySurveyRef=ref()// 膳食调查
const state = reactive({
    global: {
        homeChartOne: null,
        homeChartTwo: null,
        homeCharThree: null,
        dispose: [null, '', undefined],
    } as any,
    filterTableData:[],
    activeName:'膳食调查',
    tableHeight:{
        left:0,
        detailRight:0
    global: {
        homeChartOne: null,
        homeChartTwo: null,
        homeCharThree: null,
        dispose: [null, '', undefined],
    } as any,
    filterTableData: [],
    activeName: '膳食调查',
    tableHeight: {
        left: 0,
        detailRight: 0
    },
    search:''
    search: '',
    isTable: true,
});
onMounted(()=>{
onMounted(() => {
    setTableHeight()
    getPatients()
})
const handleCurrentChange = (val: any | undefined) => {
    console.log('-----------------333')
    console.log(val)
    if(val){
    if (val) {
        currentRow.value = val
        //缓存到vuex 中
        storesPat.setPatientsInfo(val)
@@ -173,86 +196,90 @@
    }
}
/**获取患者列表 */
const getPatients=()=>{
const getPatients = () => {
    const loading = ElLoading.service({
        lock: true,
        text: 'Loading',
        background: 'rgba(0, 0, 0, 0.7)',
    })
    var ps= {
    var ps = {
        page: 0,
        size: 0,
        wherecondition:`client_code="${userInfos.value.clientCode}" and (patient_name like "%${state.search.toLowerCase()}%"
        wherecondition: `client_code="${userInfos.value.clientCode}" and (patient_name like "%${state.search.toLowerCase()}%"
        OR patient_name_py like "%${state.search.toLowerCase()}%")`
    }
    storesPat.setPatientsInfo({
      id: '',
      code: '',
      age: 0,
      patientName: '',
      patientGenderText: '',
      patientAvatarIcon: ''
        id: '',
        code: '',
        age: 0,
        patientName: '',
        patientGenderText: '',
        patientAvatarIcon: ''
    })
    QueryList(ps).then(res=>{
    QueryList(ps).then(res => {
        console.log('----------------患者--------')
        console.log(res.data)
        state.filterTableData=res.data.list
    }).finally(()=>{
        state.filterTableData = res.data.list
    }).finally(() => {
        loading.close()
    })
}
/**设置高度 */
const setTableHeight = () => {
    let height = document.documentElement.clientHeight;
    let height = document.documentElement.clientHeight;
    console.log('窗口高度')
    const navDom = document.querySelector('.layout-navbars-breadcrumb-index');
    if (navDom) {
        height -= navDom.scrollHeight;
    }
    state.tableHeight.detailRight=height
    state.tableHeight.left = height-77;
    // const demoFormDom = document.querySelector('.card_box_search')
    const navDom = document.querySelector('.layout-navbars-breadcrumb-index');
    if (navDom) {
        height -= navDom.scrollHeight;
    }
    state.tableHeight.detailRight = height
    state.tableHeight.left = height - 77;
    // const demoFormDom = document.querySelector('.card_box_search')

};
/** 切换明细tabs*/
const handleClick=(tab: TabsPaneContext, event: Event)=>{
    alert('1')
    state.activeName=tab.paneName as string
const handleClick = (tab: TabsPaneContext, event: Event) => {
    state.activeName = tab.paneName as string
    getTabsData()
}
/** 获取明细项数据 */
const getTabsData=()=>{
    if(MedicationRecordsRef.value&&patientsInfo.value.id){
        if(state.activeName==='用药记录'){
const getTabsData = () => {
    if (patientsInfo.value.id) {
        if (state.activeName === '用药记录') {
            MedicationRecordsRef.value.getData()
        }else if(state.activeName==='患者档案'){
            console.log(patientFileRef.value)
        } else if (state.activeName === '患者档案') {
            patientFileRef.value.getData()
        } else if(state.activeName === '膳食调查'){
            dietarySurveyRef.value.getData()
           
        }
        
    }
}
</script>

<style  lang="scss">
<style lang="scss">
$homeNavLengh: 8;

.home-container {
    overflow: hidden;
    .patTabel{
    overflow: hidden;

    .patTabel {
        .el-table th.el-table__cell {
            background-color: #6babfa; 
            color:#606266;
            background-color: #6babfa;
            color: #606266;
        }
        .el-table__body tr.current-row>td.el-table__cell{

        .el-table__body tr.current-row>td.el-table__cell {
            background: #E4F6DE;
            color: #5FCD00;
            /* height: 25px; */
            /* border: tomato solid 1px; */
         }
        }
    }
	

}
.patTitle{

.patTitle {
    height: 25px;
    font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
    font-weight: 500;
@@ -264,15 +291,22 @@
    font-style: normal;
    // margin-top: -10px;
}
.home-title{

.home-title {
    margin-bottom: 4px;
    flex: 1;
    height: inherit;
    display: flex;
    align-items: center;
}
.detailRight{

.detailRight {
    margin-left: 10px;
    background-color: #ffffff;
}
.itemDoby{
    width: 100%; /* 设置容器宽度 */
    overflow-x: auto; /* 横向内容溢出时显示滚动条 */
}
.fixed-div {
    position: fixed;
@@ -283,17 +317,20 @@
    right: 30px;
    width: 200px;
    height: 100px;
    background-color:#ffffff;
    background-color: #ffffff;
    color: rgb(16, 3, 3);
    padding: 10px;
    z-index: 999;
    
    div{

    div {
        font-weight: 800;
        margin-left: 10px;
        font-size: 20px;
    }
  }
}

.parent {
    display: grid;
    grid-template-columns: minmax(150px, 20%) 1fr;
}
</style>


 src/views/tiaochabiao/demo1.vue

New file
@@ -0,0 +1,659 @@
<template>
    <div class="container" style="padding: 5px;height: 100%;overflow: auto;">
        <el-page-header @back='funhui'>
            <template #content>
                <span class="text-large font-600 mr-3"> 膳食调查表 </span>
            </template>
            <template #extra>
            <div class="flex items-center">
                <el-button size="small">取消</el-button>
                <el-button size="small" type="primary" @click="onSubmit" class="ml-2">保存</el-button>
            </div>
            </template>
        </el-page-header>
        <div style="margin-top: 10px;">
            <div>
                <el-form size="small">
                    <div  style="width: 100%">
                        <table id="tabledome" class="gridtable">
                            
                            <tr>
                                <th colspan="2">
                                    <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>

                                </th>
                                <th colspan="2">
                                    <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>
                                   
                                    
                                </th>
                                <th colspan="2">记录者:{{state.tableData.记录者}}</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">
                                    <el-form-item>
                                        <el-input v-model="state.tableData.人员构成.input1"  type="textarea" :autosize="{ minRows: 1, maxRows: 6 }" placeholder="备注" />
                                        <!-- <input type="text" v-model="state.tableData.人员构成.input1" class="input-underline" placeholder="备注"  /> -->
                                    </el-form-item>
                                </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 colspan="2">
                                    <el-form-item>
                                        <el-input v-model="state.tableData.烹饪主要操作者.input1" type="textarea" :autosize="{ minRows: 1, maxRows: 6 }"  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" type="textarea" :autosize="{ minRows: 1, maxRows: 6 }"  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" type="textarea" :autosize="{ minRows: 1, maxRows: 6 }"  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>
                                    <el-form-item label="透析日一">
                                        <el-date-picker
                                            v-model="state.tableData.三天饮食记录表.透析日1.日期"
                                            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.三天饮食记录表.透析日1.早餐"   placeholder="" />
                                    </el-form-item>
                                </td>
                                <td>
                                    <el-form-item>
                                        <el-input v-model="state.tableData.三天饮食记录表.透析日1.加餐1"  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.三天饮食记录表.透析日1.加餐2"  placeholder="" />
                                    </el-form-item>
                                </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" type="textarea"  :autosize="{ minRows: 1, maxRows: 6 }" 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" type="textarea" :autosize="{ minRows: 1, maxRows: 6 }"  placeholder="备注" />
                                    </el-form-item>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    8.每日饮水量、种类
                                </td>
                                <td colspan="2">
                                    <el-form-item>
                                        <el-input v-model="state.tableData.每日饮水量种类.input1" type="textarea" :autosize="{ minRows: 1, maxRows: 6 }"  placeholder="" />
                                    </el-form-item>
                                    
                                </td>
                                <td>
                                    9.睡眠
                                </td>
                                <td colspan="2">
                                    <el-form-item>
                                        <el-input v-model="state.tableData.睡眠.input1" type="textarea" :autosize="{ minRows: 1, maxRows: 6 }"  placeholder="备注" />
                                    </el-form-item>
                                </td>
                            
                            </tr>
                            <tr>
                                <td>
                                    10.运动
                                </td>
                                <td colspan="2">
                                    <el-form-item>
                                        <el-input v-model="state.tableData.运动.input1" type="textarea" :autosize="{ minRows: 1, maxRows: 6 }"  placeholder="备注" />
                                    </el-form-item>
                                </td>
                                <td>
                                    11.排便情况
                                </td>
                                <td colspan="2">
                                    <el-form-item>
                                        <el-input v-model="state.tableData.排便情况.input1"  type="textarea" :autosize="{ minRows: 1, maxRows: 6 }" placeholder="备注" />
                                    </el-form-item>
                                </td>
                            
                            </tr>
                            <tr>
                                <td>
                                    12.是否吸烟?
                                </td>
                                <td colspan="2">
                                    <el-form-item>
                                        <el-input v-model="state.tableData.是否吸烟.input1" type="textarea" :autosize="{ minRows: 1, maxRows: 6 }" placeholder="备注" />
                                    </el-form-item>
                                </td>
                                <td>
                                    13.是否饮酒?
                                </td>
                                <td colspan="2">
                                    <el-form-item>
                                        <el-input v-model="state.tableData.是否饮酒.input1" type="textarea" :autosize="{ minRows: 1, maxRows: 6 }" 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" type="textarea" :autosize="{ minRows: 1, maxRows: 6 }" 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" type="textarea" :autosize="{ minRows: 1, maxRows: 6 }" 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" type="textarea" :autosize="{ minRows: 1, maxRows: 6 }" 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" type="textarea" :autosize="{ minRows: 1, maxRows: 6 }" 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" type="textarea" :autosize="{ minRows: 1, maxRows: 6 }" 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" type="textarea" :autosize="{ minRows: 1, maxRows: 6 }"  placeholder="备注" />
                                    </el-form-item>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    备注
                                </td>
                                
                                <td colspan="5">
                                    <el-form-item>
                                        <el-input v-model="state.tableData.备注.input1" type="textarea" :autosize="{ minRows: 1, maxRows: 6 }"  placeholder="备注" />
                                    </el-form-item>
                                </td>
                            </tr>
                            
                            

                            
                        </table>
                    </div>
                </el-form>
            </div>
			
        </div>
    </div>
</template>

<script setup lang="ts" name="visualizingLinkDemo2">
import { reactive, onMounted, onUnmounted, ref } from 'vue';
import { formatDate } from '/@/utils/formatTime';
import { NextLoading } from '/@/utils/loading';
import { useUserInfo } from '/@/stores/userInfo';
import { usePatientsInfo } from '/@/stores/patientsInfo';
const storesPat = usePatientsInfo();
import {Add,update,deleteId,tiaochabiaoInfo} from '/@/api/tiaochabiao/index'
import { storeToRefs } from 'pinia';
import { useRoute,useRouter } from 'vue-router';
import { ElMessage } from 'element-plus';
const stores = useUserInfo();
const { patientsInfo } = storeToRefs(storesPat);
const { userInfos } = storeToRefs(stores);
const router = useRouter()
const state = reactive({
    dialogTableVisible:false,
    tableData: {
        表名: '膳食调查表',
        初次调查日期:"",
        填表日期: '',
        更新日期: '',
        记录者: '陈银成',
        人员构成: {
            type: '', //只能选择独居或者家庭
            input1: '',
        },
        烹饪主要操作者: {
            type: '',
            input1: '',
        },
        食材采购: {
            type: '',
            input1: '',
        },
        食物偏好: {
            type: '',
            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 funhui=()=>{
    router.push({path:'/home'})
}
const onSubmit = () => {
  console.log('submit!')
  console.log(state.tableData)
  const info:tiaochabiaoInfo={
    id: 0,
    code: '',
    clientCode: userInfos.value.clientCode,
    patientCode: patientsInfo.value.code,
    surveryTime: '',
    surveryPerson: userInfos.value.code,
    surveryJsonBody: JSON.stringify(state.tableData),
    updateTime: formatDate(new Date(),'YYYY-mm-dd HH:MM:SS')
  }
  console.log(info)
  Add(info).then(re=>{
    console.log(re.data)
    
  })
}


onMounted(async () => {
    const query=useRoute().query
    if(query&&query.type){
        console.log(query)
        // 新增
        if(query.id=='0'){
            console.log('新增调查单')
            state.tableData.初次调查日期=formatDate(new Date(),'YYYY-mm-dd')
            state.tableData.更新日期=formatDate(new Date(),'YYYY-mm-dd')
            state.tableData.记录者=userInfos.value.userName
        }else{
            console.log('修改调查单')
            // router.push({path:'/'})
        }
    }else{
        ElMessage.warning('没有路由参数')
    }
    // if()
    // const mode={
    //     type:query.type,
    //     id:query.id
    // }
    NextLoading.done();
	
});



</script>

<style scoped 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;
}

</style>

 src/views/visualizing/demo3.vue

New file
@@ -0,0 +1,672 @@
<template>
    <div class="container" style="padding: 5px;height: 100%;overflow: auto;">
        <el-page-header @back='funhui'>
            <template #content>
                <span class="text-large font-600 mr-3"> 膳食调查表 </span>
            </template>
            <template #extra>
            <div class="flex items-center">
                <el-button size="small">取消</el-button>
                <el-button size="small" type="primary" @click="onSubmit" class="ml-2">保存</el-button>
            </div>
            </template>
        </el-page-header>
        <div style="margin-top: 10px;">
            <div>
                <el-form size="small">
                    <div  style="width: 100%">
                        <table id="tabledome" class="gridtable">
                            
                            <tr>
                                <th colspan="2">
                                    <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>

                                </th>
                                <th colspan="2">
                                    <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>
                                   
                                    
                                </th>
                                <th colspan="2">记录者:{{state.tableData.记录者}}</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">
                                    <el-form-item>
                                        <el-input v-model="state.tableData.人员构成.input1"  type="textarea" :autosize="{ minRows: 1, maxRows: 6 }" placeholder="备注" />
                                        <!-- <input type="text" v-model="state.tableData.人员构成.input1" class="input-underline" placeholder="备注"  /> -->
                                    </el-form-item>
                                </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 colspan="2">
                                    <el-form-item>
                                        <el-input v-model="state.tableData.烹饪主要操作者.input1" type="textarea" :autosize="{ minRows: 1, maxRows: 6 }"  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" type="textarea" :autosize="{ minRows: 1, maxRows: 6 }"  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" type="textarea" :autosize="{ minRows: 1, maxRows: 6 }"  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>
                                    <el-form-item label="透析日一">
                                        <el-date-picker
                                            v-model="state.tableData.三天饮食记录表.透析日1.日期"
                                            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.三天饮食记录表.透析日1.早餐"   placeholder="" />
                                    </el-form-item>
                                </td>
                                <td>
                                    <el-form-item>
                                        <el-input v-model="state.tableData.三天饮食记录表.透析日1.加餐1"  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.三天饮食记录表.透析日1.加餐2"  placeholder="" />
                                    </el-form-item>
                                </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" type="textarea"  :autosize="{ minRows: 1, maxRows: 6 }" 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" type="textarea" :autosize="{ minRows: 1, maxRows: 6 }"  placeholder="备注" />
                                    </el-form-item>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    8.每日饮水量、种类
                                </td>
                                <td colspan="2">
                                    <el-form-item>
                                        <el-input v-model="state.tableData.每日饮水量种类.input1" type="textarea" :autosize="{ minRows: 1, maxRows: 6 }"  placeholder="" />
                                    </el-form-item>
                                    
                                </td>
                                <td>
                                    9.睡眠
                                </td>
                                <td colspan="2">
                                    <el-form-item>
                                        <el-input v-model="state.tableData.睡眠.input1" type="textarea" :autosize="{ minRows: 1, maxRows: 6 }"  placeholder="备注" />
                                    </el-form-item>
                                </td>
                            
                            </tr>
                            <tr>
                                <td>
                                    10.运动
                                </td>
                                <td colspan="2">
                                    <el-form-item>
                                        <el-input v-model="state.tableData.运动.input1" type="textarea" :autosize="{ minRows: 1, maxRows: 6 }"  placeholder="备注" />
                                    </el-form-item>
                                </td>
                                <td>
                                    11.排便情况
                                </td>
                                <td colspan="2">
                                    <el-form-item>
                                        <el-input v-model="state.tableData.排便情况.input1"  type="textarea" :autosize="{ minRows: 1, maxRows: 6 }" placeholder="备注" />
                                    </el-form-item>
                                </td>
                            
                            </tr>
                            <tr>
                                <td>
                                    12.是否吸烟?
                                </td>
                                <td colspan="2">
                                    <el-form-item>
                                        <el-input v-model="state.tableData.是否吸烟.input1" type="textarea" :autosize="{ minRows: 1, maxRows: 6 }" placeholder="备注" />
                                    </el-form-item>
                                </td>
                                <td>
                                    13.是否饮酒?
                                </td>
                                <td colspan="2">
                                    <el-form-item>
                                        <el-input v-model="state.tableData.是否饮酒.input1" type="textarea" :autosize="{ minRows: 1, maxRows: 6 }" 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" type="textarea" :autosize="{ minRows: 1, maxRows: 6 }" 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" type="textarea" :autosize="{ minRows: 1, maxRows: 6 }" 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" type="textarea" :autosize="{ minRows: 1, maxRows: 6 }" 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" type="textarea" :autosize="{ minRows: 1, maxRows: 6 }" 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" type="textarea" :autosize="{ minRows: 1, maxRows: 6 }" 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" type="textarea" :autosize="{ minRows: 1, maxRows: 6 }"  placeholder="备注" />
                                    </el-form-item>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    备注
                                </td>
                                
                                <td colspan="5">
                                    <el-form-item>
                                        <el-input v-model="state.tableData.备注.input1" type="textarea" :autosize="{ minRows: 1, maxRows: 6 }"  placeholder="备注" />
                                    </el-form-item>
                                </td>
                            </tr>
                            
                            

                            
                        </table>
                    </div>
                </el-form>
            </div>
			
        </div>
    </div>
</template>

<script setup lang="ts" name="visualizingLinkDemo2">
import { reactive, onMounted, onUnmounted, ref } from 'vue';
import { formatDate } from '/@/utils/formatTime';
import { NextLoading } from '/@/utils/loading';
import { useUserInfo } from '/@/stores/userInfo';
import { usePatientsInfo } from '/@/stores/patientsInfo';
const storesPat = usePatientsInfo();
import {Add,update,deleteId,tiaochabiaoInfo} from '/@/api/tiaochabiao/index'
import { storeToRefs } from 'pinia';
import { useRoute,useRouter } from 'vue-router';
import { ElMessage } from 'element-plus';
const stores = useUserInfo();
const { patientsInfo } = storeToRefs(storesPat);
const { userInfos } = storeToRefs(stores);
const router = useRouter()
const state = reactive({
    dialogTableVisible:false,
    tableData: {
        表名: '膳食调查表',
        初次调查日期:"",
        填表日期: '',
        更新日期: '',
        记录者: '陈银成',
        人员构成: {
            type: '', //只能选择独居或者家庭
            input1: '',
        },
        烹饪主要操作者: {
            type: '',
            input1: '',
        },
        食材采购: {
            type: '',
            input1: '',
        },
        食物偏好: {
            type: '',
            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 funhui=()=>{
    router.push({path:'/home'})
}
const onSubmit = () => {
  console.log('submit!')
  console.log(state.tableData)
  const info:tiaochabiaoInfo={
    id: 0,
    code: '',
    clientCode: userInfos.value.clientCode,
    patientCode: patientsInfo.value.code,
    surveryTime: '',
    surveryPerson: userInfos.value.code,
    surveryJsonBody: JSON.stringify(state.tableData),
    updateTime: formatDate(new Date(),'YYYY-mm-dd HH:MM:SS')
  }
  console.log(info)
  Add(info).then(re=>{
    console.log(re.data)
    
  })
}


onMounted(async () => {
    const query=useRoute().query
    if(query&&query.type){
        console.log(query)
        // 新增
        if(query.id=='0'){
            console.log('新增调查单')
            state.tableData.初次调查日期=formatDate(new Date(),'YYYY-mm-dd')
            state.tableData.更新日期=formatDate(new Date(),'YYYY-mm-dd')
            state.tableData.记录者=userInfos.value.userName
        }else{
            console.log('修改调查单')
            router.push({path:'/'})
        }
    }else{
        ElMessage.warning('没有路由参数')
    }
    // if()
    // const mode={
    //     type:query.type,
    //     id:query.id
    // }
    // NextLoading.done();
	
});

// 第一步：定义子组件里面的方法
const getData = (str: string) => {
    console.log("子组件获取显示数据！" + str);
    state.loading = true

}
// 打开查看或者编辑明细
const openShow = (type: string) => {
    console.log(type)
    state.dialogTableVisible = true
}

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

</script>

<style scoped 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;
}

</style>