vue之a-table中如何保留选中的数据以及清空选中的数据

一. 保留选中的数据

1. el-table里面添加:row-key="(row) => row.inId"

2. el-table-column里面添加:reserve-selection="true""

 <el-table  @selection-change="handleSelectionChange" :row-key="(row) => row.inId">
      <el-table-column type="selection" width="55" align="center" :reserve-selection="true"/>
       el-table>

二. 清空选中的数据

1. table里面添加ref="inOrderTable"" 的命名

 <el-table ref="inOrderTable"  @selection-change="handleSelectionChange" :row-key="(row) => row.inId">
      <el-table-column type="selection" width="55" align="center" :reserve-selection="true"/>
       el-table>

2. js里面的操作

 //清空选中的值
    proxy.$refs.inOrderTable.clearSelection()

三. 全部代码

<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="医院" prop="hospitalName">
        <el-input
            v-model="queryParams.hospitalName"
            placeholder="医院"
            clearable
            @keyup.enter="handleQuery"
        />
      el-form-item>
      <el-form-item label="院区" prop="areaName">
        <el-input
            v-model="queryParams.areaName"
            placeholder="院区"
            clearable
            @keyup.enter="handleQuery"
        />
      el-form-item>
      <el-form-item label="部门" prop="deptName">
        <el-input
            v-model="queryParams.deptName"
            placeholder="部门"
            clearable
            @keyup.enter="handleQuery"
        />
      el-form-item>
      <el-form-item label="创建时间">

        <el-date-picker
            v-model="queryParams.createTime"
            style="width:100%"
            @input="$forceUpdate()"
            type="date"
            placeholder="选择日期"
            format="YYYY-MM-DD"
        >
        el-date-picker>
      el-form-item>

      <el-form-item label="供应商" prop="supplierName">
        <el-select v-model="queryParams.supplierName"
                   autocomplete="off"
                   filterable remote reserve-keyword clearable allow-create
                   placeholder="供应商名称" style="width: 100%"
                   :remote-method="getCompanyName"
                   @change="selectChange"
        >
          <el-option
              v-for="item in supplierList"
              :key="item.supplierId"
              :label="item.supplierName"
              :value="item">
          el-option>
        el-select>
      el-form-item>

      <el-form-item label="物资类型" prop="goodsTypeKey">
        <el-select v-model="queryParams.goodsTypeKey" placeholder="请选择物资类型" class="w-full">
          <el-option
              v-for="dict in goods_type"
              :key="dict.value"
              :label="dict.label"
              :value="parseInt(dict.value)"
          >el-option>
        el-select>
      el-form-item>
      <el-form-item>
        <el-button type="primary" icon="Search" @click="handleQuery">搜索el-button>
        <el-button icon="Refresh" @click="resetQuery">重置el-button>
      el-form-item>
    el-form>

    <el-row :gutter="10" class="mb8 min-height-32">
      <el-col :span="1.5">
        <el-button
            type="primary"
            plain
            icon="Plus"
            @click="handleAddInOrder"
            v-hasPermi="['phbusiness:in:add']"
        >新增
        el-button>
      el-col>
      <el-col :span="1.5">
        <el-button
            type="danger"
            plain
            icon="Delete"
            :disabled="multiple"
            @click="handleDelete"
            v-hasPermi="['phbusiness:in:remove']"
        >删除
        el-button>
      el-col>
      <right-toolbar v-model:showSearch="showSearch" @queryTable="getList">right-toolbar>
    el-row>

    <el-table v-loading="loading" ref="inOrderTable" :data="inboundList" @selection-change="handleSelectionChange" :row-key="(row) => row.inId">
      <el-table-column type="selection" width="55" align="center" :reserve-selection="true"/>
      <el-table-column label="入库订单ID" align="center" prop="inId"/>
      <el-table-column label="医院" align="center" prop="hospitalName"/>
      <el-table-column label="入库单号" align="center" prop="inNo"/>
      <el-table-column label="部门名称" align="center" prop="deptName"/>
      <el-table-column label="创建时间" align="center" prop="createTime" width="180">
        <template #default="scope">
          <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d}') }}span>
        template>
      el-table-column>
      <el-table-column label="创建人" align="center" prop="createBy"/>
      <el-table-column label="确认人" align="center" prop="confirmManName"/>
      <el-table-column label="单据状态" align="center" prop="genCodeFlag">
        <template #default="scope">
          <dict-tag :options="water_in_status" :value="scope.row.genCodeFlag"/>
        template>
      el-table-column>
      <el-table-column label="供应商" align="center" prop="supplierName"/>
      <el-table-column label="物资类型" align="center" prop="goodsTypeKey">
        <template #default="scope">
          <dict-tag :options="goods_type" :value="scope.row.goodsTypeKey"/>
        template>
      el-table-column>
      <el-table-column label="金额" align="center" prop="amount"/>
    el-table>

    <pagination
        v-show="total>0"
        :total="total"
        v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize"
        @pagination="getList"
    />

    <div class="app-container-dtl">
      
      <el-row :gutter="10" class="mb8 min-height-32">
        <el-col :span="1.5">
          <el-button
              type="primary"
              plain
              icon="Plus"
              :disabled="single"
              @click="handleDtlAdd"
              v-hasPermi="['phbusiness:indtl:add']"
          >新增一行
          el-button>
        el-col>
        <el-col :span="1.5">
          <el-button
              type="success"
              plain
              icon="Edit"
              :disabled="singleDtl"
              @click="handleDtlUpdate"
              v-hasPermi="['phbusiness:indtl:edit']"
          >修改一行
          el-button>
        el-col>
        <el-col :span="1.5">
          <el-button
              type="danger"
              plain
              icon="Delete"
              :disabled="multipleDtl"
              @click="handleDtlDelete"
              v-hasPermi="['phbusiness:indtl:remove']"
          >删除明细
          el-button>
        el-col>
      el-row>
      
      <el-table v-loading="loading" :data="dtlList" @selection-change="handleDtlSelectionChange">
        <el-table-column type="selection" width="55" align="center"/>
        <el-table-column label="ID" align="center" prop="inDtlId"/>
        
        <el-table-column label="物资编码" align="center" prop="tGoods.goodsNo" width="180"/>
        <el-table-column label="物资规格" align="center" prop="tGoods.goodsSpec" width="180"/>
        <el-table-column label="生产厂家" align="center" prop="tGoods.manufacturerName" width="300"/>
        <el-table-column label="入库数量" align="center" prop="goodsqty"/>
        <el-table-column label="基本单位" align="center" prop="goodsUnit"/>
        <el-table-column label="批号" align="center" prop="lotno" width="150"/>
        <el-table-column label="生产日期" align="center" prop="prodDate" width="180">
          <template #default="scope">
            <span>{{ parseTime(scope.row.prodDate, '{y}-{m}-{d}') }}span>
          template>
        el-table-column>
        <el-table-column label="有效期" align="center" prop="validDate" width="180">
          <template #default="scope">
            <span>{{ parseTime(scope.row.validDate, '{y}-{m}-{d}') }}span>
          template>
        el-table-column>
        <el-table-column label="灭菌批号" align="center" prop="killLotno"/>
        <el-table-column label="灭菌日期" align="center" prop="killDate" width="180">
          <template #default="scope">
            <span>{{ parseTime(scope.row.killDate, '{y}-{m}-{d}') }}span>
          template>
        el-table-column>
        <el-table-column label="灭菌有效期至" align="center" prop="killValidDate" width="180">
          <template #default="scope">
            <span>{{ parseTime(scope.row.killValidDate, '{y}-{m}-{d}') }}span>
          template>
        el-table-column>
        <el-table-column label="单价" align="center" prop="price"/>
        <el-table-column label="金额" align="center" prop="total"/>
        <el-table-column label="注册证号" align="center" prop="registNo" width="300"/>
        <el-table-column label="批准文号" align="center" prop="approvedocNo" width="300"/>
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width" fixed="right" width="150">
          <template #default="scope">
            <el-button
                type="text"
                icon="Edit"
                @click="handleDtlUpdate(scope.row)"
                v-hasPermi="['phbusiness:indtl:edit']"
            >修改
            el-button>
            <el-button
                type="text"
                icon="Delete"
                @click="handleDtlDelete(scope.row)"
                v-hasPermi="['phbusiness:indtl:remove']"
            >删除
            el-button>
          template>
        el-table-column>
      el-table>
      <pagination
          v-show="totalDtl>0"
          :total="totalDtl"
          v-model:page="queryDtlParams.pageNum"
          v-model:limit="queryDtlParams.pageSize"
          @pagination="getDtlList"
      />

      <el-dialog :title="titleDtl" v-model="openDtl" width="700px" append-to-body>
        <el-form ref="dtlRef" :model="formDtl" :rules="rulesDtl" label-width="120px">
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="物资" prop="goodsName">
                <el-select v-model="formDtl.goodsName" autocomplete="off" filterable remote reserve-keyword clearable
                           allow-create
                           placeholder="物资名称"
                           style="width: 100%"
                           :remote-method="getGoodsCompanyName"
                           @change="selectGoodsChange"
                >
                  <el-option
                      v-for="item in goodsList"
                      :key="item.goodsId"
                      :label="item.goodsName"
                      :value="item">
                  el-option>
                el-select>
              el-form-item>
            el-col>
            <el-col :span="12">
              <el-form-item label="基本单位" prop="goodsUnit">
                <el-input v-model="formDtl.goodsUnit" placeholder="请输入基本单位" disabled/>
              el-form-item>
            el-col>
          el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="定数包ID" prop="packDetailId">
                <el-input v-model="formDtl.packDetailId" placeholder="请输入定数包ID" disabled/>
              el-form-item>
            el-col>
            <el-col :span="12">
              <el-form-item label="整件系数" prop="goodsPackSize">
                <el-input v-model="formDtl.goodsPackSize" placeholder="请输入整件系数" disabled/>
              el-form-item>
            el-col>
          el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="整件数量" prop="goodspackqty">
                <el-input v-model="formDtl.goodspackqty" placeholder="请输入数量" disabled/>
              el-form-item>
            el-col>
            <el-col :span="12">
              <el-form-item label="单价" prop="price">
                <el-input v-model="formDtl.price" placeholder="请输入单价" disabled/>
              el-form-item>
            el-col>
          el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="入库数量" prop="goodsqty">
                <el-input v-model="formDtl.goodsqty" placeholder="入库数量" @blur="goodsqtySum"/>
              el-form-item>
            el-col>
            <el-col :span="12">
              <el-form-item label="金额" prop="total">
                <el-input v-model="formDtl.total" placeholder="请输入金额" disabled/>
              el-form-item>
            el-col>
          el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="批号" prop="lotno">
                <el-input v-model="formDtl.lotno" placeholder="批号"/>
              el-form-item>
            el-col>
            <el-col :span="12">
              <el-form-item label="注册证号" prop="registNo">
                <el-input v-model="formDtl.registNo" placeholder="请输入注册证号" disabled/>
              el-form-item>
            el-col>
          el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="生产批件号" prop="prodLicenseNo">
                <el-input v-model="formDtl.prodLicenseNo" placeholder="请输入生产批件号"/>
              el-form-item>
            el-col>
            <el-col :span="12">
              <el-form-item label="发票日期" prop="invDate">
                <el-date-picker clearable
                                v-model="formDtl.prodDate"
                                type="date" class="w-full"
                                value-format="YYYY-MM-DD"
                                placeholder="选择发票日期">
                el-date-picker>
              el-form-item>
            el-col>
          el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="发票代码" prop="invFirstno">
                <el-input v-model="formDtl.invFirstno" placeholder="请输入发票代码"/>
              el-form-item>
            el-col>
            <el-col :span="12">
              <el-form-item label="发票号码" prop="invNo">
                <el-input v-model="formDtl.invNo" placeholder="请输入发票号码"/>
              el-form-item>
            el-col>
          el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="发票总金额" prop="invTotal">
                <el-input v-model="formDtl.invTotal" placeholder="请输入发票总金额"/>
              el-form-item>
            el-col>
            <el-col :span="12">
              <el-form-item label="发票行金额" prop="invTotalline">
                <el-input v-model="formDtl.invTotalline" placeholder="请输入发票行金额"/>
              el-form-item>
            el-col>
          el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="生产日期" prop="prodDate">
                <el-date-picker clearable
                                v-model="formDtl.prodDate"
                                type="date" class="w-full"
                                value-format="YYYY-MM-DD"
                                placeholder="选择生产日期">
                el-date-picker>
              el-form-item>
            el-col>
            <el-col :span="12">
              <el-form-item label="有效期至" prop="validDate">
                <el-date-picker clearable
                                v-model="formDtl.validDate"
                                type="date" class="w-full"
                                value-format="YYYY-MM-DD"
                                placeholder="选择有效期至">
                el-date-picker>
              el-form-item>
            el-col>
          el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="灭菌日期" prop="killDate">
                <el-date-picker clearable
                                v-model="formDtl.killDate"
                                type="date" class="w-full"
                                value-format="YYYY-MM-DD"
                                placeholder="选择灭菌日期">
                el-date-picker>
              el-form-item>
            el-col>
            <el-col :span="12">
              <el-form-item label="灭菌有效期至" prop="killValidDate">
                <el-date-picker clearable
                                v-model="formDtl.killValidDate"
                                type="date" class="w-full"
                                value-format="YYYY-MM-DD"
                                placeholder="选择灭菌有效期至">
                el-date-picker>
              el-form-item>
            el-col>
          el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="灭菌批号" prop="killLotno">
                <el-input v-model="formDtl.killLotno" placeholder="请输入灭菌批号"/>
              el-form-item>
            el-col>
            <el-col :span="12">
              <el-form-item label="备注" prop="remark">
                <el-input v-model="formDtl.remark" type="textarea" placeholder="请输入内容"/>
              el-form-item>
            el-col>
          el-row>
        el-form>
        <template #footer>
          <div class="dialog-footer">
            <el-button type="primary" @click="submitFormDtl">确 定el-button>
            <el-button @click="cancelDtl">取 消el-button>
          div>
        template>
      el-dialog>
    div>
  div>
template>


<script setup name="Inbound">
import {listInbound, getInbound, delInbound, addInbound, updateInbound} from "@/api/spd/phbusiness/warehInOrder";
import {flexColumnWidth, maxColumnWidth} from '@/hooks/useFlexColumnWidth.js'
import ImportExcel from "@/components/common/importExcel";
import {getLoginUser} from "@/api/system/user";//获取用户信息
import {listSupplier} from "@/api/spd/basic/supplier";// 供应商
import {
  listInbounddtl,
  getInbounddtl,
  addInbounddtl,
  updateInbounddtl,
  delInbounddtl,
  updateInStock
} from "@/api/spd/phbusiness/warehInOrderDtl";

const {proxy} = getCurrentInstance();
const {goods_type, water_in_status} = proxy.useDict('goods_type', 'water_in_status');
const inboundList = ref([]);
const loginUserList = ref([]);//登录信息保存
const supplierList = ref([]);//供应商集合
const open = ref(false);
const loading = ref(true);
const showSearch = ref(true);
const ids = ref([]);
const single = ref(true);
const multiple = ref(true);
const total = ref(0);
const title = ref("");

const data = reactive({
  //供应商查询
  supplierParams: {
    pageNum: 1,
    pageSize: 5,
    supplierId: null,
    supplierName: null,
    isSupplier: '1',
  },
  form: {},
  //查询条件
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    supplierId: null,
    createTime: new Date(),
  },
  rules: {
    hospitalName: [
      {required: true, message: "医院名称不能为空", trigger: "blur"}
    ],
    areaName: [
      {required: true, message: "院区名称不能为空", trigger: "blur"}
    ],
  }
});

const {queryParams, form, rules, supplierParams} = toRefs(data);


/** 查询中心库入库列表 */
function getList() {
  loading.value = true;
  listInbound(queryParams.value).then(response => {
    inboundList.value = response.rows;
    total.value = response.total;
    loading.value = false;
  });
}

/**
 * 获取用户信息
 */
function getLoginInfo() {
  getLoginUser().then(response => {
    loginUserList.value = response.data;
    console.log(loginUserList.value);
    setQueryParams();
    getList();
  });
}

/**
 * 设置默认值
 */
function setQueryParams() {
  queryParams.value.hospitalName = loginUserList.value.hospitalName;
  queryParams.value.areaName = loginUserList.value.areaName;
  queryParams.value.deptName = loginUserList.value.dept.deptName;
  queryParams.value.hospitalId = loginUserList.value.hospitalId;
  queryParams.value.areaId = loginUserList.value.areaId;
  queryParams.value.deptId = loginUserList.value.deptId;
  queryParams.value.createTime = new Date();
  queryParams.value.supplierId = null;
  queryParams.value.supplierName = null;
  queryParams.value.goodsTypeKey = null;
}

// 取消按钮
function cancel() {
  open.value = false;
  reset();
}

// 表单重置
function reset() {
  form.value = {
    inId: null,
    inNo: null,
    hospitalId: null,
    hospitalName: null,
    areaId: null,
    areaName: null,
    deptId: null,
    deptName: null,
    supplierId: null,
    goodsTypeKey: null,
    amount: null,
    genCodeFlag: 0,
    confirmManId: null,
    supDocNo: null,
    inType: null,
    planNo: null,
    createDate: null,
    planDate: null,
    warehId: null,
    serviceDeptId: null,
    comefrom: null,
    directFlag: 0,
    urgenFlag: 0,
    supplierGoodsNo: null,
    delFlag: "0",
    confirmDate: null,
    remark: null,
    createUserId: null,
    createBy: null,
    createTime: null,
    updateBy: null,
    updateTime: null
  };
  proxy.resetForm("inboundRef");
}

/** 搜索按钮操作 */
function handleQuery() {
  queryParams.value.pageNum = 1;
  getList();
}

/** 重置按钮操作 */
function resetQuery() {
  proxy.resetForm("queryRef");
  setQueryParams();
  handleQuery();
}

// 多选框选中数据
function handleSelectionChange(selection) {
  ids.value = selection.map(item => item.inId);
  single.value = selection.length != 1;
  multiple.value = !selection.length;
  if(selection.length === 1){
    queryDtlParams.value.inId = ids.value[0];
  }else{
    queryDtlParams.value.inId = null;
  }
  getDtlList();
}


/*/!** 新增按钮操作 *!/
function handleAdd() {
  reset();
  open.value = true;
  title.value = "添加中心库入库";
}

/!** 修改按钮操作 *!/
function handleUpdate(row) {
  reset();
  const inId = row.inId || ids.value
  getInbound(inId).then(response => {
    form.value = response.data;
    open.value = true;
    title.value = "修改中心库入库";
  });
}

/!** 提交按钮 *!/
function submitForm() {
  proxy.$refs["inboundRef"].validate(valid => {
    if (valid) {
      if (form.value.inId != null) {
        updateInbound(form.value).then(response => {
          proxy.$modal.msgSuccess("修改成功");
          open.value = false;
          getList();
        });
      } else {
        addInbound(form.value).then(response => {
          proxy.$modal.msgSuccess("新增成功");
          open.value = false;
          getList();
        });
      }
    }
  });
}*/

/** 删除按钮操作 */
function handleDelete(row) {
  //
  console.log(row);
  const del_inIds = row.inId || ids.value;
  proxy.$modal.confirm('是否确认删除中心库入库编号为"' + del_inIds + '"的数据及明细项？').then(function () {
    return delInbound(del_inIds);
  }).then(() => {
    //清空选择状态
    getList();
    getDtlList();
    //清空选中的值
    proxy.$refs.inOrderTable.clearSelection()
    proxy.$modal.msgSuccess("删除成功");
  }).catch(() => {
  });
}


/** 查询供应商信息列表 */
function getSupplierList() {
  supplierList.value = [];
  listSupplier(supplierParams.value).then(response => {
    supplierList.value = response.rows;
  });
}

// 供应商模糊查询
function getCompanyName(query) {
  supplierParams.value.supplierName = query;
  getSupplierList();
}

//供应商选择
function selectChange(value) {
  //传进来的val是select组件选中的value值，也就是一个fruitEnName
  queryParams.value.supplierId = value.supplierId;
  queryParams.value.supplierName = value.supplierName;
}

// 新增总单信息
function handleAddInOrder() {
  //判断供应商和物资类型是否有值
  if (!queryParams.value.supplierId) {
    proxy.$modal.msgError("无法新增，请选择供应商");
    return;
  }
  if (!queryParams.value.goodsTypeKey) {
    proxy.$modal.msgError("无法新增，请选择物资类型");
    return;
  }
  let addParams = queryParams.value;
  addParams.createTime = "";
  addInbound(addParams).then(response => {
    proxy.$modal.msgSuccess("新增成功");
    resetQuery();
    getList();
  });
}

/*************************************以下计划明细****************************************************/
import {listGoods} from "@/api/spd/basic/goods";//物资
const openDtl = ref(false);
const loadingDtl = ref(true);
const goodsList = ref([]);//产品集合
const idsDtl = ref([]);
const singleDtl = ref(true);
const multipleDtl = ref(true);
const titleDtl = ref("");
const totalDtl = ref(0);
const dtlList = ref([]);// 入库详细
const dataDtl = reactive({
  formDtl: {},
  //物资查询
  goodsParams: {
    pageNum: 1,
    pageSize: 5,
    goodsId: null,
    goodsName: null,
  },
  //详单查询
  queryDtlParams: {
    pageNum: 1,
    pageSize: 10,
    inId: null,
  },
  rulesDtl: {
    goodsId: [
      {required: true, message: "产品不能为空", trigger: "blur"}
    ],
    goodsName: [
      {required: true, message: "产品不能为空", trigger: "blur"}
    ]
    ,
    goodsUnit: [
      {required: true, message: "基本单位不能为空", trigger: "blur"}
    ],
    packDetailId: [
      {required: true, message: "定包数id不能为空", trigger: "blur"}
    ],
    goodsPackSize: [
      {required: true, message: "整件系数不能为空", trigger: "blur"}
    ],
    goodspackqty: [
      {required: true, message: "整件数量不能为空", trigger: "blur"}
    ],
    price: [
      {required: true, message: "单价不能为空", trigger: "blur"},
    ],
    total: [
      {required: true, message: "金额不能为空", trigger: "blur"}
    ],
    goodsqty: [
      {required: true, message: "入库数量不能为空", trigger: "blur"},
      {pattern: /^\d*(\.?\d)$/, message: '只能输入数字', trigger: "blur"},
    ],
    invTotal: [
      {pattern: /^\d*(\.?\d{0,2})$/, message: '只能输入数字，最大保留2位小数', trigger: "blur"},
    ],
    invTotalline: [
      {pattern: /^\d*(\.?\d{0,2})$/, message: '只能输入数字，最大保留2位小数', trigger: "blur"},
    ],
  }

});
const {queryDtlParams, formDtl, rulesDtl, goodsParams} = toRefs(dataDtl);

/** 查询中心库入库明细列表 */
function getDtlList() {
  if (queryDtlParams.value.inId == null) {
    dtlList.value = [];
    return false;
  }
  loadingDtl.value = true;
  listInbounddtl(queryDtlParams.value).then(response => {
    dtlList.value = response.rows;
    totalDtl.value = response.total;
    loadingDtl.value = false;
  });
}

// 表单重置
function resetDtl() {
  formDtl.value = {
    inDtlId: null,
    // inId: null,
    planDtlNo: null,
    goodsId: null,
    goodsqty: null,
    goodsUnit: null,
    packDetailId: null,
    goodsPackSize: null,
    goodspackqty: null,
    price: null,
    total: null,
    invFirstno: null,
    invNo: null,
    invTotal: null,
    invTotalline: null,
    payFlag: 0,
    lotno: null,
    prodDate: null,
    validDate: null,
    killLotno: null,
    killDate: null,
    killValidDate: null,
    registNo: null,
    approvedocNo: null,
    prodLicenseNo: null,
    groupPurchFlag: "0",
    remark: null,
    createBy: null,
    createTime: null,
    updateBy: null,
    updateTime: null
  };
  proxy.resetForm("dtlRef");
}

// 取消按钮
function cancelDtl() {
  openDtl.value = false;
  resetDtl();
}

/** 提交按钮 */
function submitFormDtl() {
  proxy.$refs["dtlRef"].validate(valid => {
    if (valid) {
      if (formDtl.value.inDtlId != null) {
        updateInbounddtl(formDtl.value).then(response => {
          proxy.$modal.msgSuccess("修改成功");
          openDtl.value = false;
          //更新列表
          getDtlList();
          getList();
        });
      } else {
        addInbounddtl(formDtl.value).then(response => {
          proxy.$modal.msgSuccess("新增成功");
          openDtl.value = false;
          //更新列表
          getDtlList();
          getList();
        });
      }
    }
  });
}

/** 新增按钮操作 */
function handleDtlAdd() {
  resetDtl();
  openDtl.value = true;
  titleDtl.value = "添加中心库入库明细";
  formDtl.value.inId = queryDtlParams.value.inId;
}

// 多选框选中数据
function handleDtlSelectionChange(selection) {
  idsDtl.value = selection.map(item => item.inDtlId);
  singleDtl.value = selection.length != 1;
  multipleDtl.value = !selection.length;
}

/** 修改按钮操作 */
function handleDtlUpdate(row) {
  resetDtl();
  const inDtlId = row.inDtlId || idsDtl.value
  getInbounddtl(inDtlId).then(response => {
    formDtl.value = response.data;
    openDtl.value = true;
    titleDtl.value = "修改中心库入库明细";
  });
}

/** 删除按钮操作 */
function handleDtlDelete(row) {
  const del_inDtlIds = row.inDtlId || idsDtl.value;
  proxy.$modal.confirm('是否确认删除中心库入库明细编号为"' + del_inDtlIds + '"的数据项？').then(function () {
    return delInbounddtl(del_inDtlIds);
  }).then(() => {
    // 更新库存
    updateStock();
    //更新列表
    getDtlList();
    getList();
    proxy.$modal.msgSuccess("删除成功");
  }).catch(() => {
  });
}

/**
 * 更新库存
 */
function updateStock() {
  updateInStock(queryDtlParams.value.inId).then(response => {
    console.log(response);
  });
}

/** 查询物资主数据列表 */
function getGoodsList() {
  listGoods(goodsParams.value).then(response => {
    goodsList.value = response.rows;
  });
}

// 产品查询
function getGoodsCompanyName(query) {
  goodsParams.value.goodsName = query;
  getGoodsList();
}

//产品选择
function selectGoodsChange(value) {
  //传进来的val是select组件选中的value值，也就是一个fruitEnName
  formDtl.value.goodsId = value.goodsId;
  formDtl.value.goodsName = value.goodsName;
  formDtl.value.goodsUnit = value.basicUnit;
  formDtl.value.price = value.costPrice;
  formDtl.value.registNo = value.registCertNo;//注册批号
  formDtl.value.approvedocNo = value.approvalNo;//批准文号
  formDtl.value.groupPurchFlag = value.ifJc;
  formDtl.value.goodsPackSize = value.ifJc;
  if (value.tGoodsDetail) {
    formDtl.value.packDetailId = value.tGoodsDetail.goodsDetailId;
    formDtl.value.goodsPackSize = value.tGoodsDetail.goodsPackSize;
  }

}

// 入库数量计算
function goodsqtySum() {
  let goodsqty = formDtl.value.goodsqty;//入库数量
  let goodsPackSize = formDtl.value.goodsPackSize; // 包装大小
  let price = formDtl.value.price;//单价
  //整件数量：入库数量/外包装系数
  formDtl.value.goodspackqty = goodsqty / goodsPackSize;
  //金额：数量*单价
  formDtl.value.total = goodsqty * price;
}

getLoginInfo();
script>

页面显示