ohplay_business/src/views/device/control/devices.vue

<template>
  <div class="tab">
    <!-- 分类筛选 -->
    <el-tabs v-model="activeName" style="width: 100%;">
      <el-tab-pane v-for="item in data.tabOptions" :key="item.value" :label="item.label" :name="item.value"
        v-loading="loading">
        <!-- 列表 -->
        <div class="card" v-for="item in data.tableData" :key="item">
          <div class="card-header">
            <i class="state" />
            <el-dropdown>
              <el-icon>
                <MoreFilled />
              </el-icon>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item>查看</el-dropdown-item>
                  <el-dropdown-item>编辑</el-dropdown-item>
                  <el-dropdown-item>删除</el-dropdown-item>
                  <el-dropdown-item>上架</el-dropdown-item>
                  <el-dropdown-item>下架</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
          <el-image class="icon" src="" />
          <span class="name">猫王音响·Mate X1</span>
        </div>
      </el-tab-pane>
      <pagination v-show="total > 0" :total="total" v-model:page="data.form.pageNum" v-model:limit="data.form.pageSize"
        @pagination="getList" />
    </el-tabs>

    <!-- 下拉筛选 -->
    <div class="dropdown">
      <el-dropdown v-for="item in data.selectOptions" :key="item.value">
        <span>{{ item.label }}<el-icon><arrow-down /></el-icon></span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item v-for="item in 4" :key="item">{{ item }}</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>

    <!-- 搜索框 + 新增按钮 -->
    <div class="flex-right">
      <el-input placeholder="搜索设备名称" suffix-icon="Search" />
      <el-button type="primary" icon="Plus" plain @click="getDialog">新增设备</el-button>
    </div>

    <!-- 新增弹窗 -->
    <el-dialog v-model="dialogVisible" :title="title" width="500" :before-close="close">
      <el-form label-width="100px">
        <el-form-item label="设备型号：">
          <el-input placeholder="请输入设备型号" />
        </el-form-item>
        <el-form-item label="设备序列号：">
          <el-input placeholder="请输入设备序列号" />
        </el-form-item>
        <el-form-item label="设备名称：">
          <el-input placeholder="请输入设备名称" />
        </el-form-item>
        <el-form-item label="设备分类：">
          <el-select placeholder="请选择设备分类">
            <!-- <el-option /> -->
          </el-select>
        </el-form-item>
        <el-form-item label="所属门店：">
          <el-select placeholder="请选择所属门店">
            <!-- <el-option /> -->
          </el-select>
        </el-form-item>
        <el-form-item label="所在城市：">
          <el-select placeholder="请选择所在城市">
            <!-- <el-option /> -->
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="close">取消</el-button>
        <el-button type="primary">确定</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
// 遮罩层
const loading = ref(false)

const data = reactive({
  tabOptions: [
    { value: '1', label: '全部' },
    { value: '2', label: '在线' },
    { value: '3', label: '离线' }
  ],
  selectOptions: [
    { value: '4', label: '门店' },
    { value: '5', label: '设备类型' },
    { value: '6', label: '所属地区' }
  ],
  // 数据表单
  form: {
    pageNum: 1,
    pageSize: 10
  },
  // 数据列表
  tableData: []
})

// 焦点tab
const activeName = ref('1')

// 总数据
const total = ref(0)

// 列表
function getList() {

}
getList()

// 弹窗
const dialogVisible = ref(false)
const title = ref('新增')

// 打开弹窗
function getDialog() {
  dialogVisible.value = true
}

// 关闭弹窗
function close() {
  dialogVisible.value = false
}

</script>

<style lang="scss" scoped>
.tab {
  display: flex;

  .el-tab-pane {
    display: flex;
    flex-wrap: wrap;
    padding: 10px;
    min-height: 200px;

    .card {
      display: flex;
      flex-direction: column;
      padding: 10px 10px 20px;
      width: 185px;
      border-radius: 10px;
      box-shadow: 0px 0px 12px rgba(0, 0, 0, .12);
      margin-right: 40px;
      margin-bottom: 30px;

      .card-header {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .state {
          width: 10px;
          height: 10px;
          background-color: #8aff5b;
          border-radius: 50%;
          display: inline-block;
        }
      }

      .icon {
        padding: 0 20px;
        height: 110px;
        margin: 15px 0;
      }

      .name {
        font-size: 14px;
        text-align: center;
      }
    }
  }

  .dropdown {
    position: absolute;
    left: 164px;

    .el-dropdown {
      margin-left: 40px;
      height: 42px;
      line-height: 42px;
    }
  }
}

.flex-right {
  position: absolute;
  right: 20px;
  top: 20px;
  transform: translate(0, -50%);
  display: flex;

  .el-input {
    margin-right: 20px;
  }
}
</style>