如何基于elementui table实现自己的表格组件

水深无声 2023-06-11 06:23 107阅读 0赞

前两篇博客已经讲过如何实现，这里我把功能抽成了一个组件，这样如果有多个需要该功能的表格就可以复用了：

首先先是组件的代码：

  1. <template>
  2.     <el-table
  3.             v-loading="listLoading"
  4.             :data="tableData"
  5.             border
  6.             fit
  7.             size="mini"
  8.             highlight-current-row
  9.             style="width: 100%;margin-top: 20px"
  10.             @selection-change="handleSelectionChange"
  11.             @sort-change="changeSort"
  12.             @header-contextmenu="rightClick"
  13.             ref="filterTable"
  14.     >
  15.         <el-table-column
  16.                 type="selection"
  17.                 fixed="left"
  18.                 width="55">
  19.         </el-table-column>
  20.         <el-table-column type="index" align="center" width="50"   fixed="left">
  21.         </el-table-column>
  22.         <el-table-column v-for="(item, index) in col"
  23.                          v-if="col[index].prop!=='select'&&col[index].prop!=='index'"
  24.                          align="center"
  25.                          :index="index"
  26.                          :sortable="dropCol[index].sort"
  27.                          show-overflow-tooltip
  28.                          :width="dropCol[index].width?dropCol[index].width:'200px'"
  29.                          :key="`col_${index}`"
  30.                          :fixed="dropCol[index].fixed"
  31.                          :prop="dropCol[index].prop"
  32.                          :label="item.label">
  33.             <template slot-scope="scope">
  34.                 <span>{ {  !dropCol[index].type?scope.row[dropCol[index].prop]:getValue(scope.row,dropCol[index].type),dropCol[index].prop }}</span>
  35.             </template>
  36.         </el-table-column>
  37.         <el-table-column label="操作" align="center" fixed="right" width="200" class-name="small-padding fixed-width">
  38.             <template slot-scope="scope">
  39.                 <el-dropdown trigger="hover">
  40.             <span class="el-dropdown-link">
  41.               操作菜单<i class="el-icon-arrow-down el-icon--right"></i>
  42.             </span>
  43.                     <el-dropdown-menu slot="dropdown">
  44.                         <el-dropdown-item class="el-dropdown-link" v-for="item in editData" @click.native="emitParentMethod(scope.row,item.methodName)">{ { item.name}}
  45.                         </el-dropdown-item>
  46.                     </el-dropdown-menu>
  47.                 </el-dropdown>
  48.             </template>
  49.         </el-table-column>
  50.         <div v-show="menuVisible">
  51.             <v-contextmenu ref="contextmenu" id="menu">
  52.                 <v-contextmenu-item @click="lock">锁定</v-contextmenu-item>
  53.                 <v-contextmenu-item @click="unlock">解锁</v-contextmenu-item>
  54.             </v-contextmenu>
  55.         </div>
  56.     </el-table>
  58. </template>
  60. <script>
  61.     import Sortable from 'sortablejs'
  62.     import { mapState} from 'vuex'
  63.     export default { 
  64.         name: "table-plus",
  65.         computed: { 
  66.             ...mapState('d2admin/permission', [
  67.                 'ownRp', 'cols', 'orders', 'allRp'
  68.             ]),
  69.         },
  70.         data() { 
  71.             return { 
  72.                 menuVisible:false,
  73.                 dropCol:[],
  74.                 col:[]
  75.             }
  76.         },
  77.         props:{ 
  78.             listLoading: { 
  79.                 required: true
  80.             },
  81.             multipleSelection:{ 
  82.                 required:true
  83.             },
  84.             allCols:{ 
  85.                 required: true
  86.             },
  87.             colKey:{ 
  88.                 required:true  //存储map的key
  89.             },
  90.             tableData:{ 
  91.                 required:true
  92.             },
  93.             editData:{ 
  94.                 required:true
  95.             },
  96.         },
  97.         mounted(){ 
  98.             this.columnDrop()
  99.             this.col = this.getDropCol();
  100.             this.dropCol = this.getDropCol();
  102.         },
  103.         methods:{ 
  104.             getValue(row, type, prop) { 
  105.                 switch (type) { 
  106.                     case 'cluster':
  107.                         return row.cluster.name
  108.                     case 'date':
  109.                         return this.getDate(row[prop])
  110.                     case "resourcePool":
  111.                         return this.transRP(row.resourcePool)
  112.                     case "status":
  113.                         return this.getStatus(row.tags)
  115.                 }
  116.             },
  117.             getStatus(status) { 
  118.                 for (let i = 0; i < status.length; i++) { 
  119.                     let data = status[i]
  120.                     if (data.type === "status") { 
  121.                         return data.value
  122.                     }
  123.                 }
  124.                 return "暂无状态"
  125.             },
  126.             transRP(id) { 
  127.                 for (let i = 0; i < this.allRp.length; i++) { 
  128.                     if (this.allRp[i].id === id) { 
  129.                         return this.allRp[i].name;
  130.                     }
  131.                 }
  132.                 return "未知"
  133.             },
  134.             emitParentMethod(row,methodName){ 
  135.                 this.$emit(methodName,row);
  136.             },
  137.             getList(){ 
  138.                 this.$emit('getTableData')
  139.             },
  140.             changeSort(row) { 
  141.                 this.sortMap = new Map();
  142.                 let prop = row.prop;
  143.                 let order = row.order;
  144.                 if (this.sortMap.has(prop)) { 
  145.                     if (!order) { 
  146.                         this.sortMap.delete(prop)
  147.                     } else if (order === "ascending") { 
  148.                         this.sortMap.set(prop, "ASC")
  149.                     } else { 
  150.                         this.sortMap.set(prop, "DESC")
  151.                     }
  152.                 } else { 
  153.                     if (!order) { 
  154.                     } else if (order === "ascending") { 
  155.                         this.sortMap.set(prop, "ASC")
  156.                     } else { 
  157.                         this.sortMap.set(prop, "DESC")
  158.                     }
  159.                 }
  160.                 this.getList()
  161.             },
  163.             getCol() { 
  164.                 let allCols = this.allCols
  165.                 if (this.cols && this.cols.hasOwnProperty(this.colKey)) { 
  166.                     if (!this.cols[this.colKey]) { 
  167.                         return allCols;
  168.                     }
  169.                     let str = this.cols[this.colKey];
  170.                     let data = this.utils.str2Arr(str);
  172.                     let result = []
  173.                     result.push({ prop: "select", label: "选择"})
  174.                     result.push({ prop: "index", label: "序号"})
  175.                     data.forEach(function (item) { 
  176.                         allCols.forEach(function (col) { 
  177.                             if (col.prop === item) { 
  178.                                 result.push(col);
  179.                             }
  180.                         })
  181.                     })
  182.                     return result;
  183.                 } else { 
  184.                     return allCols;
  185.                 }
  187.             },
  188.             getDropCol() { 
  189.                 if (this.orders && this.orders.hasOwnProperty(this.colKey) && this.orders['device'] !== null && this.orders['device'] !== '') { 
  190.                     return JSON.parse(this.orders[this.colKey])
  191.                 }
  192.                 return this.getCol()
  193.             },
  194.             handleSelectionChange(rows) { 
  195.                 let data = [];
  196.                 rows.forEach(function (item) { 
  197.                     data.push(item.id)
  198.                 })
  199.                 // this.multipleSelection = data
  200.                 this.$emit('update:multipleSelection', data)
  201.             },
  202.             //列拖拽
  203.             columnDrop() { 
  204.                 const wrapperTr = document.querySelector('.el-table__header-wrapper tr')
  205.                 this.sortable = Sortable.create(wrapperTr, { 
  206.                     animation: 180,
  207.                     delay: 0,
  208.                     onEnd: evt => { 
  209.                         const oldItem = this.dropCol[evt.oldIndex]
  210.                         this.dropCol.splice(evt.oldIndex, 1)
  211.                         this.dropCol.splice(evt.newIndex, 0, oldItem)
  212.                     }
  213.                 })
  214.             },
  215.             //右键点击
  216.             rightClick(column, event) {  // 鼠标右击触发事件
  217.                 document.oncontextmenu = function(){ 
  218.                     return false;
  219.                 }
  220.                 this.menuVisible = false // 先把模态框关死，目的是 第二次或者第n次右键鼠标的时候 它默认的是true
  221.                 this.menuVisible = true  // 显示模态窗口，跳出自定义菜单栏
  222.                 let menu = document.querySelector('#menu')
  223.                 document.addEventListener('click', this.foo) // 给整个document添加监听鼠标事件，点击任何位置执行foo方法
  224.                 menu.style.display = "block";
  225.                 menu.style.left = event.clientX + 'px'
  226.                 menu.style.top = event.clientY + 'px'
  227.                 this.index=column.index
  229.             },
  230.             lock(){ 
  231.                 this.dropCol[this.index].fixed="left"
  232.                 document.oncontextmenu = function(){ 
  233.                     return true;
  234.                 }
  236.             },
  237.             unlock(){ 
  238.                 this.dropCol[this.index].fixed=false
  239.                 document.oncontextmenu = function(){ 
  240.                     return true;
  241.                 }
  242.             },
  243.             foo() {  // 取消鼠标监听事件 菜单栏
  244.                 let menu = document.querySelector('#menu')
  245.                 this.menuVisible = false
  246.                 menu.style.display = "none";
  248.                 document.removeEventListener('click', this.foo) // 要及时关掉监听，不关掉的是一个坑，不信你试试，虽然前台显示的时候没有啥毛病，加一个alert你就知道了
  249.                 document.oncontextmenu = function(){ 
  250.                     return true;
  251.                 }
  252.             },
  253.         }
  254.     }
  255. </script>
  257. <style>
  259.     .el-dropdown-link { 
  260.         cursor: pointer;
  261.         color: #409EFF;
  262.     }
  264.     .el-table--striped .el-table__body tr.el-table__row--striped.current-row td,
  265.     .el-table__body tr.current-row > td { 
  266.         background-color: #a0cfff;
  267.     }
  269.     .el-table--striped .el-table__body tr.hover-row.el-table__row--striped > td,
  270.     .el-table__body tr.hover-row > td { 
  271.         background-color: #d9ecff !important;
  272.     }
  273. </style>

应用的例子：

  1. <template>
  2.     <d2-container>
  3.         <template slot="header">
  4.             <el-form :inline="true" :model="listQuery" ref="searchForm" size="mini" style="margin-bottom: -18px;">
  5.                 <el-form-item>
  6.                     <el-button @click="search" size="mini">
  7.                         <d2-icon name="search"/>
  8.                         搜索
  9.                     </el-button>
  10.                 </el-form-item>
  11.                 <el-form-item>
  12.                     <el-button type="primary" size="mini" icon="el-icon-circle-plus" @click="createDevice">创建资产
  13.                     </el-button>
  14.                 </el-form-item>
  15.                 <el-form-item>
  16.                     <el-button type="primary" size="mini" icon="el-icon-circle-plus" @click="changeCols">修改显示列
  17.                     </el-button>
  18.                 </el-form-item>
  19.                 <el-form-item>
  20.                     <el-button type="primary" size="mini" icon="el-icon-circle-plus" @click="addHs">添加历史变更</el-button>
  21.                 </el-form-item>
  22.                 <el-form-item>
  23.                     <el-button type="primary" size="mini" icon="el-icon-circle-plus" @click="saveOrder">保存显示顺序
  24.                     </el-button>
  25.                 </el-form-item>
  26.                 <el-form-item>
  27.                     <el-button type="primary" size="mini" icon="el-icon-circle-plus" @click="exportRepair">导出设备信息
  28.                     </el-button>
  29.                 </el-form-item>
  30.                 <el-form-item>
  31.                     <el-button type="primary" size="mini" icon="el-icon-circle-plus" @click="addTag">增加标签</el-button>
  32.                 </el-form-item>
  33.                 <el-form-item>
  34.                     <el-upload
  35.                             :action="deviceUrl"
  36.                             :show-file-list=false
  37.                             :on-success="handleAvatarSuccess"
  38.                     >
  39.                         <el-button size="mini" type="primary" icon="el-icon-circle-plus">
  41.                             导入
  42.                         </el-button>
  43.                     </el-upload>
  44.                 </el-form-item>
  45.             </el-form>
  46.         </template>
  47. <!--        //@header-contextmenu="rightClick"-->
  48.         <table-plus
  49.             @cpuInfo="cpuInfo"
  50.             @historyInfo="historyInfo"
  51.             @editDevice="editDevice"
  52.             @deleteDevice="deleteDevice"
  53.             @getTableData="getList"
  54.             :multipleSelection.sync="multipleSelection"
  55.             :allCols="allCols"
  56.             :dropCol="dropCol"
  57.             colKey="device"
  58.             :tableData="list"
  59.             :editData="editData"
  60.             :listLoading="listLoading"
  61.             ref="tableData"
  62.         >
  63.         </table-plus>
  64.         <template slot="footer">
  65.             <el-pagination
  66.                     :current-page="page.current"
  67.                     :page-size="page.size"
  68.                     :total="page.total"
  69.                     :page-sizes="[1,100, 200, 300, 400]"
  70.                     layout="total, sizes, prev, pager, next, jumper"
  71.                     style="margin: -10px;"
  72.                     @size-change="handleSizeChange"
  73.                     @current-change="handleCurrentChange"
  74.             >
  75.             </el-pagination>
  76.         </template>
  77.         <el-dialog title="Device管理" :visible.sync="dialogFormVisible" :close-on-click-modal=false>
  78.             <el-form :model="temp" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
  79.                 <el-form-item label="集群" prop="cluster">
  80.                     <el-select v-model="temp.clusterId" placeholder="请选择">
  81.                         <el-option
  82.                                 v-for="item in clusterList"
  83.                                 :key="item.id"
  84.                                 :label="item.name"
  85.                                 :value="item.id">
  86.                         </el-option>
  87.                     </el-select>
  88.                 </el-form-item>
  89.                 <el-form-item label="设备型号" prop="name">
  90.                     <el-input v-model="temp.name"></el-input>
  91.                 </el-form-item>
  92.                 <el-form-item label="期数" prop="period">
  93.                     <el-input v-model="temp.period"></el-input>
  94.                 </el-form-item>
  95.                 <el-form-item label="管理网" prop="manageIp">
  96.                     <el-input v-model="temp.manageIp"></el-input>
  97.                 </el-form-item>
  98.                 <el-form-item label="ILLO地址" prop="cluster">
  99.                     <el-input v-model="temp.illoIp"></el-input>
  100.                 </el-form-item>
  101.                 <el-form-item label="交付日期" prop="deliveryDate">
  102.                     <el-date-picker
  103.                             v-model="temp.deliveryDate"
  104.                             type="date"
  105.                             placeholder="选择日期">
  106.                     </el-date-picker>
  107.                 </el-form-item>
  108.                 <el-form-item label="服务器分类" prop="type">
  109.                     <el-input v-model="temp.type"></el-input>
  110.                 </el-form-item>
  111.                 <el-form-item label="设备类型" prop="deviceType">
  112.                     <el-select v-model="temp.deviceType" placeholder="请选择">
  113.                         <el-option
  114.                                 v-for="item in deviceTypeList"
  115.                                 :key="item.deviceType"
  116.                                 :label="item.nameZh"
  117.                                 :value="item.deviceType">
  118.                         </el-option>
  119.                     </el-select>
  120.                 </el-form-item>
  121.                 <el-form-item label="所属资源池" prop="resourcePool">
  122.                     <el-select v-model="temp.resourcePool" filterable placeholder="请选择">
  123.                         <el-option
  124.                                 v-for="item in allRp"
  125.                                 :key="item.id"
  126.                                 :label="item.name"
  127.                                 :value="item.id">
  128.                         </el-option>
  129.                     </el-select>
  130.                 </el-form-item>
  131.                 <el-form-item label="设备序列号" prop="sn">
  132.                     <el-input v-model="temp.sn"></el-input>
  133.                 </el-form-item>
  134.                 <el-form-item label="项目名称" prop="tag">
  135.                     <tag-select type="program" :value.sync="temp.tag"></tag-select>
  136.                 </el-form-item>
  137.                 <el-form-item label="机架位置" prop="position">
  138.                     <el-input v-model="temp.position"></el-input>
  139.                 </el-form-item>
  140.                 <el-form-item label="机房位置" prop="computerPosition">
  141.                     <el-input v-model="temp.computerPosition"></el-input>
  142.                 </el-form-item>
  143.                 <el-form-item label="公网" prop="publicIp">
  144.                     <el-input v-model="temp.publicIp"></el-input>
  145.                 </el-form-item>
  146.                 <el-form-item label="存储外网" prop="inIp">
  147.                     <el-input v-model="temp.outIp"></el-input>
  148.                 </el-form-item>
  149.                 <el-form-item label="CN2" prop="cn2Ip">
  150.                     <el-input v-model="temp.cn2Ip"></el-input>
  151.                 </el-form-item>
  152.                 <el-form-item label="系统版本" prop="systemVersion">
  153.                     <el-input v-model="temp.systemVersion"></el-input>
  154.                 </el-form-item>
  155.                 <el-form-item label="内核版本" prop="osVersion">
  156.                     <el-input v-model="temp.osVersion"></el-input>
  157.                 </el-form-item>
  158.                 <el-form-item label="用途" prop="use">
  159.                     <el-input v-model="temp.use"></el-input>
  160.                 </el-form-item>
  161.                 <el-form-item label="备注" prop="remarks">
  162.                     <el-input v-model="temp.remarks"></el-input>
  163.                 </el-form-item>
  164.             </el-form>
  165.             <div slot="footer" class="dialog-footer">
  166.                 <el-button type="primary" @click="saveDevice('ruleForm')">提交</el-button>
  167.                 <el-button @click="resetDeviceForm('ruleForm')">取消</el-button>
  168.             </div>
  169.         </el-dialog>
  170.         <el-dialog title="硬件信息" :visible.sync="CPUVisible" width="80%">
  171.             <el-collapse v-model="collapse">
  172.                 <el-collapse-item title="CPU信息" name="1">
  173.                     <cpu :device_type.sync="deviceType"></cpu>
  174.                 </el-collapse-item>
  175.                 <el-collapse-item title="内存信息" name="2">
  176.                     <memory :device_type.sync="deviceType"></memory>
  177.                 </el-collapse-item>
  178.                 <el-collapse-item title="硬盘信息" name="3">
  179.                     <disk :device_type.sync="deviceType"></disk>
  180.                 </el-collapse-item>
  181.                 <el-collapse-item title="网卡信息" name="4">
  182.                     <nic :device_type.sync="deviceType"></nic>
  183.                 </el-collapse-item>
  184.             </el-collapse>
  185.         </el-dialog>
  186.         <!--    <el-dialog title="内存信息" :visible.sync="MemoryVisible"  width="80%">-->
  187.         <!--      <memory :device_type.sync="deviceType"></memory>-->
  188.         <!--    </el-dialog>-->
  189.         <!--    <el-dialog title="硬盘信息" :visible.sync="DiskVisible"  width="80%">-->
  190.         <!--      <disk :device_type.sync="deviceType"></disk>-->
  191.         <!--    </el-dialog>-->
  192.         <!--    <el-dialog title="网卡信息" :visible.sync="NicVisible"  width="80%">-->
  193.         <!--      <nic :device_type.sync="deviceType"></nic>-->
  194.         <!--    </el-dialog>-->
  195.         <el-dialog title="历史变更" :visible.sync="HistoryVisible" width="80%">
  196.             <el-button type="primary" @click="addHistory" style="margin-bottom: 5px">添加历史变更</el-button>
  197.             <el-timeline>
  198.                 <el-timeline-item v-for="item in history"
  199.                                   :key="item.id"
  200.                                   :timestamp="getDateTime(item.createDate)" placement="top">
  201.                     <el-card>
  202.                         <h4>{ { item.message}}</h4>
  203.                         <p>XXX 提交于 { { getDateTime(item.createDate)}}</p>
  204.                     </el-card>
  205.                 </el-timeline-item>
  206.             </el-timeline>
  207.         </el-dialog>
  209.         <el-dialog title="显示列编辑" :visible.sync="changeVisible" width="80%">
  210.             <el-transfer v-model="colsList" :data="changeData" :titles="['所有列', '显示列']"
  211.                          :props="{key: 'value',label: 'desc'}"
  212.             ></el-transfer>
  213.             <div slot="footer" class="dialog-footer">
  214.                 <el-button type="primary" @click="saveCols()">提交</el-button>
  215.                 <el-button @click="changeVisible=false">取消</el-button>
  216.             </div>
  217.         </el-dialog>
  218.         <el-drawer
  219.                 title="搜索条件"
  220.                 :visible.sync="searchVisible"
  221.                 direction="rtl"
  222.                 size="60%"
  223.                 :before-close="handleClose">
  224.             <el-form :model="searchForm" label-width="100px" class="demo-ruleForm">
  225.                 <el-row>
  226.                     <el-col :offset="20">
  227.                         <el-button @click="handleSearchFormReset" size="mini">
  228.                             <d2-icon name="refresh"/>
  229.                             重置
  230.                         </el-button>
  231.                     </el-col>
  232.                 </el-row>
  234.                 <el-row v-for="(search,index) in searchForm">
  235.                     <el-col :span="8">
  236.                         <el-form-item label="搜索字段">
  237.                             <el-select v-model="search.key" filterable placeholder="请选择">
  238.                                 <el-option
  239.                                         v-for="item in searchData"
  240.                                         :key="item.value"
  241.                                         :label="item.desc"
  242.                                         :value="item.value">
  243.                                 </el-option>
  244.                             </el-select>
  245.                         </el-form-item>
  246.                     </el-col>
  247.                     <el-col :span="8">
  248.                         <el-form-item label="搜索值">
  249.                             <el-select v-model="search.value" v-if="search.key==='resourcePool'" filterable
  250.                                        placeholder="请选择">
  251.                                 <el-option
  252.                                         v-for="item in allRp"
  253.                                         :key="item.id"
  254.                                         :label="item.name"
  255.                                         :value="item.id">
  256.                                 </el-option>
  257.                             </el-select>
  258.                             <el-select v-model="search.value" v-else-if="search.key==='deviceType'" filterable
  259.                                        placeholder="请选择">
  260.                                 <el-option
  261.                                         v-for="item in deviceTypeList"
  262.                                         :key="item.deviceType"
  263.                                         :label="item.nameZh"
  264.                                         :value="item.deviceType">
  265.                                 </el-option>
  266.                             </el-select>
  267.                             <el-date-picker
  268.                                     v-else-if="search.key==='deliveryDate'"
  269.                                     v-model="search.value"
  270.                                     type="date"
  271.                                     placeholder="选择日期">
  272.                             </el-date-picker>
  273.                             <el-select v-model="search.value" v-else-if="search.key==='cluster'" filterable
  274.                                        placeholder="请选择">
  275.                                 <el-option
  276.                                         v-for="item in clusterList"
  277.                                         :key="item.id"
  278.                                         :label="item.name"
  279.                                         :value="item.id">
  280.                                 </el-option>
  281.                             </el-select>
  283.                             <el-input v-else v-model="search.value"></el-input>
  284.                         </el-form-item>
  285.                     </el-col>
  286.                     <el-col :span="2" :offset="1">
  287.                         <el-button type="primary" icon="el-icon-plus" @click="addSearchInfo" circle></el-button>
  288.                     </el-col>
  289.                     <el-col :span="2">
  290.                         <el-button v-if="index!==0" type="danger" @click="deleteSearchInfo(index)" icon="el-icon-minus"
  291.                                    circle></el-button>
  292.                     </el-col>
  293.                 </el-row>
  294.                 <el-form-item>
  295.                     <el-button type="primary" @click="onSearch">立即搜索</el-button>
  296.                     <el-button @click="searchVisible=false">取消</el-button>
  297.                 </el-form-item>
  299.             </el-form>
  300.         </el-drawer>
  302.         <el-dialog title="添加标签" :visible.sync="tagVisible" width="80%">
  303.             <el-form :model="tagList" status-icon ref="ruleForm" label-width="100px" class="demo-ruleForm">
  304.                 <el-form-item label="标签类型" prop="name">
  305.                     <el-select v-model="tagList.type" @change="changeType"
  306.                                placeholder="请选择">
  307.                         <el-option label="状态" value="status"></el-option>
  308.                     </el-select>
  309.                 </el-form-item>
  310.                 <el-form-item label="赋予的值" prop="rpId">
  311.                     <el-select v-model="tagList.id" filterable placeholder="请选择">
  312.                         <el-option
  313.                                 v-for="item in tags"
  314.                                 :key="item.id"
  315.                                 :label="item.value"
  316.                                 :value="item.id">
  317.                         </el-option>
  318.                     </el-select>
  319.                 </el-form-item>
  320.             </el-form>
  321.             <div slot="footer" class="dialog-footer">
  322.                 <el-button type="primary" @click="saveTag()">提交</el-button>
  323.                 <el-button @click="tagVisible=false">取消</el-button>
  324.             </div>
  325.         </el-dialog>
  326.     </d2-container>
  327. </template>
  329. <script>
  332.     import { 
  333.         fetchList,
  334.         createDevice,
  335.         modifyDevice,
  336.         deleteDevice,
  337.         addHistory,
  338.         addHistories,
  339.         exportRepairInfo,
  340.         addTag
  341.     } from '@/api/device/device' // Secondary package based on el-pagination
  342.     import { findAllDeviceType} from '@/api/device/devicetype'
  343.     import { findAllCluster} from '@/api/device/cluster'
  344.     import { saveColsInfo, saveOrders} from '@/api/device/userInfo'
  345.     import cpu from '@/components/cpu'
  346.     import Memory from "@/components/memory";
  347.     import Disk from "@/components/disk";
  348.     import Nic from "@/components/nic";
  349.     import tablePlus from "@/components/table-plus";
  350.     import TagSelect from "@/components/TagSelect";
  351.     import moment from "moment"
  352.     import { mapState} from 'vuex'
  354.     export default { 
  355.         name: "device",
  356.         computed: { 
  357.             ...mapState('d2admin/permission', [
  358.                 'ownRp', 'cols', 'orders', 'allRp'
  359.             ]),
  360.             ...mapState('d2admin/basedata', [
  361.                 'tagType', 'allTags'
  362.             ])
  364.         },
  365.         components: { Disk, Memory, cpu, Nic, TagSelect,tablePlus},
  366.         data() { 
  367.             return { 
  368.                 menuVisible:false,
  369.                 tags: [],
  370.                 tagList: { 
  371.                     type: null,
  372.                     id: null
  373.                 },
  374.                 tagVisible: false,
  375.                 page: { 
  376.                     current: 1,
  377.                     size: 100,
  378.                     total: 0
  379.                 },
  380.                 searchForm: [{ 
  381.                     key: null,
  382.                     value: null
  383.                 }],
  384.                 searchVisible: false,
  385.                 col: [],
  386.                 dropCol: [],
  387.                 rowClassName: "rowClass",
  388.                 cellClassName: "cellClass",
  389.                 deviceUrl: process.env.VUE_APP_API + "/excel/device",
  390.                 collapse: ["1", "2", "3", "4"],
  391.                 CPUVisible: false,
  392.                 MemoryVisible: false,
  393.                 DiskVisible: false,
  394.                 NicVisible: false,
  395.                 HistoryVisible: false,
  396.                 changeVisible: false,
  397.                 colsList: [],
  398.                 history: [],
  399.                 history_deviceId: null,
  400.                 deviceType: null,
  401.                 temp: { 
  402.                     id: null,
  403.                     name: null,
  404.                     clusterId: null,
  405.                     use: null,
  406.                     deliveryDate: null,
  407.                     type: null,
  408.                     manageIp: null,
  409.                     illoIp: null,
  410.                     period: null,
  411.                     remarks: null,
  412.                     deviceType: null,
  413.                     resourcePool: null,
  414.                     sn: null,
  415.                     tag: null,
  416.                     position: null,
  417.                     useUser: null,
  418.                     startDate: null,
  419.                     systemVersion: null,
  420.                     osVersion: null,
  421.                     outIp: null,
  422.                     publicIp: null,
  423.                     cn2Ip: null,
  424.                     computerPosition: null
  425.                 },
  426.                 list: null,
  427.                 total: 0,
  428.                 listLoading: true,
  429.                 listQuery: { 
  430.                     page: 1,
  431.                     limit: 20,
  432.                     searchForm: [],
  433.                     sortForm: null
  434.                 },
  435.                 dialogFormVisible: false,
  436.                 editFlag: 0,
  437.                 rules: { 
  438.                     // cn2Ip: [
  439.                     // {required: true, message: '请输入cn2ip', trigger: 'blur'}
  440.                     // ],
  441.                 },
  442.                 deviceTypeList: [],
  443.                 clusterList: [],
  444.                 searchData: [
  445.                     { value: "resourcePool", desc: "资源池"},
  446.                     { value: "cluster", desc: "集群"},
  447.                     { value: "use", desc: "用途"},
  448.                     { value: "deliveryDate", desc: "交付日期"},
  449.                     { value: "type", desc: "服务器分类"},
  450.                     { value: "sn", desc: "设备序列号"},
  451.                     { value: "deviceType", desc: "设备类型"},
  452.                     { value: "name", desc: "设备型号"},
  453.                     { value: "status", desc: "状态"},
  454.                     { value: "manageIp", desc: "管理网"},
  455.                     { value: "illoIp", desc: "ILLO地址"},
  456.                     { value: "period", desc: "期数"},
  457.                     { value: "position", desc: "机架位置"},
  458.                     { value: "publicIp", desc: "公网"},
  459.                     { value: "cn2Ip", desc: "CN2"},
  460.                     { value: "outIp", desc: "存储外网"},
  461.                     { value: "systemVersion", desc: "系统版本"},
  462.                     { value: "osVersion", desc: "内核版本"},
  463.                     { value: "useUser", desc: "申请人"},
  464.                     { value: "tag", desc: "项目名称"},
  465.                     { value: "remarks", desc: "备注"},
  466.                     { value: "computerPosition", desc: "机房位置"},
  467.                     { value: "desc", desc: "硬件信息"},
  468.                 ],
  469.                 changeData: [
  470.                     { value: "name", desc: "设备类型"},
  471.                     { value: "cluster.name", desc: "集群"},
  472.                     { value: "type", desc: "服务器分类"},
  473.                     { value: "sn", desc: "设备序列号"},
  474.                     { value: "resourcePool", desc: "资源池"},
  475.                     { value: "manageIp", desc: "管理网"},
  476.                     { value: "illoIp", desc: "ILLO地址"},
  477.                     { value: "period", desc: "期数"},
  478.                     { value: "position", desc: "机架位置"},
  479.                     { value: "publicIp", desc: "公网"},
  480.                     { value: "cn2Ip", desc: "CN2"},
  481.                     { value: "status", desc: "状态"},
  482.                     { value: "outIp", desc: "存储外网"},
  483.                     { value: "systemVersion", desc: "系统版本"},
  484.                     { value: "osVersion", desc: "内核版本"},
  485.                     { value: "use", desc: "用途"},
  486.                     { value: "deliveryDate", desc: "交付日期"},
  487.                     { value: "useUser", desc: "申请人"},
  488.                     { value: "tag", desc: "项目名称"},
  489.                     { value: "remarks", desc: "备注"},
  490.                     { value: "computerPosition", desc: "机房位置"},
  491.                     { value: "desc", desc: "硬件信息"},
  492.                 ],
  493.                 allCols: [
  494.                     { prop: "select", label: "选择", sort: true},
  495.                     { prop: "index", label: "序号", sort: true},
  496.                     { prop: "name", label: "设备型号", sort: true,fixed:false},
  497.                     { prop: "cluster.name", label: "集群", type: "cluster", sort: false,fixed:false},
  498.                     { prop: "type", label: "服务器分类", sort: true,fixed:false},
  499.                     { prop: "sn", label: "设备序列号", sort: true,fixed:false},
  500.                     { prop: "manageIp", label: "管理网", sort: true,fixed:false},
  501.                     { prop: "illoIp", label: "ILLO地址", sort: true,fixed:false},
  502.                     { prop: "period", label: "期数", sort: true,fixed:false},
  503.                     { prop: "position", label: "机架位置", sort: true,fixed:false},
  504.                     { prop: "publicIp", label: "公网", sort: true,fixed:false},
  505.                     { prop: "cn2Ip", label: "CN2", sort: true,fixed:false},
  506.                     { prop: "status", label: "状态", type: "status", sort: true,fixed:false},
  507.                     { prop: "outIp", label: "存储外网", sort: true,fixed:false},
  508.                     { prop: "systemVersion", label: "系统版本", sort: true,fixed:false},
  509.                     { prop: "osVersion", label: "内核版本", sort: true,fixed:false},
  510.                     { prop: "use", label: "用途", sort: true,fixed:false},
  511.                     { prop: "deliveryDate", label: "交付日期", type: "date", sort: true,fixed:false},
  512.                     { prop: "resourcePool", label: "资源池", type: "resourcePool", sort: true,fixed:false},
  513.                     { prop: "useUser", label: "申请人", sort: true,fixed:false},
  514.                     { prop: "tag", label: "项目名称", sort: true,fixed:false},
  515.                     { prop: "remarks", label: "备注", sort: true,fixed:false},
  516.                     { prop: "computerPosition", label: "机房位置", sort: true,fixed:false},
  517.                     { prop: "desc", label: "硬件信息", width: "700px", sort: false,fixed:false},
  518.                 ],
  519.                 multipleSelection: [],
  520.                 sortMap: null,
  521.                 column:null,
  522.                 index:null,
  523.                 editData:[
  524.                     { methodName:"cpuInfo", name:"硬件信息"},
  525.                     { methodName:"historyInfo", name:"历史变更"},
  526.                     { methodName:"editDevice", name:"编辑资产"},
  527.                     { methodName:"deleteDevice", name:"删除资产"},
  528.                 ]
  529.             }
  530.         },
  531.         created() { 
  532.             this.getList()
  533.             findAllDeviceType().then(response => { 
  534.                 this.deviceTypeList = response;
  535.             })
  536.             findAllCluster().then(response => { 
  537.                 this.clusterList = response;
  538.             })
  540.         },
  541.         mounted() { 
  542.         },
  543.         methods: { 
  544.             changeType(val) { 
  545.                 if (val) { 
  546.                     this.tags = this.allTags[val]
  547.                 }
  548.             },
  549.             addTag() { 
  550.                 this.tagList = { 
  551.                     type: null,
  552.                     id: null
  553.                 }
  554.                 this.tagVisible = true
  556.             },
  557.             handleSearchFormReset() { 
  558.                 this.listQuery.searchForm = []
  559.                 this.searchForm = [{ 
  560.                     key: null,
  561.                     value: null
  562.                 }]
  563.                 this.getList();
  564.             },
  565.             onSearch() { 
  566.                 this.getList();
  567.                 this.searchVisible = false;
  568.             },
  569.             addSearchInfo() { 
  570.                 this.searchForm.push({ 
  571.                     key: null,
  572.                     value: null
  573.                 })
  574.             },
  575.             deleteSearchInfo(index) { 
  576.                 this.searchForm.splice(index, 1);
  577.             },
  578.             search() { 
  579.                 this.searchVisible = true;
  580.             },
  581.             handleClose(done) { 
  582.                 this.$confirm('确认关闭？')
  583.                     .then(_ => { 
  584.                         done();
  585.                     })
  586.                     .catch(_ => { 
  587.                     });
  588.             },
  589.             handleSizeChange(val) { 
  590.                 this.page.size = val;
  591.                 this.getList();
  592.             },
  593.             handleCurrentChange(val) { 
  594.                 this.page.current = val;
  595.                 this.getList();
  596.             },
  597.             saveTag() { 
  598.                 if (this.multipleSelection.length === 0) { 
  599.                     this.$message({ 
  600.                         type: 'warning',
  601.                         message: '请先选择要修改的机器'
  602.                     });
  603.                     return
  604.                 }
  605.                 addTag({ 
  606.                     ids: this.multipleSelection,
  607.                     tagId: this.tagList.id
  608.                 }).then(res => { 
  610.                     this.$message({ 
  611.                         type: 'success',
  612.                         message: '添加成功'
  613.                     });
  614.                     this.tagVisible = false;
  615.                     this.getList()
  616.                 })
  618.             },
  619.             exportRepair() { 
  620.                 if (this.multipleSelection.length === 0) { 
  621.                     this.$message({ 
  622.                         type: 'warning',
  623.                         message: '请先选择要导出的机器'
  624.                     });
  625.                     return
  626.                 }
  627.                 exportRepairInfo(this.multipleSelection).then(res => { 
  628.                     let data = res;
  629.                     const textarea = document.createElement("textarea");
  630.                     textarea.setAttribute("readonly", true);
  631.                     textarea.value = data;
  632.                     document.body.appendChild(textarea);
  633.                     textarea.setSelectionRange(0, textarea.value.length);
  634.                     textarea.select();
  635.                     if (document.execCommand("copy")) { 
  636.                         this.$message({ 
  637.                             type: 'success',
  638.                             message: '复制成功'
  639.                         });
  640.                     } else { 
  641.                         this.$message({ 
  642.                             type: 'error',
  643.                             message: '复制失败'
  644.                         });
  645.                     }
  646.                     document.body.removeChild(textarea);
  648.                 })
  649.             },
  650.             saveOrder() { 
  652.                 let result = JSON.stringify(this.$refs.tableData.dropCol);
  653.                 let data = { 
  654.                     orders: result,
  655.                     type: "device"
  656.                 }
  657.                 saveOrders(data).then(res => { 
  658.                     this.$message({ 
  659.                         type: 'success',
  660.                         message: '保存成功 '
  661.                     });
  662.                     this.$store.dispatch('SetOrders', result)
  663.                 })
  664.             },
  665.             addHs() { 
  666.                 this.$prompt('请输入变更记录', '提示', { 
  667.                     confirmButtonText: '确定',
  668.                     cancelButtonText: '取消',
  669.                 }).then(({ value}) => { 
  670.                     addHistories({ 
  671.                         deviceId: this.multipleSelection,
  672.                         message: value
  673.                     }).then(response => { 
  674.                         this.$message({ 
  675.                             type: 'success',
  676.                             message: '添加变更成功 '
  677.                         });
  678.                         this.HistoryVisible = false;
  679.                         this.getList();
  681.                     })
  682.                 }).catch(() => { 
  683.                     this.$message({ 
  684.                         type: 'info',
  685.                         message: '取消添加'
  686.                     });
  687.                 });
  689.             },
  690.             changeCols() { 
  691.                 if (this.cols && this.cols.hasOwnProperty('device')) { 
  692.                     if (!this.cols['device']) { 
  693.                         this.colsList = []
  694.                         this.changeVisible = true;
  695.                         return
  696.                     }
  697.                     let str = this.cols['device'];
  698.                     let data = this.utils.str2Arr(str);
  699.                     this.colsList = data;
  700.                 } else { 
  701.                     this.colsList = [];
  702.                 }
  703.                 this.changeVisible = true;
  704.             },
  705.             saveCols() { 
  706.                 let result = this.utils.arr2Str(this.colsList);
  707.                 let data = { 
  708.                     cols: result,
  709.                     type: "device"
  710.                 }
  711.                 saveColsInfo(data).then(res => { 
  712.                     this.changeVisible = false;
  713.                     this.$message({ 
  714.                         type: 'success',
  715.                         message: '变更成功 '
  716.                     });
  717.                     this.$store.dispatch('SetCols', result)
  718.                     location.reload()
  719.                 })
  720.             },
  721.             getDate(time) { 
  722.                 return moment(time).format('YYYY-MM-DD')
  723.             },
  724.             getDateTime(time) { 
  725.                 return moment(time).format('YYYY-MM-DD HH:mm:ss')
  726.             },
  727.             addHistory() { 
  728.                 this.$prompt('请输入变更记录', '提示', { 
  729.                     confirmButtonText: '确定',
  730.                     cancelButtonText: '取消',
  731.                 }).then(({ value}) => { 
  732.                     addHistory({ 
  733.                         deviceId: this.history_deviceId,
  734.                         message: value
  735.                     }).then(response => { 
  736.                         this.$message({ 
  737.                             type: 'success',
  738.                             message: '添加变更成功 '
  739.                         });
  740.                         this.HistoryVisible = false;
  741.                         this.getList();
  743.                     })
  744.                 }).catch(() => { 
  745.                     this.$message({ 
  746.                         type: 'info',
  747.                         message: '取消添加'
  748.                     });
  749.                 });
  750.             },
  751.             historyInfo(row) { 
  752.                 this.history = row.histories;
  753.                 this.HistoryVisible = true;
  754.                 this.history_deviceId = row.id
  755.             },
  756.             handleFilter() { 
  757.                 this.listQuery.page = 1
  758.                 this.getList()
  759.             },
  760.             cpuInfo(row) { 
  761.                 this.deviceType = row.deviceType
  762.                 this.CPUVisible = true;
  763.             },
  764.             memoryInfo(row) { 
  765.                 this.deviceType = row.deviceType
  766.                 this.MemoryVisible = true;
  767.             },
  768.             nicInfo(row) { 
  769.                 this.deviceType = row.deviceType
  770.                 this.NicVisible = true;
  771.             },
  772.             diskInfo(row) { 
  773.                 this.deviceType = row.deviceType
  774.                 this.DiskVisible = true;
  775.             },
  776.             saveDevice(formName) { 
  777.                 this.$refs[formName].validate((valid) => { 
  778.                     if (valid) { 
  779.                         if (this.editFlag === 0) { 
  780.                             createDevice(
  781.                                 this.temp
  782.                             ).then(response => { 
  783.                                 this.$message({ 
  784.                                     message: '保存成功',
  785.                                     type: 'success'
  786.                                 });
  787.                                 this.getList();
  788.                                 this.resetDeviceForm('ruleForm')
  789.                             })
  790.                         } else { 
  791.                             modifyDevice(
  792.                                 this.temp
  793.                             ).then(response => { 
  794.                                 this.$message({ 
  795.                                     message: '保存成功',
  796.                                     type: 'success'
  797.                                 });
  798.                                 this.getList();
  799.                                 this.resetDeviceForm('ruleForm')
  800.                             })
  802.                         }
  805.                     } else { 
  806.                         this.$message.error('保存失败,请重试');
  807.                         return false;
  808.                     }
  809.                 });
  810.             },
  811.             handleAvatarSuccess(res, file) { 
  812.                 if (res.code != 200) { 
  813.                     this.$message({ 
  814.                         message: res.msg,
  815.                         type: 'error'
  816.                     });
  817.                     return
  818.                 }
  819.                 this.$message({ 
  820.                     message: '上传成功',
  821.                     type: 'success'
  822.                 });
  823.                 this.getList()
  824.             },
  825.             resetDeviceForm(formName) { 
  826.                 this.$refs[formName].resetFields();
  827.                 this.dialogFormVisible = false;
  828.             },
  829.             getList() { 
  830.                 this.listLoading = true
  831.                 this.listQuery.page = this.page.current
  832.                 this.listQuery.limit = this.page.size
  833.                 this.listQuery.searchForm = this.searchForm
  834.                 if (this.sortMap) { 
  835.                     this.listQuery.sortForm = this.strMapToObj(this.sortMap)
  836.                 } else { 
  837.                     this.listQuery.sortForm = null
  838.                 }
  839.                 fetchList(this.listQuery).then(response => { 
  840.                     this.list = response.content;
  841.                     this.page.total = response.totalElements;
  842.                     this.listLoading = false
  843.                 })
  844.             },
  845.             strMapToObj(strMap) { 
  846.                 let obj = Object.create(null);
  847.                 for (let [k, v] of strMap) { 
  848.                     obj[k] = v;
  849.                 }
  850.                 return obj;
  851.             },
  852.             createDevice() { 
  853.                 this.resetTemp()
  854.                 this.dialogFormVisible = true;
  855.                 this.editFlag = 0;
  856.             },
  857.             editDevice(item) { 
  858.                 this.resetTemp()
  859.                 this.temp.id = item.id;
  860.                 this.temp.clusterId = item.cluster.id;
  861.                 this.temp.name = item.name;
  862.                 this.temp.use = item.use;
  863.                 this.temp.deliveryDate = item.deliveryDate;
  864.                 this.temp.type = item.type;
  865.                 this.temp.period = item.period;
  866.                 this.temp.manageIp = item.manageIp;
  867.                 this.temp.illoIp = item.illoIp;
  868.                 this.temp.remarks = item.remarks;
  869.                 this.temp.deviceType = item.deviceType;
  870.                 this.temp.sn = item.sn;
  871.                 this.temp.tag = item.tag;
  872.                 this.temp.resourcePool = item.resourcePool;
  873.                 this.temp.position = item.position;
  874.                 this.temp.systemVersion = item.systemVersion;
  875.                 this.temp.osVersion = item.osVersion;
  876.                 this.temp.publicIp = item.publicIp;
  877.                 this.temp.outIp = item.outIp;
  878.                 this.temp.cn2Ip = item.cn2Ip;
  879.                 this.temp.computerPosition = item.computerPosition
  880.                 this.dialogFormVisible = true;
  881.                 this.editFlag = 1;
  882.             },
  884.             resetTemp() { 
  885.                 this.temp = { 
  886.                     id: null,
  887.                     name: null,
  888.                     clusterId: null,
  889.                     use: null,
  890.                     deliveryDate: null,
  891.                     type: null,
  892.                     manageIp: null,
  893.                     illoIp: null,
  894.                     period: null,
  895.                     remarks: null,
  896.                     deviceType: null,
  897.                     sn: null,
  898.                     tag: null,
  899.                     resourcePool: null,
  900.                     position: null,
  901.                     useUser: null,
  902.                     startDate: null,
  903.                     systemVersion: null,
  904.                     osVersion: null,
  905.                     outIp: null,
  906.                     publicIp: null,
  907.                     cn2Ip: null,
  908.                 }
  909.             },
  910.             deleteDevice(row) { 
  911.                 this.$confirm('此操作将删除该资产, 是否继续?', '提示', { 
  912.                     confirmButtonText: '确定',
  913.                     cancelButtonText: '取消',
  914.                     type: 'warning'
  915.                 }).then(() => { 
  916.                     deleteDevice(row.id).then(response => { 
  917.                         this.getList();
  918.                         this.$message({ 
  919.                             type: 'success',
  920.                             message: '删除成功!'
  921.                         });
  922.                     })
  924.                 }).catch(() => { 
  925.                     this.$message({ 
  926.                         type: 'info',
  927.                         message: '已取消删除'
  928.                     });
  929.                 });
  930.             },
  935.         }
  936.     }
  937. </script>
  939. <style>
  941.     .el-dropdown-link { 
  942.         cursor: pointer;
  943.         color: #409EFF;
  944.     }
  946.     .demo-table-expand { 
  947.         font-size: 0;
  948.     }
  950.     .demo-table-expand label { 
  951.         width: 90px;
  952.         color: #99a9bf;
  953.     }
  955.     .demo-table-expand .el-form-item { 
  956.         margin-right: 0;
  957.         margin-bottom: 0;
  958.         width: 50%;
  959.     }
  961.     .rowClass { 
  962.         height: 30px;
  963.         padding: 0 !important;
  965.     }
  967.     .cellClass { 
  968.         padding: 2px !important;
  969.     }
  971.     .el-table--striped .el-table__body tr.el-table__row--striped.current-row td,
  972.     .el-table__body tr.current-row > td { 
  973.         background-color: #a0cfff;
  974.     }
  976.     .el-table--striped .el-table__body tr.hover-row.el-table__row--striped > td,
  977.     .el-table__body tr.hover-row > td { 
  978.         background-color: #d9ecff !important;
  979.     }
  980. </style>

发表评论

表情：
评论列表 （有 0 条评论，107人围观）

还没有评论，来说两句吧...

相关阅读