mes-vue/src/views/biz/device/DeviceDispatchLog.vue

<script setup lang="ts">

import {ArrowDown, ArrowUp, RefreshOutline, SearchOutline} from "@vicons/ionicons5";
import {NButton, NIcon, NSpace} from "naive-ui";
import {onMounted, reactive, ref} from "vue";
import { issueRecordApi,IssueRecord } from '@/api/issuerecord.ts'

const props =  defineProps({
  deviceId:Number
})

const showSearchInput = ref<Boolean>(false)

const searchForm = ref({
  issueCode: undefined,
  status: undefined,
})


const pagination = reactive({
  page: 1,
  pageSize: 10,
  itemCount: 0,
  showSizePicker: true,
  pageSizes: [10, 20, 50]
})

const doShowInner = () => {
  if (showSearchInput.value) {
    showSearchInput.value = false
  }else {
    showSearchInput.value = true
  }
}

//状态
const statusList = [
    {
      label: '下发失败',
      value: 0
    },
    {
      label: '下发成功',
      value: 1
    }
]

//查询下发日志
const data = ref([])
const load = async()=>{
  const res =  await issueRecordApi.page({
    pageSize: pagination.pageSize,
    page: pagination.page,
    deviceId: props.deviceId,
    issueCode: searchForm.value.issueCode,
    status: searchForm.value.status
  });
  data.value = res.list
  pagination.itemCount = res.total
}


const columns = [
  {
    title: '工序名称',
    key: 'processName'
  },
  {
    title: '工序名称',
    key: 'assingCode'
  },
  {
    title: '下发类型',
    key: 'issueType',
    render(row) {
      var opt = row.issueType
      if(opt == 0) return '图纸'
      if(opt == 1) return '文件'
      if(opt == 2) return '代码'
      return '-'
    }
  },
  {
    title: '下发状态',
    key: 'status',
    render(row) {
      var opt = row.status
      if(opt == 0) return '下发失败'
      if(opt == 1) return '下发成功'
    }
  },
  {
    title: '下发时间',
    key: 'issueTime'
  },
  // {
  //   title: '下发文件',
  //   render(row) {
  //     return row.
  //   }
  // },
  {
    title: '备注',
    key: 'remark'
  }
]

const handleSearch =  () => {
  load()
}

const handleReset = () => {
  searchForm.value.issueCode = null
  searchForm.value.status = null
  pagination.page = 1
  pagination.pageSize = 10
  handleSearch()
}

// 分页
function handlePageChange(page: number) {
  pagination.page = page
  load()
}

function handlePageSizeChange(pageSize: number) {
  pagination.pageSize = pageSize
  pagination.page = 1
  load()
}


onMounted(()=>{
  load()
})


</script>

<template>
  <div>
    <n-button @click="doShowInner" v-if="showSearchInput">
      <n-icon size="20" :depth="3">
        <ArrowDown/>
      </n-icon>
      展开
    </n-button>
    <n-card v-if="!showSearchInput">
      <n-form inline :model="searchForm" label-placement="left">
        <n-grid :x-gap="8" :cols="4">
          <n-gi>
            <n-form-item label="下发状态">
              <n-select
                  v-model:value="searchForm.status"
                  :options="statusList"
                  placeholder="请选择设备类型"
                  clearable
                  style="width: 200px"
              />
            </n-form-item>
          </n-gi>
          <n-gi>
            <n-form-item>
              <n-space>
                <n-button type="primary" @click="handleSearch">
                  <template #icon>
                    <n-icon>
                      <SearchOutline/>
                    </n-icon>
                  </template>
                  搜索
                </n-button>
                <n-button @click="handleReset">
                  <template #icon>
                    <n-icon>
                      <RefreshOutline/>
                    </n-icon>
                  </template>
                  重置
                </n-button>
              </n-space>
            </n-form-item>
          </n-gi>
        </n-grid>


      </n-form>
      <n-button @click="doShowInner" v-if="!showSearchInput" style="float: right;margin: 10px">
        <n-icon size="20" :depth="3">
          <ArrowUp/>
        </n-icon>
        闭合
      </n-button>
    </n-card>
    <n-card style="margin: 20px 0">
      <n-data-table
          :columns="columns"
          :data="data"
          :bordered="false"
      />

      <div class="pagination-container" style="display: flex; justify-content: flex-end; margin-top: 12px">
        <n-pagination
            v-model:page="pagination.page"
            v-model:page-size="pagination.pageSize"
            :item-count="pagination.itemCount"
            :page-sizes="[10, 20, 50, 100]"
            show-size-picker
            show-quick-jumper
            @update:page="handlePageChange"
            @update:page-size="handlePageSizeChange"
        >
          <template #prefix>
            共 {{ pagination.itemCount }} 条
          </template>
        </n-pagination>
      </div>
    </n-card>
  </div>
</template>

<style scoped>

</style>