导出导入

yudao-ui-admin-vue3/src/views/pressure2/dynamictb/index.vue

@@ -120,13 +120,30 @@
         >
           <Icon icon="ep:download" class="mr-5px" /> 导出
         </el-button>
+        <el-button
+          type="warning"
+          plain
+          @click="handleExportZip"
+          :disabled="selectedIds.length === 0"
+          :loading="exportZipLoading"
+        >
+          <Icon icon="ep:folder" class="mr-5px" /> 批量导出
+        </el-button>
+        <el-button
+          type="primary"
+          plain
+          @click="handleImportDialog"
+        >
+          <Icon icon="ep:upload" class="mr-5px" /> 导入
+        </el-button>
       </el-form-item>
     </el-form>
   </ContentWrap>
 
   <!-- 列表 -->
   <ContentWrap>
-    <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true" :border="true">
+    <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true" :border="true" @selection-change="handleSelectionChange">
+      <el-table-column type="selection" width="55" />
       <el-table-column label="主键" align="center" prop="id" />
       <el-table-column label="模板名字" align="center" prop="tbName" width="250"/>
       <el-table-column label="模板编号" align="center" prop="tbCode" width="150"/>
@@ -239,6 +256,39 @@
       </div>
     </el-form>
   </CustomDialog>
+  <!-- 导入弹窗 -->
+  <CustomDialog
+    v-model="importDialogVisible"
+    title="导入模板数据"
+    width="500px"
+    :showFooter="false"
+  >
+    <el-form ref="importFormRef" :model="importForm">
+      <el-form-item label="选择文件" prop="file">
+        <el-upload
+          ref="uploadRef"
+          :auto-upload="false"
+          :limit="1"
+          accept=".zip"
+          :on-change="handleFileChange"
+          :on-remove="handleFileRemove"
+          drag
+        >
+          <Icon icon="ep:upload" class="mr-5px" />
+          <div class="el-upload__text">
+            将文件拖到此处，或<em>点击上传</em>
+          </div>
+          <template #tip>
+            <div class="el-upload__tip">仅支持 .zip 格式文件</div>
+          </template>
+        </el-upload>
+      </el-form-item>
+      <div style="display: flex; justify-content: center; padding-top: 24px;">
+        <el-button type="default" @click="importDialogVisible = false">取消</el-button>
+        <el-button type="primary" @click="handleImportSubmit" :loading="importLoading">确定导入</el-button>
+      </div>
+    </el-form>
+  </CustomDialog>
   <!-- 表单弹窗：添加/修改 -->
   <DynamicTbForm v-if="templateDetailVisible" :id="formProps.id" :type="formProps.type" ref="formRef" v-model:visible="templateDetailVisible"  @success="getList" />
 </template>
@@ -277,6 +327,17 @@ const queryFormRef = ref() // 搜索的表单
 const exportLoading = ref(false) // 导出的加载中
 const templateDetailVisible=ref(false) //明细页面显示
 
+// 批量导出
+const selectedIds = ref<string[]>([]) // 多选选中的ID列表
+const exportZipLoading = ref(false) // 批量导出的加载中
+
+// 导入
+const importDialogVisible = ref(false) // 导入弹窗
+const importLoading = ref(false) // 导入的加载中
+const uploadRef = ref() // 上传组件引用
+const importFile = ref<File | null>(null) // 待导入的文件
+const importForm = reactive({}) // 导入表单
+
 // 上架
 const shelvesDialogVisible=ref(false);
 const shelvesForm=ref({shelvesCause:''});
@@ -417,4 +478,65 @@ const handleUndercarriage = async (row) => {
 onMounted(() => {
   getList()
 })
+
+// ==================== 批量导出/导入 ====================
+
+/** 表格多选变化 */
+const handleSelectionChange = (selection: DynamicTbVO[]) => {
+  selectedIds.value = selection.map(item => item.id)
+}
+
+/** 批量导出 ZIP */
+const handleExportZip = async () => {
+  if (selectedIds.value.length === 0) {
+    ElMessage.warning('请先选择要导出的模板')
+    return
+  }
+  try {
+    await message.exportConfirm()
+    exportZipLoading.value = true
+    const data = await DynamicTbApi.exportZip(selectedIds.value)
+    download.zip(data, '模板数据导出.zip')
+    ElMessage.success('导出成功')
+  } catch {
+  } finally {
+    exportZipLoading.value = false
+  }
+}
+
+/** 打开导入弹窗 */
+const handleImportDialog = () => {
+  importFile.value = null
+  importDialogVisible.value = true
+}
+
+/** 导入文件选择变化 */
+const handleFileChange = (file: any) => {
+  importFile.value = file.raw
+}
+
+/** 导入文件移除 */
+const handleFileRemove = () => {
+  importFile.value = null
+}
+
+/** 提交导入 */
+const handleImportSubmit = async () => {
+  if (!importFile.value) {
+    ElMessage.warning('请先选择要导入的文件')
+    return
+  }
+  try {
+    importLoading.value = true
+    await DynamicTbApi.importZip(importFile.value)
+    ElMessage.success('导入成功')
+    importFile.value = null
+    importDialogVisible.value = false
+    getList()
+  } catch (e) {
+    ElMessage.error('导入失败：' + (e?.message || '未知错误'))
+  } finally {
+    importLoading.value = false
+  }
+}
 </script>