diff --git a/src/api/wms/detail/index.ts b/src/api/wms/detail/index.ts
new file mode 100644
index 000000000..9bf57f699
--- /dev/null
+++ b/src/api/wms/detail/index.ts
@@ -0,0 +1,35 @@
+import request from '@/config/axios'
+
+
+// 查询备注列表
+export const getRemarkPage = async (params) => {
+  return await request.get({ url: `/infra/remark/list`, params })
+}
+
+// // 查询库区详情
+// export const getArea = async (id: number) => {
+//   return await request.get({ url: `/wms/areabasic/get?id=` + id })
+// }
+
+// 新增备注
+export const createRemark= async (data) => {
+  return await request.post({ url: `/infra/remark/create`, data })
+}
+// 查询变更记录列表
+export const getChangeRecordPage = async (params) => {
+  return await request.get({ url: `/infra/trends/list`, params })
+}
+// // 修改库区
+// export const updateArea = async (data: AreaVO) => {
+//   return await request.put({ url: `/wms/areabasic/update`, data })
+// }
+
+// // 删除库区
+// export const deleteArea = async (id: number) => {
+//   return await request.delete({ url: `/wms/areabasic/delete?id=` + id })
+// }
+
+// // 导出库区 Excel
+// export const exportArea = async (params) => {
+//   return await request.download({ url: `/wms/areabasic/export-excel`, params })
+// }
diff --git a/src/components/Detail/src/Detail.vue b/src/components/Detail/src/Detail.vue
index c3f0e8d1d..5dc338bbb 100644
--- a/src/components/Detail/src/Detail.vue
+++ b/src/components/Detail/src/Detail.vue
@@ -1,12 +1,13 @@
 <template>
-  <el-drawer v-model="isShowDrawer" title="详情" direction="rtl" size="80%" v-loading="detailLoading" >
+  <el-drawer v-model="isShowDrawer" title="详情" direction="rtl" size="80%" v-loading="detailLoading">
     <template #header>
       <div class="font-size-18px">
         {{ titleValueRef }} <span class="ml-20px font-size-16px">{{ titleNameRef }}</span>
       </div>
     </template>
     <ContentWrap v-if="!isBasic">
-      <Descriptions :data="detailData" labelClassName="label-class-name" label-align="left" direction="vertical" :column="8" :schema="allSchemas.detailSchema" :columns="2" width="200px"/>
+      <Descriptions :data="detailData" labelClassName="label-class-name" label-align="left" direction="vertical"
+        :column="8" :schema="allSchemas.detailSchema" :columns="2" width="200px" />
     </ContentWrap>
     <Tabs :tabsList="tabsList" :current="current" @change="change" />
     <div class="flex" v-if="current == 0">
@@ -18,20 +19,16 @@
         <!-- 附件组件 -->
         <Annex :data="annexData" @handleImport="handleImport" @deleteAnnex="deleteAnnexSuccess" />
         <!-- 备注组件 -->
-        <Remarks :data="remarksData" class="mt-20px" @submitSucss="remarksSubmitSucss" />
+        <Remarks :remarksData="remarksData"  class="mt-20px"
+          @remarksSubmitScuess="remarksSubmitScuess" />
         <!-- 变更记录组件 -->
         <ChangeRecord :data="changeRecordData" class="mt-20px" />
       </ContentWrap>
     </div>
     <ContentWrap v-else>
-      <Table 
-        :columns="allSchemas.tableColumns"
-        :data="tableObject.tableList"
-        :loading="tableObject.loading"
-        :pagination="{total: tableObject.total}"
-        v-model:pageSize="tableObject.pageSize"
-        v-model:currentPage="tableObject.currentPage"
-      /> 
+      <Table :columns="allSchemas.tableColumns" :data="tableObject.tableList" :loading="tableObject.loading"
+        :pagination="{ total: tableObject.total }" v-model:pageSize="tableObject.pageSize"
+        v-model:currentPage="tableObject.currentPage" />
     </ContentWrap>
   </el-drawer>
 </template>
@@ -41,7 +38,8 @@ import Annex from '@/components/Annex/src/Annex.vue'
 import Remarks from '@/components/Remarks/src/Remarks.vue'
 import ChangeRecord from '@/components/ChangeRecord/src/ChangeRecord.vue'
 import Tabs from '@/components/Tabs/src/Tabs.vue'
-import * as ItembasicApi from '@/api/wms/itembasic'
+import * as DetailApi from '@/api/wms/detail'
+
 
 defineOptions({ name: 'Detail' })
 
@@ -64,29 +62,15 @@ const props = defineProps({
     required: true,
     default: null
   },
-  // // 可以导入的文件类型
-  // accept: {
-  //   type: String,
-  //   required: false,
-  //   default:'.xlsx,.xls'
-  // },
-  // // 是否更新已经存在的用户数据.默认值是1
-  // mode: {
-  //   type: Number,
-  //   required: false,
-  //   default: 1
-  // },
-  // url:{
-  //   type: String,
-  //   required: false,
-  // }
 })
 
 const isShowDrawer = ref(false)
 
-const tabsList = ref(JSON.parse(JSON.stringify(props.tabs?props.tabs:'')))
+const detailLoading = ref(false)
+
+const tabsList = ref(JSON.parse(JSON.stringify(props.tabs ? props.tabs : '')))
 
-if (tabsList.value&& tabsList.value.length>0) {
+if (tabsList.value && tabsList.value.length > 0) {
   tabsList.value.unshift({
     label: '详情',
     prop: 'Detail'
@@ -112,17 +96,11 @@ const annexData = reactive({
     time: '2022年12月12日 17:16:00',
   }]
 })
-// 备注默认数据
+
+// 备注数据
 const remarksData = reactive({
-  remarksList: [{
-    name: '诸葛亮',
-    text: '转朱阁，低绮户，照无眠。不应有恨，何事长向别时圆？人有悲欢离合，月有阴晴圆缺，此事古难全。但愿人长久，千里共婵娟。',
-    time: '2023年5月6日 17:16:00',
-  }, {
-    name: '刘备',
-    text: '转朱阁，低绮户，照无眠。不应有恨，何事长向别时圆？人有悲欢离合，月有阴晴圆缺，此事古难全。但愿人长久，千里共婵娟。',
-    time: '2022年12月12日 17:16:00',
-  }]
+  remarksList: [],
+  data:{}
 })
 
 // 变更记录默认数据
@@ -151,13 +129,10 @@ const changeRecordData = reactive({
 const detailData = ref("")//详情数据
 
 // 导入成功之后
-const importSuccess = () => {
+const importSuccess = () => {}
 
-
-}
 /** 搜索按钮操作 */
 const handleQuery = () => {
-
   importFormRef.value.open()
 }
 
@@ -176,64 +151,68 @@ const handleImport = () => {
 const deleteAnnexSuccess = async () => {
   console.log('删除成功');
 }
-// 备注提交成功之后
-const remarksSubmitSucss = () => {
-  console.log('提交成功');
-}
-// 供应商物品数据
-// const supplierItems = reactive({
-//   supplierItemsList: [{
-//     code: '646456',
-//     name: '978978'
-//   }],
-//   total: 20,
-//   pageSize: 1,
-//   currentPage: 2
-// })
-
 
+// Tabs当前选择
 const current = ref(0)
-const detailLoading = ref(false)
-// 获取表格数据
-const { tableObject, tableMethods } = useTable({
-  getListApi: ItembasicApi.getItembasicPage // 分页接口
-})
 const change = (item, index) => {
   current.value = index
 }
 
-// 获得表格的各种操作
-const { getList } = tableMethods
-getList()
+
 
 /** 打开弹窗 */
 const titleNameRef = ref()
 const titleValueRef = ref()
-const openDetail = async (row: any, titleName: any, titleValue: any) => {
+const openDetail = async (row: any, titleName: any, titleValue: any, tableName: any) => {
   titleNameRef.value = titleName
   titleValueRef.value = titleValue
+  remarksData.data = {
+    tableId: row.id,
+    tableName: tableName,
+  }
   isShowDrawer.value = true
-  console.log(216, row)
   if (row) {
     detailLoading.value = true
     try {
-      //  detailData.value = await ItembasicApi.getItembasic(id)
       detailData.value = row
+      console.log(detailData.value);
+      getRemarkList()
+      getChangeRecordList()
+
     } finally {
       detailLoading.value = false
     }
   }
 }
 defineExpose({ openDetail }) // 提供 open 方法，用于打开弹窗
+
+// 获取备注列表
+const getRemarkList = async () => {
+  detailLoading.value = true
+  try {
+    remarksData.remarksList = await DetailApi.getRemarkPage(remarksData.data)
+  } finally {
+    detailLoading.value = false
+  }
+}
+// 备注提交成功之后
+const remarksSubmitScuess = async (remark) => {
+  detailLoading.value = false
+  getRemarkList()
+  getChangeRecordList()
+}
+// 获取变更记录
+const getChangeRecordList = async () => {
+  remarksData.remarksList = await DetailApi.getChangeRecordPage(remarksData.data)
+}
 </script>
 <style lang="scss">
-    .el-drawer__body{
-      background: #f5f5f5!important;
-    }
-    ::v-deep(.label-class-name){
-    color: #dedede;
-  }
-</style>
-<style scoped lang="scss">
+.el-drawer__body {
+  background: #f5f5f5 !important;
+}
 
+::v-deep(.label-class-name) {
+  color: #dedede;
+}
 </style>
+<style scoped lang="scss"></style>
diff --git a/src/components/Remarks/src/Remarks.vue b/src/components/Remarks/src/Remarks.vue
index eed1779c7..0e91a2e04 100644
--- a/src/components/Remarks/src/Remarks.vue
+++ b/src/components/Remarks/src/Remarks.vue
@@ -5,22 +5,23 @@
       <div class="title-txt">备注</div>
     </div>
     <div class="list">
-      <div class="item flex items-start" v-for="(item, index) in data.remarksList" :key="index">
+      <div class="item flex items-start" v-for="(item, index) in remarksData.remarksList" :key="index">
         <div class="user-icon mt-4px">
-          <Icon icon="fa-solid:user" color="#fff" size="16" />
+          <img :src="item.avatar" v-if="item.avatar" alt="" class="w-[100%] h-[100%]"/>
+          <Icon icon="fa-solid:user" color="#fff" v-else size="16"/>
         </div>
         <div class="item-center">
           <div class="item-title">
-            <div class="item-title-txt">{{ item.name }}</div>
-            <div class="time">{{ item.time }}</div>
+            <div class="item-title-txt">{{ item.nickname }}</div>
+            <div class="time">{{formatDate(item.createTime)}}</div>
           </div>
-          <div class="mt-8px color-#303133 font-size-14px">{{ item.text }}</div>
+          <div class="mt-8px color-#303133 font-size-14px">{{ item.remark }}</div>
         </div>
       </div>
     </div>
     <div class="add-remarks flex items-center mt-20px">
-       <el-input v-model="remark" placeholder="请输入备注" />
-       <el-button class="ml-16px" type="primary" @click="handleSubmit" >
+       <el-input v-model="data.remark" placeholder="请输入备注" />
+       <el-button class="ml-16px" type="primary" @click="handleSubmitrRemarks" >
           确定
         </el-button>
     </div>
@@ -28,30 +29,39 @@
 </template>
 
 <script lang="ts" setup>
-import { getCurrentInstance } from 'vue'
 const message = useMessage() // 消息弹窗
-const { proxy } = getCurrentInstance()
+import * as DetailApi from '@/api/wms/detail'
+import { formatDate } from '@/utils/formatTime'
+
 defineComponent({
   name: 'Annex'
 })
 
-const remark = ref('')
 // 接受父级数据
 const props = defineProps({
-  data: {
+  remarksData: {
     type: Object,
     required: true
   }
 })
+const data = ref(props.remarksData.data)
 
 // 子传父的时候需要先定义好emit这个方法
-const emit = defineEmits(['remarksSubmitSucss'])
+const emit = defineEmits(['remarksSubmitScuess'])
 // 提交备注
-const handleSubmit = ()=>{
-  if(!remark.value){
+const handleSubmitrRemarks =async ()=>{
+  if(!data.value.remark){
     message.error('请填写备注')
+    return;
+  }
+  try {
+    await DetailApi.createRemark(data.value)
+    message.success('提交成功')
+  } finally {
+    emit('remarksSubmitScuess') //成功之后给父组件的数据
+    data.value.remark = ''
   }
-  emit('remarksSubmitSucss') //成功之后给父组件的数据
+  
 }
 </script>
 
@@ -82,6 +92,7 @@ const handleSubmit = ()=>{
     display: flex;
     align-items: center;
     justify-content: center;
+    overflow: hidden;
   }
 
   .item-center {
diff --git a/src/views/wms/itembasic/index.vue b/src/views/wms/itembasic/index.vue
index 239f512c4..f6bfefd50 100644
--- a/src/views/wms/itembasic/index.vue
+++ b/src/views/wms/itembasic/index.vue
@@ -14,7 +14,7 @@
         total: tableObject.total
       }" v-model:pageSize="tableObject.pageSize" v-model:currentPage="tableObject.currentPage">
       <template #code="{row}">
-        <el-button type="primary" link @click="openDetail(row, '代码', row.code)">
+        <el-button type="primary" link @click="openDetail(row, '代码', row.code,route.name)">
           <span>{{ row.code }}</span>
         </el-button>
       </template>
@@ -55,6 +55,8 @@ import * as defaultButtons from '@/utils/disposition/defaultButtons'
 import { ItemBasicTabsList } from '@/utils/disposition/tabsList'
 
 defineOptions({ name: 'Itembasic' })
+const route = useRoute(); //获取路由
+
 
 const { tableObject, tableMethods } = useTable({
   getListApi: ItembasicApi.getItembasicPage // 分页接口
@@ -142,8 +144,8 @@ const openForm = (type: string, id?: number) => {
   basicFormRef.value.open(type, id)
 }
 const detailRef = ref()
-const openDetail = (row: any, titleName: any, titleValue: any) => {
-  detailRef.value.openDetail(row, titleName, titleValue)
+const openDetail = (row: any, titleName: any, titleValue: any, tableNameRef: any) => {
+  detailRef.value.openDetail(row, titleName, titleValue, tableNameRef)
 }
 
 /** 删除按钮操作 */