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

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

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