vue 项目添加功能实现

待我称王封你为后i 2022-08-28 06:56 263阅读 0赞

# 一 定义 api 模块 #

import request from '@/utils/request'
    
    export default {
        // 分页查询
        getHospitalList(current, limit, searchObj) {
            return request({
                url: `/admin/hospital/findPageHospital/${current}/${limit}`,
                method: 'post',
                data: searchObj // 使用 json 进行参数传递
            })
        },
        // 单条删除医院
        deleteHospital(id) {
            return request({
                url: `/admin/hospital/${id}`,
                method: 'delete'
            })
        },
        // 批量删除医院
        removeHospitals(idList) {
            return request({
                url: `/admin/hospital/batchRemove`,
                method: 'delete',
                data: idList
            })
        },
        // 锁定和取消锁定
        lockHospital(id, status) {
            return request({
                url: `/admin/hospital/lockHospital/${id}/${status}`,
                method: 'put'
            })
        },
        // 添加医院
        saveHospital(hospital) {
            return request({
                url: `/admin/hospital/saveHospital`,
                method: 'post',
                data: hospital
            })
        }
    }

# 二 页面部分 #

<template>
      <div class="app-container">
        <el-form label-width="120px">
          <el-form-item label="名称">
            <el-input v-model="hospital.name" />
          </el-form-item>
          <el-form-item label="省">
            <el-input v-model="hospital.province" />
          </el-form-item>
          <el-form-item label="市">
            <el-input v-model="hospital.city" />
          </el-form-item>
          <el-form-item label="区">
            <el-input v-model="hospital.district" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="saveOrUpdate">保存</el-button>
          </el-form-item>
        </el-form>
      </div>
    </template>
    
    <script>
    // 引入接口定义的 js 文件
    import hospital from "@/api/hospital"
    export default {
      data() {
        return {
          hospital: {}
        }
      },
      created() {},
      methods: {
        // 添加
        saveOrUpdate() {
          hospital.saveHospital(this.hospital).then(response => {
            // 提示
            this.$message({
              type: "success",
              message: "添加成功!"
            })
            // 跳转列表页面，使用路由跳转方式实现
            this.$router.push({ path: "/hospital/list" })
          })
        }
      }
    }
    </script>

# 三 测试效果 #

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAY2hlbmdxaXVtaW5n_size_20_color_FFFFFF_t_70_g_se_x_16][]

[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAY2hlbmdxaXVtaW5n_size_20_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/a2998d02283d47cfb9b70f6f0ac96e4e.png