BTDK-DMS/src/pages/ota/firmware/index.vue

<template>
  <div class="firmware-management-wrap">
    <EdfsWrap class="firmware-table" title="固件列表">
      <template #title-right>
        <div class="firmware-table-title">
          <EdfsButton
            type="success"
            inner-text="新增固件"
            :icon="createIcon"
            @click="addFirmware"
          />
        </div>
      </template>
      <edfs-table
        :data="dataList"
        :highlight-current-row="true"
        ref="tableRef"
        row-class-name="row"
        :page-size="pageSize"
        :page-total="pageTotal"
        class="table"
        :current-page="pageIndex"
        @pageCurrentChange="handleJump"
      >
        <template v-for="(col, idx) in tableColumns" :key="idx">
          <!-- <el-table-column
            v-if="col.prop == 'status'"
            :label="col.label"
            :prop="col.prop"
            :min-width="col.minWidth"
          >
            <template #default="scope">
              <div style="display: flex; align-items: center; column-gap: 4px">
                <img
                  :src="deviceStatusImgMap[scope.row.status]"
                  alt=""
                  width="16"
                  height="16"
                />
                {{ getDictObj('device_entity_status', scope.row.status)?.label }}
              </div>
            </template>
          </el-table-column> -->

          <el-table-column
            v-if="col.prop == 'createTime'"
            :label="col.label"
            :prop="col.prop"
            :min-width="col.width"
          >
            <template #default="scope">
              {{ dayjs(scope.row.createTime).format('YYYY-MM-DD HH:mm:ss') }}
            </template>
          </el-table-column>
          <el-table-column
            v-else
            :label="col.label"
            :prop="col.prop"
            :min-width="col.width"
          />
        </template>

        <el-table-column label="操作" min-width="14%">
          <template #default="scope">
            <!-- <EdfsButton
              type="success"
              link
              inner-text="下载固件"
              @click="onDownload(scope.row)"
            /> -->
            <EdfsButton
              type="danger"
              link
              inner-text="删除"
              @click="onDelete(scope.row.id)"
            />
          </template>
        </el-table-column>
      </edfs-table>
    </EdfsWrap>
    <createFirmwareDlg :is-show="isShowDlg" @on-close="onClose" @on-save="onSave" />
  </div>
</template>

<script setup lang="ts">
import { tableColumns } from './utils'
import EdfsButton from '@/components/dashboard/Edfs-button/index.vue'
import EdfsTable from '@/components/dashboard/Edfs-table/index.vue'
import EdfsWrap from '@/components/dashboard/Edfs-wrap.vue'
import { useIcon } from '@/utils/useIcon'
import createFirmwareDlg from './components/create-firmware-dlg.vue'
import { deleteFirmware, getFirmwareList } from '@/api/module/eam/device/firmware'
import { isResError, useMessage } from '@/hooks/useMessage.js'
import dayjs from 'dayjs'
import download from '@/utils/download'

const message = useMessage()

const createIcon = useIcon({ icon: 'gravity-ui:plus' })
const tableRef = ref<any>(null)
const dataList = ref([])
const pageIndex = ref(1)
const pageSize = ref()
const pageTotal = ref(0)
const pageJump = ref(1)

async function loadData() {
  if (!pageSize.value) {
    pageSize.value = tableRef.value.getSize()
  }
  const res = await getFirmwareList({
    pageNo: pageIndex.value,
    pageSize: pageSize.value,
  })
  if (isResError(res)) return
  const { list, total } = res.data
  dataList.value = list
  pageTotal.value = total
}
watch(pageIndex, () => {
  pageJump.value = pageIndex.value
  loadData()
})

function handleJump(page: number) {
  pageIndex.value = page
}

async function onDelete(id: string) {
  try {
    await message.delConfirm()
    const res = await deleteFirmware(id)
    if (isResError(res)) return
    message.success('删除成功')
    loadData()
  } catch (error) {}
}

function onDownload(row: any) {
  // download.word(row.downloadPath, row.name)
  // const downA = document.createElement('a')
  // downA.href = row.downloadPath
  // downA.download = row.name
  // downA.click()
  // downA.remove()
}

const isShowDlg = ref(false)
function addFirmware() {
  isShowDlg.value = true
}

function onClose() {
  isShowDlg.value = false
}

function onSave() {
  isShowDlg.value = false
  loadData()
}

onMounted(() => {
  loadData()
})
</script>

<style scoped lang="scss">
.firmware-management-wrap {
  width: 100%;
  height: 100%;
  .firmware-table {
    height: 100%;
    box-sizing: border-box;

    background: #fff;
    padding-bottom: 0;
    .table {
      height: 100%;
      width: 100%;
    }
  }
}
</style>