1

src/api/modules/exctab/exceltab.js

@@ -94,4 +94,12 @@ export default {
             params: { ids },
         })
     },
+    //批量上清表
+    async batchUploadExcelTab(form) {
+        return HcApi({
+            url: '/api/blade-manager/exceltab/batchUploadExcelTab',
+            method: 'post',
+            data: form,
+        })
+    },
 }

src/views/exctab/modules/excel-upload.vue

@@ -0,0 +1,127 @@
+<template>
+    <hc-dialog v-model="isShow" ui="hc-exctab-exceltab-excel-upload" title="上传Excel表格" widths="800px" @close="dialogClose">
+        <div class="upload-div mb-14px">
+            <el-upload
+                ref="uploadRef" accept=".xls, .xlsx" class="upload-demo" :auto-upload="false" :file-list="[]"
+                :on-change="excelHandleChange" :show-file-list="false" multiple
+            >
+                <el-button type="primary">选择文件</el-button>
+            </el-upload>
+        </div>
+        <hc-table
+            ref="tableRef" :column="tableColumn" :datas="tableData" is-row-drop is-sort heights="auto"
+            quick-sort style="height: auto" @row-drop="rowDropTap" @row-sort="rowSortTap"
+        >
+            <template #name="{ row }">
+                <hc-table-input v-model="row.name" placeholder="请输入文件名称" />
+            </template>
+            <template #action="{ index }">
+                <el-link type="danger" @click="delRowClick(index)">删除</el-link>
+            </template>
+        </hc-table>
+        <template #footer>
+            <el-button hc-btn @click="dialogClose">取消</el-button>
+            <el-button hc-btn type="primary" :disabled="tableData.length <= 0" :loading="submitLoading" @click="dialogSubmit">确认上传</el-button>
+        </template>
+    </hc-dialog>
+</template>
+
+<script setup>
+import { nextTick, ref, watch } from 'vue'
+import { getObjValue } from 'js-fast-way'
+import mainApi from '~api/exctab/exceltab'
+
+const props = defineProps({
+    data: {
+        type: Object,
+        default: () => ({}),
+    },
+})
+
+//事件
+const emit = defineEmits(['finish', 'close'])
+
+//双向绑定
+const isShow = defineModel('modelValue', {
+    default: false,
+})
+
+//监听可否编辑
+const datas = ref(props.data)
+watch(() => props.data, (val) => {
+    datas.value = getObjValue(val)
+}, { immediate: true, deep: true })
+
+//表格
+const tableRef = ref(null)
+const tableColumn = [
+    { key: 'name', name: '文件名称' },
+    { key: 'action', name: '操作', width: 80, align: 'center' },
+]
+const tableData = ref([])
+
+//上传组件
+const uploadRef = ref(null)
+
+//文件被选择
+const excelHandleChange = (_, files) => {
+    tableData.value = files
+}
+
+// 行拖拽
+const rowDropTap = (rows) => {
+    tableData.value = [] // 先清空，否则排序会异常
+    nextTick(() => {
+        tableRef.value?.setData(rows)
+    })
+}
+
+// 点击排序
+const rowSortTap = (rows) => {
+    tableData.value = [] // 先清空，否则排序会异常
+    nextTick(() => {
+        tableData.value = rows
+    })
+}
+
+//删除
+const delRowClick = (index) => {
+    tableData.value.splice(index, 1)
+}
+
+//提交
+const submitLoading = ref(false)
+const dialogSubmit = async () => {
+    submitLoading.value = true
+    let formData = new FormData()
+    const rows = tableData.value
+    rows.forEach(item => {
+        formData.append('file', item.raw, item.name)
+    })
+    const { id } = datas.value
+    formData.append('id', id)
+    const { code } = await mainApi.batchUploadExcelTab(formData)
+    submitLoading.value = false
+    if (code === 200) {
+        window.$message.success('保存成功')
+        dialogClose()
+        emit('finish')
+    }
+}
+
+//关闭弹窗
+const dialogClose = () => {
+    uploadRef.value?.clearFiles()
+    isShow.value = false
+    submitLoading.value = false
+    tableData.value = []
+    datas.value = {}
+    emit('close')
+}
+</script>
+
+<style lang="scss">
+.el-overlay-dialog .el-dialog.hc-new-dialog.hc-exctab-exceltab-excel-upload .el-dialog__body{
+    padding: 12px 0;
+}
+</style>

src/views/exctab/modules/template.vue

@@ -68,6 +68,8 @@
         <HcAddExcel v-model="addExcelShow" :info="addExcelInfo" :type="addExcelType" @finish="pseudoRefresh" />
         <!-- 调整排序 -->
         <HcTreeSort v-model="treeSortShow" :data="treeSortData" @finish="pseudoRefresh" />
+        <!-- 上传Excel表格 -->
+        <HcExcelUpload v-model="excelUploadShow" :data="excelUploadData" @finish="pseudoRefresh" />
     </hc-drawer>
 </template>
 
@@ -79,6 +81,7 @@ import { HcDelMsg } from 'hc-vue3-ui'
 import { getArrValue, getObjValue, getRandom, isNullES } from 'js-fast-way'
 import HcAddExcel from './add-excel.vue'
 import HcTreeSort from './tree-sort.vue'
+import HcExcelUpload from './excel-upload.vue'
 import mainApi from '~api/exctab/exceltab'
 
 const props = defineProps({
@@ -200,6 +203,10 @@ const treeMenuClick = ({ key, data, node }) => {
             modeId: dataInfo.value.id,
         }
         treeSortShow.value = true
+    } else if (key === 'upload') {
+        excelUploadData.value = data
+        excelUploadShow.value = true
+        console.log(data)
     } else if (key === 'del') {
         if (data.hasChildren) {
             window.$message.warning('该节点下有子节点，无法删除')
@@ -225,6 +232,10 @@ const addExcelType = ref('')
 const treeSortShow = ref(false)
 const treeSortData = ref({})
 
+//上传文件
+const excelUploadShow = ref(false)
+const excelUploadData = ref({})
+
 //伪刷新
 const pseudoRefresh = () => {
     const val = isTreeMode.value