131 lines
5.0 KiB
Vue
131 lines
5.0 KiB
Vue
<template>
|
||
<!-- 网路参数 终端状态 基础流量 扩展流量 流量策略 策略类型 -->
|
||
<!-- 新增 -->
|
||
<el-dialog draggable :title="title" v-model="dialogVisible" width="50%" :before-close="cancel">
|
||
<el-form :inline="true" :model="formInline" style="display: flex; justify-content: space-between">
|
||
<el-form-item label="终端状态">
|
||
<el-select v-model="formInline.state" placeholder="Select" size="large" style="width: 240px">
|
||
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
|
||
</el-select>
|
||
</el-form-item>
|
||
|
||
<el-button type="primary" icon="el-icon-Check" @click="submit">设置提交</el-button>
|
||
</el-form>
|
||
<div :style="`height: calc(50vh)`">
|
||
<vxe-table
|
||
v-loading="loading"
|
||
height="auto"
|
||
auto-resize
|
||
ref="tableRef"
|
||
v-bind="defaultAttribute"
|
||
:data="treeData"
|
||
show-overflow
|
||
:tree-config="{ transform: true, parentField: 'uPid', rowField: 'uId' }"
|
||
:scroll-y="{ enabled: true }"
|
||
:checkbox-config="{ labelField: 'name' }"
|
||
>
|
||
<vxe-column field="name" align="left" title="电网拓扑" min-width="200" tree-node></vxe-column>
|
||
<vxe-column field="ip" title="网络参数" width="120px"></vxe-column>
|
||
<vxe-column field="runFlag" title="终端状态" v-if="key == 0">
|
||
<template #default="{ row }">
|
||
<el-tag v-if="row.runFlag === 0" type="success" size="small">投运</el-tag>
|
||
<el-tag v-if="row.runFlag === 1" type="warning" size="small">检修</el-tag>
|
||
<el-tag v-if="row.runFlag === 2" type="danger" size="small">停运</el-tag>
|
||
</template>
|
||
</vxe-column>
|
||
<vxe-column field="baseFlowMeal" title="基础套餐(MB)" v-if="key == 1"></vxe-column>
|
||
<vxe-column field="reamFlowMeal" title="扩展套餐(MB)" v-if="key == 1"></vxe-column>
|
||
<vxe-column field="flowStrategy" title="流量策略" v-if="key == 2"></vxe-column>
|
||
<vxe-column field="strategyFlag" title="策略类型" v-if="key == 2">
|
||
<template #default="{ row }">
|
||
<el-tag v-if="row.level === 4" type="primary">
|
||
{{ row.strategyFlag === 0 ? '定制' : '默认' }}
|
||
</el-tag>
|
||
</template>
|
||
</vxe-column>
|
||
</vxe-table>
|
||
</div>
|
||
</el-dialog>
|
||
</template>
|
||
<script setup lang="ts">
|
||
import { ref, reactive } from 'vue'
|
||
import { useDictData } from '@/stores/dictData'
|
||
import { ElMessage } from 'element-plus'
|
||
import { defaultAttribute } from '@/components/table/defaultAttribute'
|
||
import { getStatusManageList, updateRunFlagManage } from '@/api/device-boot/Business'
|
||
|
||
const dictData = useDictData()
|
||
const dialogVisible = ref(false)
|
||
const emit = defineEmits(['onSubmit'])
|
||
const loading = ref(false)
|
||
const title = ref('')
|
||
const tableRef = ref()
|
||
const key = ref(0) //判断是什么配置
|
||
const treeData: any = ref([])
|
||
const treeDataCopy: any = ref([])
|
||
const formInline = reactive({
|
||
state: '0'
|
||
})
|
||
const ids = ref([])
|
||
const options = [
|
||
{ value: '0', label: '投运' },
|
||
{ value: '1', label: '检修' },
|
||
{ value: '2', label: '停运' }
|
||
]
|
||
const open = (e: any) => {
|
||
ids.value = []
|
||
title.value = e.title
|
||
loading.value = true
|
||
key.value = e.key
|
||
ids.value = e.id
|
||
getStatusManageList(e.id).then(res => {
|
||
treeData.value = tree2List(res.data, Math.random() * 1000)
|
||
treeDataCopy.value = JSON.parse(JSON.stringify(treeData.value))
|
||
setTimeout(() => {
|
||
tableRef.value.setAllTreeExpand(true)
|
||
}, 0)
|
||
loading.value = false
|
||
})
|
||
dialogVisible.value = true
|
||
}
|
||
// 提交配置
|
||
const submit = () => {
|
||
updateRunFlagManage({
|
||
ids: ids.value,
|
||
runFlag: formInline.state
|
||
}).then(res => {
|
||
ElMessage.success('设置成功')
|
||
emit('onSubmit')
|
||
dialogVisible.value = false
|
||
})
|
||
}
|
||
// 处理大数据卡顿
|
||
const tree2List = (list: any, id: any) => {
|
||
//存储结果的数组
|
||
let arr: any = []
|
||
// 遍历 tree 数组
|
||
list.forEach((item: any) => {
|
||
item.uPid = id
|
||
item.uId = Math.random() * 1000
|
||
|
||
// 判断item是否存在children
|
||
if (!item.children) return arr.push(item)
|
||
// 函数递归，对children数组进行tree2List的转换
|
||
const children = tree2List(item.children, item.uId)
|
||
// 删除item的children属性
|
||
delete item.children
|
||
// 把item和children数组添加至结果数组
|
||
//..children: 意思是把children数组展开
|
||
arr.push(item, ...children)
|
||
})
|
||
// 返回结果数组
|
||
return arr
|
||
}
|
||
const cancel = () => {
|
||
dialogVisible.value = false
|
||
}
|
||
|
||
defineExpose({ open })
|
||
</script>
|
||
<style lang="scss" scoped></style>
|