提交 bc89598e authored 作者: lidongxu's avatar lidongxu

style(design): 修复:报表设计页面样式问题

上级 e1416566
<template>
<div class="app-container">
<div class="container">
<el-row :gutter="20"
class="client-fix-height container">
<category-tree v-model="queryParams.reportType"
:options="floderList"
:defaultProps="{ label: 'title', children: 'children' }"
node-key="id"
placeholder="搜索文件夹名称"
:defaultExpandList="defaultExpandList"
:colSpan="4"
:customOptions="{
showIcon: true
}"
@search="handleNodeClick">
</category-tree>
<category-tree v-model="queryParams.reportType"
: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-row :gutter="10"
class="mb8">
<el-col :span="1.5">
<el-button type="primary"
plain
icon="Plus"
@click="handleAdd">新建报表</el-button>
</el-col>
<el-col :span="1.5">
<el-button type="info"
plain
icon="Upload"
@click="handleImport">导入报表</el-button>
</el-col>
</el-row>
<div 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>
<el-link :href="getReportEditUrl(row)"
target="_blank"
style="margin-left: 10px">{{ row.name }}</el-link>
</div>
</template>
</el-table-column>
<el-table-column label="是否被分享"
key="hasShare"
prop="hasShare"
align="center"
width="120"
sortable>
<!-- 使用 tag 标记颜色 -->
<template #default="{ row }">
<el-tag :type="row.shareViewUrl ? 'success' : 'danger'">{{ row.shareViewUrl ? '是' : '否'
}}</el-tag>
</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="handleView(scope.row)"></el-button>
</xl-tool-tip>
<xl-tool-tip content="分享报表"
placement="top">
<el-button link
type="primary"
icon="Share"
@click="handleShare(scope.row)"></el-button>
</xl-tool-tip>
<xl-tool-tip content="修改"
placement="top">
<el-button link
type="primary"
icon="Edit"
@click="handleEdit(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="handleCopy(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 :gutter="10"
class="mb8">
<el-col :span="1.5">
<el-button type="primary"
plain
icon="Plus"
@click="handleAdd">新建报表</el-button>
</el-col>
<el-col :span="1.5">
<el-button type="info"
plain
icon="Upload"
@click="handleImport">导入报表</el-button>
</el-col>
</el-row>
<el-table v-loading="loading"
:data="reportList"
style="width: 100%">
<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>
<el-link :href="getReportEditUrl(row)"
target="_blank"
style="margin-left: 10px">{{ row.name }}</el-link>
</div>
</template>
</el-table-column>
<el-table-column label="是否被分享"
key="hasShare"
prop="hasShare"
align="center"
width="120"
sortable>
<!-- 使用 tag 标记颜色 -->
<template #default="{ row }">
<el-tag :type="row.shareViewUrl ? 'success' : 'danger'">{{ row.shareViewUrl ? '是' : '否'
}}</el-tag>
</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="handleView(scope.row)"></el-button>
</xl-tool-tip>
<xl-tool-tip content="分享报表"
placement="top">
<el-button link
type="primary"
icon="Share"
@click="handleShare(scope.row)"></el-button>
</xl-tool-tip>
<xl-tool-tip content="修改"
placement="top">
<el-button link
type="primary"
icon="Edit"
@click="handleEdit(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="handleCopy(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" />
</div>
<!-- 新增/编辑分享弹窗 -->
<el-dialog title="创建分享链接"
v-model="dialogVisible">
<div v-if="shareReportUrl">
<el-form-item label="分享链接">
<el-input v-model="shareReportUrl"
style="width: 80%; margin-right: 20px;"
placeholder="分享链接" />
<el-button type="primary"
v-copyText="shareReportUrl"
v-copyText:callback="copyTextSuccess">复制链接剪切板</el-button>
<!-- 新增/编辑分享弹窗 -->
<el-dialog title="创建分享链接"
v-model="dialogVisible">
<div v-if="shareReportUrl">
<el-form-item label="分享链接">
<el-input v-model="shareReportUrl"
style="width: 80%; margin-right: 20px;"
placeholder="分享链接" />
<el-button type="primary"
v-copyText="shareReportUrl"
v-copyText:callback="copyTextSuccess">复制链接剪切板</el-button>
</el-form-item>
</div>
<div v-else>
<el-form label-width="180px"
v-model="shareForm">
<el-form-item label="过期时间">
<el-radio-group v-model="shareForm.termOfValidity">
<el-radio value="1">永久有效</el-radio>
<el-radio value="2">7天</el-radio>
<el-radio value="3">1天</el-radio>
</el-radio-group>
</el-form-item>
</div>
<div v-else>
<el-form label-width="180px"
v-model="shareForm">
<el-form-item label="过期时间">
<el-radio-group v-model="shareForm.termOfValidity">
<el-radio value="1">永久有效</el-radio>
<el-radio value="2">7天</el-radio>
<el-radio value="3">1天</el-radio>
</el-radio-group>
</el-form-item>
<!-- <el-form-item label="是否开启密码">
<!-- <el-form-item label="是否开启密码">
<el-radio-group v-model="shareForm.isPasswordEnabled">
<el-radio label="否">否</el-radio>
<el-radio label="是">是</el-radio>
</el-radio-group>
</el-form-item> -->
<!-- <el-form-item label="是否检验分享token">
<!-- <el-form-item label="是否检验分享token">
<el-switch v-model="shareForm.isCheckToken" />
</el-form-item> -->
</el-form>
</div>
<template #footer>
<span class="dialog-footer">
<el-button @click="dialogVisible = false">取消</el-button>
<el-button type="primary"
@click="handleConfirm">确认</el-button>
</span>
</template>
</el-dialog>
</el-row>
</el-form>
</div>
<template #footer>
<span class="dialog-footer">
<el-button @click="dialogVisible = false">取消</el-button>
<el-button type="primary"
@click="handleConfirm">确认</el-button>
</span>
</template>
</el-dialog>
</div>
</div>
</template>
......@@ -383,4 +378,26 @@ const handleCopy = (row) => {
</script>
<style scoped></style>
\ No newline at end of file
<style scoped>
.container {
display: flex;
flex-direction: row;
width: 100%;
.right-col {
flex: 1 !important;
width: 100%;
height: 100%;
margin-left: 20px;
display: flex;
flex-direction: column;
overflow: hidden;
.el-form {
width: 100%;
}
}
}
</style>
\ No newline at end of file
<template>
<div class="app-container">
<el-row class="client-fix-height container">
<el-row class="container">
<el-col>
<!-- 查询表单 -->
<el-form :model="queryParams"
......
<template>
<div class="app-container">
<el-row :gutter="20"
class="client-fix-height container">
class="container">
<!--部门数据-->
<category-tree :options="deptOptions"
:defaultProps="{ label: 'label', children: 'children' }"
......@@ -220,7 +220,8 @@
<el-dialog :title="title"
v-model="open"
append-to-body
draggable overflow>
draggable
overflow>
<el-form :model="form"
:rules="rules"
ref="userRef"
......@@ -355,7 +356,8 @@
<!-- 促销权限配置 -->
<el-row v-if="form.proStatus">
<el-col :span="12">
<el-form-item label="促销角色" prop="privilegeId">
<el-form-item label="促销角色"
prop="privilegeId">
<el-radio-group v-model="form.privilegeId">
<el-radio :value="1"
label="城市经理"></el-radio>
......@@ -399,7 +401,8 @@
<el-dialog :title="upload.title"
v-model="upload.open"
append-to-body
draggable overflow>
draggable
overflow>
<el-upload ref="uploadRef"
:limit="1"
accept=".xlsx, .xls"
......@@ -722,7 +725,7 @@
postOptions.value = response.posts;
roleOptions.value = response.roles;
open.value = true;
title.value = "添加用户";
form.value.password = initPassword.value;
})
......@@ -781,7 +784,7 @@
privilegeId: form.value.privilegeId,
status: form.value.proStatus
})
reset()
}
});
......@@ -828,8 +831,10 @@
<style scoped
lang="scss">
.app-container {
>.el-row {
.container {
display: flex;
flex-direction: row;
.right_col {
flex: 1 !important;
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论