一、构建父子工程

父

<groupId>com.ruoyi</groupId><artifactId>ruoyi</artifactId><version>3.8.5</version><modules><module>ruoyi-admin</module><module>ruoyi-framework</module><module>ruoyi-system</module><module>ruoyi-quartz</module><module>ruoyi-generator</module><module>ruoyi-common</module></modules>

孩子

//设置父亲<parent><artifactId>ruoyi</artifactId><groupId>com.ruoyi</groupId><version>3.8.5</version></parent>//孩子定义<artifactId>ruoyi-system</artifactId><modelVersion>4.0.0</modelVersion>//引用其它模块<dependency><groupId>com.ruoyi</groupId><artifactId>ruoyi-common</artifactId></dependency>

分页

startPage()只对该语句以后的第一个查询（Select）语句得到的数据进行分页。

startPage();List<SysUser> list = userService.selectUserList(user);

下拉框选择

多选

js

// 岗位选项postOptions: [],// 角色选项roleOptions: [],// 科室选项ksbmOptions: [],this.form = {postIds: [],roleIds: [],ksbms:[]};/** 机构下的所有科室 */selectKsbms(node) {const deptId = node.id;listKsbmkByDeptId(deptId).then(response => {this.ksbmOptions = response.rows;});}

根据用户名更新下拉框

//data中// 科室选项ksbmOptions: [],//from表单loginForm: {ksbm:""},//方法// 下拉框之前获取用户的科室信息并设置第一个为默认选择inputChange(){const userName = this.loginForm.username;listKsbmkByUserName(userName).then(response => {this.ksbmOptions = response.rows;if(this.ksbmOptions.length === 0){this.loginForm.ksbm = "";}else{this.loginForm.ksbm = this.ksbmOptions[0].ksbm;}});},seletChange(){this.$forceUpdate();}

组件

前后端分离设置匿名访问

前端：url请求设置没有token，白名单添加url

后端: controller层接口设置无权限访问，权限config类设置url匿名访问

前后端分离登录之后，前端保存登录信息

https://blog.csdn.net/qq_60668274/article/details/131166072

面包屑

 //切换科室之后关闭所有页面回到首页submitForm(){store.state.user.ksbm = this.form.ksbm;this.mainTabs = [];this.menuActiveName = '';this.$router.push("/index");this.closeAllTags();},//关闭所有面包屑标签closeAllTags() {store.state.tagsView.visitedViews = [];}

点击下拉框弹出弹出框

父组件

<el-dropdown-item @click.native="changeKsbmHandle()">切换科室</el-dropdown-item><!-- 组件使用子组件, ChangeKsbm vue命名转换change-ksbmref规定在本组件中用changeKsbm访问--><change-ksbm v-if="changeKsbmVisible" ref="changeKsbm"></change-ksbm>//组件映入子组件import ChangeKsbm from './changeKsbm'export default {//组件映入子组件components: {ChangeKsbm},data() {return {// 是否显示切换科室弹出层changeKsbmVisible: false}},methods:{changeKsbmHandle(){// 显示切换科室编码弹出框this.changeKsbmVisible = truethis.$nextTick(() => {//调用使用组件的init方法this.$refs.changeKsbm.init()})}}}

input输入框验证

data() {//检查是不是数字const isNum = (rule, value, callback) => {const num= /^[0-9]*$/if (!num.test(value)) {callback(new Error('只能输入整数'));}else{callback();}}// 检查CODE是否存在const checkCode = (rule, value, callback) => {if(this.flag == 1){const CODE = this.form.CODE;getSYPC(CODE).then(response => {if(response.data == null){callback();}else{callback(new Error("代码已经存在"));}});}else {callback();}}}rules: {CODE: [{ required: true, message: "代码不能为空",trigger: "blur"},{ required: true,validator: checkCode, trigger: "blur"}],NAME: [{ required: true, message: "名称不能为空", trigger: "blur"}],MRCS: [{ required: true, message: "只能输入整数",trigger: "blur"},{ required: true,validator: isNum, trigger: "blur"}],}

表单一行占三个

<el-form ref="form" :model="form" :rules="rules" label-width="80px"><el-row><el-col :span="8"><el-form-item label="代码" prop="CODE"><el-input v-model="form.CODE" placeholder="请输入代码" :disabled="inputState" /></el-form-item></el-col><el-col :span="8"><el-form-item label="名称" prop="NAME"><el-input v-model="form.NAME" placeholder="请输入名称" /></el-form-item></el-col><el-col :span="8"><el-form-item label="每日次数" prop="MRCS"><el-input v-model.number="form.MRCS"type="number"placeholder="请输入每日次数" /></el-form-item></el-col></el-row> </el-form>

计算与监听

计算data中的值

computed: {"计算属性名": {set(值){},get(){return 值}} }//其它引用计算属性名

监听

watch:{属性:'监听方法',//监听输入值变化inputValue：{handler(newName, oldName){this.watchInputValue = newName}}}new Vue({el: '#root',data: {cityName: 'shanghai'},watch: {cityName(newName, oldName) {// ...}} })

::inline=“true”

当垂直方向空间受限且表单较简单时，可以在一行内放置表单。

通过设置 inline 属性为 true 可以让表单域变为行内的表单域。

v-hasPermi=“[‘system:user:remove’]”

有权限才显示

ref本页面获取demo元素

<template><div id="app"><div ref="testDom">11111</div><button @click="getTest">获取test节点</button></div></template><script>export default {methods: {getTest() {console.log(this.$refs.testDom)}}};</script>

ref获取子组件的data数据

子组件

<template><div>{{ msg }}</div></template><script>export default {data() {return {msg: "hello world"}}}</script>

父组件

<template><div id="app">//使用子组件，定义子组件响应式为hello<HelloWorld ref="hello"/><button @click="getHello">获取helloworld组件中的值</button></div></template><script>//导入子组件import HelloWorld from "./components/HelloWorld.vue";export default {//使用components: {HelloWorld},data() {return {}},methods: {getHello() {//获得子组件data中名字为msg的数据console.log(this.$refs.hello.msg)}}};</script>

ref父组件调用子组件的方法

子组件

<template><div id="app"><HelloWorld ref="hello"/><button @click="getHello">获取helloworld组件中的值</button></div></template><script>import HelloWorld from "./components/HelloWorld.vue";export default {components: {HelloWorld},data() {return {}},methods: {getHello() {console.log(this.$refs.hello.msg)}}};</script>

父组件

<template><div id="app"><HelloWorld ref="hello"/><button @click="getHello">获取helloworld组件中的值</button></div></template><script>import HelloWorld from "./components/HelloWorld.vue";export default {components: {HelloWorld},data() {return {}},methods: {getHello() {this.$refs.hello.open();}}};</script>

子组件调用父组件

子组件

<template><div></div></template><script>export default {methods: {open() {console.log("调用了");//调用父组件方法this.$emit("refreshData");}}}</script>

父组件

<template><div id="app">//@refreshData定义给子组件调用的方法名 getData子组件具体调用父组件的方法名<HelloWorld ref="hello" @refreshData="getData"/><button @click="getHello">获取helloworld组件中的值</button></div></template><script>import HelloWorld from "./components/HelloWorld.vue";export default {components: {HelloWorld},data() {return {}},methods: {getHello() {this.$refs.hello.open()},getData() {console.log('111111')}}};</script>

el-table,:show-overflow-tooltip=“true“

当el-tabel中的内容过长，用省略号显示

v-bind = :

v-on = @

syns父子组件之间的数据双向绑定

子组件修改父组件的值

父组件

//将父组件名字为numParent的data传递给子组件名为mum<child :num.sync="numParent">

子组件

props:['num'],methods:{changeNumber(){this.$emit('updata:num',修改之后的值)}}

属性对应

prop中的name与rolue中的name对应

<el-form-item label="名称" prop="name"><el-input v-model="form.name" placeholder="请输入名称" /></el-form-item> rules: {name: [{ required: true, message: "名称不能为空", trigger: "blur" }],}

模糊查询

CODE like concat('%', #{CODE}, '%') //sqlserve 2008CODE like '%'+#{CODE}+'%' //高版本

VUE生命周期

创建

beforeCreate

实例已经初始化，获取不到DOM节点，拿不到data,methods

created

实例已经创建，获取不到DOM节点，可以使用data,methods，没有el

挂载

beforeMount

挂载节点已经创建、有el

mounted

DOM已经被渲染出来

更新

beforeUpdate

检测到数据更新，在DOM更新之前执行

updated

更新结束后执行，需要对数据更新做统一处理的；如果需要区分不同的数据更新操作可以使用$nextTick

销毁

beforeDestroy

当要销毁vue实例时，在销毁前执行

destroyed

销毁vue实例时执行

数据库设计主键自动增加

删除原来表，重新建立

当 IDENTITY_INSERT 设置为 OFF 时，不能为表 ‘ZY_YPYF’ 中的标识列插入显式值。

插入时候不能插入主键值

Treeselect不显示

引入

import Treeselect from "@riophae/vue-treeselect";import "@riophae/vue-treeselect/dist/vue-treeselect.css";components: { Treeselect },

使用

<treeselect v-model="form.deptId" :options="deptOptions" :show-count="true" placeholder="请选择归属机构" />

绑定值

在使用el-select组件的时候，el-option选项中的label和value的值分别是对应的，但是value的值需要在传参的时候，需要的是数字，不是字符串。

<el-option label="数字1" :value="1"></el-option><el-option label="字符串" value="2"></el-option>

表单验证

this.$refs["form"].validate(valid => {if (valid) {这段代码是一个表单验证的示例。当调用 this.$refs["form"].validate 方法时，它会验证表单中的输入是否符合预设的规则。如果验证通过，就会执行回调函数中的代码。在这个回调函数中，valid 参数表示表单是否通过验证。如果 valid 的值为 true，则表示表单验证通过，可以执行下一步操作，比如提交表单或显示成功消息。如果 valid 的值为 false，则表示表单验证失败，需要显示错误消息或阻止表单提交。

vue页面宽度

vue 弹出层页面宽度不够，会造成布局混乱

报错

将截断字符串或二进制数据：输入的数据长度大于数据库规定的

远程下拉框

<el-form-item label="药品编码" prop="yYpbm"><!--<el-input v-model="form.yYpbm" placeholder="请输入药品编码" />--><el-selectv-model="form.yYpbm"multiplefilterableremotereserve-keywordplaceholder="请输入药品编码":remote-method="remoteMethod":loading="optionLoading"><el-optionv-for="item in hxyfOptions":key="item.hRowid":label="item.yYpmc":value="item.yYpmc"><span style="float: left">{{ item.yYpbm }}</span><span style="float: right; color: #8492a6; font-size: 13px">{{ item.yYpmc }}</span></el-option></el-select></el-form-item>

data:return{//现有库存表hxyfOptions:[],}methods:{/** 输入药品编码获得药房药品 */remoteMethod(key){const num= /(^[0-9]+(.[0-9]{1,})" />/if (!num.test(key)) {this.$modal.msgWarning("药品编码只能输入数字");}else{this.optionLoading = true;listXyfYpbm(this.$store.state.user.deptId,key).then(response => {this.optionLoading = false;//有不同批号的药品this.hxyfOptions = response.data;});}}}

输入框输入点击回车事件

@keyup.enter.native="handleQuery"

数据表条件判断

<el-table-column label="标志" width="100" align="center" ><template slot-scope="scope"><span v-if="scope.row.hCk == 0">入库</span><span v-else>出库</span></template></el-table-column>

可编辑表格

 <el-dialog title="添加出入库" :visible.sync="addOpen" width="1300px" append-to-body><el-form :model="addForm"label-width="68px"><el-row><el-col :span="6"><el-form-item label="标志" prop="hCk"><el-radio-group v-model="addForm.hCk"><el-radio :label="1">出库</el-radio><el-radio :label="0">入库</el-radio></el-radio-group></el-form-item></el-col><el-col :span="6"><el-form-item label="往来单位" prop="wlDwmc"><el-select v-model="addForm.wlDwmc" filterable placeholder="请选择往来单位" ><el-optionv-for="item in ksbmOptions":key="item.ksbm":label="item.ksmc":value="item.ksbm"></el-option></el-select></el-form-item></el-col><el-col :span="6"><el-form-item label="入出摘要" prop="hPzzy"><el-select v-model="addForm.hPzzy" filterable placeholder="请选择入出摘要" ><el-optionv-for="item in rczyOptions":key="item.bm":label="item.mc":value="item.bm"></el-option></el-select></el-form-item></el-col><el-col :span="6"><el-buttontype="primary"plainicon="el-icon-plus"size="mini"@click="addLine"v-hasPermi="['yf:crk:add']">新增</el-button><el-buttontype="primary"plainicon="el-icon-plus"size="mini"@click="handleSave"v-hasPermi="['yf:crk:add']">保存</el-button></el-col></el-row></el-form><el-table v-loading="loading" :data="addCrkTempList" @selection-change="handleSelectionChange"><el-table-column type="selection" width="55" align="center" /><el-table-column label="标志" width="100" align="center" ><template slot-scope="scope"><span v-if="scope.row.hCk == 0">入库</span><span v-else>出库</span></template></el-table-column><el-table-column label="药品编码" width="180" align="center" ><template slot-scope="scope"><el-input v-if="scope.row.showInput" width="160" v-model="scope.row.yYpbm"@keyup.enter.native="handleSelect(scope.row)"/></template></el-table-column><el-table-column label="药品名称" align="center" prop="yYpmc" /><el-table-column label="规格" align="center" prop="yYpgg" /><el-table-column label="零售价" align="center" prop="hCrdj" /><el-table-column label="进价" align="center" prop="yCrjj" /><el-table-column label="出入数量" width="100" align="center" prop="hCrsl" ><template slot-scope="scope"><input v-if="scope.row.showInput" width="80" type="number" v-model="scope.row.hCrsl"/></template></el-table-column><el-table-column label="单位" align="center" prop="yDw" /><el-table-column label="分装数量" align="center" prop="yDwsl" /><el-table-column label="科室编码" align="center" prop="ksbm" /><el-table-column label="往来单位名称" width="100" align="center" prop="wlDwmc" /><el-table-column label="出入日期" align="center" prop="hCrrq" width="200"><template slot-scope="scope"><el-date-picker clearablev-model="scope.row.hCrrq"type="datetime"value-format="yyyy-MM-dd HH:mm:ss"placeholder="请选择出入日期"></el-date-picker></template></el-table-column><el-table-column label="帐套日期" align="center" prop="rbrq" width="180"><template slot-scope="scope"><span>{{ parseTime(scope.row.rbrq, '{y}-{m}-{d}') }}</span></template></el-table-column><el-table-column label="操作员" width="100" align="center" prop="czy" /><el-table-column label="单位编码" align="center" prop="yDwbm" /><el-table-column label="批价" align="center" prop="yYppj" /><el-table-column label="上传标识" align="center" prop="datatran" /><el-table-column label="核对凭证号" width="200" align="center" prop="hHdpzh" /><el-table-column label="凭证摘要" width="100" align="center" prop="hPzzy" /><el-table-column label="产地编码" align="center" prop="yCdbm" /><el-table-column label="批号" align="center" prop="yYpph" /><el-table-column label="个人编码" align="center" prop="grbm" /><el-table-column label="处方号" align="center" prop="hCfh" /><el-table-column label="种类" width="100" align="center" prop="yZlmc"><template slot-scope="scope"><el-select v-if="scope.row.showInput" filterable clearable v-model="scope.row.yZlmc"placeholder="请选择种类"><el-optionv-for="item in ypzlOptions":key="item.id":label="item.name":value="item.id"></el-option></el-select></template></el-table-column><el-table-column label="剂型" width="100" align="center" ><template slot-scope="scope"><el-select v-if="scope.row.showInput" filterable clearable v-model="scope.row.yJxmc"placeholder="请选择剂型"><el-optionv-for="item in ypjxOptions":key="item.id":label="item.name":value="item.id"></el-option></el-select></template></el-table-column><el-table-column label="功效" width="100" align="center" ><template slot-scope="scope"><el-select v-if="scope.row.showInput" filterable clearable v-model="scope.row.yGxmc"placeholder="请选择功效"><el-optionv-for="item in ypgxOptions":key="item.id":label="item.name":value="item.id"></el-option></el-select></template></el-table-column><el-table-column label="药房" width="100" align="center" prop="yYfmc" ><template slot-scope="scope"><el-select v-if="scope.row.showInput" filterable clearable v-model="scope.row.yYfmc" placeholder="请选择药房"><el-optionv-for="item in yfOptions":key="item.id":label="item.name":value="item.id"></el-option></el-select></template></el-table-column><el-table-column label="库存ID" align="center" prop="hRowid" /><el-table-column label="有效日期" align="center" prop="yYxrq" width="180"><template slot-scope="scope"><span>{{ parseTime(scope.row.yYxrq, '{y}-{m}-{d}') }}</span></template></el-table-column><el-table-column label="机构ID" align="center" prop="deptId" /><el-table-column label="操作" align="center" width="180" class-name="small-padding fixed-width"><template slot-scope="scope"><el-buttonsize="mini"type="text"icon="el-icon-delete"@click="handleDelete(scope.row)"v-hasPermi="['yf:crk:remove']">删除</el-button></template></el-table-column></el-table></el-dialog>

方法

/* 新增一行 */addLine(){const wldw = this.addForm.wlDwmc;if(wldw==null || wldw == ""){this.$modal.msgWarning("来往单位没有选择，不能新增！");return;}this.addCrkTempList.push({line:++this.i,showInput:true,hCk:this.addForm.hCk,wlDwmc:this.addForm.wlDwmc,czy:this.$store.state.user.name,hPzzy:this.addForm.hPzzy,ksbm:this.addForm.wlDwmc,})},

数据字典使用

引入

dicts: ['ks_lv','KSBM'],<ta-select-option v-for="item in dict.type.KSBM" :key="item.ksbm" :value="item.ksbm">{{item.ksbm}}</ta-select-option>

使用

<el-form-item label="科室统计级别" prop="ksJb"><el-selectplaceholder="请选择" style="width: 240px;"v-model="queryParams.ksJb"><el-option v-for="item in dict.type.ks_lv" :key="item.value" :value="item.value" :label="item.label"/></el-select></el-form-item>

动态表格

<template><div class="app-container"><el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px"><el-form-item label="核对凭证号" prop="hHdpzh"><el-inputv-model="queryParams.hHdpzh"placeholder="核对凭证号"clearable@keyup.enter.native="handleQuery"/></el-form-item><el-form-item label="操作员" prop="czy"><el-inputv-model="queryParams.czy"placeholder="操作员"clearable@keyup.enter.native="handleQuery"/></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><el-row :gutter="10" class="mb8"><el-col :span="1.5"><el-buttontype="primary"plainicon="el-icon-plus"size="mini"@click="handleAdd"v-hasPermi="['yf:crk:add']">新增</el-button></el-col><el-col :span="1.5"><el-buttontype="danger"plainicon="el-icon-delete"size="mini":disabled="multiple"@click="handleDelete"v-hasPermi="['yf:crk:remove']">删除</el-button></el-col><el-col :span="1.5"><el-buttontype="warning"plainicon="el-icon-download"size="mini"@click="handleExport"v-hasPermi="['yf:crk:export']">导出</el-button></el-col><right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar></el-row><el-table v-loading="loading" :data="crkList" @selection-change="handleSelectionChange"><el-table-column type="selection" width="55" align="center" /><el-table-column label="核对凭证号" align="center" prop="hHdpzh" /><el-table-column label="数量" align="center" prop="hcrkCount" /><el-table-column label="单价总和" align="center" prop="djSum" /><el-table-column label="进价总和" align="center" prop="jjSum" /><el-table-column label="操作员" align="center" prop="czy" /><el-table-column label="操作" align="center" class-name="small-padding fixed-width"><template slot-scope="scope"><el-buttonsize="mini"type="text"icon="el-icon-edit"@click="handleDetil(scope.row)"v-hasPermi="['yf:crk:edit']">详情</el-button></template></el-table-column></el-table><paginationv-show="total>0":total="total":page.sync="queryParams.pageNum":limit.sync="queryParams.pageSize"@pagination="getList"/><!-- 显示药房药品 --><el-dialog title="选择药品" :visible.sync="yfDialogopen" width="1400px" append-to-body @close="yfDialogClose"><el-table v-loading="yfLoading" :data="xyfList"highlight-current-row@current-change="handleCurrentChange"><el-table-column label="药品编码" align="center" prop="yYpbm" /><el-table-column label="药品名称" align="center" prop="yYpmc" /><el-table-column label="规格" align="center" prop="yYpgg" /><el-table-column label="当前库存" align="center" prop="hKc" ></el-table-column><el-table-column label="单位" align="center" prop="dqDw" ><template slot-scope="scope"><span v-if="scope.row.yDwsl == 1">{{ scope.row.ypDdw }}</span><span v-else>{{ scope.row.ypXdw }}</span></template></el-table-column><el-table-column label="零售价" align="center" prop="hDj" /><el-table-column label="产地" align="center" prop="cdmc" /><el-table-column label="批号" align="center" prop="yYpph" /><el-table-column label="库存ID" align="center" prop="hRowid" /><el-table-column label="有效日期" align="center" prop="yYxrq" /><el-table-column label="记录状态" align="center" prop="stop" ><template slot-scope="scope"><span v-if="scope.row.stop == 0">使用中</span><span v-else>停用</span></template></el-table-column></el-table><paginationv-show="xyfTotal>0":total="xyfTotal":page.sync="queryParamsYf.pageNum":limit.sync="queryParamsYf.pageSize"@pagination="getXyList"/></el-dialog><el-dialog title="出入库详情" :visible.sync="detilOpen" width="1300px" append-to-body><el-table v-loading="loadingDetil" :data="crkListDetil" ><el-table-column label="药品编码" width="100" align="center" prop="yYpbm" /><el-table-column label="出入单价" align="center" prop="hCrdj" /><el-table-column label="出入进价" align="center" prop="yCrjj" /><el-table-column label="出入数量" align="center" prop="hCrsl" /><el-table-column label="出入日期" align="center" prop="hCrrq" width="180"><template slot-scope="scope"><span>{{ parseTime(scope.row.hCrrq, '{y}-{m}-{d}') }}</span></template></el-table-column><el-table-column label="出入标识" width="160" align="center" prop="hCk" ><template slot-scope="scope"><span v-if="scope.row.hCk == 0">入库</span><span v-else>出库</span></template></el-table-column><el-table-column label="药房" align="center" prop="hYfmc" /><el-table-column label="出入核对" align="center" prop="hCrhd" /><el-table-column label="分装数量" align="center" prop="yDwsl" /><el-table-column label="单位编码" align="center" prop="yDwbm" /><el-table-column label="科室编码" align="center" prop="ksbm" /><el-table-column label="单位" align="center" prop="yDw" /><el-table-column label="操作员" width= "100" align="center" prop="czy" /><el-table-column label="帐套日期" align="center" prop="rbrq" width="180"><template slot-scope="scope"><span>{{ parseTime(scope.row.rbrq, '{y}-{m}-{d}') }}</span></template></el-table-column><el-table-column label="盘点标识" align="center" prop="yPdlr" /><el-table-column label="批价" align="center" prop="yYppj" /><el-table-column label="上传标识" align="center" prop="datatran" /><el-table-column label="核对凭证号" width="200" align="center" prop="hHdpzh" /><el-table-column label="产地编码" align="center" prop="yCdbm" /><el-table-column label="批号" align="center" prop="yYpph" /><el-table-column label="药品柜" align="center" prop="yphgh" /><el-table-column label="药品名称" width= "200" align="center" prop="yYpmc" /><el-table-column label="规格" width= "200" align="center" prop="yYpgg" /><el-table-column label="凭证摘要" align="center" prop="hPzzy" /><el-table-column label="个人编码" align="center" prop="grbm" /><el-table-column label="处方号" align="center" prop="hCfh" /><el-table-column label="往来单位名称" width="200" align="center" prop="wlDwmc" /><el-table-column label="种类" align="center" prop="yZlmc" /><el-table-column label="剂型" align="center" prop="yJxmc" /><el-table-column label="功效" align="center" prop="yGxmc" /><el-table-column label="库存ID" align="center" prop="hRowid" /><el-table-column label="有效日期" align="center" prop="yYxrq" width="180"><template slot-scope="scope"><span>{{ parseTime(scope.row.yYxrq, '{y}-{m}-{d}') }}</span></template></el-table-column><el-table-column label="机构ID" align="center" prop="deptId" /></el-table></el-dialog><el-dialog title="添加出入库" :visible.sync="addOpen" width="1300px" height="800px" append-to-body @close="addDialogClose"><el-form :model="addForm"label-width="68px"><el-row><el-col :span="6"><el-form-item label="标志" prop="hCk"><el-radio-group v-model="addForm.hCk"><el-radio :label="1">出库</el-radio><el-radio :label="0">入库</el-radio></el-radio-group></el-form-item></el-col><el-col :span="6"><el-form-item label="往来单位" prop="ksbm"><el-select v-model="addForm.ksbm" filterable placeholder="请选择往来单位" @change="setWldwmc"><el-optionv-for="item in dict.type.KSBM":key="item.value":label="item.label":value="item.value"></el-option></el-select></el-form-item></el-col><el-col :span="6"><el-form-item label="入出摘要" prop="hPzzy"><el-select v-model="addForm.hPzzy" filterable placeholder="请选择入出摘要" @change="setYpzl"><el-optionv-for="item in rczyOptions":key="item.bm":label="item.mc":value="item.bm"></el-option></el-select></el-form-item></el-col><el-col :span="6"><el-buttontype="primary"plainicon="el-icon-plus"size="mini"@click="addLine"v-hasPermi="['yf:crk:add']">新增</el-button><el-buttontype="primary"plainicon="el-icon-plus"size="mini"@click="handleSave"v-hasPermi="['yf:crk:add']">保存</el-button></el-col></el-row></el-form><el-table v-loading="loading" :data="addCrkTempList" @selection-change="handleSelectionChange"><el-table-column type="selection" width="55" align="center" /><el-table-column label="标志" width="100" align="center" ><template slot-scope="scope"><span v-if="scope.row.hCk == 0">入库</span><span v-else>出库</span></template></el-table-column><el-table-column label="药品编码" width="180" align="center" ><template slot-scope="scope"><el-input v-if="scope.row.showInput" width="160" v-model="scope.row.yYpbm"@keyup.enter.native="getYp(scope.row)"/></template></el-table-column><el-table-column label="药品名称" width="150" align="center" prop="yYpmc" /><el-table-column label="规格" width="150" align="center" prop="yYpgg" /><el-table-column label="零售价" align="center" prop="hCrdj" /><el-table-column label="进价" align="center" prop="yCrjj" /><el-table-column label="出入数量" width="100" align="center" prop="hCrsl" ><template slot-scope="scope"><el-input v-if="scope.row.showInput" width="80" type="number" v-model="scope.row.hCrsl"onKeypress="return(/^[0-9]*$/.test(String.fromCharCode(event.keyCode)))" /></template></el-table-column><el-table-column label="单位" align="center" prop="yDw" /><el-table-column label="分装数量" align="center" prop="yDwsl" /><el-table-column label="科室编码" align="center" prop="ksbm" /><el-table-column label="往来单位名称" width="100" align="center" prop="wlDwmc" /><el-table-column label="出入日期" align="center" prop="hCrrq" width="200"><template slot-scope="scope"><el-date-picker clearablev-model="scope.row.hCrrq"type="datetime"value-format="yyyy-MM-dd HH:mm:ss"placeholder="请选择出入日期"></el-date-picker></template></el-table-column><el-table-column label="帐套日期" align="center" prop="rbrq" width="180"><template slot-scope="scope"><span>{{ parseTime(scope.row.rbrq, '{y}-{m}-{d}') }}</span></template></el-table-column><el-table-column label="操作员" width="100" align="center" prop="czy" /><el-table-column label="单位编码" align="center" prop="yDwbm" /><el-table-column label="批价" align="center" prop="yYppj" /><el-table-column label="上传标识" align="center" prop="datatran" /><el-table-column label="核对凭证号" width="200" align="center" prop="hHdpzh" /><el-table-column label="凭证摘要" width="100" align="center" prop="hPzzy" /><el-table-column label="产地编码" align="center" prop="yCdbm" /><el-table-column label="批号" align="center" prop="yYpph" /><el-table-column label="个人编码" align="center" prop="grbm" /><el-table-column label="处方号" align="center" prop="hCfh" /><el-table-column label="种类" width="150" align="center" prop="yZlmc"><template slot-scope="scope"><el-select v-if="scope.row.showInput" filterable clearable v-model="scope.row.yZlbm"placeholder="请选择种类"><el-optionv-for="item in ypzlOptions":key="item.yZlbm":label="item.yZlmc":value="item.yZlbm"></el-option></el-select></template></el-table-column><el-table-column label="剂型" width="200" align="center" ><template slot-scope="scope"><el-select v-if="scope.row.showInput" filterable clearable v-model="scope.row.yJxbm"placeholder="请选择剂型"><el-optionv-for="item in ypjxOptions":key="item.yJxbm":label="item.yJxmc":value="item.yJxbm"></el-option></el-select></template></el-table-column><el-table-column label="功效" width="200" align="center" ><template slot-scope="scope"><el-select v-if="scope.row.showInput" filterable clearable v-model="scope.row.yGxbm"placeholder="请选择功效"><el-optionv-for="item in ypgxOptions":key="item.yGxbm":label="item.yGxmc":value="item.yGxbm"></el-option></el-select></template></el-table-column><el-table-column label="药房" width="150" align="center" prop="yYfmc" ><template slot-scope="scope"><el-select v-if="scope.row.showInput" filterable clearable v-model="scope.row.hBz" placeholder="请选择药房"><el-optionv-for="item in yfOptions":key="item.hBz":label="item.hYfmc":value="item.hBz"></el-option></el-select></template></el-table-column><el-table-column label="库存ID" align="center" prop="hRowid" /><el-table-column label="有效日期" align="center" prop="yYxrq" width="180"><template slot-scope="scope"><span>{{ parseTime(scope.row.yYxrq, '{y}-{m}-{d}') }}</span></template></el-table-column><el-table-column label="操作" align="center" width="180" class-name="small-padding fixed-width"><template slot-scope="scope"><el-buttonsize="mini"type="text"icon="el-icon-delete"@click="handleDelete(scope.row)"v-hasPermi="['yf:crk:remove']">删除</el-button></template></el-table-column></el-table></el-dialog></div></template><script>import { listMainCrk, getCrk, delCrk, addCrk, updateCrk, listCrk, showCrk, addCrkList } from '@/api/yf/crk'import { allListKsbmk } from '@/api/system/ksbmk'import { getAllRclb } from '@/api/yf/rclb'import { listXyf } from '@/api/yf/xyf'import { listYfbm } from '@/api/yf/yfbm'import { listJxbm } from '@/api/kf/jxbm'import { listYpgx } from '@/api/kf/ypgx'import { listYpzl } from '@/api/kf/ypzl'import { listYplx } from '@/api/kf/yplx'export default {name: "Crk",dicts: ['KSBM'],data() {return {//科室选项ksbmOptions:[],//入出摘要rczyOptions:[],//药品类型选项ypzlOptions:[],//药品功效选项ypgxOptions:[],//药品剂型选项ypjxOptions:[],//药房选项yfOptions:[],//批量添加数据addCrkTempList:[],//药房数据显示yfLoading: false,//药房选择数据xyfList:[],//添加之前的formaddForm:{hCk:1,wlDwmc: null,hPzzy: null,ksbm:null,},//添加弹出框yfDialogopen: false,//添加时查找的药品addYpbm: null,//批号addYpph: null,// 遮罩层loading: true,//loadingDetil: true,// 选中数组ids: [],// 选中药品批号数组hHdpzhs: [],// 非单个禁用single: true,// 非多个禁用multiple: true,// 显示搜索条件showSearch: true,// 总条数total: 0,//药房总条数量xyfTotal:0,// 药房出入库表格数据crkList: [],// 是否显示弹出层detilOpen: false,// 药房出入库表格数据crkListDetil: [],//添加addOpen:false,//当前活动行currentRow:null,// 查询参数queryParams: {pageNum: 1,pageSize: 10,czy: null,hHdpzh: null,deptId: this.$store.state.user.deptId,},// 查询参数queryParamsDetil: {pageNum: 1,pageSize: 10,hHdpzh: null,deptId: this.$store.state.user.deptId,},// 查询参数queryParamsYf: {pageNum: 1,pageSize: 10,yYpbm: null,yYpdm: null,deptId: this.$store.state.user.deptId,},// 表单参数form: {},// 表单校验rules: {}};},created() {this.getList();},methods: {/** 查询药房出入库列表 */getList() {this.loading = true;listMainCrk(this.queryParams).then(response => {this.crkList = response.rows;this.total = response.total;this.loading = false;});},// 取消按钮cancel() {this.open = false;this.reset();},/** 搜索按钮操作 */handleQuery() {this.queryParams.pageNum = 1;this.getList();},/** 重置按钮操作 */resetQuery() {this.resetForm("queryForm");this.handleQuery();},// 多选框选中数据handleSelectionChange(selection) {this.pyphs = selection.map(item => item.pyph);this.single = selection.length!==1this.multiple = !selection.length},/** 新增按钮操作 */handleAdd() {this.addOpen = true;this.getKsbm();this.getRuzy();},/** 修改按钮操作 */handleUpdate(row) {this.reset();const id = row.id || this.idsgetCrk(id).then(response => {this.form = response.data;this.open = true;this.title = "修改药房出入库";});},/** 删除按钮操作 */handleDelete(row) {const hHdpzhs = row.id || this.hHdpzhs;this.$modal.confirm('是否确认删除药房出入库核对凭证号为"' + hHdpzhs + '"的数据项？').then(function() {return delCrkhHdpzhs(hHdpzhs);}).then(() => {this.getList();this.$modal.msgSuccess("删除成功");}).catch(() => {});},/** 导出按钮操作 */handleExport() {this.download('yf/crk/export', {...this.queryParams}, `crk_${new Date().getTime()}.xlsx`)},/** 详情 */handleDetil(row){const hdpzh = row.hHdpzh;this.queryParamsDetil.hHdpzh = hdpzh;this.loadingDetil = true;listCrk(this.queryParamsDetil).then(response => {this.crkListDetil = response.rows;this.total = response.total;this.loadingDetil = false;});this.detilOpen = true;},/** 获得当前登录机构的科室 */getKsbm(){const deptId = this.$store.state.user.deptId;this.form.deptId = deptId;allListKsbmk(deptId).then(response => {this.ksbmOptions = response.data;});},/** 入出摘要 */getRuzy(){getAllRclb().then(response => {this.rczyOptions = response.data;});},/* 新增一行 */addLine(){const wldw = this.addForm.wlDwmc;if(wldw==null || wldw == ""){this.$modal.msgWarning("来往单位没有选择，不能新增！");return;}this.addCrkTempList.push({line:++this.i,showInput:true,hCk:this.addForm.hCk,wlDwmc:this.addForm.wlDwmc,czy:this.$store.state.user.name,hPzzy:this.addForm.hPzzy,ksbm:this.addForm.ksbm,})},setWldwmc(value){for(let i = 0 ,length = this.ksbmOptions.length;i<length;i++){if(this.ksbmOptions[i].ksbm == value){this.addForm.wlDwmc = this.ksbmOptions[i].ksmc;return;}}},setYpzl(value){for(let i = 0 ,length = this.rczyOptions.length;i<length;i++){if(this.rczyOptions[i].bm == value){this.addForm.hPzzy = this.rczyOptions[i].mc;return;}}},getYp(row){this.addYpbm = row.yYpbm;this.queryParamsYf.yYpbm = this.addYpbm;listXyf(this.queryParamsYf).then(response => {if (response.rows.length == 0) {this.$modal.msgError("药品编码输入错误！");return;}else{this.getXyList();this.yfDialogopen = true;}});},/** 查询药房现有库存列表 */getXyList() {this.yfLoading = true;this.queryParamsYf.yYpbm = this.addYpbm;listXyf(this.queryParamsYf).then(response => {this.xyfList = response.rows;this.xyfTotal = response.total;this.yfLoading = false;});},/** 保存出入库 */handleSave(){const timestamp = Date.parse(new Date());for(let i = 0 ,length = this.addCrkTempList.length;i<length;i++){this.addCrkTempList[i].hHdpzh = timestamp;}addCrkList(this.addCrkTempList).then(response => {if(response.code == 200){this.$modal.msgSuccess("新增成功");this.addCrkTempList = [];}else{this.$modal.msgError("新增失败！新增数据含有空数据！");}});},/** 退出药房数据表 */yfDialogClose(){this.xyfList=[];this.queryParamsYf={pageNum: 1,pageSize: 10,yYpbm: null,yYpdm: null,deptId: this.$store.state.user.deptId,};this.yfDialogopen = false;},/** 退出添加 */addDialogClose(){this.addCrkTempList = [];this.addForm = {hCk:1,wlDwmc: null,hPzzy: null,ksbm:null,};this.addOpen = false;this.getList();},/** 选中 */handleCurrentChange(val){const yYpbm = val.yYpbm;this.addYpbm = yYpbm;this.addYpph = val.yYpph;this.yfDialogClose();const length = this.addCrkTempList.lengthshowCrk(yYpbm,this.addYpph,this.$store.state.user.deptId).then(response => {const crk = response.data;this.addCrkTempList.pop();this.addCrkTempList.push({line:++this.i,showInput:true,hCk:this.addForm.hCk,wlDwmc:this.addForm.wlDwmc,hPzzy:this.addForm.hPzzy,czy:this.$store.state.user.name,ksbm:this.addForm.ksbm,yYpbm:crk.yYpbm,yYpmc:crk.yYpmc,hCrdj:crk.hCrdj,yCrjj:crk.yCrjj,yDw:crk.yDw,yDwsl:crk.yDwsl,rbrq:crk.rbrq,yYpgg:crk.yYpgg,yYpph:crk.yYpph,yYppj:crk.yYppj,yYxrq:crk.yYxrq,hRowid:crk.hRowid,yDwbm:crk.yDwbm,yCdbm:crk.yCdbm,yZlbm:crk.yZlbm,yJxbm:crk.yJxbm,yGxbm:crk.yGxbm,hBz:crk.hBz,hCrhd:0,yPdlr:0,deptId:this.$store.state.user.deptId,})});listYfbm().then(response => {this.yfOptions = response.rows;});listYpzl().then(response => {this.ypzlOptions = response.rows;});listJxbm().then(response => {this.ypjxOptions = response.rows;});listYpgx().then(response => {this.ypgxOptions = response.rows;});}}};</script>

同步方法

https 请求加 await

await checkHSlsl(pkId, this.$store.state.user.deptId).then(response => {a = response.data.yKc;});

定义方法加 async

async handleSave(){}

调用直接和原来一样

Join 连接查询（药品申领详情）

select sl.y_ypbm, sl.y_ypmc,sl.y_ypdm, sl.y_ypgg, sl.y_dwsl,sl.y_ddw,sl.y_ypdj,sl.y_ypjj,sl.pk_id,sl.h_ypph,sl.yydwbm, sl.czy,sl.djh,sl.h_slsl,sl.h_jzbs,sl.rbrq,sl.y_lyph, yk.y_kfmc,yf.h_yfmc,cd.y_cdmc,lx.y_lxmcfrom h_ypsl as sl LEFT JOIN y_kf as yk on sl.y_bz = yk.y_bz LEFT JOIN h_yf as yf on sl.h_bz = yf.h_bz LEFT JOIN y_cdbm as cd on sl.y_cdbm = cd.y_cdbm LEFT JOIN y_yplx as lx on sl.h_lxbm = lx.y_yplxwhere sl.y_lyph = #{yLyph} and sl.dept_id = #{deptId}

获得药库和批库药品

select yk.y_ypbm, yp.y_ypmc,yp.y_ypdm, yp.y_ypgg, yp.y_dwsl,yp.ddw,yp.y_ypms,yp.y_yptm,yp.y_yplx,pk.y_ypdj,pk.y_ypjj,pk.y_yppj,pk.id,pk.y_ypph,pk.y_kc,pk.y_yxrq,pk.y_dwbm as ghDwbm,pk.yydwbm,pk.y_ypzl,pk.y_cdbm,cd.y_cdmc,lx.y_lxmc,jx.y_jxmc,gh.y_dwmc as ghDwmcfrom y_xyk as ykleft JOIN y_h1 as yp onyk.y_ypbm = yp.y_ypbmleft JOIN y_yplx as lx onyp.y_yplx = lx.y_yplxright JOIN y_yppk as pk on yk.y_ypbm = pk.y_ypbmleft Join y_jxbm as jx on yp.y_jxbm = jx.y_jxbmleft Join y_ghdw as gh on pk.y_dwbm = gh.y_dwbmleft Join y_cdbm as cd on pk.y_cdbm = cd.y_cdbmwhere yk.y_ypbm = 10000001 and pk.y_kc > 0 

Vue焦距事件

@keyup.enter.native="inputChange"//回车事件@mouseleave.native="inputChange" //鼠标移开事件

批量删除

public int deleteHYpslByLyphIds(@Param("lyphIds") String[] lyphIds ,@Param("deptId") Long deptId);

mapper.xml

<delete id="deleteHYpslByLyphIds" >delete from h_ypsl where y_lyph in<foreach item="y_lyph" collection="lyphIds" open="(" separator="," close=")">#{y_lyph}</foreach>and dept_id = #{deptId} and h_jzbs = 0</delete>

el-table单元格单击事件

双击

@cell-dblclick

单击事件

 @row-click

分组聚合查询

<select id="listPdbGroup" parameterType="HPdb" resultMap="HPdbVoResult">SELECT pd.czy,pd.rbrq,pd.h_bz,pd.h_pdqr,pd.y_pdscbm,'0'as xz,u.user_name as czyName,yf.h_yfmc,pd.dept_id, sum(h_pddj*h_pdkc)as groupZcdj, sum(h_pddj*h_pdsc)as groupScdj, (sum(h_pddj*h_pdsc)- sum(h_pddj*h_pdkc)) as ykje, sum(y_ypjj*h_pdsc)as groupScjj, sum(y_ypjj*h_pdkc)as groupZcjj, min(pd.y_pdscrq) as y_pdscrq, max(pd.y_pdzzrq) as y_pdzzrqFROM h_pdb as pdleft join sys_user as u on pd.czy = u.user_idleft join h_yf as yf on pd.h_bz = yf.h_bzGROUP BY pd.czy, pd.h_bz, pd.rbrq, pd.h_pdqr, pd.y_pdscbm, u.user_name, yf.h_yfmc, pd.dept_idhaving pd.h_bz = #{hBz} and pd.dept_id=#{deptId}</select>

SQLserver批量删除并更新修改时间

<update id="batchUpdate" parameterType="java.util.List"><foreach collection="list" item="item" index="index">UPDATE h_pdb SET h_pdsc = #{item.hPdsc}, h_xgrq = CONVERT(varchar(20), GETDATE(), 120) WHERE id = #{item.id}</foreach></update>

el-input出发回车事件时会导致页面刷新

问题描述：页面搜索数据的时候，使用el-input回车事件搜索，有时会导致页面没搜索，直接重新刷新页面

原因分析：当表单只有一个文本框时，按下回车将会触发表单的提交事件， 导致页面的刷新。

1：el-input上使用回车事件

解决方法一：在el-form表单加上@submit.native.prevent

<el-form @submit.native.prevent><el-inputv-model="input" @keyup.enter.native="search1"></el-form>

解决方法二：加一个隐藏的文本框，即表单不只有一个文本框

<el-form > <el-form-item ><el-inputv-model="input" @keyup.enter.native="search1"></el-form-item><el-form-item style="margin-bottom:0;display:none;"><el-input></el-input></el-form-item></el-form>

SQLserver模糊查询满足一个

and yf.y_ypbm like '%'+#{yYpbm}+'%' or yf.y_ypdm like '%'+#{yYpbm}+'%'

批量添加时间与批量修改时间

<update id="batchUpdate" parameterType="java.util.List"><foreach collection="list" item="item" index="index">UPDATE h_pdb SET h_pdsc = #{item.hPdsc},h_pdqr = '2', h_xgrq = CONVERT(varchar(20), GETDATE(), 120) WHERE id = #{item.id}</foreach></update>

<insert id="batchHPdbVo">insert into h_pdb(y_ypbm, h_pddj, h_pdpj, h_pdkc, h_pdsc, h_pddw, y_dwsl, h_pdxkc, h_qrrq, czy, h_xgrq, h_bz, rbrq, h_pdqr, y_ypjj, y_ypph, h_ypph, datatran, yphgh, y_cdbm, y_ypmc, y_ypgg, y_zlbm, y_jxbm, y_gxbm, y_pdscbm, h_rowid, h_pdscrq, yydwbm, y_pdscrq, y_pdzzrq, y_pzwh, y_yxrq, y_scrq, h_pdkc_b, h_pdsc_b, dept_id) values<foreach item="item" index="index" collection="list" separator=",">( #{item.yYpbm}, #{item.hPddj}, #{item.hPdpj}, #{item.hPdkc}, #{item.hPdsc}, #{item.hPddw}, #{item.yDwsl}, #{item.hPdxkc}, #{item.hQrrq}, #{item.czy}, #{item.hXgrq}, #{item.hBz}, #{item.rbrq}, #{item.hPdqr}, #{item.yYpjj}, #{item.yYpph}, #{item.hYpph}, #{item.datatran}, #{item.yphgh}, #{item.yCdbm}, #{item.yYpmc}, #{item.yYpgg}, #{item.yZlbm}, #{item.yJxbm}, #{item.yGxbm}, #{item.yPdscbm}, #{item.hRowid}, #{item.hPdscrq}, #{item.yydwbm}, #{item.yPdscrq}, #{item.yPdzzrq}, #{item.yPzwh}, #{item.yYxrq}, #{item.yScrq}, #{item.hPdkcB}, #{item.hPdscB}, #{item.deptId})</foreach></insert>

单选框选择事件

<el-radio-group v-model="queryParams.hCk" @change="handleQuery"><el-radio :label="1">出库</el-radio><el-radio :label="0">入库</el-radio><el-radio :label="2">全部</el-radio></el-radio-group>

前端传入时间后端接受

java类Date 类型字段

后端接受转换

SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd");hXyfVo.setStartDate(sdf.parse(hXyfVo.getStartTime()));

不同单元格根据条件显示不同单元格背景颜色

定义css

.el-table .exit-row{background: #f6f68b !important;}.el-table .success-row{background: #d4f6c1 !important;}

定义判断方法

 //根据行数据改变行颜色tableRowClassName({row}) {if (row.hJzbs == 1) {return 'success-row';} else if (row.hJzbs == 2) {return 'exit-row';}return '';},

使用