效果：

前端代碼：

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
}