296 lines
8.1 KiB
Vue
296 lines
8.1 KiB
Vue
<template>
|
|
<lay-container fluid="true" style="padding: 20px">
|
|
<lay-row :space="10">
|
|
<lay-col :md="24">
|
|
<lay-card>
|
|
<lay-form style="margin-top: 20px">
|
|
<lay-row>
|
|
<lay-col :md="5">
|
|
<lay-form-item label="角色名称：" label-width="50">
|
|
<lay-input
|
|
v-model="searchAccount"
|
|
style="width: 90%"
|
|
placeholder="请输入"
|
|
></lay-input>
|
|
</lay-form-item>
|
|
</lay-col>
|
|
<lay-col :md="4">
|
|
<lay-form-item label-width="0">
|
|
<lay-button type="primary" @click="toSearch">查询</lay-button>
|
|
<lay-button @click="toReset">重置</lay-button>
|
|
</lay-form-item>
|
|
</lay-col>
|
|
</lay-row>
|
|
</lay-form>
|
|
</lay-card>
|
|
</lay-col>
|
|
<lay-col :md="24">
|
|
<lay-card>
|
|
<div style="padding: 10px">
|
|
<span style="font-size: 18px;vertical-align: center;margin-right: 20px">角色列表</span>
|
|
<lay-button type="primary" @click="openAdd" size="sm">新增角色</lay-button>
|
|
</div>
|
|
<lay-table
|
|
:page="page"
|
|
:columns="columns"
|
|
:dataSource="dataSource"
|
|
:even="true"
|
|
height="600px"
|
|
size="lg"
|
|
>
|
|
<template v-slot:id="{ data }">
|
|
{{ data.id }}
|
|
</template>
|
|
<template v-slot:username="{ data }">
|
|
{{ data.username }}
|
|
</template>
|
|
<template v-slot:password="{ data }">
|
|
{{ data.password }}
|
|
</template>
|
|
<template v-slot:level="{ data }">
|
|
<span v-if="data.level == 1" style="color: #FF0033">
|
|
科室审核
|
|
</span>
|
|
<span v-if="data.level == 2" style="color: #00A394">
|
|
普通员工
|
|
</span>
|
|
<span v-if="data.level == 3" style="color: #FF0033">
|
|
院级审核
|
|
</span>
|
|
<span v-if="data.level == 4" style="color: #FF0033">
|
|
支部审核
|
|
</span>
|
|
<span v-if="data.level == 5" style="color: #FF0033">
|
|
总党支审核
|
|
</span>
|
|
</template>
|
|
<template v-slot:operator="{ data }">
|
|
<lay-space>
|
|
<span v-if="data.id!=1" style="color: #00A394;cursor: pointer" @click="editDo(data)">编辑</span>
|
|
<lay-popconfirm trigger="click" content="确定要删除吗？" @confirm="delShowMsd(data)">
|
|
<span v-if="data.id!=1" style="color: #00A394;cursor: pointer">删除</span>
|
|
</lay-popconfirm>
|
|
<span v-if="data.id==1">-</span>
|
|
</lay-space>
|
|
</template>
|
|
</lay-table>
|
|
</lay-card>
|
|
</lay-col>
|
|
</lay-row>
|
|
</lay-container>
|
|
<lay-layer v-model="visible11" :title="addIsEdit == 1 ? '新增角色' : '编辑角色'" :type="4" :shade="true"
|
|
:area="['700px','100%']" :btn="action11">
|
|
<lay-container fluid="true" style="padding: 20px">
|
|
<lay-form label-position="left" :model="addData">
|
|
<lay-form-item label="角色名称" prop="username">
|
|
<lay-input v-model="addData.name" placeholder="请输入角色名称"></lay-input>
|
|
</lay-form-item>
|
|
<lay-form-item label="角色描述" prop="desc">
|
|
<lay-textarea placeholder="请输入角色描述" v-model="addData.describe"></lay-textarea>
|
|
</lay-form-item>
|
|
<lay-form-item label="审核权限" prop="level">
|
|
<lay-radio-group v-model="addData.level">
|
|
<lay-radio value="2">普通员工</lay-radio>
|
|
<lay-radio value="1">科室审核</lay-radio>
|
|
<lay-radio value="3">院级审核</lay-radio>
|
|
<lay-radio value="4">支部审核</lay-radio>
|
|
<lay-radio value="5">总党支审核</lay-radio>
|
|
</lay-radio-group>
|
|
</lay-form-item>
|
|
<lay-form-item label="角色权限" prop="desc">
|
|
<lay-tree
|
|
:default-expand-all="true"
|
|
:tail-node-icon="false"
|
|
:data="data9"
|
|
:check-strictly="true"
|
|
:showCheckbox="showCheckbox2"
|
|
v-model:checkedKeys="addData.rules"
|
|
:replaceFields="replaceFields">
|
|
</lay-tree>
|
|
</lay-form-item>
|
|
|
|
</lay-form>
|
|
</lay-container>
|
|
</lay-layer>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import {onMounted, reactive, ref, watch} from 'vue'
|
|
import {layer} from '@layui/layer-vue'
|
|
import {
|
|
menuData,
|
|
authGroupData,
|
|
authGroupDataAdd,
|
|
authGroupDataEdit,
|
|
authGroupDataDel,
|
|
} from "@/api/module/home";
|
|
|
|
const addData = reactive({
|
|
name: '',
|
|
describe: '',
|
|
rules: [],
|
|
level: 2,
|
|
id: 0
|
|
})
|
|
const addIsEdit = ref(1)
|
|
onMounted(() => {
|
|
getList();
|
|
getHierarchicalData()
|
|
})
|
|
const openAdd = () => {
|
|
visible11.value = true;
|
|
addData.id = 0;
|
|
addData.name = '';
|
|
addData.describe = '';
|
|
addData.rules = [];
|
|
addData.level = 2;
|
|
}
|
|
const editDo = (data) => {
|
|
console.log(data);
|
|
visible11.value = true;
|
|
addData.name = data.name;
|
|
addData.describe = data.describe;
|
|
addData.rules = data.rules.split(',').map(Number);
|
|
addData.id = data.id;
|
|
addData.level = data.level;
|
|
console.log(addData.rules)
|
|
addIsEdit.value = 2;
|
|
}
|
|
const getList = () => {
|
|
authGroupData({}).then((res) => {
|
|
console.log(res)
|
|
if (res.code == 1) {
|
|
dataSource.value = res.data;
|
|
} else {
|
|
layer.msg(res.msg, {icon: 2})
|
|
}
|
|
})
|
|
}
|
|
const delShowMsd = async (data) => {
|
|
var res = await authGroupDataDel({id: data.id});
|
|
console.log(res)
|
|
if (res.code == 1) {
|
|
layer.msg('删除成功！', {icon: 1})
|
|
getList();
|
|
} else {
|
|
layer.msg(res.msg, {icon: 2})
|
|
}
|
|
}
|
|
const getHierarchicalData = () => {
|
|
menuData({}).then((res) => {
|
|
console.log(res)
|
|
if (res.code == 1) {
|
|
data9.value = res.data;
|
|
} else {
|
|
layer.msg(res.msg, {icon: 2})
|
|
}
|
|
})
|
|
}
|
|
const action11 = ref([
|
|
{
|
|
text: "确认",
|
|
callback: async () => {
|
|
console.log(addData);
|
|
if (addData.name == '') {
|
|
layer.msg('角色名称不能为空！', {icon: 2})
|
|
return;
|
|
}
|
|
if (addData.describe == '') {
|
|
layer.msg('角色描述不能为空！', {icon: 2})
|
|
return;
|
|
}
|
|
if (addData.describe.length == 0 || addData.describe == '') {
|
|
layer.msg('请选择菜单！', {icon: 2})
|
|
return;
|
|
}
|
|
if(typeof addData.rules != 'string'){
|
|
addData.rules = addData.rules.join(',');
|
|
}
|
|
if (addIsEdit.value == 1) {
|
|
var res = await authGroupDataAdd(addData);
|
|
} else {
|
|
var res = await authGroupDataEdit(addData);
|
|
}
|
|
if (res.code == 1) {
|
|
layer.msg('提交成功！', {icon: 1})
|
|
visible11.value = false;
|
|
getList();
|
|
} else {
|
|
layer.msg(res.msg, {icon: 2})
|
|
}
|
|
}
|
|
},
|
|
{
|
|
text: "取消",
|
|
callback: () => {
|
|
visible11.value = false;
|
|
}
|
|
}
|
|
])
|
|
const showCheckbox2 = ref(true);
|
|
const replaceFields = ref({
|
|
id: 'id',
|
|
title: 'title',
|
|
children: 'children'
|
|
})
|
|
|
|
const data9 = ref([]);
|
|
const visible11 = ref(false)
|
|
const page = ref({total: 1, limit: 10, current: 1})
|
|
|
|
const columns = [
|
|
{
|
|
title: '序号',
|
|
width: '50px',
|
|
customSlot: 'id',
|
|
align: 'center',
|
|
key: 'id'
|
|
},
|
|
{
|
|
title: '角色名称',
|
|
width: '100px',
|
|
align: 'center',
|
|
key: 'name'
|
|
},
|
|
{
|
|
title: '角色描述',
|
|
width: '150px',
|
|
key: 'describe'
|
|
},
|
|
{
|
|
title: '审核权限',
|
|
width: '100px',
|
|
customSlot: 'level',
|
|
align: 'center',
|
|
key: 'level'
|
|
},
|
|
{
|
|
title: '操作',
|
|
width: '180px',
|
|
customSlot: 'operator',
|
|
key: 'operator',
|
|
align: 'center',
|
|
fixed: 'right'
|
|
}
|
|
]
|
|
|
|
const dataSource = ref([]);
|
|
|
|
function toSearch() {
|
|
layer.load(2, {time: 3000})
|
|
}
|
|
|
|
const searchAccount = ref('')
|
|
const searchEmail = ref('')
|
|
|
|
function toReset() {
|
|
searchAccount.value = ''
|
|
searchEmail.value = ''
|
|
}
|
|
</script>
|
|
<style>
|
|
.layui-table-header .layui-table-cell {
|
|
background-color: #ECF8FA !important;
|
|
}
|
|
</style>
|