fix:材料管理页面中点击导入数据按钮,打开一个弹窗,把模板下载和上传按钮放在里面。

This commit is contained in:
shijing 2026-03-20 09:56:03 +08:00
parent c1d18c888c
commit 8e47c0ef8f
1 changed files with 38 additions and 12 deletions

View File

@ -10,20 +10,11 @@
<el-option v-for="item in filterSubcategoryOptions" :key="item.value" :label="item.name" :value="item.value" />
</el-select>
<el-button @click="loadMaterials">查询</el-button>
<el-upload
v-if="isAdmin"
:auto-upload="true"
:show-file-list="false"
:http-request="handleImportExcel"
accept=".xlsx"
>
<el-button :loading="importing">{{ importing ? '导入中...' : '导入数据' }}</el-button>
</el-upload>
<el-button v-if="isAdmin" :loading="importing" @click="importDialogVisible = true">
{{ importing ? '导入中...' : '导入数据' }}
</el-button>
<el-button type="primary" @click="openCreate">新增材料</el-button>
<div class="toolbar-spacer" />
<a href="http://101.42.1.64:2260/media/material_import_template.xlsx" download="材料导入模板.xlsx">
<el-button>模板</el-button>
</a>
</div>
<el-table v-loading="tableLoading" :data="materials" border :max-height="560">
@ -206,6 +197,25 @@
<el-button type="primary" @click="onSave">保存</el-button>
</template>
</el-dialog>
<el-dialog v-model="importDialogVisible" title="导入材料" width="420px">
<div class="import-dialog">
<div class="import-dialog__text">请先下载模板按模板填写后上传 `.xlsx` 文件</div>
<div class="import-dialog__actions">
<a :href="templateDownloadUrl" download="材料导入模板.xlsx">
<el-button>模板下载</el-button>
</a>
<el-upload
:auto-upload="true"
:show-file-list="false"
:http-request="handleImportExcel"
accept=".xlsx"
>
<el-button type="primary" :loading="importing">{{ importing ? '导入中...' : '上传文件' }}</el-button>
</el-upload>
</div>
</div>
</el-dialog>
</div>
</template>
@ -229,11 +239,14 @@ const pagination = reactive({
})
const factories = ref([])
const dialogVisible = ref(false)
const importDialogVisible = ref(false)
const dialogTitle = ref('')
const isEdit = ref(false)
const currentId = ref(null)
const uploading = ref(false)
const importing = ref(false)
const apiBaseUrl = (import.meta.env.VITE_API_BASE_URL || '/api').replace(/\/$/, '')
const templateDownloadUrl = `${apiBaseUrl}/material/template/`
const filters = reactive({
name: '',
@ -457,6 +470,7 @@ const handleImportExcel = async (options) => {
const result = await importMaterialsExcel(options.file)
pagination.page = 1
await loadMaterials()
importDialogVisible.value = false
ElMessage.success(`导入完成:新增 ${result.created} 条,更新 ${result.updated} 条,跳过 ${result.skipped} 条,新建工厂 ${result.created_factory || 0}`)
} catch (error) {
ElMessage.error(error.response?.data?.detail || '导入失败')
@ -527,6 +541,18 @@ onMounted(() => {
flex: 1 1 auto;
}
.import-dialog__text {
color: #606266;
line-height: 1.6;
}
.import-dialog__actions {
margin-top: 20px;
display: flex;
justify-content: flex-end;
gap: 12px;
}
.pagination {
margin-top: 16px;
display: flex;