ohplay_business/src/views/device/list/index.vue

<template>
  <div class="app-container">
    <!-- 搜索表单 -->
    <el-form inline>
      <el-form-item label="设备名称：">
        <el-input v-model="data.form.name" placeholder="请输入设备名称" clearable />
      </el-form-item>
      <el-form-item label="设备型号：">
        <el-select v-model="data.form.clientTypeId" placeholder="请选择设备型号" filterable clearable>
          <el-option v-for="item in deviceOptions" :key="item.clientTypeId" :label="item.name"
            :value="item.clientTypeId" />
        </el-select>
      </el-form-item>
      <el-form-item label="设备分类：">
        <el-select v-model="data.form.categoryId" placeholder="请选择设备分类" clearable>
          <el-option v-for="item in deviceClassOptions" :key="item.id" :value="item.id" :label="item.name" />
        </el-select>
      </el-form-item>
      <el-form-item label="当前状态：">
        <el-select v-model="data.form.status" placeholder="请选择当前状态" clearable>
          <el-option v-for="item in device_change_status" :key="item.value" :value="item.value" :label="item.label" />
        </el-select>
      </el-form-item>
      <el-form-item label="是否热门：">
        <el-select v-model="data.form.isHot" placeholder="请选择是否热门" clearable>
          <el-option v-for="item in hotOptions" :key="item.value" :value="item.value" :label="item.label" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="Search" @click="getSearch">搜索</el-button>
        <el-button icon="Refresh" @click="getRefresh">重置</el-button>
        <el-button type="primary" icon="Plus" plain @click="getRouter()" v-hasPermi="['device:list:add']">
          新增
        </el-button>
      </el-form-item>
    </el-form>
    <!-- 表格 -->
    <el-table :data="data.tableData" v-loading="loading">
      <el-table-column label="设备ID" prop="id" align="center" />
      <el-table-column label="设备型号" prop="clientType" align="center" />
      <el-table-column label="设备名称" prop="name" align="center" />
      <el-table-column label="蓝牙名称" prop="bluetoothName" align="center" />
      <el-table-column label="设备图片" prop="img" align="center" width="100">
        <template #default="scope">
          <el-image :src="scope.row.img" />
        </template>
      </el-table-column>
      <el-table-column label="设备分类" prop="categoryName" align="center" />
      <el-table-column label="设备类型" prop="deviceType" align="center">
        <template #default="scope">
          {{ deviceTypeOptions.find(i => i.value === scope.row.deviceType).label }}
        </template>
      </el-table-column>
      <el-table-column label="是否热门" prop="isHot" align="center">
        <template #default="scope">
          {{ hotOptions.find(i => i.value === scope.row.isHot).label }}
        </template>
      </el-table-column>
      <el-table-column label="创建时间" align="center">
        <template #default="scope">
          {{ parseTime(scope.row.createTime, '{y}-{m}-{d} {h}:{i}:{s}') }}
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template #default="scope">
          <el-button type="primary" link @click="getRouter(scope.row.id, true)">查看</el-button>
          <span v-if="scope.row.status === 2" style="margin-left: 10px;">
            <el-button type="primary" link @click="getRouter(scope.row.id)" v-hasPermi="['device:list:edit']">
              编辑
            </el-button>
            <el-button type="primary" link @click="getChange(scope.row.id, 1, '上架')" v-hasPermi="['device:list:on']">
              上架
            </el-button>
            <el-button type="danger" link @click="getDelete(scope.row.id)" v-hasPermi="['device:list:delete']">
              删除
            </el-button>
          </span>
          <el-button v-else type="primary" link @click="getChange(scope.row.id, 2, '下架')"
            v-hasPermi="['device:list:off']">
            下架
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="total > 0" :total="total" v-model:page="data.form.pageNum" v-model:limit="data.form.pageSize"
      @pagination="getList" />
  </div>
</template>

<script setup>
import { list, remove, change } from '@/api/device/list'
import { useDeviceList } from '@/hooks/index'
import { useDeviceClass, useDeviceType, useHot } from '../hooks/index'
const { deviceOptions } = useDeviceList()
const { deviceClassOptions } = useDeviceClass()
const { deviceTypeOptions } = useDeviceType()
const { hotOptions } = useHot()

const { proxy } = getCurrentInstance()
const { device_change_status } = proxy.useDict("device_change_status")

// 遮罩层
const loading = ref(false)

const data = reactive({
  // 搜索表单
  form: {
    pageNum: 1,
    pageSize: 10
  },
  // 表格
  tableData: []
})

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

// 列表
const getList = () => {
  loading.value = true
  list(data.form).then(res => {
    if (res.code === 0) {
      data.tableData = res.data.records
      total.value = res.data.total
      loading.value = false
    }
  })
}
getList()

// 搜索
const getSearch = () => {
  data.form.pageNum = 1
  getList()
}

// 重置
const getRefresh = () => {
  data.form = {
    name: '',
    pageNum: 1,
    pageSize: 10
  }
  getList()
}

// 上下架
const getChange = (id, status, title) => {
  change({ ids: id, type: status }).then(res => {
    if (res.code === 0) {
      proxy.$modal.msgSuccess(`${title}成功！`)
      getList()
    }
  })
}

// 新增 / 编辑 / 查看
const getRouter = (id, boolean) => {
  proxy.$router.push({
    path: `/device/deviceList/detail`,
    query: {
      id: id,
      boolean: boolean
    }
  })
}

// 多选
const handleSelectionChange = (e) => {
  if (e.length > 0) {
    let arr = []
    e.filter(i => {
      arr.push(i.id)
      data.changeForm.ids = arr.join(',')
    })
  } else {
    data.changeForm.ids = ''
  }
}

// 删除
const getDelete = (id) => {
  proxy.$modal.confirm('确定要删除?').then(() => {
    remove(id).then(res => {
      if (res.code === 0) {
        proxy.$modal.msgSuccess('删除成功！')
        getList()
      }
    })
  }).catch(() => { })
}
</script>