limingjuan
/
Prediction-MindSpore
Not watched
1
0
Fork 0
Code
Releases 0 Wiki evaluate Activity
Issues 0 Pull Requests 0 Datasets Model Cloudbrain HPC
Browse Source

Update index.vue

main
bin_open_source 2 years ago
parent
6c9798bf8b
commit
616238689c
1 changed files with 365 additions and 362 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +365
    -362
      stock_predic_web/views/sys/role/index.vue

+ 365
- 362
stock_predic_web/views/sys/role/index.vue View File

@@ -1,362 +1,365 @@
<template>
<div class="intemShow">
<!-- 搜索框-->
<div style="padding: 10px 0">
<el-input style="width: 250px" placeholder="请输入名称" :suffix-icon="Search" v-model="searchname"></el-input>
<el-button type="primary" style="margin-left: 5px" @click="network">
<el-icon style="vertical-align: middle;"><search /></el-icon>
<span style="vertical-align: middle;"> 搜索 </span>
</el-button>
</div>
<div style="padding: 10px 0">
<el-button type="primary" @click="addItem">新增 <el-icon style="margin-left: 3px"><circle-plus /></el-icon></el-button>
<el-button type="danger" @click="Batchdele">批量删除 <el-icon style="margin-left: 3px"><delete /></el-icon></el-button>
<el-upload action="http://127.0.0.1:8081/userRole/import" style="display: inline-block;margin-left: 5px" :on-success="successimport" :on-error="errimport" :show-file-list="false">
<el-popconfirm confirm-button-text="下载"
cancel-button-text="不用了"
:icon="InfoFilled"
icon-color="red"
title="是否需要下载导入模板？"
@confirm="confirmEvent">
<template #reference>
<el-button type="success">导入 <el-icon style="margin-left: 3px"><upload-filled /></el-icon></el-button>
</template>
</el-popconfirm>
</el-upload>
<el-button type="success" @click="itemexport" style="margin-left: 5px">导出 <el-icon style="margin-left: 3px"><download /></el-icon></el-button>
</div>
<el-table :data="tableData" border style="width: 100%" @selection-change="handleSelectionChange">
<el-table-column fixed type="selection" width="70" align="center"></el-table-column>
<el-table-column fixed prop="id" label="id" width="110" sortable align="center"></el-table-column>
<el-table-column prop="roleId" label="角色编号" width="250" align="center"></el-table-column>
<el-table-column prop="rolename" label="角色名称" width="250" align="center"></el-table-column>
<el-table-column prop="description" label="角色描述" width="500" align="center"></el-table-column>
<el-table-column fixed="right" label="操作" width="300" align="center">
<template v-slot="scope">
<el-button type="info" size="default" @click="selectMenu(scope.row.id)">权限分配 <el-icon><Grid /></el-icon></el-button>
<el-button @click="handleClick(scope.row)" type="warning" size="default">编辑 <el-icon><edit /></el-icon></el-button>
<el-button @click="delOne(scope.row.id)" type="danger" size="default">删除 <el-icon><remove /></el-icon></el-button>
</template>
</el-table-column>
</el-table>
<el-config-provider :locale="locale">
<div style="padding: 10px 0">
<el-pagination
background
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="pageNum"
:page-sizes="[5, 15, 50, 100]"
:page-size="pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="total">
</el-pagination>
</div>
</el-config-provider>
<el-dialog title="角色信息" v-model="dialogFormVisible" width="50%">
<el-form :model="form" size="medium" :rules="rules" ref="form">
<el-form-item label="ID" :label-width="formLabelWidth">
<el-input v-model="form.id" autocomplete="off" disabled></el-input>
</el-form-item>
<el-form-item label="角色编号" :label-width="formLabelWidth" prop="roleId">
<el-input v-model="form.roleId" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="角色名称" :label-width="formLabelWidth" prop="rolename">
<el-input v-model="form.rolename" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="角色描述" :label-width="formLabelWidth">
<el-input v-model="form.description" autocomplete="off"></el-input>
</el-form-item>
</el-form>
<template #footer>
<span class="dialog-footer">
<el-button @click="dialogFormVisible = false"> 取消</el-button>
<el-button type="primary" @click="saveData('form')"> 确认</el-button>
</span>
</template>
</el-dialog>
<!-- 权限分配弹窗-->
<el-dialog title="权限分配" v-model="menuFormVisible" width="50%">
<el-tree
:data="menudata"
show-checkbox
default-expand-all
:default-checked-keys="checkdata"
node-key="id"
ref="tree"
highlight-current
:props="defaultProps">
</el-tree>
<template #footer>
<span class="dialog-footer">
<el-button @click="menuFormVisible = false"> 取消</el-button>
<el-button type="primary" @click="saveRoleMenu"> 确认</el-button>
</span>
</template>
</el-dialog>
</div>
</template>
<script>
import zhCn from 'element-plus/lib/locale/lang/zh-cn'
import {Search} from '@element-plus/icons-vue'
import {ElMessage, ElMessageBox} from "element-plus";
import fileDownload from "js-file-download";
// import fileDownload from 'js-file-download'
export default {
name: "index",
components:{
Search,
},
data() {
return {
defaultProps: {
children: 'children',
label: 'menuName'
},
Search,
locale:zhCn,
tableData: [],
total: 0,
pageNum: 1,
pageSize: 5,
searchname: "",
dialogFormVisible: false,
menuFormVisible:false,
form: {},
menudata: [], //权限列表数据
checkdata: [], //选择数据
nowRoleID: 0,//选择的分配角色id
multipleSelection: [],
formLabelWidth: '100px',
rules: {
roleId: [{ required: true, message: '请输入角色编号', trigger: 'blur' }],
rolename: [{ required: true, message: '请输入角色名称', trigger: 'blur' }]
}
}
},
methods:{
saveRoleMenu(){
this.$http.post("/userRole/roleMenu/"+this.nowRoleID,this.$refs.tree.getCheckedKeys()).then(res=>{
if(res.statusCode == '200'){
ElMessage({
message: '成功！',
type: 'success',
})
this.menuFormVisible=false
}else {
ElMessage.error('修改失败！')
}
}).catch(()=>{
ElMessage.error('失败！')
})
},
selectMenu(roleid){ //权限分配的菜单数据
//获取菜单数据
this.$http.get("/menu/menuAll").then(res=>{
if(res.statusCode == '200'){
this.menudata = res.data
}
}).catch(()=>{
ElMessage.error('数据加载失败,请刷新！')
})
this.nowRoleID = roleid
this.menuFormVisible = true
//获取选择角色的已有权限
this.$http.get("/userRole/roleMenu/"+roleid).then(res=>{
if(res.statusCode == '200'){
this.checkdata = res.data
}
}).catch(()=>{
ElMessage.error('数据加载失败,请刷新！')
})
},
confirmEvent(){ //下载导入模板
this.$http.get("/userRole/exportMB", {
responseType: 'arraybuffer'
}).then((res)=>{
ElMessage({
message: '下载成功！',
type: 'success',
})
fileDownload(res,'导入模板_'+ new Date().toLocaleString()+'.xlsx')
}).catch(()=>{
ElMessage.error('下载失败！')
})
},
errimport(){ //导入失败
ElMessage.error('导入失败！')
},
successimport(){ //导入成功
this.network()
ElMessage({
message: '导入成功！',
type: 'success',
})
},
itemexport(){ //导出
this.$http.get("/userRole/export", {
responseType: 'arraybuffer'
}).then((res)=>{
ElMessage({
message: '导出成功！',
type: 'success',
})
fileDownload(res,'下载信息_'+ new Date().toLocaleString()+'.xlsx')
}).catch(()=>{
ElMessage.error('导出失败！')
})
},
handleSelectionChange(row){ //批量删除选择的数据
this.multipleSelection = row
},
Batchdele(){ //批量删除
let ids = this.multipleSelection.map(v=>v.id)
ElMessageBox.confirm(
'是否批量删除选中数据？',
'提示',
{
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
}
).then(() => {
this.$http.post("/userRole/batch/del",ids).then(res=>{
if(res.statusCode == '200'){
ElMessage({
message: '删除成功！',
type: 'success',
})
this.network()
}
}).catch(()=>{
ElMessage.error('删除失败！')
})
}).catch(() => {
ElMessage({
type: 'info',
message: '已取消！',
})
})
},
delOne(id){ //删除
ElMessageBox.confirm(
'是否删除选中数据？',
'提示',
{
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
}
).then(() => {
this.$http.delete("/userRole/del/"+id).then(res=>{
if(res.statusCode == '200'){
ElMessage({
message: '删除成功！',
type: 'success',
})
this.network()
}
}).catch(()=>{
ElMessage.error('删除失败！')
})
}).catch(() => {
ElMessage({
type: 'info',
message: '已取消！',
})
})
},
handleClick(row){ //编辑
this.form = row
this.dialogFormVisible=true
},
saveData(resetForm){ //用于数据的添加和更新
this.$refs[resetForm].validate((valid)=>{
if(valid){
this.$http.post("/userRole/save",this.form).then(res=>{
if(res.statusCode == '200'){
ElMessage({
message: '成功！',
type: 'success',
})
this.dialogFormVisible=false
this.network()
}
}).catch(()=>{
ElMessage.error('失败！')
})
}else{
ElMessage({
message: '已取消！',
type: 'warning',
})
return false;
}
})
},
addItem(){ //添加物品
this.dialogFormVisible = true
this.form = {}
},
handleSizeChange(val){ //页大小改变
this.pageSize = val
this.network()
},
handleCurrentChange(val){ //当前页改变
this.pageNum = val
this.network()
},
network(){ //分页查询
this.searchtype = this.typeState
this.$http.get("/userRole/pageAll",{
params: {
pageNum: this.pageNum,
PageSize: this.pageSize,
itemname: this.searchname,
}
}).then(res=>{
if(res.statusCode == '200'){
this.total = res.data.total
this.tableData = res.data.records
}
}).catch(()=>{
ElMessage.error('数据加载失败,请刷新！')
})
},
outmsg(){
ElMessage({
type: 'info',
message: '角色编号请修改为对应ID！',
})
}
},
created() {
this.network()
this.outmsg()
}
}
</script>
<style scoped>
.intemShow{
margin-left: 15px;
}
</style>
/**
* @Author moxianchengbao
*/
<template>
<div class="intemShow">
<!-- 搜索框-->
<div style="padding: 10px 0">
<el-input style="width: 250px" placeholder="请输入名称" :suffix-icon="Search" v-model="searchname"></el-input>

<el-button type="primary" style="margin-left: 5px" @click="network">
<el-icon style="vertical-align: middle;"><search /></el-icon>
<span style="vertical-align: middle;"> 搜索 </span>
</el-button>
</div>

<div style="padding: 10px 0">
<el-button type="primary" @click="addItem">新增 <el-icon style="margin-left: 3px"><circle-plus /></el-icon></el-button>
<el-button type="danger" @click="Batchdele">批量删除 <el-icon style="margin-left: 3px"><delete /></el-icon></el-button>
<el-upload action="http://127.0.0.1:8081/userRole/import" style="display: inline-block;margin-left: 5px" :on-success="successimport" :on-error="errimport" :show-file-list="false">
<el-popconfirm confirm-button-text="下载"
cancel-button-text="不用了"
:icon="InfoFilled"
icon-color="red"
title="是否需要下载导入模板？"
@confirm="confirmEvent">
<template #reference>
<el-button type="success">导入 <el-icon style="margin-left: 3px"><upload-filled /></el-icon></el-button>
</template>
</el-popconfirm>
</el-upload>
<el-button type="success" @click="itemexport" style="margin-left: 5px">导出 <el-icon style="margin-left: 3px"><download /></el-icon></el-button>

</div>

<el-table :data="tableData" border style="width: 100%" @selection-change="handleSelectionChange">
<el-table-column fixed type="selection" width="70" align="center"></el-table-column>

<el-table-column fixed prop="id" label="id" width="110" sortable align="center"></el-table-column>
<el-table-column prop="roleId" label="角色编号" width="250" align="center"></el-table-column>
<el-table-column prop="rolename" label="角色名称" width="250" align="center"></el-table-column>
<el-table-column prop="description" label="角色描述" width="500" align="center"></el-table-column>

<el-table-column fixed="right" label="操作" width="300" align="center">
<template v-slot="scope">
<el-button type="info" size="default" @click="selectMenu(scope.row.id)">权限分配 <el-icon><Grid /></el-icon></el-button>
<el-button @click="handleClick(scope.row)" type="warning" size="default">编辑 <el-icon><edit /></el-icon></el-button>
<el-button @click="delOne(scope.row.id)" type="danger" size="default">删除 <el-icon><remove /></el-icon></el-button>
</template>
</el-table-column>
</el-table>

<el-config-provider :locale="locale">
<div style="padding: 10px 0">
<el-pagination
background
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="pageNum"
:page-sizes="[5, 15, 50, 100]"
:page-size="pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="total">
</el-pagination>
</div>
</el-config-provider>


<el-dialog title="角色信息" v-model="dialogFormVisible" width="50%">
<el-form :model="form" size="medium" :rules="rules" ref="form">
<el-form-item label="ID" :label-width="formLabelWidth">
<el-input v-model="form.id" autocomplete="off" disabled></el-input>
</el-form-item>
<el-form-item label="角色编号" :label-width="formLabelWidth" prop="roleId">
<el-input v-model="form.roleId" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="角色名称" :label-width="formLabelWidth" prop="rolename">
<el-input v-model="form.rolename" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="角色描述" :label-width="formLabelWidth">
<el-input v-model="form.description" autocomplete="off"></el-input>
</el-form-item>
</el-form>

<template #footer>
<span class="dialog-footer">
<el-button @click="dialogFormVisible = false"> 取消</el-button>
<el-button type="primary" @click="saveData('form')"> 确认</el-button>
</span>
</template>
</el-dialog>

<!-- 权限分配弹窗-->
<el-dialog title="权限分配" v-model="menuFormVisible" width="50%">
<el-tree
:data="menudata"
show-checkbox
default-expand-all
:default-checked-keys="checkdata"
node-key="id"
ref="tree"
highlight-current
:props="defaultProps">
</el-tree>

<template #footer>
<span class="dialog-footer">
<el-button @click="menuFormVisible = false"> 取消</el-button>
<el-button type="primary" @click="saveRoleMenu"> 确认</el-button>
</span>
</template>
</el-dialog>

</div>
</template>

<script>
import zhCn from 'element-plus/lib/locale/lang/zh-cn'
import {Search} from '@element-plus/icons-vue'
import {ElMessage, ElMessageBox} from "element-plus";
import fileDownload from "js-file-download";
// import fileDownload from 'js-file-download'
export default {
name: "index",
components:{
Search,
},
data() {
return {
defaultProps: {
children: 'children',
label: 'menuName'
},
Search,
locale:zhCn,
tableData: [],
total: 0,
pageNum: 1,
pageSize: 5,
searchname: "",
dialogFormVisible: false,
menuFormVisible:false,
form: {},
menudata: [], //权限列表数据
checkdata: [], //选择数据
nowRoleID: 0,//选择的分配角色id
multipleSelection: [],
formLabelWidth: '100px',
rules: {
roleId: [{ required: true, message: '请输入角色编号', trigger: 'blur' }],
rolename: [{ required: true, message: '请输入角色名称', trigger: 'blur' }]
}
}
},
methods:{
saveRoleMenu(){
this.$http.post("/userRole/roleMenu/"+this.nowRoleID,this.$refs.tree.getCheckedKeys()).then(res=>{
if(res.statusCode == '200'){
ElMessage({
message: '成功！',
type: 'success',
})
this.menuFormVisible=false
}else {
ElMessage.error('修改失败！')
}
}).catch(()=>{
ElMessage.error('失败！')
})
},
selectMenu(roleid){ //权限分配的菜单数据
//获取菜单数据
this.$http.get("/menu/menuAll").then(res=>{
if(res.statusCode == '200'){
this.menudata = res.data
}
}).catch(()=>{
ElMessage.error('数据加载失败,请刷新！')
})
this.nowRoleID = roleid
this.menuFormVisible = true

//获取选择角色的已有权限
this.$http.get("/userRole/roleMenu/"+roleid).then(res=>{
if(res.statusCode == '200'){
this.checkdata = res.data
}
}).catch(()=>{
ElMessage.error('数据加载失败,请刷新！')
})

},
confirmEvent(){ //下载导入模板
this.$http.get("/userRole/exportMB", {
responseType: 'arraybuffer'
}).then((res)=>{
ElMessage({
message: '下载成功！',
type: 'success',
})
fileDownload(res,'导入模板_'+ new Date().toLocaleString()+'.xlsx')
}).catch(()=>{
ElMessage.error('下载失败！')
})
},
errimport(){ //导入失败
ElMessage.error('导入失败！')
},
successimport(){ //导入成功
this.network()
ElMessage({
message: '导入成功！',
type: 'success',
})
},
itemexport(){ //导出
this.$http.get("/userRole/export", {
responseType: 'arraybuffer'
}).then((res)=>{
ElMessage({
message: '导出成功！',
type: 'success',
})
fileDownload(res,'下载信息_'+ new Date().toLocaleString()+'.xlsx')
}).catch(()=>{
ElMessage.error('导出失败！')
})
},
handleSelectionChange(row){ //批量删除选择的数据
this.multipleSelection = row
},
Batchdele(){ //批量删除
let ids = this.multipleSelection.map(v=>v.id)
ElMessageBox.confirm(
'是否批量删除选中数据？',
'提示',
{
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
}
).then(() => {
this.$http.post("/userRole/batch/del",ids).then(res=>{
if(res.statusCode == '200'){
ElMessage({
message: '删除成功！',
type: 'success',
})
this.network()
}
}).catch(()=>{
ElMessage.error('删除失败！')
})
}).catch(() => {
ElMessage({
type: 'info',
message: '已取消！',
})
})
},
delOne(id){ //删除
ElMessageBox.confirm(
'是否删除选中数据？',
'提示',
{
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
}
).then(() => {
this.$http.delete("/userRole/del/"+id).then(res=>{
if(res.statusCode == '200'){
ElMessage({
message: '删除成功！',
type: 'success',
})
this.network()
}
}).catch(()=>{
ElMessage.error('删除失败！')
})
}).catch(() => {
ElMessage({
type: 'info',
message: '已取消！',
})
})
},
handleClick(row){ //编辑
this.form = row
this.dialogFormVisible=true
},
saveData(resetForm){ //用于数据的添加和更新
this.$refs[resetForm].validate((valid)=>{
if(valid){
this.$http.post("/userRole/save",this.form).then(res=>{
if(res.statusCode == '200'){
ElMessage({
message: '成功！',
type: 'success',
})
this.dialogFormVisible=false
this.network()
}
}).catch(()=>{
ElMessage.error('失败！')
})
}else{
ElMessage({
message: '已取消！',
type: 'warning',
})
return false;
}
})
},
addItem(){ //添加物品
this.dialogFormVisible = true
this.form = {}
},
handleSizeChange(val){ //页大小改变
this.pageSize = val
this.network()
},
handleCurrentChange(val){ //当前页改变
this.pageNum = val
this.network()
},
network(){ //分页查询
this.searchtype = this.typeState
this.$http.get("/userRole/pageAll",{
params: {
pageNum: this.pageNum,
PageSize: this.pageSize,
itemname: this.searchname,
}
}).then(res=>{
if(res.statusCode == '200'){
this.total = res.data.total
this.tableData = res.data.records
}
}).catch(()=>{
ElMessage.error('数据加载失败,请刷新！')
})

},
outmsg(){
ElMessage({
type: 'info',
message: '角色编号请修改为对应ID！',
})
}
},
created() {
this.network()
this.outmsg()
}
}
</script>

<style scoped>
.intemShow{
margin-left: 15px;
}

</style>

Write Preview
Loading…
Cancel
Save