Skip to content

W
wangxiaolu-sfa-ui
提交 f3e1cd12 authored 作者: lidongxu's avatar lidongxu
浏览文件
操作

feat(jimureport): 新增：积木报表设计页面_自己实现（完成页面布局）

上级 be545bf7
显示空白字符变更
内嵌 并排
正在显示 包含 217 行增加 和 26 行删除
src/api/bi/report.js deleted 100644 → 0
浏览文件 @ be545bf7
import request from '@/utils/request'
// 获取被分配的报表列表
export function getReportListAPI(params) {
return request({
url: '/report/jimuReport/query/list',
params
})
}
src/api/jimu/index.js
浏览文件 @ f3e1cd12
......@@ -30,3 +30,18 @@ export function getReportFolderListAPI() {
})
}
/********* 报表设计 *********/
// 获取文件夹结构
export function getReportFolderStructureAPI(params) {
return request({
url: `/report/jmreport/category/list`,
params
})
}
// 获取报表设计中的报表列表
export function getDesignReportListAPI(params) {
return request({
url: `/report/jmreport/query/report/folder`,
params
})
}
src/assets/icons/svg/bg-document.svg 0 → 100644
浏览文件 @ f3e1cd12
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1753438508298" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6380" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M875.093333 301.653333L597.333333 21.333333a77.226667 77.226667 0 0 0-14.933333-11.52l-4.266667-2.133333h-2.986666A72.533333 72.533333 0 0 0 546.133333 0H200.106667A72.106667 72.106667 0 0 0 128 72.106667v879.786666A72.106667 72.106667 0 0 0 200.106667 1024h623.786666A72.106667 72.106667 0 0 0 896 951.893333V352.426667a72.106667 72.106667 0 0 0-20.906667-50.773334z m-290.986666 10.24V110.506667l199.68 201.813333z" fill="#1eae1d" p-id="6381"></path></svg>
\ No newline at end of file
src/assets/icons/svg/floader.svg 0 → 100644
浏览文件 @ f3e1cd12
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1753427197844" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4404" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M890.764387 269.477161H523.47871a9.166452 9.166452 0 0 1-6.523871-2.708645l-94.63742-94.538322a45.914839 45.914839 0 0 0-32.652387-13.510194H133.235613a46.261677 46.261677 0 0 0-46.195613 46.146065v609.14787a46.179097 46.179097 0 0 0 46.195613 46.146065h757.528774a46.261677 46.261677 0 0 0 46.195613-46.146065V315.623226a46.179097 46.179097 0 0 0-46.195613-46.146065z" fill="#ffce45" p-id="4405"></path></svg>
\ No newline at end of file
src/assets/styles/index.scss
浏览文件 @ f3e1cd12
......@@ -196,3 +196,8 @@ aside {
}
}
// 分割线调整宽度线条
.splitpanes--vertical > .splitpanes__splitter {
width: 2px; /* 调整粗细 */
background: #ddd; /* 可选：修改颜色 */
}
\ No newline at end of file
src/components/CategoryTree/index.vue
浏览文件 @ f3e1cd12
......@@ -30,8 +30,8 @@
v-slot="{ node, data }"
:style="{ margin: rowGap + 'px !important' }">
<svg-icon v-if="customOptions.showIcon"
icon-class="tab"
style="fill: #409eff; stroke: red; margin-right: 10px;" />
icon-class="floader"
class="floader-icon" />
<span>{{ node.label }}</span>
<span v-if="customOptions.showTool"
class="edit_del">
......@@ -114,8 +114,8 @@ const props = defineProps({
default: () => ({
// 右侧工具是否显示
showTool: false,
// 左侧图表是否显示
showIcon: false,
// // 左侧图表是否显示
// showIcon: false,
// 行与行间隙
rowGap: 0,
// 底部分页是否显示
......@@ -292,7 +292,18 @@ const handleClick = () => {
}
}
::v-deep(.el-tree-node){
margin-top: 5px;
}
::v-deep(.el-tree-node__content){
.el-icon, .svg-icon{
font-size: 16px;
}
.floader-icon{
margin-right: 10px;
}
}
::v-deep(.custom-tree-node) {
width: 100%;
......@@ -302,7 +313,7 @@ const handleClick = () => {
/* 间距放大 */
::v-deep(.row_gap .el-tree-node .el-tree-node__content) {
padding: 10px 0;
padding: 20px 0;
height: auto;
}
......
src/main.js
浏览文件 @ f3e1cd12
......@@ -12,6 +12,8 @@ import 'element-plus/dist/index.css'
import 'element-plus/theme-chalk/dark/css-vars.css' // 暗黑模式变量
import locale from 'element-plus/es/locale/lang/zh-cn'
import '@/assets/styles/index.scss'
import { Splitpanes, Pane } from "splitpanes" // 分割拖拽调整宽度
import "splitpanes/dist/splitpanes.css"
/****************** 插件 ******************/
import Cookies from 'js-cookie'
......@@ -100,6 +102,8 @@ app.component('XlToolTip', XLToolTip)
app.component('XlSelect', XlSelect)
app.component('OpenDialog', OpenDialog)
app.component('VersionNotice', VersionNotice)
app.component('Splitpanes', Splitpanes)
app.component('Pane', Pane)
// 全局插件
app.use(plugins)
......
src/utils/request.js
浏览文件 @ f3e1cd12
......@@ -35,7 +35,7 @@ service.interceptors.request.use(config => {
// 促销后台不能带 Bearer 前缀
config.headers['Authorization'] = getToken()
} else {
config.headers['Authorization'] = 'Bearer ' + getToken() // 让每个请求携带自定义token 请根据实际情况自行修改
config.headers['Authorization'] = 'Bearer ' + getToken()
}
}
// get请求映射params参数
......
src/views/jimureport/design/index.vue 0 → 100644
浏览文件 @ f3e1cd12
<template>
<div class="app-container">
<div class="container">
<el-row :gutter="20"
class="client-fix-height container">
<category-tree :options="floderList"
:defaultProps="{ label: 'title', children: 'children' }"
node-key="id"
placeholder="搜索文件夹名称"
:defaultExpandList="defaultExpandList"
:colSpan="4"
:customOptions="{
showIcon: true
}"
@search="handleNodeClick">
</category-tree>
<el-col :span="20"
:xs="24"
class="right_col">
<el-form :model="queryParams"
ref="queryRef"
:inline="true"
label-width="68px">
<el-form-item label="报表名字"
prop="name">
<el-input v-model="queryParams.name"
placeholder="请输入用户工号"
clearable
style="width: 240px"
@input="getReportList" />
</el-form-item>
</el-form>
<el-table v-loading="loading"
:data="reportList">
<el-table-column type="selection"
width="50" />
<el-table-column label="报表名称"
key="name"
prop="name"
align="left">
<template #default="{ row }">
<div>
<svg-icon icon-class="bg-document"></svg-icon>
<span style="margin-left: 10px">{{ row.name }}</span>
</div>
</template>
</el-table-column>
<el-table-column label="操作"
class-name="small-padding fixed-width"
align="left"
width="200">
<template #default="scope">
<xl-tool-tip content="预览报表"
placement="top">
<el-button link
type="primary"
icon="View"
@click="handleUpdate(scope.row)"></el-button>
</xl-tool-tip>
<xl-tool-tip content="修改"
placement="top">
<el-button link
type="primary"
icon="Edit"
@click="handleUpdate(scope.row)"></el-button>
</xl-tool-tip>
<xl-tool-tip content="删除"
placement="top"
v-if="scope.row.userId !== 1">
<el-button link
type="primary"
icon="Delete"
@click="handleDelete(scope.row)"></el-button>
</xl-tool-tip>
<xl-tool-tip content="复制报表"
placement="top"
v-if="scope.row.userId !== 1">
<el-button link
type="primary"
icon="CopyDocument"
@click="handleResetPwd(scope.row)"></el-button>
</xl-tool-tip>
</template>
</el-table-column>
</el-table>
<pagination v-show="total > 0"
:total="total"
v-model:page="queryParams.pageNo"
v-model:limit="queryParams.pageSize"
@pagination="getReportList" />
</el-col>
</el-row>
</div>
</div>
</template>
<script setup>
import { getToken } from '@/utils/auth'
import { getReportFolderStructureAPI, getDesignReportListAPI } from '@/api/jimu'
/************ 文件夹分组 ********************/
const floderList = ref([{ // 文件夹结构
id: '0',
izLeaf: 0,
pid: '-1',
sortNo: 0,
title: '文件夹',
value: '0',
children: []
}])
const defaultExpandList = ref([])
const getReportFolderStructure = async (obj) => {
// 递归判断每个 res.result 数组里的对象去请求，有数据放到 children 里，没有则停止递归
const res = await getReportFolderStructureAPI({
parentId: obj.id
})
obj.children = [...res.result]
floderList.value = [...floderList.value]
// 确保返回数据有效
res.result.forEach(o => {
if (o.izLeaf === 0) {
// 还有底层数据继续请求
getReportFolderStructure(o)
}
})
// 只需要在初始化时设置一次展开
if (defaultExpandList.value.length === 0) {
defaultExpandList.value = [floderList.value[0].id]
}
}
getReportFolderStructure(floderList.value[0])
// 某行点击
const handleNodeClick = (row) => {
}
/**************** 报表列表 ***************/
// 报表搜索
const queryParams = reactive({
pageNo: 1,
pageSize: 10,
reportType: floderList.value[0], // 文件夹 ID
name: '', // 搜索名字字段
token: getToken()
})
const loading = ref(false)
const reportList = ref([])
const total = ref(0)
const getReportList = async () => {
loading.value = true
const res = await getDesignReportListAPI(queryParams)
loading.value = false
reportList.value = res.result.records
total.value = res.result.total
}
getReportList()
</script>
<style scoped></style>
\ No newline at end of file
src/views/bi/report/index.vue → src/views/jimureport/list/index.vue
浏览文件 @ f3e1cd12
......@@ -43,9 +43,7 @@
sortable>
<template #default="scope">
<div style="display: flex; align-items: center">
<el-icon>
<List color="green" />
</el-icon>
<svg-icon icon-class="bg-document"></svg-icon>
<span style="margin-left: 10px">{{ scope.row.reportName }}</span>
</div>
</template>
......
src/views/system/report/manager.vue → src/views/jimureport/manager/index.vue
浏览文件 @ f3e1cd12
......@@ -42,8 +42,8 @@
:disabled="reportMultipleBtnDis"
@click="handleAssign">分配用户</el-button>
</el-col> -->
<right-toolbar v-model:showSearch="showSearch"
@queryTable="getReportList"></right-toolbar>
<!-- <right-toolbar v-model:showSearch="showSearch"
@queryTable="getReportList"></right-toolbar> -->
</el-row>
<!-- 表格数据 -->
......@@ -59,9 +59,7 @@
sortable>
<template #default="scope">
<div style="display: flex; align-items: center">
<el-icon>
<List color="green" />
</el-icon>
<svg-icon icon-class="bg-document"></svg-icon>
<span style="margin-left: 10px">{{ scope.row.name }}</span>
</div>
</template>
......@@ -96,7 +94,7 @@
placement="top">
<el-button link
type="primary"
icon="Reading"
icon="User"
@click="handleAssign(scope.row)"></el-button>
</xl-tool-tip>
</template>
......
src/views/system/user/index.vue
浏览文件 @ f3e1cd12
......@@ -441,8 +441,6 @@
import { getToken } from "@/utils/auth";
import useAppStore from '@/store/modules/app'
import { changeUserStatus, listUser, resetUserPwd, delUser, getUser, updateUser, addUser, deptTreeSelectList, getProCityAPI, openPromotionSystemAPI } from "@/api";
// import { Splitpanes, Pane } from "splitpanes"
// import "splitpanes/dist/splitpanes.css"
const router = useRouter();
const appStore = useAppStore()
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论