物料新增批量导入照片按钮

src/apis/material/materialInfo.ts

@@ -1,12 +1,12 @@
 import http from '@/utils/http'
 
-const BASE_URL = '/admin/meterialInfo'
+const BASE_URL = '/admin/materialInfo'
 
-export interface MeterialInfoResp {
+export interface MaterialInfoResp {
   materialName: string
   encoding: string
   unitWeight: string
-  maxWeight: string
+  materialSpec: string
   photoUrl: string
   createUser: string
   createTime: string
@@ -19,16 +19,33 @@ export interface MaterialInfoQuery {
   encoding: string | undefined
   sort: Array<string>
 }
+
+/* 物料信息导入结果类型 */
+export interface MaterialImportResp {
+  importKey: string
+  totalRows: number
+  validRows: number
+  duplicateNameRows: number
+  duplicateCodeRows: number
+}
 export interface MaterialInfoPageQuery extends MaterialInfoQuery, PageQuery {}
 
 /** @desc 查询物料信息列表 */
 export function listMaterialInfo(query: MaterialInfoPageQuery) {
-  return http.get<PageRes<MeterialInfoResp[]>>(`${BASE_URL}`, query)
+  return http.get<PageRes<MaterialInfoResp[]>>(`${BASE_URL}`, query)
+}
+
+interface MaterialInfoDetailResp {
+}
+
+/** @desc 下载物料信息导入模板 */
+export function downloadMaterialInfoImportTemplate() {
+  return http.download(`${BASE_URL}/import/template`)
 }
 
 /** @desc 查询物料信息详情 */
 export function getMaterialInfo(id: string) {
-  return http.get<MeterialInfoDetailResp>(`${BASE_URL}/${id}`)
+  return http.get<MaterialInfoDetailResp>(`${BASE_URL}/${id}`)
 }
 
 /** @desc 新增物料信息 */
@@ -47,6 +64,21 @@ export function deleteMaterialInfo(id: string) {
 }
 
 /** @desc 导出物料信息 */
-export function exportMaterialInfo(query: MeterialInfoQuery) {
+export function exportMaterialInfo(query: MaterialInfoQuery) {
   return http.download(`${BASE_URL}/export`, query)
 }
+
+/** @desc 解析物料信息导入数据 */
+export function parseImportMaterial(data: FormData) {
+  return http.post(`${BASE_URL}/import/parse`, data)
+}
+
+/** @desc 导入物料信息 */
+export function importMaterial(data: any) {
+  return http.post(`${BASE_URL}/import`, data)
+}
+
+/** @desc 解析物料信息导入数据 */
+export function uploadMaterialPhotos(data: FormData) {
+  return http.post(`${BASE_URL}/import/uploadMaterialPhotos`, data)
+}

src/types/components.d.ts

@@ -13,7 +13,9 @@ declare module 'vue' {
     ABreadcrumb: typeof import('@arco-design/web-vue')['Breadcrumb']
     ABreadcrumbItem: typeof import('@arco-design/web-vue')['BreadcrumbItem']
     AButton: typeof import('@arco-design/web-vue')['Button']
+    ACard: typeof import('@arco-design/web-vue')['Card']
     ACheckbox: typeof import('@arco-design/web-vue')['Checkbox']
+    ACheckboxGroup: typeof import('@arco-design/web-vue')['CheckboxGroup']
     ACol: typeof import('@arco-design/web-vue')['Col']
     AConfigProvider: typeof import('@arco-design/web-vue')['ConfigProvider']
     ADescriptions: typeof import('@arco-design/web-vue')['Descriptions']
@@ -25,28 +27,50 @@ declare module 'vue' {
     AEmpty: typeof import('@arco-design/web-vue')['Empty']
     AForm: typeof import('@arco-design/web-vue')['Form']
     AFormItem: typeof import('@arco-design/web-vue')['FormItem']
+    AGrid: typeof import('@arco-design/web-vue')['Grid']
+    AGridItem: typeof import('@arco-design/web-vue')['GridItem']
     AIcon: typeof import('@arco-design/web-vue')['Icon']
     AImage: typeof import('@arco-design/web-vue')['Image']
     AInput: typeof import('@arco-design/web-vue')['Input']
+    AInputNumber: typeof import('@arco-design/web-vue')['InputNumber']
     AInputPassword: typeof import('@arco-design/web-vue')['InputPassword']
+    AInputSearch: typeof import('@arco-design/web-vue')['InputSearch']
     ALayout: typeof import('@arco-design/web-vue')['Layout']
+    ALayoutContent: typeof import('@arco-design/web-vue')['LayoutContent']
     ALayoutHeader: typeof import('@arco-design/web-vue')['LayoutHeader']
     ALayoutSider: typeof import('@arco-design/web-vue')['LayoutSider']
     ALink: typeof import('@arco-design/web-vue')['Link']
     AMenu: typeof import('@arco-design/web-vue')['Menu']
     AMenuItem: typeof import('@arco-design/web-vue')['MenuItem']
     AModal: typeof import('@arco-design/web-vue')['Modal']
+    AOption: typeof import('@arco-design/web-vue')['Option']
+    AOverflowList: typeof import('@arco-design/web-vue')['OverflowList']
+    APagination: typeof import('@arco-design/web-vue')['Pagination']
+    APopconfirm: typeof import('@arco-design/web-vue')['Popconfirm']
     APopover: typeof import('@arco-design/web-vue')['Popover']
+    AProgress: typeof import('@arco-design/web-vue')['Progress']
+    ARadio: typeof import('@arco-design/web-vue')['Radio']
+    ARadioGroup: typeof import('@arco-design/web-vue')['RadioGroup']
+    ARangePicker: typeof import('@arco-design/web-vue')['RangePicker']
     ARow: typeof import('@arco-design/web-vue')['Row']
     AScrollbar: typeof import('@arco-design/web-vue')['Scrollbar']
     ASelect: typeof import('@arco-design/web-vue')['Select']
     ASpace: typeof import('@arco-design/web-vue')['Space']
+    AStatistic: typeof import('@arco-design/web-vue')['Statistic']
     ASubMenu: typeof import('@arco-design/web-vue')['SubMenu']
     ASwitch: typeof import('@arco-design/web-vue')['Switch']
     ATable: typeof import('@arco-design/web-vue')['Table']
     ATabPane: typeof import('@arco-design/web-vue')['TabPane']
     ATabs: typeof import('@arco-design/web-vue')['Tabs']
+    ATag: typeof import('@arco-design/web-vue')['Tag']
+    ATextarea: typeof import('@arco-design/web-vue')['Textarea']
     ATooltip: typeof import('@arco-design/web-vue')['Tooltip']
+    ATree: typeof import('@arco-design/web-vue')['Tree']
+    ATreeSelect: typeof import('@arco-design/web-vue')['TreeSelect']
+    ATrigger: typeof import('@arco-design/web-vue')['Trigger']
+    ATypographyParagraph: typeof import('@arco-design/web-vue')['TypographyParagraph']
+    ATypographyTitle: typeof import('@arco-design/web-vue')['TypographyTitle']
+    AUpload: typeof import('@arco-design/web-vue')['Upload']
     Avatar: typeof import('./../components/Avatar/index.vue')['default']
     AWatermark: typeof import('@arco-design/web-vue')['Watermark']
     Breadcrumb: typeof import('./../components/Breadcrumb/index.vue')['default']

src/views/dashboard/analysis/index.vue

@@ -5,9 +5,10 @@
       <div class="guide-section full-background">
         <div class="guide-content full-height">
           <!-- 标题 -->
+          <!-- 注意：标题现在不再强制占满全宽，而是适应内容 -->
           <h1 class="page-title">物料领取流程</h1>
 
-          <!-- 图片和按钮卡片 - 确保在任何比例下完全显示 -->
+          <!-- 图片和按钮卡片 -->
           <div class="guide-card centered">
             <!-- 图片展示区 -->
             <div class="image-wrapper">
@@ -36,7 +37,7 @@ defineOptions({ name: 'Analysis' })
 const router = useRouter()
 
 const handleStart = () => {
-  router.push('')
+  router.push('/weightManage')
 }
 </script>
 
@@ -66,10 +67,10 @@ const handleStart = () => {
     height: 100%;
     min-height: 100vh;
     display: flex;
-    justify-content: center;
+    justify-content: flex-start; // 整体靠左，由子元素 margin 控制位置
     align-items: center;
     background: #f5f7fa;
-    padding: 10px; // 减小内边距
+    padding: 10px;
     box-sizing: border-box;
 
     .guide-content.full-height {
@@ -79,10 +80,13 @@ const handleStart = () => {
       margin: 0;
       display: flex;
       flex-direction: column;
+      align-items: flex-start; // 【关键】让子元素（标题和卡片）从左侧开始排列，而不是拉伸
 
       .page-title {
-        text-align: center;
-        font-size: 42px; // 稍微减小字体
+        // 【修改】让标题宽度适应内容，以便通过 margin 控制其整体位置
+        width: fit-content;
+        text-align: center; // 文字本身在标题块内居中
+        font-size: 42px;
         font-weight: 800;
         color: #1e293b;
         margin-bottom: 15px;
@@ -92,13 +96,17 @@ const handleStart = () => {
         flex-shrink: 0;
         padding: 0 10px;
 
+        // 【关键修改】应用与卡片相同的左侧偏移，确保标题在卡片正上方
+        margin-left: 30%; // 必须与 .guide-card 的 margin-left 一致
+        margin-right: auto;
+
         &::after {
           content: '';
           display: block;
-          width: 80px; // 减小下划线宽度
+          width: 80px;
           height: 4px;
           background: linear-gradient(90deg, #165dff, #6aa1ff);
-          margin: 10px auto 0;
+          margin: 10px auto 0; // 下划线在标题块内居中
           border-radius: 2px;
         }
       }
@@ -108,22 +116,23 @@ const handleStart = () => {
   .guide-card {
     display: flex;
     align-items: center;
-    justify-content: center;
-    gap: 40px; // 减小间距
+    gap: 40px;
     background: white;
-    border-radius: 30px; // 减小圆角
+    border-radius: 30px;
     box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
-    padding: 20px 30px; // 减小内边距
+    padding: 20px 30px;
     flex-wrap: wrap;
     border: 1px solid rgba(0, 0, 0, 0.05);
-    min-height: 400px; // 减小最小高度
+    min-height: 400px;
     width: auto;
-    max-width: 90vw; // 使用视口宽度的90%，确保有边距
-    margin: 0 auto;
+    max-width: 90vw;
+
+    // 【核心修改】设置左边距实现左偏移
+    margin-left: 10%;  // 与标题保持一致
+    margin-right: auto;
 
     &.centered {
-      margin-left: auto;
-      margin-right: auto;
+      // 移除原本的居中逻辑
     }
 
     .image-wrapper {
@@ -131,16 +140,16 @@ const handleStart = () => {
       display: flex;
       justify-content: center;
       align-items: center;
-      min-width: 300px; // 减小最小宽度
-      max-width: 600px; // 减小最大宽度
+      min-width: 300px;
+      max-width: 600px;
       height: 100%;
 
       .guide-image.enlarged {
         max-width: 100%;
         width: auto;
         height: auto;
-        max-height: 50vh; // 减小最大高度
-        min-height: 250px; // 减小最小高度
+        max-height: 50vh;
+        min-height: 250px;
         object-fit: contain;
         border-radius: 16px;
         filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.08));
@@ -159,13 +168,13 @@ const handleStart = () => {
       align-items: center;
       justify-content: center;
       gap: 12px;
-      min-width: 180px; // 减小最小宽度
+      min-width: 180px;
 
       .button-hint {
-        font-size: 14px; // 减小字体
+        font-size: 14px;
         color: #475569;
         background: #f1f5f9;
-        padding: 6px 18px; // 减小内边距
+        padding: 6px 18px;
         border-radius: 24px;
         white-space: nowrap;
         box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02);
@@ -180,9 +189,9 @@ const handleStart = () => {
       }
 
       .start-button.enlarged {
-        min-width: 160px; // 减小按钮宽度
-        height: 56px; // 减小按钮高度
-        font-size: 22px; // 减小字体
+        min-width: 160px;
+        height: 56px;
+        font-size: 22px;
         border-radius: 40px;
         box-shadow: 0 10px 20px rgba(22, 93, 255, 0.2);
         transition: all 0.3s ease;
@@ -209,12 +218,11 @@ const handleStart = () => {
 // 针对不同屏幕尺寸的精细调整
 @media (min-width: 1920px) {
   .guide-card {
-    max-width: 1600px; // 超大屏幕限制最大宽度
+    max-width: 1600px;
     padding: 30px 50px;
-
-    .image-wrapper {
-      max-width: 800px;
-    }
+  }
+  .guide-content.full-height .page-title {
+    // 大屏幕保持同步
   }
 }
 
@@ -222,15 +230,7 @@ const handleStart = () => {
   .guide-card {
     gap: 30px;
     padding: 20px 25px;
-
-    .image-wrapper {
-      min-width: 280px;
-      max-width: 500px;
-
-      .guide-image.enlarged {
-        max-height: 45vh;
-      }
-    }
+    // 如果需要，可以在这里微调 margin-left，记得同时微调 title
   }
 }
 
@@ -242,43 +242,26 @@ const handleStart = () => {
   .guide-card {
     gap: 25px;
     padding: 15px 20px;
-    max-width: 95vw; // 在小屏幕上使用更宽的百分比
-
-    .image-wrapper {
-      min-width: 250px;
-      max-width: 450px;
-
-      .guide-image.enlarged {
-        max-height: 40vh;
-        min-height: 200px;
-      }
-    }
-
-    .button-wrapper {
-      min-width: 160px;
-
-      .button-hint {
-        font-size: 13px;
-        padding: 5px 15px;
-      }
-
-      .start-button.enlarged {
-        min-width: 150px;
-        height: 50px;
-        font-size: 20px;
-      }
-    }
+    max-width: 95vw;
+    // 平板端如果需要调整偏移，请同时调整下方 title 的 margin
   }
 }
 
 @media (max-width: 768px) {
   .guide-section.full-background {
     padding: 5px;
+    justify-content: center; // 移动端恢复整体居中
 
     .guide-content.full-height {
+      align-items: center; // 移动端子元素也居中
+
       .page-title {
         font-size: 28px;
         margin-bottom: 10px;
+        // 【重要】移动端重置 margin，恢复自动居中
+        margin-left: auto;
+        margin-right: auto;
+        width: fit-content; // 保持适应内容
 
         &::after {
           width: 60px;
@@ -294,7 +277,11 @@ const handleStart = () => {
     padding: 20px 15px;
     gap: 20px;
     min-height: auto;
-    max-width: 98vw; // 移动端几乎占满宽度
+    max-width: 98vw;
+
+    // 【重要】移动端强制居中
+    margin-left: auto;
+    margin-right: auto;
 
     .image-wrapper {
       min-width: auto;
@@ -334,14 +321,12 @@ const handleStart = () => {
   .guide-section.full-background {
     .guide-card {
       @media (min-width: 1025px) {
-        margin-left: 5%; // 在有侧边栏时左移
-        margin-right: auto;
+        // 如果有侧边栏，确保标题和卡片偏移量依然一致
       }
     }
   }
 }
 
-// 确保父容器占满且无滚动问题
 html, body {
   margin: 0;
   padding: 0;
@@ -359,22 +344,22 @@ html, body {
   overflow-y: auto;
 }
 
-// 针对100%缩放比例的特殊处理
+// 针对特定分辨率的微调（可选）
 @media screen and (min-width: 1280px) and (max-width: 1366px) {
   .guide-card {
-    max-width: 85vw; // 在常见笔记本屏幕上使用85%宽度
+    max-width: 85vw;
   }
 }
 
 @media screen and (min-width: 1367px) and (max-width: 1440px) {
   .guide-card {
-    max-width: 80vw; // 在1440p屏幕上使用80%宽度
+    max-width: 80vw;
   }
 }
 
 @media screen and (min-width: 1441px) and (max-width: 1680px) {
   .guide-card {
-    max-width: 75vw; // 在更大屏幕上使用75%宽度
+    max-width: 75vw;
   }
 }
 </style>

src/views/material/MaterialInfoAddModal.vue

@@ -58,9 +58,9 @@ const columns: ColumnItem[] = reactive([
     span: 24,
   },
   {
-    label: '物料单次可称量最大重量(kg)',
-    field: 'maxWeight',
-    type: 'input-number',
+    label: '物料规格',
+    field: 'materialSpec',
+    type: 'input',
     span: 24,
   },
   {

src/views/material/MaterialInfoImportDrawer.vue

@@ -0,0 +1,201 @@
+<template>
+  <a-drawer
+    v-model:visible="visible"
+    title="导入物料信息"
+    :mask-closable="false"
+    :esc-to-close="false"
+    :width="width >= 600 ? 600 : '100%'"
+    ok-text="确认导入"
+    cancel-text="取消导入"
+    @before-ok="save"
+    @close="reset"
+  >
+    <a-form ref="formRef" :model="form" size="large" auto-label-width>
+      <a-alert v-if="!form.disabled" style="margin-bottom: 15px">
+        请按照模板要求填写数据，填写完毕后，请先上传并进行解析。
+        <template #action>
+          <a-link @click="downloadTemplate">
+            <template #icon><GiSvgIcon name="file-excel" :size="16" /></template>
+            <template #default>下载模板</template>
+          </a-link>
+        </template>
+      </a-alert>
+      <fieldset>
+        <legend>1.解析数据</legend>
+        <div class="file-box">
+          <a-upload
+            draggable
+            :custom-request="handleUpload"
+            :limit="1"
+            :show-retry-butto="false"
+            :show-cancel-button="false" tip="仅支持xls、xlsx格式"
+            :file-list="uploadFile"
+            accept=".xls, .xlsx, application/vnd.ms-excel, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
+          />
+        </div>
+        <div v-if="dataResult.importKey">
+          <div class="file-box">
+            <a-space size="large">
+              <a-statistic title="总计行数" :value="dataResult.totalRows" />
+              <a-statistic title="正常行数" :value="dataResult.validRows" />
+            </a-space>
+          </div>
+          <div class="file-box">
+            <a-space size="large">
+              <a-statistic title="已存在物料名" :value="dataResult.duplicateNameRows" />
+              <a-statistic title="已存在编码" :value="dataResult.duplicateCodeRows" />
+            </a-space>
+          </div>
+        </div>
+      </fieldset>
+      <fieldset>
+        <legend>2.导入策略</legend>
+        <a-form-item label="物料名已存在" field="duplicateName">
+          <a-radio-group v-model="form.duplicateName" type="button">
+            <a-radio :value="1">跳过该行</a-radio>
+            <a-radio :value="2">修改数据</a-radio>
+            <a-radio :value="3">停止导入</a-radio>
+          </a-radio-group>
+        </a-form-item>
+        <a-form-item label="编码已存在" field="duplicateCode">
+          <a-radio-group v-model="form.duplicateCode" type="button">
+            <a-radio :value="1">跳过该行</a-radio>
+            <a-radio :value="2">修改数据</a-radio>
+            <a-radio :value="3">停止导入</a-radio>
+          </a-radio-group>
+        </a-form-item>
+        <a-form-item label="默认状态" field="defaultStatus">
+          <a-switch
+            v-model="form.defaultStatus"
+            :checked-value="1"
+            :unchecked-value="2"
+            checked-text="启用"
+            unchecked-text="禁用"
+            type="round"
+          />
+        </a-form-item>
+      </fieldset>
+    </a-form>
+  </a-drawer>
+</template>
+
+<script setup lang="ts">
+import { type FormInstance, Message, type RequestOption } from '@arco-design/web-vue'
+import { useWindowSize } from '@vueuse/core'
+import {
+  type MaterialImportResp,
+  downloadMaterialInfoImportTemplate,
+  importMaterial,
+  parseImportMaterial,
+} from '@/apis/material/materialInfo'
+import { useDownload, useResetReactive } from '@/hooks'
+
+const emit = defineEmits<{
+  (e: 'save-success'): void
+}>()
+
+const { width } = useWindowSize()
+
+const visible = ref(false)
+const formRef = ref<FormInstance>()
+const uploadFile = ref([])
+
+const [form, resetForm] = useResetReactive({
+  importKey: '',
+  errorPolicy: 1,
+  duplicateName: 1,
+  duplicateCode: 1,
+  defaultStatus: 1,
+})
+
+const dataResult = ref<MaterialImportResp>({
+  importKey: '',
+  totalRows: 0,
+  validRows: 0,
+  duplicateNameRows: 0,
+  duplicateCodeRows: 0,
+})
+
+// 重置
+const reset = () => {
+  formRef.value?.resetFields()
+  dataResult.value.importKey = ''
+  uploadFile.value = []
+  resetForm()
+}
+
+// 下载模板
+const downloadTemplate = () => {
+  useDownload(() => downloadMaterialInfoImportTemplate())
+}
+
+// 上传解析导入数据
+const handleUpload = (options: RequestOption) => {
+  const controller = new AbortController();
+  (async function requestWrap() {
+    const { onProgress, onError, onSuccess, fileItem, name = 'file' } = options
+    onProgress(20)
+    const formData = new FormData()
+    formData.append(name as string, fileItem.file as Blob)
+    try {
+      const res = await parseImportMaterial(formData)
+      dataResult.value = res.data
+      Message.success('上传解析成功')
+      onSuccess(res)
+    } catch (error) {
+      onError(error)
+    }
+  })()
+  return {
+    abort() {
+      controller.abort()
+    },
+  }
+}
+
+// 执行导入
+const save = async () => {
+  try {
+    if (!dataResult.value.importKey) {
+      Message.warning('请先上传文件，解析导入数据')
+      return false
+    }
+    form.importKey = dataResult.value.importKey
+    const res = await importMaterial(form)
+    Message.success(`导入成功! 新增${res.data.insertRows}, 修改${res.data.updateRows},总计处理${res.data.totalRows}`)
+    emit('save-success')
+    return true
+  } catch (error) {
+    return false
+  }
+}
+
+// 打开
+const onOpen = () => {
+  reset()
+  visible.value = true
+}
+
+defineExpose({ onOpen })
+</script>
+
+<style scoped lang="scss">
+fieldset {
+  padding: 15px 15px 0 15px;
+  margin-bottom: 15px;
+  border: 1px solid var(--color-neutral-3);
+  border-radius: 3px;
+}
+
+fieldset legend {
+  color: rgb(var(--gray-10));
+  padding: 2px 5px 2px 5px;
+  border: 1px solid var(--color-neutral-3);
+  border-radius: 3px;
+}
+
+.file-box {
+  margin-bottom: 20px;
+  margin-left: 10px;
+}
+</style>

src/views/material/PhotosImport.vue

@@ -0,0 +1,134 @@
+<template>
+  <a-drawer
+    v-model:visible="visible"
+    title="批量导入物料照片"
+    :mask-closable="false"
+    :esc-to-close="false"
+    :width="width >= 600 ? 600 : '100%'"
+    ok-text="确认导入"
+    cancel-text="取消导入"
+    @before-ok="save"
+    @close="reset"
+  >
+    <a-form ref="formRef" :model="form" size="large" auto-label-width>
+      <fieldset>
+        <legend>zip文件上传</legend>
+        <div class="file-box">
+          <a-upload
+            draggable
+            :custom-request="handleUpload"
+            :limit="1"
+            :show-retry-button="false"
+            :show-cancel-button="false"
+            tip="仅支持zip格式"
+            :file-list="uploadFile"
+            accept=".zip"
+          />
+        </div>
+      </fieldset>
+    </a-form>
+  </a-drawer>
+</template>
+
+<script setup lang="ts">
+import { type FormInstance, Message, type RequestOption } from '@arco-design/web-vue'
+import { useWindowSize } from '@vueuse/core'
+import { uploadMaterialPhotos } from '@/apis/material/materialInfo'
+import { useResetReactive } from '@/hooks'
+
+const emit = defineEmits<{
+  (e: 'save-success'): void
+}>()
+
+const { width } = useWindowSize()
+
+const visible = ref(false)
+const formRef = ref<FormInstance>()
+const uploadFile = ref([])
+// 新增：保存上传的文件对象
+const uploadFileObj = ref<File | null>(null)
+
+// 移除不必要的表单字段，只保留空对象即可
+const [form, resetForm] = useResetReactive({})
+
+// 重置
+const reset = () => {
+  formRef.value?.resetFields()
+  uploadFile.value = []
+  uploadFileObj.value = null // 重置文件对象
+  resetForm()
+}
+
+// 修改上传逻辑：仅保存文件对象，不做解析
+const handleUpload = (options: RequestOption) => {
+  const { onProgress, onError, onSuccess, fileItem } = options
+  onProgress(100) // 直接标记上传完成（仅前端显示）
+
+  // 保存文件对象供后续提交使用
+  uploadFileObj.value = fileItem.file as File
+  uploadFile.value = [fileItem] // 更新文件列表显示
+
+  Message.success('文件已选择，点击确认导入即可上传')
+  onSuccess({}) // 通知上传组件完成
+  return {
+    abort() {
+      // 空实现，取消时会走reset逻辑
+    },
+  }
+}
+
+// 执行导入：直接上传文件到后端
+const save = async () => {
+  try {
+    // 校验是否选择了文件
+    if (!uploadFileObj.value) {
+      Message.warning('请先选择要上传的ZIP文件')
+      return false
+    }
+
+    // 构建FormData
+    const formData = new FormData()
+    formData.append('zipFile', uploadFileObj.value) // 后端接收参数名保持为zipFile
+
+    // 调用后端照片批量导入接口
+    await uploadMaterialPhotos(formData)
+
+    Message.success('物料照片批量导入成功！')
+    emit('save-success') // 通知父组件刷新列表
+    visible.value = false // 关闭抽屉
+    return true
+  } catch (error) {
+    Message.error('物料照片导入失败，请重试！')
+    return false
+  }
+}
+
+// 打开抽屉
+const onOpen = () => {
+  reset()
+  visible.value = true
+}
+
+defineExpose({ onOpen })
+</script>
+
+<style scoped lang="scss">
+fieldset {
+  padding: 15px 15px 0 15px;
+  margin-bottom: 15px;
+  border: 1px solid var(--color-neutral-3);
+  border-radius: 3px;
+}
+
+fieldset legend {
+  color: rgb(var(--gray-10));
+  padding: 2px 5px 2px 5px;
+  border: 1px solid var(--color-neutral-3);
+  border-radius: 3px;
+}
+
+.file-box {
+  margin-bottom: 20px;
+  margin-left: 10px;
+}
+</style>

src/views/material/index.vue

@@ -25,12 +25,19 @@
           <template #icon><icon-plus /></template>
           <template #default>新增</template>
         </a-button>
+        <a-button v-permission="['admin:materialInfo:import']" @click="onImport">
+          <template #icon><icon-upload /></template>
+          <template #default>导入</template>
+        </a-button>
         <a-button v-permission="['admin:materialInfo:export']" @click="onExport">
           <template #icon><icon-download /></template>
           <template #default>导出</template>
         </a-button>
+        <a-button v-permission="['admin:materialInfo:import']" @click="onPhotosImport">
+          <template #icon><icon-upload /></template>
+          <template #default>照片批量导入</template>
+        </a-button>
       </template>
-      <!-- 物料照片插槽：核心新增部分 -->
       <template #photoUrl="{ record }">
         <div class="photo-container">
           <img
@@ -60,11 +67,15 @@
     </GiTable>
 
     <MaterialInfoAddModal ref="MaterialInfoAddModalRef" @save-success="search" />
+    <MaterialInfoImportDrawer ref="MaterialInfoImportDrawerRef" @save-success="search" />
+    <PhotosImport ref="PhotosImportRef" @save-success="search"/>
   </div>
 </template>
 
 <script setup lang="ts">
 import MaterialInfoAddModal from './MaterialInfoAddModal.vue'
+import MaterialInfoImportDrawer from './MaterialInfoImportDrawer.vue'
+import PhotosImport from '@/views/material/PhotosImport.vue';
 import { type MaterialInfoQuery, type MaterialInfoResp, deleteMaterialInfo, exportMaterialInfo, listMaterialInfo } from '@/apis/material/materialInfo'
 import type { TableInstanceColumns } from '@/components/GiTable/type'
 import { useDownload, useTable } from '@/hooks'
@@ -90,8 +101,7 @@ const columns = ref<TableInstanceColumns[]>([
   { title: '物料名称', dataIndex: 'materialName', slotName: 'materialName' },
   { title: '物料编码', dataIndex: 'encoding', slotName: 'encoding' },
   { title: '物料单位重量(g)', dataIndex: 'unitWeight', slotName: 'unitWeight' },
-  { title: '物料单次可称量最大重量(kg)', dataIndex: 'maxWeight', slotName: 'maxWeight' },
-  // 可给photoUrl列添加宽度，优化显示
+  { title: '物料规格', dataIndex: 'materialSpec', slotName: 'materialSpec' },
   { title: '物料照片', dataIndex: 'photoUrl', slotName: 'photoUrl', width: 120, align: 'center' },
   { title: '创建人', dataIndex: 'createUserString', slotName: 'createUser' },
   { title: '创建时间', dataIndex: 'createTime', slotName: 'createTime' },
@@ -144,10 +154,14 @@ const onUpdate = (record: MaterialInfoResp) => {
   MaterialInfoAddModalRef.value?.onUpdate(record.id)
 }
 
-// 详情（补充定义，避免报错）
-const onDetail = (record: MaterialInfoResp) => {
-  // 可补充详情逻辑，如打开详情弹窗
-  console.log('物料详情', record)
+const MaterialInfoImportDrawerRef = ref<InstanceType<typeof MaterialInfoImportDrawer>>()
+const onImport = () => {
+  MaterialInfoImportDrawerRef.value?.onOpen()
+}
+
+const PhotosImportRef = ref<InstanceType<typeof PhotosImport>>()
+const onPhotosImport = () => {
+  PhotosImportRef.value?.onOpen()
 }
 </script>
 

src/views/system/user/UserAddDrawer.vue

@@ -13,7 +13,7 @@
 </template>
 
 <script setup lang="ts">
-import { Message, type TreeNodeData } from '@arco-design/web-vue'
+import { Message } from '@arco-design/web-vue'
 import { useWindowSize } from '@vueuse/core'
 import { addUser, getUser, updateUser } from '@/apis/system/user'
 import { type ColumnItem, GiForm } from '@/components/GiForm'

src/views/system/user/index.vue

@@ -102,6 +102,7 @@ import { DisEnableStatusList } from '@/constant/common'
 import { useDownload, useResetReactive, useTable } from '@/hooks'
 import { isMobile } from '@/utils'
 import has from '@/utils/has'
+import type { ColumnItem } from '@/components/GiForm'
 
 defineOptions({ name: 'SystemUser' })
 
@@ -122,7 +123,7 @@ const queryFormColumns: ColumnItem[] = reactive([
       hideLabel: true,
     },
     props: {
-      placeholder: '搜索用户名/昵称/描述',
+      placeholder: '搜索用户名',
       showWordLimit: false,
     },
   },
@@ -167,7 +168,7 @@ const columns: TableInstanceColumns[] = [
     fixed: !isMobile() ? 'left' : undefined,
   },
   { title: '用户名', dataIndex: 'username', slotName: 'username', minWidth: 100, ellipsis: true, tooltip: true },
-  { title:'卡号', dataIndex: 'cardNo', slotName: 'cardNo' },
+  { title: '卡号', dataIndex: 'cardNo', slotName: 'cardNo' },
   { title: '状态', dataIndex: 'status', slotName: 'status', align: 'center' },
   { title: '性别', dataIndex: 'gender', slotName: 'gender', align: 'center' },
   { title: '角色', dataIndex: 'roleNames', slotName: 'roleNames', minWidth: 165 },
@@ -203,7 +204,7 @@ const reset = () => {
 
 const onDelete = (record: UserResp) => {
   return handleDelete(() => deleteUser(record.id), {
-    content: `是否确定删除用户「${record.nickname}(${record.username})」？`,
+    content: `是否确定删除用户「${record.username}」？`,
     showModal: true,
   })
 }
@@ -226,11 +227,6 @@ const onUpdate = (record: UserResp) => {
   UserAddDrawerRef.value?.onUpdate(record.id)
 }
 
-const UserDetailDrawerRef = ref<InstanceType<typeof UserDetailDrawer>>()
-const onDetail = (record: UserResp) => {
-  UserDetailDrawerRef.value?.onOpen(record.id)
-}
-
 const UserResetPwdModalRef = ref<InstanceType<typeof UserResetPwdModal>>()
 const onResetPwd = (record: UserResp) => {
   UserResetPwdModalRef.value?.onOpen(record.id)