前端vue+typeScritp+elementPlus基础页面实现：

效果：

前端代码：

index.vue:

<template><el-container><el-main><el-card class="search-card" shadow="never"><transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave"><el-form :inline="true" class="demo-form-inline"><el-form-item label="专科名称:"><el-select v-model="queryParams.zhuanKeMingCheng" placeholder="请选择专科名称" filterable clearable><el-option v-for="item in zhuanKeNameList" :key="item" :label="item" :value="item" /></el-select></el-form-item><el-form-item><el-button type="primary" icon="Search" @click="onSearch">搜索</el-button></el-form-item><el-form-item><el-button type="warning" icon="Plus" @click="showAddDialog">新增</el-button></el-form-item></el-form></transition></el-card><el-card class="table-card" shadow="never"><el-table :data="tableData" border style="width: 100%"><el-table-column prop="nianFen" label="年份" width="100"></el-table-column><el-table-column prop="yiYuanMingCheng" label="医院名称" width="180"></el-table-column><el-table-column prop="zhuanKeMingCheng" label="专科名称" width="180"></el-table-column><el-table-column prop="zhuanKeLeiBie" label="专科类别" width="180"></el-table-column><el-table-column prop="neiWaiKe" label="内外科" width="180"></el-table-column><el-table-column prop="zhuanKeDaiMa" label="专科代码" width="180"></el-table-column><el-table-column label="状态" width="120"><template #default="scope"><div v-if="scope.row.zhuangTai === '1'">未开始</div><div v-else-if="scope.row.zhuangTai === '2'">进行中</div><div v-else-if="scope.row.zhuangTai === '3'">已完成</div></template></el-table-column><el-table-column align="center" label="操作"><template #default="scope"><el-button size="small" plain type="primary" :disabled="scope.row.zhuangTai!=='1'" @click="handleProcess(scope.$index, scope.row)">开始申报</el-button><el-button size="small" plain type="danger" :disabled="scope.row.zhuangTai!=='1'" @click="handleDelete(scope.$index, scope.row)">删除</el-button></template></el-table-column></el-table><pagination v-show="total>0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="fetchData" /></el-card></el-main><!-- 新增对话框 --><el-dialog v-model="addDialogVisible" title="新增申报" width="30%"><el-form :model="addForm" ref="addFormRef" :rules="rules" label-width="100px"><el-form-item required label="年份" prop="nianFen"><el-date-picker  v-model="addForm.nianFen" type="year" placeholder="选择年" format="YYYY" value-format="YYYY" ></el-date-picker></el-form-item><el-form-item required label="专科名称" prop="zhuanKeName"><el-select v-model="addForm.zhuanKeName" placeholder="请选择专科名称"><el-option v-for="item in zhuanKeNameList" :key="item" :label="item" :value="item" /></el-select></el-form-item><el-form-item required label="专科类别" prop="zhuanKeLeiBie"><el-select v-model="addForm.zhuanKeLeiBie" style="width: 150px" clearable><el-option v-for="item in zhuan_ke_type" :value="item.value" :label="item.label" /></el-select></el-form-item></el-form><template #footer><span class="dialog-footer"><el-button @click="addDialogVisible = false">取消</el-button><el-button type="primary" @click="submitAddForm">提交</el-button></span></template></el-dialog></el-container>
</template><script setup lang="ts">
import {ref, onMounted, toRefs, getCurrentInstance} from 'vue';
import {addZhuanKeShenBao,getZhuanKeNameList,getZhuanKeShenBaoList,deleteZhuanKeShenBao, startShenBao
} from '@/api/keyspecialty/zhuanKeShenBao';
import {zhuankeShenBaoVo} from "@/api/keyspecialty/zhuanKeShenBao/types";
import {ElMessage} from 'element-plus';
const queryParams = ref({pageNum: 1,pageSize: 10,zhuanKeName: "",hospName: "",
})
const {proxy} = getCurrentInstance() as ComponentInternalInstance;
const {zhuan_ke_type} = toRefs<any>(proxy?.useDict("zhuan_ke_type"));//专科名称列表
const zhuanKeNameList = ref([]);
// 表格数据
const tableData = ref<zhuankeShenBaoVo[]>([]);
const total = ref(0);
// 获取数据的函数
const fetchData = async () => {try {const response = await getZhuanKeShenBaoList(queryParams.value);tableData.value = response.rows;total.value = response.total;} catch (error) {console.error('Error fetching data:', error);}
};// 页面加载时获取数据
onMounted(() => {fetchData();getZhuanKeNameListData();
});// 查询按钮点击事件
const onSearch = () => {fetchData();console.log('查询');
};// 显示新增对话框
const addDialogVisible = ref(false);
const showAddDialog = () => {//重置表单数据addForm.value = {zhuanKeName: '',zhuanKeLeiBie: '',nianFen:'',};addDialogVisible.value = true;
};
// 新增表单数据
const addForm = ref({zhuanKeName: '',zhuanKeLeiBie: '',nianFen:'',
});
// 表单ref
const addFormRef = ref();
// 提交新增表单
const submitAddForm = () => {addFormRef.value?.validate((valid: boolean) => {if (valid) {console.log('提交新增表单', addForm.value);addZhuanKeShenBao(addForm.value.zhuanKeName, addForm.value.zhuanKeLeiBie, addForm.value.nianFen).then((res) => {if (res.code === 200) {ElMessage.success('申报成功');fetchData();addDialogVisible.value = false;} else {ElMessage.error('申报失败');ElMessage.error(res.msg);}});} else {ElMessage.error('请填写完整信息');}});
};
const rules = {nianFen: [{ required: true, message: '请选择年份', trigger: 'change' }],zhuanKeName: [{ required: true, message: '请选择专科名称', trigger: 'change' }],zhuanKeLeiBie: [{ required: true, message: '请选择专科类别', trigger: 'change' }]
};
//获取专科名称列表
const getZhuanKeNameListData = async () => {try {const response = await getZhuanKeNameList();zhuanKeNameList.value = response.data;console.log('专科名称列表', zhuanKeNameList.value);} catch (error) {console.error('Error fetching data:', error);}
}
// 申报流程按钮点击事件
const handleProcess = (index: number, row: any) => {startShenBao(row.id).then((res) => {if (res.code == 200) {ElMessage.success('申报流程开始');fetchData();} else {ElMessage.error('申报流程开始失败');fetchData();}})
};// 删除按钮点击事件
const handleDelete = (index: number, row: any) => {ElMessageBox.confirm('确认删除？', '提示', {confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning',}).then(() => {deleteZhuanKeShenBao(row.id).then((res) => {if (res.code === 200) {ElMessage.success('删除成功');fetchData();} else {ElMessage.error('删除失败');fetchData();return;}});})
};
</script>
<style scoped lang="scss">
.el-main {padding: 20px;.search-card {margin-bottom: 20px;}.table-card {padding: 10px;}
}
</style>

index.ts:

import request from '@/utils/request';
import { AxiosPromise } from 'axios';
import {zhuankeShenBaoQuery, zhuankeShenBaoVo} from "@/api/keyspecialty/zhuanKeShenBao/types";/*** 新增专科申报* @param data*/
export const addZhuanKeShenBao = (zhuanKeName: string, zhuanKeLeiBie: string) => {return request({url: 'zhuanKeShenBao/addZhuanKeShenBao/' + zhuanKeName + '/' + zhuanKeLeiBie,method: 'post',});
};
//获取专科名称列表
export const getZhuanKeNameList = () => {return request({url: 'zhuanKeShenBao/getZhuankeNameList',method: 'get',});
};
//分页查询专科申报列表
export const getZhuanKeShenBaoList = (params: zhuankeShenBaoQuery) : AxiosPromise<zhuankeShenBaoVo[]>=> {return request({url: '/zhuanKeShenBao/getZhuanKeShenBaoList',method: 'get',params,});
}

type.ts

export interface zhuankeShenBaoQuery extends PageQuery{hospName:string,zhuanKeName:string
}
export interface zhuankeShenBaoVo{yiYuanId:number,yiYuanMingCheng:string,zhuanKeDaiMa:string,zhuanKeMingCheng:string,zhuanKeLeiBie:string,zhuangTai:string,isTuiJian:string,neiWaiKe:string
}