Web/admin.ui.plus-master/src/views/admin/authorize/softwarePackageManagement/components/table-download.vue

<template>
    <div class="admin-authorize-editInfo">
      <el-dialog :title="titleText" v-model="isShowDialog" draggable width="769px">
          <el-table stripe :data="softwareDownloadData.tableModel"
               v-loading="softwareDownloadData.loading"
               size="default"
               class="my-fill mt8" shadow="hover">
          <el-table-column v-for="column in softwareDownloadData.dynamicColumns" :key="column.prop" :prop="column.prop" :label="column.label" align="center" >
          </el-table-column>
        </el-table>
        <div class="my-flex my-flex-end" style="margin-top: 20px">
            <el-pagination
              v-model:currentPage="softwareDownloadData.pageInput.CurrentPage"
              v-model:page-size="softwareDownloadData.pageInput.PageSize"
              :total="softwareDownloadData.total"
              :page-sizes="[10, 15, 20, 50, 100]"
              small
              background
              @size-change="onSizeChange"
              @current-change="onCurrentChange"
              layout="total, sizes, prev, pager, next, jumper"
            />
          </div>
        <template #footer>
          <span class="dialog-footer">
            <el-button type="primary" icon="ele-CircleClose" @click="onClose" size="default">关闭</el-button>
          </span>
        </template>
      </el-dialog>
    </div>
  </template>

  <script setup lang="ts">
  import { reactive, ref, watch} from "vue";
  import {DownloadRecordDto,pageInputDownloadRecordDto} from "/@/api/admin/deviceAuthorization/softwarePackageManagementDto";
  import {SoftwarePackageManagementApi} from "/@/api/admin/deviceAuthorization/softwarePackageManagementApi";


  /**软件包下载记录管理对象*/
const softwareDownloadData = reactive({
  loading: false,
  filterModel: {
    fileId:0,
    /**文件名称 */
    fileName: "",
    /**下载时间 */
    downloadTime: "2020-11-22",
    /**下载人员 */
    downloadedBy: "",
  },
  total: 0,
  pageInput: {
    currentPage: 1,
    pageSize: 10,
  } as pageInputDownloadRecordDto,
  tableModel: [] as Array<DownloadRecordDto>,
  /**动态表头 */
  dynamicColumns: [
    { prop: 'fileName', label: '文件名称' },
    { prop: 'downloadTime', label: '下载时间' },
    { prop: 'downloadedBy', label: '下载人员' },
  ]
})

  const isShowDialog=ref(false)
  const titleText=ref('下载记录')
  const formRef = ref()

  const openDialog = async (id) => {
    softwareDownloadData.filterModel.fileId=id
    softwareDownloadData.loading = true
    const res:any = await new SoftwarePackageManagementApi().getDownloadData({...softwareDownloadData.pageInput,filter:softwareDownloadData.filterModel})
    softwareDownloadData.tableModel = res?.data?.list ?? []
    softwareDownloadData.total = res?.data?.total ?? 0
    softwareDownloadData.loading = false
    isShowDialog.value = true
  }
  /**页条数变化*/
const onSizeChange = () => {
  openDialog(softwareDownloadData.filterModel.fileId)
}

/**页数变化*/
const onCurrentChange = () =>{
  openDialog(softwareDownloadData.filterModel.fileId)
}
  //关闭弹窗
  const onClose = () => {
    isShowDialog.value = false
  }

  /***监听弹窗关   闭表单验证*/
  watch(() => isShowDialog.value,(newVal) => {
    if(newVal) formRef.value?.resetFields()
  })

  defineExpose({
    openDialog,
  })
  </script>
  <style scoped lang="scss">

  </style>