map/ui/dasadmin/src/views/backend/auth/equipmentManagement/index.vue

<template>
    <!-- 设备 -->
    <div class="ba-user-container">
        <el-container class="defaultContainer">
            <el-aside class="defaultAside">
                <el-main class="treeMain">
                    <el-tree
                        style="max-width: 600px; margin-top: 2.2%"
                        :data="userData"
                        :props="defaultProps"
                        node-key="id"
                        :load="loadNode"
                        lazy
                        @node-click="handleNodeClick"
                    />
                </el-main>
            </el-aside>
            <el-container class="defaultMainContainer">
                <el-header class="defaultHeader">
                    <el-space>
                        <el-input v-model="headerForm.searchFor"></el-input>
                        <el-radio-group v-model="headerForm.resource">
                            <el-radio value="1" label="名称"></el-radio>
                            <el-radio value="2" label="编码"></el-radio>
                        </el-radio-group>
                        <el-button type="primary" :icon="Search" class="defaultBtn">查询</el-button>
                    </el-space>
                    <div style="display: flex; align-items: center">
                        <div>
                            <el-button size="large" :icon="CirclePlusFilled" type="primary" class="defaultBtn" @click="addDeviceList">新增</el-button>
                        </div>
                        <div>
                            <el-upload
                                v-model:file-list="fileList"
                                class="upload-demo"
                                action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
                                multiple
                                :on-preview="handlePreview"
                                :on-remove="handleRemove"
                                :before-remove="beforeRemove"
                                :limit="3"
                                :on-exceed="handleExceed"
                                style="margin: 0 10px 0 10px; display: flex; align-items: center"
                            >
                                <el-button size="large" :icon="Upload" style="display: flex; align-items: center" class="defaultBtn">导入</el-button>
                            </el-upload>
                        </div>
                        <div>
                            <el-button size="large" :icon="Download" class="defaultBtn">导出</el-button>
                        </div>
                    </div>
                </el-header>
                <el-main class="defaultMain">
                    <el-table ref="multipleTableRef" :data="deviceList" class="tablePart">
                        <el-table-column type="selection" />
                        <el-table-column property="account" label="设备名称" />
                        <el-table-column property="userName" label="设备编码" />
                        <el-table-column property="userName" label="生产厂家" />
                        <el-table-column property="userName" label="资产性质" />
                        <el-table-column property="address" label="操作">
                            <template #default="scope">
                                <span style="color: #0064aa; cursor: pointer" @click="viewDeviceDetails">查看 </span>
                                <span style="color: #0064aa"> | </span>
                                <span style="color: #0064aa; cursor: pointer" @click=""> 删除 </span>
                                <span style="color: #0064aa"> | </span>
                                <span style="color: #0064aa; cursor: pointer"> 门户 </span>
                                <span style="color: #0064aa"> | </span>
                                <span style="color: #0064aa; cursor: pointer"> 密码</span>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-main>
            </el-container>
            <!-- 查看设备详情页面 -->
            <el-dialog v-model="editDeviceDialog" title="编辑设备台账" width="1000" :before-close="handleCloseEditDevice">
                <el-form
                    ref="modifyDeviceDetails"
                    :inline="true"
                    label-width="auto"
                    :model="editDeviceData"
                    :rules="editDeviceRules"
                    style="padding: 20px 33px; font-size: 14px; line-height: 1.5; word-wrap: break-word; font-size: 20px"
                >
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="设备类型:">
                                <el-select v-model="editDeviceData.object_type" placeholder="Select" style="width: 190px">
                                    <el-option v-for="item in TypeOptions" :key="item.value" :label="item.label" :value="item.value" />
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="物模型ID:">
                                <el-select v-model="editDeviceData.objectModelId" placeholder="Select" style="width: 190px">
                                    <el-option v-for="item in TypeOptions" :key="item.value" :label="item.label" :value="item.value" />
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="设备名称:" prop="name">
                                <el-input v-model="editDeviceData.name" placeholder="请输入设备名称" clearable />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="设备编码:" prop="code">
                                <el-input v-model="editDeviceData.code" placeholder="请输入设备编码" clearable />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="管理部门:" prop="administrative">
                                <el-tree-select
                                    v-model="editDeviceData.administrative"
                                    :data="data"
                                    :render-after-expand="false"
                                    style="width: 190px"
                                />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="状态标识" prop="statusIdentification">
                                <el-select v-model="editDeviceData.statusIdentification" placeholder="Select" style="width: 190px">
                                    <el-option v-for="item in TypeOptions" :key="item.value" :label="item.label" :value="item.value" />
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="生产厂家:">
                                <el-input v-model="editDeviceData.manufacturer" placeholder="请输入生产厂家" clearable />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="规格型号:">
                                <el-input v-model="editDeviceData.specification" placeholder="请输入规格型号" clearable />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="出厂日期:">
                                <el-date-picker
                                    v-model="editDeviceData.productionData"
                                    type="date"
                                    style="width: 190px"
                                    placeholder="请输入出厂日期"
                                    :size="size"
                                />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="出厂编号:">
                                <el-input v-model="editDeviceData.startNumber" placeholder="请输入出厂编号" clearable />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="物资编号:">
                                <el-input v-model="editDeviceData.itemNumber" placeholder="请输入物资编号" clearable />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="资产性质:">
                                <el-input v-model="editDeviceData.assetNature" placeholder="请输入资产性质" clearable />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="设备等级:">
                                <el-input v-model="editDeviceData.equipmentLevel" placeholder="请输入设备等级" clearable />
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>

                <template #footer>
                    <div class="dialog-footer">
                        <el-button type="primary" @click="editDeviceDialog = false"> 取消 </el-button>
                        <el-button @click="saveData">保存</el-button>
                    </div>
                </template>
            </el-dialog>
            <!-- 新增设备详情页面 -->
            <el-dialog v-model="editAddDeviceDialog" title="新增设备台账" width="1000" :before-close="handleCloseAddEditDevice">
                <el-form
                    ref="modifyAddDeviceDetails"
                    :inline="true"
                    label-width="auto"
                    :model="editAddDeviceData"
                    :rules="editAddDeviceRules"
                    style="padding: 20px 33px; font-size: 14px; line-height: 1.5; word-wrap: break-word; font-size: 20px"
                >
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="设备类型:">
                                <el-select v-model="editDeviceData.object_type" placeholder="Select" style="width: 190px">
                                    <el-option v-for="item in TypeOptions" :key="item.value" :label="item.label" :value="item.value" />
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="物模型ID:">
                                <el-select v-model="editDeviceData.objectModelId" placeholder="Select" style="width: 190px">
                                    <el-option v-for="item in TypeOptions" :key="item.value" :label="item.label" :value="item.value" />
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="设备名称:" prop="name">
                                <el-input v-model="editAddDeviceData.name" placeholder="请输入设备名称" clearable />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="设备编码:" prop="code">
                                <el-input v-model="editAddDeviceData.code" placeholder="请输入设备编码" clearable />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="管理部门:" prop="administrative">
                                <el-tree-select
                                    v-model="editAddDeviceData.administrative"
                                    :data="data"
                                    :render-after-expand="false"
                                    style="width: 190px"
                                />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="状态标识" prop="statusIdentification">
                                <el-select v-model="editAddDeviceData.statusIdentification" placeholder="Select" style="width: 190px">
                                    <el-option v-for="item in TypeOptions" :key="item.value" :label="item.label" :value="item.value" />
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="生产厂家:">
                                <el-input v-model="editAddDeviceData.manufacturer" placeholder="请输入生产厂家" clearable />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="规格型号:">
                                <el-input v-model="editAddDeviceData.specification" placeholder="请输入规格型号" clearable />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="出厂日期:">
                                <el-date-picker
                                    v-model="editAddDeviceData.productionData"
                                    type="date"
                                    style="width: 190px"
                                    placeholder="请输入出厂日期"
                                    :size="size"
                                />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="出厂编号:">
                                <el-input v-model="editAddDeviceData.startNumber" placeholder="请输入出厂编号" clearable />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="投运日期:">
                                <el-date-picker
                                    v-model="editAddDeviceData.itemNumber"
                                    type="date"
                                    style="width: 190px"
                                    placeholder="请输入投运日期"
                                    :size="size"
                                />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="安装位置:">
                                <el-input v-model="editAddDeviceData.installationPosition" placeholder="请输入安装位置" clearable />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="额定电压(kV):">
                                <el-input v-model="editAddDeviceData.ratedVoltage" placeholder="请输入额定电压" clearable />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="额定电流(A):">
                                <el-input v-model="editAddDeviceData.ratedCurrent" placeholder="请输入额定电流" clearable />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="额定功率(kW):">
                                <el-input v-model="editAddDeviceData.ratedPower" placeholder="请输入额定功率" clearable />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="站控KEY:">
                                <el-input v-model="editAddDeviceData.stationControlKey" placeholder="请输入站控KEY" clearable />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="分类:">
                                <el-select v-model="editAddDeviceData.classification" placeholder="Select" style="width: 190px">
                                    <el-option v-for="item in TypeOptions" :key="item.value" :label="item.label" :value="item.value" />
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>

                <template #footer>
                    <div class="dialog-footer">
                        <el-button type="primary" @click="editAddDeviceDialog = false"> 取消 </el-button>
                        <el-button @click="saveAddData">保存</el-button>
                    </div>
                </template>
            </el-dialog>
        </el-container>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { Search, CirclePlusFilled, Upload, Download } from '@element-plus/icons-vue'
import { userList } from '../../../../api/backend/index'
import { ElTable, ElMessage, ElMessageBox } from 'element-plus'
import type { UploadProps, UploadUserFile  } from 'element-plus'
import type Node from 'element-plus/es/components/tree/src/model/node'

interface Tree {
    label: string
    children?: Tree[]
    id: string
}

// 设备左边树
const treeQuery = reactive({
    parentOrgId: '',
})

const userData = ref()

const getTree = () => {
    console.log(treeQuery, 'treeQuery')

    userList(treeQuery).then((res) => {
        console.log(res, '树')
        userData.value = res.data
    })
}

onMounted(() => {
    getTree()
})

const formQuery = reactive({
    orgId: '',
    recursive: false,
    pageSize: 10,
    pageNum: 1,
})

const treeId = ref()

const handleNodeClick = (data: Tree) => {
    console.log(data.id, 'data')

    treeId.value = data.id
    formQuery.orgId = data.id
    console.log(formQuery, 444444444)
}

const loadNode = (node: Node, resolve: (data: Tree[]) => void) => {
    if (node.level === 0) {
        return resolve([])
    }

    const treeQuery = reactive({
        parentOrgId: node.data.id,
    })

    userList(treeQuery)
        .then((res) => {
            console.log(res, '树')
            // userData.value = res.data
            return resolve(res.data)
        })
        .catch((err) => {
            console.log(err)
        })
}

const defaultProps = {
    children: 'children',
    label: 'name',
}

// 头部搜索框按钮功能
const headerForm = reactive({
    searchFor: '',
    resource: '2',
})

const addDeviceList = () => {
    editAddDeviceDialog.value = true
}

const fileList = ref<UploadUserFile[]>([
    {
        name: 'element-plus-logo.svg',
        url: 'https://element-plus.org/images/element-plus-logo.svg',
    },
    {
        name: 'element-plus-logo2.svg',
        url: 'https://element-plus.org/images/element-plus-logo.svg',
    },
])

const handleRemove: UploadProps['onRemove'] = (file, uploadFiles) => {
    console.log(file, uploadFiles)
}

const handlePreview: UploadProps['onPreview'] = (uploadFile) => {
    console.log(uploadFile)
}

const handleExceed: UploadProps['onExceed'] = (files, uploadFiles) => {
    ElMessage.warning(`The limit is 3, you selected ${files.length} files this time, add up to ${files.length + uploadFiles.length} totally`)
}

const beforeRemove: UploadProps['beforeRemove'] = (uploadFile, uploadFiles) => {
    return ElMessageBox.confirm(`Cancel the transfer of ${uploadFile.name} ?`).then(
        () => true,
        () => false
    )
}

const deviceList = [
    [
        {
            date: '2016-05-03',
            name: 'Tom',
            address: 'No. 189, Grove St, Los Angeles',
        },
        {
            date: '2016-05-02',
            name: 'Tom',
            address: 'No. 189, Grove St, Los Angeles',
        },
        {
            date: '2016-05-04',
            name: 'Tom',
            address: 'No. 189, Grove St, Los Angeles',
        },
        {
            date: '2016-05-01',
            name: 'Tom',
            address: 'No. 189, Grove St, Los Angeles',
        },
    ],
]

// 查看设备详情
const editDeviceDialog = ref(false)

const editDeviceData = reactive({
    object_type: '',
    objectModelId: '',
    name: '',
    code: '',
    administrative: '',
    statusIdentification: '',
    manufacturer: '',
    specification: '',
    productionData: '',
    startNumber: '',
    itemNumber: '',
    assetNature: '',
    equipmentLevel: '',
})

const TypeOptions = [
    {
        value: 'Option1',
        label: 'Option1',
    },
    {
        value: 'Option2',
        label: 'Option2',
    },
    {
        value: 'Option3',
        label: 'Option3',
    },
    {
        value: 'Option4',
        label: 'Option4',
    },
    {
        value: 'Option5',
        label: 'Option5',
    },
]

const data = [
    {
        value: '1',
        label: 'Level one 1',
        children: [
            {
                value: '1-1',
                label: 'Level two 1-1',
                children: [
                    {
                        value: '1-1-1',
                        label: 'Level three 1-1-1',
                    },
                ],
            },
        ],
    },
    {
        value: '2',
        label: 'Level one 2',
        children: [
            {
                value: '2-1',
                label: 'Level two 2-1',
                children: [
                    {
                        value: '2-1-1',
                        label: 'Level three 2-1-1',
                    },
                ],
            },
            {
                value: '2-2',
                label: 'Level two 2-2',
                children: [
                    {
                        value: '2-2-1',
                        label: 'Level three 2-2-1',
                    },
                ],
            },
        ],
    },
    {
        value: '3',
        label: 'Level one 3',
        children: [
            {
                value: '3-1',
                label: 'Level two 3-1',
                children: [
                    {
                        value: '3-1-1',
                        label: 'Level three 3-1-1',
                    },
                ],
            },
            {
                value: '3-2',
                label: 'Level two 3-2',
                children: [
                    {
                        value: '3-2-1',
                        label: 'Level three 3-2-1',
                    },
                ],
            },
        ],
    },
]

const size = ref<'default' | 'large' | 'small'>('default')

const handleCloseEditDevice = () => {
    editDeviceDialog.value = false
}

const viewDeviceDetails = () => {
    editDeviceDialog.value = true
}

const editDeviceRules = reactive({
    name: [
        {
            required: true,
            message: '设备名称不能为空',
            trigger: 'blur',
        },
    ],
    code: [
        {
            required: true,
            message: '设备编码不能为空',
            trigger: 'blur',
        },
    ],
    administrative: [
        {
            required: true,
            message: '管理部门不能为空',
            trigger: 'blur',
        },
    ],
    statusIdentification: [
        {
            required: true,
            message: '状态标识不能为空',
            trigger: 'blur',
        },
    ],
})
const modifyDeviceDetails = ref()
const saveData = () => {
    modifyDeviceDetails.value.validate((valid: any) => {
        if (valid) {
            editDeviceDialog.value = false
        } else {
            console.log('error submit!!')
            return false
        }
    })
}

// 新增设备
const editAddDeviceData = reactive({
    object_type: '',
    objectModelId: '',
    name: '',
    code: '',
    administrative: '',
    statusIdentification: '',
    manufacturer: '',
    specification: '',
    productionData: '',
    startNumber: '',
    itemNumber: '',
    installationPosition: '',
    ratedVoltage: '',
    ratedCurrent: '',
    ratedPower: '',
    stationControlKey: '',
    classification: '',
})

const editAddDeviceRules = reactive({
    name: [
        {
            required: true,
            message: '设备名称不能为空',
            trigger: 'blur',
        },
    ],
    code: [
        {
            required: true,
            message: '设备编码不能为空',
            trigger: 'blur',
        },
    ],
    administrative: [
        {
            required: true,
            message: '管理部门不能为空',
            trigger: 'blur',
        },
    ],
    statusIdentification: [
        {
            required: true,
            message: '状态标识不能为空',
            trigger: 'blur',
        },
    ],
})

const editAddDeviceDialog = ref(false)
const modifyAddDeviceDetails = ref()
const saveAddData = () => {
    modifyAddDeviceDetails.value.validate((valid: any) => {
        if (valid) {
            editAddDeviceDialog.value = false
        }
    })
}
const handleCloseAddEditDevice = () => {
    editAddDeviceDialog.value = false
}
</script>

<style scoped lang="scss">
.el-col {
    // border-radius: 4px;
    background-color: #fff;
}
@mixin searchInput($value) {
    margin-right: $value;
    width: 220px;
    height: 40px;
}
$defaultHeaderHeight: 60px;
$defaultMainHeight: calc(100% - 60px);
$paginationHeight: 32px;
.ba-user-container {
    width: 100%;
    height: 100%;
    // background-color: #fff;
    .defaultContainer {
        height: 100%;
        .defaultAside {
            width: 260px;
            height: 100%;
            border-right: 1px solid #eaebed;
            .treeHeader {
                display: flex;
                align-items: center;
                justify-content: center;
                height: $defaultHeaderHeight;
                .searchInput {
                    @include searchInput(0);
                }
            }
            .treeMain {
                height: $defaultMainHeight;
                .treePart {
                    height: 100%;
                }
            }
        }
        .defaultMainContainer {
            height: 100%;
            .defaultHeader {
                display: flex;
                justify-content: space-between;
                align-items: center;
                height: $defaultHeaderHeight;
                .searchPart {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                }
                .defaultBtn {
                    width: 88px;
                    height: 40px;
                }
                .searchInput {
                    @include searchInput(10px);
                }
            }
            .defaultMain {
                height: $defaultMainHeight;
                .tablePart {
                    height: calc(100% - $paginationHeight);
                }
                .tableOperate {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    a {
                        margin: 5px;
                        color: #0064aa;
                        font-weight: 600;
                        &:hover {
                            cursor: pointer;
                        }
                    }
                }
            }
        }
    }
}
</style>