效果：
前端代码：
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
}
