admin-sjzx/src/views/pqs/business/terminal/TerminalManagement/components/disposition.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>