You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
374 lines
12 KiB
374 lines
12 KiB
<template>
|
|
<div class="main-container-text">
|
|
<div class="title">角色信息</div>
|
|
<div class="header">
|
|
<el-button type="primary" plain @click="handleAddRole"><i class="el-icon-plus" />新增角色</el-button>
|
|
<div class="header-right">
|
|
<el-button icon="el-icon-delete" circle @click="handleDel" />
|
|
<el-button icon="el-icon-refresh" circle @click="handleRefresh" />
|
|
</div>
|
|
</div>
|
|
<el-table
|
|
v-loading="loading"
|
|
element-loading-text="拼命加载中"
|
|
:data="tableData"
|
|
:header-cell-style="headerStyle"
|
|
height="69vh"
|
|
@selection-change="handleSelectionChange"
|
|
>
|
|
<el-table-column
|
|
type="selection"
|
|
width="55"
|
|
align="center"
|
|
/>
|
|
<el-table-column
|
|
prop="role_code"
|
|
label="角色代码"
|
|
align="center"
|
|
/>
|
|
<el-table-column
|
|
prop="role_name"
|
|
label="角色名"
|
|
align="center"
|
|
/>
|
|
<el-table-column
|
|
show-overflow-tooltip
|
|
prop="module_name"
|
|
label="系统权限"
|
|
align="center"
|
|
/>
|
|
<el-table-column
|
|
prop="description"
|
|
label="具体描述"
|
|
align="center"
|
|
/>
|
|
<el-table-column
|
|
label="操作"
|
|
align="center"
|
|
>
|
|
<template slot-scope="scope">
|
|
<el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
<div class="my-pagination" style="text-align: center">
|
|
<el-pagination
|
|
background
|
|
layout="prev, pager, next"
|
|
:current-page.sync="page"
|
|
:total="total"
|
|
:page-size.sync="page_size"
|
|
@current-change="pageChange"
|
|
/>
|
|
</div>
|
|
<el-dialog
|
|
:close-on-click-modal="false"
|
|
:visible.sync="dialogVisible"
|
|
:title="title"
|
|
width="80%"
|
|
@close="onClose"
|
|
>
|
|
<el-row
|
|
v-loading="loadingForm"
|
|
element-loading-text="拼命加载中"
|
|
class="form-container"
|
|
:gutter="15"
|
|
destroy-on-close
|
|
@close="onClose"
|
|
>
|
|
<el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="100px">
|
|
<el-col :span="12">
|
|
<el-form-item label="角色代码" prop="role_code">
|
|
<el-input v-model="formData.role_code" placeholder="请输入角色代码" clearable :style="{width: '100%'}" />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<el-form-item label="角色名" prop="role_name">
|
|
<el-input v-model="formData.role_name" placeholder="请输入角色名" clearable :style="{width: '100%'}" />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col v-if="drug_module_idOptions.length !== 0">
|
|
<el-form-item label="试剂权限" prop="drug_module_id">
|
|
<el-checkbox-group v-model="formData.drug_module_id" size="medium">
|
|
<el-checkbox
|
|
v-for="item in drug_module_idOptions"
|
|
:key="item.module_id"
|
|
:label="item.module_id"
|
|
>{{ item.module_name }}</el-checkbox>
|
|
</el-checkbox-group>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col v-if="standard_module_idOptions.length !== 0">
|
|
<el-form-item label="危化品权限" prop="standard_module_id">
|
|
<el-checkbox-group v-model="formData.standard_module_id" size="medium">
|
|
<el-checkbox
|
|
v-for="item in standard_module_idOptions"
|
|
:key="item.module_id"
|
|
:label="item.module_id"
|
|
>{{ item.module_name }}</el-checkbox>
|
|
</el-checkbox-group>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col v-if="consumables_module_idOptions.length !== 0">
|
|
<el-form-item label="对照品权限" prop="consumables_module_id">
|
|
<el-checkbox-group v-model="formData.consumables_module_id" size="medium">
|
|
<el-checkbox
|
|
v-for="item in consumables_module_idOptions"
|
|
:key="item.module_id"
|
|
:label="item.module_id"
|
|
>{{ item.module_name }}</el-checkbox>
|
|
</el-checkbox-group>
|
|
</el-form-item>
|
|
</el-col>
|
|
<!-- <el-col v-if="instrument_module_idOptions.length !== 0">
|
|
<el-form-item label="仪器权限" prop="instrument_module_id">
|
|
<el-checkbox-group v-model="formData.instrument_module_id" size="medium">
|
|
<el-checkbox
|
|
v-for="item in instrument_module_idOptions"
|
|
:key="item.module_id"
|
|
:label="item.module_id"
|
|
>{{ item.module_name }}</el-checkbox>
|
|
</el-checkbox-group>
|
|
</el-form-item>
|
|
</el-col> -->
|
|
<el-col v-if="client_module_idOptions.length !== 0">
|
|
<el-form-item label="终端权限" prop="client_module_id">
|
|
<el-checkbox-group v-model="formData.client_module_id" size="medium">
|
|
<el-checkbox
|
|
v-for="item in client_module_idOptions"
|
|
:key="item.module_id"
|
|
:label="item.module_id"
|
|
>{{ item.module_name }}</el-checkbox>
|
|
</el-checkbox-group>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="24">
|
|
<el-form-item label="具体描述" prop="description">
|
|
<el-input
|
|
v-model="formData.description"
|
|
type="textarea"
|
|
placeholder="请输入具体描述"
|
|
:autosize="{minRows: 4, maxRows: 4}"
|
|
:style="{width: '100%'}"
|
|
/>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-form>
|
|
</el-row>
|
|
<div slot="footer" style="text-align: center">
|
|
<el-button @click="close">取消</el-button>
|
|
<el-button type="primary" @click="handelConfirm">确定</el-button>
|
|
</div>
|
|
</el-dialog>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { get_role_list, get_module_list, add_update_role, get_role_module } from '@/api/user/user'
|
|
import stringify from '@/utils/stringify'
|
|
export default {
|
|
name: 'Role',
|
|
data() {
|
|
return {
|
|
page: 1,
|
|
page_size: 15,
|
|
total: 0,
|
|
title: '',
|
|
dialogVisible: false,
|
|
loading: false,
|
|
loadingForm: false,
|
|
tableData: [{}],
|
|
headerStyle: { 'background': '#E6E6E6' },
|
|
multipleSelection: [],
|
|
formData: {
|
|
role_id: undefined,
|
|
role_code: undefined,
|
|
role_name: undefined,
|
|
// 易制毒易制爆品管理
|
|
drug_module_id: [],
|
|
// 危化品管理
|
|
standard_module_id: [],
|
|
// 对照品管理
|
|
consumables_module_id: [],
|
|
// 仪器管理
|
|
instrument_module_id: [],
|
|
// 终端管理
|
|
client_module_id: [],
|
|
description: undefined
|
|
},
|
|
rules: {
|
|
role_code: [{
|
|
required: true,
|
|
message: '请输入角色代码',
|
|
trigger: 'blur'
|
|
}],
|
|
role_name: [{
|
|
required: true,
|
|
message: '请输入角色名',
|
|
trigger: 'blur'
|
|
}],
|
|
drug_module_id: [],
|
|
client_module_id: [],
|
|
standard_module_id: [],
|
|
consumables_module_id: [],
|
|
instrument_module_id: [],
|
|
description: []
|
|
},
|
|
drug_module_idOptions: [],
|
|
client_module_idOptions: [],
|
|
standard_module_idOptions: [],
|
|
consumables_module_idOptions: [],
|
|
instrument_module_idOptions: []
|
|
}
|
|
},
|
|
created() {
|
|
this.getList()
|
|
this.getModelList()
|
|
},
|
|
methods: {
|
|
getList() {
|
|
const data = {
|
|
page: this.page,
|
|
page_size: this.page_size
|
|
}
|
|
this.loading = true
|
|
get_role_list(stringify(data)).then(res => {
|
|
this.tableData = res.data.data_list
|
|
this.total = res.data.total_count
|
|
}).finally(() => (this.loading = false))
|
|
},
|
|
getModelList() {
|
|
get_module_list().then(res => {
|
|
this.drug_module_idOptions = res.data.drug_manage
|
|
this.client_module_idOptions = res.data.client_manage
|
|
this.standard_module_idOptions = res.data.standard_manage
|
|
this.consumables_module_idOptions = res.data.consumables_manage
|
|
this.instrument_module_idOptions = res.data.instrument_manage
|
|
})
|
|
},
|
|
pageChange(page) {
|
|
this.page = page
|
|
this.getList()
|
|
},
|
|
handleSelectionChange(val) {
|
|
this.multipleSelection = val
|
|
},
|
|
handleAddRole() {
|
|
this.title = '添加角色'
|
|
this.dialogVisible = true
|
|
},
|
|
handleDel() {
|
|
if (this.multipleSelection.length === 0) {
|
|
this.$message.warning('请选择需要删除的角色')
|
|
return
|
|
}
|
|
this.$confirm(`确定要删除角色 ${this.multipleSelection[0].role_name} 吗?`, '提示', {
|
|
confirmButtonText: '确定',
|
|
cancelButtonText: '取消',
|
|
type: 'warning'
|
|
}).then(() => {
|
|
this.$message({
|
|
type: 'success',
|
|
message: '删除成功!'
|
|
})
|
|
}).catch(() => {
|
|
this.$message({
|
|
type: 'info',
|
|
message: '已取消删除'
|
|
})
|
|
})
|
|
},
|
|
handleRefresh() {
|
|
this.getList()
|
|
},
|
|
handleEdit(index, row) {
|
|
this.title = '编辑角色'
|
|
this.dialogVisible = true
|
|
this.loadingForm = true
|
|
this.formData.role_id = row.role_id
|
|
this.formData.role_code = row.role_code
|
|
this.formData.role_name = row.role_name
|
|
this.formData.description = row.description
|
|
const data = {
|
|
'role_id': row.role_id
|
|
}
|
|
get_role_module(stringify(data)).then(
|
|
res => {
|
|
this.formData.client_module_id = res.data.filter(item => (item.have === 1 && item.module_type === '1')).map(item => item.module_id)
|
|
this.formData.drug_module_id = res.data.filter(item => (item.have === 1 && item.module_type === '2')).map(item => item.module_id)
|
|
this.formData.standard_module_id = res.data.filter(item => item.have === 1 && item.module_type === '3').map(item => item.module_id)
|
|
this.formData.consumables_module_id = res.data.filter(item => item.have === 1 && item.module_type === '4').map(item => item.module_id)
|
|
this.formData.instrument_module_id = res.data.filter(item => item.have === 1 && item.module_type === '5').map(item => item.module_id)
|
|
}
|
|
).finally(() => { this.loadingForm = false })
|
|
},
|
|
onClose() {
|
|
this.formData = {
|
|
role_id: undefined,
|
|
role_code: undefined,
|
|
role_name: undefined,
|
|
drug_module_id: [],
|
|
client_module_id: [],
|
|
standard_module_id: [],
|
|
consumables_module_id: [],
|
|
instrument_module_id: [],
|
|
description: undefined
|
|
}
|
|
this.$refs['elForm'].resetFields()
|
|
},
|
|
close() {
|
|
this.dialogVisible = false
|
|
},
|
|
handelConfirm() {
|
|
this.$refs['elForm'].validate(valid => {
|
|
if (!valid) return
|
|
const data = JSON.parse(JSON.stringify(this.formData))
|
|
data.drug_module_id = JSON.stringify(data.drug_module_id)
|
|
data.client_module_id = JSON.stringify(data.client_module_id)
|
|
data.standard_module_id = JSON.stringify(data.standard_module_id)
|
|
data.consumables_module_id = JSON.stringify(data.consumables_module_id)
|
|
data.instrument_module_id = JSON.stringify(data.instrument_module_id)
|
|
add_update_role(stringify(data)).then(res => {
|
|
this.$message.success(res.msg)
|
|
this.getList()
|
|
this.onClose()
|
|
})
|
|
this.close()
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style scoped>
|
|
>>>.el-dialog__body{
|
|
margin-right: 50px;
|
|
}
|
|
</style>
|
|
|
|
<style lang="scss" scoped>
|
|
.main-container-text{
|
|
min-height:calc(100vh - 110px) ;
|
|
padding: 1rem;
|
|
margin: 1rem;
|
|
background: white;
|
|
.title{
|
|
font-size: 20px;
|
|
font-weight: bold;
|
|
color: #000000;
|
|
}
|
|
.header{
|
|
margin: 1rem 0 1rem 0;
|
|
.el-input{
|
|
width: 9.375rem;
|
|
margin-right: 1rem;
|
|
}
|
|
.el-select {
|
|
margin-right: 1rem;
|
|
}
|
|
.header-right{
|
|
float: right;
|
|
}
|
|
}
|
|
}
|
|
</style>
|