物品基础信息前端 导入按钮

src/api/wms/itembasic/index.ts

@@ -60,6 +60,8 @@ export const exportItembasic = async (params) => {
 }
 
 // 下载用户导入模板
-export const importUserTemplate = () => {
+export const importTemplate = () => {
   return request.download({ url: '/wms/itembasic/get-import-template' })
 }
+// 导入地址
+export const importUrl = '/wms/itembasic/import'

src/views/wms/itembasic/ItembasicDetail.vue

@@ -41,8 +41,6 @@ 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 tabsList = ref(JSON.parse(JSON.stringify(ItemBasicTabsList)))
 tabsList.value.unshift({
   label: '详情',
@@ -101,10 +99,10 @@ const changeRecordData = reactive({
     time: '2023年5月6日 17:16:00',
     file: [{
       name: '这是个附件的名字.docx',
-      url: 'http://localhost:12080/admin-api/system/user/get-import-template'
+      url: 'http://localhost:12080//wms/itembasic/get-import-template'
     }, {
       name: '这是个附件的名字.docx',
-      url: 'http://localhost:12080/admin-api/system/user/get-import-template'
+      url: 'http://localhost:12080/wms/itembasic/get-import-template'
     }]
   }]
 })
@@ -117,7 +115,7 @@ const importTemplateData = reactive({
 onMounted(async () => {
   // 获取详情
   detailData.value = await getItembasic(query.id)
-  importTemplateData.templateUrl = await UserApi.importUserTemplate()
+  importTemplateData.templateUrl = await ItembasicApi.importTemplate()
 })
 
 // 导入成功之后

src/views/wms/itembasic/index.vue

@@ -2,9 +2,11 @@
   <ContentWrap>
     <!-- 搜索工作栏 -->
     <Search :schema="ItemBasic.allSchemas.searchSchema" @search="setSearchParams" @reset="setSearchParams" />
-       <el-button type="primary" @click="openForm('create')">
-        <Icon icon="ep:plus" class="mr-5px" /> 新增
-      </el-button>
+      <!-- 列表头部 -->
+  <TableHead
+    :HeadButttondata="HeadButttondata" 
+    @buttonBaseClick="buttonBaseClick"
+  />
 
     <!-- <el-form
       class="-mb-15px"
@@ -414,6 +416,7 @@
 
  <!-- 表单弹窗：添加/修改 -->
     <ItembasicForm ref="formRef" @success="getList" />
+    <ImportForm ref="importFormRef" :url="ItembasicApi.importUrl" :importTemplateData="importTemplateData" @success="importSuccess" />
 </template>
 
 <script setup lang="ts">
@@ -421,9 +424,14 @@ import download from '@/utils/download'
 import * as ItembasicApi from '@/api/wms/itembasic'
 import ItembasicForm from './ItembasicForm.vue'
 import ItembasicDetail from './ItembasicDetail.vue'
+import ImportForm from '@/components/ImportForm/src/ImportForm.vue'
 import { ItemBasic } from '@/utils/disposition/tableColumns'
+import * as defaultButtons from '@/utils/disposition/defaultButtons'
 const router = useRouter() // 路由
 
+console.log(ItembasicApi.importUrl);
+
+
 // tableObject：表格的属性对象，可获得分页大小、条数等属性
 // tableMethods：表格的操作对象，可进行获得分页、删除记录等操作
 // 详细可见：https://doc.iocoder.cn/vue3/crud-schema/
@@ -431,6 +439,24 @@ const { tableObject, tableMethods } = useTable({
   getListApi: ItembasicApi.getItembasicPage // 分页接口
 })
 
+const importFormRef=ref()
+// 列表头部按钮
+const HeadButttondata = [
+  defaultButtons.defaultAddBtn(null), // 新增
+  defaultButtons.defaultImportBtn(null), // 导入
+  defaultButtons.defaultExportBtn(null), // 导出
+  // defaultButtons.defaultFilterBtn(), // 筛选
+  defaultButtons.defaultFreshBtn(null), // 刷新
+  // {
+  //   label: '自定义扩展按钮',
+  //   name: 'zdy',
+  //   hide: false,
+  //   type: 'primary',
+  //   icon: 'Select',
+  //   color: ''
+  // },
+]
+
 // 获得表格的各种操作
 const { getList, setSearchParams } = tableMethods
 
@@ -473,7 +499,52 @@ const queryParams = reactive({
 })
 const exportLoading = ref(false) // 导出的加载中
 
+// 头部按钮事件 
+const buttonBaseClick = (val, item) => {
+    // 新增
+    if (val == 'add') {
+      console.log(417, item)
+    }
+    // 导入
+    else if (val == 'import') {
+      handleImport()
+    }
+    // 导出
+    else if (val == 'export') {
+      handleExport()
+    }
+    // 刷新
+    else if (val == 'refresh') {
+      getList()
+    } 
+    // 筛选
+    else if (val == 'filtrate') {
+
+    }
+    // 其他按钮 
+    else {
 
+    }
+  }
+
+  onMounted(async () => {
+  importTemplateData.templateUrl = await ItembasicApi.importTemplate()
+})
+
+const handleImport = () => {
+  importFormRef.value.open()
+}
+
+  // 导入附件弹窗所需的参数
+const importTemplateData = reactive({
+  templateUrl: '',
+  templateTitle: '导入模版99.xls'
+})
+
+// 导入成功之后
+const importSuccess = () => {
+  getList()
+}
 /** 添加/修改操作 */
 const formRef = ref()
 const openForm = (type: string, id?: number) => {