elementui table实现动态将列固定到左侧(fixed)

拼搏现实的明天。 2023-06-11 03:15 2阅读 0赞

## 前言 ##

这个功能是是[elementui表格的列拖拽及动态显示列实现][elementui]基础上进行的功能增强

在开始之前请自行查询v-contextmenu 组件的安装以及全局引用  
注：后端开发前端实现并不规范，主要讲个思路，代码优化看你了（如果有可以私信或者评论告诉我，跪谢）

## 正文 ##

1.  创建下拉菜单

2.绑定table的header右键事件：

<el-table
                    v-loading="listLoading"
                    :data="list"
                    border
                    fit
                    size="mini"
                    :row-class-name="rowClassName"
                    :cell-class-name="cellClassName"
                    highlight-current-row
                    style="width: 100%;margin-top: 20px"
                    @selection-change="handleSelectionChange"
                    @sort-change="changeSort"
                    @header-contextmenu="rightClick"
                    ref="filterTable"
            >
                <el-table-column
                        type="selection"
                        fixed="left"
                        width="55">
                </el-table-column>
                <el-table-column type="index" align="center" width="50"   fixed="left">
                </el-table-column>
                <el-table-column v-for="(item, index) in col"
                                 v-if="col[index].prop!=='select'&&col[index].prop!=='index'"
                                 align="center"
                                 :index="index"
                                 :sortable="dropCol[index].sort"
                                 show-overflow-tooltip
                                 :width="dropCol[index].width?dropCol[index].width:'200px'"
                                 :key="`col_${index}`"
                                 :fixed="dropCol[index].fixed"
                                 :prop="dropCol[index].prop"
                                 :label="item.label">
                    <template slot-scope="scope">
                        <span>{ {  !dropCol[index].type?scope.row[dropCol[index].prop]:getValue(scope.row,dropCol[index].type),dropCol[index].prop }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作" align="center" fixed="right" width="200" class-name="small-padding fixed-width">
                    <template slot-scope="scope">
                        <el-dropdown trigger="hover">
                <span class="el-dropdown-link">
                  操作菜单<i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item class="el-dropdown-link" @click.native="cpuInfo(scope.row)">硬件信息
                                </el-dropdown-item>
                                
                                
                                
                                <el-dropdown-item class="el-dropdown-link" @click.native="historyInfo(scope.row)">历史变更
                                </el-dropdown-item>
                                <el-dropdown-item class="el-dropdown-link" @click.native="editDevice(scope.row)">编辑资产
                                </el-dropdown-item>
                                <el-dropdown-item class="el-dropdown-link" @click.native="deleteDevice(scope.row)">删除资产
                                </el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </template>
                </el-table-column>
            </el-table>

1.  禁用原有的右键事件

document.oncontextmenu = function(){ 
                    return false;
                }

1.  配置列表信息

let allCols = [
                        { prop: "select", label: "选择", sort: true},
                        { prop: "index", label: "序号", sort: true},
                        { prop: "name", label: "设备型号", sort: true,fixed:false},
                        { prop: "cluster.name", label: "集群", type: "cluster", sort: false,fixed:false},
                        { prop: "type", label: "服务器分类", sort: true,fixed:false},
                        { prop: "sn", label: "设备序列号", sort: true,fixed:false},
                        { prop: "manageIp", label: "管理网", sort: true,fixed:false},
                        { prop: "illoIp", label: "ILLO地址", sort: true,fixed:false},
                        { prop: "period", label: "期数", sort: true,fixed:false},
                        { prop: "position", label: "机架位置", sort: true,fixed:false},
                        { prop: "publicIp", label: "公网", sort: true,fixed:false},
                        { prop: "cn2Ip", label: "CN2", sort: true,fixed:false},
                        { prop: "status", label: "状态", type: "status", sort: true,fixed:false},
                        { prop: "outIp", label: "存储外网", sort: true,fixed:false},
                        { prop: "systemVersion", label: "系统版本", sort: true,fixed:false},
                        { prop: "osVersion", label: "内核版本", sort: true,fixed:false},
                        { prop: "use", label: "用途", sort: true,fixed:false},
                        { prop: "deliveryDate", label: "交付日期", type: "date", sort: true,fixed:false},
                        { prop: "resourcePool", label: "资源池", type: "resourcePool", sort: true,fixed:false},
                        { prop: "useUser", label: "申请人", sort: true,fixed:false},
                        { prop: "tag", label: "项目名称", sort: true,fixed:false},
                        { prop: "remarks", label: "备注", sort: true,fixed:false},
                        { prop: "computerPosition", label: "机房位置", sort: true,fixed:false},
                        { prop: "desc", label: "硬件信息", width: "700px", sort: false,fixed:false},
                    ]

1.  右键事件处理方法

//右键点击
                rightClick(column, event) {  // 鼠标右击触发事件
                    this.menuVisible = false // 先把模态框关死，目的是 第二次或者第n次右键鼠标的时候 它默认的是true
                    this.menuVisible = true  // 显示模态窗口，跳出自定义菜单栏
                    let menu = document.querySelector('#menu')
                    document.addEventListener('click', this.foo) // 给整个document添加监听鼠标事件，点击任何位置执行foo方法
                    menu.style.display = "block";
                    menu.style.left = event.clientX + 'px'
                    menu.style.top = event.clientY + 'px'
                    this.index=column.index
    
                },
                lock(){ 
                    this.dropCol[this.index].fixed="left"
    
                },
                unlock(){ 
                    this.dropCol[this.index].fixed=false
                },
                foo() {  // 取消鼠标监听事件 菜单栏
                    let menu = document.querySelector('#menu')
                    this.menuVisible = false
                    menu.style.display = "none";
    
                    document.removeEventListener('click', this.foo) // 要及时关掉监听，不关掉的是一个坑，不信你试试，虽然前台显示的时候没有啥毛病，加一个alert你就知道了
                },

和上篇博客一样，这里附上完整代码，如果拆开看不太懂可以参考完整代码

<template>
        <d2-container>
            <template slot="header">
                <el-form :inline="true" :model="listQuery" ref="searchForm" size="mini" style="margin-bottom: -18px;">
                    <el-form-item>
                        <el-button @click="search" size="mini">
                            <d2-icon name="search"/>
                            搜索
                        </el-button>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" size="mini" icon="el-icon-circle-plus" @click="createDevice">创建资产
                        </el-button>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" size="mini" icon="el-icon-circle-plus" @click="changeCols">修改显示列
                        </el-button>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" size="mini" icon="el-icon-circle-plus" @click="addHs">添加历史变更</el-button>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" size="mini" icon="el-icon-circle-plus" @click="saveOrder">保存显示顺序
                        </el-button>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" size="mini" icon="el-icon-circle-plus" @click="exportRepair">导出设备信息
                        </el-button>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" size="mini" icon="el-icon-circle-plus" @click="addTag">增加标签</el-button>
                    </el-form-item>
                    <el-form-item>
                        <el-upload
                                :action="deviceUrl"
                                :show-file-list=false
                                :on-success="handleAvatarSuccess"
                        >
                            <el-button size="mini" type="primary" icon="el-icon-circle-plus">
    
                                导入
                            </el-button>
                        </el-upload>
                    </el-form-item>
                </el-form>
            </template>
    
            <el-table
                    v-loading="listLoading"
                    :data="list"
                    border
                    fit
                    size="mini"
                    :row-class-name="rowClassName"
                    :cell-class-name="cellClassName"
                    highlight-current-row
                    style="width: 100%;margin-top: 20px"
                    @selection-change="handleSelectionChange"
                    @sort-change="changeSort"
                    @header-contextmenu="rightClick"
                    ref="filterTable"
            >
                <el-table-column
                        type="selection"
                        fixed="left"
                        width="55">
                </el-table-column>
                <el-table-column type="index" align="center" width="50"   fixed="left">
                </el-table-column>
                <el-table-column v-for="(item, index) in col"
                                 v-if="col[index].prop!=='select'&&col[index].prop!=='index'"
                                 align="center"
                                 :index="index"
                                 :sortable="dropCol[index].sort"
                                 show-overflow-tooltip
                                 :width="dropCol[index].width?dropCol[index].width:'200px'"
                                 :key="`col_${index}`"
                                 :fixed="dropCol[index].fixed"
                                 :prop="dropCol[index].prop"
                                 :label="item.label">
                    <template slot-scope="scope">
                        <span>{ {  !dropCol[index].type?scope.row[dropCol[index].prop]:getValue(scope.row,dropCol[index].type),dropCol[index].prop }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作" align="center" fixed="right" width="200" class-name="small-padding fixed-width">
                    <template slot-scope="scope">
                        <el-dropdown trigger="hover">
                <span class="el-dropdown-link">
                  操作菜单<i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item class="el-dropdown-link" @click.native="cpuInfo(scope.row)">硬件信息
                                </el-dropdown-item>
                                
                                
                                
                                <el-dropdown-item class="el-dropdown-link" @click.native="historyInfo(scope.row)">历史变更
                                </el-dropdown-item>
                                <el-dropdown-item class="el-dropdown-link" @click.native="editDevice(scope.row)">编辑资产
                                </el-dropdown-item>
                                <el-dropdown-item class="el-dropdown-link" @click.native="deleteDevice(scope.row)">删除资产
                                </el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </template>
                </el-table-column>
            </el-table>
            <template slot="footer">
                <el-pagination
                        :current-page="page.current"
                        :page-size="page.size"
                        :total="page.total"
                        :page-sizes="[1,100, 200, 300, 400]"
                        layout="total, sizes, prev, pager, next, jumper"
                        style="margin: -10px;"
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                >
                </el-pagination>
            </template>
            <el-dialog title="Device管理" :visible.sync="dialogFormVisible" :close-on-click-modal=false>
                <el-form :model="temp" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                    <el-form-item label="集群" prop="cluster">
                        <el-select v-model="temp.clusterId" placeholder="请选择">
                            <el-option
                                    v-for="item in clusterList"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="设备型号" prop="name">
                        <el-input v-model="temp.name"></el-input>
                    </el-form-item>
                    <el-form-item label="期数" prop="period">
                        <el-input v-model="temp.period"></el-input>
                    </el-form-item>
                    <el-form-item label="管理网" prop="manageIp">
                        <el-input v-model="temp.manageIp"></el-input>
                    </el-form-item>
                    <el-form-item label="ILLO地址" prop="cluster">
                        <el-input v-model="temp.illoIp"></el-input>
                    </el-form-item>
                    <el-form-item label="交付日期" prop="deliveryDate">
                        <el-date-picker
                                v-model="temp.deliveryDate"
                                type="date"
                                placeholder="选择日期">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item label="服务器分类" prop="type">
                        <el-input v-model="temp.type"></el-input>
                    </el-form-item>
                    <el-form-item label="设备类型" prop="deviceType">
                        <el-select v-model="temp.deviceType" placeholder="请选择">
                            <el-option
                                    v-for="item in deviceTypeList"
                                    :key="item.deviceType"
                                    :label="item.nameZh"
                                    :value="item.deviceType">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="所属资源池" prop="resourcePool">
                        <el-select v-model="temp.resourcePool" filterable placeholder="请选择">
                            <el-option
                                    v-for="item in allRp"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="设备序列号" prop="sn">
                        <el-input v-model="temp.sn"></el-input>
                    </el-form-item>
                    <el-form-item label="项目名称" prop="tag">
                        <tag-select type="program" :value.sync="temp.tag"></tag-select>
                    </el-form-item>
                    <el-form-item label="机架位置" prop="position">
                        <el-input v-model="temp.position"></el-input>
                    </el-form-item>
                    <el-form-item label="机房位置" prop="computerPosition">
                        <el-input v-model="temp.computerPosition"></el-input>
                    </el-form-item>
                    <el-form-item label="公网" prop="publicIp">
                        <el-input v-model="temp.publicIp"></el-input>
                    </el-form-item>
                    <el-form-item label="存储外网" prop="inIp">
                        <el-input v-model="temp.outIp"></el-input>
                    </el-form-item>
                    <el-form-item label="CN2" prop="cn2Ip">
                        <el-input v-model="temp.cn2Ip"></el-input>
                    </el-form-item>
                    <el-form-item label="系统版本" prop="systemVersion">
                        <el-input v-model="temp.systemVersion"></el-input>
                    </el-form-item>
                    <el-form-item label="内核版本" prop="osVersion">
                        <el-input v-model="temp.osVersion"></el-input>
                    </el-form-item>
                    <el-form-item label="用途" prop="use">
                        <el-input v-model="temp.use"></el-input>
                    </el-form-item>
                    <el-form-item label="备注" prop="remarks">
                        <el-input v-model="temp.remarks"></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button type="primary" @click="saveDevice('ruleForm')">提交</el-button>
                    <el-button @click="resetDeviceForm('ruleForm')">取消</el-button>
                </div>
            </el-dialog>
            <el-dialog title="硬件信息" :visible.sync="CPUVisible" width="80%">
                <el-collapse v-model="collapse">
                    <el-collapse-item title="CPU信息" name="1">
                        <cpu :device_type.sync="deviceType"></cpu>
                    </el-collapse-item>
                    <el-collapse-item title="内存信息" name="2">
                        <memory :device_type.sync="deviceType"></memory>
                    </el-collapse-item>
                    <el-collapse-item title="硬盘信息" name="3">
                        <disk :device_type.sync="deviceType"></disk>
                    </el-collapse-item>
                    <el-collapse-item title="网卡信息" name="4">
                        <nic :device_type.sync="deviceType"></nic>
                    </el-collapse-item>
                </el-collapse>
            </el-dialog>
            
            
            
            
            
            
            
            
            
            <el-dialog title="历史变更" :visible.sync="HistoryVisible" width="80%">
                <el-button type="primary" @click="addHistory" style="margin-bottom: 5px">添加历史变更</el-button>
                <el-timeline>
                    <el-timeline-item v-for="item in history"
                                      :key="item.id"
                                      :timestamp="getDateTime(item.createDate)" placement="top">
                        <el-card>
                            <h4>{ { item.message}}</h4>
                            <p>XXX 提交于 { { getDateTime(item.createDate)}}</p>
                        </el-card>
                    </el-timeline-item>
                </el-timeline>
            </el-dialog>
    
            <el-dialog title="显示列编辑" :visible.sync="changeVisible" width="80%">
                <el-transfer v-model="colsList" :data="changeData" :titles="['所有列', '显示列']"
                             :props="{key: 'value',label: 'desc'}"
                ></el-transfer>
                <div slot="footer" class="dialog-footer">
                    <el-button type="primary" @click="saveCols()">提交</el-button>
                    <el-button @click="changeVisible=false">取消</el-button>
                </div>
            </el-dialog>
            <el-drawer
                    title="搜索条件"
                    :visible.sync="searchVisible"
                    direction="rtl"
                    size="60%"
                    :before-close="handleClose">
                <el-form :model="searchForm" label-width="100px" class="demo-ruleForm">
                    <el-row>
                        <el-col :offset="20">
                            <el-button @click="handleSearchFormReset" size="mini">
                                <d2-icon name="refresh"/>
                                重置
                            </el-button>
                        </el-col>
                    </el-row>
    
                    <el-row v-for="(search,index) in searchForm">
                        <el-col :span="8">
                            <el-form-item label="搜索字段">
                                <el-select v-model="search.key" filterable placeholder="请选择">
                                    <el-option
                                            v-for="item in searchData"
                                            :key="item.value"
                                            :label="item.desc"
                                            :value="item.value">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="搜索值">
                                <el-select v-model="search.value" v-if="search.key==='resourcePool'" filterable
                                           placeholder="请选择">
                                    <el-option
                                            v-for="item in allRp"
                                            :key="item.id"
                                            :label="item.name"
                                            :value="item.id">
                                    </el-option>
                                </el-select>
                                <el-select v-model="search.value" v-else-if="search.key==='deviceType'" filterable
                                           placeholder="请选择">
                                    <el-option
                                            v-for="item in deviceTypeList"
                                            :key="item.deviceType"
                                            :label="item.nameZh"
                                            :value="item.deviceType">
                                    </el-option>
                                </el-select>
                                <el-date-picker
                                        v-else-if="search.key==='deliveryDate'"
                                        v-model="search.value"
                                        type="date"
                                        placeholder="选择日期">
                                </el-date-picker>
                                <el-select v-model="search.value" v-else-if="search.key==='cluster'" filterable
                                           placeholder="请选择">
                                    <el-option
                                            v-for="item in clusterList"
                                            :key="item.id"
                                            :label="item.name"
                                            :value="item.id">
                                    </el-option>
                                </el-select>
    
                                <el-input v-else v-model="search.value"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="2" :offset="1">
                            <el-button type="primary" icon="el-icon-plus" @click="addSearchInfo" circle></el-button>
                        </el-col>
                        <el-col :span="2">
                            <el-button v-if="index!==0" type="danger" @click="deleteSearchInfo(index)" icon="el-icon-minus"
                                       circle></el-button>
                        </el-col>
                    </el-row>
                    <el-form-item>
                        <el-button type="primary" @click="onSearch">立即搜索</el-button>
                        <el-button @click="searchVisible=false">取消</el-button>
                    </el-form-item>
    
                </el-form>
            </el-drawer>
    
            <el-dialog title="添加标签" :visible.sync="tagVisible" width="80%">
                <el-form :model="tagList" status-icon ref="ruleForm" label-width="100px" class="demo-ruleForm">
                    <el-form-item label="标签类型" prop="name">
                        <el-select v-model="tagList.type" @change="changeType"
                                   placeholder="请选择">
                            <el-option label="状态" value="status"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="赋予的值" prop="rpId">
                        <el-select v-model="tagList.id" filterable placeholder="请选择">
                            <el-option
                                    v-for="item in tags"
                                    :key="item.id"
                                    :label="item.value"
                                    :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button type="primary" @click="saveTag()">提交</el-button>
                    <el-button @click="tagVisible=false">取消</el-button>
                </div>
            </el-dialog>
            <div v-show="menuVisible">
                <v-contextmenu ref="contextmenu" id="menu">
                    <v-contextmenu-item @click="lock">锁定</v-contextmenu-item>
                    <v-contextmenu-item @click="unlock">解锁</v-contextmenu-item>
                </v-contextmenu>
            </div>
    
        </d2-container>
    </template>
    
    <script>
        import Sortable from 'sortablejs'
        import Pagination from '@/components/Pagination'
        import { 
            fetchList,
            createDevice,
            modifyDevice,
            deleteDevice,
            addHistory,
            addHistories,
            exportRepairInfo,
            addTag
        } from '@/api/device/device' // Secondary package based on el-pagination
        import { findAllDeviceType} from '@/api/device/devicetype'
        import { findAllCluster} from '@/api/device/cluster'
        import { saveColsInfo, saveOrders} from '@/api/device/userInfo'
        import cpu from '@/components/cpu'
        import Memory from "@/components/memory";
        import Disk from "@/components/disk";
        import Nic from "@/components/nic";
        import TagSelect from "@/components/TagSelect";
        import moment from "moment"
        import { mapState} from 'vuex'
    
        export default { 
            name: "device",
            computed: { 
                ...mapState('d2admin/permission', [
                    'ownRp', 'cols', 'orders', 'allRp'
                ]),
                ...mapState('d2admin/basedata', [
                    'tagType', 'allTags'
                ])
    
            },
            components: { Disk, Memory, Pagination, cpu, Nic, TagSelect},
            data() { 
                return { 
                    menuVisible:false,
                    tags: [],
                    tagList: { 
                        type: null,
                        id: null
                    },
                    tagVisible: false,
                    page: { 
                        current: 1,
                        size: 100,
                        total: 0
                    },
                    searchForm: [{ 
                        key: null,
                        value: null
                    }],
                    searchVisible: false,
                    col: [],
                    dropCol: [],
                    rowClassName: "rowClass",
                    cellClassName: "cellClass",
                    deviceUrl: process.env.VUE_APP_API + "/excel/device",
                    collapse: ["1", "2", "3", "4"],
                    CPUVisible: false,
                    MemoryVisible: false,
                    DiskVisible: false,
                    NicVisible: false,
                    HistoryVisible: false,
                    changeVisible: false,
                    colsList: [],
                    history: [],
                    history_deviceId: null,
                    deviceType: null,
                    temp: { 
                        id: null,
                        name: null,
                        clusterId: null,
                        use: null,
                        deliveryDate: null,
                        type: null,
                        manageIp: null,
                        illoIp: null,
                        period: null,
                        remarks: null,
                        deviceType: null,
                        resourcePool: null,
                        sn: null,
                        tag: null,
                        position: null,
                        useUser: null,
                        startDate: null,
                        systemVersion: null,
                        osVersion: null,
                        outIp: null,
                        publicIp: null,
                        cn2Ip: null,
                        computerPosition: null
                    },
                    list: null,
                    total: 0,
                    listLoading: true,
                    listQuery: { 
                        page: 1,
                        limit: 20,
                        searchForm: [],
                        sortForm: null
                    },
                    dialogFormVisible: false,
                    editFlag: 0,
                    rules: { 
                        // cn2Ip: [
                        // {required: true, message: '请输入cn2ip', trigger: 'blur'}
                        // ],
                    },
                    deviceTypeList: [],
                    clusterList: [],
                    searchData: [
                        { value: "resourcePool", desc: "资源池"},
                        { value: "cluster", desc: "集群"},
                        { value: "use", desc: "用途"},
                        { value: "deliveryDate", desc: "交付日期"},
                        { value: "type", desc: "服务器分类"},
                        { value: "sn", desc: "设备序列号"},
                        { value: "deviceType", desc: "设备类型"},
                        { value: "name", desc: "设备型号"},
                        { value: "status", desc: "状态"},
                        { value: "manageIp", desc: "管理网"},
                        { value: "illoIp", desc: "ILLO地址"},
                        { value: "period", desc: "期数"},
                        { value: "position", desc: "机架位置"},
                        { value: "publicIp", desc: "公网"},
                        { value: "cn2Ip", desc: "CN2"},
                        { value: "outIp", desc: "存储外网"},
                        { value: "systemVersion", desc: "系统版本"},
                        { value: "osVersion", desc: "内核版本"},
                        { value: "useUser", desc: "申请人"},
                        { value: "tag", desc: "项目名称"},
                        { value: "remarks", desc: "备注"},
                        { value: "computerPosition", desc: "机房位置"},
                        { value: "desc", desc: "硬件信息"},
                    ],
                    changeData: [
                        { value: "name", desc: "设备类型"},
                        { value: "cluster.name", desc: "集群"},
                        { value: "type", desc: "服务器分类"},
                        { value: "sn", desc: "设备序列号"},
                        { value: "resourcePool", desc: "资源池"},
                        { value: "manageIp", desc: "管理网"},
                        { value: "illoIp", desc: "ILLO地址"},
                        { value: "period", desc: "期数"},
                        { value: "position", desc: "机架位置"},
                        { value: "publicIp", desc: "公网"},
                        { value: "cn2Ip", desc: "CN2"},
                        { value: "status", desc: "状态"},
                        { value: "outIp", desc: "存储外网"},
                        { value: "systemVersion", desc: "系统版本"},
                        { value: "osVersion", desc: "内核版本"},
                        { value: "use", desc: "用途"},
                        { value: "deliveryDate", desc: "交付日期"},
                        { value: "useUser", desc: "申请人"},
                        { value: "tag", desc: "项目名称"},
                        { value: "remarks", desc: "备注"},
                        { value: "computerPosition", desc: "机房位置"},
                        { value: "desc", desc: "硬件信息"},
                    ],
                    multipleSelection: [],
                    sortMap: null,
                    column:null,
                    index:null
                }
            },
            created() { 
                this.getList()
                findAllDeviceType().then(response => { 
                    this.deviceTypeList = response;
                })
                findAllCluster().then(response => { 
                    this.clusterList = response;
                })
                document.oncontextmenu = function(){ 
                    return false;
                }
            },
            mounted() { 
                this.columnDrop()
                this.col = this.getDropCol();
                this.dropCol = this.getDropCol();
            },
            methods: { 
                changeSort(row) { 
                    this.sortMap = new Map();
                    let prop = row.prop;
                    let order = row.order;
                    if (this.sortMap.has(prop)) { 
                        if (!order) { 
                            this.sortMap.delete(prop)
                        } else if (order === "ascending") { 
                            this.sortMap.set(prop, "ASC")
                        } else { 
                            this.sortMap.set(prop, "DESC")
                        }
                    } else { 
                        if (!order) { 
                        } else if (order === "ascending") { 
                            this.sortMap.set(prop, "ASC")
                        } else { 
                            this.sortMap.set(prop, "DESC")
                        }
                    }
                    this.getList()
                },
                changeType(val) { 
                    if (val) { 
                        this.tags = this.allTags[val]
                    }
                },
                addTag() { 
                    this.tagList = { 
                        type: null,
                        id: null
                    }
                    this.tagVisible = true
    
                },
                handleSearchFormReset() { 
                    this.listQuery.searchForm = []
                    this.searchForm = [{ 
                        key: null,
                        value: null
                    }]
                    this.getList();
                },
                onSearch() { 
                    this.getList();
                    this.searchVisible = false;
                },
                addSearchInfo() { 
                    this.searchForm.push({ 
                        key: null,
                        value: null
                    })
                },
                deleteSearchInfo(index) { 
                    this.searchForm.splice(index, 1);
                },
                search() { 
                    this.searchVisible = true;
                },
                handleClose(done) { 
                    this.$confirm('确认关闭？')
                        .then(_ => { 
                            done();
                        })
                        .catch(_ => { 
                        });
                },
                handleSizeChange(val) { 
                    this.page.size = val;
                    this.getList();
                },
                handleCurrentChange(val) { 
                    this.page.current = val;
                    this.getList();
                },
                saveTag() { 
                    if (this.multipleSelection.length === 0) { 
                        this.$message({ 
                            type: 'warning',
                            message: '请先选择要修改的机器'
                        });
                        return
                    }
                    addTag({ 
                        ids: this.multipleSelection,
                        tagId: this.tagList.id
                    }).then(res => { 
    
                        this.$message({ 
                            type: 'success',
                            message: '添加成功'
                        });
                        this.tagVisible = false;
                        this.getList()
                    })
    
                },
                exportRepair() { 
                    if (this.multipleSelection.length === 0) { 
                        this.$message({ 
                            type: 'warning',
                            message: '请先选择要导出的机器'
                        });
                        return
                    }
                    exportRepairInfo(this.multipleSelection).then(res => { 
                        let data = res;
                        const textarea = document.createElement("textarea");
                        textarea.setAttribute("readonly", true);
                        textarea.value = data;
                        document.body.appendChild(textarea);
                        textarea.setSelectionRange(0, textarea.value.length);
                        textarea.select();
                        if (document.execCommand("copy")) { 
                            this.$message({ 
                                type: 'success',
                                message: '复制成功'
                            });
                        } else { 
                            this.$message({ 
                                type: 'error',
                                message: '复制失败'
                            });
                        }
                        document.body.removeChild(textarea);
    
                    })
                },
                getValue(row, type, prop) { 
                    switch (type) { 
                        case 'cluster':
                            return row.cluster.name
                        case 'date':
                            return this.getDate(row[prop])
                        case "resourcePool":
                            return this.transRP(row.resourcePool)
                        case "status":
                            return this.getStatus(row.tags)
    
                    }
                },
                getStatus(status) { 
                    for (let i = 0; i < status.length; i++) { 
                        let data = status[i]
                        if (data.type === "status") { 
                            return data.value
                        }
                    }
                    return "暂无状态"
                },
                transRP(id) { 
                    for (let i = 0; i < this.allRp.length; i++) { 
                        if (this.allRp[i].id === id) { 
                            return this.allRp[i].name;
                        }
                    }
                    return "未知"
                },
                saveOrder() { 
                    let result = JSON.stringify(this.dropCol);
                    let data = { 
                        orders: result,
                        type: "device"
                    }
                    saveOrders(data).then(res => { 
                        this.$message({ 
                            type: 'success',
                            message: '保存成功 '
                        });
                        this.$store.dispatch('SetOrders', result)
                    })
                },
                getDropCol() { 
                    if (this.orders && this.orders.hasOwnProperty('device') && this.orders['device'] !== null && this.orders['device'] !== '') { 
                        let data = JSON.parse(this.orders['device'])
                        return data
                    }
                    return this.getCol()
                },
                getCol() { 
                    let allCols = [
                        { prop: "select", label: "选择", sort: true},
                        { prop: "index", label: "序号", sort: true},
                        { prop: "name", label: "设备型号", sort: true,fixed:false},
                        { prop: "cluster.name", label: "集群", type: "cluster", sort: false,fixed:false},
                        { prop: "type", label: "服务器分类", sort: true,fixed:false},
                        { prop: "sn", label: "设备序列号", sort: true,fixed:false},
                        { prop: "manageIp", label: "管理网", sort: true,fixed:false},
                        { prop: "illoIp", label: "ILLO地址", sort: true,fixed:false},
                        { prop: "period", label: "期数", sort: true,fixed:false},
                        { prop: "position", label: "机架位置", sort: true,fixed:false},
                        { prop: "publicIp", label: "公网", sort: true,fixed:false},
                        { prop: "cn2Ip", label: "CN2", sort: true,fixed:false},
                        { prop: "status", label: "状态", type: "status", sort: true,fixed:false},
                        { prop: "outIp", label: "存储外网", sort: true,fixed:false},
                        { prop: "systemVersion", label: "系统版本", sort: true,fixed:false},
                        { prop: "osVersion", label: "内核版本", sort: true,fixed:false},
                        { prop: "use", label: "用途", sort: true,fixed:false},
                        { prop: "deliveryDate", label: "交付日期", type: "date", sort: true,fixed:false},
                        { prop: "resourcePool", label: "资源池", type: "resourcePool", sort: true,fixed:false},
                        { prop: "useUser", label: "申请人", sort: true,fixed:false},
                        { prop: "tag", label: "项目名称", sort: true,fixed:false},
                        { prop: "remarks", label: "备注", sort: true,fixed:false},
                        { prop: "computerPosition", label: "机房位置", sort: true,fixed:false},
                        { prop: "desc", label: "硬件信息", width: "700px", sort: false,fixed:false},
                    ]
                    if (this.cols && this.cols.hasOwnProperty('device')) { 
                        if (!this.cols['device']) { 
                            return allCols;
                        }
                        let str = this.cols['device'];
                        let data = this.utils.str2Arr(str);
    
                        let result = []
                        result.push({ prop: "select", label: "选择"})
                        result.push({ prop: "index", label: "序号"})
                        data.forEach(function (item) { 
                            allCols.forEach(function (col) { 
                                if (col.prop === item) { 
                                    result.push(col);
                                }
                            })
                        })
                        return result;
                    } else { 
                        return allCols;
                    }
    
                },
                addHs() { 
                    this.$prompt('请输入变更记录', '提示', { 
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                    }).then(({ value}) => { 
                        addHistories({ 
                            deviceId: this.multipleSelection,
                            message: value
                        }).then(response => { 
                            this.$message({ 
                                type: 'success',
                                message: '添加变更成功 '
                            });
                            this.HistoryVisible = false;
                            this.getList();
    
                        })
                    }).catch(() => { 
                        this.$message({ 
                            type: 'info',
                            message: '取消添加'
                        });
                    });
    
                },
                handleSelectionChange(rows) { 
                    let data = [];
                    rows.forEach(function (item) { 
                        data.push(item.id)
                    })
                    this.multipleSelection = data
                },
                changeCols() { 
                    if (this.cols && this.cols.hasOwnProperty('device')) { 
                        if (!this.cols['device']) { 
                            this.colsList = []
                            this.changeVisible = true;
                            return
                        }
                        let str = this.cols['device'];
                        let data = this.utils.str2Arr(str);
                        this.colsList = data;
                    } else { 
                        this.colsList = [];
                    }
                    this.changeVisible = true;
                },
                saveCols() { 
                    let result = this.utils.arr2Str(this.colsList);
                    let data = { 
                        cols: result,
                        type: "device"
                    }
                    saveColsInfo(data).then(res => { 
                        this.changeVisible = false;
                        this.$message({ 
                            type: 'success',
                            message: '变更成功 '
                        });
                        this.$store.dispatch('SetCols', result)
                        location.reload()
                    })
                },
                getDate(time) { 
                    return moment(time).format('YYYY-MM-DD')
                },
                getDateTime(time) { 
                    return moment(time).format('YYYY-MM-DD HH:mm:ss')
                },
                addHistory() { 
                    this.$prompt('请输入变更记录', '提示', { 
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                    }).then(({ value}) => { 
                        addHistory({ 
                            deviceId: this.history_deviceId,
                            message: value
                        }).then(response => { 
                            this.$message({ 
                                type: 'success',
                                message: '添加变更成功 '
                            });
                            this.HistoryVisible = false;
                            this.getList();
    
                        })
                    }).catch(() => { 
                        this.$message({ 
                            type: 'info',
                            message: '取消添加'
                        });
                    });
                },
                historyInfo(row) { 
                    this.history = row.histories;
                    this.HistoryVisible = true;
                    this.history_deviceId = row.id
                },
                handleFilter() { 
                    this.listQuery.page = 1
                    this.getList()
                },
                cpuInfo(row) { 
                    this.deviceType = row.deviceType
                    this.CPUVisible = true;
                },
                memoryInfo(row) { 
                    this.deviceType = row.deviceType
                    this.MemoryVisible = true;
                },
                nicInfo(row) { 
                    this.deviceType = row.deviceType
                    this.NicVisible = true;
                },
                diskInfo(row) { 
                    this.deviceType = row.deviceType
                    this.DiskVisible = true;
                },
                saveDevice(formName) { 
                    this.$refs[formName].validate((valid) => { 
                        if (valid) { 
                            if (this.editFlag === 0) { 
                                createDevice(
                                    this.temp
                                ).then(response => { 
                                    this.$message({ 
                                        message: '保存成功',
                                        type: 'success'
                                    });
                                    this.getList();
                                    this.resetDeviceForm('ruleForm')
                                })
                            } else { 
                                modifyDevice(
                                    this.temp
                                ).then(response => { 
                                    this.$message({ 
                                        message: '保存成功',
                                        type: 'success'
                                    });
                                    this.getList();
                                    this.resetDeviceForm('ruleForm')
                                })
    
                            }
    
    
                        } else { 
                            this.$message.error('保存失败,请重试');
                            return false;
                        }
                    });
                },
                handleAvatarSuccess(res, file) { 
                    if (res.code != 200) { 
                        this.$message({ 
                            message: res.msg,
                            type: 'error'
                        });
                        return
                    }
                    this.$message({ 
                        message: '上传成功',
                        type: 'success'
                    });
                    this.getList()
                },
                resetDeviceForm(formName) { 
                    this.$refs[formName].resetFields();
                    this.dialogFormVisible = false;
                },
                getList() { 
                    this.listLoading = true
                    this.listQuery.page = this.page.current
                    this.listQuery.limit = this.page.size
                    this.listQuery.searchForm = this.searchForm
                    if (this.sortMap) { 
                        this.listQuery.sortForm = this.strMapToObj(this.sortMap)
                    } else { 
                        this.listQuery.sortForm = null
                    }
                    fetchList(this.listQuery).then(response => { 
                        this.list = response.content;
                        this.page.total = response.totalElements;
                        this.listLoading = false
                    })
                },
                strMapToObj(strMap) { 
                    let obj = Object.create(null);
                    for (let [k, v] of strMap) { 
                        obj[k] = v;
                    }
                    return obj;
                },
                createDevice() { 
                    this.resetTemp()
                    this.dialogFormVisible = true;
                    this.editFlag = 0;
                },
                editDevice(item) { 
                    this.resetTemp()
                    this.temp.id = item.id;
                    this.temp.clusterId = item.cluster.id;
                    this.temp.name = item.name;
                    this.temp.use = item.use;
                    this.temp.deliveryDate = item.deliveryDate;
                    this.temp.type = item.type;
                    this.temp.period = item.period;
                    this.temp.manageIp = item.manageIp;
                    this.temp.illoIp = item.illoIp;
                    this.temp.remarks = item.remarks;
                    this.temp.deviceType = item.deviceType;
                    this.temp.sn = item.sn;
                    this.temp.tag = item.tag;
                    this.temp.resourcePool = item.resourcePool;
                    this.temp.position = item.position;
                    this.temp.systemVersion = item.systemVersion;
                    this.temp.osVersion = item.osVersion;
                    this.temp.publicIp = item.publicIp;
                    this.temp.outIp = item.outIp;
                    this.temp.cn2Ip = item.cn2Ip;
                    this.temp.computerPosition = item.computerPosition
                    this.dialogFormVisible = true;
                    this.editFlag = 1;
                },
    
                resetTemp() { 
                    this.temp = { 
                        id: null,
                        name: null,
                        clusterId: null,
                        use: null,
                        deliveryDate: null,
                        type: null,
                        manageIp: null,
                        illoIp: null,
                        period: null,
                        remarks: null,
                        deviceType: null,
                        sn: null,
                        tag: null,
                        resourcePool: null,
                        position: null,
                        useUser: null,
                        startDate: null,
                        systemVersion: null,
                        osVersion: null,
                        outIp: null,
                        publicIp: null,
                        cn2Ip: null,
                    }
                },
                deleteDevice(row) { 
                    this.$confirm('此操作将删除该资产, 是否继续?', '提示', { 
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => { 
                        deleteDevice(row.id).then(response => { 
                            this.getList();
                            this.$message({ 
                                type: 'success',
                                message: '删除成功!'
                            });
                        })
    
                    }).catch(() => { 
                        this.$message({ 
                            type: 'info',
                            message: '已取消删除'
                        });
                    });
                },
                //列拖拽
                columnDrop() { 
                    const wrapperTr = document.querySelector('.el-table__header-wrapper tr')
                    this.sortable = Sortable.create(wrapperTr, { 
                        animation: 180,
                        delay: 0,
                        onEnd: evt => { 
                            const oldItem = this.dropCol[evt.oldIndex]
                            this.dropCol.splice(evt.oldIndex, 1)
                            this.dropCol.splice(evt.newIndex, 0, oldItem)
                        }
                    })
                },
                //右键点击
                rightClick(column, event) {  // 鼠标右击触发事件
                    this.menuVisible = false // 先把模态框关死，目的是 第二次或者第n次右键鼠标的时候 它默认的是true
                    this.menuVisible = true  // 显示模态窗口，跳出自定义菜单栏
                    let menu = document.querySelector('#menu')
                    document.addEventListener('click', this.foo) // 给整个document添加监听鼠标事件，点击任何位置执行foo方法
                    menu.style.display = "block";
                    menu.style.left = event.clientX + 'px'
                    menu.style.top = event.clientY + 'px'
                    this.index=column.index
    
                },
                lock(){ 
                    this.dropCol[this.index].fixed="left"
    
                },
                unlock(){ 
                    this.dropCol[this.index].fixed=false
                },
                foo() {  // 取消鼠标监听事件 菜单栏
                    let menu = document.querySelector('#menu')
                    this.menuVisible = false
                    menu.style.display = "none";
    
                    document.removeEventListener('click', this.foo) // 要及时关掉监听，不关掉的是一个坑，不信你试试，虽然前台显示的时候没有啥毛病，加一个alert你就知道了
                },
    
    
    
    
            }
        }
    </script>
    
    <style>
    
        .el-dropdown-link { 
            cursor: pointer;
            color: #409EFF;
        }
    
        .demo-table-expand { 
            font-size: 0;
        }
    
        .demo-table-expand label { 
            width: 90px;
            color: #99a9bf;
        }
    
        .demo-table-expand .el-form-item { 
            margin-right: 0;
            margin-bottom: 0;
            width: 50%;
        }
    
        .rowClass { 
            height: 30px;
            padding: 0 !important;
    
        }
    
        .cellClass { 
            padding: 2px !important;
        }
    
        .el-table--striped .el-table__body tr.el-table__row--striped.current-row td,
        .el-table__body tr.current-row > td { 
            background-color: #a0cfff;
        }
    
        .el-table--striped .el-table__body tr.hover-row.el-table__row--striped > td,
        .el-table__body tr.hover-row > td { 
            background-color: #d9ecff !important;
        }
    </style>

[elementui]: https://blog.csdn.net/qq_36752632/article/details/102552855