admin/src/views/exctab/modules/template.vue

<template>
    <hc-drawer v-model="isShow" to-id="hc-main-box" is-close @close="drawerClose">
        <hc-body split>
            <template #left>
                <hc-card>
                    <template #header>
                        <hc-search-input v-model="searchTreeName" placeholder="请输入关键字" @search="searchTreeNameClick" />
                    </template>
                    <template v-if="isTreeMode === 1">
                        <hc-lazy-tree
                            v-if="isShow" :root-menu="treeMenuRoot" is-load-menu :h-props="treeProps" tree-key="id"
                            @load-menu="treeLazyMenu" @load="treeLoadNode" @node-tap="treeNodeTap" @menu-tap="treeMenuClick"
                        >
                            <template #name="{ data }">
                                <span class="text-16px font-400">{{ data.name }}</span>
                            </template>
                        </hc-lazy-tree>
                    </template>
                    <template v-if="isTreeMode === 2">
                        <hc-data-tree
                            ref="treeRef" :root-menu="treeMenuRoot" is-load-menu :h-props="treeProps" tree-key="id" :datas="treeData"
                            @load-menu="treeDataMenu" @node-tap="treeNodeTap" @menu-tap="treeMenuClick"
                        >
                            <template #name="{ data }">
                                <span class="text-16px font-400">{{ data.name }}</span>
                            </template>
                        </hc-data-tree>
                    </template>
                </hc-card>
            </template>
            <hc-card>
                <template #header>
                    <template v-if="isCheckd">
                        <template v-if="tableTempExcelProps.file">
                            <div class="table-temp-name truncate">
                                <span>{{ tableTempExcelProps.title }}</span>
                                <i class="i-iconoir-check-circle-solid" />
                            </div>
                            <el-button hc-btn type="primary">重新上传</el-button>
                            <el-button hc-btn type="danger">删除</el-button>
                            <el-button hc-btn type="success">下载Excel</el-button>
                        </template>
                        <template v-else>
                            <el-button hc-btn type="primary">上传Excel</el-button>
                        </template>
                        <template v-if="excelInfo.templateExtension">
                            <div class="table-temp-name truncate">
                                <span>{{ excelInfo.templateExtension }}</span>
                                <i class="i-iconoir-check-circle-solid" />
                            </div>
                            <el-button hc-btn type="danger">删除</el-button>
                            <el-button hc-btn type="success">下载模板</el-button>
                        </template>
                    </template>
                    <template v-else>
                        <div class="text-red">该目录为根目录没有EXCEL文件</div>
                    </template>
                </template>
                <template #extra>
                    <el-button v-if="tableTempExcelProps.file" hc-btn type="primary" @click="fullScreenClick">全屏显示</el-button>
                </template>
                <div :id="tableTempExcelId" class="relative h-full">
                    <hc-online-office v-if="isShow" ui="hc-table-temp-excel" :props="tableTempExcelProps" />
                </div>
            </hc-card>
        </hc-body>
        <!-- 新增清表 -->
        <HcAddExcel v-model="addExcelShow" :info="addExcelInfo" :type="addExcelType" @finish="addExcelFinish" />
    </hc-drawer>
</template>

<script setup>
import { ref, watch } from 'vue'
import { useAppStore } from '~src/store'
import screenfull from 'screenfull'
import { getArrValue, getObjValue, getRandom, isNullES } from 'js-fast-way'
import HcAddExcel from './add-excel.vue'
import mainApi from '~api/exctab/exceltab'

const props = defineProps({
    data: {
        type: Object,
        default: () => ({}),
    },
})
//事件
const emit = defineEmits(['close'])
const store = useAppStore()
const userInfo = ref(store.getUserInfo)

//双向绑定
const isShow = defineModel('modelValue', {
    default: false,
})

//监听数据
const dataInfo = ref(props.data)
watch(() => props.data, (data) => {
    dataInfo.value = data
}, { immediate: true, deep: true })

//监听显示
watch(isShow, (val) => {
    if (val) getDataApi()
})

//处理相关数据
const tableTempExcelId = ref('')
const getDataApi = () => {
    tableTempExcelId.value = getRandom(6)
}

//树搜索
const isTreeMode = ref(1) //1懒加载，2全加载
const searchTreeName = ref('')
const searchTreeNameClick = async () => {
    if (isNullES(searchTreeName.value)) {
        isTreeMode.value = 1
    } else {
        isTreeMode.value = 2
        await getTreeAllData()
        treeRef.value?.treeRef?.filter(searchTreeName.value)
    }
}

//树配置
const treeRef = ref(null)
const treeProps = {
    label: 'name',
    children: 'children',
    isLeaf: (item) => {
        return !item.hasChildren
    },
}

//树菜单根节点
const treeMenuRoot = [
    { icon: 'add-circle', label: '新增', key: 'add' },
    { icon: 'delete-bin', label: '删除', key: 'del' },
]

//懒加载树的菜单
const treeLazyMenu = ({ item, level }, resolve) => {
    let newMenu = []
    if (item.fileType !== 3) {
        newMenu.push({ icon: 'add-circle', label: '新增', key: 'add' })
    }
    if (item.fileType !== 1) {
        newMenu.push({ icon: 'draft', label: '编辑', key: 'edit' })
    }
    if (level !== 1) {
        newMenu.push({ icon: 'sort-asc', label: '排序', key: 'sort' })
    }
    if (item.fileType !== 3) {
        newMenu.push({ icon: 'file-upload', label: '上传', key: 'upload' })
    }
    newMenu.push({ icon: 'delete-bin', label: '删除', key: 'del' })
    resolve(newMenu)
}


//全加载树的菜单
const treeDataMenu = ({ node, item, level }, resolve) => {
    const { isLeaf } = node
    let newMenu = []
    if (item.fileType !== 3) {
        newMenu.push({ icon: 'add-circle', label: '新增', key: 'add' })
    }
    if (item.fileType !== 1) {
        newMenu.push({ icon: 'draft', label: '编辑', key: 'edit' })
    }
    if (isLeaf) {
        newMenu.push({ icon: 'sort-asc', label: '排序', key: 'sort' })
    }
    if (level !== 1) {
        newMenu.push({ icon: 'file-upload', label: '上传', key: 'upload' })
    }
    newMenu.push({ icon: 'delete-bin', label: '删除', key: 'del' })
    resolve(newMenu)
}

//菜单被点击
const treeMenuClick = ({ key, data }) => {
    console.log(key)
    if (key === 'add') {
        addExcelInfo.value = getObjValue(data)
        addExcelType.value = '新增'
        addExcelShow.value = true
    }
}

//新增/编辑清表
const addExcelShow = ref(false)
const addExcelInfo = ref({})
const addExcelType = ref('')
const addExcelFinish = () => {

}

//全加载树
const treeData = ref([])
const getTreeAllData = async () => {
    const { data } = await mainApi.tabLazyTreeAll({
        modeId: dataInfo.value.id,
        //name: searchTreeName.value,
        name: '',
    })
    treeData.value = getArrValue(data)
}

//懒加载树
const treeLoadNode = async ({ item, level }, resolve) => {
    const parentId = level === 0 ? 0 : item.id
    const { data } = await mainApi.tabLazyTree({
        parentId: parentId,
        modeId: dataInfo.value.id,
    })
    resolve(getArrValue(data))
}

//在线编辑表格文件的配置
const tableTempExcelProps = ref({})

//树节点被点击
const nodeInfo = ref({})
const isCheckd = ref(false)
const treeNodeTap = ({ node, data }) => {
    nodeInfo.value = data
    if (!node.isLeaf) {
        tableTempExcelProps.value = {}
        isCheckd.value = true
        return
    }
    //处理详情
    if (data.fileType === 3) {
        isCheckd.value = true
        getDetailExcel(data.id)
    } else {
        isCheckd.value = false
    }
}

//获取模板详情
const excelInfo = ref({})
const getDetailExcel = async (dataId) => {
    const { code, data } = await mainApi.detailExcel(dataId)
    if (code !== 200) return
    const { id, extension, fileUrl } = getObjValue(data)
    const { user_id, user_name } = userInfo.value
    excelInfo.value = getObjValue(data)
    tableTempExcelProps.value = {
        type: 'xlsx',
        key: id + '_' + Math.random() + '',
        title: extension,
        file: fileUrl,
        userId: user_id,
        userName: user_name,
    }
}

//全屏显示
const fullScreenClick = () => {
    // 判断是否支持
    if (!screenfull.isEnabled) {
        window.$message.warning('当前浏览器不支持全屏')
        return false
    }
    //指定全屏区域元素
    const element = document.getElementById(tableTempExcelId.value)
    if (element) screenfull.request(element)
}

//关闭抽屉
const drawerClose = () => {
    isShow.value = false
    tableTempExcelProps.value = {}
    emit('close')
}
</script>

<style scoped lang="scss">
.table-temp-name {
    position: relative;
    box-sizing: border-box;
    min-width: 200px;
    height: 28px;
    border: 1px solid gainsboro;
    padding: 0 10px;
    border-radius: 3px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-right: 10px;
    font-size: 14px;
    i {
        color: #00a870;
        margin-left: 10px;
    }
}
.hc-table-temp-excel {
    position: relative;
}
</style>