admin-govern/src/views/govern/device/disposition/index.vue

<template>
    <div class="default-main device-manage" :style="{ height: pageHeight.height }" v-loading="loading">
        <GetMarketList @node-click="selectUser" @selectUser="selectUser"></GetMarketList>
        <div class="device-manage-right" :style="{ height: tableHeight }">
            <el-descriptions title="用户基本信息" class="mb10" :column="2" border>
                <template #extra>
                    <el-button type="primary" icon="el-icon-Plus" @click="getMarketEnginner">添加工程</el-button>
                </template>
                <el-descriptions-item label="名称">
                    {{ user.name }}
                </el-descriptions-item>
                <el-descriptions-item label="手机号">
                    {{ user.phone }}
                </el-descriptions-item>
            </el-descriptions>
            <vxe-table v-bind="defaultAttribute" :data="tableData" height="auto" style="width: 100%">
                <vxe-column field="engineerName" title="工程名称"></vxe-column>

                <vxe-column  title="操作">
                    <template v-slot:default="scoped">
                        <el-button
                                size="small"
                                type="danger"
                                icon="el-icon-Delete"
                                @click="deleteEngineering(scoped.row)"
                            >
                                移除
                            </el-button>
                    </template>
                </vxe-column>
            </vxe-table>
        </div>
    </div>
</template>

<script setup lang="ts">
defineOptions({
    name: 'govern/disposition/index'
})
import { defaultAttribute } from '@/components/table/defaultAttribute'
import GetMarketList from '@/components/tree/govern/getMarketList.vue'
import { mainHeight } from '@/utils/layout'
import { queryByUseId } from '@/api/cs-harmonic-boot/datatrend'
import { ref, onMounted } from 'vue'

const pageHeight = mainHeight(20)
const loading = ref(true)

const tableHeight = mainHeight(20).height
const user: any = ref({})
const tableData = ref([])

const selectUser = (e: any) => {
    user.value = e
    loading.value = true
    queryByUseId({
        userId: e.id
    }).then(res => {
        loading.value = false
        tableData.value = res.data
    })
}
const getMarketEnginner = () => {}
const deleteEngineering = (row:any) => {}
</script>

<style lang="scss">
.device-manage {
    display: flex;

    &-right {
        overflow: hidden;
        flex: 1;
        padding: 10px 10px 10px 0;
        .el-descriptions__header {
            height: 36px;
            margin-bottom: 7px;
            display: flex;
            align-items: center;
        }
    }
}
</style>