diff --git a/smart-admin-web-typescript/src/api/business/receive/asnDetail/asn-detail-api.ts b/smart-admin-web-typescript/src/api/business/receive/asnDetail/asn-detail-api.ts
new file mode 100644
index 0000000..fce8e14
--- /dev/null
+++ b/smart-admin-web-typescript/src/api/business/receive/asnDetail/asn-detail-api.ts
@@ -0,0 +1,48 @@
+/**
+ * 入库明细 api 封装
+ *
+ * @Author:    霍锦
+ * @Date:      2025-03-26 15:16:28
+ * @Copyright  友仓
+ */
+import {postRequest, getRequest} from '/@/lib/axios';
+
+export const asnDetailApi = {
+
+    /**
+     * 分页查询  @author  霍锦
+     */
+    queryPage: (param: object) => {
+        return postRequest('/asnDetail/queryPage', param);
+    },
+
+    /**
+     * 增加  @author  霍锦
+     */
+    add: (param: object) => {
+        return postRequest('/asnDetail/add', param);
+    },
+
+    /**
+     * 修改  @author  霍锦
+     */
+    update: (param: object) => {
+        return postRequest('/asnDetail/update', param);
+    },
+
+
+    /**
+     * 删除  @author  霍锦
+     */
+    delete: (asnDetailId: number) => {
+        return getRequest('/asnDetail/delete', {asnDetailId});
+    },
+
+    /**
+     * 批量删除  @author  霍锦
+     */
+    batchDelete: (idList: number[]) => {
+        return postRequest('/asnDetail/batchDelete', idList);
+    },
+
+};
diff --git a/smart-admin-web-typescript/src/api/business/receive/asnDetail/asn-detail-const.ts b/smart-admin-web-typescript/src/api/business/receive/asnDetail/asn-detail-const.ts
new file mode 100644
index 0000000..0ca4e82
--- /dev/null
+++ b/smart-admin-web-typescript/src/api/business/receive/asnDetail/asn-detail-const.ts
@@ -0,0 +1,11 @@
+/**
+ * 入库明细 枚举
+ *
+ * @Author:    霍锦
+ * @Date:      2025-03-26 15:16:28
+ * @Copyright  友仓
+ */
+
+
+export default {
+};
\ No newline at end of file
diff --git a/smart-admin-web-typescript/src/constants/support/table-id-const.ts b/smart-admin-web-typescript/src/constants/support/table-id-const.ts
index ade4c88..589915d 100644
--- a/smart-admin-web-typescript/src/constants/support/table-id-const.ts
+++ b/smart-admin-web-typescript/src/constants/support/table-id-const.ts
@@ -46,6 +46,7 @@ export const TABLE_ID_CONST = {
     },
     RECEIVE:{
       ASN:businessRECEIVEInitTableId+1,//入库单
+      ASN_DETAIL:businessRECEIVEInitTableId+2,//入库明细
     }
   },
 
diff --git a/smart-admin-web-typescript/src/views/business/base/address/address-list.vue b/smart-admin-web-typescript/src/views/business/base/address/address-list.vue
index be1e9af..1698367 100644
--- a/smart-admin-web-typescript/src/views/business/base/address/address-list.vue
+++ b/smart-admin-web-typescript/src/views/business/base/address/address-list.vue
@@ -110,6 +110,7 @@
             </a-button>
           </div>
         </template>
+
       </template>
     </a-table>
     <!---------- 表格 end ----------->
diff --git a/smart-admin-web-typescript/src/views/business/receive/asn/asn-form.vue b/smart-admin-web-typescript/src/views/business/receive/asn/asn-form.vue
index 6b4cb9a..55a17e5 100644
--- a/smart-admin-web-typescript/src/views/business/receive/asn/asn-form.vue
+++ b/smart-admin-web-typescript/src/views/business/receive/asn/asn-form.vue
@@ -82,17 +82,13 @@
   </div>
   <a-card class="smart-margin-top10" size="small">
     <a-tabs>
-      <a-tab-pane key="employee" tab="员工信息">
-        <EmployeeList :enterpriseId="enterpriseId"/>
+      <a-tab-pane key="asnDetail" tab="入库明细">
+        <ReceiveDetailList :asnId="form.asnId"/>
       </a-tab-pane>
-      <a-tab-pane key="bank" tab="银行信息">
-        <BankList :enterpriseId="enterpriseId"/>
+      <a-tab-pane key="asnTask" tab="收货详情">
       </a-tab-pane>
-      <a-tab-pane key="invoice" tab="发票信息">
-        <InvoiceList :enterpriseId="enterpriseId"/>
-      </a-tab-pane>
-      <a-tab-pane key="dataTracer" tab="变更记录">
-        <DataTracer :dataId="enterpriseId" :type="DATA_TRACER_TYPE_ENUM.OA_ENTERPRISE.value"/>
+      <a-tab-pane key="dataTracer" tab="操作记录">
+        <DataTracer :dataId="form.asnId" :type="DATA_TRACER_TYPE_ENUM.OA_ENTERPRISE.value"/>
       </a-tab-pane>
     </a-tabs>
   </a-card>
@@ -112,6 +108,7 @@ import {message} from "ant-design-vue";
 import {SmartLoading} from "/@/components/framework/smart-loading";
 import {asnApi} from "/@/api/business/receive/asn/asn-api";
 import {smartSentry} from "/@/lib/smart-sentry";
+import ReceiveDetailList from "/@/views/business/receive/asn/receive-detail-list.vue";
 
 // 表单
 const formRef = ref();
@@ -163,9 +160,9 @@ onMounted(() => {
   const id = route.query.id;
   if (typeof id === 'string') {
     // 从sessionStorage中获取数据
-    const res = JSON.parse(sessionStorage.getItem(id) as string);
+    const res = getDataFromSessionStorage(id);
     //编辑时自动填充数据
-    if (res.asnId) {
+    if (res) {
       form.asnId = res.asnId;
       form.customerId = res.customerId;
       form.customerNumber = res.customerNumber;
@@ -176,12 +173,22 @@ onMounted(() => {
       form.telephone = res.telephone;
       form.address = res.address;
     }
-    sessionStorage.removeItem(id); // 获取数据后移除存储项
+    // 获取数据后移除存储项
+    sessionStorage.removeItem(id);
   }
-
-
 });
 
+//从sessionStorage中获取数据
+function getDataFromSessionStorage(id: string) {
+  try {
+    const data = sessionStorage.getItem(id);
+    return data ? JSON.parse(data) : null;
+  } catch (error) {
+    message.error('解析 sessionStorage 数据时出错:');
+    return null;
+  }
+}
+
 // 点击确定，验证表单
 async function onSubmit() {
   try {
diff --git a/smart-admin-web-typescript/src/views/business/receive/asn/asn-list.vue b/smart-admin-web-typescript/src/views/business/receive/asn/asn-list.vue
index 52c2881..5df6c2b 100644
--- a/smart-admin-web-typescript/src/views/business/receive/asn/asn-list.vue
+++ b/smart-admin-web-typescript/src/views/business/receive/asn/asn-list.vue
@@ -64,7 +64,32 @@
         :loading="tableLoading"
         :pagination="false"
         :row-selection="{ selectedRowKeys: selectedRowKeyList, onChange: onSelectChange }"
+        @expand="querySubTableData"
     >
+      <template #expandedRowRender="{ record }">
+        <a-table
+            size="small"
+            :columns="subColumns"
+            :data-source="subTableData"
+            :pagination="false"
+            rowKey="asnDetailId"
+        >
+
+          <template #summary>
+            <a-table-summary-row style="font-weight: bold">
+              <a-table-summary-cell :index="0" align="center">合计</a-table-summary-cell>
+              <a-table-summary-cell :index="1">&nbsp;</a-table-summary-cell>
+              <a-table-summary-cell :index="2" align="center">
+                <a-typography-text type="danger">{{ totals.totalOrderQuantity }}</a-typography-text>
+              </a-table-summary-cell>
+              <a-table-summary-cell :index="3" align="center">
+                <a-typography-text type="danger">{{ totals.totalReceivedQuantity }}</a-typography-text>
+              </a-table-summary-cell>
+            </a-table-summary-row>
+          </template>
+        </a-table>
+      </template>
+
       <template #bodyCell="{ text, record, column }">
 
         <template v-if="column.dataIndex === 'orderType'">
@@ -117,13 +142,14 @@
   </a-card>
 </template>
 <script setup lang="ts">
-import {reactive, ref, onMounted, watch} from 'vue';
+import {computed, reactive, ref, onMounted, watch} from 'vue';
 import {message, Modal} from 'ant-design-vue';
 import {SmartLoading} from '/@/components/framework/smart-loading';
 import {PAGE_SIZE_OPTIONS} from '/@/constants/common-const';
 import {smartSentry} from '/@/lib/smart-sentry';
 import TableOperator from '/@/components/support/table-operator/index.vue';
 import {asnApi} from '/@/api/business/receive/asn/asn-api';
+import {asnDetailApi} from '/@/api/business/receive/asnDetail/asn-detail-api'
 import {TABLE_ID_CONST} from "/@/constants/support/table-id-const";
 import {useRoute, useRouter} from "vue-router";
 
@@ -193,6 +219,62 @@ const columns = ref([
   },
 ]);
 
+// 子表格列
+const subColumns = [
+  {
+    title: '物料编码',
+    dataIndex: 'itemCode',
+    align: 'center',
+    ellipsis: true,
+  },
+  {
+    title: '物料名称',
+    dataIndex: 'itemName',
+    align: 'center',
+    ellipsis: true,
+  },
+  {
+    title: '订单数量',
+    align: 'center',
+    dataIndex: 'orderQuantity',
+    ellipsis: true,
+  },
+  {
+    title: '收货数量',
+    align: 'center',
+    dataIndex: 'receivedQuantity',
+    ellipsis: true,
+  },
+];
+
+
+// 获取子表格数据
+const subTableData = ref([]);
+
+async function querySubTableData(expanded: boolean, record: any) {
+  if (expanded && !record.children) {
+    try {
+      const res = await asnDetailApi.queryPage({asnId: record.asnId, pageNum: 1, pageSize: 100});
+      subTableData.value = res.data.list;
+    } catch (e) {
+      smartSentry.captureError(e);
+    }
+  }
+}
+
+// 计算合计值
+const totals = computed(() => {
+  let totalOrderQuantity = 0;
+  let totalReceivedQuantity = 0;
+
+  subTableData.value.forEach(({orderQuantity, receivedQuantity}) => {
+    totalOrderQuantity += orderQuantity;
+    totalReceivedQuantity += receivedQuantity;
+  });
+  return {totalOrderQuantity, totalReceivedQuantity};
+});
+
+
 // ---------------------------- 查询数据表单和方法 ----------------------------
 
 const queryFormState = {
@@ -357,3 +439,4 @@ watch(
 
 onMounted(queryData);
 </script>
+
diff --git a/smart-admin-web-typescript/src/views/business/receive/asn/receive-detail-list.vue b/smart-admin-web-typescript/src/views/business/receive/asn/receive-detail-list.vue
new file mode 100644
index 0000000..c0d7194
--- /dev/null
+++ b/smart-admin-web-typescript/src/views/business/receive/asn/receive-detail-list.vue
@@ -0,0 +1,251 @@
+<!--
+  * 入库明细
+  *
+  * @Author:    1024创新实验室-主任：卓大
+  * @Date:      2022-08-15 20:15:49
+  * @Wechat:    zhuda1024
+  * @Email:     lab1024@163.com
+  * @Copyright  1024创新实验室 （ https://1024lab.net ），Since 2012
+-->
+<template>
+  <div>
+    <div class="header">
+      <div>
+        关键字：
+        <a-input style="width: 250px" v-model:value="queryForm.keyword" placeholder="姓名/手机号/登录账号"/>
+        <a-button class="button-style" type="primary" @click="onSearch">搜索</a-button>
+        <a-button class="button-style" type="default" @click="resetQuery">重置</a-button>
+      </div>
+
+      <div class="smart-table-setting-block">
+        <a-button class="button-style" type="primary" @click="showForm" :disabled="props.asnId==0">
+          <template #icon>
+            <PlusOutlined/>
+          </template>
+          添加明细
+        </a-button>
+        <a-button class="button-style" type="primary" danger
+                  :disabled="props.asnId==0 || selectedRowKeyList.length == 0">
+          <template #icon>
+            <DeleteOutlined/>
+          </template>
+          批量移除
+        </a-button>
+        <TableOperator v-model="columns" :tableId="TABLE_ID_CONST.BUSINESS.RECEIVE.ASN_DETAIL" :refresh="queryData"/>
+      </div>
+
+    </div>
+    <a-table
+        :loading="tableLoading"
+        :dataSource="tableData"
+        :columns="columns"
+        :pagination="false"
+        rowKey="asnDetailId"
+        :row-selection="{ selectedRowKeys: selectedRowKeyList, onChange: onSelectChange }"
+        size="small"
+        bordered
+    >
+      <template #bodyCell="{ text, record, index, column }">
+        <template v-if="column.dataIndex === 'action'">
+          <div class="smart-table-operate">
+            <a-button @click="showForm(record)" type="link" v-privilege="'asnDetail:update'">
+              <template #icon>
+                <EditOutlined/>
+              </template>
+              编辑
+            </a-button>
+            <a-button @click="onDelete(record)" danger type="link" v-privilege="'asnDetail:delete'">
+              <template #icon>
+                <DeleteOutlined/>
+              </template>
+              删除
+            </a-button>
+          </div>
+        </template>
+
+      </template>
+    </a-table>
+    <div class="smart-query-table-page">
+      <a-pagination
+          showSizeChanger
+          showQuickJumper
+          show-less-items
+          :pageSizeOptions="PAGE_SIZE_OPTIONS"
+          :defaultPageSize="queryForm.pageSize"
+          v-model:current="queryForm.pageNum"
+          v-model:pageSize="queryForm.pageSize"
+          :total="total"
+          @change="queryData"
+          @showSizeChange="queryData"
+          :show-total="(total:number) => `共${total}条`"
+      />
+    </div>
+    <!--新建/编辑-->
+    <AsnDetailForm ref="formRef" @reloadList="queryData"/>
+  </div>
+</template>
+<script setup lang="ts">
+import _ from 'lodash';
+import {reactive, ref, watch} from 'vue';
+import {PAGE_SIZE, PAGE_SIZE_OPTIONS} from '/@/constants/common-const';
+import {smartSentry} from '/@/lib/smart-sentry';
+import {TABLE_ID_CONST} from "/@/constants/support/table-id-const";
+import TableOperator from "/@/components/support/table-operator/index.vue";
+import {asnDetailApi} from "/@/api/business/receive/asnDetail/asn-detail-api";
+import AsnDetailForm from "/@/views/business/receive/asnDetail/asn-detail-form.vue";
+import {message, Modal} from "ant-design-vue";
+import {SmartLoading} from '/@/components/framework/smart-loading';
+
+const props = defineProps({
+  asnId: {
+    type: Number,
+    default: 0,
+  },
+});
+const columns = reactive([
+  {
+    title: '入库明细id',
+    dataIndex: 'asnDetailId',
+    ellipsis: true,
+  },
+  {
+    title: '物料编码',
+    dataIndex: 'itemCode',
+    ellipsis: true,
+  },
+  {
+    title: '物料名称',
+    dataIndex: 'itemName',
+    ellipsis: true,
+  },
+  {
+    title: '订单数量',
+    dataIndex: 'orderQuantity',
+    ellipsis: true,
+  },
+  {
+    title: '收货数量',
+    dataIndex: 'receivedQuantity',
+    ellipsis: true,
+  },
+  {
+    title: '操作',
+    dataIndex: 'action',
+    width: 140,
+  },
+]);
+
+// --------------------------- 查询 ---------------------------
+const defaultQueryForm = {
+  pageNum: 1,
+  pageSize: PAGE_SIZE,
+  asnId: undefined,
+  keyword: undefined,
+}
+
+// 查询表单
+const queryForm = reactive({...defaultQueryForm});
+// 表格加载loading
+const tableLoading = ref(false);
+// 表格数据
+const tableData = ref([]);
+// 总数
+const total = ref(0);
+
+
+// 重置查询条件
+function resetQuery() {
+  let pageSize = queryForm.pageSize;
+  Object.assign(queryForm, defaultQueryForm);
+  queryForm.pageSize = pageSize;
+  queryData();
+}
+
+// 搜索
+function onSearch() {
+  queryForm.pageNum = 1;
+  queryData();
+}
+
+//查询数据
+async function queryData() {
+  tableLoading.value = true;
+  try {
+    queryForm.asnId = props.asnId;
+    let queryResult = await asnDetailApi.queryPage(queryForm);
+    tableData.value = queryResult.data.list;
+    total.value = queryResult.data.total;
+  } catch (e) {
+    smartSentry.captureError(e);
+  } finally {
+    tableLoading.value = false;
+  }
+}
+
+// 选择表格行
+const selectedRowKeyList = ref([]);
+
+function onSelectChange(selectedRowKeys: any) {
+  selectedRowKeyList.value = selectedRowKeys;
+}
+
+//新建/编辑
+const formRef = ref();
+
+function showForm(data: object) {
+  formRef.value.show(data, props.asnId);
+}
+
+//确认是否删除？
+function onDelete(data) {
+  Modal.confirm({
+    title: '提示',
+    content: '确定要删除选吗?',
+    okText: '删除',
+    okType: 'danger',
+    onOk() {
+      requestDelete(data);
+    },
+    cancelText: '取消',
+    onCancel() {
+    },
+  });
+}
+
+//请求删除
+async function requestDelete(data) {
+  SmartLoading.show();
+  try {
+    await asnDetailApi.delete(data.asnDetailId);
+    message.success('删除成功');
+    await queryData();
+  } catch (e) {
+    smartSentry.captureError(e);
+  } finally {
+    SmartLoading.hide();
+  }
+}
+
+watch(
+    () => props.asnId,
+    (e) => {
+      if (e) {
+        queryData();
+      }
+    },
+    {immediate: true}
+);
+</script>
+
+<style scoped lang="less">
+.header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 10px
+}
+
+.button-style {
+  margin-left: 10px;
+}
+</style>
diff --git a/smart-admin-web-typescript/src/views/business/receive/asnDetail/asn-detail-form.vue b/smart-admin-web-typescript/src/views/business/receive/asnDetail/asn-detail-form.vue
new file mode 100644
index 0000000..584a055
--- /dev/null
+++ b/smart-admin-web-typescript/src/views/business/receive/asnDetail/asn-detail-form.vue
@@ -0,0 +1,130 @@
+<!--
+  * 入库明细
+  *
+  * @Author:    霍锦
+  * @Date:      2025-03-26 15:16:28
+  * @Copyright  友仓
+-->
+<template>
+  <a-modal
+      :title="form.asnDetailId ? '编辑明细' : '添加明细'"
+      :width="600"
+      :open="visibleFlag"
+      @cancel="onClose"
+      :maskClosable="false"
+      :destroyOnClose="true"
+  >
+    <a-form ref="formRef" :model="form" :rules="rules" :label-col="{ span: 5 }">
+
+      <a-form-item label="物料" name="itemId">
+        <ItemSelect style="width: 100%" v-model:value="form.itemId" :disabledFlag="true" @change="changeItemSelect"/>
+      </a-form-item>
+
+      <a-form-item label="数量" name="orderQuantity">
+        <a-input-number style="width: 100%" v-model:value="form.orderQuantity" :min="1" :max="9999"/>
+      </a-form-item>
+
+
+    </a-form>
+
+    <template #footer>
+      <a-space>
+        <a-button @click="onClose">取消</a-button>
+        <a-button type="primary" @click="onSubmit">保存</a-button>
+      </a-space>
+    </template>
+  </a-modal>
+</template>
+<script setup lang="ts">
+import {reactive, ref, nextTick} from 'vue';
+import _ from 'lodash';
+import {message} from 'ant-design-vue';
+import {SmartLoading} from '/@/components/framework/smart-loading';
+import {asnDetailApi} from '/@/api/business/receive/asnDetail/asn-detail-api';
+import {smartSentry} from '/@/lib/smart-sentry';
+import ItemSelect from "/@/views/business/base/item/item-select.vue";
+
+// ------------------------ 事件 ------------------------
+const emits = defineEmits(['reloadList']);
+
+// ------------------------ 显示与隐藏 ------------------------
+// 是否显示
+const visibleFlag = ref(false);
+
+function show(rowData: object, asnId: number) {
+  Object.assign(form, formDefault);
+  if (rowData && !_.isEmpty(rowData)) {
+    Object.assign(form, rowData);
+  }
+  //将入库单id赋值
+  form.asnId = asnId;
+  visibleFlag.value = true;
+  nextTick(() => {
+    formRef.value.clearValidate();
+  });
+}
+
+function onClose() {
+  Object.assign(form, formDefault);
+  visibleFlag.value = false;
+}
+
+//选择物料
+function changeItemSelect(selectValue: any) {
+  if (selectValue) {
+    form.itemId = selectValue.itemId;
+  }
+}
+
+// ------------------------ 表单 ------------------------
+
+// 组件ref
+const formRef = ref();
+
+const formDefault = {
+  asnDetailId: undefined, //入库明细id
+  asnId: undefined,//入库单id
+  itemId: undefined, //物料id
+  orderQuantity: 1, //订单数量
+};
+
+let form = reactive({...formDefault});
+
+const rules = {
+  itemId: [{required: true, message: '物料id 必填'}],
+  orderQuantity: [{required: true, message: '订单数量 必填'}],
+};
+
+// 点击确定，验证表单
+async function onSubmit() {
+  try {
+    await formRef.value.validateFields();
+    await save();
+  } catch (err) {
+    message.error('参数验证错误，请仔细填写表单数据!');
+  }
+}
+
+// 新建、编辑API
+async function save() {
+  SmartLoading.show();
+  try {
+    if (form.asnDetailId) {
+      await asnDetailApi.update(form);
+    } else {
+      await asnDetailApi.add(form);
+    }
+    message.success('操作成功');
+    emits('reloadList');
+    onClose();
+  } catch (err) {
+    smartSentry.captureError(err);
+  } finally {
+    SmartLoading.hide();
+  }
+}
+
+defineExpose({
+  show,
+});
+</script>
diff --git a/smart-admin-web-typescript/src/views/business/receive/asnDetail/asn-detail-list.vue b/smart-admin-web-typescript/src/views/business/receive/asnDetail/asn-detail-list.vue
new file mode 100644
index 0000000..a3f020a
--- /dev/null
+++ b/smart-admin-web-typescript/src/views/business/receive/asnDetail/asn-detail-list.vue
@@ -0,0 +1,282 @@
+<!--
+  * 入库明细
+  *
+  * @Author:    霍锦
+  * @Date:      2025-03-26 15:16:28
+  * @Copyright  友仓
+-->
+<template>
+    <!---------- 查询表单form begin ----------->
+    <a-form class="smart-query-form">
+        <a-row class="smart-query-form-row">
+            <a-form-item label="物料" class="smart-query-form-item">
+                <a-input style="width: 200px" v-model:value="queryForm.itemId" placeholder="物料" />
+            </a-form-item>
+            <a-form-item class="smart-query-form-item">
+                <a-button type="primary" @click="onSearch">
+                    <template #icon>
+                        <SearchOutlined />
+                    </template>
+                    查询
+                </a-button>
+                <a-button @click="resetQuery" class="smart-margin-left10">
+                    <template #icon>
+                        <ReloadOutlined />
+                    </template>
+                    重置
+                </a-button>
+            </a-form-item>
+        </a-row>
+    </a-form>
+    <!---------- 查询表单form end ----------->
+
+    <a-card size="small" :bordered="false" :hoverable="true">
+        <!---------- 表格操作行 begin ----------->
+        <a-row class="smart-table-btn-block">
+            <div class="smart-table-operate-block">
+                <a-button @click="showForm" type="primary" size="small">
+                    <template #icon>
+                        <PlusOutlined />
+                    </template>
+                    新建
+                </a-button>
+                <a-button @click="confirmBatchDelete" type="primary" danger size="small" :disabled="selectedRowKeyList.length == 0">
+                    <template #icon>
+                        <DeleteOutlined />
+                    </template>
+                    批量删除
+                </a-button>
+            </div>
+            <div class="smart-table-setting-block">
+                <TableOperator v-model="columns" :tableId="null" :refresh="queryData" />
+            </div>
+        </a-row>
+        <!---------- 表格操作行 end ----------->
+
+        <!---------- 表格 begin ----------->
+        <a-table
+            size="small"
+            :dataSource="tableData"
+            :columns="columns"
+            rowKey="asnDetailId"
+            bordered
+            :loading="tableLoading"
+            :pagination="false"
+            :row-selection="{ selectedRowKeys: selectedRowKeyList, onChange: onSelectChange }"
+        >
+            <template #bodyCell="{ text, record, column }">
+
+	    <!-- 有图片预览时 注释解开并把下面的'picture'修改成自己的图片字段名即可 -->
+              <!-- <template v-if="column.dataIndex === 'picture'">
+                  <FilePreview :fileList="text" type="picture" />
+                </template> -->
+
+	    <!-- 使用字典时 注释解开并把下面的'dict'修改成自己的字典字段名即可 有多个字典字段就复制多份同理修改 不然不显示字典 -->
+              <!-- 方便修改tag的颜色 orange green purple success processing error default warning -->
+              <!-- <template v-if="column.dataIndex === 'dict'">
+                <a-tag color="cyan">
+                  {{ text && text.length > 0 ? text.map((e) => e.valueName).join(',') : '暂无' }}
+                </a-tag>
+              </template> -->
+
+                <template v-if="column.dataIndex === 'action'">
+                    <div class="smart-table-operate">
+                        <a-button @click="showForm(record)" type="link">编辑</a-button>
+                        <a-button @click="onDelete(record)" danger type="link">删除</a-button>
+                    </div>
+                </template>
+            </template>
+        </a-table>
+        <!---------- 表格 end ----------->
+
+        <div class="smart-query-table-page">
+            <a-pagination
+                showSizeChanger
+                showQuickJumper
+                show-less-items
+                :pageSizeOptions="PAGE_SIZE_OPTIONS"
+                :defaultPageSize="queryForm.pageSize"
+                v-model:current="queryForm.pageNum"
+                v-model:pageSize="queryForm.pageSize"
+                :total="total"
+                @change="queryData"
+                @showSizeChange="queryData"
+                :show-total="(total) => `共${total}条`"
+            />
+        </div>
+
+        <AsnDetailForm  ref="formRef" @reloadList="queryData"/>
+
+    </a-card>
+</template>
+<script setup lang="ts">
+    import { reactive, ref, onMounted } from 'vue';
+    import { message, Modal } from 'ant-design-vue';
+    import { SmartLoading } from '/@/components/framework/smart-loading';
+    import { asnDetailApi } from '/@/api/business/receive/asnDetail/asn-detail-api';
+    import { PAGE_SIZE_OPTIONS } from '/@/constants/common-const';
+    import { smartSentry } from '/@/lib/smart-sentry';
+    import TableOperator from '/@/components/support/table-operator/index.vue';
+    import AsnDetailForm from '/@/views/business/receive/asnDetail/asn-detail-form.vue';
+
+    // ---------------------------- 表格列 ----------------------------
+
+    const columns = ref([
+        {
+            title: '入库明细id',
+            dataIndex: 'asnDetailId',
+            ellipsis: true,
+        },
+        {
+            title: '物料id',
+            dataIndex: 'itemId',
+            ellipsis: true,
+        },
+        {
+            title: '订单数量',
+            dataIndex: 'orderQuantity',
+            ellipsis: true,
+        },
+        {
+            title: '收货数量',
+            dataIndex: 'receivedQuantity',
+            ellipsis: true,
+        },
+        {
+            title: '创建时间',
+            dataIndex: 'createTime',
+            ellipsis: true,
+        },
+        {
+            title: '操作',
+            dataIndex: 'action',
+            fixed: 'right',
+            width: 90,
+        },
+    ]);
+
+    // ---------------------------- 查询数据表单和方法 ----------------------------
+
+    const queryFormState = {
+        itemId: undefined, //物料
+        pageNum: 1,
+        pageSize: 10,
+    };
+    // 查询表单form
+    const queryForm = reactive({ ...queryFormState });
+    // 表格加载loading
+    const tableLoading = ref(false);
+    // 表格数据
+    const tableData = ref([]);
+    // 总数
+    const total = ref(0);
+
+    // 重置查询条件
+    function resetQuery() {
+        let pageSize = queryForm.pageSize;
+        Object.assign(queryForm, queryFormState);
+        queryForm.pageSize = pageSize;
+        queryData();
+    }
+
+    // 搜索
+    function onSearch(){
+      queryForm.pageNum = 1;
+      queryData();
+    }
+
+    // 查询数据
+    async function queryData() {
+        tableLoading.value = true;
+        try {
+            let queryResult = await asnDetailApi.queryPage(queryForm);
+            tableData.value = queryResult.data.list;
+            total.value = queryResult.data.total;
+        } catch (e) {
+            smartSentry.captureError(e);
+        } finally {
+            tableLoading.value = false;
+        }
+    }
+
+
+    onMounted(queryData);
+
+    // ---------------------------- 添加/修改 ----------------------------
+    const formRef = ref();
+
+    function showForm(data) {
+        formRef.value.show(data);
+    }
+
+    // ---------------------------- 单个删除 ----------------------------
+    //确认删除
+    function onDelete(data){
+        Modal.confirm({
+            title: '提示',
+            content: '确定要删除选吗?',
+            okText: '删除',
+            okType: 'danger',
+            onOk() {
+                requestDelete(data);
+            },
+            cancelText: '取消',
+            onCancel() {},
+        });
+    }
+
+    //请求删除
+    async function requestDelete(data){
+        SmartLoading.show();
+        try {
+            let deleteForm = {
+                goodsIdList: selectedRowKeyList.value,
+            };
+            await asnDetailApi.delete(data.asnDetailId);
+            message.success('删除成功');
+            queryData();
+        } catch (e) {
+            smartSentry.captureError(e);
+        } finally {
+            SmartLoading.hide();
+        }
+    }
+
+    // ---------------------------- 批量删除 ----------------------------
+
+    // 选择表格行
+    const selectedRowKeyList = ref([]);
+
+    function onSelectChange(selectedRowKeys) {
+        selectedRowKeyList.value = selectedRowKeys;
+    }
+
+    // 批量删除
+    function confirmBatchDelete() {
+        Modal.confirm({
+            title: '提示',
+            content: '确定要批量删除这些数据吗?',
+            okText: '删除',
+            okType: 'danger',
+            onOk() {
+                requestBatchDelete();
+            },
+            cancelText: '取消',
+            onCancel() {},
+        });
+    }
+
+    //请求批量删除
+    async function requestBatchDelete() {
+        try {
+            SmartLoading.show();
+            await asnDetailApi.batchDelete(selectedRowKeyList.value);
+            message.success('删除成功');
+            queryData();
+        } catch (e) {
+            smartSentry.captureError(e);
+        } finally {
+            SmartLoading.hide();
+        }
+    }
+</script>