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

一、构建父子工程

父

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

下拉框选择

多选

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

根据用户名更新下拉框

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

组件

<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匿名访问

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

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-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输入框验证

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 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不显示

引入

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

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

输入框输入点击回车事件

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

方法

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

动态表格

<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

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

获得药库和批库药品

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焦距事件

@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_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批量删除并更新修改时间

    <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

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

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

<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模糊查询满足一个

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

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

定义判断方法

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

使用文章来源地址https://www.toymoban.com/news/detail-629724.html

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

到了这里，关于工作遇到问题与解决办法（一）的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！