java前后端分离之Patient
Posted 潇洒哥浩浩
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了java前后端分离之Patient相关的知识，希望对你有一定的参考价值。
<template>
<div class="patient">
<el-col :span="2">
<el-button type="success" @click="openInsertUserDialog">添加患者</el-button>
</el-col>
<el-col :span="2">
<el-button type="danger" @click="removeUserDialog">批量删除</el-button>
</el-col>
<el-col :span="20">
<el-form :model="searchForm" inline>
<el-form-item label="患者名称">
<el-input v-model="searchForm.name"></el-input>
</el-form-item>
<el-form-item label="确诊日期范围">
<el-date-picker value-format="yyyy-MM-dd" v-model="searchForm.datevalue" type="daterange" align="right"
range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions"></el-date-picker>
</el-form-item>
<el-form-item label="确诊疾病">
<el-select v-model="searchForm.diseaseId" placeholder="请选择">
<el-option v-for="disease in diseases" :label="disease.name" :value="disease.id"></el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="searchData">搜索</el-button>
</el-form-item>
</el-form>
</el-col>
<el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55">
</el-table-column>
<el-table-column label="患者姓名" width="120" prop="name">
</el-table-column>
<el-table-column label="患者性别" width="120" prop="gender">
<template slot-scope="scope">
<span v-if="scope.row.gender==1">男</span>
<span v-else>女</span>
</template>
</el-table-column>
<el-table-column label="患者生日" width="120" prop="birthday">
</el-table-column>
<el-table-column label="确诊疾病" width="120" prop="cname">
</el-table-column>
<el-table-column label="确诊时间" width="120" prop="diagnosed">
</el-table-column>
<el-table-column label="死亡时间" width="120" prop="dieDate">
</el-table-column>
<el-table-column label="年龄" width="120" :formatter="ageFormatter">
</el-table-column>
<el-table-column label="是否在世" width="120">
<template slot-scope="scope">
<span v-if="scope.row.dieDate==null">在世</span>
<span v-else>离世</span>
</template>
</el-table-column>
<el-table-column label="存活时长" width="120" :formatter="cunhuoFormatter">
</el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<el-button type="danger" size="small" @click="deleteObject(scope.row)">删除</el-button>
<el-button type="success" size="small" @click="editObject(scope.row)">修改</el-button>
<el-button type="primary" size="small" @click="xiangObject(scope.row)">详情</el-button>
</template>
</el-table-column>
</el-table>
<el-row>
<el-col>
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="current"
:page-sizes="pageSizes" :page-size="pageSize" prev-text="上一页" next-text="下一页" layout="total,sizes, prev, pager, next,jumper"
:total="total">
</el-pagination>
</el-col>
</el-row>
<!-- @@@@@@@@@@@添加对话框@@@@@@@@@@@@-->
<el-dialog title="添加患者" :visible.sync="insertPatientVisible" width="60%">
<el-form :model="insertForm" :rules="addRules" ref="insertForm" label-width="100px" class="demo-ruleForm">
<el-form-item label="患者姓名" prop="name">
<el-input v-model="insertForm.name"></el-input>
</el-form-item>
<el-form-item label="患者性别" prop="gender">
<el-radio v-model="insertForm.gender" label="1">男</el-radio>
<el-radio v-model="insertForm.gender" label="0">女</el-radio>
</el-form-item>
<el-form-item label="出生日期" prop="birthday">
<el-date-picker v-model="insertForm.birthday" type="date" placeholder="选择日期" ></el-date-picker>
</el-form-item>
<el-form-item label="患者确诊疾病" prop="diseaseId">
<!-- select选择器 -->
<el-select v-model="insertForm.diseaseId" placeholder="请选择">
<el-option v-for="disease in diseases" :label="disease.name" :value="disease.id"></el-option>
</el-select>
</el-form-item>
<el-form-item label="确诊日期" prop="diagnosed">
<el-date-picker v-model="insertForm.diagnosed" type="date" placeholder="选择日期">
</el-date-picker>
</el-form-item>
<el-form-item label="当前状态" prop="dieDate">
<el-radio-group v-model="dieDateFlag">
<el-radio label="0">在世</el-radio>
<el-radio label="1">离世</el-radio>
</el-radio-group>
<el-date-picker v-if="dieDateFlag==1" v-model="insertForm.dieDate" type="date" placeholder="选择日期">
</el-date-picker>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="insertPatient(‘insertForm‘)">添加</el-button>
<el-button @click="resetForm(‘insertForm‘)">重置</el-button>
</el-form-item>
</el-form>
</el-dialog>
<!-- @@@@@@@@@@@修改对话框@@@@@@@@@@@@-->
<el-dialog title="添加患者" :visible.sync="updatePatientVisible" width="60%">
<el-form :model="updateForm" label-width="100px">
<el-form-item label="患者姓名" prop="name">
<el-input v-model="updateForm.name"></el-input>
</el-form-item>
<el-form-item label="患者性别" prop="gender">
<el-radio v-model="updateForm.gender" label="1">男</el-radio>
<el-radio v-model="updateForm.gender" label="0">女</el-radio>
</el-form-item>
<el-form-item label="出生日期" prop="birthday">
<el-date-picker v-model="updateForm.birthday" type="date" placeholder="选择日期" ></el-date-picker>
</el-form-item>
<el-form-item label="患者确诊疾病" prop="diseaseId">
<!-- select选择器 -->
<el-select v-model="updateForm.diseaseId" placeholder="请选择">
<el-option v-for="disease in diseases" :label="disease.name" :value="disease.id"></el-option>
</el-select>
</el-form-item>
<el-form-item label="确诊日期" prop="diagnosed">
<el-date-picker v-model="updateForm.diagnosed" type="date" placeholder="选择日期">
</el-date-picker>
</el-form-item>
<el-form-item label="当前状态" prop="dieDate">
<el-radio-group v-model="dieDateFlag">
<el-radio label="0">在世</el-radio>
<el-radio label="1">离世</el-radio>
</el-radio-group>
<el-date-picker v-if="dieDateFlag==1" v-model="updateForm.dieDate" type="date" placeholder="选择日期">
</el-date-picker>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="updatePatient(‘updateForm‘)">修改</el-button>
</el-form-item>
</el-form>
</el-dialog>
</div>
</template>
<script>
export default {
data() {
return {
pickerOptions: {
shortcuts: [{
text: ‘最近一周‘,
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
picker.$emit(‘pick‘, [start, end]);
}
},
{
text: ‘最近一个月‘,
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
picker.$emit(‘pick‘, [start, end]);
}
},
{
text: ‘最近三个月‘,
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
picker.$emit(‘pick‘, [start, end]);
}
}
]
},
tableData: [],
rows: [],
total: 0,
current: 1,
pageSize: 2,
pageSizes: [2, 3, 5],
searchForm: {
name: ‘‘,
datevalue: ‘‘,
start: ‘‘,
end: ‘‘,
diseaseId: ‘‘
},
dieDateFlag:‘0‘,
insertPatientVisible: false,
diseases: [],
insertForm: {
name: ‘‘,
gender: ‘1‘,
diseaseId: ‘‘,
diagnosed: ‘‘,
birthday: ‘‘,
dieDate: ‘‘
},
addRules:{
name:[{
required: true,
message: ‘请输入患者名称‘,
trigger: ‘blur‘
}],
birthday:[{
type: ‘date‘,
required: true,
message: ‘请选择日期‘,
trigger: ‘change‘
}]
},
updatePatientVisible:false,
updateForm: {
id:0,
name: ‘‘,
gender: ‘1‘,
diseaseId: ‘‘,
diagnosed: ‘‘,
birthday: ‘‘,
dieDate: ‘‘
}
}
},
created: function() {
this.initData();
this.initDisease();
},
methods: {
initData() {
this.axios.get(‘http://localhost:92/patient/list‘, {
params: {
current: this.current,
size: this.pageSize,
name: this.searchForm.name,
startDate: this.searchForm.start,
endDate: this.searchForm.end,
diseaseId: this.searchForm.diseaseId
}
}).then((response) => {
this.tableData = response.data.result.records;
this.total = response.data.result.total;
});
},
handleSizeChange(val) {
this.pageSize = val;
this.initData();
},
handleCurrentChange(val) {
this.current = val;
this.initData();
},
searchData() {
this.current = 1;
console.log(this.searchForm.datevalue);
//判断日期是否有区间范围
if (this.searchForm.datevalue && this.searchForm.datevalue instanceof Array) {
this.searchForm.start = this.searchForm.datevalue[0];
this.searchForm.end = this.searchForm.datevalue[1];
console.log(this.searchForm.start + "@@" + this.searchForm.end);
} else {
this.searchForm.start = ‘‘;
this.searchForm.end = ‘‘;
}
this.initData();
},
openInsertUserDialog() {
this.insertPatientVisible = true;
},
initDisease() {
this.axios.get(‘http://localhost:92/disease/list‘).then((response) => {
this.diseases = response.data;
});
},
// 重置按钮
resetForm(formName) {
this.$refs[formName].resetFields();
},
insertPatient(formName) {
this.$refs[formName].validate((valid) => {
if(valid){
if(this.dieDateFlag == 0){
this.insertForm.dieDate=‘‘;
console.log("@@@@@@@"+this.dieDateFlag);
}
this.axios.post(‘http://localhost:92/patient/insert‘, this.insertForm).then((response) => {
if (response.data) {
this.$message({
type: ‘success‘,
message: ‘添加患者成功‘
});
//关闭对话框
this.insertPatientVisible = false;
//重置表单
this.$refs[formName].resetFields();
//查询数据
this.initData();
}
});
}else{
return false;
}
});
},
ageFormatter(row, column, cellValue, index) {
if (row.dieDate) {
return Math.ceil((Date.parse(row.dieDate) - Date.parse(row.birthday)) / (1000 * 3600 * 24 * 365)) + "岁";
} else {
return Math.ceil((new Date().getTime() - Date.parse(row.birthday)) / (1000 * 3600 * 24 * 365)) + "岁";
}
},
cunhuoFormatter(row, column, cellValue, index) {
if (row.dieDate) {
let month = Math.floor((Date.parse(row.dieDate) - Date.parse(row.diagnosed)) / (1000 * 3600 * 24 * 30));
return month + "月";
} else {
let month = Math.floor((new Date().getTime() - Date.parse(row.diagnosed)) / (1000 * 3600 * 24 * 365));
month % 12;
return month + "月";
}
if (month % 12 == 0) {
return month / 12 + "年";
} else {
return month + "月";
}
},
handleSelectionChange(val) {
this.rows = val;
},
//批量删除
removeUserDialog() {
//判断是否有删除的数据
if (this.rows instanceof Array && this.rows.length > 0) {
this.$confirm(‘你确定要删除选中的数据吗?‘, ‘提示‘, {
confirmButtonText: ‘确定‘,
cancelButtonText: ‘取消‘,
type: ‘warning‘,
}).then(() => {
//post请求
this.axios.post(‘http://localhost:92/patient/delete‘, null, {
params: {
ids: this.rows.map(row => row.id).join(",")
//1,3,4
},
}).then((response) => {
this.$message({
type: ‘success‘,
message: ‘删除成功!‘,
});
//扩展操作
this.initData();
});
}).catch(() => {
this.$message({
type: ‘info‘,
message: ‘已取消删除‘,
});
});
} else {
this.$message({
message: ‘请选择要删除的数据‘,
type: ‘success‘,
});
}
},
//单删
deleteObject(row){
this.$confirm(‘你确定要删除选中的数据吗？‘,‘提示‘,{
confirmButtonText:‘确定‘,
cancelButtonText:‘取消‘,
type:‘warning‘
}).then((response)=>{
this.axios.post(‘http://localhost:92/patient/delete‘,null,{
params:{
ids:row.id // 1,2,4
}
}).then((response)=>{
this.$message({
message: ‘删除成功‘,
type: ‘success‘
});
//扩展操作
this.initData();
});
}).catch(()=>{
this.$message({
message: ‘已取消删除‘,
type: ‘info‘
})
})
},
//修改加回显
editObject(row){
this.updatePatientVisible=true;
Object.assign(this.updateForm,row);
if(row.gender==0){
this.updateForm.gender=‘1‘;
}else{
this.updateForm.gender=‘0‘;
}
},
updatePatient(){
if(this.dieDateFlag == 0){
this.updateForm.dieDate=‘‘;
}
this.axios.post(‘http://localhost:92/patient/update‘,this.updateForm).then((response)=>{
//关闭对话框
this.updatePatientVisible=false;
//查询数据
this.initData();
});
}
}
}
</script>
<style>
</style>
以上是关于java前后端分离之Patient的主要内容，如果未能解决你的问题，请参考以下文章