elementui表格的列拖拽及动态显示列实现

淡淡的烟草味﹌ 2023-06-07 10:57 454阅读 0赞

  1. 安装Sortable

    npm install sortablejs —save

  2. 引入Sortable

    import Sortable from ‘sortablejs’

  3. 添加列拖拽方法

    //列拖拽
    columnDrop() {

    1. const wrapperTr = document.querySelector('.el-table__header-wrapper tr')
    2. this.sortable = Sortable.create(wrapperTr, {
    3.     animation: 180,
    4.     delay: 0,
    5.     onEnd: evt => {
    6.         const oldItem = this.dropCol[evt.oldIndex]
    7.         this.dropCol.splice(evt.oldIndex, 1)
    8.         this.dropCol.splice(evt.newIndex, 0, oldItem)
    9.     }
    10. })

    }

  4. 拼装表单列数据

    getDropCol(){

    1.           if(this.orders&&this.orders.hasOwnProperty('device')){
    2.               let data=JSON.parse(this.orders['device'])
    3.               return data
    4.           }
    5.           return this.getCol()
    6.         },
    7.         getCol() {
    8.             let allCols = [
    9.                 {prop: "select", label: "选择"},
    10.                 {prop: "index", label: "序号"},
    11.                 {prop: "name", label: "设备型号"},
    12.                 {prop: "cluster.name", label: "集群",type:"cluster"},
    13.                 {prop: "type", label: "服务器分类"},
    14.                 {prop: "sn", label: "设备序列号"},
    15.                 {prop: "manageIp", label: "管理网"},
    16.                 {prop: "illoIp", label: "ILLO地址"},
    17.                 {prop: "period", label: "期数"},
    18.                 {prop: "position", label: "机架位置"},
    19.                 {prop: "publicIp", label: "公网"},
    20.                 {prop: "cn2Ip", label: "CN2"},
    21.                 {prop: "outIp", label: "存储外网"},
    22.                 {prop: "systemVersion", label: "系统版本"},
    23.                 {prop: "osVersion", label: "内核版本"},
    24.                 {prop: "use", label: "用途"},
    25.                 {prop: "deliveryDate", label: "交付日期",type:"date"},
    26.                 {prop: "useUser", label: "申请人"},
    27.                 {prop: "tag", label: "项目名称"},
    28.                 {prop: "remarks", label: "备注"},
    29.                 {prop: "computerPosition", label: "机房位置"},
    30.             ]
    31.             if (this.cols && this.cols.hasOwnProperty('device')) {
    32.                 if (this.cols['device'] === "") {
    33.                     return allCols;
    34.                 }
    35.                 let str = this.cols['device'];
    36.                 let data = this.utils.str2Arr(str);
    38.                 let result=[]
    39.                 result.push({prop: "select", label: "选择"})
    40.                 result.push({prop: "index", label: "序号"})
    41.                 data.forEach(function (item) {
    42.                     allCols.forEach(function (col) {
    43.                         if (col.prop === item) {
    44.                             result.push(col);
    45.                         }
    46.                     })
    47.                 })
    48.                 return result;
    49.             } else {
    50.                 return allCols;
    51.             }
    53.         },

注：我这里因为配合后端保存了顺序而且支持了列是否显示的功能，所以需要检索this.orders，如果不需要可以直接使用this.gelCol()

  1. 初始化页面时，初始化列数据

    mounted() {

    1.         this.columnDrop()
    2.         this.col=this.getDropCol();
    3.         this.dropCol=this.getDropCol();
    4.     },

  2. v-for生成表格

    <el-table-column

    1.     type="selection"
    2.     width="55">
    3.   </el-table-column>
    4.   <el-table-column type="index" align="center" width="50">
    5.   </el-table-column>
    6.   <el-table-column v-for="(item, index) in col"
    7.                    v-if="col[index].prop!=='select'&&col[index].prop!=='index'"
    8.                    align="center"
    9.                    show-overflow-tooltip
    10.                    width="200px"
    11.                    :key="`col_${index}`"
    12.                    :prop="dropCol[index].prop"
    13.                    :label="item.label">
    14.     <template slot-scope="scope">
    15.       <span>{

    { !dropCol[index].type?scope.row[dropCol[index].prop]:getValue(scope.row,dropCol[index].type),dropCol[index].prop }}

    1.     </template>
    2.   </el-table-column>
    3.   <el-table-column label="操作" align="center" fixed="right" width="200" class-name="small-padding fixed-width">
    4.     <template slot-scope="scope">
    5.       <el-dropdown trigger="hover">
    6.         <span class="el-dropdown-link">
    7.           操作菜单<i class="el-icon-arrow-down el-icon--right"></i>
    8.         </span>
    9.         <el-dropdown-menu slot="dropdown">
    10.           <el-dropdown-item class="el-dropdown-link" @click.native="cpuInfo(scope.row)">硬件信息</el-dropdown-item>
    11.           <!--              <el-dropdown-item class="el-dropdown-link" @click.native="memoryInfo(scope.row)">内存信息</el-dropdown-item>-->
    12.           <!--              <el-dropdown-item class="el-dropdown-link" @click.native="nicInfo(scope.row)">网卡信息</el-dropdown-item>-->
    13.           <!--              <el-dropdown-item class="el-dropdown-link" @click.native="diskInfo(scope.row)">硬盘信息</el-dropdown-item>-->
    14.           <el-dropdown-item class="el-dropdown-link" @click.native="historyInfo(scope.row)">历史变更</el-dropdown-item>
    15.           <el-dropdown-item class="el-dropdown-link" @click.native="editDevice(scope.row)">编辑资产</el-dropdown-item>
    16.           <el-dropdown-item class="el-dropdown-link" @click.native="deleteDevice(scope.row)">删除资产</el-dropdown-item>
    17.         </el-dropdown-menu>
    18.       </el-dropdown>
    19.     </template>
    20.   </el-table-column>
    21. </el-table>

我这里配合type来对特殊字段进行了处理，使用了getValue的方法实现的，好像也可以用v-if来做(毕竟不是专业前端，随便来了= =)

整页代码（非纯前端，有些粗糙见谅= =）：

  1. <template>
  2.   <div class="app-container">
  3.     <div class="filter-container">
  4.       <el-input v-model="listQuery.cluster" clearable placeholder="请输入所属集群" style="width: 200px;"
  5.                 class="filter-item"
  6.                 @keyup.enter.native="handleFilter"/>
  7.       <el-input v-model="listQuery.outIp" clearable placeholder="请输入存储外网IP" style="width: 200px;"
  8.                 class="filter-item"
  9.                 @keyup.enter.native="handleFilter"/>
  10.       <el-button type="primary" plain @click="handleFilter" class="filter-item">搜索</el-button>
  11.       <el-button type="primary" plain @click="createDevice" class="filter-item">创建资产</el-button>
  12.       <el-button type="primary" plain @click="changeCols" class="filter-item">修改显示列</el-button>
  13.       <el-button type="primary" plain @click="addHs" class="filter-item">添加历史变更</el-button>
  14.       <el-button type="primary" plain @click="saveOrder" class="filter-item">保存显示顺序</el-button>
  15.       <el-upload
  16.         :action="deviceUrl"
  17.         :show-file-list="false"
  18.         :on-success="handleAvatarSuccess"
  19.         style="margin-top: 5px;"
  20.       >
  21.         <el-button size="small" type="primary">导入</el-button>
  22.       </el-upload>
  24.     </div>
  25.     <el-table
  26.       v-loading="listLoading"
  27.       :data="list"
  28.       border
  29.       fit
  30.       size="mini"
  31.       :row-class-name="rowClassName"
  32.       :cell-class-name="cellClassName"
  33.       highlight-current-row
  34.       style="width: 100%;margin-top: 20px"
  35.       @selection-change="handleSelectionChange"
  36.     >
  37.       <el-table-column
  38.         type="selection"
  39.         width="55">
  40.       </el-table-column>
  41.       <el-table-column type="index" align="center" width="50">
  42.       </el-table-column>
  43.       <el-table-column v-for="(item, index) in col"
  44.                        v-if="col[index].prop!=='select'&&col[index].prop!=='index'"
  45.                        align="center"
  46.                        show-overflow-tooltip
  47.                        width="200px"
  48.                        :key="`col_${index}`"
  49.                        :prop="dropCol[index].prop"
  50.                        :label="item.label">
  51.         <template slot-scope="scope">
  52.           <span>{
  53.    { !dropCol[index].type?scope.row[dropCol[index].prop]:getValue(scope.row,dropCol[index].type),dropCol[index].prop }}</span>
  54.         </template>
  55.       </el-table-column>
  56.       <el-table-column label="操作" align="center" fixed="right" width="200" class-name="small-padding fixed-width">
  57.         <template slot-scope="scope">
  58.           <el-dropdown trigger="hover">
  59.             <span class="el-dropdown-link">
  60.               操作菜单<i class="el-icon-arrow-down el-icon--right"></i>
  61.             </span>
  62.             <el-dropdown-menu slot="dropdown">
  63.               <el-dropdown-item class="el-dropdown-link" @click.native="cpuInfo(scope.row)">硬件信息</el-dropdown-item>
  64.               <!--              <el-dropdown-item class="el-dropdown-link" @click.native="memoryInfo(scope.row)">内存信息</el-dropdown-item>-->
  65.               <!--              <el-dropdown-item class="el-dropdown-link" @click.native="nicInfo(scope.row)">网卡信息</el-dropdown-item>-->
  66.               <!--              <el-dropdown-item class="el-dropdown-link" @click.native="diskInfo(scope.row)">硬盘信息</el-dropdown-item>-->
  67.               <el-dropdown-item class="el-dropdown-link" @click.native="historyInfo(scope.row)">历史变更</el-dropdown-item>
  68.               <el-dropdown-item class="el-dropdown-link" @click.native="editDevice(scope.row)">编辑资产</el-dropdown-item>
  69.               <el-dropdown-item class="el-dropdown-link" @click.native="deleteDevice(scope.row)">删除资产</el-dropdown-item>
  70.             </el-dropdown-menu>
  71.           </el-dropdown>
  72.         </template>
  73.       </el-table-column>
  74.     </el-table>
  75.     <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit"
  76.                 @pagination="getList"/>
  78.     <el-dialog title="Device管理" :visible.sync="dialogFormVisible" :close-on-click-modal=false>
  79.       <el-form :model="temp" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
  80.         <el-form-item label="集群" prop="cluster">
  81.           <el-select v-model="temp.clusterId" placeholder="请选择">
  82.             <el-option
  83.               v-for="item in clusterList"
  84.               :key="item.id"
  85.               :label="item.name"
  86.               :value="item.id">
  87.             </el-option>
  88.           </el-select>
  89.         </el-form-item>
  90.         <el-form-item label="设备型号" prop="name">
  91.           <el-input v-model="temp.name"></el-input>
  92.         </el-form-item>
  93.         <el-form-item label="期数" prop="period">
  94.           <el-input v-model="temp.period"></el-input>
  95.         </el-form-item>
  96.         <el-form-item label="管理网" prop="manageIp">
  97.           <el-input v-model="temp.manageIp"></el-input>
  98.         </el-form-item>
  99.         <el-form-item label="ILLO地址" prop="cluster">
  100.           <el-input v-model="temp.illoIp"></el-input>
  101.         </el-form-item>
  102.         <el-form-item label="交付日期" prop="deliveryDate">
  103.           <el-date-picker
  104.             v-model="temp.deliveryDate"
  105.             type="date"
  106.             placeholder="选择日期">
  107.           </el-date-picker>
  108.         </el-form-item>
  109.         <el-form-item label="服务器分类" prop="type">
  110.           <el-input v-model="temp.type"></el-input>
  111.         </el-form-item>
  112.         <el-form-item label="设备类型" prop="deviceType">
  113.           <el-select v-model="temp.deviceType" placeholder="请选择">
  114.             <el-option
  115.               v-for="item in deviceTypeList"
  116.               :key="item.deviceType"
  117.               :label="item.nameZh"
  118.               :value="item.deviceType">
  119.             </el-option>
  120.           </el-select>
  121.         </el-form-item>
  122.         <el-form-item label="设备序列号" prop="sn">
  123.           <el-input v-model="temp.sn"></el-input>
  124.         </el-form-item>
  125.         <el-form-item label="项目名称" prop="tag">
  126.           <tag-select type="program" :value.sync="temp.tag"></tag-select>
  127.         </el-form-item>
  128.         <el-form-item label="机架位置" prop="position">
  129.           <el-input v-model="temp.position"></el-input>
  130.         </el-form-item>
  131.         <el-form-item label="机房位置" prop="computerPosition">
  132.           <el-input v-model="temp.computerPosition"></el-input>
  133.         </el-form-item>
  134.         <el-form-item label="公网" prop="publicIp">
  135.           <el-input v-model="temp.publicIp"></el-input>
  136.         </el-form-item>
  137.         <el-form-item label="存储外网" prop="inIp">
  138.           <el-input v-model="temp.outIp"></el-input>
  139.         </el-form-item>
  140.         <el-form-item label="CN2" prop="cn2Ip">
  141.           <el-input v-model="temp.cn2Ip"></el-input>
  142.         </el-form-item>
  143.         <el-form-item label="系统版本" prop="systemVersion">
  144.           <el-input v-model="temp.systemVersion"></el-input>
  145.         </el-form-item>
  146.         <el-form-item label="内核版本" prop="osVersion">
  147.           <el-input v-model="temp.osVersion"></el-input>
  148.         </el-form-item>
  149.         <el-form-item label="用途" prop="use">
  150.           <el-input v-model="temp.use"></el-input>
  151.         </el-form-item>
  152.         <el-form-item label="备注" prop="remarks">
  153.           <el-input v-model="temp.remarks"></el-input>
  154.         </el-form-item>
  155.       </el-form>
  156.       <div slot="footer" class="dialog-footer">
  157.         <el-button type="primary" @click="saveDevice('ruleForm')">提交</el-button>
  158.         <el-button @click="resetDeviceForm('ruleForm')">取消</el-button>
  159.       </div>
  160.     </el-dialog>
  161.     <el-dialog title="硬件信息" :visible.sync="CPUVisible" width="80%">
  162.       <el-collapse v-model="collapse">
  163.         <el-collapse-item title="CPU信息" name="1">
  164.           <cpu :device_type.sync="deviceType"></cpu>
  165.         </el-collapse-item>
  166.         <el-collapse-item title="内存信息" name="2">
  167.           <memory :device_type.sync="deviceType"></memory>
  168.         </el-collapse-item>
  169.         <el-collapse-item title="硬盘信息" name="3">
  170.           <disk :device_type.sync="deviceType"></disk>
  171.         </el-collapse-item>
  172.         <el-collapse-item title="网卡信息" name="4">
  173.           <nic :device_type.sync="deviceType"></nic>
  174.         </el-collapse-item>
  175.       </el-collapse>
  176.     </el-dialog>
  177.     <!--    <el-dialog title="内存信息" :visible.sync="MemoryVisible"  width="80%">-->
  178.     <!--      <memory :device_type.sync="deviceType"></memory>-->
  179.     <!--    </el-dialog>-->
  180.     <!--    <el-dialog title="硬盘信息" :visible.sync="DiskVisible"  width="80%">-->
  181.     <!--      <disk :device_type.sync="deviceType"></disk>-->
  182.     <!--    </el-dialog>-->
  183.     <!--    <el-dialog title="网卡信息" :visible.sync="NicVisible"  width="80%">-->
  184.     <!--      <nic :device_type.sync="deviceType"></nic>-->
  185.     <!--    </el-dialog>-->
  186.     <el-dialog title="历史变更" :visible.sync="HistoryVisible" width="80%">
  187.       <el-button type="primary" @click="addHistory" style="margin-bottom: 5px">添加历史变更</el-button>
  188.       <el-timeline>
  189.         <el-timeline-item v-for="item in history"
  190.                           :key="item.id"
  191.                           :timestamp="getDateTime(item.createDate)" placement="top">
  192.           <el-card>
  193.             <h4>{
  194.    {item.message}}</h4>
  195.             <p>XXX 提交于 {
  196.    {getDateTime(item.createDate)}}</p>
  197.           </el-card>
  198.         </el-timeline-item>
  199.       </el-timeline>
  200.     </el-dialog>
  202.     <el-dialog title="显示列编辑" :visible.sync="changeVisible" width="80%">
  203.       <el-transfer v-model="colsList" :data="changeData" :titles="['所有列', '显示列']" :props="{key: 'value',label: 'desc'}"
  204.       ></el-transfer>
  205.       <div slot="footer" class="dialog-footer">
  206.         <el-button type="primary" @click="saveCols()">提交</el-button>
  207.         <el-button @click="changeVisible=false">取消</el-button>
  208.       </div>
  209.     </el-dialog>
  210.   </div>
  211. </template>
  213. <script>
  215.     import Sortable from 'sortablejs'
  216.     import Pagination from '@/components/Pagination'
  217.     import {fetchList, createDevice, modifyDevice, deleteDevice, addHistory, addHistories} from '@/api/device' // Secondary package based on el-pagination
  218.     import {findAllDeviceType} from '@/api/devicetype'
  219.     import {findAllCluster} from '@/api/cluster'
  220.     import {saveColsInfo,saveOrders} from '@/api/userInfo'
  221.     import cpu from '@/components/cpu'
  222.     import Memory from "../../components/memory/index";
  223.     import Disk from "../../components/disk/index";
  224.     import Nic from "../../components/nic/index";
  225.     import TagSelect from "../../components/TagSelect/index";
  226.     import moment from "moment"
  227.     import {mapGetters} from 'vuex'
  229.     export default {
  230.         name: 'Device',
  231.         computed: {
  232.             ...mapGetters([
  233.                 'cols',
  234.                 'orders'
  235.             ])
  236.         },
  237.         components: {Disk, Memory, Pagination, cpu, Nic, TagSelect},
  238.         data() {
  239.             return {
  240.                 col: [],
  241.                 dropCol: [],
  242.                 rowClassName: "rowClass",
  243.                 cellClassName: "cellClass",
  244.                 deviceUrl: process.env.BASE_API + "/excel/device",
  245.                 collapse: ["1", "2", "3", "4"],
  246.                 CPUVisible: false,
  247.                 MemoryVisible: false,
  248.                 DiskVisible: false,
  249.                 NicVisible: false,
  250.                 HistoryVisible: false,
  251.                 changeVisible: false,
  252.                 colsList: [],
  253.                 history: [],
  254.                 history_deviceId: null,
  255.                 deviceType: null,
  256.                 temp: {
  257.                     id: null,
  258.                     name: null,
  259.                     clusterId: null,
  260.                     use: null,
  261.                     deliveryDate: null,
  262.                     type: null,
  263.                     manageIp: null,
  264.                     illoIp: null,
  265.                     period: null,
  266.                     remarks: null,
  267.                     deviceType: null,
  268.                     sn: null,
  269.                     tag: null,
  270.                     isDel: null,
  271.                     position: null,
  272.                     useUser: null,
  273.                     startDate: null,
  274.                     systemVersion: null,
  275.                     osVersion: null,
  276.                     outIp: null,
  277.                     publicIp: null,
  278.                     cn2Ip: null,
  279.                     computerPosition: null
  280.                 },
  281.                 list: null,
  282.                 total: 0,
  283.                 listLoading: true,
  284.                 listQuery: {
  285.                     page: 1,
  286.                     limit: 20,
  287.                     cluster: null,
  288.                     outIp: null
  289.                 },
  290.                 dialogFormVisible: false,
  291.                 editFlag: 0,
  292.                 rules: {
  293.                     // cn2Ip: [
  294.                     //     {required: true, message: '请输入cn2ip', trigger: 'blur'}
  295.                     // ],
  296.                 },
  297.                 deviceTypeList: [],
  298.                 clusterList: [],
  299.                 changeData: [
  300.                     {value: "name", desc: "设备型号"},
  301.                     {value: "cluster.name", desc: "集群"},
  302.                     {value: "type", desc: "服务器分类"},
  303.                     {value: "sn", desc: "设备序列号"},
  304.                     {value: "manageIp", desc: "管理网"},
  305.                     {value: "illoIp", desc: "ILLO地址"},
  306.                     {value: "period", desc: "期数"},
  307.                     {value: "position", desc: "机架位置"},
  308.                     {value: "publicIp", desc: "公网"},
  309.                     {value: "cn2Ip", desc: "CN2"},
  310.                     {value: "outIp", desc: "存储外网"},
  311.                     {value: "systemVersion", desc: "系统版本"},
  312.                     {value: "osVersion", desc: "内核版本"},
  313.                     {value: "use", desc: "用途"},
  314.                     {value: "deliveryDate", desc: "交付日期"},
  315.                     {value: "useUser", desc: "申请人"},
  316.                     {value: "tag", desc: "项目名称"},
  317.                     {value: "remarks", desc: "备注"},
  318.                     {value: "computerPosition", desc: "机房位置"},
  319.                 ],
  320.                 multipleSelection: [],
  321.             }
  322.         },
  323.         created() {
  324.             this.getList()
  325.             findAllDeviceType().then(response => {
  326.                 this.deviceTypeList = response.data;
  327.             })
  328.             findAllCluster().then(response => {
  329.                 this.clusterList = response.data;
  330.             })
  331.         },
  332.         mounted() {
  333.             this.columnDrop()
  334.             this.col=this.getDropCol();
  335.             this.dropCol=this.getDropCol();
  336.         },
  337.         methods: {
  338.             getValue(row,type,prop){
  339.                 switch (type) {
  340.                     case 'cluster':
  341.                         return row.cluster.name
  342.                     case 'date':
  343.                         return this.getDate(row[prop])
  344.                 }
  346.             },
  347.             saveOrder(){
  348.                 let result = JSON.stringify(this.dropCol);
  349.                 let data = {
  350.                     orders: result,
  351.                     type: "device"
  352.                 }
  353.                 saveOrders(data).then(res => {
  354.                     this.$message({
  355.                         type: 'success',
  356.                         message: '保存成功 '
  357.                     });
  358.                     this.$store.dispatch('SetOrders', result)
  359.                 })
  360.             },
  361.             getDropCol(){
  362.               if(this.orders&&this.orders.hasOwnProperty('device')){
  363.                   let data=JSON.parse(this.orders['device'])
  364.                   return data
  365.               }
  366.               return this.getCol()
  367.             },
  368.             getCol() {
  369.                 let allCols = [
  370.                     {prop: "select", label: "选择"},
  371.                     {prop: "index", label: "序号"},
  372.                     {prop: "name", label: "设备型号"},
  373.                     {prop: "cluster.name", label: "集群",type:"cluster"},
  374.                     {prop: "type", label: "服务器分类"},
  375.                     {prop: "sn", label: "设备序列号"},
  376.                     {prop: "manageIp", label: "管理网"},
  377.                     {prop: "illoIp", label: "ILLO地址"},
  378.                     {prop: "period", label: "期数"},
  379.                     {prop: "position", label: "机架位置"},
  380.                     {prop: "publicIp", label: "公网"},
  381.                     {prop: "cn2Ip", label: "CN2"},
  382.                     {prop: "outIp", label: "存储外网"},
  383.                     {prop: "systemVersion", label: "系统版本"},
  384.                     {prop: "osVersion", label: "内核版本"},
  385.                     {prop: "use", label: "用途"},
  386.                     {prop: "deliveryDate", label: "交付日期",type:"date"},
  387.                     {prop: "useUser", label: "申请人"},
  388.                     {prop: "tag", label: "项目名称"},
  389.                     {prop: "remarks", label: "备注"},
  390.                     {prop: "computerPosition", label: "机房位置"},
  391.                 ]
  392.                 if (this.cols && this.cols.hasOwnProperty('device')) {
  393.                     if (this.cols['device'] === "") {
  394.                         return allCols;
  395.                     }
  396.                     let str = this.cols['device'];
  397.                     let data = this.utils.str2Arr(str);
  399.                     let result=[]
  400.                     result.push({prop: "select", label: "选择"})
  401.                     result.push({prop: "index", label: "序号"})
  402.                     data.forEach(function (item) {
  403.                         allCols.forEach(function (col) {
  404.                             if (col.prop === item) {
  405.                                 result.push(col);
  406.                             }
  407.                         })
  408.                     })
  409.                     return result;
  410.                 } else {
  411.                     return allCols;
  412.                 }
  414.             },
  415.             addHs() {
  416.                 this.$prompt('请输入变更记录', '提示', {
  417.                     confirmButtonText: '确定',
  418.                     cancelButtonText: '取消',
  419.                 }).then(({value}) => {
  420.                     addHistories({
  421.                         deviceId: this.multipleSelection,
  422.                         message: value
  423.                     }).then(response => {
  424.                         this.$message({
  425.                             type: 'success',
  426.                             message: '添加变更成功 '
  427.                         });
  428.                         this.HistoryVisible = false;
  429.                         this.getList();
  431.                     })
  432.                 }).catch(() => {
  433.                     this.$message({
  434.                         type: 'info',
  435.                         message: '取消添加'
  436.                     });
  437.                 });
  439.             },
  440.             handleSelectionChange(rows) {
  441.                 let data = [];
  442.                 rows.forEach(function (item) {
  443.                     data.push(item.id)
  444.                 })
  445.                 this.multipleSelection = data
  446.             },
  447.             changeCols() {
  448.                 if (this.cols && this.cols.hasOwnProperty('device')) {
  449.                     if (this.cols['device'] === "") {
  450.                         this.colsList = []
  451.                         this.changeVisible = true;
  452.                         return
  453.                     }
  454.                     let str = this.cols['device'];
  455.                     let data = this.utils.str2Arr(str);
  456.                     this.colsList = data;
  457.                 } else {
  458.                     this.colsList = [];
  459.                 }
  460.                 this.changeVisible = true;
  461.             },
  462.             saveCols() {
  463.                 let result = this.utils.arr2Str(this.colsList);
  464.                 let data = {
  465.                     cols: result,
  466.                     type: "device"
  467.                 }
  468.                 saveColsInfo(data).then(res => {
  469.                     this.changeVisible = false;
  470.                     this.$message({
  471.                         type: 'success',
  472.                         message: '变更成功 '
  473.                     });
  474.                     this.$store.dispatch('SetCols', result)
  475.                     location.reload()
  476.                 })
  477.             },
  478.             checkShow(name) {
  479.                 if (this.cols && this.cols !== '' && this.cols.hasOwnProperty('device')) {
  480.                     if (this.cols['device'] === "") {
  481.                         return true;
  482.                     }
  483.                     let checkList = this.utils.str2Arr(this.cols['device'])
  484.                     return checkList.indexOf(name) > -1;
  485.                 }
  486.                 return true;
  487.             },
  488.             getDate(time) {
  489.                 return moment(time).format('YYYY-MM-DD')
  490.             },
  491.             getDateTime(time) {
  492.                 return moment(time).format('YYYY-MM-DD HH:mm:ss')
  493.             },
  494.             addHistory() {
  495.                 this.$prompt('请输入变更记录', '提示', {
  496.                     confirmButtonText: '确定',
  497.                     cancelButtonText: '取消',
  498.                 }).then(({value}) => {
  499.                     addHistory({
  500.                         deviceId: this.history_deviceId,
  501.                         message: value
  502.                     }).then(response => {
  503.                         this.$message({
  504.                             type: 'success',
  505.                             message: '添加变更成功 '
  506.                         });
  507.                         this.HistoryVisible = false;
  508.                         this.getList();
  510.                     })
  511.                 }).catch(() => {
  512.                     this.$message({
  513.                         type: 'info',
  514.                         message: '取消添加'
  515.                     });
  516.                 });
  517.             },
  518.             historyInfo(row) {
  519.                 this.history = row.histories;
  520.                 this.HistoryVisible = true;
  521.                 this.history_deviceId = row.id
  522.             },
  523.             handleFilter() {
  524.                 this.listQuery.page = 1
  525.                 this.getList()
  526.             },
  527.             cpuInfo(row) {
  528.                 this.deviceType = row.deviceType
  529.                 this.CPUVisible = true;
  530.             },
  531.             memoryInfo(row) {
  532.                 this.deviceType = row.deviceType
  533.                 this.MemoryVisible = true;
  534.             },
  535.             nicInfo(row) {
  536.                 this.deviceType = row.deviceType
  537.                 this.NicVisible = true;
  538.             },
  539.             diskInfo(row) {
  540.                 this.deviceType = row.deviceType
  541.                 this.DiskVisible = true;
  542.             },
  543.             saveDevice(formName) {
  544.                 this.$refs[formName].validate((valid) => {
  545.                     if (valid) {
  546.                         if (this.editFlag === 0) {
  547.                             createDevice(
  548.                                 this.temp
  549.                             ).then(response => {
  550.                                 this.$message({
  551.                                     message: '保存成功',
  552.                                     type: 'success'
  553.                                 });
  554.                                 this.getList();
  555.                                 this.resetDeviceForm('ruleForm')
  556.                             })
  557.                         } else {
  558.                             modifyDevice(
  559.                                 this.temp
  560.                             ).then(response => {
  561.                                 this.$message({
  562.                                     message: '保存成功',
  563.                                     type: 'success'
  564.                                 });
  565.                                 this.getList();
  566.                                 this.resetDeviceForm('ruleForm')
  567.                             })
  569.                         }
  572.                     } else {
  573.                         this.$message.error('保存失败,请重试');
  574.                         return false;
  575.                     }
  576.                 });
  577.             },
  578.             handleAvatarSuccess(res, file) {
  579.                 if (res.code != 200) {
  580.                     this.$message({
  581.                         message: res.msg,
  582.                         type: 'error'
  583.                     });
  584.                     return
  585.                 }
  586.                 this.$message({
  587.                     message: '上传成功',
  588.                     type: 'success'
  589.                 });
  590.                 this.getList()
  591.             },
  592.             resetDeviceForm(formName) {
  593.                 this.$refs[formName].resetFields();
  594.                 this.dialogFormVisible = false;
  595.             },
  596.             getList() {
  597.                 this.listLoading = true
  598.                 fetchList(this.listQuery).then(response => {
  599.                     this.list = response.data.content;
  600.                     this.total = response.data.totalElements;
  601.                     this.listLoading = false
  602.                 })
  603.             },
  604.             createDevice() {
  605.                 this.resetTemp()
  606.                 this.dialogFormVisible = true;
  607.                 this.editFlag = 0;
  608.             },
  609.             editDevice(item) {
  610.                 this.resetTemp()
  611.                 this.temp.id = item.id;
  612.                 this.temp.clusterId = item.cluster.id;
  613.                 this.temp.name = item.name;
  614.                 this.temp.use = item.use;
  615.                 this.temp.deliveryDate = item.deliveryDate;
  616.                 this.temp.type = item.type;
  617.                 this.temp.period = item.period;
  618.                 this.temp.manageIp = item.manageIp;
  619.                 this.temp.illoIp = item.illoIp;
  620.                 this.temp.remarks = item.remarks;
  621.                 this.temp.deviceType = item.deviceType;
  622.                 this.temp.sn = item.sn;
  623.                 this.temp.tag = item.tag;
  624.                 this.temp.position = item.position;
  625.                 this.temp.systemVersion = item.systemVersion;
  626.                 this.temp.osVersion = item.osVersion;
  627.                 this.temp.publicIp = item.publicIp;
  628.                 this.temp.outIp = item.outIp;
  629.                 this.temp.cn2Ip = item.cn2Ip;
  630.                 this.temp.computerPosition = item.computerPosition
  631.                 this.dialogFormVisible = true;
  632.                 this.editFlag = 1;
  633.             },
  635.             resetTemp() {
  636.                 this.temp = {
  637.                     id: null,
  638.                     name: null,
  639.                     clusterId: null,
  640.                     use: null,
  641.                     deliveryDate: null,
  642.                     type: null,
  643.                     manageIp: null,
  644.                     illoIp: null,
  645.                     period: null,
  646.                     remarks: null,
  647.                     deviceType: null,
  648.                     sn: null,
  649.                     tag: null,
  650.                     isDel: null,
  651.                     position: null,
  652.                     useUser: null,
  653.                     startDate: null,
  654.                     systemVersion: null,
  655.                     osVersion: null,
  656.                     outIp: null,
  657.                     publicIp: null,
  658.                     cn2Ip: null,
  659.                 }
  660.             },
  661.             deleteDevice(row) {
  662.                 this.$confirm('此操作将删除该资产, 是否继续?', '提示', {
  663.                     confirmButtonText: '确定',
  664.                     cancelButtonText: '取消',
  665.                     type: 'warning'
  666.                 }).then(() => {
  667.                     deleteDevice(row.id).then(response => {
  668.                         this.getList();
  669.                         this.$message({
  670.                             type: 'success',
  671.                             message: '删除成功!'
  672.                         });
  673.                     })
  675.                 }).catch(() => {
  676.                     this.$message({
  677.                         type: 'info',
  678.                         message: '已取消删除'
  679.                     });
  680.                 });
  681.             },
  682.             //列拖拽
  683.             columnDrop() {
  684.                 const wrapperTr = document.querySelector('.el-table__header-wrapper tr')
  685.                 this.sortable = Sortable.create(wrapperTr, {
  686.                     animation: 180,
  687.                     delay: 0,
  688.                     onEnd: evt => {
  689.                         const oldItem = this.dropCol[evt.oldIndex]
  690.                         this.dropCol.splice(evt.oldIndex, 1)
  691.                         this.dropCol.splice(evt.newIndex, 0, oldItem)
  692.                     }
  693.                 })
  694.             }
  697.         }
  698.     }
  699. </script>
  700. <style>
  702.   .el-dropdown-link {
  703.     cursor: pointer;
  704.     color: #409EFF;
  705.   }
  707.   .demo-table-expand {
  708.     font-size: 0;
  709.   }
  711.   .demo-table-expand label {
  712.     width: 90px;
  713.     color: #99a9bf;
  714.   }
  716.   .demo-table-expand .el-form-item {
  717.     margin-right: 0;
  718.     margin-bottom: 0;
  719.     width: 50%;
  720.   }
  722.   .rowClass {
  723.     height: 30px;
  724.     padding: 0 !important;
  726.   }
  728.   .cellClass {
  729.     padding: 2px !important;
  730.   }
  731. </style>

发表评论

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

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

相关阅读

    相关 表格列可拖拽宽度

    问题 普通表格的列是不能够通过用户操作改变宽度， 即动态改变列的宽度。 有时候， 有的列内容是多的，不够显示， 有的列内容是少的，不用太多宽度显示， 但是内容是动态的，

    Dear 丶Dear 丶/ 0 赞/ 192 阅读