优化设备点检日志查询

src/views/equipment-management/inspection-management/inspection-logs/index.vue

@@ -1,81 +1,48 @@
 <template>
   <d2-container>
-    <div class="inspection-logs-page">
+    <template #header>
-      <aside class="device-panel" v-loading="treeLoading">
+      <div class="search-bar">
-        <el-input
+        <el-form :inline="true" :model="search" size="mini">
-          v-model.trim="deviceFilter"
+          <el-form-item :label="$t(key('device_code'))">
-          size="mini"
+            <el-input v-model.trim="search.device_code" :placeholder="$t(key('enter_device_code'))" clearable style="width:180px" @keyup.enter.native="onSearch" />
-          :placeholder="$t(key('enter_device_name'))"
+          </el-form-item>
-          clearable
+          <el-form-item :label="$t(key('device_name'))">
-          class="device-filter"
+            <el-input v-model.trim="search.device_name" :placeholder="$t(key('enter_device_name'))" clearable style="width:180px" @keyup.enter.native="onSearch" />
-        />
+          </el-form-item>
-        <el-tree
+          <el-form-item :label="$t(key('inspection_item_name'))">
-          v-if="deviceTree.length"
+            <el-input v-model.trim="search.device_check_items_name" :placeholder="$t(key('enter_inspection_item_name'))" clearable style="width:200px" @keyup.enter.native="onSearch" />
-          ref="deviceTree"
+          </el-form-item>
-          :data="deviceTree"
+          <el-form-item :label="$t(key('operator'))">
-          show-checkbox
+            <el-select v-model="search.user_id" :placeholder="$t(key('please_select_operator'))" clearable filterable style="width:180px">
-          highlight-current
+              <el-option v-for="item in userOptions" :key="item.value" :label="item.label" :value="item.value" />
-          default-expand-all
+            </el-select>
-          node-key="id"
+          </el-form-item>
-          :expand-on-click-node="false"
+          <el-form-item :label="$t(key('inspection_time'))">
-          :default-checked-keys="currentDeviceId ? [currentDeviceId] : []"
+            <el-date-picker v-model="search.create_time" type="datetimerange" value-format="yyyy-MM-dd HH:mm:ss" :start-placeholder="$t(key('start_time'))" :end-placeholder="$t(key('end_time'))" style="width:330px" />
-          :current-node-key="currentDeviceId"
+          </el-form-item>
-          :filter-node-method="filterDeviceNode"
+          <el-form-item>
-          @node-click="handleDeviceClick"
+            <el-button type="primary" icon="el-icon-search" @click="onSearch">{{ $t(key('search')) }}</el-button>
-          @check-change="handleDeviceCheckChange"
+            <el-button icon="el-icon-refresh" @click="onReset">{{ $t(key('reset')) }}</el-button>
-        >
+          </el-form-item>
-          <template #default="{ node, data }">
+        </el-form>
-            <span class="device-node">
+      </div>
-              <span>{{ node.label }}</span>
+    </template>
-              <span class="device-code">({{ data.code || '-' }})</span>
-            </span>
-          </template>
-        </el-tree>
-        <el-result v-else icon="info" :title="$t(key('no_data'))" sub-title="" />
-      </aside>
 
-      <section class="logs-panel">
+    <page-table
-        <div class="logs-context">
+      ref="pageTable"
-          <span class="context-label">{{ $t(key('current_device')) }}</span>
+      :columns="columns"
-          <strong>{{ currentDeviceLabel || '-' }}</strong>
+      :data="tableData"
-        </div>
+      :loading="loading"
-        <div class="search-bar">
+      :toolbar-buttons="toolbarButtons"
-          <el-form :inline="true" :model="search" size="mini">
+      :row-buttons="rowButtons"
-            <el-form-item :label="$t(key('inspection_item_name'))">
+      :pagination="pagination"
-              <el-input v-model.trim="search.device_check_items_name" :placeholder="$t(key('enter_inspection_item_name'))" clearable style="width:210px" @keyup.enter.native="onSearch" />
+      auto-height
-            </el-form-item>
+      @page-change="onPageChange"
-            <el-form-item :label="$t(key('operator'))">
+    >
-              <el-select v-model="search.user_id" :placeholder="$t(key('please_select_operator'))" clearable filterable style="width:190px">
+      <template #col-result="{ row }">
-                <el-option v-for="item in userOptions" :key="item.value" :label="item.label" :value="item.value" />
+        <el-tag :type="row.result === 'OK' ? 'success' : 'danger'" size="mini">{{ row.result }}</el-tag>
-              </el-select>
+      </template>
-            </el-form-item>
+    </page-table>
-            <el-form-item :label="$t(key('inspection_time'))">
-              <el-date-picker v-model="search.create_time" type="datetimerange" value-format="yyyy-MM-dd HH:mm:ss" :start-placeholder="$t(key('start_time'))" :end-placeholder="$t(key('end_time'))" style="width:330px" />
-            </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>
-
-        <page-table
-          ref="pageTable"
-          :columns="columns"
-          :data="tableData"
-          :loading="loading"
-          :toolbar-buttons="toolbarButtons"
-          :row-buttons="rowButtons"
-          :pagination="pagination"
-          auto-height
-          @page-change="onPageChange"
-        >
-          <template #col-result="{ row }">
-            <el-tag :type="row.result === 'OK' ? 'success' : 'danger'" size="mini">{{ row.result }}</el-tag>
-          </template>
-        </page-table>
-      </section>
-    </div>
 
     <el-dialog :title="detailsTitle" :visible.sync="detailsVisible" width="1050px" :close-on-click-modal="false">
       <div class="details-search">
@@ -121,7 +88,6 @@ import { useTableButtons } from '@/composables/useTableButtons'
 import { i18nMixin } from '@/composables/useI18n'
 import { confirmMixin } from '@/composables/useConfirmHandle'
 import PageTable from '@/components/page-table'
-import { getAll as getDeviceAll } from '@/api/equipment-management/equipment-registry'
 import { getUserList } from '@/api/system-administration/user'
 import { getDetails, getDetailsList, createExportTask } from '@/api/equipment-management/inspection-logs'
 
@@ -140,16 +106,13 @@ function readList (res) {
   return []
 }
 
-function normalizeDevices (list) {
+function compactParams (params) {
-  return (Array.isArray(list) ? list : []).map((item, index) => ({
+  const next = { ...params }
-    id: item.id || item.value,
+  if (!Array.isArray(next.create_time) || !next.create_time.length) delete next.create_time
-    value: item.id || item.value,
+  Object.keys(next).forEach(key => {
-    label: item.name || item.label,
+    if (next[key] === '' || next[key] === undefined || next[key] === null) delete next[key]
-    name: item.name || item.label,
+  })
-    code: item.code || item.device_code || '',
+  return next
-    index,
-    children: []
-  }))
 }
 
 export default {
@@ -159,18 +122,13 @@ export default {
   data () {
     return {
       loading: false,
-      treeLoading: false,
       detailsLoading: false,
       tableData: [],
       detailsData: [],
       detailsVisible: false,
       currentDetailRow: null,
-      deviceFilter: '',
-      deviceTree: [],
-      currentDeviceId: '',
-      currentDevice: null,
       userOptions: [],
-      search: { device_check_items_name: '', user_id: '', create_time: [] },
+      search: { device_code: '', device_name: '', device_check_items_name: '', user_id: '', create_time: [] },
       detailsSearch: { device_check_items_name: '' },
       pagination: { current: 1, size: 10, total: 0 },
       columns: [],
@@ -179,24 +137,18 @@ export default {
     }
   },
   computed: {
-    currentDeviceLabel () {
-      if (!this.currentDevice) return ''
-      return `${this.currentDevice.label}${this.currentDevice.code ? ` (${this.currentDevice.code})` : ''}`
-    },
     detailsTitle () {
-      const deviceName = this.currentDetailRow ? (this.currentDetailRow.device_name || (this.currentDevice && this.currentDevice.label) || '') : ''
+      const deviceName = this.currentDetailRow ? (this.currentDetailRow.device_name || '') : ''
       return deviceName ? `${this.$t(this.key('device'))}【${deviceName}】${this.$t(this.key('inspection_details'))}` : this.$t(this.key('details_title'))
     }
   },
-  watch: {
-    deviceFilter (val) {
-      if (this.$refs.deviceTree) this.$refs.deviceTree.filter(val)
-    }
-  },
   created () {
     this.columns = useTableColumns([
       { prop: 'id', label: 'ID', width: 80, fixed: 'left' },
-      { prop: 'device_check_items_name', label: this.key('inspection_item_name'), minWidth: 150, fixed: 'left' },
+      { prop: 'device_code', label: this.key('device_code'), minWidth: 130, fixed: 'left' },
+      { prop: 'device_name', label: this.key('device_name'), minWidth: 140 },
+      { prop: 'device_category_name', label: this.key('device_category'), minWidth: 140 },
+      { prop: 'device_check_items_name', label: this.key('inspection_item_name'), minWidth: 150 },
       { prop: 'result', label: this.key('inspection_result'), slot: 'result', width: 120 },
       { prop: 'val', label: this.key('inspection_value'), minWidth: 110 },
       { prop: 'standard', label: this.key('standard'), minWidth: 140, showOverflowTooltip: true },
@@ -220,31 +172,10 @@ export default {
     }, this.$permission)
     this.toolbarButtons = btns.toolbarButtons
     this.rowButtons = btns.rowButtons
-    this.loadDevices()
     this.loadUsers()
+    this.fetchData()
   },
   methods: {
-    async loadDevices () {
-      this.treeLoading = true
-      try {
-        const res = await getDeviceAll({ no_denglu_sign: 'NO' })
-        const raw = res && res.data && Array.isArray(res.data.data) ? res.data.data : ((res && res.data) || res)
-        const list = normalizeDevices(raw)
-        this.deviceTree = list
-        if (list.length) {
-          this.setCurrentDevice(list[0], false)
-          this.$nextTick(() => {
-            if (this.$refs.deviceTree) {
-              this.$refs.deviceTree.setCheckedKeys([this.currentDeviceId])
-              this.$refs.deviceTree.setCurrentKey(this.currentDeviceId)
-            }
-          })
-          this.fetchData()
-        }
-      } finally {
-        this.treeLoading = false
-      }
-    },
     async loadUsers () {
       const res = await getUserList({ page_no: 1, page_size: 10000 })
       const page = readPageData(res)
@@ -253,39 +184,10 @@ export default {
         value: item.user_id || item.id
       }))
     },
-    setCurrentDevice (device, shouldFetch = true) {
-      this.currentDevice = device
-      this.currentDeviceId = device ? device.id : ''
-      this.pagination.current = 1
-      if (shouldFetch) this.fetchData()
-    },
-    filterDeviceNode (value, data) {
-      if (!value) return true
-      const text = String(value).toLowerCase()
-      return String(data.label || '').toLowerCase().includes(text) || String(data.code || '').toLowerCase().includes(text)
-    },
-    handleDeviceClick (data) {
-      this.setCurrentDevice(data)
-      this.$nextTick(() => {
-        if (this.$refs.deviceTree) this.$refs.deviceTree.setCheckedKeys([data.id])
-      })
-    },
-    handleDeviceCheckChange (data, checked) {
-      if (!checked) return
-      if (this.$refs.deviceTree) this.$refs.deviceTree.setCheckedKeys([data.id])
-      if (String(data.id) !== String(this.currentDeviceId)) this.setCurrentDevice(data)
-    },
     buildSearchParams () {
-      const params = { ...this.search, device_code: this.currentDevice ? this.currentDevice.code : '' }
+      return compactParams(this.search)
-      if (!Array.isArray(params.create_time) || !params.create_time.length) delete params.create_time
-      return params
     },
     async fetchData () {
-      if (!this.currentDevice || !this.currentDevice.code) {
-        this.tableData = []
-        this.pagination.total = 0
-        return
-      }
       this.loading = true
       try {
         const res = await getDetailsList({ ...this.buildSearchParams(), page_no: this.pagination.current, page_size: this.pagination.size })
@@ -301,7 +203,7 @@ export default {
       this.fetchData()
     },
     onReset () {
-      this.search = { device_check_items_name: '', user_id: '', create_time: [] }
+      this.search = { device_code: '', device_name: '', device_check_items_name: '', user_id: '', create_time: [] }
       this.pagination.current = 1
       this.fetchData()
     },
@@ -321,7 +223,7 @@ export default {
       this.detailsLoading = true
       try {
         const res = await getDetails({
-          ...this.detailsSearch,
+          ...compactParams(this.detailsSearch),
           device_check_items_log_id: this.currentDetailRow.device_check_items_log_id || this.currentDetailRow.id
         })
         this.detailsData = readList(res)
@@ -334,14 +236,6 @@ export default {
       this.loadDetails()
     },
     async handleExport () {
-      if (!this.currentDevice || !this.currentDevice.code) {
-        this.$message.warning(this.$t(this.key('please_select_device')))
-        return
-      }
-      if (!Array.isArray(this.search.create_time) || this.search.create_time.length !== 2) {
-        this.$message.warning(this.$t(this.key('please_select_export_time')))
-        return
-      }
       const cancelled = await this.$confirmAction(
         { message: this.key('confirm_export'), title: this.key('tip'), confirmButtonText: this.key('confirm'), cancelButtonText: this.key('cancel') },
         () => createExportTask({ ...this.buildSearchParams(), action: 'download' })
@@ -353,56 +247,8 @@ export default {
 </script>
 
 <style scoped>
-.inspection-logs-page {
-  display: flex;
-  gap: 16px;
-  height: 100%;
-  min-height: 560px;
-}
-.device-panel {
-  flex: 0 0 260px;
-  min-width: 220px;
-  border-right: 1px solid #ebeef5;
-  padding: 10px 14px 10px 0;
-  overflow: auto;
-}
-.device-filter {
-  margin-bottom: 12px;
-}
-.device-node {
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-  max-width: 190px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-.device-code {
-  color: #909399;
-  font-size: 12px;
-}
-.logs-panel {
-  flex: 1;
-  min-width: 0;
-  display: flex;
-  flex-direction: column;
-}
-.logs-context {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  min-height: 30px;
-  margin-bottom: 8px;
-  color: #303133;
-}
-.context-label {
-  color: #909399;
-}
 .search-bar {
-  padding-bottom: 8px;
+  padding: 10px 0;
-  border-bottom: 1px solid #ebeef5;
-  margin-bottom: 10px;
 }
 .details-search {
   padding-bottom: 8px;
@@ -410,7 +256,4 @@ export default {
 /deep/ .el-form-item--mini.el-form-item {
   margin-bottom: 4px;
 }
-/deep/ .d2-container-full__body {
-  overflow: hidden;
-}
 </style>