工作遇到问题与解决办法（二）

弹出确认框

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: '已取消'})});

表格内搜索

定义搜索条件

yYpmc:"",

搜索列

<el-table-columnlabel="药品名称"width="180px"><template slot="header" slot-scope="scope">药品名称<el-inputv-model="searchYpmc"size="mini"placeholder="输入药品关键字搜索"/></template><template slot-scope="scope"><span>{{scope.row.yYpmc}}</span></template></el-table-column>

表格使用

 <el-table v-loading="ykLoading":data="ykList.filter(data => !searchYpmc || data.yYpmc.includes(searchYpmc))"@row-click="handleCurrent" height="400px">

批量添加

返回成功添加个数

elementui form 表单点击重置自动重置

<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-optionv-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-optionv-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属性值对应

queryParams: {pageNum: 1,pageSize: 10,hLxbm: null,yZlbm: null,bh: null,},
<el-form :model="queryParams"        
<el-form-item label="处方" prop="hLxbm">

重置方法

    /** 重置按钮操作 */resetQuery() {this.resetForm("queryForm");  //与ref="queryForm" 对应},

表格单元格的值-根据不同值显示不同颜色背景

<el-table-column label="标识" width="160" align="center" prop="dbbz" ><template slot-scope="scope"><el-tagv-if="scope.row.dbbz == '0'"type="warning"disable-transitions>调拨中</el-tag><el-tagv-if="scope.row.dbbz == '1'"type="success"disable-transitions>调拨完成</el-tag><el-tagv-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 合计列

定义合计列

方法

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;},

使用合计

<el-table v-loading="loadingDetil":data="crkListDetil.filter(data => !searchDetailYpmc || data.yYpmc.includes(searchDetailYpmc))":summary-method="getSummaries"show-summaryheight="400px" >

el-table 使用字典

引入字段

export default {name: "Crk",dicts: ['KSBM','Y_CDBM'],

数据表使用

        <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使用字典

引入字段

export default {name: "Crk",dicts: ['KSBM','Y_CDBM'],

this.dict.type.YP_ZLBM

element ui 时间范围

vue

<el-date-pickervalue-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>

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 实体类

    //起始时间@JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss")private Date startDate;//结束时间@JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss")private Date endDate;

**注意：**时间格式对应到前端就能传入时间格式

数据库

行变化列

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

动态表格

实体类

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;}
}

package com.qlh.yhis.mz.mzsf.vo;import com.fasterxml.jackson.annotation.JsonFormat;import java.util.Date;
import java.util.List;//门诊收费人员
public class MzSfVo {//机构idprivate 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

 List<Map<String,Object>> listMzsfVoByMzsfVo(MzSfVo mzsfVo);

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 tLEFT 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 类型不能分组或者求和，需要转换为字符串类型

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

动态表格

<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-pickervalue-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-optionv-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-optionv-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-columnv-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>

滑动开关效果

在这里插入图片描述

前端页面代码

<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>

触发方法

/** 删除按钮操作 */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;});}},

组件传值

父组件

<medicalCoverCanJt :zBahData="singleJson" />

子组件

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;});},},

传递时间

前端时间范围

导入

import moment from 'moment'; //引入js日期处理类库

事件转换为字符串类型

this.queryParams.startDateString=moment(this.queryParams.dateScope[0]).format("YYYY-MM-DD HH:mm:ss");

后端接收时间字符串，转换为时间类型

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

<el-table v-loading="tjloading":data="jkbTjList"v-model="selectedRows":row-style="selectedstyle"highlight-current-row@row-click="rowClick">

重写 highlight-current-row

<style scoped>/* 用来设置当前页面element全局table 选中某行时的背景色*/
::v-deep .el-table__body tr.current-row>td{background-color: #6ee558 !important;color: #fff;
}</style>

页面初始化第一行颜色

el-table

<el-table v-loading="tjloading":data="jkbTjList"v-model="selectedRows":row-style="selectedstyle"highlight-current-row

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;},
}