• 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
    • 2
    • 3

    二. 清空选中的数据

    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>
    
    • 1
    • 2
    • 3

    2. js里面的操作

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

    三. 全部代码

    <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>
    
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80
    • 81
    • 82
    • 83
    • 84
    • 85
    • 86
    • 87
    • 88
    • 89
    • 90
    • 91
    • 92
    • 93
    • 94
    • 95
    • 96
    • 97
    • 98
    • 99
    • 100
    • 101
    • 102
    • 103
    • 104
    • 105
    • 106
    • 107
    • 108
    • 109
    • 110
    • 111
    • 112
    • 113
    • 114
    • 115
    • 116
    • 117
    • 118
    • 119
    • 120
    • 121
    • 122
    • 123
    • 124
    • 125
    • 126
    • 127
    • 128
    • 129
    • 130
    • 131
    • 132
    • 133
    • 134
    • 135
    • 136
    • 137
    • 138
    • 139
    • 140
    • 141
    • 142
    • 143
    • 144
    • 145
    • 146
    • 147
    • 148
    • 149
    • 150
    • 151
    • 152
    • 153
    • 154
    • 155
    • 156
    • 157
    • 158
    • 159
    • 160
    • 161
    • 162
    • 163
    • 164
    • 165
    • 166
    • 167
    • 168
    • 169
    • 170
    • 171
    • 172
    • 173
    • 174
    • 175
    • 176
    • 177
    • 178
    • 179
    • 180
    • 181
    • 182
    • 183
    • 184
    • 185
    • 186
    • 187
    • 188
    • 189
    • 190
    • 191
    • 192
    • 193
    • 194
    • 195
    • 196
    • 197
    • 198
    • 199
    • 200
    • 201
    • 202
    • 203
    • 204
    • 205
    • 206
    • 207
    • 208
    • 209
    • 210
    • 211
    • 212
    • 213
    • 214
    • 215
    • 216
    • 217
    • 218
    • 219
    • 220
    • 221
    • 222
    • 223
    • 224
    • 225
    • 226
    • 227
    • 228
    • 229
    • 230
    • 231
    • 232
    • 233
    • 234
    • 235
    • 236
    • 237
    • 238
    • 239
    • 240
    • 241
    • 242
    • 243
    • 244
    • 245
    • 246
    • 247
    • 248
    • 249
    • 250
    • 251
    • 252
    • 253
    • 254
    • 255
    • 256
    • 257
    • 258
    • 259
    • 260
    • 261
    • 262
    • 263
    • 264
    • 265
    • 266
    • 267
    • 268
    • 269
    • 270
    • 271
    • 272
    • 273
    • 274
    • 275
    • 276
    • 277
    • 278
    • 279
    • 280
    • 281
    • 282
    • 283
    • 284
    • 285
    • 286
    • 287
    • 288
    • 289
    • 290
    • 291
    • 292
    • 293
    • 294
    • 295
    • 296
    • 297
    • 298
    • 299
    • 300
    • 301
    • 302
    • 303
    • 304
    • 305
    • 306
    • 307
    • 308
    • 309
    • 310
    • 311
    • 312
    • 313
    • 314
    • 315
    • 316
    • 317
    • 318
    • 319
    • 320
    • 321
    • 322
    • 323
    • 324
    • 325
    • 326
    • 327
    • 328
    • 329
    • 330
    • 331
    • 332
    • 333
    • 334
    • 335
    • 336
    • 337
    • 338
    • 339
    • 340
    • 341
    • 342
    • 343
    • 344
    • 345
    • 346
    • 347
    • 348
    • 349
    • 350
    • 351
    • 352
    • 353
    • 354
    • 355
    • 356
    • 357
    • 358
    • 359
    • 360
    • 361
    • 362
    • 363
    • 364
    • 365
    • 366
    • 367
    • 368
    • 369
    • 370
    • 371
    • 372
    • 373
    • 374
    • 375
    • 376
    • 377
    • 378
    • 379
    • 380
    • 381
    • 382
    • 383
    • 384
    • 385
    • 386
    • 387
    • 388
    • 389
    • 390
    • 391
    • 392
    • 393
    • 394
    • 395
    • 396
    • 397
    • 398
    • 399
    • 400
    • 401
    • 402
    • 403
    • 404
    • 405
    • 406
    • 407
    • 408
    • 409
    • 410
    • 411
    • 412
    • 413
    • 414
    • 415
    • 416
    • 417
    • 418
    • 419
    • 420
    • 421
    • 422
    • 423
    • 424
    • 425
    • 426
    • 427
    • 428
    • 429
    • 430
    • 431
    • 432
    • 433
    • 434
    • 435
    • 436
    • 437
    • 438
    • 439
    • 440
    • 441
    • 442
    • 443
    • 444
    • 445
    • 446
    • 447
    • 448
    • 449
    • 450
    • 451
    • 452
    • 453
    • 454
    • 455
    • 456
    • 457
    • 458
    • 459
    • 460
    • 461
    • 462
    • 463
    • 464
    • 465
    • 466
    • 467
    • 468
    • 469
    • 470
    • 471
    • 472
    • 473
    • 474
    • 475
    • 476
    • 477
    • 478
    • 479
    • 480
    • 481
    • 482
    • 483
    • 484
    • 485
    • 486
    • 487
    • 488
    • 489
    • 490
    • 491
    • 492
    • 493
    • 494
    • 495
    • 496
    • 497
    • 498
    • 499
    • 500
    • 501
    • 502
    • 503
    • 504
    • 505
    • 506
    • 507
    • 508
    • 509
    • 510
    • 511
    • 512
    • 513
    • 514
    • 515
    • 516
    • 517
    • 518
    • 519
    • 520
    • 521
    • 522
    • 523
    • 524
    • 525
    • 526
    • 527
    • 528
    • 529
    • 530
    • 531
    • 532
    • 533
    • 534
    • 535
    • 536
    • 537
    • 538
    • 539
    • 540
    • 541
    • 542
    • 543
    • 544
    • 545
    • 546
    • 547
    • 548
    • 549
    • 550
    • 551
    • 552
    • 553
    • 554
    • 555
    • 556
    • 557
    • 558
    • 559
    • 560
    • 561
    • 562
    • 563
    • 564
    • 565
    • 566
    • 567
    • 568
    • 569
    • 570
    • 571
    • 572
    • 573
    • 574
    • 575
    • 576
    • 577
    • 578
    • 579
    • 580
    • 581
    • 582
    • 583
    • 584
    • 585
    • 586
    • 587
    • 588
    • 589
    • 590
    • 591
    • 592
    • 593
    • 594
    • 595
    • 596
    • 597
    • 598
    • 599
    • 600
    • 601
    • 602
    • 603
    • 604
    • 605
    • 606
    • 607
    • 608
    • 609
    • 610
    • 611
    • 612
    • 613
    • 614
    • 615
    • 616
    • 617
    • 618
    • 619
    • 620
    • 621
    • 622
    • 623
    • 624
    • 625
    • 626
    • 627
    • 628
    • 629
    • 630
    • 631
    • 632
    • 633
    • 634
    • 635
    • 636
    • 637
    • 638
    • 639
    • 640
    • 641
    • 642
    • 643
    • 644
    • 645
    • 646
    • 647
    • 648
    • 649
    • 650
    • 651
    • 652
    • 653
    • 654
    • 655
    • 656
    • 657
    • 658
    • 659
    • 660
    • 661
    • 662
    • 663
    • 664
    • 665
    • 666
    • 667
    • 668
    • 669
    • 670
    • 671
    • 672
    • 673
    • 674
    • 675
    • 676
    • 677
    • 678
    • 679
    • 680
    • 681
    • 682
    • 683
    • 684
    • 685
    • 686
    • 687
    • 688
    • 689
    • 690
    • 691
    • 692
    • 693
    • 694
    • 695
    • 696
    • 697
    • 698
    • 699
    • 700
    • 701
    • 702
    • 703
    • 704
    • 705
    • 706
    • 707
    • 708
    • 709
    • 710
    • 711
    • 712
    • 713
    • 714
    • 715
    • 716
    • 717
    • 718
    • 719
    • 720
    • 721
    • 722
    • 723
    • 724
    • 725
    • 726
    • 727
    • 728
    • 729
    • 730
    • 731
    • 732
    • 733
    • 734
    • 735
    • 736
    • 737
    • 738
    • 739
    • 740
    • 741
    • 742
    • 743
    • 744
    • 745
    • 746
    • 747
    • 748
    • 749
    • 750
    • 751
    • 752
    • 753
    • 754
    • 755
    • 756
    • 757
    • 758
    • 759
    • 760
    • 761
    • 762
    • 763
    • 764
    • 765
    • 766
    • 767
    • 768
    • 769
    • 770
    • 771
    • 772
    • 773
    • 774
    • 775
    • 776
    • 777
    • 778
    • 779
    • 780
    • 781
    • 782
    • 783
    • 784
    • 785
    • 786
    • 787
    • 788
    • 789
    • 790
    • 791
    • 792
    • 793
    • 794
    • 795
    • 796
    • 797
    • 798
    • 799
    • 800
    • 801
    • 802
    • 803
    • 804
    • 805
    • 806
    • 807
    • 808
    • 809
    • 810
    • 811
    • 812
    • 813
    • 814
    • 815
    • 816
    • 817
    • 818
    • 819
    • 820
    • 821
    • 822
    • 823
    • 824
    • 825
    • 826
    • 827
    • 828
    • 829
    • 830
    • 831
    • 832
    • 833
    • 834
    • 835
    • 836
    • 837
    • 838
    • 839
    • 840
    • 841
    • 842
    • 843
    • 844
    • 845
    • 846
    • 847
    • 848
    • 849
    • 850
    • 851
    • 852
    • 853
    • 854
    • 855
    • 856
    • 857
    • 858
    • 859
    • 860
    • 861
    • 862
    • 863
    • 864
    • 865
    • 866
    • 867
    • 868
    • 869
    • 870
    • 871
    • 872
    • 873
    • 874
    • 875
    • 876
    • 877
    • 878
    • 879
    • 880
    • 881
    • 882
    • 883
    • 884
    • 885
    • 886
    • 887
    • 888
    • 889
    • 890
    • 891
    • 892
    • 893
    • 894
    • 895
    • 896
    • 897
    • 898
    • 899
    • 900
    • 901
    • 902
    • 903
    • 904
    • 905
    • 906
    • 907
    • 908
    • 909
    • 910
    • 911
    • 912
    • 913
    • 914
    • 915
    • 916
    • 917
    • 918
    • 919
    • 920
    • 921
    • 922
    • 923
    • 924
    • 925
    • 926
    • 927
    • 928
    • 929
    • 930
    • 931
    • 932
    • 933

    页面显示
    在这里插入图片描述

  • 相关阅读:
    Elasticsearch基础条件查询
    java基于springboot医院预约挂号管理系统附代码段
    internship:用于类型判断的工具类编写
    打破总分行数据协作壁垒,DataOps在头部股份制银行的实践|案例研究
    传智书城源码+课程设计文档基于JSP+Servlet实现
    Java算法(三): 判断两个数组是否为相等 → (要求:长度、顺序、元素)相等
    面向对象的三大特性之——多态
    vue项目升级webpack
    提高数据科学工作效率的 8 个Python库!
    JSD-2204-异常处理-SpringJDBC事务管理-Day14
  • 原文地址:https://blog.csdn.net/qq_29294165/article/details/126154116