|
|
@@ -8,8 +8,8 @@
|
|
|
</template>
|
|
|
<template v-if="isTreeMode === 1">
|
|
|
<hc-lazy-tree
|
|
|
- v-if="isShow" :root-menu="treeMenuRoot" :menus="treeLazyMenu" :h-props="treeProps" tree-key="id"
|
|
|
- @load="treeLoadNode" @node-tap="treeNodeTap" @menu-tap="treeMenuClick"
|
|
|
+ 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>
|
|
|
@@ -18,8 +18,8 @@
|
|
|
</template>
|
|
|
<template v-if="isTreeMode === 2">
|
|
|
<hc-data-tree
|
|
|
- ref="treeRef" :root-menu="treeMenuRoot" :menus="treeDataMenu" :h-props="treeProps" tree-key="id" :datas="treeData"
|
|
|
- :filter-node-method="treeFilterNode" @node-tap="treeNodeTap" @menu-tap="treeMenuClick"
|
|
|
+ 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>
|
|
|
@@ -29,32 +29,65 @@
|
|
|
</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>
|
|
|
+ <hc-online-office v-if="isShow" ui="hc-table-temp-excel" :props="tableTempExcelProps" />
|
|
|
</hc-card>
|
|
|
</hc-body>
|
|
|
</hc-drawer>
|
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
|
-import { getArrValue, isNullES } from 'js-fast-way'
|
|
|
import { ref, watch } from 'vue'
|
|
|
+import { useAppStore } from '~src/store'
|
|
|
+import { getArrValue, getObjValue, isNullES } from 'js-fast-way'
|
|
|
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
|
|
|
@@ -67,7 +100,7 @@ watch(isShow, (val) => {
|
|
|
|
|
|
//处理相关数据
|
|
|
const getDataApi = () => {
|
|
|
- console.log(dataInfo.value)
|
|
|
+
|
|
|
}
|
|
|
|
|
|
//树搜索
|
|
|
@@ -100,30 +133,50 @@ const treeMenuRoot = [
|
|
|
]
|
|
|
|
|
|
//懒加载树的菜单
|
|
|
-const treeLazyMenu = [
|
|
|
+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 = [
|
|
|
- { icon: 'add-circle', label: '新增', key: 'add' },
|
|
|
- { icon: 'draft', label: '编辑', key: 'edit' },
|
|
|
- { icon: 'file-upload', label: '上传', key: 'upload' },
|
|
|
- { icon: 'delete-bin', label: '删除', key: 'del' },
|
|
|
-]
|
|
|
+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, node, data }) => {
|
|
|
console.log(key)
|
|
|
}
|
|
|
|
|
|
-
|
|
|
-//树筛选过滤
|
|
|
-const treeFilterNode = (val, data) => {
|
|
|
- if (!val) return true
|
|
|
- return data.name.indexOf(val) !== -1
|
|
|
-}
|
|
|
-
|
|
|
//全加载树
|
|
|
const treeData = ref([])
|
|
|
const getTreeAllData = async () => {
|
|
|
@@ -145,9 +198,49 @@ const treeLoadNode = async ({ item, level }, resolve) => {
|
|
|
resolve(getArrValue(data))
|
|
|
}
|
|
|
|
|
|
+//在线编辑表格文件的配置
|
|
|
+const tableTempExcelProps = ref({})
|
|
|
+
|
|
|
//树节点被点击
|
|
|
+const nodeInfo = ref({})
|
|
|
+const isCheckd = ref(false)
|
|
|
const treeNodeTap = ({ node, data }) => {
|
|
|
- console.log(node)
|
|
|
+ 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 = () => {
|
|
|
+
|
|
|
}
|
|
|
|
|
|
//关闭抽屉
|
|
|
@@ -158,5 +251,25 @@ const drawerClose = () => {
|
|
|
</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>
|
