弹出确认框
js
this.$confirm('确定删除全部添加的数据吗?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
// 确定操作
this.addYpslTempList=[];
this.isSelect=false;
//删除状态
this.addMultiple = true;
this.$message({
type: 'success',
message: '删除成功'
});
}).catch(() => {
// 取消操作
this.$message({
type: 'info',
message: '已取消'
})
});
表格内搜索
定义搜索条件
js
yYpmc:"",
搜索列
js
<el-table-column
label="药品名称"
width="180px">
<template slot="header" slot-scope="scope">
药品名称
<el-input
v-model="searchYpmc"
size="mini"
placeholder="输入药品关键字搜索"/>
</template>
<template slot-scope="scope">
<span>{{scope.row.yYpmc}}</span>
</template>
</el-table-column>
表格使用
js
<el-table v-loading="ykLoading"
:data="ykList.filter(data => !searchYpmc || data.yYpmc.includes(searchYpmc))"
@row-click="handleCurrent" height="400px">
批量添加
返回成功添加个数
elementui form 表单点击重置自动重置
vue
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
<el-form-item label="处方" prop="hLxbm">
<el-select placeholder="请选择处方"
v-model="queryParams.hLxbm" clearable>
<el-option
v-for="item in dict.type.CFLX"
:key="item.value"
:value="item.value"
:label="item.label"/>
</el-select>
</el-form-item>
<el-form-item label="药品种类" prop="yZlbm">
<el-select placeholder="请选择药品种类"
v-model="queryParams.yZlbm" clearable>
<el-option
v-for="item in dict.type.YP_ZLBM"
:key="item.value"
:value="item.value"
:label="item.label"/>
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
</el-form-item>
</el-form>
form v-model绑定数据与el-form-item的props属性值对应
js
queryParams: {
pageNum: 1,
pageSize: 10,
hLxbm: null,
yZlbm: null,
bh: null,
},
<el-form :model="queryParams"
<el-form-item label="处方" prop="hLxbm">
重置方法
js
/** 重置按钮操作 */
resetQuery() {
this.resetForm("queryForm"); //与ref="queryForm" 对应
},
表格单元格的值-根据不同值显示不同颜色背景
vue
<el-table-column label="标识" width="160" align="center" prop="dbbz" >
<template slot-scope="scope">
<el-tag
v-if="scope.row.dbbz == '0'"
type="warning"
disable-transitions>调拨中</el-tag>
<el-tag
v-if="scope.row.dbbz == '1'"
type="success"
disable-transitions>调拨完成</el-tag>
<el-tag
v-if="scope.row.dbbz == '2'"
type="danger"
disable-transitions>退回</el-tag>
</template>
</el-table-column>
报错不允许从数据类型 varbinary 到 datetime2 的隐式转换。请使用 CONVERT 函数来运行此查询
**原因:**批量添加时,添加时间字段为空
**解决:**把数据库字段类型由datatime2改为datatime,xml文件的SQL参数中增加jdbcType = TIMESTAMP,例如:#{item.time, jdbcType = TIMESTAMP}。可行(适用于精度要求不那么高的情况)。
SQLserver datatime 和datetime2区别 :
DateTime字段类型对应的时间格式是 yyyy-MM-dd HH:mm:ss.fff ,3个f,精确到1毫秒(ms),示例 2014-12-03 17:06:15.433 。
DateTime2字段类型对应的时间格式是 yyyy-MM-dd HH:mm:ss.fffffff ,7个f,精确到0.1微秒(μs),示例 2014-12-03 17:23:19.2880929 。
如果用SQL的日期函数进行赋值,DateTime字段类型要用 GETDATE() ,DateTime2字段类型要用 SYSDATETIME() 。
el-table 合计列
定义合计列
方法
js
getSummaries(param) {
const { columns, data } = param;
const sums = [];
columns.forEach((column, index) => {
if (index === 0) {
sums[index] = '总计';
return;
}
const values = data.map(item => Number(item[column.property]));
if (column.property === "hCrdj" || column.property === "yCrjj") {
sums[index] = values.reduce((prev, curr) => {
const value = Number(curr);
if (!isNaN(value)) {
return prev + curr;
} else {
return prev;
}
}, 0);
sums[index] += '元';
}
});
return sums;
},
使用合计
vue
<el-table v-loading="loadingDetil"
:data="crkListDetil.filter(data => !searchDetailYpmc || data.yYpmc.includes(searchDetailYpmc))"
:summary-method="getSummaries"
show-summary
height="400px" >
el-table 使用字典
引入字段
js
export default {
name: "Crk",
dicts: ['KSBM','Y_CDBM'],
数据表使用
vue
<el-table-column label="产地" width="200px" align="center" prop="yCdbm" >
<template slot-scope="scope">
<dict-tag :options="dict.type.Y_CDBM" :value="scope.row.yCdbm"/>
</template>
</el-table-column>
js与vue使用字典
引入字段
js
export default {
name: "Crk",
dicts: ['KSBM','Y_CDBM'],
js
js
this.dict.type.YP_ZLBM
element ui 时间范围
vue
vue
<el-date-picker
value-format="yyyy-MM-dd HH:mm:ss"
v-model="queryParams.dateScope"
type="datetimerange"
start-placeholder="开始日期"
end-placeholder="结束日期"
:default-time="['12:00:00']">
</el-date-picker>
js
js
if(this.queryParams.dateScope==null || this.queryParams.dateScope==""){
this.queryParams.startDate=null;
this.queryParams.endDate=null;
}else{
this.queryParams.startDate=this.queryParams.dateScope[0];
this.queryParams.endDate=this.queryParams.dateScope[1];
}
后端java 实体类
java
//起始时间
@JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss")
private Date startDate;
//结束时间
@JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss")
private Date endDate;
**注意:**时间格式对应到 前端就能传入时间格式
数据库
行变化列
sql
SELECT m.ysxm,sum(m.H) H
FROM
(SELECT t.ysbm,u.nick_name as ysxm,
CASE WHEN t.fylb='H' THEN t.m_sfje ELSE 0 END AS 'H',
CASE WHEN t.fylb='N' THEN t.m_sfje ELSE 0 END AS 'N',
CASE WHEN t.fylb='1' THEN t.m_sfje ELSE 0 END AS '1'
FROM m_brfy as t
LEFT JOIN sys_user as u on u.user_id=t.ysbm and u.dept_id='101'
where t.m_tkbs='0' and t.dept_id = '101' ) m
where m.ysbm='11'
GROUP BY m.ysxm
动态表格
实体类
java
package com.qlh.yhis.mz.mzsf.vo;
//门诊收费对应的类型
public class FyLbVo {
//费用编码
private String fylb;
//费用名称
private String fymc;
//一个医生对应该费用总收费
private Float sumFy;
public String getFylb() {
return fylb;
}
public void setFylb(String fylb) {
this.fylb = fylb;
}
public String getFymc() {
return fymc;
}
public void setFymc(String fymc) {
this.fymc = fymc;
}
public Float getSumFy() {
return sumFy;
}
public void setSumFy(Float sumFy) {
this.sumFy = sumFy;
}
}
java
package com.qlh.yhis.mz.mzsf.vo;
import com.fasterxml.jackson.annotation.JsonFormat;
import java.util.Date;
import java.util.List;
//门诊收费人员
public class MzSfVo {
//机构id
private Long deptId;
@JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss")
private Date startDate;
@JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss")
private Date endDate;
private String ysbm;
private String ksbm;
//所用项目总和的费用金额
private Float sumFyje;
//查询条件多选科室
private String ksbms[];
//查询条件多选医生
private String ysbms[];
//查询条件多选收费项目
private String fylbs[];
//表格显示
private String fybms[];
private List<FyLbVo> lbVoList;
public Long getDeptId() {
return deptId;
}
public void setDeptId(Long deptId) {
this.deptId = deptId;
}
public Date getStartDate() {
return startDate;
}
public void setStartDate(Date startDate) {
this.startDate = startDate;
}
public Date getEndDate() {
return endDate;
}
public void setEndDate(Date endDate) {
this.endDate = endDate;
}
public String getYsbm() {
return ysbm;
}
public void setYsbm(String ysbm) {
this.ysbm = ysbm;
}
public String getKsbm() {
return ksbm;
}
public void setKsbm(String ksbm) {
this.ksbm = ksbm;
}
public Float getSumFyje() {
return sumFyje;
}
public void setSumFyje(Float sumFyje) {
this.sumFyje = sumFyje;
}
public List<FyLbVo> getLbVoList() {
return lbVoList;
}
public void setLbVoList(List<FyLbVo> lbVoList) {
this.lbVoList = lbVoList;
}
public String[] getKsbms() {
return ksbms;
}
public void setKsbms(String[] ksbms) {
this.ksbms = ksbms;
}
public String[] getYsbms() {
return ysbms;
}
public void setYsbms(String[] ysbms) {
this.ysbms = ysbms;
}
public String[] getFylbs() {
return fylbs;
}
public void setFylbs(String[] fylbs) {
this.fylbs = fylbs;
}
public String[] getFybms() {
return fybms;
}
public void setFybms(String[] fybms) {
this.fybms = fybms;
}
}
mapper
java
List<Map<String,Object>> listMzsfVoByMzsfVo(MzSfVo mzsfVo);
xml实现
xml
<select id="listMzsfVoByMzsfVo" parameterType="com.qlh.yhis.mz.mzsf.vo.MzSfVo" resultType="java.util.Map">
SELECT m.ysxm,
<foreach item="fybm" collection="fybms" separator=",">
sum(${fybm}) as ${fybm}
</foreach>
FROM
(SELECT t.ysbm,u.nick_name as ysxm,
<foreach item="fybm" collection="fybms" separator="," >
CASE WHEN t.fylb=substring(#{fybm},2,len(#{fybm})) THEN t.m_sfje ELSE 0 END AS ${fybm}
</foreach>
FROM m_brfy as t
LEFT JOIN sys_user as u on u.user_id=t.ysbm and u.dept_id=#{deptId}
<where>
<if test="startDate != null "> and t.rbrq >= #{startDate}</if>
<if test="endDate != null "> and #{endDate} >= t.rbrq </if>
and t.m_tkbs='0' and t.dept_id = #{deptId}
</where>) m
<where>
<if test="ysbms != null ">
and m.ysbm in
<foreach item="ysbm" collection="ysbms" open="(" separator="," close=")">
#{ysbm}
</foreach>
</if>
</where>
GROUP BY m.ysxm
</select>
controller
加F的意思是在表中主键是int 类型,int 类型不能分组或者求和,需要转换为字符串类型
java
@ApiOperation("查询门诊费用医生统计费用类型")
@GetMapping("/byysbm/fylb/list")
public AjaxResult listfylb(MzSfVo mzSfVo){
HashMap<String,String[]> result = new HashMap<>();
List<FyLbVo> listFylbVo = mzsfService.listFylbByFybm(mzSfVo);
//表头
String names[] =new String[listFylbVo.size()+2];
//表数据
String vals[] = new String[listFylbVo.size()+2];
names[0]="医生姓名";
vals[0]="ysxm";
//每一行的合计
names[listFylbVo.size()+1]="合计";
vals[listFylbVo.size()+1]="sumRow";
for (int i = 0; i < listFylbVo.size(); i++) {
names[i+1]=listFylbVo.get(i).getFymc();
vals[i+1]="F"+listFylbVo.get(i).getFylb();
}
result.put("name",names);
result.put("val",vals);
return success(result);
}
@ApiOperation("查询门诊费用医生统计")
@GetMapping("/byysbm/list")
public TableDataInfo listVoByYsbm(MzSfVo mzSfVo)
{
startPage();
//需要的列
List<FyLbVo> listFylbVo = mzsfService.listFylbByFybm(mzSfVo);
String fylb[] = new String[listFylbVo.size()];
//表格显示
String fybms[] = new String[listFylbVo.size()];
for (int i = 0; i < listFylbVo.size(); i++) {
fylb[i]=listFylbVo.get(i).getFylb();
fybms[i]="F"+listFylbVo.get(i).getFylb();
};
mzSfVo.setFylbs(fylb);
mzSfVo.setFybms(fybms);
List<Map<String,Object>> list = mzsfService.listMzsfVoByMzsfVo(mzSfVo);
for (int i = 0; i < list.size(); i++) {
Map<String,Object> temp = list.get(i);
float sum = 0.00f;
for (Map.Entry<String, Object> entry : temp.entrySet()) {
if(entry.getKey().substring(0,1)=="F"||"F".equals(entry.getKey().substring(0,1)))
sum += new Float(entry.getValue()+"") ;
}
temp.put("sumRow",sum);
}
return getDataTable(list);
}
vue前端
动态表格
vue
<template>
<div class="app-container">
<ta-card title="条件搜索" :bordered="false" :showExpand="false" style="margin-bottom: 18px;">
<el-form :model="queryParams"
ref="queryform"
size="small"
@submit.native.prevent
:inline="true"
label-width="80px">
<el-form-item label="查询时间" prop="dateScope">
<el-date-picker
value-format="yyyy-MM-dd HH:mm:ss"
v-model="queryParams.dateScope"
type="datetimerange"
start-placeholder="开始日期"
end-placeholder="结束日期"
:default-time="['12:00:00']">
</el-date-picker>
</el-form-item>
<el-form-item label="医生" prop="ysbms" width="70px">
<el-select v-model="queryParams.ysbms" multiple clearable placeholder="请选择医生" filterable >
<el-option
v-for="item in dict.type.SYS_USER"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="费用类型" prop="fylbs" width="70px">
<el-select v-model="queryParams.fylbs" multiple clearable placeholder="请选择费用类别" filterable >
<el-option
v-for="item in dict.type.FYLB"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item :style="isCollapse?'position: absolute;right: 4.8%;':'position: absolute;right: 1.1%;'">
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
</el-form-item>
</el-form>
</ta-card>
<ta-card title="门诊收费统计-医生统计" :bordered="false" :showExpand="false">
//动态表格
<el-table :data="tableData" stripe>
<el-table-column
v-for="(item, index) in tableHeader"
:key="index"
:prop="item.val"
:label="item.name"
>
</el-table-column>
</el-table>
<pagination
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
@pagination="getList"
/>
</ta-card>
</div>
</template>
<style lang="less">
.el-table .exit-row{
background: #f6f68b;
}
.el-table .success-row{
background: #d4f6c1;
}
</style>
<script>
import { listMzsfByYsbm,listMzsfFylbByYsbm } from '@/api/analysis/mz/mzsf'
export default {
name: 'ysbm',
dicts: ['SYS_USER','FYLB'],
data () {
return {
// 总条数
total: 0,
//表格数据加载状态
loading: false,
queryParams: {
pageNum: 1,
pageSize: 10,
dateScope:null,
startDate:null,
endDate:null,
ysbms:null,
fylbs:null,
},
tableData: [], // 获取到的表格数据
tableHeader: [] // 表头数据
}
},
created() {
this.getList();
},
methods:{
/** 搜索按钮操作 */
handleQuery() {
this.queryParams.pageNum = 1;
this.getList();
},
/** 重置按钮操作 */
resetQuery() {
this.resetForm("queryform");
this.queryParams.yTjpzh=null;
this.handleQuery();
},
//初始化查询
getList(){
this.loading=true;
if(this.queryParams.dateScope==null || this.queryParams.dateScope==""){
this.queryParams.startDate=null;
this.queryParams.endDate=null;
}else{
this.queryParams.startDate=this.queryParams.dateScope[0];
this.queryParams.endDate=this.queryParams.dateScope[1];
}
//查询表格数据
listMzsfByYsbm(this.queryParams).then(response => {
this.tableData = response.rows;
this.total = response.total;
});
//获取表头设置表头的name(key)-val(表头名字)
listMzsfFylbByYsbm(this.queryParams).then(response => {
//每次刷新表头为空
this.tableHeader=[];
let headNameArr=response.data.name; //表头名
let headValArr=response.data.val; //表头对应的字段名,也就是Java实体类对应的属性
// 转化表头数据
headNameArr.forEach((item, index) => {
this.tableHeader.push({
val: headValArr[index], // 表头对应的表头名
name: item // 表中要显示的数据
})
})
console.log(this.tableHeader);
});
this.loading = false;
},
/** 导出按钮操作 */
handleExport() {
this.download('/mz/mzrctjbb/byysbm/export', {
...this.queryParams
}, `yptj_${new Date().getTime()}.xlsx`)
},
}
}
</script>
滑动开关效果
前端页面代码
js
<el-table-column label="状态" align="center" prop="stop" >
<template v-slot="{row}" >
<el-switch v-model="row.stop"
@change="handleDelete(row)"
style="display: block"
active-color="#13ce66"
inactive-color="#ff4949"
active-text="使用"
inactive-text="停止"
:active-value='0'
:inactive-value='1'>
</el-switch>
</template>
</el-table-column>
触发方法
js
/** 删除按钮操作 */
handleDelete(row) {
const fkmc = row.fkmc;
const stop = row.stop;
if(stop==1){
this.$confirm('是否确认停止付款方式为"' + fkmc + '"的数据项?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
var fkfs = row;
fkfs.stop = 1;
updateFkStop(fkfs).then(response => {
if(response.code=200){
this.$message({
type: 'success',
message: '停止成功'
});
}else{
this.$message({
type: 'error',
message: '停止失败'
});
}
});
}).catch(() => {
// 取消操作
this.$message({
type: 'info',
message: '已取消'
})
row.stop=0;
});
}else{
this.$confirm('是否确认启用付款方式为"' + fkmc + '"的数据项?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
var fkfs = row;
fkfs.stop = 0;
updateFkStop(fkfs).then(response => {
if(response.code=200){
this.$message({
type: 'success',
message: '启用成功'
});
}else{
this.$message({
type: 'error',
message: '启用失败'
});
}
});
}).catch(() => {
// 取消操作
this.$message({
type: 'info',
message: '已取消'
})
row.stop=1;
});
}
},
组件传值
父组件
vue
<medicalCoverCanJt :zBahData="singleJson" />
子组件
js
props: {
zBahData: {
type: Object,
default: () => {
return {};
},
},
},
created() {
// 查询病案数据
getData(this.zBahData.zBah).then((res) => {
this.detailData = res.data;
});
},
//监听
watch: {
zBahData(newVal, oldVal) {
this.zBahData=newVal;
getData(this.zBahData.zBah).then((res) => {
this.detailData = res.data;
});
},
},
传递时间
前端时间范围
导入
js
import moment from 'moment'; //引入js日期处理类库
事件转换为字符串类型
js
this.queryParams.startDateString=moment(this.queryParams.dateScope[0]).format("YYYY-MM-DD HH:mm:ss");
后端接收时间字符串,转换为时间类型
java
if(null!=yyhztjbbVo.getStartDateString()||""!=yyhztjbbVo.getStartDateString()||!"".equals(yyhztjbbVo.getStartDateString())){
SimpleDateFormat formatter = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
Date date = null;
try {
date = formatter.parse(yyhztjbbVo.getStartDateString());
} catch (ParseException e) {
throw new RuntimeException(e);
}
yyhztjbbVo.setStartDate(date);
}
点击表格某一行某行颜色发生变化
el-table
vue
<el-table v-loading="tjloading"
:data="jkbTjList"
v-model="selectedRows"
:row-style="selectedstyle"
highlight-current-row
@row-click="rowClick">
重写 highlight-current-row
css
<style scoped>
/* 用来设置当前页面element全局table 选中某行时的背景色*/
::v-deep .el-table__body tr.current-row>td{
background-color: #6ee558 !important;
color: #fff;
}
</style>
页面初始化第一行颜色
el-table
vue
<el-table v-loading="tjloading"
:data="jkbTjList"
v-model="selectedRows"
:row-style="selectedstyle"
highlight-current-row
js
js
data(){
returen{
getIndex:null,
}
} ,
created() {
this.lastTjList();
},
methods: {
//页面初始展示上次提交
lastTjList(){
this.zJkpz=XXX;
},
selectedstyle ({row, rowIndex}) {
if (this.zJkpz == row.zJkpz ) {
return { "background-color": "#6ee558" };
}
},
//点击左边表格,右边表格发生变化
rowClick (val) {
this.zJkpz=val.zJkpz;
},
}