前端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
}