feat(wms): 库存选择组件

src/api/wms/outStockDetails/index.ts

@@ -0,0 +1,76 @@
+import request from '@/utils/request';
+import { AxiosPromise } from 'axios';
+import { OutStockDetailsVO, OutStockDetailsForm, OutStockDetailsQuery } from '@/api/wms/outStockDetails/types';
+
+/**
+ * 查询出库单明细列表
+ * @param query
+ * @returns {*}
+ */
+
+export const listOutStockDetails = (query?: OutStockDetailsQuery): AxiosPromise<OutStockDetailsVO[]> => {
+  return request({
+    url: '/wms/outStockDetails/list',
+    method: 'get',
+    params: query
+  });
+};
+
+/**
+ * 查询出库单明细详细
+ * @param outStockDetailsId
+ */
+export const getOutStockDetails = (outStockDetailsId: string | number): AxiosPromise<OutStockDetailsVO> => {
+  return request({
+    url: '/wms/outStockDetails/' + outStockDetailsId,
+    method: 'get'
+  });
+};
+
+/**
+ * 新增出库单明细
+ * @param data
+ */
+export const addOutStockDetails = (data: OutStockDetailsForm) => {
+  return request({
+    url: '/wms/outStockDetails',
+    method: 'post',
+    data: data
+  });
+};
+
+/**
+ * 修改出库单明细
+ * @param data
+ */
+export const updateOutStockDetails = (data: OutStockDetailsForm) => {
+  return request({
+    url: '/wms/outStockDetails',
+    method: 'put',
+    data: data
+  });
+};
+
+/**
+ * 删除出库单明细
+ * @param outStockDetailsId
+ */
+export const delOutStockDetails = (outStockDetailsId: string | number | Array<string | number>) => {
+  return request({
+    url: '/wms/outStockDetails/' + outStockDetailsId,
+    method: 'delete'
+  });
+};
+
+/**
+ * 下拉框查询出库单明细列表
+ * @param query
+ * @returns {*}
+ */
+export function getWmsOutStockDetailsList (query) {
+    return request({
+        url: '/wms/outStockDetails/getWmsOutStockDetailsList',
+        method: 'get',
+        params: query
+    });
+};

src/api/wms/outStockDetails/types.ts

@@ -0,0 +1,196 @@
+export interface OutStockDetailsVO {
+  /**
+   * 出库单明细ID
+   */
+  outStockDetailsId: string | number;
+
+  /**
+   * 租户编号
+   */
+  tenantId: string | number;
+
+  /**
+   * 仓库ID
+   */
+  warehouseId: string | number;
+
+  /**
+   * 物料ID
+   */
+  materielId: string | number;
+
+  /**
+   * 批次号
+   */
+  batchNumber: string;
+
+  /**
+   * 单价
+   */
+  unitPrice: number;
+
+  /**
+   * 出库数量
+   */
+  outStockAmount: number;
+
+  /**
+   * 单位
+   */
+  unitName: string;
+
+  /**
+   * 总价
+   */
+  totalPrice: number;
+
+  /**
+   * 删除标志（0代表存在 1代表删除）
+   */
+  delFlag: string;
+
+  /**
+   * 创建部门
+   */
+  createDept: number;
+
+  /**
+   * 创建人
+   */
+  createBy: number;
+
+  /**
+   * 创建时间
+   */
+  createTime: string;
+
+  /**
+   * 更新人
+   */
+  updateBy: number;
+
+  /**
+   * 更新时间
+   */
+  updateTime: string;
+
+  /**
+   * 原项目ID
+   */
+  inProjectId: string | number;
+
+  /**
+   * 新项目ID
+   */
+  outProjectId: string | number;
+
+  /**
+   * 出库单ID
+   */
+  outStockBillId: string | number;
+
+  /**
+   * 库存ID
+   */
+  inventoryDetailsId: string | number;
+
+}
+
+export interface OutStockDetailsForm extends BaseEntity {
+  /**
+   * 出库单明细ID
+   */
+  outStockDetailsId?: string | number;
+
+  /**
+   * 仓库ID
+   */
+  warehouseId?: string | number;
+
+  /**
+   * 物料ID
+   */
+  materielId?: string | number;
+
+  /**
+   * 批次号
+   */
+  batchNumber?: string;
+
+  /**
+   * 单价
+   */
+  unitPrice?: number;
+
+  /**
+   * 出库数量
+   */
+  outStockAmount?: number;
+
+  /**
+   * 单位
+   */
+  unitName?: string;
+
+  /**
+   * 总价
+   */
+  totalPrice?: number;
+
+  /**
+   * 原项目ID
+   */
+  inProjectId?: string | number;
+
+  /**
+   * 新项目ID
+   */
+  outProjectId?: string | number;
+
+  /**
+   * 出库单ID
+   */
+  outStockBillId?: string | number;
+
+  /**
+   * 库存ID
+   */
+  inventoryDetailsId?: string | number;
+
+}
+
+export interface OutStockDetailsQuery extends PageQuery {
+
+  /**
+   * 仓库ID
+   */
+  warehouseId?: string | number;
+
+  /**
+   * 物料ID
+   */
+  materielId?: string | number;
+
+  /**
+   * 批次号
+   */
+  batchNumber?: string;
+
+  /**
+   * 创建时间
+   */
+  createTime?: string;
+
+  /**
+   * 出库单ID
+   */
+  outStockBillId?: string | number;
+
+  /**
+   * 日期范围参数
+   */
+  params?: any;
+}
+
+
+

src/components/WmsInventorySelect/index.vue

@@ -0,0 +1,289 @@
+<template>
+  <div>
+    <el-dialog v-model="inventoryDialog.visible.value" :title="inventoryDialog.title.value" width="80%" append-to-body>
+      <el-row :gutter="20">
+        <el-col :span="24">
+          <transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
+            <div v-show="showSearch" class="mb-[10px]">
+              <el-card shadow="hover">
+                <el-form ref="queryFormRef" :model="queryParams" :inline="true" label-width="100px">
+                  <el-form-item label="物料编码" prop="materialCode">
+                    <el-input v-model="queryParams.productCode" placeholder="请输入物料编码" clearable @keyup.enter="handleQuery" />
+                  </el-form-item>
+                  <el-form-item label="物料名称" prop="materialName">
+                    <el-input v-model="queryParams.productName" placeholder="请输入物料名称" clearable @keyup.enter="handleQuery" />
+                  </el-form-item>
+                  <el-form-item label="仓库" prop="warehouseId">
+                    <el-select v-model="queryParams.warehouseId" placeholder="请选择仓库" clearable filterable>
+                      <el-option
+                        v-for="warehouse in warehouseList"
+                        :key="warehouse.warehouseId"
+                        :label="warehouse.warehouseName"
+                        :value="warehouse.warehouseId"
+                      />
+                    </el-select>
+                  </el-form-item>
+                  <el-form-item label="批次号" prop="batchNumber">
+                    <el-input v-model="queryParams.batchNumber" placeholder="请输入批次号" clearable @keyup.enter="handleQuery" />
+                  </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-card>
+            </div>
+          </transition>
+
+          <el-card shadow="hover">
+            <template v-if="prop.multiple" #header>
+              <el-tag
+                v-for="inventory in selectInventoryList"
+                :key="inventory.inventoryDetailsId"
+                closable
+                style="margin: 2px"
+                @close="handleCloseTag(inventory)"
+              >
+                {{ inventory.productName }} ({{ inventory.batchNumber }})
+              </el-tag>
+            </template>
+
+            <vxe-table
+              ref="tableRef"
+              height="400px"
+              border
+              show-overflow
+              :data="inventoryDetailsList"
+              :loading="loading"
+              :row-config="{ keyField: 'inventoryDetailsId', isHover: true }"
+              :checkbox-config="{ reserve: true, trigger: 'row', highlight: true, showHeader: prop.multiple }"
+              @checkbox-all="handleCheckboxAll"
+              @checkbox-change="handleCheckboxChange"
+            >
+              <vxe-column type="checkbox" width="50" align="center" />
+              <vxe-column key="warehouseName" title="仓库" align="center" field="warehouseName" />
+              <vxe-column key="batchNumber" title="批次号" align="center" field="batchNumber" />
+              <vxe-column key="productCode" title="成品编码" align="center" field="productCode" />
+              <vxe-column key="productName" title="成品名称" align="center" field="productName" />
+              <vxe-column key="productSpe" title="成品描述" align="center" field="productSpe" />
+              <vxe-column key="externalBrand" title="外部品牌" align="center" field="externalBrand" />
+              <vxe-column key="inventoryAmount" title="库存数量" align="center" field="inventoryAmount" />
+              <vxe-column key="unitPrice" title="单价" align="center" field="unitPrice" />
+            </vxe-table>
+
+            <pagination
+              v-show="total > 0"
+              v-model:page="queryParams.pageNum"
+              v-model:limit="queryParams.pageSize"
+              :total="total"
+              @pagination="pageList"
+            />
+          </el-card>
+        </el-col>
+      </el-row>
+
+      <template #footer>
+        <el-button @click="close">取消</el-button>
+        <el-button type="primary" @click="confirm">确定</el-button>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { listInventoryDetails } from '@/api/wms/inventoryDetails';
+import { getWmsWarehouseInfoList } from '@/api/wms/warehouseInfo';
+import { InventoryDetailsQuery, InventoryDetailsVO } from '@/api/wms/inventoryDetails/types';
+import { VxeTableInstance } from 'vxe-table';
+import useDialog from '@/hooks/useDialog';
+import { computed, getCurrentInstance, nextTick, ref, watch } from 'vue';
+
+interface PropType {
+  modelValue?: InventoryDetailsVO[] | InventoryDetailsVO | undefined;
+  multiple?: boolean;
+  data?: string | number | (string | number)[] | undefined;
+}
+
+const prop = withDefaults(defineProps<PropType>(), {
+  multiple: true,
+  modelValue: undefined,
+  data: undefined
+});
+const emit = defineEmits(['update:modelValue', 'confirmCallBack']);
+
+const { proxy } = getCurrentInstance() as ComponentInternalInstance;
+
+const inventoryDetailsList = ref<InventoryDetailsVO[]>([]);
+const warehouseList = ref([]);
+const loading = ref(true);
+const showSearch = ref(true);
+const total = ref(0);
+const selectInventoryList = ref<InventoryDetailsVO[]>([]);
+
+const queryFormRef = ref<ElFormInstance>();
+const tableRef = ref<VxeTableInstance<InventoryDetailsVO>>();
+
+const inventoryDialog = useDialog({
+  title: '库存选择'
+});
+
+const queryParams = ref<InventoryDetailsQuery>({
+  pageNum: 1,
+  pageSize: 10,
+  productName: undefined,
+  productCode: undefined,
+  warehouseId: undefined,
+  batchNumber: undefined,
+  params: {}
+});
+
+const defaultSelectInventoryIds = computed(() => computedIds(prop.data));
+
+const confirm = () => {
+  emit('update:modelValue', selectInventoryList.value);
+  emit('confirmCallBack', selectInventoryList.value);
+  inventoryDialog.closeDialog();
+};
+
+const computedIds = (data) => {
+  if (data === '' || data === null || data === undefined) {
+    return [];
+  }
+  if (data instanceof Array) {
+    return data.map((item) => String(item));
+  } else if (typeof data === 'string') {
+    return data.split(',');
+  } else if (typeof data === 'number') {
+    return [String(data)];
+  } else {
+    console.warn('<InventorySelect> 未支持的数据类型');
+    return [];
+  }
+};
+
+/** 查询库存明细列表 */
+const getList = async () => {
+  loading.value = true;
+  try {
+    const res = await listInventoryDetails(queryParams.value);
+    inventoryDetailsList.value = res.rows;
+    total.value = res.total;
+  } catch (error) {
+    console.error('查询库存明细列表失败:', error);
+  } finally {
+    loading.value = false;
+  }
+};
+
+/** 查询仓库列表 */
+const getWarehouseList = async () => {
+  try {
+    const res = await getWmsWarehouseInfoList();
+    warehouseList.value = res.data;
+  } catch (error) {
+    console.error('查询仓库列表失败:', error);
+  }
+};
+
+const pageList = async () => {
+  await getList();
+  const inventories = inventoryDetailsList.value.filter((item) => {
+    return selectInventoryList.value.some((inventory) => inventory.inventoryDetailsId === item.inventoryDetailsId);
+  });
+  await tableRef.value?.setCheckboxRow(inventories, true);
+};
+
+/** 搜索按钮操作 */
+const handleQuery = () => {
+  queryParams.value.pageNum = 1;
+  getList();
+};
+
+/** 重置按钮操作 */
+const resetQuery = () => {
+  queryFormRef.value?.resetFields();
+  queryParams.value.pageNum = 1;
+  queryParams.value.productName = undefined;
+  queryParams.value.productCode = undefined;
+  queryParams.value.warehouseId = undefined;
+  queryParams.value.batchNumber = undefined;
+  handleQuery();
+};
+
+const handleCheckboxChange = (checked) => {
+  if (!prop.multiple && checked.checked) {
+    tableRef.value?.setCheckboxRow(selectInventoryList.value, false);
+    selectInventoryList.value = [];
+  }
+  const row = checked.row;
+  if (checked.checked) {
+    selectInventoryList.value.push(row);
+  } else {
+    selectInventoryList.value = selectInventoryList.value.filter((item) => {
+      return item.inventoryDetailsId !== row.inventoryDetailsId;
+    });
+  }
+};
+
+const handleCheckboxAll = (checked) => {
+  const rows = inventoryDetailsList.value;
+  if (checked.checked) {
+    rows.forEach((row) => {
+      if (!selectInventoryList.value.some((item) => item.inventoryDetailsId === row.inventoryDetailsId)) {
+        selectInventoryList.value.push(row);
+      }
+    });
+  } else {
+    selectInventoryList.value = selectInventoryList.value.filter((item) => {
+      return !rows.some((row) => row.inventoryDetailsId === item.inventoryDetailsId);
+    });
+  }
+};
+
+const handleCloseTag = (inventory: InventoryDetailsVO) => {
+  const inventoryDetailsId = inventory.inventoryDetailsId;
+  const index = selectInventoryList.value.findIndex((item) => item.inventoryDetailsId === inventoryDetailsId);
+  if (index > -1) {
+    const row = selectInventoryList.value[index];
+    tableRef.value?.setCheckboxRow(row, false);
+    selectInventoryList.value.splice(index, 1);
+  }
+};
+
+const initSelectInventory = async () => {
+  if (defaultSelectInventoryIds.value.length > 0) {
+    const inventories = inventoryDetailsList.value.filter((item) => {
+      return defaultSelectInventoryIds.value.includes(String(item.inventoryDetailsId));
+    });
+    selectInventoryList.value = inventories;
+    await nextTick(() => {
+      tableRef.value?.setCheckboxRow(inventories, true);
+    });
+  }
+};
+
+const close = () => {
+  inventoryDialog.closeDialog();
+};
+
+watch(
+  () => inventoryDialog.visible.value,
+  async (newValue: boolean) => {
+    if (newValue) {
+      await getList();
+      await getWarehouseList();
+      await initSelectInventory();
+    } else {
+      tableRef.value?.clearCheckboxReserve();
+      tableRef.value?.clearCheckboxRow();
+      resetQuery();
+      selectInventoryList.value = [];
+    }
+  }
+);
+
+defineExpose({
+  open: inventoryDialog.openDialog,
+  close: inventoryDialog.closeDialog
+});
+</script>

src/views/wms/inStockBill/index.vue

@@ -307,7 +307,7 @@ import { useRouter } from 'vue-router'; // 存储选中的物料信息
 import { getWmsInStockDetailsList } from '@/api/wms/inStockDetails';
 import { getWmsWarehouseInfoList } from '@/api/wms/warehouseInfo';
 import { getErpProjectInfoList } from '@/api/oa/erp/projectInfo'; // 添加展开行处理函数
-import ProductSelect from '@/components/ProductSelect/index.vue';
+import ProductSelect from '@/components/WmsProductSelect/index.vue';
 import { parseTime } from '@/utils/ruoyi';
 
 const projectInfoList = ref([]); // 项目列表

src/views/wms/outStockBill/index.vue

@@ -37,8 +37,17 @@
                 <el-option v-for="item in warehouseInfoList" :key="item.warehouseId" :label="item.warehouseName" :value="item.warehouseId" />
               </el-select>
             </el-form-item>
-            <el-form-item label="创建时间" prop="createTime">
-              <el-date-picker clearable v-model="queryParams.createTime" type="date" value-format="YYYY-MM-DD" placeholder="请选择创建时间" />
+            <el-form-item label="创建时间" style="width: 308px">
+              <!--              <el-date-picker clearable v-model="queryParams.createTime" type="date" value-format="YYYY-MM-DD" placeholder="请选择创建时间" />-->
+              <el-date-picker
+                v-model="dateRangeCreateTime"
+                value-format="YYYY-MM-DD HH:mm:ss"
+                type="daterange"
+                range-separator="-"
+                start-placeholder="开始日期"
+                end-placeholder="结束日期"
+                :default-time="[new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 1, 1, 23, 59, 59)]"
+              />
             </el-form-item>
             <el-form-item>
               <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
@@ -212,6 +221,30 @@
           <el-input v-model="form.directions" type="textarea" :rows="3" placeholder="请输入出库说明" style="width: 100%" />
         </el-form-item>
       </el-form>
+
+      <div>
+        <el-card>
+          <template #header>
+            <div>添加出库物料</div>
+          </template>
+          <el-button type="primary" @click="openInventorySelect">选择物料</el-button>
+
+          <div v-if="selectInventorys.length > 0" style="margin-top: 20px">
+            <h4>已选择的物料：</h4>
+            <el-table border :data="selectInventorys">
+              <el-table-column label="出库单明细ID" align="center" prop="outStockDetailsId" />
+              <el-table-column label="物料ID" align="center" prop="materielId" />
+              <el-table-column label="批次号" align="center" prop="batchNumber" />
+              <el-table-column label="单价" align="center" prop="unitPrice" />
+              <el-table-column label="出库数量" align="center" prop="outStockAmount" />
+              <el-table-column label="单位" align="center" prop="unitName" />
+              <el-table-column label="总价" align="center" prop="totalPrice" />
+            </el-table>
+          </div>
+        </el-card>
+        <wms-inventory-select ref="inventorySelectRef" :multiple="true" @confirmCallBack="handleInventorySelect" />
+      </div>
+
       <template #footer>
         <div class="dialog-footer">
           <el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
@@ -228,6 +261,7 @@ import { OutStockBillForm, OutStockBillQuery, OutStockBillVO } from '@/api/wms/o
 import { getErpProjectInfoList } from '@/api/oa/erp/projectInfo';
 import { getCrmCustomerInfoList } from '@/api/oa/crm/customerInfo';
 import { getWmsWarehouseInfoList } from '@/api/wms/warehouseInfo';
+import WmsInventorySelect from '@/components/WmsInventorySelect/index.vue';
 
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 const { wms_in_stock_bill_status, out_stock_type, flow_status } = toRefs<any>(
@@ -249,10 +283,14 @@ const projectInfoList = ref([]);
 const customerInfoList = ref([]);
 // 仓库列表
 const warehouseInfoList = ref([]);
+// 库存选择器
+const inventorySelectRef = ref();
+// 选中的库存列表
+const selectInventorys = ref([]);
 
 const queryFormRef = ref<ElFormInstance>();
 const outStockBillFormRef = ref<ElFormInstance>();
-
+const dateRangeCreateTime = ref<[DateModelType, DateModelType]>(['', '']);
 const dialog = reactive<DialogOption>({
   visible: false,
   title: ''
@@ -351,7 +389,16 @@ const getWarehouseName = (warehouseId) => {
   const warehouse = warehouseInfoList.value.find((item) => item.warehouseId === warehouseId);
   return warehouse ? warehouse.warehouseName : warehouseId;
 };
+const openInventorySelect = () => {
+  inventorySelectRef.value.open();
+};
+const handleInventorySelect = (selectedInventorys) => {
+  // selectedInventorys 就是用户选择的库存数据数组
+  selectInventorys.value = selectedInventorys;
 
+  console.log(selectedInventorys);
+  // 这里可以进一步处理选中的库存数据
+};
 /** 查询出库单列表 */
 const getList = async () => {
   loading.value = true;
@@ -381,6 +428,7 @@ const handleQuery = () => {
 
 /** 重置按钮操作 */
 const resetQuery = () => {
+  dateRangeCreateTime.value = ['', ''];
   queryFormRef.value?.resetFields();
   handleQuery();
 };

src/views/wms/outStockDetails/index.vue

@@ -0,0 +1,334 @@
+<template>
+  <div class="p-2">
+    <transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
+      <div v-show="showSearch" class="mb-[10px]">
+        <el-card shadow="hover">
+          <el-form ref="queryFormRef" :model="queryParams" :inline="true" label-width="100px">
+            <el-form-item label="仓库ID" prop="warehouseId">
+              <el-input v-model="queryParams.warehouseId" placeholder="请输入仓库ID" clearable @keyup.enter="handleQuery" />
+            </el-form-item>
+            <el-form-item label="物料ID" prop="materielId">
+              <el-input v-model="queryParams.materielId" placeholder="请输入物料ID" clearable @keyup.enter="handleQuery" />
+            </el-form-item>
+            <el-form-item label="批次号" prop="batchNumber">
+              <el-input v-model="queryParams.batchNumber" placeholder="请输入批次号" clearable @keyup.enter="handleQuery" />
+            </el-form-item>
+            <el-form-item label="创建时间" style="width: 308px">
+              <el-date-picker
+                v-model="dateRangeCreateTime"
+                value-format="YYYY-MM-DD HH:mm:ss"
+                type="daterange"
+                range-separator="-"
+                start-placeholder="开始日期"
+                end-placeholder="结束日期"
+                :default-time="[new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 1, 1, 23, 59, 59)]"
+              />
+            </el-form-item>
+            <el-form-item label="出库单ID" prop="outStockBillId">
+              <el-input v-model="queryParams.outStockBillId" placeholder="请输入出库单ID" clearable @keyup.enter="handleQuery" />
+            </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-card>
+      </div>
+    </transition>
+
+    <el-card shadow="never">
+      <template #header>
+        <el-row :gutter="10" class="mb8">
+          <el-col :span="1.5">
+            <el-button type="primary" plain icon="Plus" @click="handleAdd" v-hasPermi="['wms:outStockDetails:add']"> 新增 </el-button>
+          </el-col>
+          <el-col :span="1.5">
+            <el-button type="success" plain icon="Edit" :disabled="single" @click="handleUpdate()" v-hasPermi="['wms:outStockDetails:edit']"
+              >修改
+            </el-button>
+          </el-col>
+          <el-col :span="1.5">
+            <el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete()" v-hasPermi="['wms:outStockDetails:remove']"
+              >删除
+            </el-button>
+          </el-col>
+          <el-col :span="1.5">
+            <el-button type="warning" plain icon="Download" @click="handleExport" v-hasPermi="['wms:outStockDetails:export']">导出 </el-button>
+          </el-col>
+          <right-toolbar v-model:showSearch="showSearch" :columns="columns" :search="true" @queryTable="getList"></right-toolbar>
+        </el-row>
+      </template>
+
+      <el-table v-loading="loading" border :data="outStockDetailsList" @selection-change="handleSelectionChange">
+        <el-table-column type="selection" width="55" align="center" />
+        <el-table-column label="出库单明细ID" align="center" prop="outStockDetailsId" v-if="columns[0].visible" />
+        <el-table-column label="租户编号" align="center" prop="tenantId" v-if="columns[1].visible" />
+        <el-table-column label="仓库ID" align="center" prop="warehouseId" v-if="columns[2].visible" />
+        <el-table-column label="物料ID" align="center" prop="materielId" v-if="columns[3].visible" />
+        <el-table-column label="批次号" align="center" prop="batchNumber" v-if="columns[4].visible" />
+        <el-table-column label="单价" align="center" prop="unitPrice" v-if="columns[5].visible" />
+        <el-table-column label="出库数量" align="center" prop="outStockAmount" v-if="columns[6].visible" />
+        <el-table-column label="单位" align="center" prop="unitName" v-if="columns[7].visible" />
+        <el-table-column label="总价" align="center" prop="totalPrice" v-if="columns[8].visible" />
+        <el-table-column label="删除标志" align="center" prop="delFlag" v-if="columns[9].visible" />
+        <el-table-column label="创建部门" align="center" prop="createDept" v-if="columns[10].visible" />
+        <el-table-column label="创建人" align="center" prop="createBy" v-if="columns[11].visible" />
+        <el-table-column label="创建时间" align="center" prop="createTime" width="180" v-if="columns[12].visible">
+          <template #default="scope">
+            <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="更新人" align="center" prop="updateBy" v-if="columns[13].visible" />
+        <el-table-column label="更新时间" align="center" prop="updateTime" width="180" v-if="columns[14].visible">
+          <template #default="scope">
+            <span>{{ parseTime(scope.row.updateTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="原项目ID" align="center" prop="inProjectId" v-if="columns[15].visible" />
+        <el-table-column label="新项目ID" align="center" prop="outProjectId" v-if="columns[16].visible" />
+        <el-table-column label="出库单ID" align="center" prop="outStockBillId" v-if="columns[17].visible" />
+        <el-table-column label="库存ID" align="center" prop="inventoryDetailsId" v-if="columns[18].visible" />
+        <el-table-column label="操作" align="center" fixed="right" class-name="small-padding fixed-width">
+          <template #default="scope">
+            <el-tooltip content="修改" placement="top">
+              <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['wms:outStockDetails:edit']"></el-button>
+            </el-tooltip>
+            <el-tooltip content="删除" placement="top">
+              <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['wms:outStockDetails:remove']"></el-button>
+            </el-tooltip>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
+    </el-card>
+    <!-- 添加或修改出库单明细对话框 -->
+    <el-dialog :title="dialog.title" v-model="dialog.visible" width="500px" append-to-body>
+      <el-form ref="outStockDetailsFormRef" :model="form" :rules="rules" label-width="120px">
+        <el-form-item label="仓库ID" prop="warehouseId">
+          <el-input v-model="form.warehouseId" placeholder="请输入仓库ID" />
+        </el-form-item>
+        <el-form-item label="物料ID" prop="materielId">
+          <el-input v-model="form.materielId" placeholder="请输入物料ID" />
+        </el-form-item>
+        <el-form-item label="批次号" prop="batchNumber">
+          <el-input v-model="form.batchNumber" placeholder="请输入批次号" />
+        </el-form-item>
+        <el-form-item label="单价" prop="unitPrice">
+          <el-input v-model="form.unitPrice" placeholder="请输入单价" />
+        </el-form-item>
+        <el-form-item label="出库数量" prop="outStockAmount">
+          <el-input v-model="form.outStockAmount" placeholder="请输入出库数量" />
+        </el-form-item>
+        <el-form-item label="单位" prop="unitName">
+          <el-input v-model="form.unitName" placeholder="请输入单位" />
+        </el-form-item>
+        <el-form-item label="总价" prop="totalPrice">
+          <el-input v-model="form.totalPrice" placeholder="请输入总价" />
+        </el-form-item>
+        <el-form-item label="原项目ID" prop="inProjectId">
+          <el-input v-model="form.inProjectId" placeholder="请输入原项目ID" />
+        </el-form-item>
+        <el-form-item label="新项目ID" prop="outProjectId">
+          <el-input v-model="form.outProjectId" placeholder="请输入新项目ID" />
+        </el-form-item>
+        <el-form-item label="出库单ID" prop="outStockBillId">
+          <el-input v-model="form.outStockBillId" placeholder="请输入出库单ID" />
+        </el-form-item>
+        <el-form-item label="库存ID" prop="inventoryDetailsId">
+          <el-input v-model="form.inventoryDetailsId" placeholder="请输入库存ID" />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
+          <el-button @click="cancel">取 消</el-button>
+        </div>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup name="OutStockDetails" lang="ts">
+import { addOutStockDetails, delOutStockDetails, getOutStockDetails, listOutStockDetails, updateOutStockDetails } from '@/api/wms/outStockDetails';
+import { OutStockDetailsForm, OutStockDetailsQuery, OutStockDetailsVO } from '@/api/wms/outStockDetails/types';
+
+const { proxy } = getCurrentInstance() as ComponentInternalInstance;
+
+const outStockDetailsList = ref<OutStockDetailsVO[]>([]);
+const buttonLoading = ref(false);
+const loading = ref(true);
+const showSearch = ref(true);
+const ids = ref<Array<string | number>>([]);
+const single = ref(true);
+const multiple = ref(true);
+const total = ref(0);
+const dateRangeCreateTime = ref<[DateModelType, DateModelType]>(['', '']);
+
+const queryFormRef = ref<ElFormInstance>();
+const outStockDetailsFormRef = ref<ElFormInstance>();
+
+const dialog = reactive<DialogOption>({
+  visible: false,
+  title: ''
+});
+
+// 列显隐信息
+const columns = ref<FieldOption[]>([
+  { key: 0, label: `出库单明细ID`, visible: true },
+  { key: 1, label: `租户编号`, visible: true },
+  { key: 2, label: `仓库ID`, visible: true },
+  { key: 3, label: `物料ID`, visible: true },
+  { key: 4, label: `批次号`, visible: true },
+  { key: 5, label: `单价`, visible: true },
+  { key: 6, label: `出库数量`, visible: true },
+  { key: 7, label: `单位`, visible: true },
+  { key: 8, label: `总价`, visible: true },
+  { key: 9, label: `删除标志`, visible: true },
+  { key: 10, label: `创建部门`, visible: true },
+  { key: 11, label: `创建人`, visible: true },
+  { key: 12, label: `创建时间`, visible: true },
+  { key: 13, label: `更新人`, visible: true },
+  { key: 14, label: `更新时间`, visible: true },
+  { key: 15, label: `原项目ID`, visible: true },
+  { key: 16, label: `新项目ID`, visible: true },
+  { key: 17, label: `出库单ID`, visible: true },
+  { key: 18, label: `库存ID`, visible: true }
+]);
+
+const initFormData: OutStockDetailsForm = {
+  outStockDetailsId: undefined,
+  warehouseId: undefined,
+  materielId: undefined,
+  batchNumber: undefined,
+  unitPrice: undefined,
+  outStockAmount: undefined,
+  unitName: undefined,
+  totalPrice: undefined,
+  inProjectId: undefined,
+  outProjectId: undefined,
+  outStockBillId: undefined,
+  inventoryDetailsId: undefined
+};
+const data = reactive<PageData<OutStockDetailsForm, OutStockDetailsQuery>>({
+  form: { ...initFormData },
+  queryParams: {
+    pageNum: 1,
+    pageSize: 10,
+    warehouseId: undefined,
+    materielId: undefined,
+    batchNumber: undefined,
+    outStockBillId: undefined,
+    params: {
+      createTime: undefined
+    }
+  },
+  rules: {
+    outStockDetailsId: [{ required: true, message: '出库单明细ID不能为空', trigger: 'blur' }],
+    outStockBillId: [{ required: true, message: '出库单ID不能为空', trigger: 'blur' }]
+  }
+});
+
+const { queryParams, form, rules } = toRefs(data);
+
+/** 查询出库单明细列表 */
+const getList = async () => {
+  loading.value = true;
+  queryParams.value.params = {};
+  proxy?.addDateRange(queryParams.value, dateRangeCreateTime.value, 'CreateTime');
+  const res = await listOutStockDetails(queryParams.value);
+  outStockDetailsList.value = res.rows;
+  total.value = res.total;
+  loading.value = false;
+};
+
+/** 取消按钮 */
+const cancel = () => {
+  reset();
+  dialog.visible = false;
+};
+
+/** 表单重置 */
+const reset = () => {
+  form.value = { ...initFormData };
+  outStockDetailsFormRef.value?.resetFields();
+};
+
+/** 搜索按钮操作 */
+const handleQuery = () => {
+  queryParams.value.pageNum = 1;
+  getList();
+};
+
+/** 重置按钮操作 */
+const resetQuery = () => {
+  dateRangeCreateTime.value = ['', ''];
+  queryFormRef.value?.resetFields();
+  handleQuery();
+};
+
+/** 多选框选中数据 */
+const handleSelectionChange = (selection: OutStockDetailsVO[]) => {
+  ids.value = selection.map((item) => item.outStockDetailsId);
+  single.value = selection.length != 1;
+  multiple.value = !selection.length;
+};
+
+/** 新增按钮操作 */
+const handleAdd = () => {
+  reset();
+  dialog.visible = true;
+  dialog.title = '添加出库单明细';
+};
+
+/** 修改按钮操作 */
+const handleUpdate = async (row?: OutStockDetailsVO) => {
+  reset();
+  const _outStockDetailsId = row?.outStockDetailsId || ids.value[0];
+  const res = await getOutStockDetails(_outStockDetailsId);
+  Object.assign(form.value, res.data);
+  dialog.visible = true;
+  dialog.title = '修改出库单明细';
+};
+
+/** 提交按钮 */
+const submitForm = () => {
+  outStockDetailsFormRef.value?.validate(async (valid: boolean) => {
+    if (valid) {
+      buttonLoading.value = true;
+      if (form.value.outStockDetailsId) {
+        await updateOutStockDetails(form.value).finally(() => (buttonLoading.value = false));
+      } else {
+        await addOutStockDetails(form.value).finally(() => (buttonLoading.value = false));
+      }
+      proxy?.$modal.msgSuccess('操作成功');
+      dialog.visible = false;
+      await getList();
+    }
+  });
+};
+
+/** 删除按钮操作 */
+const handleDelete = async (row?: OutStockDetailsVO) => {
+  const _outStockDetailsIds = row?.outStockDetailsId || ids.value;
+  await proxy?.$modal.confirm('是否确认删除出库单明细编号为"' + _outStockDetailsIds + '"的数据项？').finally(() => (loading.value = false));
+  await delOutStockDetails(_outStockDetailsIds);
+  proxy?.$modal.msgSuccess('删除成功');
+  await getList();
+};
+
+/** 导出按钮操作 */
+const handleExport = () => {
+  proxy?.download(
+    'wms/outStockDetails/export',
+    {
+      ...queryParams.value
+    },
+    `outStockDetails_${new Date().getTime()}.xlsx`
+  );
+};
+
+onMounted(() => {
+  getList();
+});
+</script>