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

lovewangyihui

已于 2024-03-19 11:57:13 修改

阅读量1k

点赞数 18

分类专栏：工作中遇到问题文章标签： vue.js elementui 前端

于 2023-12-15 09:11:38 首次发布

本文链接：https://blog.csdn.net/lovewangyihui/article/details/135008694

版权

工作中遇到问题专栏收录该内容

7 篇文章 0 订阅

订阅专栏

弹出确认框

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

表格使用

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

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-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 合计列

定义合计列

方法

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-summary
                height="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-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>

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 {

    //机构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

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

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

滑动开关效果

在这里插入图片描述

前端页面代码

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

vue el-dialog 第几次打开时还是返回第一次加载子组件的值

子组件在显示的时候直接加上v-if ,每次打开el-dialog值为true,关闭为false

若依vue 跳转页面获取路由参数

query方法
第一个页面

import {useRouter} from "vue-router";
const route = useRouter();
route.push({ path: 'url', query: { 参数名: 参数值 } });

第二个页面，在页面挂载时，获得参数

import { ref, onMounted } from 'vue';
import {useRouter} from "vue-router";
const route = useRouter();
const id = ref(null);
onMounted(() => {
  // 当组件挂载时，从路由的查询参数中获取 dept
  id.value = route.currentRoute.value.query.参数名;
});

注意：query是将参数显示在url上

lovewangyihui

关注

18
点赞
踩
18

收藏

觉得还不错? 一键收藏
0
评论
工作遇到问题与解决办法（二）

DateTime2字段类型对应的时间格式是 yyyy-MM-dd HH:mm:ss.fffffff ，7个f，精确到0.1微秒(μs)，示例 2014-12-03 17:23:19.2880929。DateTime字段类型对应的时间格式是 yyyy-MM-dd HH:mm:ss.fff ，3个f，精确到1毫秒(ms)，示例 2014-12-03 17:06:15.433。**注意：**时间格式对应到前端就能传入时间格式。**原因：**批量添加时，添加时间字段为空。后端接收时间字符串，转换为时间类型。
复制链接

扫一扫

专栏目录