报表查询中心

src/api/reports/report-query-center.ts

@@ -0,0 +1,45 @@
+import request from '../../utils/request'
+
+export interface ReportForms {
+    id: string
+    name: string
+    pageJson: string | null
+    // 0 - 文件 1 - 文件夹
+    type: number
+    parentId: string | null
+    children?: ReportForms[]
+}
+
+export function addReportQueryCenter(data: ReportForms) {
+    return request({
+        url: '/reportQueryCenter/addReportQueryCenter',
+        method: 'post',
+        data
+    })
+}
+
+export function delReportQueryCenterById(id: string) {
+    return request({
+        url: '/reportQueryCenter/delReportQueryCenterById',
+        method: 'get',
+        params: {id}
+    })
+}
+
+
+export function updateReportQueryCenter(data: ReportForms) {
+    return request({
+        url: '/reportQueryCenter/updateReportQueryCenter',
+        method: 'post',
+        data
+    })
+}
+
+
+export function getReportTree(): Promise<ReportForms[]> {
+    // @ts-ignore
+    return request({
+        url: '/reportQueryCenter/getReportTree',
+        method: 'get'
+    })
+}

src/components/query-components/page-help-type.ts

@@ -95,13 +95,16 @@ export interface componentType {
         rowKey?: string,
         loading: boolean,
     };
-    columns: PageJsonColumns[],
+    columns: PageJsonColumns[] | [],
     pageConfig: {
         currentPage: number;
         pageSize: number;
+        pageSizes: number[]
+        small: boolean;
+        disabled: boolean
+        background: boolean
         total: number,
         layout: string
-        pageSizes: number[]
         pagerCount: 5
     }
 }

src/views/utilities/page-editor-help/components/PageTree.vue

@@ -0,0 +1,162 @@
+<script setup lang="ts">
+import {onMounted, ref} from 'vue'
+import {ElMessageBox} from "element-plus";
+import {
+  addReportQueryCenter,
+  delReportQueryCenterById,
+  getReportTree,
+  ReportForms
+} from "@/api/reports/report-query-center";
+import {componentType} from "@/components/query-components/page-help-type";
+
+const props = defineProps<{
+  currentPage: (data: ReportForms) => void
+}>()
+
+const dataTree = ref<ReportForms[]>([])
+
+const contextmenu = (event: Event, data: ReportForms) => {
+  console.log(event, data)
+}
+
+const addPageClick = async () => {
+  let {value} = await ElMessageBox.prompt('创建文件夹', '提示', {
+    type: "warning",
+    confirmButtonText: '确认',
+    cancelButtonText: '取消',
+    inputPattern: /\S/,
+    inputValidator: (val) => {
+      return val.length <= 20;
+    },
+    inputErrorMessage: '名称不能为空，且不能超过 20 个字。',
+  })
+
+  addReportQueryCenter({
+    id: '',
+    name: value,
+    pageJson: null,
+    type: 1,
+    parentId: null
+  }).then(() => {
+    getReportTreeFunc()
+  })
+
+}
+
+const getReportTreeFunc = () => {
+  getReportTree().then(res => {
+    dataTree.value = res
+  })
+}
+
+const nodeClick = (data: ReportForms, a) => {
+  if (data.type === 0) {
+    props.currentPage(data)
+  }
+  let temp = a.parent.data as ReportForms
+  currentTree.value = data
+  currentTreeParent.value = data.parentId === null ? null : temp
+}
+
+const currentTree = ref<ReportForms>(null)
+const currentTreeParent = ref<ReportForms>(null)
+const addFile = async () => {
+  let defaultValue: componentType = {
+    isShow: true,
+    header: [],
+    queryParam: {},
+    formConfig: {
+      inline: true
+    },
+    submitEvent: '/**\n@param {queryData} queryData\n@param {config} config\n@param {axios} axios \n*/\nfunction func(queryData,config,axios){\n   \n}',
+    submitQuerySql: '',
+    tableConfig: {
+      height: 600,
+      data: [],
+      loading: false,
+    },
+    columns: [],
+    pageConfig: {
+      currentPage: 1,
+      pageSize: 50,
+      pageSizes: [50, 100, 150, 200],
+      small: true,
+      disabled: false,
+      background: true,
+      pagerCount: 5,
+      layout: "total,sizes, prev, pager, next, jumper",
+      total: 0,
+    }
+  }
+  let data: ReportForms = {
+    id: '',
+    name: '',
+    pageJson: JSON.stringify(defaultValue),
+    type: 0,
+    parentId: null
+  }
+  // 如果当前选中的是文件夹的话就添加到这个文件夹下面
+  if (currentTree.value !== null && currentTree.value.type === 1) {
+    data.parentId = currentTree.value.id
+  } else if (currentTree.value !== null && currentTree.value.type === 0) {
+    if (currentTreeParent.value !== null) {
+      data.parentId = currentTreeParent.value.id
+    }
+  }
+
+  let {value} = await ElMessageBox.prompt('创建文件夹', '提示', {
+    type: "warning",
+    confirmButtonText: '确认',
+    cancelButtonText: '取消',
+    inputPattern: /\S/,
+    inputValidator: (val) => {
+      return val.length <= 20;
+    },
+    inputErrorMessage: '名称不能为空，且不能超过 20 个字。',
+  })
+  data.name = value
+  addReportQueryCenter(data).then(() => {
+    getReportTreeFunc()
+  })
+
+}
+
+const delReportQueryCenterClick = async (data: ReportForms) => {
+  await ElMessageBox.alert('是否删除', '提示', {
+    type: 'error'
+  })
+  delReportQueryCenterById(data.id).then((res) => {
+    getReportTreeFunc()
+  })
+}
+
+onMounted(() => {
+  getReportTreeFunc()
+})
+
+</script>
+
+<template>
+  <el-button @click="addPageClick">新增文件夹</el-button>
+  <el-button @click="addFile">新增文件</el-button>
+  <el-tree :data="dataTree"
+           @node-click="nodeClick"
+           @node-contextmenu="contextmenu"
+           highlight-current
+           default-expand-all>
+    <template #default="{node,data}">
+      <el-icon>
+        <Document v-if="data.type === 0"/>
+        <Folder v-else/>
+      </el-icon>
+      {{ data.name }}
+      <el-button type="danger" text @click.stop="delReportQueryCenterClick(data)">
+        删除
+      </el-button>
+    </template>
+  </el-tree>
+</template>
+
+<style scoped lang="scss">
+
+</style>