407 lines
13 KiB
Vue
407 lines
13 KiB
Vue
<template>
|
|
<div class="top">
|
|
<div class="left">
|
|
<el-button round style="float: right" type="primary" @click="addRole">添加</el-button>
|
|
<el-table :data="roleTableData" height="300px" highlight-current-row stripe style="width: 100%"
|
|
@row-click="roleRowClick">
|
|
<el-table-column align="center" label="角色编号">
|
|
<template #default="scope">
|
|
{{ scope.row.角色编号 }}
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column align="center" label="角色名称">
|
|
<template #default="scope">
|
|
{{ scope.row.角色名称 }}
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column align="center" fixed="right" label="操作">
|
|
<template #default="scope">
|
|
<el-link type="error" @click="deleteRole(scope.row)">删除</el-link>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
</div>
|
|
<div class="right">
|
|
<el-table :data="permissionTableData" height="300px" stripe style="width: 100%">
|
|
<el-table-column align="center" label="是否分配" width="60">
|
|
<template #default="scope">
|
|
<el-checkbox v-model="scope.row.是否分配" :false-value="0" :true-value="1"
|
|
size="large" @click="setRolePermission(scope.row)"/>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="序号" type="index" width="80"/>
|
|
<el-table-column align="center" label="权限模块">
|
|
<template #default="scope">
|
|
{{ scope.row.权限模块 }}
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column align="center" label="路径">
|
|
<template #default="scope">
|
|
{{ scope.row.path }}
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
</div>
|
|
</div>
|
|
<div class="main">
|
|
<el-button round type="primary" @click="resetPeopleUpdate();showPeopleUpdate = true">添加</el-button>
|
|
<el-table :data="peopleTableData" height="400px" stripe style="width: 100%;margin: 0 auto">
|
|
<el-table-column label="序号" type="index" width="80"/>
|
|
<el-table-column align="center" label="姓名">
|
|
<template #default="scope">
|
|
{{ scope.row.姓名 }}
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column align="center" label="角色名称">
|
|
<template #default="scope">
|
|
{{ scope.row.角色名称 }}
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column align="center" label="工号" width="200">
|
|
<template #default="scope">
|
|
{{ scope.row.登录账号 }}
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column align="center" label="登陆密码">
|
|
<template #default="scope">
|
|
{{ scope.row.登录密码 }}
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column align="center" label="门禁1权限">
|
|
<template #default="scope">
|
|
<el-tag v-if="scope.row.门禁1权限" type="success">有权限</el-tag>
|
|
<el-tag v-if="!scope.row.门禁1权限" type="danger">无权限</el-tag>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column align="center" label="门禁2权限">
|
|
<template #default="scope">
|
|
<el-tag v-if="scope.row.门禁2权限" type="success">有权限</el-tag>
|
|
<el-tag v-if="!scope.row.门禁2权限" type="danger">无权限</el-tag>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column align="center" label="门禁3权限">
|
|
<template #default="scope">
|
|
<el-tag v-if="scope.row.门禁3权限" type="success">有权限</el-tag>
|
|
<el-tag v-if="!scope.row.门禁3权限" type="danger">无权限</el-tag>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column align="center" label="班次">
|
|
<template #default="scope">
|
|
{{ scope.row.班次 }}
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column align="center" label="班组">
|
|
<template #default="scope">
|
|
{{ scope.row.班组 }}
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column align="center" fixed="right" label="操作">
|
|
<template #default="scope">
|
|
<el-link type="warning" @click="updatePeople(scope.row)">修改</el-link>
|
|
|
|
<el-link type="error" @click="deletePeople(scope.row)">删除</el-link>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
</div>
|
|
<t-dialog
|
|
v-model:visible="showPeopleUpdate"
|
|
:confirm-on-enter="true"
|
|
:header="peopleUpdate.AID ? '修改人员' : '新增人员'"
|
|
:on-close="close"
|
|
:on-confirm="updatePeopleSubmit"
|
|
draggable
|
|
width="30%"
|
|
>
|
|
<el-form
|
|
:model="peopleUpdate"
|
|
label-position="right"
|
|
label-width="auto"
|
|
style="max-width: 600px"
|
|
>
|
|
<el-form-item label="姓名">
|
|
<el-input v-model="peopleUpdate.name"/>
|
|
</el-form-item>
|
|
<el-form-item label="角色">
|
|
<t-select v-model="peopleUpdate.role" placeholder="请选择">
|
|
<t-option v-for="item in roleTableData" :key="item.角色编号" :label="item.角色名称" :value="item.角色编号"/>
|
|
</t-select>
|
|
</el-form-item>
|
|
<el-form-item label="工号">
|
|
<el-input v-model="peopleUpdate.userName"/>
|
|
</el-form-item>
|
|
<el-form-item label="登录密码">
|
|
<el-input v-model="peopleUpdate.password"/>
|
|
</el-form-item>
|
|
<el-form-item label="门禁1权限">
|
|
<t-select v-model="peopleUpdate.RKE1" placeholder="请选择">
|
|
<t-option :value="1" label="有权限"/>
|
|
<t-option :value="0" label="无权限"/>
|
|
</t-select>
|
|
</el-form-item>
|
|
<el-form-item label="门禁2权限">
|
|
<t-select v-model="peopleUpdate.RKE2" placeholder="请选择">
|
|
<t-option :value="1" label="有权限"/>
|
|
<t-option :value="0" label="无权限"/>
|
|
</t-select>
|
|
</el-form-item>
|
|
<el-form-item label="门禁3权限">
|
|
<t-select v-model="peopleUpdate.RKE3" placeholder="请选择">
|
|
<t-option :value="1" label="有权限"/>
|
|
<t-option :value="0" label="无权限"/>
|
|
</t-select>
|
|
</el-form-item>
|
|
<el-form-item label="班次">
|
|
<el-input v-model="peopleUpdate.classes"/>
|
|
</el-form-item>
|
|
<el-form-item label="班组">
|
|
<el-input v-model="peopleUpdate.teamGroup"/>
|
|
</el-form-item>
|
|
</el-form>
|
|
</t-dialog>
|
|
</template>
|
|
|
|
<script setup>
|
|
import {inject, onMounted, reactive, ref} from 'vue'
|
|
import {useAppStore} from "@/store/app.js";
|
|
import {ElMessage, ElMessageBox} from "element-plus";
|
|
|
|
const store = useAppStore();
|
|
const CreateData = inject('CreateData')
|
|
const ExecDatabase = inject('ExecDatabase')
|
|
|
|
const showPeopleUpdate = ref(false)
|
|
|
|
const roleTableData = reactive([])
|
|
const permissionTableData = reactive([])
|
|
const peopleTableData = reactive([])
|
|
const peopleUpdate = reactive({
|
|
AID: 0,
|
|
name: '', // 名称
|
|
classes: '', // 班次
|
|
teamGroup: '', // 班组
|
|
role: '', // 角色
|
|
userName: '', // 用户名
|
|
password: '', // 密码
|
|
RKE1: 0, // 门禁
|
|
RKE2: 0,
|
|
RKE3: 0
|
|
})
|
|
|
|
onMounted(() => {
|
|
getRoleData()
|
|
getPeopleTableData()
|
|
});
|
|
|
|
const getRoleData = () => {
|
|
var param = []
|
|
var Data = CreateData('11', '基础表_人员角色_查询', param)
|
|
ExecDatabase(Data).then(response => {
|
|
roleTableData.length = 0
|
|
if (response.data.length > 0) {
|
|
roleTableData.push(...response.data)
|
|
}
|
|
})
|
|
}
|
|
|
|
const roleRowClick = (row, column, event) => {
|
|
getRolePermissionData(row.角色编号)
|
|
}
|
|
|
|
const getRolePermissionData = (roleId) => {
|
|
var param = []
|
|
param.push(['角色编号', roleId])
|
|
var Data = CreateData('11', '基础表_模块分配_页面分配_查询', param)
|
|
ExecDatabase(Data).then(response => {
|
|
permissionTableData.length = 0
|
|
if (response.data.length > 0) {
|
|
permissionTableData.push(...response.data)
|
|
}
|
|
})
|
|
}
|
|
|
|
const setRolePermission = (row) => {
|
|
var param = []
|
|
param.push(['角色编号', row.查询角色])
|
|
param.push(['模块编号', row.AID])
|
|
var Data = CreateData('11', '基础表_模块分配_角色分配模块', param)
|
|
ExecDatabase(Data).then(response => {
|
|
if (response.data.length > 0) {
|
|
if (response.data[0].result === 1) {
|
|
ElMessage.success(response.data[0].msg)
|
|
getRolePermissionData(row.查询角色)
|
|
} else {
|
|
ElMessage.error(response.data[0].msg)
|
|
}
|
|
} else {
|
|
ElMessage.error('数据异常')
|
|
}
|
|
})
|
|
}
|
|
|
|
const getPeopleTableData = () => {
|
|
var param = []
|
|
var Data = CreateData('11', '基础表_用户与角色_查询', param)
|
|
ExecDatabase(Data).then(response => {
|
|
peopleTableData.length = 0
|
|
if (response.data.length > 0) {
|
|
peopleTableData.push(...response.data)
|
|
}
|
|
})
|
|
}
|
|
|
|
const updatePeople = (row) => {
|
|
resetPeopleUpdate()
|
|
console.log(row)
|
|
peopleUpdate.AID = row.AID
|
|
peopleUpdate.name = row.姓名
|
|
peopleUpdate.classes = row.班次
|
|
peopleUpdate.teamGroup = row.班组
|
|
peopleUpdate.role = row.用户角色
|
|
peopleUpdate.userName = row.登录账号
|
|
peopleUpdate.password = row.登录密码
|
|
peopleUpdate.RKE1 = row.门禁1权限
|
|
peopleUpdate.RKE2 = row.门禁2权限
|
|
peopleUpdate.RKE3 = row.门禁3权限
|
|
|
|
showPeopleUpdate.value = true
|
|
console.log(peopleUpdate)
|
|
}
|
|
|
|
const resetPeopleUpdate = () => {
|
|
peopleUpdate.AID = 0
|
|
peopleUpdate.name = ''
|
|
peopleUpdate.classes = ''
|
|
peopleUpdate.teamGroup = ''
|
|
peopleUpdate.role = ''
|
|
peopleUpdate.userName = ''
|
|
peopleUpdate.password = ''
|
|
peopleUpdate.RKE1 = 0
|
|
peopleUpdate.RKE2 = 0
|
|
peopleUpdate.RKE3 = 0
|
|
}
|
|
|
|
const updatePeopleSubmit = () => {
|
|
var param = []
|
|
param.push(['AID', peopleUpdate.AID])
|
|
param.push(['姓名', peopleUpdate.name])
|
|
param.push(['用户角色', peopleUpdate.role])
|
|
param.push(['登录账号', peopleUpdate.userName])
|
|
param.push(['登录密码', peopleUpdate.password])
|
|
param.push(['门禁1权限', peopleUpdate.RKE1])
|
|
param.push(['门禁2权限', peopleUpdate.RKE2])
|
|
param.push(['门禁3权限', peopleUpdate.RKE3])
|
|
param.push(['班次', peopleUpdate.classes])
|
|
param.push(['班组', peopleUpdate.teamGroup])
|
|
var Data = CreateData('11', '基础表_用户角色_新增修改', param)
|
|
ExecDatabase(Data).then(response => {
|
|
if (response.data.length > 0) {
|
|
if (response.data[0].result === 1) {
|
|
ElMessage.success(response.data[0].msg)
|
|
getPeopleTableData()
|
|
showPeopleUpdate.value = false;
|
|
} else {
|
|
ElMessage.error(response.data[0].msg)
|
|
}
|
|
} else {
|
|
ElMessage.error('数据异常')
|
|
}
|
|
})
|
|
}
|
|
|
|
|
|
const addRole = () => {
|
|
ElMessageBox.prompt('请输入添加的角色名称？', '提示').then(({value}) => {
|
|
var param = []
|
|
param.push(['角色名称', value])
|
|
var Data = CreateData('11', '基础表_人员角色_增加', param)
|
|
ExecDatabase(Data).then(response => {
|
|
if (response.data.length > 0) {
|
|
if (response.data[0].result === 1) {
|
|
ElMessage.success(response.data[0].msg)
|
|
getRoleData()
|
|
} else {
|
|
ElMessage.error(response.data[0].msg)
|
|
}
|
|
} else {
|
|
ElMessage.error('数据异常')
|
|
}
|
|
})
|
|
})
|
|
}
|
|
|
|
const deleteRole = (row) => {
|
|
// 弹窗确认是否删除
|
|
ElMessageBox.confirm('是否删除此角色？', '警告').then(() => {
|
|
var param = []
|
|
param.push(['AID', row.AID])
|
|
var Data = CreateData('11', '基础表_人员角色_删除', param)
|
|
ExecDatabase(Data).then(response => {
|
|
if (response.data.length > 0) {
|
|
if (response.data[0].result === 1) {
|
|
ElMessage.success(response.data[0].msg)
|
|
getRoleData()
|
|
} else {
|
|
ElMessage.error(response.data[0].msg)
|
|
}
|
|
} else {
|
|
ElMessage.error('数据异常')
|
|
}
|
|
})
|
|
})
|
|
}
|
|
|
|
const deletePeople = (row) => {
|
|
// 弹窗确认是否删除
|
|
ElMessageBox.confirm('是否删除该用户？', '警告').then(() => {
|
|
var param = []
|
|
param.push(['AID', row.AID])
|
|
var Data = CreateData('11', '基础表_用户角色_删除', param)
|
|
ExecDatabase(Data).then(response => {
|
|
if (response.data.length > 0) {
|
|
if (response.data[0].result === 1) {
|
|
ElMessage.success(response.data[0].msg)
|
|
getPeopleTableData()
|
|
} else {
|
|
ElMessage.error(response.data[0].msg)
|
|
}
|
|
} else {
|
|
ElMessage.error('数据异常')
|
|
}
|
|
})
|
|
})
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
.top {
|
|
display: flex;
|
|
justify-content: space-evenly;
|
|
margin-top: 30px;
|
|
|
|
> div {
|
|
border: 1px solid #a8a8a8;
|
|
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
|
|
border-radius: 10px;
|
|
}
|
|
|
|
.left {
|
|
width: 30vw;
|
|
}
|
|
|
|
.right {
|
|
width: 65vw;
|
|
}
|
|
}
|
|
|
|
.main {
|
|
width: 97vw;
|
|
margin: 20px auto;
|
|
border: 1px solid #a8a8a8;
|
|
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
|
|
border-radius: 10px;
|
|
}
|
|
|
|
</style>
|