food/src/views/layout/components/main/register/index.vue

<template>
  <div class="app-container">
    <!-- 组合按钮 -->
    <el-button-group class="m-r-20 m-b-20">
      <el-button type="primary" icon="el-icon-plus" @click="$router.replace('/register/add')">添加</el-button>
      <el-button type="danger" icon="el-icon-delete" @click="deleteAir(countSelIdArr($refs.myTable.selection))">删除
      </el-button>
      <el-button type="warning" icon="el-icon-edit" @click="toEditPage()">编辑</el-button>
      <el-button type="warning" class="swarmButton" icon="iconfont icon-a-jiqunkongzhianniu_huaban1" @click="toSwarmPage()">集群控制</el-button>
      <el-button type="success" icon="el-icon-data-line"
        @click="toFlyDataPage(countSelIdArr($refs.myTable.selection))">飞行数据</el-button>
    </el-button-group>
    <!-- 用户select选项 -->
    <el-button-group class="m-b-20">
      <SelectionShopId v-model="form.shop_id" :allSel="true" />
    </el-button-group>
    <!-- 飞机表格 -->
    <el-table class="w-100" ref="myTable" :data="airListArr.slice((currentPage - 1) * pageSize, currentPage * pageSize)"
      border tooltip-effect="dark">
      <el-table-column align="center" type="selection" width="40">
      </el-table-column>
      <el-table-column align="center" prop="id" label="id" width="50">
      </el-table-column>
      <el-table-column prop="name" label="名称" width="150" min-width="150">
      </el-table-column>
      <el-table-column label="macID" width="175" min-width="175">
        <template slot-scope="scope">
          <el-tag :type="scope.row.macadd !== '' ? 'success' : 'danger'">
            <i style="" class="iconfont m-r-5 f-s-16 l-h-32"
              :class="scope.row.macadd !== '' ? 'icon-jiekou' : 'icon-cuowu'"></i>
            <font>{{ scope.row.macadd !== '' ? scope.row.macadd : '未对频' }}</font>
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="状态" min-width="150" show-overflow-tooltip>
        <template slot-scope="scope">
          <el-tag :type="scope.row.onoff === '1' ? 'success' : 'danger'">
            <i style="" class="iconfont m-r-5 f-s-16 l-h-32"
              :class="scope.row.onoff === '1' ? 'icon-qiyong' : 'icon-ic_tingyong'"></i>
            <font>{{ scope.row.onoff === '1' ? '启用' : '停用' }}</font>
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="注册时间" width="100" min-width="80">
        <template slot-scope="scope">
          {{ scope.row.apply_time | parseTime('{y}-{m}-{d}') }}
        </template>
      </el-table-column>
      <el-table-column prop="controler" label="操作" width="460" min-width="460">
        <template slot-scope="scope">
          <el-button-group>
            <el-button type="primary" class="iconfont icon-youxishoubing"
              @click="$router.replace(`/planes/index/${scope.row.id}/${scope.row.name}`)"><span
                class="m-l-5">控制</span></el-button>
            <el-button type="warning" icon="el-icon-edit"
              @click="$router.replace(`/register/edit/${scope.row.id}`)">编辑</el-button>
            <el-button type="danger" icon="el-icon-delete" @click="deleteAir([scope.row.id])">删除</el-button>
            <el-button type="success" icon="el-icon-link" @click="crosFrequencyToPage(form.shop_id,scope.row.id)">对频</el-button>
          </el-button-group>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination class="m-t-20" layout="prev, pager, next" :current-page.sync="currentPage" :page-size="pageSize"
      :total="airListArr.length">
    </el-pagination>
  </div>
</template>

<script>
import { parseTime, countSelIdArr } from '@/utils'
import SelectionShopId from '@/components/SelectionShopId'

export default {
  name: 'Register',
  data () {
    return {
      pageSize: 8, // 每页显示记录条数
      currentPage: 1, // 当前页
      form: {
        shop_id: ''
      }
    }
  },
  components: {
    SelectionShopId
  },
  computed: {
    // 获取飞机列表
    airList () {
      return this.$store.state.airList
    },
    /**
     * @description: 过滤掉 不对应客户的 飞机列表
     * @return: 飞机列表
     */
    airListArr () {
      if (this.form.shop_id !== '') {
        return this.airList.filter((item) => item.shop_id === this.form.shop_id)
      } else {
        return this.airList
      }
    }
  },
  methods: {
    countSelIdArr,
    /**
     * @description: 跳转到编辑页面
     */
    toEditPage () {
      const selId = this.countSelIdArr(this.$refs.myTable.selection)
      switch (selId.length) {
        case 0:
          this.$message.error('请选择一条需要编辑的记录')
          break
        case 1:
          this.$router.push('/register/edit/' + selId['0'])
          break
        default:
          this.$message.error('只能选择一条记录')
      }
    },
    /**
     * @description: 跳转到编辑页面
     */
    toSwarmPage () {
      const selId = this.countSelIdArr(this.$refs.myTable.selection)
      if (selId.length < 2) {
        this.$message.error('请选择至少两架飞机')
        return
      }
      // 用缓存传参 swarmIdArr
      this.$store.commit('app/setSwarmIdArr', selId)
      // 跳转到集群控制页面
      this.$router.push('/planes/swarm')
    },
    /**
     * @description: 跳转到飞机数据统计页面
     */
    toFlyDataPage (selIdArr) {
      if (selIdArr.length === 0) {
        this.$message.error('请选择至少一架飞机')
      } else {
        this.$store.commit('app/setToFlyDataIdArr', selIdArr)// 传参
        this.$router.push('/register/flyData/')
      }
    },
    /**
     * @description: 删除飞机
     */
    deleteAir (idArr) {
      this.$store.dispatch('fetchDelAir', idArr)
    },
    /**
     * @description: 跳转到对频页面
     */
    crosFrequencyToPage (shopId, planeId) {
      this.$router.push(`/register/crosFrequency/${shopId}/${planeId}`)
    }
  },
  watch: {
  },
  created () {
  },
  filters: {
    parseTime,
    countSelIdArr
  }
}
</script>

<style lang="scss" scoped>
@import "@/styles/theme.scss";

.el-tag {
  i {
    vertical-align: middle
  }
}

.swarmButton {
  background-color: #7C4DFF;
  border-color: #7C4DFF
}

.no-wrap-btn-group {
  white-space: nowrap;
  /* 禁止换行 */
  overflow-x: auto;
  /* 超出时可横向滚动 */
  display: inline-block;
  /* 或者用 flex 布局 */
}
</style>