前端-新增医院设置信息

最新推荐文章于 2024-05-06 19:17:40 发布

小码哥呀

最新推荐文章于 2024-05-06 19:17:40 发布

阅读量243

点赞数

分类专栏：医院挂号系统

本文链接：https://blog.csdn.net/qq_46112274/article/details/117391112

版权

医院挂号系统专栏收录该内容

69 篇文章 33 订阅

订阅专栏

本文详细介绍了在前端实现医院设置信息添加的功能，包括在src/api/hospital.js中定义POST请求接口，src/views/hosp/add.vue中创建表单组件及编写JS逻辑，用于用户输入医院名称、编号、API基础路径等信息，并提供保存操作，成功后跳转到列表页面。

摘要由CSDN通过智能技术生成

前端-新增医院设置信息

1、定义api模块
2、定义页面组件脚本
- 2.1、在src/views/hosp/add.vue定义表单
- 2.2、在src/views/hosp/add.vue编写js
3、测试

1、定义api模块

在src/api/hospital.js中定义添加方法
在这里插入图片描述

//医院设置信息添加
saveHospitalSet(hospitalSet){
    return request({
        url: `/admin/hosp/hospitalSet/saveHospitalSet`,
        method: 'post',
        data: hospitalSet
    })
}

2、定义页面组件脚本

2.1、在src/views/hosp/add.vue定义表单

<template>
  <div class="app-container">
      医院设置添加
      <el-form label-width="120px">
         <el-form-item label="医院名称">
            <el-input v-model="hospitalSet.hosname"/>
         </el-form-item>
         <el-form-item label="医院编号">
            <el-input v-model="hospitalSet.hoscode"/>
         </el-form-item>
         <el-form-item label="api基础路径">
            <el-input v-model="hospitalSet.apiUrl"/>
         </el-form-item>
         <el-form-item label="联系人姓名">
            <el-input v-model="hospitalSet.contactsName"/>
         </el-form-item>
         <el-form-item label="联系人手机">
            <el-input v-model="hospitalSet.contactsPhone"/>
         </el-form-item>
         <el-form-item>
            <el-button type="primary" @click="saveOrUpdate">保存</el-button>
         </el-form-item>
      </el-form>
   </div>
</template>

在这里插入图片描述

2.2、在src/views/hosp/add.vue编写js

首先引入js
在这里插入图片描述初始化数据：
定义方法：

<script>
//引入接口定义的js文件
import hospset from '@/api/hospset.js'
export default {
    //初始化数据
    data () {
        return {
            hospitalSet:{}//初始化数据
        } 
    },
    //页面显示之前渲染
    created() {
    },
    methods: {
        saveOrUpdate(){
            hospset.saveHospitalSet(this.hospitalSet)
                .then(response=>{
                     //提示
                        this.$message({
                            type: 'success',
                            message: '添加成功!'
                        })
                        //跳转到列表页面，使用路由跳转方式实现
                        this.$router.push({path:'/hospset/list'})
                })
                .catch(error=>{

                })
        }
    }
}
</script>