mes-ui-d2/src/views/equipment-management/inspection-management/inspection-logs/index.vue

<template>
  <d2-container>
    <template #header>
      <div class="search-bar">
        <el-form :inline="true" size="mini">
          <el-form-item :label="$t(key('keyword'))">
            <el-input
              v-model="search.keyword"
              :placeholder="$t(key('enter_keyword'))"
              clearable
              style="width:200px"
              @keyup.enter.native="onSearch"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="onSearch">{{ $t(key('search')) }}</el-button>
            <el-button icon="el-icon-refresh" @click="onReset">{{ $t(key('reset')) }}</el-button>
          </el-form-item>
        </el-form>
      </div>
    </template>

    <page-table
      ref="pageTable"
      :columns="columns"
      :data="tableData"
      :loading="loading"
      :toolbar-buttons="toolbarButtons"
      :row-buttons="rowButtons"
      :pagination="pagination"
      auto-height
      @page-change="onPageChange"
      @selection-change="onSelect"
    />
  </d2-container>
</template>

<script>
import { useTableColumns } from '@/composables/useTableColumns'
import { useTableButtons } from '@/composables/useTableButtons'
import { i18nMixin } from '@/composables/useI18n'
import { confirmMixin } from '@/composables/useConfirmHandle'
import PageTable from '@/components/page-table'
import { getList, createExportTask } from '@/api/equipment-management/inspection-logs'

export default {
  name: 'equipment-management-inspection-logs',
  components: { PageTable },
  mixins: [i18nMixin('page.equipment_management.inspection_management.inspection_logs'), confirmMixin],
  data () {
    return {
      loading: false,
      submitting: false,
      tableData: [],
      selectedRows: [],
      dialogVisible: false,
      dialogTitle: '',
      editId: '',
      handleType: 'create',
      search: {
        keyword: ''
      },
      pagination: { current: 1, size: 10, total: 0 },
      formData: {

      },
      rules: {},
      columns: [],
      toolbarButtons: [],
      rowButtons: [],
      formCols: []
    }
  },
  created () {
    this.columns = useTableColumns([
      { prop: 'device_code', label: this.key('device_code'), minWidth: 140 },
      { prop: 'device_name', label: this.key('device_name'), minWidth: 140 },
      { prop: 'check_item_name', label: this.key('inspection_item'), minWidth: 140 },
      { prop: 'check_result', label: this.key('inspection_result'), minWidth: 140 },
      { prop: 'check_user', label: this.key('inspection_user'), minWidth: 140 },
      { prop: 'check_time', label: this.key('inspection_time'), minWidth: 140 }
    ])
    const btns = useTableButtons({
      toolbar: [
        { key: 'export', label: this.key('export'), icon: 'el-icon-download', auth: '/device_management/device_check/device_check_items_log/export', onClick: this.handleExport }
      ],
      row: [

      ]
    }, this.$permission)
    this.toolbarButtons = btns.toolbarButtons
    this.rowButtons = btns.rowButtons
    this.fetchData()
  },
  methods: {
    normalizeResponse (res) {
      const data = res && res.data !== undefined ? res.data : res
      if (Array.isArray(data)) return { list: data, total: data.length }
      if (data && Array.isArray(data.data)) return { list: data.data, total: Number(data.count || data.total || data.data.length) }
      if (data && data.data && Array.isArray(data.data.data)) return { list: data.data.data, total: Number(data.data.count || data.data.total || data.data.data.length) }
      return { list: [], total: 0 }
    },
    async fetchData () {
      this.loading = true
      try {
        const res = await getList({ ...this.search, page_no: this.pagination.current, page_size: this.pagination.size })
        const data = this.normalizeResponse(res)
        this.tableData = data.list
        this.pagination.total = data.total
      } finally {
        this.loading = false
      }
    },
    onSearch () {
      this.pagination.current = 1
      this.fetchData()
    },
    onReset () {
      this.search = {
        keyword: ''
      }
      this.pagination.current = 1
      this.fetchData()
    },
    onPageChange (page) {
      this.pagination.current = page.current
      this.pagination.size = page.size
      this.fetchData()
    },
    onSelect (rows) {
      this.selectedRows = rows
    },
    resetForm () {
      this.formData = {

      }
      this.editId = ''
    },
    async handleExport () {
      const cancelled = await this.$confirmAction(
        { message: this.key('confirm_export'), title: this.key('tip') },
        () => createExportTask({ ...this.search })
      )
      if (cancelled) return
      this.$message.success(this.$t(this.key('operation_success')))
    }
  }
}
</script>

<style scoped>
.search-bar { padding: 10px 0; }
/deep/ .el-form-item--mini.el-form-item { margin-bottom: 4px; }
</style>