mirror of
https://gitee.com/js-yhsec/energy_storage.git
synced 2026-05-27 18:59:26 +08:00
场站+服务管理功能开发，角色权限完善，总览弹窗接口联调
This commit is contained in:
ym1026
222
web/src/views/system/permission.vue
Normal file
222
web/src/views/system/permission.vue
Normal file
@@ -0,0 +1,222 @@
|
||||
<template>
|
||||
<div class="permission">
|
||||
<searchBox
|
||||
:btn-option-list="btnOptionList"
|
||||
@onSearch="onSearch"
|
||||
:search-options="searchOptions"
|
||||
@operateForm="operateForm"
|
||||
></searchBox>
|
||||
|
||||
<div class="content-table">
|
||||
<TreeTable
|
||||
:columns="columns"
|
||||
:table-data="tableData"
|
||||
@handlePagesizeChange="handlePagesizeChange"
|
||||
ref="comTable"
|
||||
:table-option="tableOption"
|
||||
:page-option="pageOption"
|
||||
:table-h="tableH"
|
||||
>
|
||||
<template #is_open="record">
|
||||
<!-- 0:禁用; 1:启用 -->
|
||||
<span>{{ ['禁用', '启用'][record.is_open] }}</span>
|
||||
</template>
|
||||
<template #permission="record">
|
||||
<!-- 0:禁用; 1:启用 -->
|
||||
<span>{{record.permission.map(item=>item.name).toString() }}</span>
|
||||
</template>
|
||||
|
||||
<template #action="record">
|
||||
<OperateCom :record="record" :operate-list="operateList" @operateForm="operateForm" />
|
||||
</template>
|
||||
</TreeTable>
|
||||
</div>
|
||||
<a-modal v-model:open="formModal" width="750px" style="top: 20px" :footer="null">
|
||||
<!-- action:edit add -->
|
||||
<EditCom
|
||||
:record="record"
|
||||
@operateForm="operateForm"
|
||||
type="permission"
|
||||
:action="formStatus"
|
||||
></EditCom>
|
||||
</a-modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { columnList, permissionOptions } from '../../../public/config/columnList'
|
||||
import { getReq, postReq } from '@/request/api.js'
|
||||
|
||||
import { ExclamationCircleOutlined } from '@ant-design/icons-vue'
|
||||
import { createVNode } from 'vue'
|
||||
import { Modal } from 'ant-design-vue'
|
||||
export default {
|
||||
name: '',
|
||||
components: {
|
||||
|
||||
},
|
||||
props: {},
|
||||
data() {
|
||||
return {
|
||||
formModal: false,
|
||||
formState: {},
|
||||
formStatus: 'add', //表单状态辑状态 add:新增 edit:编辑
|
||||
pageOption: {
|
||||
pageSize: 10,
|
||||
page: 1
|
||||
},
|
||||
btnOptionList: [],
|
||||
paramsDate: {}
|
||||
}
|
||||
},
|
||||
computed: {},
|
||||
created() {
|
||||
let info = []
|
||||
let col = columnList.find((i) => i.page == 'permission').columns
|
||||
if (col.length) {
|
||||
col.forEach((item) => {
|
||||
info.push(this.$setWidth(item))
|
||||
})
|
||||
}
|
||||
this.columns = info
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.operateList = this.$getBtns(['查看'])
|
||||
// this.btnOptionList = this.$getBtns()
|
||||
this.getList()
|
||||
},
|
||||
|
||||
methods: {
|
||||
async getList() {
|
||||
this.$refs.comTable.loading = true
|
||||
|
||||
const { page, pageSize } = this.pageOption
|
||||
|
||||
const params = {
|
||||
...this.paramsDate,
|
||||
page_size: pageSize,
|
||||
page
|
||||
}
|
||||
|
||||
try {
|
||||
const res = await getReq('/queryPermissionList', params)
|
||||
if (res.errcode === 0) {
|
||||
this.$refs.comTable.loading = false
|
||||
|
||||
this.tableData = res.data
|
||||
|
||||
this.pageOption = {
|
||||
page: res.page,
|
||||
pageSize: res.page_size,
|
||||
count: res.count
|
||||
}
|
||||
} else {
|
||||
const err = { tip: res.errmsg }
|
||||
throw err
|
||||
}
|
||||
} catch (error) {
|
||||
//统一处理报错提示
|
||||
}
|
||||
},
|
||||
operateForm(type, record = {}) {
|
||||
console.log(record,record.id,'rrrrrrrrrr')
|
||||
this.formStatus = type
|
||||
switch (type) {
|
||||
// case 'add':
|
||||
// this.formModal = true
|
||||
// this.formState = {}
|
||||
// this.getRuleFormInfo()
|
||||
|
||||
// break
|
||||
// case 'edit':
|
||||
// case 'read':
|
||||
// this.formModal = true
|
||||
// this.formState = record
|
||||
// this.getRuleFormInfo(record)
|
||||
// break
|
||||
|
||||
case 'del':
|
||||
// this.handleDelete([record.permission_id],this.getList)
|
||||
|
||||
break
|
||||
|
||||
case 'back':
|
||||
this.formModal = false
|
||||
this.getList()
|
||||
break
|
||||
|
||||
default:
|
||||
break
|
||||
}
|
||||
},
|
||||
// 删除操作
|
||||
async handleDelete(id,callback) {
|
||||
const that = this
|
||||
Modal.confirm({
|
||||
title: '你确认删除数据吗?',
|
||||
icon: createVNode(ExclamationCircleOutlined),
|
||||
|
||||
async onOk() {
|
||||
try {
|
||||
const res = await getReq('/deletepermission',{permission_id:id})
|
||||
if (res.errcode === 0) {
|
||||
this.$message.success(res.errmsg)
|
||||
this.pageOption.page=1
|
||||
callback()
|
||||
} else {
|
||||
throw res
|
||||
}
|
||||
} catch (error) {
|
||||
callback()
|
||||
}
|
||||
},
|
||||
onCancel() {
|
||||
// console.log("Cancel");
|
||||
},
|
||||
class: 'test'
|
||||
})
|
||||
},
|
||||
async getRuleFormInfo(record) {
|
||||
function getInfo(data, url) {
|
||||
return new Promise((reslove, reject) => {
|
||||
getReq(data, url).then((res) => {
|
||||
reslove(res.data)
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
let row = {}
|
||||
if (record && record.permission_id) {
|
||||
// row = await getInfo({ id: record.id },'/querypermissionList')
|
||||
this.record = record
|
||||
row = record
|
||||
// this.type='edit'
|
||||
}
|
||||
permissionOptions.forEach((e, index) => {
|
||||
e.list.forEach((i) => {
|
||||
|
||||
e.ruleForm[i.key] = row ? row[i.key] : ''
|
||||
e.ruleForm.id = row.id
|
||||
})
|
||||
})
|
||||
},
|
||||
handlePagesizeChange(pageOption) {
|
||||
this.pageOption.pageSize = pageOption.pageSize
|
||||
this.pageOption.page = pageOption.page
|
||||
this.getList()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.permission {
|
||||
height: 100%;
|
||||
|
||||
.content-table {
|
||||
height: calc(100% - 70px);
|
||||
padding: 10px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -23,7 +23,7 @@
|
||||
</template>
|
||||
<template #permission="record">
|
||||
<!-- 0:禁用; 1:启用 -->
|
||||
<span>{{record.permission.map(item=>item.name).toString() }}</span>
|
||||
<span>{{ record.permission.map((item) => item.name).toString() }}</span>
|
||||
</template>
|
||||
|
||||
<template #action="record">
|
||||
@@ -34,6 +34,7 @@
|
||||
<a-modal v-model:open="formModal" width="750px" style="top: 20px" :footer="null">
|
||||
<!-- action:edit add -->
|
||||
<EditCom
|
||||
:show-flag="formModal"
|
||||
:record="record"
|
||||
@operateForm="operateForm"
|
||||
type="role"
|
||||
@@ -125,25 +126,39 @@ export default {
|
||||
//统一处理报错提示
|
||||
}
|
||||
},
|
||||
async getPermissionList() {
|
||||
let arr = []
|
||||
|
||||
const params = {
|
||||
page_size: 1000,
|
||||
page: 1
|
||||
}
|
||||
|
||||
const res = await getReq('/queryPermissionList', params)
|
||||
if (res.errcode === 0) {
|
||||
arr = res.data
|
||||
} else {
|
||||
arr = []
|
||||
}
|
||||
return arr
|
||||
},
|
||||
operateForm(type, record = {}) {
|
||||
console.log(record,record.id,'rrrrrrrrrr')
|
||||
console.log(record, record.id, 'rrrrrrrrrr')
|
||||
this.formStatus = type
|
||||
switch (type) {
|
||||
case 'add':
|
||||
this.formModal = true
|
||||
this.formState = {}
|
||||
this.getRuleFormInfo()
|
||||
|
||||
break
|
||||
case 'edit':
|
||||
case 'read':
|
||||
this.formModal = true
|
||||
this.formState = record
|
||||
this.getRuleFormInfo(record)
|
||||
break
|
||||
|
||||
|
||||
case 'del':
|
||||
this.handleDelete([record.role_id],this.getList)
|
||||
this.handleDelete([record.role_id], this.getList)
|
||||
|
||||
break
|
||||
|
||||
@@ -157,7 +172,7 @@ export default {
|
||||
}
|
||||
},
|
||||
// 删除操作
|
||||
async handleDelete(id,callback) {
|
||||
async handleDelete(id, callback) {
|
||||
const that = this
|
||||
Modal.confirm({
|
||||
title: '你确认删除数据吗?',
|
||||
@@ -165,10 +180,10 @@ export default {
|
||||
|
||||
async onOk() {
|
||||
try {
|
||||
const res = await getReq('/deleteRole',{role_id:id})
|
||||
const res = await getReq('/deleteRole', { role_id: id })
|
||||
if (res.errcode === 0) {
|
||||
this.$message.success(res.errmsg)
|
||||
this.pageOption.page=1
|
||||
this.pageOption.page = 1
|
||||
callback()
|
||||
} else {
|
||||
throw res
|
||||
@@ -199,13 +214,37 @@ export default {
|
||||
row = record
|
||||
// this.type='edit'
|
||||
}
|
||||
const perList = await this.getPermissionList()
|
||||
const permissionList=perList.map((item)=>{
|
||||
return{
|
||||
key:+item.permission_id,
|
||||
...item
|
||||
}
|
||||
})
|
||||
console.log(permissionList, 'permissionList')
|
||||
|
||||
roleOptions.forEach((e, index) => {
|
||||
e.list.forEach((i) => {
|
||||
|
||||
e.ruleForm[i.key] = row ? row[i.key] : ''
|
||||
e.ruleForm.id = row.id
|
||||
if (i.key == 'permission') {
|
||||
i.tableData=permissionList
|
||||
// .forEach((item)=>{
|
||||
// .push({...item,key:item.permission_id})
|
||||
// })
|
||||
if (record && record.role_id) {
|
||||
i.selectTableData = row.permission
|
||||
? row.permissionList.map((item) => item.permission_id)
|
||||
: []
|
||||
} else {
|
||||
i.selectTableData = []
|
||||
}
|
||||
} else {
|
||||
e.ruleForm[i.key] = row ? row[i.key] : ''
|
||||
}
|
||||
})
|
||||
})
|
||||
console.log(permissionList,"permissionList")
|
||||
this.formModal = true
|
||||
|
||||
},
|
||||
handlePagesizeChange(pageOption) {
|
||||
this.pageOption.pageSize = pageOption.pageSize
|
||||
|
||||
252
web/src/views/system/service.vue
Normal file
252
web/src/views/system/service.vue
Normal file
@@ -0,0 +1,252 @@
|
||||
<template>
|
||||
<div class="service">
|
||||
<searchBox
|
||||
:btn-option-list="btnOptionList"
|
||||
@onSearch="onSearch"
|
||||
:search-options="searchOptions"
|
||||
@operateForm="operateForm"
|
||||
></searchBox>
|
||||
|
||||
<div class="content-table">
|
||||
<ComTable
|
||||
:columns="columns"
|
||||
:table-data="tableData"
|
||||
@handlePagesizeChange="handlePagesizeChange"
|
||||
ref="comTable"
|
||||
:table-option="tableOption"
|
||||
:page-option="pageOption"
|
||||
:table-h="tableH"
|
||||
>
|
||||
<template #is_open="record">
|
||||
<span>{{ ['禁用', '启用'][record.is_open] }}</span>
|
||||
</template>
|
||||
|
||||
|
||||
<template #action="record">
|
||||
<OperateCom :record="record" :operate-list="operateList" @operateForm="operateForm" />
|
||||
</template>
|
||||
</ComTable>
|
||||
</div>
|
||||
<a-modal v-model:open="formModal" width="750px" style="top: 20px" :footer="null">
|
||||
<!-- action:edit add -->
|
||||
<EditCom
|
||||
:record="record"
|
||||
@operateForm="operateForm"
|
||||
type="serviceApi"
|
||||
:action="formStatus"
|
||||
></EditCom>
|
||||
</a-modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { columnList, serviceApiOptions } from '../../../public/config/columnList'
|
||||
import { getReq, postReq } from '@/request/api.js'
|
||||
import ComTable from '@/components/ComTable'
|
||||
import OperateCom from '@/components/OperateCom'
|
||||
import EditCom from '@/components/EditCom.vue'
|
||||
import { ExclamationCircleOutlined } from '@ant-design/icons-vue'
|
||||
import { createVNode } from 'vue'
|
||||
import { Modal } from 'ant-design-vue'
|
||||
import searchBox from '@/components/SearchBox.vue'
|
||||
export default {
|
||||
name: '',
|
||||
components: {
|
||||
searchBox,
|
||||
EditCom,
|
||||
ComTable,
|
||||
OperateCom
|
||||
},
|
||||
props: {},
|
||||
data() {
|
||||
return {
|
||||
formModal: false,
|
||||
formState: {},
|
||||
formStatus: 'add', //表单状态辑状态 add:新增 edit:编辑
|
||||
pageOption: {
|
||||
pageSize: 10,
|
||||
page: 1
|
||||
},
|
||||
btnOptionList: [],
|
||||
paramsDate: {},
|
||||
workModeList:[
|
||||
{
|
||||
label:'最优经济化',
|
||||
value:1
|
||||
},
|
||||
{
|
||||
label:'支撑电网稳定',
|
||||
value:2
|
||||
},
|
||||
{
|
||||
label:'自定义',
|
||||
value:3
|
||||
},
|
||||
],
|
||||
policyList:[
|
||||
{
|
||||
label:'削峰套利',
|
||||
value:1
|
||||
},
|
||||
{
|
||||
label:'需求响应',
|
||||
value:2
|
||||
},
|
||||
{
|
||||
label:'自发自用',
|
||||
value:3
|
||||
},
|
||||
]
|
||||
}
|
||||
},
|
||||
computed: {},
|
||||
created() {
|
||||
let info = []
|
||||
let col = columnList.find((i) => i.page == 'serviceApi').columns
|
||||
if (col.length) {
|
||||
col.forEach((item) => {
|
||||
info.push(this.$setWidth(item))
|
||||
})
|
||||
}
|
||||
this.columns = info
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.operateList = this.$getBtns(['查看', '修改', '删除'])
|
||||
this.btnOptionList = this.$getBtns(['新增'])
|
||||
this.getList()
|
||||
},
|
||||
|
||||
methods: {
|
||||
async getList() {
|
||||
this.$refs.comTable.loading = true
|
||||
|
||||
const { page, pageSize } = this.pageOption
|
||||
|
||||
const params = {
|
||||
...this.paramsDate,
|
||||
page_size: pageSize,
|
||||
page
|
||||
}
|
||||
|
||||
try {
|
||||
const res = await getReq('/queryServiceApiList', params)
|
||||
if (res.errcode === 0) {
|
||||
this.$refs.comTable.loading = false
|
||||
|
||||
this.tableData = res.data
|
||||
|
||||
this.pageOption = {
|
||||
page: res.page,
|
||||
pageSize: res.page_size,
|
||||
count: res.count
|
||||
}
|
||||
} else {
|
||||
const err = { tip: res.errmsg }
|
||||
throw err
|
||||
}
|
||||
} catch (error) {
|
||||
//统一处理报错提示
|
||||
}
|
||||
},
|
||||
operateForm(type, record = {}) {
|
||||
console.log(record,record.id,'rrrrrrrrrr')
|
||||
this.formStatus = type
|
||||
switch (type) {
|
||||
case 'add':
|
||||
this.formModal = true
|
||||
this.formState = {}
|
||||
this.getRuleFormInfo()
|
||||
|
||||
break
|
||||
case 'edit':
|
||||
case 'read':
|
||||
this.formModal = true
|
||||
this.formState = record
|
||||
this.getRuleFormInfo(record)
|
||||
break
|
||||
|
||||
case 'del':
|
||||
this.handleDelete([record.api_id],this.getList)
|
||||
|
||||
break
|
||||
|
||||
case 'back':
|
||||
this.formModal = false
|
||||
this.getList()
|
||||
break
|
||||
|
||||
default:
|
||||
break
|
||||
}
|
||||
},
|
||||
// 删除操作
|
||||
async handleDelete(id,callback) {
|
||||
const that = this
|
||||
Modal.confirm({
|
||||
title: '你确认删除数据吗?',
|
||||
icon: createVNode(ExclamationCircleOutlined),
|
||||
|
||||
async onOk() {
|
||||
try {
|
||||
const res = await getReq('/deleteServiceApi',{api_id:id})
|
||||
if (res.errcode === 0) {
|
||||
this.$message.success(res.errmsg)
|
||||
this.pageOption.page=1
|
||||
callback()
|
||||
} else {
|
||||
throw res
|
||||
}
|
||||
} catch (error) {
|
||||
callback()
|
||||
}
|
||||
},
|
||||
onCancel() {
|
||||
// console.log("Cancel");
|
||||
},
|
||||
class: 'test'
|
||||
})
|
||||
},
|
||||
async getRuleFormInfo(record) {
|
||||
function getInfo(data, url) {
|
||||
return new Promise((reslove, reject) => {
|
||||
getReq(data, url).then((res) => {
|
||||
reslove(res.data)
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
let row = {}
|
||||
if (record && record.api_id) {
|
||||
// row = await getInfo({ api_id: record.api_id},'/queryserviceInfo')
|
||||
this.record = record
|
||||
row = record
|
||||
// this.type='edit'
|
||||
}
|
||||
serviceApiOptions.forEach((e, index) => {
|
||||
e.list.forEach((i) => {
|
||||
|
||||
e.ruleForm[i.key] = row ? row[i.key] : ''
|
||||
e.ruleForm.id = row.id
|
||||
})
|
||||
})
|
||||
},
|
||||
handlePagesizeChange(pageOption) {
|
||||
this.pageOption.pageSize = pageOption.pageSize
|
||||
this.pageOption.page = pageOption.page
|
||||
this.getList()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.service {
|
||||
height: 100%;
|
||||
|
||||
.content-table {
|
||||
height: calc(100% - 70px);
|
||||
padding: 10px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -17,13 +17,14 @@
|
||||
:page-option="pageOption"
|
||||
:table-h="tableH"
|
||||
>
|
||||
<template #is_open="record">
|
||||
<!-- 0:禁用; 1:启用 -->
|
||||
<span>{{ ['禁用', '启用'][record.is_open] }}</span>
|
||||
<template #status="record">
|
||||
<span>{{ ['未启用', '启用'][record.status] }}</span>
|
||||
</template>
|
||||
<template #permission="record">
|
||||
<!-- 0:禁用; 1:启用 -->
|
||||
<span>{{record.permission.map(item=>item.name).toString() }}</span>
|
||||
<template #work_mode_id="record">
|
||||
<span>{{workModeList.find(item=>record.value==item.value)?.label|| '' }}</span>
|
||||
</template>
|
||||
<template #policy_id="record">
|
||||
<span>{{policyList.find(item=>record.value==item.value)?.label|| ''}}</span>
|
||||
</template>
|
||||
|
||||
<template #action="record">
|
||||
@@ -72,7 +73,35 @@ export default {
|
||||
page: 1
|
||||
},
|
||||
btnOptionList: [],
|
||||
paramsDate: {}
|
||||
paramsDate: {},
|
||||
workModeList:[
|
||||
{
|
||||
label:'最优经济化',
|
||||
value:1
|
||||
},
|
||||
{
|
||||
label:'支撑电网稳定',
|
||||
value:2
|
||||
},
|
||||
{
|
||||
label:'自定义',
|
||||
value:3
|
||||
},
|
||||
],
|
||||
policyList:[
|
||||
{
|
||||
label:'削峰套利',
|
||||
value:1
|
||||
},
|
||||
{
|
||||
label:'需求响应',
|
||||
value:2
|
||||
},
|
||||
{
|
||||
label:'自发自用',
|
||||
value:3
|
||||
},
|
||||
]
|
||||
}
|
||||
},
|
||||
computed: {},
|
||||
@@ -194,7 +223,7 @@ export default {
|
||||
|
||||
let row = {}
|
||||
if (record && record.station_id) {
|
||||
row = await getInfo({ station_id: record.station_id},'/queryStationInfo')
|
||||
// row = await getInfo({ station_id: record.station_id},'/queryStationInfo')
|
||||
this.record = record
|
||||
row = record
|
||||
// this.type='edit'
|
||||
|
||||
Reference in New Issue
Block a user