feat(web): 新增设备管理功能

- 新增设备管理页面和相关功能
This commit is contained in:
zhoumengru
2025-09-09 09:39:15 +08:00
36 changed files with 4123 additions and 815 deletions

View File

@@ -0,0 +1,209 @@
<template>
<div class="alarmLog">
<searchBox
:btn-option-list="btnOptionList"
@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 #type="record">
<span>{{ ['其它','系统日志','操作日志','设备日志'][record.type] }}</span>
</template>
<template #status="record">
<span><a-tag :color="record.status ? 'red' : 'green'">{{
record.status ? '异常' : '正常'
}}</a-tag></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="formState"
@operateForm="operateForm"
type="alarmLog"
:action="formStatus"
></EditCom>
</a-modal>
</div>
</template>
<script>
import { columnList, alarmlogOptions } from '../../../public/config/columnList'
import { getReq, postReq } from '@/request/api.js'
import EditCom from '@/components/EditCom.vue'
import { ExclamationCircleOutlined } from '@ant-design/icons-vue'
import { createVNode } from 'vue'
import { Modal } from 'ant-design-vue'
export default {
name: '',
components: {
EditCom,
},
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 == 'alarmLog').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('/querySystemLogList', 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) {
//统一处理报错提示
}
},
async operateForm(type, record = {}) {
this.formStatus = type
if(type=='edit'||type=='read'){
await this.getRuleFormInfo(record)
this.formModal = true
this.formState = record
}else if(type=='del'){
this.handleDelete([record.device_id],this.getList)
}else if(type=='back'){
this.formModal = false
this.getList()
}
},
// 删除操作
async handleDelete(id,callback) {
const that = this
Modal.confirm({
title: '你确认删除数据吗?',
icon: createVNode(ExclamationCircleOutlined),
async onOk() {
try {
const res = await getReq('/deleteUser',{user_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) {
const row = record || {}
for (let e of alarmlogOptions) {
for (let i of e.list) {
e.ruleForm[i.key] = row[i.key] || ''
// if (i.key === 'id') {
// e.ruleForm.id = row.id
// } else if (i.key === 'is_open') {
// e.ruleForm.is_open = Boolean(row.is_open)
// } else {
// e.ruleForm[i.key] = row[i.key] || ''
// }
// if (i.key === 'station_id') {
// i.list = this.stations
// }
// if(['rated_capacity', 'rated_current', 'rated_voltage', 'reted_power'].includes(i.key)){
// const attrs=JSON.parse(row.attrs||"{}")
// e.ruleForm[i.key] = attrs[i.key]
// }
}
}
},
handlePagesizeChange(pageOption) {
this.pageOption.pageSize = pageOption.pageSize
this.pageOption.page = pageOption.page
this.getList()
}
}
}
</script>
<style lang="scss" scoped>
.alarmLog {
height: 100%;
.content-table {
height: calc(100% - 70px);
padding: 10px;
}
}
</style>

View File

@@ -0,0 +1,241 @@
<template>
<div class="device">
<searchBox
:btn-option-list="btnOptionList"
@operateForm="operateForm"
></searchBox>
<div class="content-table">
<ComTable
:columns="columns"
:table-data="tableData"
@handlePagesizeChange="handlePagesizeChange"
ref="comTable"
:table-option="tableOption"
:page-option="pageOption"
>
<template #type="record">
<span>{{ getType(record.type) }}</span>
</template>
<template #isEnable="record">
<span><a-tag :color="record.is_open ? 'green' : 'red'">{{
record.is_open ? '启用' : '禁用'
}}</a-tag></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="formState"
@operateForm="operateForm"
type="device"
:action="formStatus"
></EditCom>
</a-modal>
</div>
</template>
<script>
import { columnList, deviceOptions } 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'
import {deviceTypeList} from '@/utils/config'
export default {
name: '',
components: {
searchBox,
EditCom,
ComTable,
OperateCom
},
props: {},
data() {
return {
deviceTypeList,
formModal: false,
formState: {},
formStatus: 'add', //表单状态辑状态 add:新增 edit:编辑
pageOption: {
pageSize: 10,
page: 1
},
btnOptionList: [],
paramsDate: {},
tableData:[],
tableOption:{},
stations:[],//场站列表
}
},
computed: {},
created() {
let info = []
let col = columnList.find((i) => i.page == 'device').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()
this.getStations()
},
methods: {
//查询场站列表
async getStations() {
this.stations=[]
try {
const res = await getReq('/queryStationList', { page: 0, 'page_size': 10000 })
this.stations = res.data
} catch (error) {
this.stations = []
}
return
},
//获取设备类型
getType(type){
const deviceType = this.deviceTypeList.find((item) => item.value == type).label||''
return deviceType
},
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('/queryDeviceList', 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) {
//统一处理报错提示
}
},
async operateForm(type, record = {}) {
this.formStatus = type
if(type=='add'){
this.formModal = true
this.formState = {}
this.getRuleFormInfo()
}else if(type=='edit'||type=='read'){
await this.getRuleFormInfo(record)
this.formModal = true
this.formState = record
}else if(type=='del'){
this.handleDelete([record.device_id],this.getList)
}else if(type=='back'){
this.formModal = false
this.getList()
}
},
// 删除操作
async handleDelete(id,callback) {
const that = this
Modal.confirm({
title: '你确认删除数据吗?',
icon: createVNode(ExclamationCircleOutlined),
async onOk() {
try {
const res = await getReq('/deleteDevice',{device_id:id})
if (res.errcode === 0) {
this.$message.success(res.errmsg)
this.pageOption.page=1
callback()
} else {
throw res
}
} catch (error) {
callback()
}
},
onCancel() {
},
class: 'test'
})
},
async getRuleFormInfo(record) {
const row = record || {}
for (let e of deviceOptions) {
for (let i of e.list) {
if (i.key === 'id') {
e.ruleForm.id = row.id
} else if (i.key === 'is_open') {
e.ruleForm.is_open = Boolean(row.is_open)
} else {
e.ruleForm[i.key] = row[i.key] || ''
}
if (i.key === 'station_id') {
i.list = this.stations
}
if(['rated_capacity', 'rated_current', 'rated_voltage', 'reted_power'].includes(i.key)){
const attrs=JSON.parse(row.attrs||"{}")
e.ruleForm[i.key] = attrs[i.key]
}
}
}
},
handlePagesizeChange(pageOption) {
this.pageOption.pageSize = pageOption.pageSize
this.pageOption.page = pageOption.page
this.getList()
}
}
}
</script>
<style lang="scss" scoped>
.device {
height: 100%;
.content-table {
height: calc(100% - 70px);
padding: 10px;
}
}
</style>

View File

@@ -0,0 +1,216 @@
<template>
<div class="alarmlog">
<searchBox
:btn-option-list="btnOptionList"
@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 #gender="record">
<!-- 0:; 1: -->
<span>{{ ['女', '男'][record.gender] }}</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="user"
:action="formStatus"
></EditCom>
</a-modal>
</div>
</template>
<script>
import { columnList, userOptions } from '../../../public/config/columnList'
import { getReq, postReq } from '@/request/api.js'
import EditCom from '@/components/EditCom.vue'
import { ExclamationCircleOutlined } from '@ant-design/icons-vue'
import { createVNode } from 'vue'
export default {
name: '',
components: {
EditCom
},
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 == 'alarmlog').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('/queryUserList', 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.user_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('/deleteUser', { user_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.user_id) {
// row = await getInfo({ id: record.id },'/queryUserList')
this.record = record
row = record
// this.type='edit'
}
userOptions.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>
.user {
height: 100%;
.content-table {
height: calc(100% - 70px);
padding: 10px;
}
}
</style>

View File

@@ -20,32 +20,7 @@
}}</a-tag>
</template>
<template #action="record">
<a-button
type="primary"
size="small"
@click="operateForm('read', record)"
style="margin-left: 10px"
>查看</a-button
>
<a-button
type="primary"
size="small"
@click="operateForm('edit', record)"
class="btn-edit"
style="margin-left: 10px"
>修改</a-button
>
<a-popconfirm
title="确认要删除数据吗?"
ok-text="确认"
cancel-text="取消"
@confirm="operateForm('del', record)"
@cancel="() => {}"
>
<a-button type="primary" size="small" class="btn-del" style="margin-left: 10px"
>删除</a-button
>
</a-popconfirm>
<OperateCom :record="record" :operate-list="operateList" @operateForm="operateForm" />
</template>
</ComTable>
</div>
@@ -67,6 +42,8 @@
import policyForm from '@/components/system/policyForm.vue'
import { getReq } from '@/request/api'
import { policyTypes } from '@/utils/config'
import { ExclamationCircleOutlined } from '@ant-design/icons-vue'
import { createVNode } from 'vue'
export default {
name: '',
components: { policyForm },
@@ -75,8 +52,6 @@ export default {
return {
formModal: false,
btnOptionList: [
{ label: '新增', icon: 'icon-tianjia', type: 'add' }
// { label: '删除', icon: 'icon-tianjia', type: 'del' }
],
columns: [
{
@@ -144,10 +119,13 @@ export default {
},
tableH: '',
formState: {},
formStatus: 'add' //表单状态辑状态 add:新增 edit:编辑
formStatus: 'add', //表单状态辑状态 add:新增 edit:编辑
operateList:[]
}
},
mounted() {
this.operateList = this.$getBtns(['查看', '修改', '删除'])
this.btnOptionList = this.$getBtns(['新增'])
this.getTableList()
},
methods: {
@@ -185,7 +163,7 @@ export default {
this.formState = record
break
case 'del':
this.handleDelete(record)
this.handleDelete(record.policy_id)
break
case 'edit':
this.formModal = true
@@ -195,18 +173,44 @@ export default {
break
}
},
async handleDelete(record) {
try {
const res = await getReq('/deletePolicy', {
policy_id: record['policy_id']
})
if (res.errcode == 0) {
this.$message.success('删除成功')
this.getTableList()
}
} catch (error) {
this.$message.success(error)
}
// async handleDelete(record) {
// try {
// const res = await getReq('/deletePolicy', {
// policy_id: record['policy_id']
// })
// if (res.errcode == 0) {
// this.$message.success('删除成功')
// this.getTableList()
// }
// } catch (error) {
// this.$message.success(error)
// }
// },
// 删除操作
async handleDelete(id) {
const that = this
this.$Modal.confirm({
title: '你确认删除数据吗?',
icon: createVNode(ExclamationCircleOutlined),
async onOk() {
try {
const res = await getReq('/deletePolicy', {
policy_id: id
})
if (res.errcode == 0) {
that.$message.success('删除成功')
that.getTableList()
}
} catch (error) {
that.$message.success(error)
}
},
onCancel() {
// console.log("Cancel");
},
class: 'test'
})
},
closeModal(flag = false) {
this.formModal = false
@@ -235,7 +239,7 @@ export default {
padding: 0 15px;
.content-table {
width: 100%;
height: calc(100% - 92px);
height: calc(100% - 90px);
}
}
</style>

View File

@@ -0,0 +1,228 @@
<template>
<div class="role">
<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">
<!-- 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>
</ComTable>
</div>
<a-modal v-model:open="formModal" width="750px" style="top: 20px" :footer="null">
<!-- action:edit add -->
<EditCom
:record="record"
@operateForm="operateForm"
type="role"
:action="formStatus"
></EditCom>
</a-modal>
</div>
</template>
<script>
import { columnList, roleOptions } 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: {}
}
},
computed: {},
created() {
let info = []
let col = columnList.find((i) => i.page == 'role').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('/queryRoleList', 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.role_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('/deleteRole',{role_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.role_id) {
// row = await getInfo({ id: record.id },'/queryroleList')
this.record = record
row = record
// this.type='edit'
}
roleOptions.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>
.role {
height: 100%;
.content-table {
height: calc(100% - 70px);
padding: 10px;
}
}
</style>

View File

@@ -0,0 +1,30 @@
<template>
<div >
</div>
</template>
<script>
export default {
name: '',
components:{
},
props: {
},
data() {
return {
}
},
mounted() {
},
methods:{
},
}
</script>
<style lang="scss" scoped>
</style>

View File

@@ -0,0 +1,228 @@
<template>
<div class="station">
<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">
<!-- 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>
</ComTable>
</div>
<a-modal v-model:open="formModal" width="750px" style="top: 20px" :footer="null">
<!-- action:edit add -->
<EditCom
:record="record"
@operateForm="operateForm"
type="station"
:action="formStatus"
></EditCom>
</a-modal>
</div>
</template>
<script>
import { columnList, stationOptions } 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: {}
}
},
computed: {},
created() {
let info = []
let col = columnList.find((i) => i.page == 'station').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('/queryStationList', 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.station_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('/deleteStation',{station_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.station_id) {
row = await getInfo({ station_id: record.station_id},'/queryStationInfo')
this.record = record
row = record
// this.type='edit'
}
stationOptions.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>
.station {
height: 100%;
.content-table {
height: calc(100% - 70px);
padding: 10px;
}
}
</style>

View File

@@ -17,48 +17,61 @@
:page-option="pageOption"
:table-h="tableH"
>
<template #gender="record">
<!-- 0:; 1: -->
<template #gender="record">
<!-- 0:; 1: -->
<span>{{ ['女', '男'][record.gender] }}</span>
</template>
<template #action="record">
<OperateCom :record="record" :operate-list="operateList" @operateForm="operateForm" />
</template>
</ComTable>
</div>
</ComTable>
</div>
<a-modal v-model:open="formModal" width="750px" style="top: 20px" :footer="null">
<!-- action:edit add -->
<EditCom
:record="record"
@operateForm="operateForm"
type="user"
:action="formStatus"
></EditCom>
</a-modal>
</div>
</template>
<script>
import { columnList } from '../../../public/config/columnList'
import { mapState } from 'vuex'
import { columnList, userOptions } 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 {
pageOption:{},
formModal: false,
formState: {},
formStatus: 'add', //表单状态辑状态 add:新增 edit:编辑
pageOption: {
pageSize: 10,
page: 1
},
btnOptionList: [],
paramsDate:{
}
paramsDate: {}
}
},
computed: {
...mapState(['page', 'detailType', 'type'])
},
computed: {},
created() {
let info = []
let col = columnList.find((i) => i.page == 'user').columns
@@ -69,10 +82,10 @@ export default {
}
this.columns = info
},
mounted() {
this.operateList = this.$getBtns(['查看', '编辑', '删除'])
this.btnOptionList = this.$getBtns(['新增', '批量删除'])
this.operateList = this.$getBtns(['查看', '修改', '删除'])
this.btnOptionList = this.$getBtns(['新增'])
this.getList()
},
@@ -89,7 +102,7 @@ export default {
}
try {
const res = await getReq('/api/queryUserList',params)
const res = await getReq('/queryUserList', params)
if (res.errcode === 0) {
this.$refs.comTable.loading = false
@@ -109,25 +122,29 @@ export default {
}
},
operateForm(type, record = {}) {
console.log(record,record.id,'rrrrrrrrrr')
this.formStatus = type
switch (type) {
case 'detail':
this.$store.commit('updateState', {
detailType: 'edit', //edit or view
page: 'detail',
title: '查看',
type: 'user'
})
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.user_id],this.getList)
break
case 'back':
this.$store.commit('updateState', {
page: 'main'
})
this.isShowFlag = false
this.formModal = false
this.getList()
break
@@ -135,6 +152,33 @@ export default {
break
}
},
// 删除操作
async handleDelete(id,callback) {
const that = this
Modal.confirm({
title: '你确认删除数据吗?',
icon: createVNode(ExclamationCircleOutlined),
async onOk() {
try {
const res = await getReq('/deleteUser',{user_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) => {
@@ -145,52 +189,36 @@ export default {
}
let row = {}
if (record.id) {
row = await getInfo({ id: record.id }, this.apiMethods[0].get)
this.record = row
this.$store.commit('updateState', {
// 配电柜-集中器-查看
title:
(row.cabinetName ? row.cabinetName + '-' : '') +
(row.name.split('集中器')[0] ? row.name.split('集中器')[0] : '') +
'集中器-查看'
})
if (record && record.user_id) {
// row = await getInfo({ id: record.id },'/queryUserList')
this.record = record
row = record
// this.type='edit'
}
let connectorType
cabinetOptions.forEach((e, index) => {
userOptions.forEach((e, index) => {
e.list.forEach((i) => {
if (index == 1) {
// 集中器状态
if (i.key == 'ctrMode' || i.key == 'powerStatus') {
e.ruleForm[i.key] = row.deviceStatus.lightStatus[i.key]
} else {
e.ruleForm[i.key] = row.deviceStatus[i.key]
}
} else if (i.key == 'connectorType') {
connectorType = row.deviceExtend[i.key]
e.ruleForm[i.key] = row.deviceExtend[i.key]
} else {
e.ruleForm[i.key] = row ? row[i.key] : ''
e.ruleForm.id = row.id
}
e.ruleForm[i.key] = row ? row[i.key] : ''
e.ruleForm.id = row.id
})
})
// C型控制器手自动状态和故障状态显示为“无”
if (connectorType == 1) {
cabinetOptions[1].ruleForm.status = 5
cabinetOptions[1].ruleForm.ctrMode = 5
}
this.isShowFlag = true
},
handlePagesizeChange(pageOption) {
this.pageOption.pageSize = pageOption.pageSize
this.pageOption.page = pageOption.page
this.getList()
}
}
}
</script>
<style lang="scss" scoped></style>
<style lang="scss" scoped>
.user {
height: 100%;
.content-table {
height: calc(100% - 70px);
padding: 10px;
}
}
</style>