|
|
@@ -3,86 +3,137 @@
|
|
|
<div class="treeBox">
|
|
|
<h4>材料分类</h4>
|
|
|
<div>
|
|
|
- <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick" />
|
|
|
+ <el-tree
|
|
|
+ :data="treeData"
|
|
|
+ :render-content="renderContent"
|
|
|
+ :props="defaultProps"
|
|
|
+ @node-click="handleNodeClick"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="previewBox">
|
|
|
+ <div class="tools">
|
|
|
+ <h4>土地交付记录表（3）.pdf</h4>
|
|
|
+ <ul>
|
|
|
+ <li><i class="down_icon"></i>下载</li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ <div class="contentBox">
|
|
|
+ <vue-office-pdf :src="pdf" @rendered="renderedHandler" @error="errorHandler" />
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="previewBox"></div>
|
|
|
</div>
|
|
|
</template>
|
|
|
<script setup lang="ts">
|
|
|
import { onMounted } from 'vue'
|
|
|
+import { useRoute } from 'vue-router'
|
|
|
+import request from '@/config/axios'
|
|
|
+import VueOfficePdf from '@vue-office/pdf'
|
|
|
+import VueOfficeExcel from '@vue-office/excel'
|
|
|
+import VueOfficeDocx from '@vue-office/docx'
|
|
|
+import '@vue-office/excel/lib/index.css'
|
|
|
+import '@vue-office/docx/lib/index.css'
|
|
|
+
|
|
|
defineOptions({ name: 'FjclComp' })
|
|
|
|
|
|
-interface Tree {
|
|
|
- label: string
|
|
|
- children?: Tree[]
|
|
|
-}
|
|
|
const defaultProps = {
|
|
|
children: 'children',
|
|
|
- label: 'label'
|
|
|
+ label: 'name'
|
|
|
}
|
|
|
const handleNodeClick = (data: Tree) => {
|
|
|
console.log(data)
|
|
|
+ if (data['nodeType'] === 1) {
|
|
|
+ queryProjectMaterial(data['id'])
|
|
|
+ }
|
|
|
}
|
|
|
-
|
|
|
-const data: Tree[] = [
|
|
|
+const pdf = ref<string>('http://localhost/test.pdf')
|
|
|
+const renderedHandler: () => void = () => {
|
|
|
+ console.log('加载完成')
|
|
|
+}
|
|
|
+const errorHandler: (err: any) => void = (err: any) => {
|
|
|
+ console.log(err)
|
|
|
+}
|
|
|
+const route = useRoute()
|
|
|
+const query = route.query
|
|
|
+const _mainProjectId = query.id
|
|
|
+interface Tree {
|
|
|
+ name: string
|
|
|
+ id: string
|
|
|
+ pid: string
|
|
|
+ nodeType: number
|
|
|
+ fileUrl?: string
|
|
|
+ fileSuffix?: string
|
|
|
+ children?: Array<Tree>
|
|
|
+}
|
|
|
+const treeData = ref<Tree[]>([
|
|
|
{
|
|
|
- label: 'Level one 1',
|
|
|
+ name: 'Level one 3',
|
|
|
+ id: '',
|
|
|
+ pid: '',
|
|
|
+ nodeType: 2,
|
|
|
children: [
|
|
|
{
|
|
|
- label: 'Level two 1-1',
|
|
|
+ name: 'Level two 3-1',
|
|
|
+ id: '',
|
|
|
+ pid: '',
|
|
|
+ nodeType: 2,
|
|
|
children: [
|
|
|
{
|
|
|
- label: 'Level three 1-1-1'
|
|
|
+ name: 'Level three 3-1-1',
|
|
|
+ id: '',
|
|
|
+ pid: '',
|
|
|
+ nodeType: 1
|
|
|
}
|
|
|
]
|
|
|
}
|
|
|
]
|
|
|
- },
|
|
|
- {
|
|
|
- label: 'Level one 2',
|
|
|
- children: [
|
|
|
- {
|
|
|
- label: 'Level two 2-1',
|
|
|
- children: [
|
|
|
- {
|
|
|
- label: 'Level three 2-1-1'
|
|
|
- }
|
|
|
- ]
|
|
|
- },
|
|
|
- {
|
|
|
- label: 'Level two 2-2',
|
|
|
- children: [
|
|
|
- {
|
|
|
- label: 'Level three 2-2-1'
|
|
|
- }
|
|
|
- ]
|
|
|
+ }
|
|
|
+])
|
|
|
+const queryProjectMaterialByTree = (): void => {
|
|
|
+ const urlApi = `/project-material/tree`
|
|
|
+ request
|
|
|
+ .post({ url: urlApi, data: { projectId: _mainProjectId } }, '/business')
|
|
|
+ .then((resultData) => {
|
|
|
+ // treeData.value = resultData
|
|
|
+ })
|
|
|
+}
|
|
|
+const queryProjectMaterial = (fileId): void => {
|
|
|
+ const urlApi = `/project-material?id=${fileId}`
|
|
|
+ request.get({ url: urlApi }, '/business').then((resultData) => {
|
|
|
+ pdf.value = resultData['fileUrl']
|
|
|
+ })
|
|
|
+}
|
|
|
+const renderContent = (h, { node, data, store }) => {
|
|
|
+ console.log('data~~~~~~~~~~~~~~~~~~~~~~')
|
|
|
+ console.log(data)
|
|
|
+ return h(
|
|
|
+ 'span',
|
|
|
+ {
|
|
|
+ style: {
|
|
|
+ display: 'inline-block',
|
|
|
+ width: '100%'
|
|
|
}
|
|
|
- ]
|
|
|
- },
|
|
|
- {
|
|
|
- label: 'Level one 3',
|
|
|
- children: [
|
|
|
- {
|
|
|
- label: 'Level two 3-1',
|
|
|
- children: [
|
|
|
- {
|
|
|
- label: 'Level three 3-1-1'
|
|
|
- }
|
|
|
- ]
|
|
|
- },
|
|
|
- {
|
|
|
- label: 'Level two 3-2',
|
|
|
- children: [
|
|
|
- {
|
|
|
- label: 'Level three 3-2-1'
|
|
|
+ },
|
|
|
+ [
|
|
|
+ h('span', [
|
|
|
+ h(resolveComponent(data['nodeType'] === 1 ? 'Document' : 'Folder'), {
|
|
|
+ style: {
|
|
|
+ marginRight: '5px',
|
|
|
+ marginTop: '-4px',
|
|
|
+ verticalAlign: 'middle',
|
|
|
+ width: '18px',
|
|
|
+ height: '18px',
|
|
|
+ color: data['nodeType'] === 1 ? '#2e77e6' : '#f9a527'
|
|
|
}
|
|
|
- ]
|
|
|
- }
|
|
|
+ }),
|
|
|
+ h('span', data.name)
|
|
|
+ ])
|
|
|
]
|
|
|
- }
|
|
|
-]
|
|
|
-onMounted(() => {})
|
|
|
+ )
|
|
|
+}
|
|
|
+onMounted(() => {
|
|
|
+ queryProjectMaterialByTree()
|
|
|
+})
|
|
|
</script>
|
|
|
<style lang="scss" scoped>
|
|
|
@import './index.scss';
|
