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: pageHeight.height }">
            <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>
            <div :style="{ height: tableHeight.height }">
                <vxe-table v-bind="defaultAttribute" :data="tableData" height="auto" style="width: 100%">
                    <vxe-column field="engineerName" title="工程名称"></vxe-column>

                    <vxe-column title="操作" width="200px">
                        <template v-slot:default="scoped">
                            <el-button link size="small" type="danger" @click="deleteEngineering(scoped.row)">
                                移除
                            </el-button>
                        </template>
                    </vxe-column>
                </vxe-table>
            </div>
        </div>
        <el-dialog v-model.trim="dialogVisible" title="添加工程" class="cn-operate-dialog" :close-on-click-modal="false">
            <el-input maxlength="32" show-word-limit v-model.trim="filterText" icon="el-icon-Search" placeholder="请输入内容"
                clearable style="margin-bottom: 10px">
                <template #prefix>
                    <Icon name="el-icon-Search" style="font-size: 16px" />
                </template>
            </el-input>

            <vxe-table ref="tableRef" v-bind="defaultAttribute" :data="tableData2.filter((item: any) => {
                return item.name.includes(filterText)
            })
                " height="500px" style="width: 100%">
                <vxe-column type="checkbox" width="60"></vxe-column>
                <vxe-column field="name" title="工程名称"></vxe-column>
            </vxe-table>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="dialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="addMarketData">确 定</el-button>
                </span>
            </template>
        </el-dialog>
    </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, add, removeMarketData, queryEnginnerByUseId } from '@/api/cs-device-boot/user'
import { ref, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'

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

const tableHeight = mainHeight(135)
const user: any = ref({})
const tableData = ref([])
const tableData2 = ref([])
const dialogVisible = ref(false)
const filterText = ref('')
const tableRef = 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 = () => {
    filterText.value = ''

    queryEnginnerByUseId({ userId: user.value.id }).then(res => {
        tableData2.value = res.data
        dialogVisible.value = true
        setTimeout(() => {
            tableRef.value.clearCheckboxRow()
        }, 0)
    })
}
const deleteEngineering = (row: any) => {
    ElMessageBox.confirm('是否移出该工程?', '请确认', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
    }).then(() => {
        removeMarketData({ ids: row.id }).then((res: any) => {
            ElMessage.success(res.message)
            selectUser(user.value)
        })
    })
}
const addMarketData = () => {
    const table = tableRef.value.getCheckboxRecords()

    if (table.length === 0) {
        ElMessage.warning('请选择要添加的工程')
    }
    let form: any = tableData.value.map((item: any) => {
        return {
            engineerId: item.engineerId,
            userId: user.value.id
        }
    })
    table.forEach((item: any) => {
        form.push({
            engineerId: item.id,
            userId: user.value.id
        })
    })
    add(form).then((res: any) => {
        ElMessage.success(res.message)
        selectUser(user.value)
        dialogVisible.value = false
    })
}
</script>

<style lang="scss" scoped>
.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>