mirror of
https://gitee.com/js-yhsec/energy_storage.git
synced 2026-05-28 03:09:24 +08:00
feat(web): 新增设备管理功能
- 新增设备管理页面和相关功能
This commit is contained in:
zhoumengru
420
web/src/components/EditCom.vue
Normal file
420
web/src/components/EditCom.vue
Normal file
@@ -0,0 +1,420 @@
|
||||
<template>
|
||||
<div class="editCom">
|
||||
<template v-for="(detailInfo, index) in detailInfos" :key="index">
|
||||
<DetailInfo
|
||||
:items="detailInfo"
|
||||
:rule-form="detailInfo.ruleForm"
|
||||
:form-rules="formRules"
|
||||
:ref="'detailInfo' + index"
|
||||
:disabled="disabled"
|
||||
>
|
||||
<template #role_id="item">
|
||||
<a-select
|
||||
:dropdown-match-select-width="false"
|
||||
v-model:value="detailInfo.ruleForm[item.key]"
|
||||
:placeholder="'请选择' + item.label"
|
||||
:disabled="disabled"
|
||||
allow-clear
|
||||
>
|
||||
<a-select-option
|
||||
:value="selectItem.role_id"
|
||||
v-for="selectItem in roleIdList"
|
||||
:key="selectItem.role_id"
|
||||
>
|
||||
{{ selectItem.name }}
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
</template>
|
||||
<template #treetable="item">
|
||||
<TreeTable
|
||||
:columns="item.columns"
|
||||
:table-data="item.tableData"
|
||||
ref="treeTable"
|
||||
:transfer-dialog="transferDialog"
|
||||
@handleDetailPagesizeChange="handleDetailPagesizeChange"
|
||||
:table-option="{
|
||||
checkStrictly: false,
|
||||
selectTableData: item.selectTableData,
|
||||
scroll: { y: 500 }
|
||||
}"
|
||||
>
|
||||
<template #isQuery="record">
|
||||
<a-tag :color="record.isQuery ? 'green' : 'red'">{{
|
||||
record.isQuery ? '启用' : '禁用'
|
||||
}}</a-tag>
|
||||
</template>
|
||||
<template #isEdit="record">
|
||||
<a-tag :color="record.isEdit ? 'green' : 'red'">{{
|
||||
record.isEdit ? '启用' : '禁用'
|
||||
}}</a-tag>
|
||||
</template>
|
||||
<template #isControl="record">
|
||||
<a-tag :color="record.isControl ? 'green' : 'red'">{{
|
||||
record.isControl ? '启用' : '禁用'
|
||||
}}</a-tag>
|
||||
</template>
|
||||
</TreeTable>
|
||||
</template>
|
||||
</DetailInfo>
|
||||
</template>
|
||||
|
||||
<div style="display: flex; justify-content: center; gap: 20px">
|
||||
<a-button @click="handleback">取消</a-button>
|
||||
<a-button @click="handleConfirm" type="primary" :disabled="disabled">确认</a-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
userOptions,
|
||||
userFormRules,
|
||||
roleOptions,
|
||||
roleFormRules,
|
||||
stationOptions,
|
||||
stationFormRules,
|
||||
deviceOptions,
|
||||
deviceFormRules,
|
||||
alarmlogOptions
|
||||
} from '../../public/config/columnList'
|
||||
import DetailInfo from './DetailInfo.vue'
|
||||
import { postReq, getReq } from '@/request/api'
|
||||
const dictionary = {
|
||||
menu: '菜单',
|
||||
file: '文件',
|
||||
role: '角色',
|
||||
permission: '权限',
|
||||
account: '账户',
|
||||
log: '日志',
|
||||
server: '服务',
|
||||
computer: '主机'
|
||||
}
|
||||
export default {
|
||||
name: '',
|
||||
components: { DetailInfo },
|
||||
props: {
|
||||
action: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
type: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
record: {
|
||||
type: Object,
|
||||
default: () => {}
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
tip: '正在加载...',
|
||||
roleIdList: [],
|
||||
transferDialog: false,
|
||||
detailInfos: [],
|
||||
disabled: true,
|
||||
formRules: {},
|
||||
apiMethods: {
|
||||
// menu: 'menuConfirm',
|
||||
// permission: 'permissionConfirm',
|
||||
user: 'userConfirm',
|
||||
role: 'roleConfirm',
|
||||
device: 'deviceConfirm'
|
||||
},
|
||||
form: {},
|
||||
ObjInfo: {},
|
||||
loading: false
|
||||
}
|
||||
},
|
||||
computed: {},
|
||||
watch: {
|
||||
action: {
|
||||
handler(n) {
|
||||
if (n === 'read') {
|
||||
this.disabled = true
|
||||
} else {
|
||||
this.disabled = false
|
||||
}
|
||||
},
|
||||
immediate: true
|
||||
},
|
||||
|
||||
type: {
|
||||
async handler(n) {
|
||||
switch (n) {
|
||||
case 'user':
|
||||
this.detailInfos = userOptions
|
||||
this.formRules = userFormRules
|
||||
break
|
||||
case 'menu':
|
||||
// this.detailInfos = menuOptions
|
||||
// this.formRules = menuFormRules
|
||||
break
|
||||
case 'permission':
|
||||
// this.detailInfos = permissionOptions
|
||||
// this.formRules = permissionFormRules
|
||||
break
|
||||
|
||||
case 'role':
|
||||
this.detailInfos = roleOptions
|
||||
this.formRules = roleFormRules
|
||||
break
|
||||
|
||||
case 'station':
|
||||
this.detailInfos = stationOptions
|
||||
this.formRules = stationFormRules
|
||||
|
||||
break
|
||||
case 'device':
|
||||
this.detailInfos = deviceOptions
|
||||
this.formRules = deviceFormRules
|
||||
break
|
||||
case 'alarmLog':
|
||||
this.detailInfos = alarmlogOptions
|
||||
this.formRules = {}
|
||||
|
||||
break
|
||||
|
||||
default:
|
||||
break
|
||||
}
|
||||
},
|
||||
immediate: true
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.getRoleIdList()
|
||||
},
|
||||
methods: {
|
||||
async getRoleIdList() {
|
||||
const params = {
|
||||
page_size: 1000,
|
||||
page: 1
|
||||
}
|
||||
try {
|
||||
const res = await getReq('/queryRoleList', params)
|
||||
if (res.errcode === 0) {
|
||||
this.roleIdList = res.data
|
||||
} else {
|
||||
const err = { tip: res.errmsg }
|
||||
throw err
|
||||
}
|
||||
} catch (error) {
|
||||
this.roleIdList = []
|
||||
//统一处理报错提示
|
||||
}
|
||||
},
|
||||
handleChange(value) {
|
||||
this.ip = ''
|
||||
this.selectComputer = value.option
|
||||
this.selectComputer.id = value.option.value
|
||||
this.ipList = this.getIpOptions(this.selectComputer.id)
|
||||
},
|
||||
|
||||
handleDetailPagesizeChange(val) {
|
||||
this.detailInfos[val[1]].list[0].detailPaginationOption = {
|
||||
...this.detailInfos[val[1]].list[0].detailPaginationOption,
|
||||
...val[0]
|
||||
}
|
||||
|
||||
if (this.detailInfos[val[1]].list[0].key === 'servebiaoge') {
|
||||
// 应用信息中消息模板需要通过接口调用数据
|
||||
let arr = {
|
||||
ids: this.clickId,
|
||||
pageIndex: val[0].current,
|
||||
pageSize: val[0].pageSize
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
handleRemove(file) {
|
||||
const index = this.fileList.indexOf(file)
|
||||
|
||||
this.fileList.splice(index, 1)
|
||||
},
|
||||
|
||||
beforeUpload(file, fileList) {
|
||||
this.fileList = [...this.fileList, file]
|
||||
|
||||
return false
|
||||
},
|
||||
|
||||
// 调用子组件的表单的方法
|
||||
async handleConfirm() {
|
||||
const result = []
|
||||
const { length } = this.detailInfos
|
||||
|
||||
for (let index = 0; index < length; index++) {
|
||||
// 校验规则
|
||||
const res = await this.$refs[`detailInfo${index}`][0].confirm()
|
||||
result.push(res)
|
||||
if (!res) {
|
||||
break
|
||||
}
|
||||
}
|
||||
if (result.every((item) => item == true)) {
|
||||
this.handleSubmit()
|
||||
}
|
||||
},
|
||||
handleSubmit() {
|
||||
const { length } = this.detailInfos
|
||||
let form = {}
|
||||
for (let index = 0; index < length; index++) {
|
||||
if (this.$refs[`detailInfo${index}`][0].ruleForm) {
|
||||
form = Object.assign(this.$refs[`detailInfo${index}`][0].ruleForm, form)
|
||||
} else {
|
||||
console.log('对象为空')
|
||||
}
|
||||
}
|
||||
this.form = form
|
||||
eval('this.' + this.apiMethods[this.type] + '()')
|
||||
},
|
||||
|
||||
async userConfirm() {
|
||||
try {
|
||||
const menuApi = {
|
||||
add: '/insertUser',
|
||||
edit: '/updateUser'
|
||||
}
|
||||
const paramsDate = {
|
||||
...this.form
|
||||
}
|
||||
if (this.action == 'edit') {
|
||||
paramsDate.user_id = this.record.user_id
|
||||
}
|
||||
|
||||
const res = await postReq(menuApi[this.action], paramsDate)
|
||||
if (res.errcode === 0) {
|
||||
setTimeout(() => {
|
||||
this.handleback()
|
||||
}, 1000)
|
||||
} else {
|
||||
throw res
|
||||
}
|
||||
} catch (error) {
|
||||
console.log(error, 'userConfirm')
|
||||
}
|
||||
},
|
||||
async roleConfirm() {
|
||||
try {
|
||||
const menuApi = {
|
||||
add: '/insertRole',
|
||||
edit: '/deleteRole'
|
||||
}
|
||||
const paramsDate = {
|
||||
...this.form
|
||||
}
|
||||
if (this.action == 'edit') {
|
||||
paramsDate.role_id = this.record.role_id
|
||||
}
|
||||
|
||||
const res = await postReq(menuApi[this.action], paramsDate)
|
||||
if (res.errcode === 0) {
|
||||
setTimeout(() => {
|
||||
this.handleback()
|
||||
}, 1000)
|
||||
} else {
|
||||
throw res
|
||||
}
|
||||
} catch (error) {
|
||||
console.log(error, 'roleConfirm')
|
||||
}
|
||||
},
|
||||
async stationConfirm() {
|
||||
try {
|
||||
const menuApi = {
|
||||
add: '/insertStation',
|
||||
edit: '/updateStation'
|
||||
}
|
||||
const paramsDate = {
|
||||
...this.form
|
||||
}
|
||||
if (this.action == 'edit') {
|
||||
paramsDate.station_id = this.record.station_id
|
||||
}
|
||||
|
||||
const res = await postReq(menuApi[this.action], paramsDate)
|
||||
if (res.errcode === 0) {
|
||||
setTimeout(() => {
|
||||
this.handleback()
|
||||
}, 1000)
|
||||
} else {
|
||||
throw res
|
||||
}
|
||||
} catch (error) {
|
||||
console.log(error, 'stationConfirm')
|
||||
}
|
||||
},
|
||||
async deviceConfirm() {
|
||||
try {
|
||||
const menuApi = {
|
||||
add: '/insertDevice',
|
||||
edit: '/updateDevice'
|
||||
}
|
||||
const { is_open, rated_capacity, rated_current, rated_voltage, reted_power } = this.form
|
||||
const paramsDate = {
|
||||
...this.form,
|
||||
is_open: Number(is_open),
|
||||
attrs: JSON.stringify({rated_capacity, rated_current, rated_voltage, reted_power})
|
||||
}
|
||||
|
||||
|
||||
if (this.action == 'edit') {
|
||||
paramsDate.device_id = this.record.device_id
|
||||
}
|
||||
|
||||
const res = await postReq(menuApi[this.action], paramsDate)
|
||||
if (res.errcode === 0) {
|
||||
this.$message.success('添加成功')
|
||||
setTimeout(() => {
|
||||
this.handleback()
|
||||
}, 1000)
|
||||
} else {
|
||||
throw res
|
||||
}
|
||||
} catch (error) {
|
||||
this.$message.error('添加失败')
|
||||
}
|
||||
},
|
||||
handleback() {
|
||||
this.$emit('operateForm', 'back')
|
||||
},
|
||||
getObjIds(selectKeys) {
|
||||
const ids = []
|
||||
for (let i = 0; i < selectKeys.length; i++) {
|
||||
ids.push({ id: selectKeys[i] })
|
||||
}
|
||||
|
||||
return ids
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.editCom {
|
||||
// height:400px;
|
||||
}
|
||||
.ant-upload-select-picture-card i {
|
||||
font-size: 32px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.ant-upload-select-picture-card .ant-upload-text {
|
||||
margin-top: 8px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.detail-header {
|
||||
display: flex;
|
||||
|
||||
span,
|
||||
div {
|
||||
margin: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.ant-picker) {
|
||||
color: var(--theme-text-default) !important;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user