调整设备点检记录左右布局

2026-06-26 15:48:54 +08:00
parent b52919aab4
commit 494a2f8680
3 changed files with 211 additions and 50 deletions
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -1257,7 +1257,10 @@
 					"unit": "Inspection Unit",
 					"inspection_value": "Inspection Value",
 					"enter_inspection_value": "Enter inspection value",
-					"inspection_items_empty": "No inspection items. Please configure them first."
+					"inspection_items_empty": "No inspection items. Please configure them first.",
+					"enter_device_category_name": "Enter device category name",
+					"current_device_category": "Current Device Category",
+					"no_data": "No Data"
 				},
 				"inspection_logs": {
 					"search": "Search",
--- a/src/locales/zh-chs.json
+++ b/src/locales/zh-chs.json
@@ -1257,7 +1257,10 @@
 					"unit": "点检单位",
 					"inspection_value": "点检值",
 					"enter_inspection_value": "请输入点检值",
-					"inspection_items_empty": "设备点检项目为空，请先配置"
+					"inspection_items_empty": "设备点检项目为空，请先配置",
+					"enter_device_category_name": "请输入设备类别名称",
+					"current_device_category": "当前设备类别",
+					"no_data": "无数据"
 				},
 				"inspection_logs": {
 					"search": "查询",
--- a/src/views/equipment-management/inspection-management/inspection-records/index.vue
+++ b/src/views/equipment-management/inspection-management/inspection-records/index.vue
@@ -1,43 +1,77 @@
 <template>
  <d2-container>
-    <template #header>
-      <div class="search-bar">
-        <el-form :inline="true" :model="search" size="mini">
-          <el-form-item :label="$t(key('device_category'))">
-            <el-select v-model="search.device_category_id" :placeholder="$t(key('please_select_device_category'))" clearable filterable style="width:210px">
-              <el-option v-for="item in deviceCategoryOptions" :key="item.value" :label="item.label" :value="item.value" />
-            </el-select>
-          </el-form-item>
-          <el-form-item :label="$t(key('device_code'))">
-            <el-input v-model.trim="search.device_code" :placeholder="$t(key('enter_device_code'))" clearable style="width:210px" @keyup.enter.native="onSearch" />
-          </el-form-item>
-          <el-form-item :label="$t(key('device_name'))">
-            <el-input v-model.trim="search.device_name" :placeholder="$t(key('enter_device_name'))" clearable style="width:210px" @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>
+    <div class="inspection-records-page">
+      <aside class="category-panel" v-loading="treeLoading">
+        <el-input
+          v-model.trim="categoryFilter"
+          size="mini"
+          :placeholder="$t(key('enter_device_category_name'))"
+          clearable
+          class="category-filter"
+        />
+        <el-tree
+          v-if="deviceCategoryTree.length"
+          ref="categoryTree"
+          :data="deviceCategoryTree"
+          show-checkbox
+          highlight-current
+          default-expand-all
+          node-key="id"
+          :expand-on-click-node="false"
+          :default-checked-keys="currentCategoryId ? [currentCategoryId] : []"
+          :current-node-key="currentCategoryId"
+          :filter-node-method="filterCategoryNode"
+          @node-click="handleCategoryClick"
+          @check-change="handleCategoryCheckChange"
+        >
+          <template #default="{ node, data }">
+            <span class="category-node">
+              <span>{{ node.label }}</span>
+              <span class="category-code">({{ data.code || '-' }})</span>
+            </span>
+          </template>
+        </el-tree>
+        <el-result v-else icon="info" :title="$t(key('no_data'))" sub-title="" />
+      </aside>

-    <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-check_result="{ row }">
-        <el-tag v-if="row.check_result" :type="row.check_result === 'OK' ? 'success' : 'danger'" size="mini">{{ row.check_result }}</el-tag>
-        <span v-else>-</span>
-      </template>
-    </page-table>
+      <section class="records-panel">
+        <div class="records-context">
+          <span class="context-label">{{ $t(key('current_device_category')) }}</span>
+          <strong>{{ currentCategoryLabel || '-' }}</strong>
+        </div>
+        <div class="search-bar">
+          <el-form :inline="true" :model="search" size="mini">
+            <el-form-item :label="$t(key('device_code'))">
+              <el-input v-model.trim="search.device_code" :placeholder="$t(key('enter_device_code'))" clearable style="width:210px" @keyup.enter.native="onSearch" />
+            </el-form-item>
+            <el-form-item :label="$t(key('device_name'))">
+              <el-input v-model.trim="search.device_name" :placeholder="$t(key('enter_device_name'))" clearable style="width:210px" @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>
+
+        <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-check_result="{ row }">
+            <el-tag v-if="row.check_result" :type="row.check_result === 'OK' ? 'success' : 'danger'" size="mini">{{ row.check_result }}</el-tag>
+            <span v-else>-</span>
+          </template>
+        </page-table>
+      </section>
+    </div>

    <el-dialog :title="dialogTitleText" :visible.sync="dialogVisible" width="980px" :close-on-click-modal="false" @close="resetDialog">
      <el-form ref="recordForm" :model="recordForm" :rules="recordRules" inline size="mini" label-width="90px">
@@ -109,8 +143,16 @@ function readList (res) {
  return []
 }

-function toOptions (list) {
-  return (Array.isArray(list) ? list : []).map(item => ({ label: item.name || item.label, value: item.id || item.value, raw: item }))
+function normalizeCategories (list) {
+  return (Array.isArray(list) ? list : []).map((item, index) => ({
+    id: item.id || item.value,
+    value: item.id || item.value,
+    label: item.name || item.label,
+    name: item.name || item.label,
+    code: item.code || '',
+    index,
+    children: []
+  }))
 }

 export default {
@@ -120,11 +162,15 @@ export default {
  data () {
    return {
      loading: false,
+      treeLoading: false,
      submitting: false,
      itemsLoading: false,
      tableData: [],
-      deviceCategoryOptions: [],
-      search: { device_category_id: '', device_code: '', device_name: '' },
+      categoryFilter: '',
+      deviceCategoryTree: [],
+      currentCategoryId: '',
+      currentCategory: null,
+      search: { device_code: '', device_name: '' },
      pagination: { current: 1, size: 10, total: 0 },
      dialogVisible: false,
      currentDevice: null,
@@ -141,11 +187,20 @@ export default {
    }
  },
  computed: {
+    currentCategoryLabel () {
+      if (!this.currentCategory) return ''
+      return `${this.currentCategory.label}${this.currentCategory.code ? ` (${this.currentCategory.code})` : ''}`
+    },
    dialogTitleText () {
      const name = this.currentDevice ? `${this.currentDevice.device_code || ''} ${this.currentDevice.device_name || ''}`.trim() : ''
      return `${this.$t(this.key('add_inspection_record'))}${name ? ` - ${name}` : ''}`
    }
  },
+  watch: {
+    categoryFilter (val) {
+      if (this.$refs.categoryTree) this.$refs.categoryTree.filter(val)
+    }
+  },
  created () {
    this.columns = useTableColumns([
      { prop: 'device_code', label: this.key('device_code'), minWidth: 140, fixed: 'left' },
@@ -166,17 +221,62 @@ export default {
    this.toolbarButtons = btns.toolbarButtons
    this.rowButtons = btns.rowButtons
    this.loadDeviceCategories()
-    this.fetchData()
  },
  methods: {
    async loadDeviceCategories () {
-      const res = await getEquipmentCategoryALL({})
-      this.deviceCategoryOptions = toOptions((res && res.data) || res)
+      this.treeLoading = true
+      try {
+        const res = await getEquipmentCategoryALL({ no_denglu_sign: 'no' })
+        const list = normalizeCategories((res && res.data) || res)
+        this.deviceCategoryTree = list
+        if (list.length) {
+          this.setCurrentCategory(list[0], false)
+          this.$nextTick(() => {
+            if (this.$refs.categoryTree) {
+              this.$refs.categoryTree.setCheckedKeys([this.currentCategoryId])
+              this.$refs.categoryTree.setCurrentKey(this.currentCategoryId)
+            }
+          })
+          this.fetchData()
+        }
+      } finally {
+        this.treeLoading = false
+      }
+    },
+    setCurrentCategory (category, shouldFetch = true) {
+      this.currentCategory = category
+      this.currentCategoryId = category ? category.id : ''
+      this.pagination.current = 1
+      if (shouldFetch) this.fetchData()
+    },
+    filterCategoryNode (value, data) {
+      if (!value) return true
+      const text = String(value).toLowerCase()
+      return String(data.label || '').toLowerCase().includes(text) || String(data.code || '').toLowerCase().includes(text)
+    },
+    handleCategoryClick (data) {
+      this.setCurrentCategory(data)
+      this.$nextTick(() => {
+        if (this.$refs.categoryTree) this.$refs.categoryTree.setCheckedKeys([data.id])
+      })
+    },
+    handleCategoryCheckChange (data, checked) {
+      if (!checked) return
+      if (this.$refs.categoryTree) this.$refs.categoryTree.setCheckedKeys([data.id])
+      if (String(data.id) !== String(this.currentCategoryId)) this.setCurrentCategory(data)
+    },
+    buildSearchParams () {
+      return { ...this.search, device_category_id: this.currentCategoryId }
    },
    async fetchData () {
+      if (!this.currentCategoryId) {
+        this.tableData = []
+        this.pagination.total = 0
+        return
+      }
      this.loading = true
      try {
-        const res = await getList({ ...this.search, page_no: this.pagination.current, page_size: this.pagination.size })
+        const res = await getList({ ...this.buildSearchParams(), page_no: this.pagination.current, page_size: this.pagination.size })
        const page = readPageData(res)
        this.tableData = page.list
        this.pagination.total = page.total
@@ -189,7 +289,7 @@ export default {
      this.fetchData()
    },
    onReset () {
-      this.search = { device_category_id: '', device_code: '', device_name: '' }
+      this.search = { device_code: '', device_name: '' }
      this.pagination.current = 1
      this.fetchData()
    },
@@ -261,6 +361,61 @@ export default {
 </script>

 <style scoped>
-.search-bar { padding: 10px 0; }
-/deep/ .el-form-item--mini.el-form-item { margin-bottom: 4px; }
+.inspection-records-page {
+  display: flex;
+  gap: 16px;
+  height: 100%;
+  min-height: 560px;
+}
+.category-panel {
+  flex: 0 0 260px;
+  min-width: 220px;
+  border-right: 1px solid #ebeef5;
+  padding: 10px 14px 10px 0;
+  overflow: auto;
+}
+.category-filter {
+  margin-bottom: 12px;
+}
+.category-node {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  max-width: 190px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.category-code {
+  color: #909399;
+  font-size: 12px;
+}
+.records-panel {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+}
+.records-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;
+  border-bottom: 1px solid #ebeef5;
+  margin-bottom: 10px;
+}
+/deep/ .el-form-item--mini.el-form-item {
+  margin-bottom: 4px;
+}
+/deep/ .d2-container-full__body {
+  overflow: hidden;
+}
 </style>