详情

src/components/Detail/index.ts

@@ -0,0 +1,3 @@
+import Detail from './src/Detail.vue'
+
+export { Detail }

src/components/Detail/src/Detail.vue

@@ -0,0 +1,204 @@
+<template>
+  <el-drawer v-model="isShowDrawer" title="详情" direction="rtl" size="80%" v-loading="detailLoading">
+    <ContentWrap>
+      <div class="font-size-18px">
+        {{ detailData.code }} <span class="ml-20px font-size-16px">{{ detailData.name }}</span>
+      </div>
+    </ContentWrap>
+    <Tabs :tabsList="tabsList" :current="current" @change="change" />
+    <div class="flex" v-if="current == 0">
+      <!-- 详情 -->
+      <ContentWrap class="w-[73%]">
+        <Descriptions :data="detailData" :schema="ItemBasic.allSchemas.detailSchema" :columns="2" />
+      </ContentWrap>
+      <ContentWrap class="w-[27%] ml-16px">
+        <!-- 附件组件 -->
+        <Annex :data="annexData" @handleImport="handleImport" @deleteAnnex="deleteAnnexSuccess" />
+        <!-- 备注组件 -->
+        <Remarks :data="remarksData" class="mt-20px" @submitSucss="remarksSubmitSucss" />
+        <!-- 变更记录组件 -->
+        <ChangeRecord :data="changeRecordData" class="mt-20px" />
+      </ContentWrap>
+      <!-- 用户导入对话框 -->
+      <ImportForm ref="importFormRef" :importTemplateData="importTemplateData" @success="importSuccess" />
+    </div>
+    <ContentWrap v-else>
+      <Table :columns="ItemBasic.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>
+
+<script lang="ts" setup>
+defineOptions({ name: 'Detail' })
+import Annex from '@/components/Annex/src/Annex.vue'
+import Remarks from '@/components/Remarks/src/Remarks.vue'
+import ImportForm from '@/components/ImportForm/src/ImportForm.vue'
+import ChangeRecord from '@/components/ChangeRecord/src/ChangeRecord.vue'
+import Tabs from '@/components/Tabs/src/Tabs.vue'
+import { ItemBasic } from '@/utils/disposition/tableColumns.ts'
+import { ItemBasicTabsList } from '@/utils/disposition/tabsList.ts'
+import { getItembasic } from '@/api/wms/itembasic'
+const { query } = useRoute() // 路由的查询
+import * as ItembasicApi from '@/api/wms/itembasic'
+
+import * as UserApi from '@/api/system/user'
+
+const isShowDrawer = ref(false)
+
+const tabsList = ref(JSON.parse(JSON.stringify(ItemBasicTabsList)))
+tabsList.value.unshift({
+  label: '详情',
+  prop: 'Detail'
+})
+// 搜索参数
+const queryParams = reactive({
+  title: '',
+  name: undefined,
+  status: undefined,
+  pageNo: 1,
+  pageSize: 100
+})
+const queryFormRef = ref() // 搜索的表单
+// const formLabel = ref(ItemBasic)//form表单label列表
+// 附件默认数据
+const annexData = reactive({
+  annexList: [{
+    title: '文件名文件名2023-12-12.docx',
+    size: '150.02KB',
+    people: '贾先生',
+    time: '2023年5月6日 17:16:00',
+  }, {
+    title: '文件名文件名2023-12-15.docx',
+    size: '242KB',
+    people: '张张',
+    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',
+  }]
+})
+
+// 变更记录默认数据
+const changeRecordData = reactive({
+  changeRecordList: [{
+    name: '诸葛亮',
+    type: 1,
+    time: '2023年5月6日 17:16:00',
+  }, {
+    name: '刘备',
+    type: 2,
+    time: '2023年5月6日 17:16:00',
+  }, {
+    name: '曹操',
+    type: 3,
+    time: '2023年5月6日 17:16:00',
+    file: [{
+      name: '这是个附件的名字.docx',
+      url: 'http://localhost:12080/admin-api/system/user/get-import-template'
+    }, {
+      name: '这是个附件的名字.docx',
+      url: 'http://localhost:12080/admin-api/system/user/get-import-template'
+    }]
+  }]
+})
+const detailData = ref("")//详情数据
+// 导入附件弹窗所需的参数
+const importTemplateData = reactive({
+  templateUrl: '',
+  templateTitle: '导入模版99.xls'
+})
+onMounted(async () => {
+  // 获取详情
+  detailData.value = await getItembasic(query.id)
+  importTemplateData.templateUrl = await UserApi.importUserTemplate()
+})
+
+// 导入成功之后
+const importSuccess = () => {
+
+
+}
+/** 搜索按钮操作 */
+const handleQuery = () => {
+
+  importFormRef.value.open()
+}
+
+/** 重置按钮操作 */
+const resetQuery = () => {
+  queryParams.pageNo = 1
+  queryFormRef.value.resetFields()
+}
+
+/** 用户导入 */
+const importFormRef = ref()
+const handleImport = () => {
+  importFormRef.value.open()
+}
+// 删除附件成功之后所走的方法
+const deleteAnnexSuccess = async () => {
+  console.log('删除成功');
+}
+// 备注提交成功之后
+const remarksSubmitSucss = () => {
+  console.log('提交成功');
+}
+// 供应商物品数据
+// const supplierItems = reactive({
+//   supplierItemsList: [{
+//     code: '646456',
+//     name: '978978'
+//   }],
+//   total: 20,
+//   pageSize: 1,
+//   currentPage: 2
+// })
+
+
+const current = ref(0)
+const detailLoading = ref(false)
+// 获取表格数据
+const { tableObject, tableMethods } = useTable({
+  getListApi: ItembasicApi.getItembasicPage // 分页接口
+})
+const change = (item, index) => {
+  current.value = index
+}
+
+// 获得表格的各种操作
+const { getList, setSearchParams } = tableMethods
+getList()
+
+/** 打开弹窗 */
+const openDetail = async (id?: number) => {
+  isShowDrawer.value = true
+  if (id) {
+    detailLoading.value = true
+    try {
+       detailData.value = await ItembasicApi.getItembasic(id)
+      // detailRef.value.setValues(data)
+
+    } finally {
+      detailLoading.value = false
+    }
+  }
+}
+defineExpose({ openDetail }) // 提供 open 方法，用于打开弹窗
+</script>
+<style scoped lang="scss">
+    ::v-deep(.el-drawer__body){
+      background: #f5f5f5!important;
+    }
+</style>

src/main.ts

@@ -65,6 +65,7 @@ const setupAll = async () => {
   app.use(VueDOMPurifyHTML)
 
   app.mount('#app')
+  app.config.warnHandler = () => null;
 }
 
 setupAll()

src/views/wms/itembasic/index.vue

@@ -417,12 +417,15 @@
  <!-- 表单弹窗：添加/修改 -->
     <ItembasicForm ref="formRef" @success="getList" />
     <ImportForm ref="importFormRef" :url="ItembasicApi.importUrl" :importTemplateData="importTemplateData" @success="importSuccess" />
+    <!-- 详情 -->
+      <Detail ref="detailRef"/>
 </template>
 
 <script setup lang="ts">
 import download from '@/utils/download'
 import * as ItembasicApi from '@/api/wms/itembasic'
 import ItembasicForm from './ItembasicForm.vue'
+import Detail from '@/components/Detail/src/Detail.vue'
 import ItembasicDetail from './ItembasicDetail.vue'
 import ImportForm from '@/components/ImportForm/src/ImportForm.vue'
 import { ItemBasic } from '@/utils/disposition/tableColumns'
@@ -550,15 +553,19 @@ const formRef = ref()
 const openForm = (type: string, id?: number) => {
   formRef.value.open(type, id)
 }
+const detailRef = ref()
 const openDetail = (id?: number) => {
-  // detailRef.value.open(id)
-  router.push({ 
-    path: '/wms/itembasic-manage/itembasic-detail',
-    query:{
-      id
-    }
- })
+  detailRef.value.openDetail(id)
 }
+// const openDetail = (id?: number) => {
+//   // detailRef.value.open(id)
+//   router.push({ 
+//     path: '/wms/itembasic-manage/itembasic-detail',
+//     query:{
+//       id
+//     }
+//  })
+// }
 
 /** 删除按钮操作 */
 const handleDelete = async (id: number) => {