公司管理功能完善
This commit is contained in:
BianLzhaoMin
parent
75787c5aac
commit
9704d0d055
|
|
@ -25,8 +25,14 @@ export const editCompanyAPI = (data) => {
|
|||
return request.post('/system/dept/edit', data)
|
||||
}
|
||||
/**
|
||||
* @data 编辑参数 编辑公司信息提交接口
|
||||
* @data 注销
|
||||
*/
|
||||
export const editDeptLogoutAPI = (data) => {
|
||||
return request.post('/system/dept/deptLogout', data)
|
||||
export const turnOnOffAPI = (data) => {
|
||||
return request.post('/system/dept/turnOnOff', data)
|
||||
}
|
||||
/**
|
||||
* @data 查询参数 获取地址信息
|
||||
*/
|
||||
export const getAddressListAPI = (data) => {
|
||||
return request.get('/system/address/list', { params: data })
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,27 @@
|
|||
import request from '@/utils/request'
|
||||
|
||||
/**
|
||||
* @data 新增权限模板参数 权限模板新增接口
|
||||
*/
|
||||
export const addTemplateAPI = (data) => {
|
||||
return request.post('/system/template', data)
|
||||
}
|
||||
/**
|
||||
* @data 修改权限模板参数 权限模板修改接口
|
||||
*/
|
||||
export const editTemplateAPI = (data) => {
|
||||
return request.get('/system/dept/edit', data)
|
||||
}
|
||||
/**
|
||||
* @data 查询参数 权限模板列表接口
|
||||
*/
|
||||
export const getTemplateListAPI = (data) => {
|
||||
return request.get(`/system/template/list`, { params: data })
|
||||
}
|
||||
/**
|
||||
* @data 删除参数 权限模板删除接口
|
||||
* @ids 参数
|
||||
*/
|
||||
export const deleteTemplateAPI = (data) => {
|
||||
return request.post('/system/template/delete', data)
|
||||
}
|
||||
|
|
@ -2,7 +2,7 @@
|
|||
<!-- 新增修改弹框 -->
|
||||
<div>
|
||||
<el-dialog
|
||||
width="50%"
|
||||
width="55%"
|
||||
:title="dialogTitle"
|
||||
:visible.sync="dialogVisible"
|
||||
:before-close="handleClose"
|
||||
|
|
@ -19,6 +19,76 @@
|
|||
<el-form-item label="公司名称：" prop="deptName">
|
||||
<el-input v-model="addOrEditForm.deptName" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item label="公司地址：" prop="province">
|
||||
<el-row>
|
||||
<el-col :span="6">
|
||||
<el-form-item prop="province">
|
||||
<el-select
|
||||
filterable
|
||||
clearable
|
||||
placeholder="请选择所在省"
|
||||
@change="onChangeProvince"
|
||||
v-model="addOrEditForm.province"
|
||||
style="width: 95%"
|
||||
>
|
||||
<el-option
|
||||
:key="item.code"
|
||||
:label="item.name"
|
||||
:value="item.code"
|
||||
v-for="item in provinceList"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item prop="city">
|
||||
<el-select
|
||||
filterable
|
||||
clearable
|
||||
placeholder="请选择所在市"
|
||||
@change="onChangeCity"
|
||||
v-model="addOrEditForm.city"
|
||||
style="width: 95%"
|
||||
>
|
||||
<el-option
|
||||
:key="item.code"
|
||||
:label="item.name"
|
||||
:value="item.code"
|
||||
v-for="item in cityList"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item prop="district">
|
||||
<el-select
|
||||
filterable
|
||||
clearable
|
||||
placeholder="请选择所在区/县"
|
||||
v-model="addOrEditForm.district"
|
||||
style="width: 95%"
|
||||
>
|
||||
<el-option
|
||||
:key="item.code"
|
||||
:label="item.name"
|
||||
:value="item.code"
|
||||
v-for="item in areaList"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item prop="address">
|
||||
<el-input
|
||||
clearable
|
||||
style="width: 95%"
|
||||
placeholder="请输入详细地址"
|
||||
v-model="addOrEditForm.address"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
<el-form-item label="公司简称：" prop="deptAbbreviation">
|
||||
<el-input
|
||||
v-model="addOrEditForm.deptAbbreviation"
|
||||
|
|
@ -41,10 +111,10 @@
|
|||
<el-radio-group v-model="addOrEditForm.status">
|
||||
<el-radio label="0"> 启用 </el-radio>
|
||||
<el-radio label="1"> 停用 </el-radio>
|
||||
<el-radio label="2"> 注销 </el-radio>
|
||||
<!-- <el-radio label="2"> 注销 </el-radio> -->
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<TitleTip :titleText="`基础设置`" />
|
||||
<!-- <TitleTip :titleText="`基础设置`" /> -->
|
||||
<el-form-item label="默认密码：" prop="initPassword">
|
||||
<el-input v-model="addOrEditForm.initPassword" clearable />
|
||||
</el-form-item>
|
||||
|
|
@ -106,7 +176,7 @@
|
|||
<el-form-item label="角色：" prop="roles">
|
||||
<el-input disabled v-model="addOrEditForm.roles" />
|
||||
</el-form-item>
|
||||
<el-form-item class="handle">
|
||||
<el-form-item class="handle" v-if="formType !== 1">
|
||||
<el-button
|
||||
@click="
|
||||
() => {
|
||||
|
|
@ -144,8 +214,9 @@
|
|||
<script>
|
||||
import {
|
||||
addCompanyAPI,
|
||||
getDeptDetailsAPI,
|
||||
editCompanyAPI,
|
||||
getDeptDetailsAPI,
|
||||
getAddressListAPI,
|
||||
} from '@/api/company-manage/index.js'
|
||||
import { validateNewPassword } from '@/utils/validate'
|
||||
import { getToken } from '@/utils/auth'
|
||||
|
|
@ -170,6 +241,9 @@ export default {
|
|||
uploadFileUrl: process.env.VUE_APP_BASE_API + '/file/upload',
|
||||
fileType: ['svg'],
|
||||
dialogInnerVisible: false,
|
||||
provinceList: [],
|
||||
cityList: [],
|
||||
areaList: [],
|
||||
previewUrl: '',
|
||||
headers: {
|
||||
Authorization: 'Bearer ' + getToken(),
|
||||
|
|
@ -188,6 +262,10 @@ export default {
|
|||
fileList: [],
|
||||
status: '',
|
||||
roles: '公司管理员',
|
||||
province: '',
|
||||
city: '',
|
||||
district: '',
|
||||
address: '',
|
||||
},
|
||||
addOrEditFormRef: {
|
||||
deptName: [
|
||||
|
|
@ -283,6 +361,34 @@ export default {
|
|||
trigger: 'blur',
|
||||
},
|
||||
],
|
||||
province: [
|
||||
{
|
||||
required: true,
|
||||
message: '请选择省',
|
||||
trigger: 'change',
|
||||
},
|
||||
],
|
||||
city: [
|
||||
{
|
||||
required: true,
|
||||
message: '请选择市',
|
||||
trigger: 'change',
|
||||
},
|
||||
],
|
||||
district: [
|
||||
{
|
||||
required: true,
|
||||
message: '请选择区/县',
|
||||
trigger: 'blur',
|
||||
},
|
||||
],
|
||||
address: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入详细地址',
|
||||
trigger: 'blur',
|
||||
},
|
||||
],
|
||||
},
|
||||
}
|
||||
},
|
||||
|
|
@ -306,6 +412,7 @@ export default {
|
|||
this.$refs.addOrEditFormRef.resetFields()
|
||||
this.$emit('update:formDialogVisible', false)
|
||||
},
|
||||
// 表单提交
|
||||
onSubmitForm() {
|
||||
this.$refs.addOrEditFormRef.validate(async (valid) => {
|
||||
if (valid) {
|
||||
|
|
@ -321,6 +428,10 @@ export default {
|
|||
parentId,
|
||||
userId,
|
||||
status,
|
||||
province,
|
||||
city,
|
||||
district,
|
||||
address,
|
||||
} = this.addOrEditForm
|
||||
const params = {
|
||||
deptName,
|
||||
|
|
@ -329,6 +440,10 @@ export default {
|
|||
logo,
|
||||
initPassword,
|
||||
orderNum: 200,
|
||||
province,
|
||||
city,
|
||||
district,
|
||||
address,
|
||||
sysUser: {
|
||||
nickName,
|
||||
phonenumber,
|
||||
|
|
@ -374,17 +489,19 @@ export default {
|
|||
}
|
||||
this.$modal.loading('图片正在上传，请稍候...')
|
||||
},
|
||||
// 移除
|
||||
handleRemove(file) {
|
||||
this.addOrEditForm.fileList = this.addOrEditForm.fileList.filter(
|
||||
(item) => item.uid !== file.uid,
|
||||
)
|
||||
this.addOrEditForm.logo = ''
|
||||
},
|
||||
// 预览 LOGO
|
||||
handlePreview(file) {
|
||||
this.dialogInnerVisible = true
|
||||
this.previewUrl = file.url
|
||||
},
|
||||
|
||||
// 上传成功
|
||||
handleSuccess(res) {
|
||||
if (res.code === 200) {
|
||||
this.addOrEditForm.logo = res.data.url
|
||||
|
|
@ -394,11 +511,12 @@ export default {
|
|||
}
|
||||
this.$modal.closeLoading()
|
||||
},
|
||||
// 详情时预览 LOGO
|
||||
onViewLogoImg(url) {
|
||||
this.dialogInnerVisible = true
|
||||
this.previewUrl = url
|
||||
},
|
||||
|
||||
// 设置默认LOGO
|
||||
onDefaultLogo() {
|
||||
this.addOrEditForm.fileList = [
|
||||
{
|
||||
|
|
@ -408,14 +526,32 @@ export default {
|
|||
this.addOrEditForm.logo =
|
||||
'http://36.33.26.201:17788/statics/2025/01/03/logo_20250103151123A002.svg'
|
||||
},
|
||||
// 文件个数超出
|
||||
// 文件个数超出限制
|
||||
handleExceed() {
|
||||
this.$modal.msgError(`上传的LOGO数量不能超过 1 个`)
|
||||
},
|
||||
|
||||
// 获取地址
|
||||
async getAddressListData(parentCode = 0) {
|
||||
const { data: res } = await getAddressListAPI({ parentCode })
|
||||
return res
|
||||
},
|
||||
// 获取省
|
||||
async getProvinceData() {
|
||||
this.provinceList = await this.getAddressListData()
|
||||
},
|
||||
// 省change事件
|
||||
async onChangeProvince(val) {
|
||||
this.cityList = await this.getAddressListData(val)
|
||||
},
|
||||
// 市change事件
|
||||
async onChangeCity(val) {
|
||||
this.areaList = await this.getAddressListData(val)
|
||||
},
|
||||
},
|
||||
async mounted() {
|
||||
this.getProvinceData()
|
||||
if (this.formType === 1 || this.formType === 2) {
|
||||
// console.log(this.detailsId, 'detailsId')
|
||||
const { data: res } = await getDeptDetailsAPI(this.detailsId)
|
||||
const {
|
||||
deptName,
|
||||
|
|
@ -427,8 +563,15 @@ export default {
|
|||
parentId,
|
||||
sysUser,
|
||||
status,
|
||||
province,
|
||||
city,
|
||||
district,
|
||||
address,
|
||||
} = res
|
||||
|
||||
this.cityList = await this.getAddressListData(province)
|
||||
this.areaList = await this.getAddressListData(city)
|
||||
|
||||
const { userName, nickName, userId } = sysUser
|
||||
Object.assign(this.addOrEditForm, {
|
||||
deptName,
|
||||
|
|
@ -443,6 +586,10 @@ export default {
|
|||
userName,
|
||||
nickName,
|
||||
status,
|
||||
province,
|
||||
city,
|
||||
district,
|
||||
address,
|
||||
fileList: [{ url: logo }],
|
||||
})
|
||||
}
|
||||
|
|
|
|||
|
|
@ -60,6 +60,7 @@
|
|||
<el-button
|
||||
type="text"
|
||||
icon="el-icon-chat-dot-round"
|
||||
v-if="companyInfo.delFlag == 0"
|
||||
@click="onClickButton(1)"
|
||||
>
|
||||
详情
|
||||
|
|
@ -68,23 +69,28 @@
|
|||
type="text"
|
||||
icon="el-icon-edit"
|
||||
@click="onClickButton(2)"
|
||||
v-if="companyInfo.delFlag == 0"
|
||||
>
|
||||
编辑
|
||||
</el-button>
|
||||
<el-button
|
||||
type="text"
|
||||
icon="el-icon-delete"
|
||||
:style="{
|
||||
color: companyInfo.delFlag == 0 ? '#409EFF' : '#999',
|
||||
}"
|
||||
:icon="
|
||||
companyInfo.delFlag == 0 ? 'el-icon-delete' : 'el-icon-back'
|
||||
"
|
||||
@click="onClickButton(3)"
|
||||
v-if="companyInfo.status != 2"
|
||||
>
|
||||
注销
|
||||
{{ companyInfo.delFlag == 0 ? '注销' : '撤回注销' }}
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { editDeptLogoutAPI } from '@/api/company-manage/index.js'
|
||||
import { turnOnOffAPI } from '@/api/company-manage/index.js'
|
||||
export default {
|
||||
props: {
|
||||
companyInfo: {
|
||||
|
|
@ -124,23 +130,27 @@ export default {
|
|||
if (type === 1 || type === 2) {
|
||||
this.$emit('openAddForm', type, this.companyInfo.deptId)
|
||||
} else {
|
||||
if (this.companyInfo.status == 2) {
|
||||
this.$modal.msgError('该公司已注销，无法重复注销')
|
||||
return
|
||||
}
|
||||
this.$modal
|
||||
.confirm('是否确认注销')
|
||||
.confirm(
|
||||
`是否确认${
|
||||
this.companyInfo.delFlag == 0 ? '注销' : '撤回注销'
|
||||
}`,
|
||||
)
|
||||
.then(async () => {
|
||||
// 组装参数
|
||||
const { deptId, deptName, orderNum } = this.companyInfo
|
||||
const { deptId, deptName, orderNum, delFlag } =
|
||||
this.companyInfo
|
||||
const params = {
|
||||
deptId,
|
||||
deptName,
|
||||
orderNum,
|
||||
delFlag: delFlag == 0 ? 2 : 0,
|
||||
}
|
||||
const res = await editDeptLogoutAPI(params)
|
||||
const res = await turnOnOffAPI(params)
|
||||
if (res.code === 200) {
|
||||
this.$modal.msgSuccess('注销成功')
|
||||
this.$modal.msgSuccess(
|
||||
`${delFlag == 0 ? '注销成功' : '已撤回注销'}`,
|
||||
)
|
||||
this.$emit('updateTableList')
|
||||
}
|
||||
})
|
||||
|
|
@ -156,8 +166,8 @@ export default {
|
|||
padding: 12px 10px;
|
||||
border-radius: 6px;
|
||||
background-color: #f7f8fc;
|
||||
min-height: 220px;
|
||||
max-height: 220px;
|
||||
min-height: 260px;
|
||||
max-height: 260px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
|
|
|
|||
|
|
@ -113,12 +113,12 @@ export default {
|
|||
flex-wrap: wrap;
|
||||
overflow-y: auto;
|
||||
.company-items {
|
||||
width: calc((100% - 30px) / 3);
|
||||
width: calc((100% - 60px) / 5);
|
||||
margin-right: 15px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
& .company-items:nth-child(3n) {
|
||||
& .company-items:nth-child(5n) {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,632 @@
|
|||
<template>
|
||||
<div class="app-container">
|
||||
<el-form
|
||||
:model="queryParams"
|
||||
ref="queryForm"
|
||||
size="small"
|
||||
:inline="true"
|
||||
v-show="showSearch"
|
||||
>
|
||||
<el-form-item label="模板名称" prop="roleName">
|
||||
<el-input
|
||||
v-model="queryParams.roleName"
|
||||
placeholder="请输入模板名称"
|
||||
clearable
|
||||
style="width: 240px"
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button
|
||||
type="primary"
|
||||
icon="el-icon-search"
|
||||
size="mini"
|
||||
@click="handleQuery"
|
||||
>搜索</el-button
|
||||
>
|
||||
<el-button
|
||||
icon="el-icon-refresh"
|
||||
size="mini"
|
||||
@click="resetQuery"
|
||||
>重置</el-button
|
||||
>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<el-row :gutter="10" class="mb8">
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="primary"
|
||||
plain
|
||||
icon="el-icon-plus"
|
||||
size="mini"
|
||||
@click="handleAdd"
|
||||
v-hasPermi="['system:role:add']"
|
||||
>新增
|
||||
</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="success"
|
||||
plain
|
||||
icon="el-icon-edit"
|
||||
size="mini"
|
||||
:disabled="single"
|
||||
@click="handleUpdate"
|
||||
v-hasPermi="['system:role:edit']"
|
||||
>修改
|
||||
</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="danger"
|
||||
plain
|
||||
icon="el-icon-delete"
|
||||
size="mini"
|
||||
:disabled="multiple"
|
||||
@click="handleDelete"
|
||||
v-hasPermi="['system:role:remove']"
|
||||
>删除
|
||||
</el-button>
|
||||
</el-col>
|
||||
|
||||
<right-toolbar
|
||||
:showSearch.sync="showSearch"
|
||||
@queryTable="getList"
|
||||
></right-toolbar>
|
||||
</el-row>
|
||||
|
||||
<el-table
|
||||
v-loading="loading"
|
||||
:data="roleList"
|
||||
@selection-change="handleSelectionChange"
|
||||
:selectable="checkSelectable"
|
||||
:row-class-name="getRowClassName"
|
||||
>
|
||||
<el-table-column type="selection" min-width="55" align="center" />
|
||||
<el-table-column
|
||||
label="模板编号"
|
||||
prop="roleId"
|
||||
min-width="120"
|
||||
align="center"
|
||||
/>
|
||||
<el-table-column
|
||||
label="模板名称"
|
||||
align="center"
|
||||
prop="roleName"
|
||||
:show-overflow-tooltip="true"
|
||||
min-width="150"
|
||||
/>
|
||||
|
||||
<el-table-column
|
||||
label="创建时间"
|
||||
align="center"
|
||||
prop="createTime"
|
||||
min-width="180"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span>{{ parseTime(scope.row.createTime) }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
label="操作"
|
||||
align="center"
|
||||
class-name="small-padding fixed-width"
|
||||
>
|
||||
<template
|
||||
slot-scope="scope"
|
||||
v-if="scope.row.roleId !== 1 && scope.row.isBuiltIn !== '0'"
|
||||
>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-edit"
|
||||
@click="handleUpdate(scope.row)"
|
||||
v-hasPermi="['system:role:edit']"
|
||||
>修改
|
||||
</el-button>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-delete"
|
||||
@click="handleDelete(scope.row)"
|
||||
v-hasPermi="['system:role:remove']"
|
||||
>删除
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<pagination
|
||||
v-show="total > 0"
|
||||
:total="total"
|
||||
:page.sync="queryParams.pageNum"
|
||||
:limit.sync="queryParams.pageSize"
|
||||
@pagination="getList"
|
||||
/>
|
||||
|
||||
<!-- 添加或修改角色配置对话框 -->
|
||||
<el-dialog
|
||||
:title="title"
|
||||
:visible.sync="open"
|
||||
width="500px"
|
||||
append-to-body
|
||||
>
|
||||
<el-form
|
||||
ref="form"
|
||||
:model="form"
|
||||
:rules="rules"
|
||||
label-width="100px"
|
||||
>
|
||||
<el-form-item label="模板名称" prop="roleName">
|
||||
<el-input
|
||||
v-model="form.roleName"
|
||||
placeholder="请输入角色名称"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="菜单权限">
|
||||
<el-checkbox
|
||||
v-model="menuExpand"
|
||||
@change="handleCheckedTreeExpand($event, 'menu')"
|
||||
>展开/折叠</el-checkbox
|
||||
>
|
||||
<el-checkbox
|
||||
v-model="menuNodeAll"
|
||||
@change="handleCheckedTreeNodeAll($event, 'menu')"
|
||||
>全选/全不选
|
||||
</el-checkbox>
|
||||
<el-checkbox
|
||||
v-model="form.menuCheckStrictly"
|
||||
@change="handleCheckedTreeConnect($event, 'menu')"
|
||||
>父子联动
|
||||
</el-checkbox>
|
||||
<el-tree
|
||||
class="tree-border"
|
||||
:data="menuOptions"
|
||||
show-checkbox
|
||||
ref="menu"
|
||||
node-key="id"
|
||||
:check-strictly="!form.menuCheckStrictly"
|
||||
empty-text="加载中，请稍候"
|
||||
:props="defaultProps"
|
||||
></el-tree>
|
||||
</el-form-item>
|
||||
<el-form-item label="备注">
|
||||
<el-input
|
||||
v-model="form.remark"
|
||||
type="textarea"
|
||||
placeholder="请输入内容"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="submitForm">确 定</el-button>
|
||||
<el-button @click="cancel">取 消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
listRole,
|
||||
getRole,
|
||||
delRole,
|
||||
addRole,
|
||||
updateRole,
|
||||
dataScope,
|
||||
changeRoleStatus,
|
||||
deptTreeSelect,
|
||||
} from '@/api/system/role'
|
||||
import {
|
||||
treeselect as menuTreeselect,
|
||||
roleMenuTreeselect,
|
||||
} from '@/api/system/menu'
|
||||
|
||||
export default {
|
||||
name: 'Role',
|
||||
dicts: ['sys_normal_disable'],
|
||||
data() {
|
||||
return {
|
||||
// 遮罩层
|
||||
loading: true,
|
||||
// 选中数组
|
||||
ids: [],
|
||||
// 非单个禁用
|
||||
single: true,
|
||||
// 非多个禁用
|
||||
multiple: true,
|
||||
// 显示搜索条件
|
||||
showSearch: true,
|
||||
// 总条数
|
||||
total: 0,
|
||||
// 角色表格数据
|
||||
roleList: [],
|
||||
// 弹出层标题
|
||||
title: '',
|
||||
// 是否显示弹出层
|
||||
open: false,
|
||||
// 是否显示弹出层（数据权限）
|
||||
openDataScope: false,
|
||||
menuExpand: false,
|
||||
menuNodeAll: false,
|
||||
deptExpand: true,
|
||||
deptNodeAll: false,
|
||||
// 日期范围
|
||||
dateRange: [],
|
||||
// 数据范围选项
|
||||
dataScopeOptions: [
|
||||
{
|
||||
value: '1',
|
||||
label: '全部数据权限',
|
||||
},
|
||||
{
|
||||
value: '2',
|
||||
label: '自定数据权限',
|
||||
},
|
||||
{
|
||||
value: '3',
|
||||
label: '本部门数据权限',
|
||||
},
|
||||
{
|
||||
value: '4',
|
||||
label: '本部门及以下数据权限',
|
||||
},
|
||||
{
|
||||
value: '5',
|
||||
label: '仅本人数据权限',
|
||||
},
|
||||
],
|
||||
// 菜单列表
|
||||
menuOptions: [],
|
||||
// 部门列表
|
||||
deptOptions: [],
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
roleName: undefined,
|
||||
roleKey: undefined,
|
||||
status: undefined,
|
||||
},
|
||||
// 表单参数
|
||||
form: {},
|
||||
defaultProps: {
|
||||
children: 'children',
|
||||
label: 'label',
|
||||
},
|
||||
// 表单校验
|
||||
rules: {
|
||||
roleName: [
|
||||
{
|
||||
required: true,
|
||||
message: '角色名称不能为空',
|
||||
trigger: 'blur',
|
||||
},
|
||||
],
|
||||
roleKey: [
|
||||
{
|
||||
required: true,
|
||||
message: '权限字符不能为空',
|
||||
trigger: 'blur',
|
||||
},
|
||||
],
|
||||
roleSort: [
|
||||
{
|
||||
required: true,
|
||||
message: '角色顺序不能为空',
|
||||
trigger: 'blur',
|
||||
},
|
||||
],
|
||||
},
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getList()
|
||||
},
|
||||
methods: {
|
||||
/** 查询角色列表 */
|
||||
getList() {
|
||||
this.loading = true
|
||||
listRole(this.addDateRange(this.queryParams, this.dateRange)).then(
|
||||
(response) => {
|
||||
this.roleList = response.rows
|
||||
this.total = response.total
|
||||
this.loading = false
|
||||
},
|
||||
)
|
||||
},
|
||||
/** 查询菜单树结构 */
|
||||
getMenuTreeselect() {
|
||||
menuTreeselect().then((response) => {
|
||||
this.menuOptions = response.data
|
||||
})
|
||||
},
|
||||
// 所有菜单节点数据
|
||||
getMenuAllCheckedKeys() {
|
||||
// 目前被选中的菜单节点
|
||||
let checkedKeys = this.$refs.menu.getCheckedKeys()
|
||||
// 半选中的菜单节点
|
||||
let halfCheckedKeys = this.$refs.menu.getHalfCheckedKeys()
|
||||
checkedKeys.unshift.apply(checkedKeys, halfCheckedKeys)
|
||||
return checkedKeys
|
||||
},
|
||||
// 所有部门节点数据
|
||||
getDeptAllCheckedKeys() {
|
||||
// 目前被选中的部门节点
|
||||
let checkedKeys = this.$refs.dept.getCheckedKeys()
|
||||
// 半选中的部门节点
|
||||
let halfCheckedKeys = this.$refs.dept.getHalfCheckedKeys()
|
||||
checkedKeys.unshift.apply(checkedKeys, halfCheckedKeys)
|
||||
return checkedKeys
|
||||
},
|
||||
/** 根据角色ID查询菜单树结构 */
|
||||
getRoleMenuTreeselect(roleId) {
|
||||
return roleMenuTreeselect(roleId).then((response) => {
|
||||
this.menuOptions = response.menus
|
||||
return response
|
||||
})
|
||||
},
|
||||
/** 根据角色ID查询部门树结构 */
|
||||
getDeptTree(roleId) {
|
||||
return deptTreeSelect(roleId).then((response) => {
|
||||
this.deptOptions = response.depts
|
||||
return response
|
||||
})
|
||||
},
|
||||
// 角色状态修改
|
||||
handleStatusChange(row) {
|
||||
let text = row.status === '0' ? '启用' : '停用'
|
||||
this.$modal
|
||||
.confirm('确认要"' + text + '""' + row.roleName + '"角色吗？')
|
||||
.then(function () {
|
||||
return changeRoleStatus(row.roleId, row.status)
|
||||
})
|
||||
.then(() => {
|
||||
this.$modal.msgSuccess(text + '成功')
|
||||
})
|
||||
.catch(function () {
|
||||
row.status = row.status === '0' ? '1' : '0'
|
||||
})
|
||||
},
|
||||
// 取消按钮
|
||||
cancel() {
|
||||
this.open = false
|
||||
this.reset()
|
||||
},
|
||||
// 取消按钮（数据权限）
|
||||
cancelDataScope() {
|
||||
this.openDataScope = false
|
||||
this.reset()
|
||||
},
|
||||
// 表单重置
|
||||
reset() {
|
||||
if (this.$refs.menu != undefined) {
|
||||
this.$refs.menu.setCheckedKeys([])
|
||||
}
|
||||
;(this.menuExpand = false),
|
||||
(this.menuNodeAll = false),
|
||||
(this.deptExpand = true),
|
||||
(this.deptNodeAll = false),
|
||||
(this.form = {
|
||||
roleId: undefined,
|
||||
roleName: undefined,
|
||||
roleKey: undefined,
|
||||
roleSort: 0,
|
||||
status: '0',
|
||||
menuIds: [],
|
||||
deptIds: [],
|
||||
menuCheckStrictly: true,
|
||||
deptCheckStrictly: true,
|
||||
remark: undefined,
|
||||
})
|
||||
this.resetForm('form')
|
||||
},
|
||||
/** 搜索按钮操作 */
|
||||
handleQuery() {
|
||||
this.queryParams.pageNum = 1
|
||||
this.getList()
|
||||
},
|
||||
/** 重置按钮操作 */
|
||||
resetQuery() {
|
||||
this.dateRange = []
|
||||
this.resetForm('queryForm')
|
||||
this.handleQuery()
|
||||
},
|
||||
// 多选框选中数据
|
||||
handleSelectionChange(selection) {
|
||||
// 过滤掉不可选的行（虽然界面上不可选，但为了安全起见还是过滤一次）
|
||||
const validSelection = selection.filter((row) =>
|
||||
this.checkSelectable(row),
|
||||
)
|
||||
|
||||
// 更新选中的roleId数组
|
||||
this.ids = validSelection.map((item) => item.roleId)
|
||||
// 更新单选和多选状态
|
||||
this.single = validSelection.length !== 1
|
||||
this.multiple = !validSelection.length
|
||||
},
|
||||
// 更多操作触发
|
||||
handleCommand(command, row) {
|
||||
switch (command) {
|
||||
case 'handleDataScope':
|
||||
this.handleDataScope(row)
|
||||
break
|
||||
case 'handleAuthUser':
|
||||
this.handleAuthUser(row)
|
||||
break
|
||||
default:
|
||||
break
|
||||
}
|
||||
},
|
||||
// 树权限（展开/折叠）
|
||||
handleCheckedTreeExpand(value, type) {
|
||||
if (type == 'menu') {
|
||||
let treeList = this.menuOptions
|
||||
for (let i = 0; i < treeList.length; i++) {
|
||||
this.$refs.menu.store.nodesMap[treeList[i].id].expanded =
|
||||
value
|
||||
}
|
||||
} else if (type == 'dept') {
|
||||
let treeList = this.deptOptions
|
||||
for (let i = 0; i < treeList.length; i++) {
|
||||
this.$refs.dept.store.nodesMap[treeList[i].id].expanded =
|
||||
value
|
||||
}
|
||||
}
|
||||
},
|
||||
// 树权限（全选/全不选）
|
||||
handleCheckedTreeNodeAll(value, type) {
|
||||
if (type == 'menu') {
|
||||
this.$refs.menu.setCheckedNodes(value ? this.menuOptions : [])
|
||||
} else if (type == 'dept') {
|
||||
this.$refs.dept.setCheckedNodes(value ? this.deptOptions : [])
|
||||
}
|
||||
},
|
||||
// 树权限（父子联动）
|
||||
handleCheckedTreeConnect(value, type) {
|
||||
if (type == 'menu') {
|
||||
this.form.menuCheckStrictly = value ? true : false
|
||||
} else if (type == 'dept') {
|
||||
this.form.deptCheckStrictly = value ? true : false
|
||||
}
|
||||
},
|
||||
/** 新增按钮操作 */
|
||||
handleAdd() {
|
||||
this.reset()
|
||||
this.getMenuTreeselect()
|
||||
this.open = true
|
||||
this.title = '添加权限模板'
|
||||
},
|
||||
/** 修改按钮操作 */
|
||||
handleUpdate(row) {
|
||||
this.reset()
|
||||
const roleId = row.roleId || this.ids
|
||||
const roleMenu = this.getRoleMenuTreeselect(roleId)
|
||||
getRole(roleId).then((response) => {
|
||||
this.form = response.data
|
||||
this.open = true
|
||||
this.$nextTick(() => {
|
||||
roleMenu.then((res) => {
|
||||
let checkedKeys = res.checkedKeys
|
||||
checkedKeys.forEach((v) => {
|
||||
this.$nextTick(() => {
|
||||
this.$refs.menu.setChecked(v, true, false)
|
||||
})
|
||||
})
|
||||
})
|
||||
})
|
||||
this.title = '修改角色'
|
||||
})
|
||||
},
|
||||
/** 选择角色权限范围触发 */
|
||||
dataScopeSelectChange(value) {
|
||||
if (value !== '2') {
|
||||
this.$refs.dept.setCheckedKeys([])
|
||||
}
|
||||
},
|
||||
/** 分配数据权限操作 */
|
||||
handleDataScope(row) {
|
||||
this.reset()
|
||||
const deptTreeSelect = this.getDeptTree(row.roleId)
|
||||
getRole(row.roleId).then((response) => {
|
||||
this.form = response.data
|
||||
this.openDataScope = true
|
||||
this.$nextTick(() => {
|
||||
deptTreeSelect.then((res) => {
|
||||
this.$refs.dept.setCheckedKeys(res.checkedKeys)
|
||||
})
|
||||
})
|
||||
this.title = '分配数据权限'
|
||||
})
|
||||
},
|
||||
/** 分配用户操作 */
|
||||
handleAuthUser: function (row) {
|
||||
const roleId = row.roleId
|
||||
this.$router.push('/system/role-auth/user/' + roleId)
|
||||
},
|
||||
/** 提交按钮 */
|
||||
submitForm: function () {
|
||||
this.$refs['form'].validate((valid) => {
|
||||
if (valid) {
|
||||
if (this.form.roleId != undefined) {
|
||||
this.form.menuIds = this.getMenuAllCheckedKeys()
|
||||
updateRole(this.form).then((response) => {
|
||||
this.$modal.msgSuccess('修改成功')
|
||||
this.open = false
|
||||
this.getList()
|
||||
})
|
||||
} else {
|
||||
this.form.menuIds = this.getMenuAllCheckedKeys()
|
||||
addRole(this.form).then((response) => {
|
||||
this.$modal.msgSuccess('新增成功')
|
||||
this.open = false
|
||||
this.getList()
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
/** 提交按钮（数据权限） */
|
||||
submitDataScope: function () {
|
||||
if (this.form.roleId != undefined) {
|
||||
this.form.deptIds = this.getDeptAllCheckedKeys()
|
||||
dataScope(this.form).then((response) => {
|
||||
this.$modal.msgSuccess('修改成功')
|
||||
this.openDataScope = false
|
||||
this.getList()
|
||||
})
|
||||
}
|
||||
},
|
||||
/** 删除按钮操作 */
|
||||
handleDelete(row) {
|
||||
const roleIds = row.roleId || this.ids
|
||||
this.$modal
|
||||
.confirm('是否确认删除角色编号为"' + roleIds + '"的数据项？')
|
||||
.then(function () {
|
||||
return delRole(roleIds)
|
||||
})
|
||||
.then(() => {
|
||||
this.getList()
|
||||
this.$modal.msgSuccess('删除成功')
|
||||
})
|
||||
.catch(() => {})
|
||||
},
|
||||
/** 导出按钮操作 */
|
||||
handleExport() {
|
||||
this.download(
|
||||
'system/role/export',
|
||||
{
|
||||
...this.queryParams,
|
||||
},
|
||||
`role_${new Date().getTime()}.xlsx`,
|
||||
)
|
||||
},
|
||||
// 检查行是否可选
|
||||
checkSelectable(row) {
|
||||
return !(row.roleId === 1 || row.isBuiltIn === '0')
|
||||
},
|
||||
|
||||
getRowClassName(row) {
|
||||
return !this.checkSelectable(row) ? 'disabled-row' : ''
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.disabled-row {
|
||||
background-color: #f5f7fa !important;
|
||||
color: #909399;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.disabled-row .el-checkbox__input {
|
||||
cursor: not-allowed !important;
|
||||
}
|
||||
|
||||
.disabled-row:hover td {
|
||||
background-color: #f5f7fa !important;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,118 +1,12 @@
|
|||
<template>
|
||||
<div class="app-container">
|
||||
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch">
|
||||
<el-form-item label="部门名称" prop="deptName">
|
||||
<el-input
|
||||
v-model="queryParams.deptName"
|
||||
placeholder="请输入部门名称"
|
||||
clearable
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="状态" prop="status">
|
||||
<el-select v-model="queryParams.status" placeholder="部门状态" clearable>
|
||||
<el-option
|
||||
v-for="dict in dict.type.sys_normal_disable"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
|
||||
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<el-row :gutter="10" class="mb8">
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="primary"
|
||||
plain
|
||||
icon="el-icon-plus"
|
||||
size="mini"
|
||||
@click="handleAdd"
|
||||
v-hasPermi="['system:dept:add']"
|
||||
>新增
|
||||
</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="info"
|
||||
plain
|
||||
icon="el-icon-sort"
|
||||
size="mini"
|
||||
@click="toggleExpandAll"
|
||||
>展开/折叠
|
||||
</el-button>
|
||||
</el-col>
|
||||
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
|
||||
</el-row>
|
||||
|
||||
<el-table
|
||||
v-if="refreshTable"
|
||||
v-loading="loading"
|
||||
:data="deptList"
|
||||
row-key="deptId"
|
||||
:default-expand-all="isExpandAll"
|
||||
:tree-props="{children: 'children', hasChildren: 'hasChildren'}"
|
||||
>
|
||||
<el-table-column prop="deptName" label="部门名称" min-width="260"></el-table-column>
|
||||
<el-table-column prop="orderNum" label="排序" min-width="200"></el-table-column>
|
||||
<el-table-column prop="status" label="状态" min-width="100">
|
||||
<template slot-scope="scope">
|
||||
<dict-tag :options="dict.type.sys_normal_disable" :value="scope.row.status"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="创建时间" align="center" prop="createTime" min-width="200">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ parseTime(scope.row.createTime) }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" align="center" min-width="200" class-name="small-padding fixed-width">
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-edit"
|
||||
@click="handleUpdate(scope.row)"
|
||||
v-hasPermi="['system:dept:edit']"
|
||||
>修改
|
||||
</el-button>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-plus"
|
||||
@click="handleAdd(scope.row)"
|
||||
v-hasPermi="['system:dept:add']"
|
||||
>新增
|
||||
</el-button>
|
||||
<el-button
|
||||
v-if="scope.row.parentId != 0"
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-delete"
|
||||
@click="handleDelete(scope.row)"
|
||||
v-hasPermi="['system:dept:remove']"
|
||||
>删除
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<!-- 添加或修改部门对话框 -->
|
||||
<el-dialog :title="title" :visible.sync="open" width="600px" append-to-body>
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
|
||||
<el-row>
|
||||
<el-col :span="24" v-if="form.parentId !== 0">
|
||||
<el-form-item label="上级部门" prop="parentId">
|
||||
<treeselect v-model="form.parentId" :options="deptOptions" :normalizer="normalizer" placeholder="选择上级部门" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<div class="app-container">
|
||||
<el-form
|
||||
:model="queryParams"
|
||||
ref="queryForm"
|
||||
size="small"
|
||||
:inline="true"
|
||||
v-show="showSearch"
|
||||
>
|
||||
<el-form-item label="部门名称" prop="deptName">
|
||||
<el-input
|
||||
v-model="queryParams.deptName"
|
||||
|
|
@ -240,11 +134,7 @@
|
|||
>新增
|
||||
</el-button>
|
||||
<el-button
|
||||
v-if="
|
||||
config.isAddRootCompany
|
||||
? true
|
||||
: scope.row.parentId != 0
|
||||
"
|
||||
v-if="scope.row.parentId != 0"
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-delete"
|
||||
|
|
@ -271,11 +161,7 @@
|
|||
v-model="form.parentId"
|
||||
:options="deptOptions"
|
||||
:normalizer="normalizer"
|
||||
:placeholder="
|
||||
config.isAddRootCompany
|
||||
? '选择上级部门，如果不选择则创建顶级部门'
|
||||
: '选择上级部门'
|
||||
"
|
||||
placeholder="选择上级部门"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
|
@ -406,78 +292,11 @@ import Treeselect from '@riophae/vue-treeselect'
|
|||
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
|
||||
|
||||
export default {
|
||||
name: 'Dept',
|
||||
computed: {
|
||||
config() {
|
||||
return JSON.parse(localStorage.getItem('systemConfig')) // 获取 JSON 对象
|
||||
}
|
||||
},
|
||||
dicts: ['sys_normal_disable'],
|
||||
components: { Treeselect },
|
||||
data() {
|
||||
return {
|
||||
// 遮罩层
|
||||
loading: true,
|
||||
// 显示搜索条件
|
||||
showSearch: true,
|
||||
// 表格树数据
|
||||
deptList: [],
|
||||
// 部门树选项
|
||||
deptOptions: [],
|
||||
// 弹出层标题
|
||||
title: '',
|
||||
// 是否显示弹出层
|
||||
open: false,
|
||||
// 是否展开，默认全部展开
|
||||
isExpandAll: true,
|
||||
// 重新渲染表格状态
|
||||
refreshTable: true,
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
deptName: undefined,
|
||||
status: undefined
|
||||
},
|
||||
// 表单参数
|
||||
form: {},
|
||||
// 表单校验
|
||||
rules: {
|
||||
parentId: [
|
||||
{ required: true, message: "上级部门不能为空", trigger: "blur" }
|
||||
],
|
||||
deptName: [
|
||||
{ required: true, message: '部门名称不能为空', trigger: 'blur' }
|
||||
],
|
||||
orderNum: [
|
||||
{ required: true, message: '显示排序不能为空', trigger: 'blur' }
|
||||
],
|
||||
email: [
|
||||
{
|
||||
type: 'email',
|
||||
message: '请输入正确的邮箱地址',
|
||||
trigger: ['blur', 'change']
|
||||
}
|
||||
],
|
||||
phone: [
|
||||
{
|
||||
pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
|
||||
message: '请输入正确的手机号码',
|
||||
trigger: 'blur'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getList()
|
||||
},
|
||||
methods: {
|
||||
/** 查询部门列表 */
|
||||
getList() {
|
||||
this.loading = true
|
||||
listDept(this.queryParams).then(response => {
|
||||
this.deptList = this.handleTree(response.data, 'deptId')
|
||||
this.loading = false
|
||||
})
|
||||
name: 'Dept',
|
||||
computed: {
|
||||
config() {
|
||||
return JSON.parse(localStorage.getItem('systemConfig')) // 获取 JSON 对象
|
||||
},
|
||||
},
|
||||
dicts: ['sys_normal_disable'],
|
||||
components: { Treeselect },
|
||||
|
|
@ -508,16 +327,13 @@ export default {
|
|||
form: {},
|
||||
// 表单校验
|
||||
rules: {
|
||||
parentId: JSON.parse(localStorage.getItem('systemConfig'))
|
||||
.isAddRootCompany
|
||||
? []
|
||||
: [
|
||||
{
|
||||
required: true,
|
||||
message: '上级部门不能为空',
|
||||
trigger: 'blur',
|
||||
},
|
||||
],
|
||||
parentId: [
|
||||
{
|
||||
required: true,
|
||||
message: '上级部门不能为空',
|
||||
trigger: 'blur',
|
||||
},
|
||||
],
|
||||
deptName: [
|
||||
{
|
||||
required: true,
|
||||
|
|
|
|||
|
|
@ -35,7 +35,8 @@ module.exports = {
|
|||
proxy: {
|
||||
// detail: https://cli.vuejs.org/config/#devserver-proxy
|
||||
[process.env.VUE_APP_BASE_API]: {
|
||||
target: `http://192.168.2.209:38080`,
|
||||
// target: `http://192.168.2.209:38080`,
|
||||
target: `http://192.168.2.76:38080`,
|
||||
// target: `http://192.168.0.244:18877`,
|
||||
changeOrigin: true,
|
||||
pathRewrite: {
|
||||
|
|
|
|||
Loading…
Reference in New Issue