lift-drawing-pc/src/views/GenerateRecord/index.vue

<template>
  <div>
    <div class="title">生成记录</div>
    <el-form
      ref="searchFormRef"
      class="form"
      :inline="true"
      label-width="98px"
      :model="queryParams"
    >
      <el-form-item label="文件名" prop="file_name">
        <el-input
          clearable
          placeholder="请输入"
          style="width: 220px"
          v-model="queryParams.file_name"
          @keyup.enter="handleQuery"
        />
      </el-form-item>

      <el-form-item label-width="100px">
        <el-button icon="Search" type="primary" @click="handleQuery"> 搜索 </el-button>
        <el-button icon="RefreshRight" @click="resetQuery"> 重置 </el-button>
      </el-form-item>
    </el-form>

    <!-- <div style="margin-bottom: 20px">
      <el-button icon="Plus" type="primary" @click="add"> 新建 </el-button>
    </div> -->
    <div ref="tableContainerEl" class="table_border table">
      <el-table
        ref="tableRef"
        :data="tableData"
        v-loading="loading"
        header-row-class-name="table-header"
      >
        <el-table-column
          align="center"
          label="订单号"
          prop="order_no"
          width="200"
          show-overflow-tooltip
        />
        <el-table-column align="center" label="文件名" prop="file_name" show-overflow-tooltip />
        <el-table-column
          align="center"
          label="用户名"
          prop="username"
          width="100"
          show-overflow-tooltip
        />
        <el-table-column align="center" label="用户ID" prop="user_id" width="100" />
        <el-table-column align="center" label="状态" prop="status" width="100">
          <template #default="{ row }">
            <span v-if="row.status == 0">待执行</span>
            <span v-if="row.status == 1">已分发</span>
            <span v-if="row.status == 2">执行中</span>
            <span v-if="row.status == 3">执行完成(未收集结果)</span>
            <span v-if="row.status == 4">结果已收集</span>
            <span v-if="row.status == 5">执行异常</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="创建时间" prop="CreatedAt" width="220">
          <template #default="{ row }">
            {{ row.CreatedAt ? dayjs(row.CreatedAt).format('YYYY-MM-DD HH:mm:ss') : '' }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作" width="120">
          <template #default="{ row }">
            <el-button link type="primary" @click="downloadRecord(row)" v-if="row.result_url">
              下载
            </el-button>
            <el-button link type="primary" @click="openDialog(row)"> 日志 </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <pagination
      v-show="total > 0"
      :total="total"
      v-model:limit="queryParams.page_size"
      v-model:page="queryParams.page"
      @pagination="getList"
    />

    <HandleDialog v-if="isShowDialog" :row="currentRow" @closed="isShowDialog = false" />
  </div>
</template>

<script setup>
import HandleDialog from './HandleDialog.vue'
import RPC from '@/utils/rpc'
import dayjs from 'dayjs'

const isShowDialog = ref(false)
const loading = ref(false)

const currentRow = ref({})
const openDialog = (row) => {
  currentRow.value = row
  isShowDialog.value = true
}
const queryParams = ref({
  page: 1,
  page_size: 10,
})
const total = ref(0)
const tableData = ref([])
const getList = () => {
  loading.value = true
  RPC.post('/planned_list', queryParams.value)
    .then((res) => {
      tableData.value = res.list
      total.value = res.total
    })
    .finally(() => {
      loading.value = false
    })
}

const handleQuery = () => {
  queryParams.value.page = 1
  getList()
}

const resetQuery = () => {
  queryParams.value = {
    page: 1,
    page_size: 10,
  }
  getList()
}

getList()

const downloadRecord = (record) => {
  const link = document.createElement('a')
  link.href = record.result_url
  link.download = record.file_name || 'download'
  // link.target = "_blank";
  document.body.appendChild(link)
  link.click()
  document.body.removeChild(link)
}
</script>

<style lang="scss" scoped>
.title {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 20px;
}
</style>