提交 765a6bed authored 作者: lidongxu's avatar lidongxu

refactor(report/manager): 修改:积木报表分配权限搭建 UI 效果

上级 2a387321
...@@ -19,7 +19,7 @@ export function enterOtherReportAPI(data) { ...@@ -19,7 +19,7 @@ export function enterOtherReportAPI(data) {
}) })
} }
// 获取积木报表文件夹列表 // 获取积木报表文件夹列表(分组)
export function getReportFolderListAPI() { export function getReportFolderListAPI() {
return request({ return request({
url: `/report/jmreport/category/list`, url: `/report/jmreport/category/list`,
......
...@@ -143,7 +143,6 @@ const getReportList = async () => { ...@@ -143,7 +143,6 @@ const getReportList = async () => {
const { data: otherData } = await getReportListBySelfAPI() const { data: otherData } = await getReportListBySelfAPI()
reportList.value = data.concat(otherData) reportList.value = data.concat(otherData)
// 右侧分组列表 // 右侧分组列表
const res = await getReportListByGroupAPI({ const res = await getReportListByGroupAPI({
categoryName: '供应链报表' categoryName: '供应链报表'
......
...@@ -5,17 +5,7 @@ ...@@ -5,17 +5,7 @@
ref="queryRef" ref="queryRef"
:inline="true" :inline="true"
label-width="68px"> label-width="68px">
<el-form-item label="部门选择"
prop="roleName">
<el-tree-select v-model="queryParams.deptId"
:data="deptOptions"
filterable
highlight-current
node-key="id"
check-strictly
:default-expanded-keys="defaultExpandedKeys"
style="width: 240px" />
</el-form-item>
<el-form-item label="用户名称" <el-form-item label="用户名称"
prop="nickName"> prop="nickName">
<el-input v-model="queryParams.nickName" <el-input v-model="queryParams.nickName"
...@@ -89,55 +79,105 @@ ...@@ -89,55 +79,105 @@
v-model:limit="queryParams.pageSize" v-model:limit="queryParams.pageSize"
@pagination="getList" /> @pagination="getList" />
<!-- 分配角色数据权限对话框 --> <!-- 分配用户 -->
<el-dialog :title="title" <el-dialog title="选择用户"
v-model="openDataScope" v-model="showSelUser"
top="5vh"
append-to-body append-to-body
draggable draggable
overflow> overflow>
<el-form :model="form" <el-form :model="queryParams"
label-width="80px"> ref="queryRef"
<el-form-item label="角色名称"> :inline="true">
<el-input v-model="form.roleName" <el-form-item label="部门选择"
:disabled="true" /> prop="roleName">
<el-tree-select v-model="queryParams.deptId"
:data="deptOptions"
filterable
highlight-current
node-key="id"
check-strictly
:default-expanded-keys="defaultExpandedKeys"
style="width: 240px" />
</el-form-item> </el-form-item>
<el-form-item label="权限字符"> <el-form-item label="用户工号"
<el-input v-model="form.roleKey" prop="userName">
:disabled="true" /> <el-input v-model="queryParams.userName"
placeholder="请输入用户工号"
clearable
style="width: 180px"
@input="handleQuery" />
</el-form-item> </el-form-item>
<el-form-item label="权限范围"> <el-form-item label="用户昵称"
<el-select v-model="form.dataScope" prop="nickName">
@change="dataScopeSelectChange"> <el-input v-model="queryParams.nickName"
<el-option v-for="item in dataScopeOptions" placeholder="请输入用户昵称"
:key="item.value" clearable
:label="item.label" style="width: 180px"
:value="item.value"></el-option> @input="handleQuery" />
</el-select>
</el-form-item> </el-form-item>
<el-form-item label="数据权限" <el-form-item label="手机号码"
v-show="form.dataScope == 2"> prop="phonenumber">
<el-checkbox v-model="deptExpand" <el-input v-model="queryParams.phonenumber"
@change="handleCheckedTreeExpand($event, 'dept')">展开/折叠</el-checkbox> placeholder="请输入手机号码"
<el-checkbox v-model="deptNodeAll" clearable
@change="handleCheckedTreeNodeAll($event, 'dept')">全选/全不选</el-checkbox> style="width: 180px"
<el-checkbox v-model="form.deptCheckStrictly" @input="handleQuery" />
@change="handleCheckedTreeConnect($event, 'dept')">父子联动</el-checkbox> </el-form-item>
<el-tree class="tree-border" <el-form-item>
:data="deptOptions" <el-button icon="Refresh"
show-checkbox @click="resetQuery">重置</el-button>
default-expand-all
ref="deptRef"
node-key="id"
:check-strictly="!form.deptCheckStrictly"
empty-text="加载中,请稍候"
:props="{ label: 'label', children: 'children' }"></el-tree>
</el-form-item> </el-form-item>
</el-form> </el-form>
<el-row>
<el-table @row-click="clickRow"
ref="refTable"
:data="userList"
@selection-change="handleSelectionChange">
<el-table-column type="selection"
width="55"></el-table-column>
<el-table-column label="用户工号"
prop="userName"
:show-overflow-tooltip="true" />
<el-table-column label="用户昵称"
prop="nickName"
:show-overflow-tooltip="true" />
<el-table-column label="邮箱"
prop="email"
:show-overflow-tooltip="true" />
<el-table-column label="手机"
prop="phonenumber"
:show-overflow-tooltip="true" />
<el-table-column label="状态"
align="center"
prop="status">
<template #default="scope">
<dict-tag :options="sys_normal_disable"
:value="scope.row.status" />
</template>
</el-table-column>
<el-table-column label="创建时间"
align="center"
prop="createTime"
width="180">
<template #default="scope">
<span>{{ parseTime(scope.row.createTime) }}</span>
</template>
</el-table-column>
</el-table>
<div class="pagination-wrap">
<pagination v-show="total > 0"
:total="total"
v-model:page="queryParams.pageNum"
v-model:limit="queryParams.pageSize"
@pagination="getList" />
</div>
</el-row>
<template #footer> <template #footer>
<div class="dialog-footer"> <div class="dialog-footer">
<el-button type="primary" <el-button type="primary"
@click="submitDataScope">确 定</el-button> @click="handleSelectUser">确 定</el-button>
<el-button @click="cancelDataScope">取 消</el-button> <el-button @click="visible = false">取 消</el-button>
</div> </div>
</template> </template>
</el-dialog> </el-dialog>
...@@ -148,7 +188,7 @@ ...@@ -148,7 +188,7 @@
<script setup <script setup
name="Role"> name="Role">
import { addRole, changeRoleStatus, dataScope, delRole, getRole, listRole, updateRole, deptTreeSelect } from "@/api"; import { addRole, changeRoleStatus, dataScope, delRole, getRole, listRole, updateRole, deptTreeSelect } from "@/api";
import { deptTreeSelectList, listUser, roleMenuTreeselect, treeselect as menuTreeselect } from "@/api"; import { deptTreeSelectList, listUser, getReportFolderListAPI, roleMenuTreeselect, treeselect as menuTreeselect } from "@/api";
const router = useRouter(); const router = useRouter();
const { proxy } = getCurrentInstance(); const { proxy } = getCurrentInstance();
...@@ -161,7 +201,7 @@ ...@@ -161,7 +201,7 @@
const ids = ref([]); const ids = ref([]);
const single = ref(true); const single = ref(true);
const multiple = ref(true); const multiple = ref(true);
const title = ref(""); const title = ref("");
const dateRange = ref([]); const dateRange = ref([]);
const menuOptions = ref([]); const menuOptions = ref([]);
...@@ -169,7 +209,7 @@ ...@@ -169,7 +209,7 @@
const menuNodeAll = ref(false); const menuNodeAll = ref(false);
const deptExpand = ref(true); const deptExpand = ref(true);
const deptNodeAll = ref(false); const deptNodeAll = ref(false);
const menuRef = ref(null); const menuRef = ref(null);
...@@ -187,6 +227,7 @@ ...@@ -187,6 +227,7 @@
getDeptList() getDeptList()
/** 查询用户列表 */ /** 查询用户列表 */
const showSelUser = ref(false)
const userList = ref([]) const userList = ref([])
const total = ref(0); const total = ref(0);
function getUserList() { function getUserList() {
...@@ -201,11 +242,20 @@ ...@@ -201,11 +242,20 @@
getUserList() getUserList()
// 分配报表 // 分配报表
const openDataScope = ref(false);
function handleAuthRole(row) { function handleAuthRole(row) {
console.log('分配报表', row) console.log('分配报表', row)
openDataScope.value = true; showSelUser.value = true;
}
// 获取积木报表列表
const reportFolderList = ref([])
function getReportFolderList() {
getReportFolderListAPI().then(res => {
console.log('报表', res)
reportFolderList.value = res.data;
})
} }
getReportFolderList()
/** 数据范围选项*/ /** 数据范围选项*/
const dataScopeOptions = ref([ const dataScopeOptions = ref([
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论