一、构建父子工程

父

xml 复制代码

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

孩子

xml 复制代码

//设置父亲
<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）语句得到的数据进行分页。

java 复制代码

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

下拉框选择

多选

vue 复制代码

<el-form-item label="归属机构" prop="deptId">
              <treeselect 
                          v-model="form.deptId" 
                          :options="deptOptions" 
                          :show-count="true" placeholder="请选择归属机构" 				    						  @select="selectKsbms" />
</el-form-item>
<el-form-item label="选择科室">
              <el-select v-model="form.ksbms" multiple placeholder="请选择科室">
                <el-option
                  v-for="item in ksbmOptions"
                  :key="item.ksbm"
                  :label="item.ksmc"
                  :value="item.ksbm"
                  :disabled="item.status == 1"
                ></el-option>
              </el-select>
</el-form-item>

js 复制代码

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

根据用户名更新下拉框

js 复制代码

//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();
    }

组件

vue 复制代码

<el-form-item prop="username">
        <el-input
          v-model="loginForm.username"
          type="text"
          auto-complete="off"
          placeholder="请输入账户或选择账户"
          @change="inputChange"
        >
        <img :src="user" slot="prefix" class="user" alt="user">
        </el-input>
</el-form-item>
<el-form-item >
        <el-select v-model="loginForm.ksbm" placeholder="请选择科室" @change="seletChange">
          <template slot="prefix">
            <img :src="department" slot="prefix" class="user" alt="department">
          </template>
          <el-option
            v-for="item in ksbmOptions"
            :key="item.ksbm"
            :label="item.ksmc"
            :value="item.ksbm"
          ></el-option>
        </el-select>
</el-form-item>

前后端分离设置匿名访问

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

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

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

properties 复制代码

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

面包屑

vue 复制代码

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

点击下拉框弹出弹出框

父组件

js 复制代码

<el-dropdown-item @click.native="changeKsbmHandle()">切换科室</el-dropdown-item>
  <!-- 组件使用子组件, ChangeKsbm vue命名转换change-ksbm  ref规定在本组件中用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 = true
      this.$nextTick(() => {
          //调用使用组件的init方法
        this.$refs.changeKsbm.init()
      })
    }
  }
}

input输入框验证

js 复制代码

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"}
        ],
}

表单一行占三个

js 复制代码

<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中的值

js 复制代码

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

监听

js 复制代码

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

js 复制代码

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

子组件

js 复制代码

<template>
  <div>
      {{ msg }}
  </div>
</template>

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

父组件

js 复制代码

<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父组件调用子组件的方法

子组件

js 复制代码

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

父组件

js 复制代码

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

子组件调用父组件

子组件

js 复制代码

<template>
  <div>
</div>
</template>

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

父组件

js 复制代码

<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父子组件之间的数据双向绑定

子组件修改父组件的值

父组件

js 复制代码

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

子组件

js 复制代码

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

属性对应

prop中的name与rolue中的name对应

js 复制代码

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

}

模糊查询

js 复制代码

CODE like concat('%', #{CODE}, '%') //sqlserve 2008
CODE 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不显示

引入

js 复制代码

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

使用

js 复制代码

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

绑定值

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

js 复制代码

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

表单验证

js 复制代码

  this.$refs["form"].validate(valid => {
        if (valid) {
这段代码是一个表单验证的示例。当调用 this.$refs["form"].validate 方法时，它会验证表单中的输入是否符合预设的规则。如果验证通过，就会执行回调函数中的代码。

在这个回调函数中，valid 参数表示表单是否通过验证。如果 valid 的值为 true，则表示表单验证通过，可以执行下一步操作，比如提交表单或显示成功消息。如果 valid 的值为 false，则表示表单验证失败，需要显示错误消息或阻止表单提交。

vue页面宽度

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

报错

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

远程下拉框

js 复制代码

<el-form-item label="药品编码" prop="yYpbm">
<!--              <el-input v-model="form.yYpbm" placeholder="请输入药品编码" />-->
              <el-select
                v-model="form.yYpbm"
                multiple
                filterable
                remote
                reserve-keyword
                placeholder="请输入药品编码"
                :remote-method="remoteMethod"
                :loading="optionLoading">
                <el-option
                  v-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>

js 复制代码

data:
return{
      //现有库存表
      hxyfOptions:[],
}
methods:{
    /** 输入药品编码获得药房药品 */
    remoteMethod(key){
      const num= /(^[0-9]+(.[0-9]{1,})?$)|(^[0-9]*$)/
      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;
          }
        );
      }
    }
}

输入框输入点击回车事件

js 复制代码

@keyup.enter.native="handleQuery"

数据表条件判断

js 复制代码

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

可编辑表格

js 复制代码

 <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-option
                  v-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-option
                  v-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-button
              type="primary"
              plain
              icon="el-icon-plus"
              size="mini"
              @click="addLine"
              v-hasPermi="['yf:crk:add']"
            >新增</el-button>
            <el-button
              type="primary"
              plain
              icon="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 clearable
                            v-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-option
                v-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-option
                v-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-option
                v-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-option
                v-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-button
              size="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>

方法

js 复制代码

/* 新增一行 */
    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,
      })
    },

数据字典使用

引入

js 复制代码

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>

使用

js 复制代码

          <el-form-item label="科室统计级别" prop="ksJb">
            <el-select  placeholder="请选择" 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>

动态表格

js 复制代码

<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-input
          v-model="queryParams.hHdpzh"
          placeholder="核对凭证号"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="操作员" prop="czy">
        <el-input
          v-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-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          v-hasPermi="['yf:crk:add']"
        >新增</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="danger"
          plain
          icon="el-icon-delete"
          size="mini"
          :disabled="multiple"
          @click="handleDelete"
          v-hasPermi="['yf:crk:remove']"
        >删除</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="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-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleDetil(scope.row)"
            v-hasPermi="['yf:crk:edit']"
          >详情</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-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>
      <pagination
        v-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-option
                  v-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-option
                  v-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-button
              type="primary"
              plain
              icon="el-icon-plus"
              size="mini"
              @click="addLine"
              v-hasPermi="['yf:crk:add']"
            >新增</el-button>
            <el-button
              type="primary"
              plain
              icon="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 clearable
                            v-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-option
                v-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-option
                v-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-option
                v-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-option
                v-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-button
              size="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:[],
      //添加之前的form
      addForm:{
        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!==1
      this.multiple = !selection.length
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.addOpen = true;
      this.getKsbm();
      this.getRuzy();

    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const id = row.id || this.ids
      getCrk(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.length
      showCrk(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

js 复制代码

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

定义方法加 async

js 复制代码

async handleSave(){}

调用直接和原来一样

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

sql 复制代码

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_lxmc
        from 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_yplx
        where sl.y_lyph = #{yLyph} and sl.dept_id = #{deptId}

获得药库和批库药品

sql 复制代码

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 ghDwmc
from y_xyk as yk
left JOIN y_h1 as yp on  yk.y_ypbm = yp.y_ypbm
left JOIN y_yplx as lx on  yp.y_yplx = lx.y_yplx
right JOIN y_yppk as pk on yk.y_ypbm = pk.y_ypbm
left Join y_jxbm as jx on yp.y_jxbm = jx.y_jxbm
left Join y_ghdw as gh on pk.y_dwbm = gh.y_dwbm
left Join y_cdbm as cd on pk.y_cdbm = cd.y_cdbm
where yk.y_ypbm = 10000001 and pk.y_kc > 0

Vue焦距事件

js 复制代码

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

批量删除

java 复制代码

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

mapper.xml

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

分组聚合查询

sql 复制代码

    <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_pdzzrq
        FROM h_pdb as pd
        left join sys_user as u on pd.czy = u.user_id
        left join h_yf as yf on pd.h_bz = yf.h_bz
        GROUP BY pd.czy,
                 pd.h_bz,
                 pd.rbrq,
                 pd.h_pdqr,
                 pd.y_pdscbm,
                 u.user_name,
                 yf.h_yfmc,
                 pd.dept_id
        having pd.h_bz = #{hBz} and pd.dept_id=#{deptId}
    </select>

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

xml 复制代码

    <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-input v-model="input" @keyup.enter.native="search1">

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

xml 复制代码

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

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

xml 复制代码

<el-form >
     <el-form-item >
      <el-input  v-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模糊查询满足一个

sql 复制代码

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

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

xml 复制代码

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

xml 复制代码

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

单选框选择事件

js 复制代码

<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 类型字段

后端接受转换

java 复制代码

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

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

定义css

css 复制代码

<style lang="less">
.el-table .exit-row{
  background: #f6f68b !important;
}
.el-table .success-row{
  background: #d4f6c1 !important;
}
</style>

定义判断方法

js 复制代码

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

使用

vue 复制代码

  <el-table v-loading="loading"
              :data="ypslList"
              @selection-change="handleSelectionChange"
              style="width: 100%"
              :stripe="false"
              :row-class-name="tableRowClassName"
              height="400px">

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

一、构建父子工程

分页

下拉框选择

前后端分离设置匿名访问

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

点击下拉框弹出弹出框

input输入框验证

计算与监听

属性对应

模糊查询

VUE生命周期

创建

beforeCreate

created

挂载

beforeMount

mounted

更新

beforeUpdate

updated

销毁

beforeDestroy

destroyed

数据库设计主键自动增加

Treeselect不显示

绑定值

表单验证

vue页面宽度

报错

远程下拉框

输入框输入点击回车事件

数据表条件判断

可编辑表格

数据字典使用

同步方法

Vue焦距事件

批量删除

el-table单元格单击事件

分组聚合查询

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

SQLserver模糊查询满足一个

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

单选框选择事件

前端传入时间后端接受

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