项目实训#4 病历生成页面

初步画出生成页面，使用样式表调整了页面结果调成了竖过来的样子，通过对话框的形式模拟了人与大模型的通话，目前还没有实现和后端的传输数据

主要功能描述:在框中患者输入自己的基本信息及其病情描述后，选择医生后提交

<script setup>
import { ref } from "vue";
import Blogpost from "@/views/Blogpost.vue";
import axios from 'axios';

let dialogVisible1 = ref(false);

const blogs = ref([
  {
    id: 1,
    title: "智能病历生成系统",
    content: "请简要描述你的病情,请尽可能完整的提供你的症状，并告诉我们你是否有相关的既往病症或药物过敏",
  },
  {
    id: 2,
    title: "感谢使用",
    content: "本系统使用chatglm进行病历自动生成，您的个人信息不会被用于其他目的",
  },
]);

const initialBlogForm = {
  title: "",
  content: "",
  doctor: "",
};

const blogForm = ref({ ...initialBlogForm });

const handleSubmit = async () => {
    
};
</script>

<template>
  <div class="container">
    <header class="header">
      生成成功后跳出一个弹窗，弹窗内容是生成的，大模型返回的病历。
      点击确定后弹窗消失并且保存到数据库
    </header>

    <div class="content">
      <div class="blog-container">
        <Blogpost v-for="blog in blogs" :key="blog.id" v-bind="blog" />
      </div>

      <form class="form" @submit.prevent="handleSubmit">
        <div class="form-group">
          <label for="content">病情描述</label>
          <textarea
            id="content"
            cols="30"
            rows="10"
            v-model="blogForm.content"
            class="description-text"
          ></textarea>
        </div>

        <div class="form-group">
          <label for="doctor-select">医生选择</label>
          <el-select v-model="blogForm.doctor" placeholder="请选择医生" class="select-doctor">
            <el-option label="李医生" value="李医生"></el-option>
            <el-option label="王医生" value="王医生"></el-option>
            <el-option label="何医生" value="何医生"></el-option>
          </el-select>
        </div>

        <el-button type="primary" class="submit-button" @click="handleSubmit">提交</el-button>
      </form>
    </div>
  </div>

  <el-dialog title="生成结果" v-model="dialogVisible1" width="30%">
    <span>这里显示病历生成结果</span>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible1 = false">好的</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<style scoped>
.container {
  margin: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.header {
  margin-bottom: 20px;
}

.content {
  width: 100%;
  max-width: 800px;
}

.blog-container {
  margin-bottom: 20px;
}

.form {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  margin-bottom: 20px;
}

.form-group {
  margin-bottom: 40px;
  width: 100%;
}

.description-text {
  width: 100%;
  box-sizing: border-box;
  margin: 20px;
}