mirror of
https://gitee.com/beijing_hongye_huicheng/lilishop-ui.git
synced 2026-11-11 03:18:56 +08:00
升级Vue3，iView替换ElementPlus
- 删除babel配置、更新依赖与入口初始化 - 全量替换UI组件、样式适配，新增迁移文档与标签/过滤器自动化替换脚本
This commit is contained in:
lifenlong
@@ -1,158 +1,177 @@
|
||||
<template>
|
||||
<div class="search">
|
||||
<Card>
|
||||
<Form ref="searchForm" :model="searchForm" inline :label-width="70" class="search-form">
|
||||
<Form-item label="店员名称">
|
||||
<Input
|
||||
<el-card>
|
||||
<el-form ref="searchForm" :model="searchForm" inline label-width="70px" class="search-form">
|
||||
<el-form-item label="店员名称">
|
||||
<el-input
|
||||
type="text"
|
||||
v-model="searchForm.clerkName"
|
||||
placeholder="请输入店员名称"
|
||||
clearable
|
||||
style="width: 240px"
|
||||
/>
|
||||
</Form-item>
|
||||
<Form-item label="联系方式">
|
||||
<Input
|
||||
</el-form-item>
|
||||
<el-form-item label="联系方式">
|
||||
<el-input
|
||||
type="text"
|
||||
v-model="searchForm.mobile"
|
||||
placeholder="请输入联系方式"
|
||||
clearable
|
||||
style="width: 240px"
|
||||
/>
|
||||
</Form-item>
|
||||
<Form-item label="部门">
|
||||
<department-choose @on-change="handleSelectDep" style="width: 150px;" ref="dep"></department-choose>
|
||||
</Form-item>
|
||||
<Button @click="handleSearch" type="primary" icon="ios-search" class="search-btn">搜索</Button>
|
||||
</Form>
|
||||
</Card>
|
||||
<Card>
|
||||
<Row class="operation padding-row">
|
||||
<Button @click="add" type="primary">添加</Button>
|
||||
<Button @click="delAll">批量删除</Button>
|
||||
<Button @click="resetPass">重置密码</Button>
|
||||
</Row>
|
||||
</el-form-item>
|
||||
<el-form-item label="部门">
|
||||
<department-choose @change="handleSelectDep" style="width: 150px;" ref="dep"></department-choose>
|
||||
</el-form-item>
|
||||
<el-button type="primary" class="search-btn" @click="handleSearch">
|
||||
<el-icon><Search /></el-icon>
|
||||
搜索
|
||||
</el-button>
|
||||
</el-form>
|
||||
</el-card>
|
||||
<el-card>
|
||||
<div class="operation padding-row">
|
||||
<el-button @click="add" type="primary">添加</el-button>
|
||||
<el-button @click="delAll">批量删除</el-button>
|
||||
<el-button @click="resetPass">重置密码</el-button>
|
||||
</div>
|
||||
<br>
|
||||
<Table
|
||||
:loading="loading"
|
||||
border
|
||||
:columns="columns"
|
||||
:data="data"
|
||||
sortable="custom"
|
||||
@on-sort-change="changeSort"
|
||||
@on-selection-change="showSelect"
|
||||
<el-table
|
||||
ref="table"
|
||||
></Table>
|
||||
<Row type="flex" justify="end" class="mt_10">
|
||||
<Page
|
||||
:current="searchForm.pageNumber"
|
||||
v-loading="loading"
|
||||
border
|
||||
:data="data"
|
||||
style="width: 100%"
|
||||
@selection-change="showSelect"
|
||||
@sort-change="changeSort"
|
||||
>
|
||||
<el-table-column type="selection" width="60" align="center" fixed="left" />
|
||||
<el-table-column prop="clerkName" label="店员名称" min-width="100" sortable="custom" fixed="left" />
|
||||
<el-table-column prop="mobile" label="手机号码" min-width="100" fixed="left" />
|
||||
<el-table-column label="店主" width="130" align="center">
|
||||
<template #default="{ row }">
|
||||
<el-tag :type="row.shopkeeper ? 'success' : 'danger'">{{ row.shopkeeper ? "是" : "否" }}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="超级管理员" width="130" align="center">
|
||||
<template #default="{ row }">
|
||||
<el-tag :type="row.isSuper ? 'success' : 'danger'">{{ row.isSuper ? "是" : "否" }}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="状态" width="130" align="center">
|
||||
<template #default="{ row }">
|
||||
<el-tag :type="row.status ? 'success' : 'danger'">{{ row.status ? "启用" : "禁用" }}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="createTime" label="创建时间" width="180" sortable="custom" />
|
||||
<el-table-column label="操作" width="200" align="center" fixed="right">
|
||||
<template #default="{ row }">
|
||||
<a class="link-text" @click="edit(row)">编辑</a>
|
||||
<span class="op-split">|</span>
|
||||
<a class="link-text" @click="row.status ? disable(row) : enable(row)">
|
||||
{{ row.status ? "禁用" : "启用" }}
|
||||
</a>
|
||||
<span class="op-split">|</span>
|
||||
<a class="link-text" @click="remove(row)">删除</a>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div class="mt_10" style="display: flex; justify-content: flex-end">
|
||||
<el-pagination
|
||||
v-model:current-page="searchForm.pageNumber"
|
||||
v-model:page-size="searchForm.pageSize"
|
||||
:page-sizes="[10, 20, 50]"
|
||||
:total="total"
|
||||
:page-size="searchForm.pageSize"
|
||||
@on-change="changePage"
|
||||
@on-page-size-change="changePageSize"
|
||||
:page-size-opts="[10,20,50]"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
size="small"
|
||||
show-total
|
||||
show-elevator
|
||||
show-sizer
|
||||
></Page>
|
||||
</Row>
|
||||
</Card>
|
||||
@current-change="changePage"
|
||||
@size-change="changePageSize"
|
||||
/>
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
<Modal
|
||||
<el-dialog
|
||||
:title="modalTitle"
|
||||
v-model="userEditModalVisible"
|
||||
:mask-closable="false"
|
||||
:width="500"
|
||||
:styles="{top: '30px'}"
|
||||
:close-on-click-modal="false"
|
||||
width="500px"
|
||||
top="30px"
|
||||
>
|
||||
<Form ref="form" :model="editForm" :label-width="80" :rules="formValidate">
|
||||
<FormItem label="手机号">
|
||||
<Input v-model="mobile" disabled/>
|
||||
</FormItem>
|
||||
<FormItem label="店员名称">
|
||||
<Input v-model="clerkName" disabled/>
|
||||
</FormItem>
|
||||
<FormItem label="超级管理员" prop="isSuper">
|
||||
<RadioGroup type="button" button-style="solid" v-model="editForm.isSuper">
|
||||
<Radio :label="1">
|
||||
<span>是</span>
|
||||
</Radio>
|
||||
<Radio :label="0">
|
||||
<span>否</span>
|
||||
</Radio>
|
||||
</RadioGroup>
|
||||
</FormItem>
|
||||
<el-form ref="form" :model="editForm" label-width="80px" :rules="formValidate">
|
||||
<el-form-item label="手机号">
|
||||
<el-input v-model="mobile" disabled/>
|
||||
</el-form-item>
|
||||
<el-form-item label="店员名称">
|
||||
<el-input v-model="clerkName" disabled/>
|
||||
</el-form-item>
|
||||
<el-form-item label="超级管理员" prop="isSuper">
|
||||
<el-radio-group v-model="editForm.isSuper">
|
||||
<el-radio-button value="1">是</el-radio-button>
|
||||
<el-radio-button value="0">否</el-radio-button>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
|
||||
<FormItem label="角色" prop="roles" v-if="editForm.isSuper == 0">
|
||||
<Select v-model="editForm.roles" multiple>
|
||||
<Option v-for="item in roleList" :value="item.id" :key="item.id" :label="item.name">
|
||||
<el-form-item label="角色" prop="roles" v-if="editForm.isSuper == 0">
|
||||
<el-select v-model="editForm.roles" multiple>
|
||||
<el-option v-for="item in roleList" :key="item.id" :label="item.name" :value="item.id" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="所属部门">
|
||||
<department-tree-choose @change="handleEditSelectDepTree" ref="depTree"></department-tree-choose>
|
||||
</el-form-item>
|
||||
|
||||
</Option>
|
||||
</Select>
|
||||
</FormItem>
|
||||
<Form-item label="所属部门">
|
||||
<department-tree-choose @on-change="handleEditSelectDepTree" ref="depTree"></department-tree-choose>
|
||||
</Form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<el-button @click="userEditModalVisible = false">取消</el-button>
|
||||
<el-button type="primary" :loading="submitLoading" @click="updateSubmit">提交</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
|
||||
</Form>
|
||||
<div slot="footer">
|
||||
<Button type="text" @click="userEditModalVisible = false">取消</Button>
|
||||
<Button type="primary" :loading="submitLoading" @click="updateSubmit">提交</Button>
|
||||
</div>
|
||||
</Modal>
|
||||
|
||||
<Modal
|
||||
<el-dialog
|
||||
:title="modalTitle"
|
||||
v-model="userModalVisible"
|
||||
:mask-closable="false"
|
||||
:width="500"
|
||||
:styles="{top: '30px'}"
|
||||
:close-on-click-modal="false"
|
||||
width="500px"
|
||||
top="30px"
|
||||
>
|
||||
<Form ref="form" :model="form" :label-width="80" :rules="formValidate">
|
||||
<FormItem label="手机号" prop="mobile">
|
||||
<Input placeholder="请输入要添加的会员手机号码" maxlength="11" style="width: 75%" v-model="form.mobile"
|
||||
autocomplete="off" @on-change="checkClerks"/>
|
||||
<Button v-if="!memberCheck" @click="checkClerk">校验</Button>
|
||||
<Button v-if="memberCheck" @click="checkAgainClerk">重新校验</Button>
|
||||
</FormItem>
|
||||
<FormItem v-if="newMember" label="用户名" prop="username">
|
||||
<Input v-model="form.username" autocomplete="off"/>
|
||||
</FormItem>
|
||||
<FormItem v-if="oldMember" label="用户名" prop="username">
|
||||
<Input v-model="form.username" autocomplete="off" disabled/>
|
||||
</FormItem>
|
||||
<el-form ref="form" :model="form" label-width="80px" :rules="formValidate">
|
||||
<el-form-item label="手机号" prop="mobile">
|
||||
<el-input placeholder="请输入要添加的会员手机号码" maxlength="11" style="width: 75%" v-model="form.mobile"
|
||||
autocomplete="off" @change="checkClerks"/>
|
||||
<el-button v-if="!memberCheck" @click="checkClerk">校验</el-button>
|
||||
<el-button v-if="memberCheck" @click="checkAgainClerk">重新校验</el-button>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="newMember" label="用户名" prop="username">
|
||||
<el-input v-model="form.username" autocomplete="off"/>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="oldMember" label="用户名" prop="username">
|
||||
<el-input v-model="form.username" autocomplete="off" disabled/>
|
||||
</el-form-item>
|
||||
|
||||
<FormItem label="密码" prop="password" v-if="newMember" :error="errorPass">
|
||||
<Input type="password" password v-model="form.password" autocomplete="off"/>
|
||||
</FormItem>
|
||||
<FormItem label="超级管理员" prop="isSuper" v-if="newMember || oldMember">
|
||||
<RadioGroup type="button" button-style="solid" v-model="form.isSuper">
|
||||
<Radio :label="1">
|
||||
<span>是</span>
|
||||
</Radio>
|
||||
<Radio :label="0">
|
||||
<span>否</span>
|
||||
</Radio>
|
||||
</RadioGroup>
|
||||
</FormItem>
|
||||
<FormItem label="角色" prop="roles" v-if="(oldMember || newMember) && form.isSuper == 0">
|
||||
<Select v-model="form.roles" multiple>
|
||||
<Option v-for="item in roleList" :value="item.id" :key="item.id" :label="item.name">
|
||||
<el-form-item label="密码" prop="password" v-if="newMember" :error="errorPass">
|
||||
<el-input v-model="form.password" type="password" show-password autocomplete="off" />
|
||||
</el-form-item>
|
||||
<el-form-item label="超级管理员" prop="isSuper" v-if="newMember || oldMember">
|
||||
<el-radio-group v-model="form.isSuper">
|
||||
<el-radio-button value="1">是</el-radio-button>
|
||||
<el-radio-button value="0">否</el-radio-button>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="角色" prop="roles" v-if="(oldMember || newMember) && form.isSuper == 0">
|
||||
<el-select v-model="form.roles" multiple>
|
||||
<el-option v-for="item in roleList" :key="item.id" :label="item.name" :value="item.id" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="所属部门" v-if="oldMember || newMember">
|
||||
<department-tree-choose @change="handleSelectDepTree" ref="depTree"></department-tree-choose>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
</Option>
|
||||
</Select>
|
||||
</FormItem>
|
||||
<Form-item label="所属部门" v-if="oldMember || newMember">
|
||||
<department-tree-choose @on-change="handleSelectDepTree" ref="depTree"></department-tree-choose>
|
||||
</Form-item>
|
||||
</Form>
|
||||
|
||||
<div slot="footer">
|
||||
<Button type="text" @click="userModalVisible = false">取消</Button>
|
||||
<Button type="primary" :loading="submitLoading" @click="submitUser">提交</Button>
|
||||
</div>
|
||||
</Modal>
|
||||
<template #footer>
|
||||
<el-button @click="userModalVisible = false">取消</el-button>
|
||||
<el-button type="primary" :loading="submitLoading" @click="submitUser">提交</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -169,6 +188,7 @@ import {
|
||||
getClerk
|
||||
} from "@/api/index";
|
||||
import {validateMobile} from "@/libs/validate";
|
||||
import { Search } from "@element-plus/icons-vue";
|
||||
import departmentChoose from "@/views/my-components/lili/department-choose";
|
||||
import departmentTreeChoose from "@/views/my-components/lili/department-tree-choose";
|
||||
import uploadPicInput from "@/views/my-components/lili/upload-pic-input";
|
||||
@@ -176,6 +196,7 @@ import uploadPicInput from "@/views/my-components/lili/upload-pic-input";
|
||||
export default {
|
||||
name: "clerk-manage",
|
||||
components: {
|
||||
Search,
|
||||
departmentChoose,
|
||||
departmentTreeChoose,
|
||||
uploadPicInput,
|
||||
@@ -235,211 +256,6 @@ export default {
|
||||
]
|
||||
},
|
||||
submitLoading: false, // 提交状态
|
||||
columns: [ // 表头
|
||||
{
|
||||
type: "selection",
|
||||
width: 60,
|
||||
align: "center",
|
||||
fixed: "left"
|
||||
},
|
||||
{
|
||||
title: "店员名称",
|
||||
key: "clerkName",
|
||||
minWidth: 100,
|
||||
sortable: true,
|
||||
fixed: "left"
|
||||
},
|
||||
{
|
||||
title: "手机号码",
|
||||
key: "mobile",
|
||||
minWidth: 100,
|
||||
fixed: "left"
|
||||
},
|
||||
{
|
||||
title: "店主",
|
||||
key: "status",
|
||||
align: "center",
|
||||
width: 130,
|
||||
render: (h, params) => {
|
||||
if (params.row.shopkeeper == true) {
|
||||
return h("div", [
|
||||
h("Badge", {
|
||||
props: {
|
||||
status: "success",
|
||||
text: "是"
|
||||
}
|
||||
})
|
||||
]);
|
||||
} else if (params.row.shopkeeper == false) {
|
||||
return h("div", [
|
||||
h("Badge", {
|
||||
props: {
|
||||
status: "error",
|
||||
text: "否"
|
||||
}
|
||||
})
|
||||
]);
|
||||
}
|
||||
},
|
||||
},
|
||||
{
|
||||
title: "超级管理员",
|
||||
key: "status",
|
||||
align: "center",
|
||||
width: 130,
|
||||
render: (h, params) => {
|
||||
if (params.row.isSuper == true) {
|
||||
return h("div", [
|
||||
h("Badge", {
|
||||
props: {
|
||||
status: "success",
|
||||
text: "是"
|
||||
}
|
||||
})
|
||||
]);
|
||||
} else if (params.row.isSuper == false) {
|
||||
return h("div", [
|
||||
h("Badge", {
|
||||
props: {
|
||||
status: "error",
|
||||
text: "否"
|
||||
}
|
||||
})
|
||||
]);
|
||||
}
|
||||
},
|
||||
},
|
||||
{
|
||||
title: "状态",
|
||||
key: "status",
|
||||
align: "center",
|
||||
width: 130,
|
||||
render: (h, params) => {
|
||||
if (params.row.status == true) {
|
||||
return h("div", [
|
||||
h("Badge", {
|
||||
props: {
|
||||
status: "success",
|
||||
text: "启用"
|
||||
}
|
||||
})
|
||||
]);
|
||||
} else if (params.row.status == false) {
|
||||
return h("div", [
|
||||
h("Badge", {
|
||||
props: {
|
||||
status: "error",
|
||||
text: "禁用"
|
||||
}
|
||||
})
|
||||
]);
|
||||
}
|
||||
},
|
||||
filters: [
|
||||
{
|
||||
label: "启用",
|
||||
value: true
|
||||
},
|
||||
{
|
||||
label: "禁用",
|
||||
value: false
|
||||
}
|
||||
],
|
||||
filterMultiple: false,
|
||||
filterMethod(value, row) {
|
||||
return row.status == value;
|
||||
}
|
||||
},
|
||||
{
|
||||
title: "创建时间",
|
||||
key: "createTime",
|
||||
sortable: true,
|
||||
sortType: "desc",
|
||||
width: 180
|
||||
},
|
||||
{
|
||||
title: "操作",
|
||||
key: "action",
|
||||
width: 200,
|
||||
align: "center",
|
||||
fixed: "right",
|
||||
render: (h, params) => {
|
||||
let enableOrDisable = "";
|
||||
if (params.row.status == true) {
|
||||
enableOrDisable = h(
|
||||
"a",
|
||||
{
|
||||
style: {
|
||||
color: "#2d8cf0",
|
||||
cursor: "pointer",
|
||||
textDecoration: "none",
|
||||
},
|
||||
on: {
|
||||
click: () => {
|
||||
this.disable(params.row);
|
||||
},
|
||||
},
|
||||
},
|
||||
"禁用"
|
||||
);
|
||||
} else {
|
||||
enableOrDisable = h(
|
||||
"a",
|
||||
{
|
||||
style: {
|
||||
color: "#2d8cf0",
|
||||
cursor: "pointer",
|
||||
textDecoration: "none",
|
||||
},
|
||||
on: {
|
||||
click: () => {
|
||||
this.enable(params.row);
|
||||
},
|
||||
},
|
||||
},
|
||||
"启用"
|
||||
);
|
||||
}
|
||||
return h("div", [
|
||||
h(
|
||||
"a",
|
||||
{
|
||||
style: {
|
||||
color: "#2d8cf0",
|
||||
cursor: "pointer",
|
||||
textDecoration: "none",
|
||||
},
|
||||
on: {
|
||||
click: () => {
|
||||
this.edit(params.row);
|
||||
},
|
||||
},
|
||||
},
|
||||
"编辑"
|
||||
),
|
||||
h("span", { style: { margin: "0 8px", color: "#dcdee2" } }, "|"),
|
||||
enableOrDisable,
|
||||
h("span", { style: { margin: "0 8px", color: "#dcdee2" } }, "|"),
|
||||
h(
|
||||
"a",
|
||||
{
|
||||
style: {
|
||||
color: "#2d8cf0",
|
||||
cursor: "pointer",
|
||||
textDecoration: "none",
|
||||
},
|
||||
on: {
|
||||
click: () => {
|
||||
this.remove(params.row);
|
||||
},
|
||||
},
|
||||
},
|
||||
"删除"
|
||||
),
|
||||
]);
|
||||
}
|
||||
}
|
||||
],
|
||||
data: [], // 用户数据
|
||||
total: 0, // 总数
|
||||
};
|
||||
@@ -539,11 +355,9 @@ export default {
|
||||
},
|
||||
// 排序
|
||||
changeSort(e) {
|
||||
this.searchForm.sort = e.key;
|
||||
this.searchForm.order = e.order;
|
||||
if (e.order == "normal") {
|
||||
this.searchForm.order = "";
|
||||
}
|
||||
this.searchForm.sort = e.prop;
|
||||
this.searchForm.order =
|
||||
e.order === "ascending" ? "asc" : e.order === "descending" ? "desc" : "";
|
||||
this.getUserList();
|
||||
},
|
||||
// 获取角色列表
|
||||
@@ -743,7 +557,7 @@ export default {
|
||||
},
|
||||
// 清除选中状态
|
||||
clearSelectAll() {
|
||||
this.$refs.table.selectAll(false);
|
||||
this.$refs.table?.clearSelection();
|
||||
},
|
||||
// 批量删除
|
||||
delAll() {
|
||||
|
||||
@@ -1,129 +1,108 @@
|
||||
|
||||
<template>
|
||||
<div class="search">
|
||||
<Card>
|
||||
<Row class="operation">
|
||||
<i-switch v-model="strict" size="large" style="margin-right: 5px">
|
||||
<span slot="open">级联</span>
|
||||
<span slot="close">单选</span>
|
||||
</i-switch>
|
||||
<Button @click="addRoot">添加部门</Button>
|
||||
<Button @click="add" type="primary">添加子部门</Button>
|
||||
<Button @click="delAll">批量删除</Button>
|
||||
<Button @click="getParentList">刷新</Button>
|
||||
</Row>
|
||||
<Row type="flex" justify="start">
|
||||
<Col :md="8" :lg="8" :xl="6">
|
||||
<Alert show-icon>
|
||||
<el-card>
|
||||
<el-row class="operation">
|
||||
<el-switch
|
||||
v-model="strict"
|
||||
active-text="级联"
|
||||
inactive-text="单选"
|
||||
style="margin-right: 5px"
|
||||
/>
|
||||
<el-button @click="addRoot">添加部门</el-button>
|
||||
<el-button type="primary" @click="add">添加子部门</el-button>
|
||||
<el-button @click="delAll">批量删除</el-button>
|
||||
<el-button @click="getParentList">刷新</el-button>
|
||||
</el-row>
|
||||
<el-row type="flex" justify="start">
|
||||
<el-col :md="8" :lg="8" :xl="6">
|
||||
<el-alert type="info" show-icon :closable="false">
|
||||
当前选择编辑：
|
||||
<span class="select-title">{{ editTitle }}</span>
|
||||
<a class="select-clear" v-if="form.id" @click="cancelSelect"
|
||||
>取消选择</a
|
||||
>
|
||||
</Alert>
|
||||
<div class="tree-bar" :style="{ maxHeight: maxHeight }">
|
||||
<Tree
|
||||
ref="tree"
|
||||
<a v-if="form.id" class="select-clear" @click="cancelSelect">取消选择</a>
|
||||
</el-alert>
|
||||
<div v-loading="loading" class="tree-bar" :style="{ maxHeight: maxHeight }">
|
||||
<el-tree
|
||||
ref="treeRef"
|
||||
:data="data"
|
||||
:load-data="loadData"
|
||||
lazy
|
||||
:load="loadNode"
|
||||
:props="treeProps"
|
||||
node-key="id"
|
||||
show-checkbox
|
||||
@on-check-change="changeSelect"
|
||||
@on-select-change="selectTree"
|
||||
highlight-current
|
||||
:check-strictly="!strict"
|
||||
></Tree>
|
||||
<Spin size="large" fix v-if="loading"></Spin>
|
||||
:current-node-key="currentNodeKey"
|
||||
@node-click="onNodeClick"
|
||||
@check="onCheckChange"
|
||||
/>
|
||||
</div>
|
||||
</Col>
|
||||
<Col :md="15" :lg="13" :xl="9" style="margin-left: 10px">
|
||||
<Form
|
||||
ref="form"
|
||||
:model="form"
|
||||
:label-width="100"
|
||||
:rules="formValidate"
|
||||
>
|
||||
<FormItem label="部门名称" prop="title">
|
||||
<Input v-model="form.title" />
|
||||
</FormItem>
|
||||
<FormItem label="选择角色">
|
||||
<Select
|
||||
:loading="userLoading"
|
||||
not-found-text="暂无角色"
|
||||
</el-col>
|
||||
<el-col :md="15" :lg="13" :xl="9" style="margin-left: 10px">
|
||||
<el-form ref="form" :model="form" label-width="100px" :rules="formValidate">
|
||||
<el-form-item label="部门名称" prop="title">
|
||||
<el-input v-model="form.title" />
|
||||
</el-form-item>
|
||||
<el-form-item label="选择角色">
|
||||
<el-select
|
||||
v-model="selectedRole"
|
||||
multiple
|
||||
:loading="userLoading"
|
||||
placeholder="请选择角色"
|
||||
style="width: 100%"
|
||||
>
|
||||
<Option v-for="item in users" :value="item.id" :key="item.id">{{
|
||||
item.name
|
||||
}}</Option>
|
||||
</Select>
|
||||
</FormItem>
|
||||
|
||||
<FormItem label="排序值" prop="sortOrder">
|
||||
<Tooltip
|
||||
trigger="hover"
|
||||
placement="right"
|
||||
content="值越小越靠前，支持小数"
|
||||
>
|
||||
<InputNumber
|
||||
:max="1000"
|
||||
:min="0"
|
||||
v-model="form.sortOrder"
|
||||
></InputNumber>
|
||||
</Tooltip>
|
||||
</FormItem>
|
||||
<Form-item>
|
||||
<Button
|
||||
style="margin-right: 5px"
|
||||
@click="submitEdit"
|
||||
:loading="submitLoading"
|
||||
<el-option
|
||||
v-for="item in users"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item.id"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="排序值" prop="sortOrder">
|
||||
<el-tooltip placement="right" content="值越小越靠前，支持小数">
|
||||
<el-input-number v-model="form.sortOrder" :max="1000" :min="0" />
|
||||
</el-tooltip>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button
|
||||
type="primary"
|
||||
>修改并保存</Button
|
||||
style="margin-right: 5px"
|
||||
:loading="submitLoading"
|
||||
@click="submitEdit"
|
||||
>
|
||||
<Button @click="handleReset">重置</Button>
|
||||
</Form-item>
|
||||
</Form>
|
||||
</Col>
|
||||
</Row>
|
||||
</Card>
|
||||
修改并保存
|
||||
</el-button>
|
||||
<el-button @click="handleReset">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-card>
|
||||
|
||||
<Modal
|
||||
:title="modalTitle"
|
||||
<el-dialog
|
||||
v-model="modalVisible"
|
||||
:mask-closable="false"
|
||||
:width="500"
|
||||
:title="modalTitle"
|
||||
width="500px"
|
||||
:close-on-click-modal="false"
|
||||
>
|
||||
<Form
|
||||
ref="formAdd"
|
||||
:model="formAdd"
|
||||
:label-width="85"
|
||||
:rules="formValidate"
|
||||
>
|
||||
<el-form ref="formAdd" :model="formAdd" label-width="85px" :rules="formValidate">
|
||||
<div v-if="showParent">
|
||||
<FormItem label="上级部门：">{{ form.title }}</FormItem>
|
||||
<el-form-item label="上级部门：">{{ form.title }}</el-form-item>
|
||||
</div>
|
||||
<FormItem label="部门名称" prop="title">
|
||||
<Input v-model="formAdd.title" />
|
||||
</FormItem>
|
||||
<FormItem label="排序值" prop="sortOrder">
|
||||
<Tooltip
|
||||
trigger="hover"
|
||||
placement="right"
|
||||
content="值越小越靠前，支持小数"
|
||||
>
|
||||
<InputNumber
|
||||
:max="1000"
|
||||
:min="0"
|
||||
v-model="formAdd.sortOrder"
|
||||
></InputNumber>
|
||||
</Tooltip>
|
||||
</FormItem>
|
||||
</Form>
|
||||
<div slot="footer">
|
||||
<Button type="text" @click="cancelAdd">取消</Button>
|
||||
<Button type="primary" :loading="submitLoading" @click="submitAdd"
|
||||
>提交</Button
|
||||
>
|
||||
</div>
|
||||
</Modal>
|
||||
<el-form-item label="部门名称" prop="title">
|
||||
<el-input v-model="formAdd.title" />
|
||||
</el-form-item>
|
||||
<el-form-item label="排序值" prop="sortOrder">
|
||||
<el-tooltip placement="right" content="值越小越靠前，支持小数">
|
||||
<el-input-number v-model="formAdd.sortOrder" :max="1000" :min="0" />
|
||||
</el-tooltip>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<el-button @click="cancelAdd">取消</el-button>
|
||||
<el-button type="primary" :loading="submitLoading" @click="submitAdd">提交</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -138,24 +117,31 @@ import {
|
||||
getRoleList,
|
||||
updateDepartmentRole,
|
||||
} from "@/api/index";
|
||||
|
||||
export default {
|
||||
name: "store-department-manage",
|
||||
data() {
|
||||
return {
|
||||
loading: true, // 加载状态
|
||||
maxHeight: "500px", // 最大高度
|
||||
strict: true, // 级联还是单选
|
||||
userLoading: false, // 选择角色加载状态
|
||||
loadingEdit: false, // 编辑加载状态
|
||||
modalVisible: false, // modal显隐
|
||||
selectList: [], // 已选列表
|
||||
selectCount: 0, // 已选总数
|
||||
showParent: false, // 展示父级
|
||||
modalTitle: "", // modal标题
|
||||
editTitle: "", // 编辑标题
|
||||
selectedRole: [], //选择的角色
|
||||
searchKey: "", // 搜索关键字
|
||||
form: { // 提交表单
|
||||
loading: true,
|
||||
maxHeight: "500px",
|
||||
strict: true,
|
||||
userLoading: false,
|
||||
loadingEdit: false,
|
||||
modalVisible: false,
|
||||
selectList: [],
|
||||
selectCount: 0,
|
||||
showParent: false,
|
||||
modalTitle: "",
|
||||
editTitle: "",
|
||||
selectedRole: [],
|
||||
searchKey: "",
|
||||
currentNodeKey: null,
|
||||
treeProps: {
|
||||
label: "title",
|
||||
children: "children",
|
||||
isLeaf: "isLeaf",
|
||||
},
|
||||
form: {
|
||||
id: "",
|
||||
title: "",
|
||||
parentId: "",
|
||||
@@ -163,9 +149,8 @@ export default {
|
||||
sortOrder: 0,
|
||||
status: 0,
|
||||
},
|
||||
|
||||
formAdd: {}, // 新增表单
|
||||
formValidate: { // 验证规则
|
||||
formAdd: {},
|
||||
formValidate: {
|
||||
title: [{ required: true, message: "名称不能为空", trigger: "blur" }],
|
||||
sortOrder: [
|
||||
{
|
||||
@@ -176,113 +161,120 @@ export default {
|
||||
},
|
||||
],
|
||||
},
|
||||
submitLoading: false, // 提交loading
|
||||
data: [], // 部门数据
|
||||
dataEdit: [], // 编辑时部门数据
|
||||
users: [], // 用户
|
||||
submitLoading: false,
|
||||
data: [],
|
||||
dataEdit: [],
|
||||
users: [],
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
init() {
|
||||
this.getParentList();
|
||||
},
|
||||
// 获取部门数据
|
||||
getParentList() {
|
||||
this.loading = true;
|
||||
initDepartment().then((res) => {
|
||||
this.loading = false;
|
||||
if (res.success) {
|
||||
this.data = res.result;
|
||||
this.data = this.bubbleSort(res.result);
|
||||
}
|
||||
});
|
||||
},
|
||||
// 动态加载二级数据
|
||||
loadData(item, callback) {
|
||||
loadDepartment(item.id).then((res) => {
|
||||
loadNode(node, resolve) {
|
||||
const id = node.data?.id;
|
||||
if (id === undefined || id === null) {
|
||||
resolve([]);
|
||||
return;
|
||||
}
|
||||
loadDepartment(id).then((res) => {
|
||||
this.loadingEdit = false;
|
||||
if (res.success) {
|
||||
|
||||
callback(res.result);
|
||||
resolve(res.result || []);
|
||||
} else {
|
||||
resolve([]);
|
||||
}
|
||||
});
|
||||
},
|
||||
onNodeClick(data) {
|
||||
if (!data) {
|
||||
this.cancelSelect();
|
||||
return;
|
||||
}
|
||||
const row = JSON.parse(JSON.stringify(data));
|
||||
for (const attr in row) {
|
||||
if (row[attr] == null) {
|
||||
row[attr] = "";
|
||||
}
|
||||
}
|
||||
this.editTitle = row.title;
|
||||
this.currentNodeKey = row.id;
|
||||
this.userLoading = true;
|
||||
|
||||
// 点击树
|
||||
selectTree(v) {
|
||||
if (v.length > 0) {
|
||||
// 转换null为""
|
||||
for (let attr in v[0]) {
|
||||
if (v[0][attr] == null) {
|
||||
v[0][attr] = "";
|
||||
getUserByDepartmentId(row.id).then((res) => {
|
||||
const way = [];
|
||||
res.result &&
|
||||
res.result.forEach((item) => {
|
||||
way.push(item.roleId);
|
||||
});
|
||||
this.selectedRole = way;
|
||||
});
|
||||
|
||||
getRoleList({
|
||||
pageNumber: 1,
|
||||
pageSize: 10000,
|
||||
}).then((res) => {
|
||||
this.userLoading = false;
|
||||
if (res.success) {
|
||||
this.users = res.result.records;
|
||||
this.form = row;
|
||||
}
|
||||
});
|
||||
},
|
||||
onCheckChange(_data, { checkedNodes }) {
|
||||
this.selectList = checkedNodes;
|
||||
this.selectCount = checkedNodes.length;
|
||||
},
|
||||
bubbleSort(array) {
|
||||
const len = array.length;
|
||||
if (len < 2) return array;
|
||||
for (let i = 0; i < len; i++) {
|
||||
for (let j = 0; j < i; j++) {
|
||||
if (array[j].sortOrder > array[i].sortOrder) {
|
||||
const temp = array[j];
|
||||
array[j] = array[i];
|
||||
array[i] = temp;
|
||||
}
|
||||
}
|
||||
let str = JSON.stringify(v[0]);
|
||||
let data = JSON.parse(str);
|
||||
|
||||
this.editTitle = data.title;
|
||||
// 加载部门用户数据
|
||||
this.userLoading = true;
|
||||
|
||||
getUserByDepartmentId(data.id).then((res) => {
|
||||
let way =[]
|
||||
res.result && res.result.forEach((item) => {
|
||||
way.push(item.roleId)
|
||||
})
|
||||
this.$set(this,'selectedRole',way)
|
||||
|
||||
});
|
||||
|
||||
getRoleList({
|
||||
pageNumber: 1,
|
||||
pageSize: 10000,
|
||||
}).then((res) => {
|
||||
this.userLoading = false;
|
||||
if (res.success) {
|
||||
this.users = res.result.records;
|
||||
// 回显
|
||||
this.form = data;
|
||||
}
|
||||
});
|
||||
} else {
|
||||
this.cancelSelect();
|
||||
}
|
||||
return array;
|
||||
},
|
||||
// 取消选择
|
||||
cancelSelect() {
|
||||
let data = this.$refs.tree.getSelectedNodes()[0];
|
||||
if (data) {
|
||||
data.selected = false;
|
||||
}
|
||||
this.$refs.treeRef?.setCurrentKey(null);
|
||||
this.currentNodeKey = null;
|
||||
this.$refs.form.resetFields();
|
||||
delete this.form.id;
|
||||
this.editTitle = "";
|
||||
this.selectedRole = [];
|
||||
},
|
||||
// 选择上级部门
|
||||
selectTreeEdit(v) {
|
||||
|
||||
if (v.length > 0) {
|
||||
// 转换null为""
|
||||
for (let attr in v[0]) {
|
||||
for (const attr in v[0]) {
|
||||
if (v[0][attr] == null) {
|
||||
v[0][attr] = "";
|
||||
}
|
||||
}
|
||||
let str = JSON.stringify(v[0]);
|
||||
let data = JSON.parse(str);
|
||||
const data = JSON.parse(JSON.stringify(v[0]));
|
||||
this.form.parentId = data.id;
|
||||
this.form.parentTitle = data.title;
|
||||
}
|
||||
},
|
||||
// 取消添加部门
|
||||
cancelAdd() {
|
||||
this.modalVisible = false;
|
||||
},
|
||||
// 重置表单
|
||||
handleReset() {
|
||||
this.$refs.form.resetFields();
|
||||
this.form.status = 0;
|
||||
},
|
||||
// 提交表单
|
||||
submitEdit() {
|
||||
this.$refs.form.validate((valid) => {
|
||||
if (valid) {
|
||||
@@ -290,20 +282,18 @@ export default {
|
||||
this.$Message.warning("请先点击选择要修改的部门");
|
||||
return;
|
||||
}
|
||||
let roleWay = [];
|
||||
const roleWay = [];
|
||||
this.selectedRole.forEach((item) => {
|
||||
let role = {
|
||||
roleWay.push({
|
||||
departmentId: this.form.id,
|
||||
roleId: item,
|
||||
};
|
||||
roleWay.push(role);
|
||||
});
|
||||
});
|
||||
|
||||
Promise.all([
|
||||
editDepartment(this.form.id, this.form),
|
||||
updateDepartmentRole(this.form.id, roleWay)
|
||||
updateDepartmentRole(this.form.id, roleWay),
|
||||
]).then((res) => {
|
||||
|
||||
this.submitLoading = false;
|
||||
if (res[0].success) {
|
||||
this.$Message.success("编辑成功");
|
||||
@@ -314,7 +304,6 @@ export default {
|
||||
}
|
||||
});
|
||||
},
|
||||
// 确认添加部门
|
||||
submitAdd() {
|
||||
this.$refs.formAdd.validate((valid) => {
|
||||
if (valid) {
|
||||
@@ -330,7 +319,6 @@ export default {
|
||||
}
|
||||
});
|
||||
},
|
||||
// 添加子部门
|
||||
add() {
|
||||
if (this.form.id == "" || this.form.id == null) {
|
||||
this.$Message.warning("请先点击选择一个部门");
|
||||
@@ -338,7 +326,6 @@ export default {
|
||||
}
|
||||
this.modalTitle = "添加子部门";
|
||||
this.showParent = true;
|
||||
|
||||
this.formAdd = {
|
||||
parentId: this.form.id,
|
||||
sortOrder: 0,
|
||||
@@ -346,7 +333,6 @@ export default {
|
||||
};
|
||||
this.modalVisible = true;
|
||||
},
|
||||
// 添加一级部门
|
||||
addRoot() {
|
||||
this.modalTitle = "添加一级部门";
|
||||
this.showParent = false;
|
||||
@@ -357,13 +343,6 @@ export default {
|
||||
};
|
||||
this.modalVisible = true;
|
||||
},
|
||||
// 选中回调
|
||||
changeSelect(v) {
|
||||
|
||||
this.selectCount = v.length;
|
||||
this.selectList = v;
|
||||
},
|
||||
// 批量删除部门
|
||||
delAll() {
|
||||
if (this.selectCount <= 0) {
|
||||
this.$Message.warning("您还未勾选要删除的数据");
|
||||
@@ -395,14 +374,13 @@ export default {
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
// 计算高度
|
||||
let height = document.documentElement.clientHeight;
|
||||
const height = document.documentElement.clientHeight;
|
||||
this.maxHeight = Number(height - 287) + "px";
|
||||
this.init();
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "@/styles/tree-common.scss";
|
||||
|
||||
</style>
|
||||
|
||||
@@ -1,77 +1,141 @@
|
||||
<template>
|
||||
<div class="search">
|
||||
<Card>
|
||||
<Row class="operation">
|
||||
<Button @click="addRole" type="primary">添加角色</Button>
|
||||
<Button @click="delAll">批量删除</Button>
|
||||
</Row>
|
||||
<br>
|
||||
<Table :loading="loading" border :columns="columns" :data="data" ref="table" sortable="custom" @on-sort-change="changeSort" @on-selection-change="changeSelect"></Table>
|
||||
<Row type="flex" justify="end" class="mt_10">
|
||||
<Page :current="pageNumber" :total="total" :page-size="pageSize" @on-change="changePage" @on-page-size-change="changePageSize" :page-size-opts="[10, 20, 50]" size="small" show-total
|
||||
show-elevator show-sizer></Page>
|
||||
</Row>
|
||||
</Card>
|
||||
|
||||
<!-- 编辑 -->
|
||||
<Modal :title="modalTitle" v-model="roleModalVisible" :mask-closable="false" :width="500">
|
||||
<Form ref="roleForm" :model="roleForm" :label-width="80" :rules="roleFormValidate">
|
||||
<FormItem label="角色名称" prop="name">
|
||||
<Input v-model="roleForm.name" />
|
||||
</FormItem>
|
||||
<FormItem label="备注" prop="description">
|
||||
<Input v-model="roleForm.description" />
|
||||
</FormItem>
|
||||
</Form>
|
||||
<div slot="footer">
|
||||
<Button type="text" @click="roleModalVisible = false">取消</Button>
|
||||
<Button type="primary" :loading="submitLoading" @click="submitRole">提交
|
||||
</Button>
|
||||
<el-card>
|
||||
<div class="operation padding-row">
|
||||
<el-button type="primary" @click="addRole">添加角色</el-button>
|
||||
<el-button @click="delAll">批量删除</el-button>
|
||||
</div>
|
||||
</Modal>
|
||||
<!-- 菜单权限 -->
|
||||
<Modal :title="modalTitle" v-model="permModalVisible" :mask-closable="false" :width="500" :styles="{ top: '30px' }" class="permModal">
|
||||
<div style="position: relative">
|
||||
<Tree ref="tree" :data="permData" show-checkbox :render="renderContent">
|
||||
</Tree>
|
||||
<Spin size="large" fix v-if="treeLoading"></Spin>
|
||||
</div>
|
||||
<div slot="footer">
|
||||
<Button type="text" @click="permModalVisible = false">取消</Button>
|
||||
<Select v-model="openLevel" @on-change="changeOpen" style="width: 110px; text-align: left; margin-right: 10px">
|
||||
<Option value="0">展开所有</Option>
|
||||
<Option value="1">收合所有</Option>
|
||||
<Option value="2">仅展开一级</Option>
|
||||
<Option value="3">仅展开两级</Option>
|
||||
</Select>
|
||||
<Button type="primary" :loading="submitPermLoading" @click="submitPermEdit()">编辑
|
||||
</Button>
|
||||
</div>
|
||||
</Modal>
|
||||
|
||||
<el-table
|
||||
ref="table"
|
||||
v-loading="loading"
|
||||
border
|
||||
:data="data"
|
||||
style="width: 100%"
|
||||
row-key="id"
|
||||
@selection-change="changeSelect"
|
||||
@sort-change="changeSort"
|
||||
>
|
||||
<el-table-column type="selection" width="60" align="center" />
|
||||
<el-table-column prop="name" label="角色名称" min-width="150" />
|
||||
<el-table-column prop="description" label="备注" min-width="150" show-overflow-tooltip />
|
||||
<el-table-column prop="createTime" label="创建时间" width="170" sortable="custom" />
|
||||
<el-table-column prop="updateTime" label="更新时间" width="170" sortable="custom" />
|
||||
<el-table-column prop="createBy" label="最后操作人" width="150" />
|
||||
<el-table-column label="操作" width="230" align="center" fixed="right">
|
||||
<template #default="{ row }">
|
||||
<div v-if="row" class="ops">
|
||||
<a class="link-text" @click="editPerm(row)">菜单权限</a>
|
||||
<span class="op-split">|</span>
|
||||
<a class="link-text" @click="edit(row)">编辑</a>
|
||||
<span class="op-split">|</span>
|
||||
<a class="link-text" @click="remove(row)">删除</a>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<!-- 保存权限弹出选择权限 -->
|
||||
<Modal width="800" v-model="selectIsSuperModel" title="选择菜单权限" :loading="superModelLoading" @on-ok="saveRole">
|
||||
<div class="mt_10" style="display: flex; justify-content: flex-end">
|
||||
<el-pagination
|
||||
v-model:current-page="pageNumber"
|
||||
v-model:page-size="pageSize"
|
||||
:page-sizes="[20, 50, 100]"
|
||||
:total="total"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
size="small"
|
||||
@current-change="changePage"
|
||||
@size-change="changePageSize"
|
||||
/>
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
<el-dialog
|
||||
v-model="roleModalVisible"
|
||||
:title="modalTitle"
|
||||
width="500px"
|
||||
:close-on-click-modal="false"
|
||||
destroy-on-close
|
||||
>
|
||||
<el-form ref="roleForm" :model="roleForm" label-width="80px" :rules="roleFormValidate">
|
||||
<el-form-item label="角色名称" prop="name">
|
||||
<el-input v-model="roleForm.name" />
|
||||
</el-form-item>
|
||||
<el-form-item label="备注" prop="description">
|
||||
<el-input v-model="roleForm.description" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<el-button @click="roleModalVisible = false">取消</el-button>
|
||||
<el-button type="primary" :loading="submitLoading" @click="submitRole">提交</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
|
||||
<el-dialog
|
||||
v-model="permModalVisible"
|
||||
:title="modalTitle"
|
||||
width="500px"
|
||||
:close-on-click-modal="false"
|
||||
class="permModal"
|
||||
top="30px"
|
||||
>
|
||||
<div v-loading="treeLoading" style="position: relative; max-height: 560px; overflow: auto">
|
||||
<el-tree
|
||||
ref="permTree"
|
||||
:key="permTreeKey"
|
||||
:data="permData"
|
||||
:props="{ label: 'title', children: 'children', disabled: 'disabled' }"
|
||||
node-key="id"
|
||||
show-checkbox
|
||||
:default-expand-all="openLevel === '0'"
|
||||
:default-expanded-keys="permExpandedKeys"
|
||||
:default-checked-keys="permCheckedKeys"
|
||||
>
|
||||
<template #default="{ data }">
|
||||
<span>{{ data.title }}</span>
|
||||
<el-tag
|
||||
v-if="data.isSuper == 1 || data.isSuper == 0"
|
||||
:type="data.isSuper == 1 ? 'danger' : 'info'"
|
||||
size="small"
|
||||
style="margin-left: 10px"
|
||||
>
|
||||
{{ data.isSuper == 1 ? "操作权限" : "查看权限" }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-tree>
|
||||
</div>
|
||||
<template #footer>
|
||||
<el-button @click="permModalVisible = false">取消</el-button>
|
||||
<el-select v-model="openLevel" style="width: 110px; margin-right: 10px" @change="changeOpen">
|
||||
<el-option value="0" label="展开所有" />
|
||||
<el-option value="1" label="收合所有" />
|
||||
<el-option value="2" label="仅展开一级" />
|
||||
<el-option value="3" label="仅展开两级" />
|
||||
</el-select>
|
||||
<el-button type="primary" :loading="submitPermLoading" @click="submitPermEdit()">编辑</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
|
||||
<el-dialog v-model="selectIsSuperModel" title="选择菜单权限" width="800px">
|
||||
<div class="btns">
|
||||
<Button type="primary" @click="setRole()" class="btn-item">一键选中·数据权限</Button>
|
||||
<Button class="btn-item" @click="setRole('onlyView')">一键选中·查看权限</Button>
|
||||
<el-button type="primary" class="btn-item" @click="setRole()">一键选中·数据权限</el-button>
|
||||
<el-button class="btn-item" @click="setRole('onlyView')">一键选中·查看权限</el-button>
|
||||
</div>
|
||||
<div class="role-list">
|
||||
<div class="role-item" v-for="(item, index) in saveRoleWay" :key="index">
|
||||
<div class="title">{{ item.title }}</div>
|
||||
<div class="content">
|
||||
<RadioGroup type="button" button-style="solid" v-model="item.isSuper">
|
||||
<Radio :label="1">
|
||||
<span>操作数据权限</span>
|
||||
</Radio>
|
||||
<Radio :label="0">
|
||||
<span>查看权限</span>
|
||||
</Radio>
|
||||
</RadioGroup>
|
||||
<el-radio-group v-model="item.isSuper">
|
||||
<el-radio-button :value="1">操作数据权限</el-radio-button>
|
||||
<el-radio-button :value="0">查看权限</el-radio-button>
|
||||
</el-radio-group>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Modal>
|
||||
<template #footer>
|
||||
<el-button @click="selectIsSuperModel = false">取消</el-button>
|
||||
<el-button type="primary" :loading="superModelLoading" @click="saveRole">确定</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -87,248 +151,74 @@ import {
|
||||
saveRoleMenu,
|
||||
} from "@/api/index";
|
||||
import util from "@/libs/util.js";
|
||||
|
||||
export default {
|
||||
name: "role-manage",
|
||||
data() {
|
||||
return {
|
||||
superModelLoading: false, //保存权限弹出选择权限保存
|
||||
selectIsSuperModel: false, //保存权限弹出选择权限
|
||||
rolePermsWay: [], //查询角色权限集合
|
||||
openLevel: "0", // 展开的级别
|
||||
loading: true, // 加载状态
|
||||
treeLoading: true, // 树加载
|
||||
depTreeLoading: true, // 部门树加载
|
||||
submitPermLoading: false, // 权限提交加载
|
||||
submitDepLoading: false, // 部门提交加载
|
||||
sortColumn: "", // 排序
|
||||
sortType: "desc", // 排序类型
|
||||
modalType: 0, // 0 添加 1 编辑
|
||||
roleModalVisible: false, // 角色modal
|
||||
permModalVisible: false, // 菜单权限modal
|
||||
depModalVisible: false, // 部门modal
|
||||
modalTitle: "", // modal标题
|
||||
superModelLoading: false,
|
||||
selectIsSuperModel: false,
|
||||
rolePermsWay: [],
|
||||
openLevel: "0",
|
||||
loading: true,
|
||||
treeLoading: true,
|
||||
depTreeLoading: true,
|
||||
submitPermLoading: false,
|
||||
submitDepLoading: false,
|
||||
sortColumn: "",
|
||||
sortType: "desc",
|
||||
modalType: 0,
|
||||
roleModalVisible: false,
|
||||
permModalVisible: false,
|
||||
depModalVisible: false,
|
||||
modalTitle: "",
|
||||
roleForm: {
|
||||
// 角色表单
|
||||
name: "",
|
||||
description: "",
|
||||
},
|
||||
roleFormValidate: {
|
||||
// 验证规则
|
||||
name: [
|
||||
{ required: true, message: "角色名称不能为空", trigger: "blur" },
|
||||
],
|
||||
name: [{ required: true, message: "角色名称不能为空", trigger: "blur" }],
|
||||
},
|
||||
submitLoading: false, // 提交loading
|
||||
selectList: [], // 已选列表
|
||||
selectCount: 0, // 已选总数
|
||||
columns: [
|
||||
// 表头
|
||||
{
|
||||
type: "selection",
|
||||
width: 60,
|
||||
align: "center",
|
||||
},
|
||||
{
|
||||
title: "角色名称",
|
||||
key: "name",
|
||||
minWidth: 150,
|
||||
},
|
||||
{
|
||||
title: "备注",
|
||||
key: "description",
|
||||
minWidth: 150,
|
||||
tooltip: true,
|
||||
},
|
||||
{
|
||||
title: "创建时间",
|
||||
key: "createTime",
|
||||
width: 170,
|
||||
sortable: true,
|
||||
sortType: "desc",
|
||||
},
|
||||
{
|
||||
title: "更新时间",
|
||||
key: "updateTime",
|
||||
width: 170,
|
||||
sortable: true,
|
||||
},
|
||||
{
|
||||
title: "最后操作人",
|
||||
key: "createBy",
|
||||
width: 150,
|
||||
},
|
||||
{
|
||||
title: "操作",
|
||||
key: "action",
|
||||
align: "center",
|
||||
fixed: "right",
|
||||
width: 230,
|
||||
render: (h, params) => {
|
||||
return h("div", [
|
||||
h(
|
||||
"a",
|
||||
{
|
||||
style: {
|
||||
color: "#2d8cf0",
|
||||
cursor: "pointer",
|
||||
textDecoration: "none",
|
||||
},
|
||||
on: {
|
||||
click: () => {
|
||||
this.editPerm(params.row);
|
||||
},
|
||||
},
|
||||
},
|
||||
"菜单权限"
|
||||
),
|
||||
h("span", { style: { margin: "0 8px", color: "#dcdee2" } }, "|"),
|
||||
h(
|
||||
"a",
|
||||
{
|
||||
style: {
|
||||
color: "#2d8cf0",
|
||||
cursor: "pointer",
|
||||
textDecoration: "none",
|
||||
},
|
||||
on: {
|
||||
click: () => {
|
||||
this.edit(params.row);
|
||||
},
|
||||
},
|
||||
},
|
||||
"编辑"
|
||||
),
|
||||
h("span", { style: { margin: "0 8px", color: "#dcdee2" } }, "|"),
|
||||
h(
|
||||
"a",
|
||||
{
|
||||
style: {
|
||||
color: "#2d8cf0",
|
||||
cursor: "pointer",
|
||||
textDecoration: "none",
|
||||
},
|
||||
on: {
|
||||
click: () => {
|
||||
this.remove(params.row);
|
||||
},
|
||||
},
|
||||
},
|
||||
"删除"
|
||||
),
|
||||
]);
|
||||
},
|
||||
},
|
||||
],
|
||||
data: [], // 角色数据
|
||||
pageNumber: 1, // 页数
|
||||
pageSize: 10, // 每页数量
|
||||
total: 0, // 总数
|
||||
permData: [], // 菜单权限数据
|
||||
editRolePermId: "", // 编辑权限id
|
||||
selectAllFlag: false, // 全选标识
|
||||
depData: [], // 部门数据
|
||||
dataType: 0, // 数据类型
|
||||
editDepartments: [], // 编辑部门
|
||||
|
||||
saveRoleWay: [], //用户保存用户点击的菜单
|
||||
submitLoading: false,
|
||||
selectList: [],
|
||||
selectCount: 0,
|
||||
data: [],
|
||||
pageNumber: 1,
|
||||
pageSize: 20,
|
||||
total: 0,
|
||||
permData: [],
|
||||
editRolePermId: "",
|
||||
selectAllFlag: false,
|
||||
depData: [],
|
||||
dataType: 0,
|
||||
editDepartments: [],
|
||||
saveRoleWay: [],
|
||||
permTreeKey: 0,
|
||||
permCheckedKeys: [],
|
||||
permExpandedKeys: [],
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
// 初始化数据
|
||||
init() {
|
||||
this.getRoleList();
|
||||
// 获取所有菜单权限树
|
||||
this.getPermList();
|
||||
},
|
||||
// 渲染部门前icon
|
||||
renderContent(h, { root, node, data }) {
|
||||
let icon = "";
|
||||
if (data.level == 0) {
|
||||
icon = "ios-navigate";
|
||||
} else if (data.level == 1) {
|
||||
icon = "md-list-box";
|
||||
} else if (data.level == 2) {
|
||||
icon = "md-list";
|
||||
} else if (data.level == 3) {
|
||||
icon = "md-radio-button-on";
|
||||
} else {
|
||||
icon = "md-radio-button-off";
|
||||
}
|
||||
return h(
|
||||
"span",
|
||||
{
|
||||
style: {
|
||||
display: "inline-block",
|
||||
cursor: "pointer",
|
||||
},
|
||||
},
|
||||
[
|
||||
h("span", [
|
||||
h("Icon", {
|
||||
props: {
|
||||
type: icon,
|
||||
size: "16",
|
||||
},
|
||||
style: {
|
||||
"margin-right": "8px",
|
||||
"margin-bottom": "3px",
|
||||
},
|
||||
}),
|
||||
h("span", data.title),
|
||||
h(
|
||||
"Tag",
|
||||
{
|
||||
props: {
|
||||
color:
|
||||
data.isSuper == 1
|
||||
? "red"
|
||||
: data.isSuper == 0
|
||||
? "default"
|
||||
: "default",
|
||||
},
|
||||
style: {
|
||||
"margin-left": "10px",
|
||||
display:
|
||||
data.isSuper == 1 || data.isSuper == 0
|
||||
? "inline-block"
|
||||
: "none",
|
||||
},
|
||||
},
|
||||
data.isSuper == 1
|
||||
? "操作权限"
|
||||
: data.isSuper == 0
|
||||
? "查看权限"
|
||||
: ""
|
||||
),
|
||||
]),
|
||||
]
|
||||
);
|
||||
},
|
||||
// 分页 修改页码
|
||||
changePage(v) {
|
||||
this.pageNumber = v;
|
||||
changePage() {
|
||||
this.getRoleList();
|
||||
this.clearSelectAll();
|
||||
},
|
||||
// 分页 修改页数
|
||||
changePageSize(v) {
|
||||
changePageSize() {
|
||||
this.pageNumber = 1;
|
||||
this.pageSize = v;
|
||||
this.getRoleList();
|
||||
},
|
||||
// 变更排序方式
|
||||
changeSort(e) {
|
||||
this.sortColumn = e.key;
|
||||
this.sortType = e.order;
|
||||
if (e.order == "normal") {
|
||||
this.sortColumn = e.prop;
|
||||
this.sortType = e.order === "ascending" ? "asc" : e.order === "descending" ? "desc" : "";
|
||||
if (!e.order) {
|
||||
this.sortType = "";
|
||||
}
|
||||
this.getRoleList();
|
||||
},
|
||||
|
||||
/**
|
||||
* 设置权限
|
||||
*/
|
||||
setRole(val) {
|
||||
let enable;
|
||||
val == "onlyView" ? (enable = 0) : (enable = 1);
|
||||
@@ -336,17 +226,13 @@ export default {
|
||||
item.isSuper = enable;
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 查询所有角色
|
||||
*/
|
||||
getRoleList() {
|
||||
this.loading = true;
|
||||
let params = {
|
||||
pageNumber: this.pageNumber,
|
||||
pageSize: this.pageSize,
|
||||
sort: this.sortColumn,
|
||||
order: this.sort,
|
||||
order: this.sortType,
|
||||
};
|
||||
getRoleList(params).then((res) => {
|
||||
this.loading = false;
|
||||
@@ -356,22 +242,16 @@ export default {
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 查询菜单
|
||||
*/
|
||||
getPermList() {
|
||||
this.treeLoading = true;
|
||||
getAllPermissionList().then((res) => {
|
||||
if (res.success) {
|
||||
this.deleteDisableNode(res.result);
|
||||
this.permData = res.result;
|
||||
this.treeLoading = false;
|
||||
}
|
||||
this.treeLoading = false;
|
||||
});
|
||||
},
|
||||
// 递归标记禁用节点
|
||||
deleteDisableNode(permData) {
|
||||
let that = this;
|
||||
permData.forEach(function (e) {
|
||||
@@ -384,14 +264,11 @@ export default {
|
||||
}
|
||||
});
|
||||
},
|
||||
// 提交
|
||||
submitRole() {
|
||||
this.$refs.roleForm.validate((valid) => {
|
||||
if (valid) {
|
||||
if (this.modalType == 0) {
|
||||
// 添加
|
||||
this.submitLoading = true;
|
||||
|
||||
addRole(this.roleForm).then((res) => {
|
||||
this.submitLoading = false;
|
||||
if (res.success) {
|
||||
@@ -403,7 +280,6 @@ export default {
|
||||
} else {
|
||||
this.submitLoading = true;
|
||||
this.roleForm.roleId = this.roleForm.id;
|
||||
|
||||
editRole(this.roleForm).then((res) => {
|
||||
this.submitLoading = false;
|
||||
if (res.success) {
|
||||
@@ -416,23 +292,17 @@ export default {
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 点击添加按钮
|
||||
*/
|
||||
addRole() {
|
||||
this.modalType = 0;
|
||||
this.modalTitle = "添加角色";
|
||||
this.$refs.roleForm.resetFields();
|
||||
this.$refs.roleForm?.resetFields();
|
||||
delete this.roleForm.id;
|
||||
this.roleModalVisible = true;
|
||||
},
|
||||
// 编辑
|
||||
edit(v) {
|
||||
this.modalType = 1;
|
||||
this.modalTitle = "编辑角色";
|
||||
this.$refs.roleForm.resetFields();
|
||||
// 转换null为""
|
||||
this.$refs.roleForm?.resetFields();
|
||||
for (let attr in v) {
|
||||
if (v[attr] == null) {
|
||||
v[attr] = "";
|
||||
@@ -443,7 +313,6 @@ export default {
|
||||
this.roleForm = roleInfo;
|
||||
this.roleModalVisible = true;
|
||||
},
|
||||
// 删除
|
||||
remove(v) {
|
||||
this.$Modal.confirm({
|
||||
title: "确认删除",
|
||||
@@ -460,16 +329,13 @@ export default {
|
||||
},
|
||||
});
|
||||
},
|
||||
// 清除选中
|
||||
clearSelectAll() {
|
||||
this.$refs.table.selectAll(false);
|
||||
this.$refs.table?.clearSelection();
|
||||
},
|
||||
// 选中回调
|
||||
changeSelect(e) {
|
||||
this.selectList = e;
|
||||
this.selectCount = e.length;
|
||||
},
|
||||
// 批量删除
|
||||
delAll() {
|
||||
if (this.selectCount <= 0) {
|
||||
this.$Message.warning("您还未选择要删除的数据");
|
||||
@@ -496,23 +362,17 @@ export default {
|
||||
},
|
||||
});
|
||||
},
|
||||
|
||||
// 菜单权限
|
||||
async editPerm(v) {
|
||||
|
||||
/**
|
||||
* 点击菜单权限每次将赋值的isSuper数据给清空掉
|
||||
*/
|
||||
this.permData.map((item) => {
|
||||
item.children.length != 0
|
||||
? item.children.map((child) => {
|
||||
child.children.length != 0
|
||||
? child.children.map((kid) => {
|
||||
delete kid.isSuper;
|
||||
})
|
||||
: "";
|
||||
delete child.isSuper;
|
||||
})
|
||||
child.children.length != 0
|
||||
? child.children.map((kid) => {
|
||||
delete kid.isSuper;
|
||||
})
|
||||
: "";
|
||||
delete child.isSuper;
|
||||
})
|
||||
: "";
|
||||
delete item.isSuper;
|
||||
});
|
||||
@@ -523,98 +383,79 @@ export default {
|
||||
}
|
||||
this.editRolePermId = v.id;
|
||||
this.modalTitle = "分配 " + v.name + " 的菜单权限";
|
||||
// 匹配勾选
|
||||
let rolePerms;
|
||||
// 当前角色的菜单权限
|
||||
let res = await selectRoleMenu(v.id);
|
||||
if (res.result) {
|
||||
rolePerms = res.result;
|
||||
this.rolePermsWay = res.result;
|
||||
}
|
||||
// 递归判断子节点是否可以选中
|
||||
this.checkPermTree(this.permData, rolePerms);
|
||||
this.permCheckedKeys = this.collectCheckedKeys(this.permData, rolePerms);
|
||||
this.permExpandedKeys = this.computeExpandedKeys(this.openLevel);
|
||||
this.permTreeKey += 1;
|
||||
this.permModalVisible = true;
|
||||
},
|
||||
// 递归判断子节点
|
||||
checkPermTree(permData, rolePerms) {
|
||||
let that = this;
|
||||
|
||||
permData.forEach((p) => {
|
||||
if (that.hasPerm(p, rolePerms) && p.status != -1) {
|
||||
if (p.children && p.children.length === 0) {
|
||||
this.$set(p, "checked", true);
|
||||
collectCheckedKeys(permData, rolePerms) {
|
||||
const keys = [];
|
||||
const walk = (nodes) => {
|
||||
nodes.forEach((p) => {
|
||||
if (this.hasPerm(p, rolePerms) && p.status != -1) {
|
||||
if (p.children && p.children.length === 0) {
|
||||
keys.push(p.id);
|
||||
}
|
||||
}
|
||||
} else {
|
||||
this.$set(p, "checked", false);
|
||||
}
|
||||
if (p.children && p.children.length > 0) {
|
||||
that.checkPermTree(p.children, rolePerms);
|
||||
}
|
||||
});
|
||||
if (p.children && p.children.length > 0) {
|
||||
walk(p.children);
|
||||
}
|
||||
});
|
||||
};
|
||||
walk(permData);
|
||||
return keys;
|
||||
},
|
||||
// 判断角色拥有的权限节点勾选
|
||||
hasPerm(p, rolePerms) {
|
||||
if (!rolePerms) return false;
|
||||
let flag = false;
|
||||
for (let i = 0; i < rolePerms.length; i++) {
|
||||
if (p.id == rolePerms[i].menuId) {
|
||||
this.$set(p, "isSuper", rolePerms[i].isSuper);
|
||||
p.isSuper = rolePerms[i].isSuper;
|
||||
flag = true;
|
||||
break;
|
||||
}
|
||||
}
|
||||
if (flag) {
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
return flag;
|
||||
},
|
||||
// 递归全选节点
|
||||
selectedTreeAll(permData, select) {
|
||||
let that = this;
|
||||
permData.forEach(function (e) {
|
||||
e.checked = select;
|
||||
if (e.children && e.children.length > 0) {
|
||||
that.selectedTreeAll(e.children, select);
|
||||
}
|
||||
});
|
||||
},
|
||||
/**分配菜单权限 */
|
||||
submitPermEdit() {
|
||||
this.saveRoleWay = [];
|
||||
this.selectIsSuperModel = true; //打开选择权限
|
||||
let selectedNodes = this.$refs.tree.getCheckedAndIndeterminateNodes();
|
||||
this.selectIsSuperModel = true;
|
||||
const tree = this.$refs.permTree;
|
||||
const selectedNodes = [
|
||||
...tree.getCheckedNodes(false, true),
|
||||
];
|
||||
let way = [];
|
||||
selectedNodes.forEach((e) => {
|
||||
|
||||
let perm = {
|
||||
title: e.title,
|
||||
isSuper: e.isSuper ? e.isSuper = 1 : e.isSuper = 0 || 0,
|
||||
isSuper: e.isSuper ? (e.isSuper = 1) : (e.isSuper = 0) || 0,
|
||||
menuId: e.id,
|
||||
roleId: this.editRolePermId,
|
||||
};
|
||||
way.push(perm);
|
||||
this.$set(this,'saveRoleWay',way)
|
||||
|
||||
this.saveRoleWay = way;
|
||||
});
|
||||
|
||||
},
|
||||
|
||||
/**保存权限 */
|
||||
saveRole() {
|
||||
this.superModelLoading = true;
|
||||
saveRoleMenu(this.editRolePermId, this.saveRoleWay).then((res) => {
|
||||
this.superModelLoading = false;
|
||||
if (res.success) {
|
||||
this.$Message.success("操作成功");
|
||||
// 标记重新获取菜单数据
|
||||
this.$store.commit("setAdded", false);
|
||||
util.initRouter(this);
|
||||
this.getRoleList();
|
||||
this.permModalVisible = false;
|
||||
this.selectIsSuperModel = false;
|
||||
}
|
||||
});
|
||||
},
|
||||
// 加载数据
|
||||
loadData(item, callback) {
|
||||
loadDepartment(item.id, { openDataFilter: false }).then((res) => {
|
||||
if (res.success) {
|
||||
@@ -633,80 +474,30 @@ export default {
|
||||
}
|
||||
});
|
||||
},
|
||||
// 判断展开子节点
|
||||
expandCheckDep(v) {
|
||||
this.checkDepTree(v.children, this.editDepartments);
|
||||
},
|
||||
// 判断子节点
|
||||
checkDepTree(depData, roleDepIds) {
|
||||
let that = this;
|
||||
depData.forEach(function (p) {
|
||||
if (that.hasDepPerm(p, roleDepIds)) {
|
||||
p.checked = true;
|
||||
} else {
|
||||
p.checked = false;
|
||||
}
|
||||
});
|
||||
},
|
||||
// 树结构展开层级
|
||||
changeOpen(v) {
|
||||
if (v == "0") {
|
||||
this.permData.forEach((e) => {
|
||||
e.expand = true;
|
||||
if (e.children && e.children.length > 0) {
|
||||
e.children.forEach((c) => {
|
||||
c.expand = true;
|
||||
if (c.children && c.children.length > 0) {
|
||||
c.children.forEach(function (b) {
|
||||
b.expand = true;
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
} else if (v == "1") {
|
||||
this.permData.forEach((e) => {
|
||||
e.expand = false;
|
||||
if (e.children && e.children.length > 0) {
|
||||
e.children.forEach((c) => {
|
||||
c.expand = false;
|
||||
if (c.children && c.children.length > 0) {
|
||||
c.children.forEach(function (b) {
|
||||
b.expand = false;
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
} else if (v == "2") {
|
||||
this.permData.forEach((e) => {
|
||||
e.expand = true;
|
||||
if (e.children && e.children.length > 0) {
|
||||
e.children.forEach((c) => {
|
||||
c.expand = false;
|
||||
if (c.children && c.children.length > 0) {
|
||||
c.children.forEach(function (b) {
|
||||
b.expand = false;
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
} else if (v == "3") {
|
||||
this.permData.forEach((e) => {
|
||||
e.expand = true;
|
||||
if (e.children && e.children.length > 0) {
|
||||
e.children.forEach((c) => {
|
||||
c.expand = true;
|
||||
if (c.children && c.children.length > 0) {
|
||||
c.children.forEach(function (b) {
|
||||
b.expand = false;
|
||||
});
|
||||
}
|
||||
});
|
||||
computeExpandedKeys(level) {
|
||||
const keys = [];
|
||||
const walk = (nodes, depth) => {
|
||||
nodes.forEach((n) => {
|
||||
if (level === "0") {
|
||||
keys.push(n.id);
|
||||
} else if (level === "2" && depth < 1) {
|
||||
keys.push(n.id);
|
||||
} else if (level === "3" && depth < 2) {
|
||||
keys.push(n.id);
|
||||
}
|
||||
if (n.children && n.children.length) {
|
||||
walk(n.children, depth + 1);
|
||||
}
|
||||
});
|
||||
};
|
||||
if (level !== "1") {
|
||||
walk(this.permData, 0);
|
||||
}
|
||||
return keys;
|
||||
},
|
||||
changeOpen(v) {
|
||||
this.permExpandedKeys = this.computeExpandedKeys(v);
|
||||
this.permTreeKey += 1;
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
@@ -742,18 +533,15 @@ export default {
|
||||
.btn-item {
|
||||
margin-right: 20px;
|
||||
}
|
||||
.permModal {
|
||||
.ivu-modal-body {
|
||||
max-height: 560px;
|
||||
overflow: auto;
|
||||
}
|
||||
.ops a {
|
||||
color: #2d8cf0;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.depModal {
|
||||
.ivu-modal-body {
|
||||
max-height: 500px;
|
||||
overflow: auto;
|
||||
}
|
||||
.ops span {
|
||||
display: inline-block;
|
||||
margin: 0 8px;
|
||||
color: #dcdee2;
|
||||
}
|
||||
.tips {
|
||||
font-size: 12px;
|
||||
|
||||
Reference in New Issue
Block a user