按组件规范重构设备模型页面

2026-06-22 19:03:44 +08:00
parent 8eaa5f90ca
commit 2690204ec5
15 changed files with 6148 additions and 814 deletions
--- a/src/views/equipment-management/inspection-management/inspection-logs/index.vue
+++ b/src/views/equipment-management/inspection-management/inspection-logs/index.vue
@@ -2,82 +2,153 @@
  <d2-container>
    <template #header>
      <div class="search-bar">
-        <el-form :inline="true" :model="search" size="mini">
-          <el-form-item label="关键字"><el-input v-model.trim="search.keyword" placeholder="请输入关键字" clearable style="width:180px" @keyup.enter.native="onSearch" /></el-form-item>
+        <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" :disabled="loading" @click="onSearch">查询</el-button>
-            <el-button icon="el-icon-refresh" :disabled="loading" @click="onReset">重置</el-button>
-
-            <el-button icon="el-icon-download" :disabled="loading" @click="exportTask">导出</el-button>
+            <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>
-    <el-table v-loading="loading" :data="tableData" size="mini" border height="calc(100vh - 220px)">
-      <el-table-column type="index" width="55" />
-      <el-table-column v-for="column in displayColumns" :key="column.prop" :prop="column.prop" :label="column.label" min-width="150" show-overflow-tooltip />
-      <el-table-column v-if="canEdit || canDelete" label="操作" fixed="right" width="150"><template slot-scope="scope"><el-button v-if="canEdit" type="text" size="mini" @click="openDialog(scope.row)">编辑</el-button><el-button v-if="canDelete" type="text" size="mini" class="danger" @click="remove(scope.row)">删除</el-button></template></el-table-column>
-      <template #empty><el-empty description="暂无数据" :image-size="80" /></template>
-    </el-table>
-    <div class="pager"><el-pagination background layout="total, sizes, prev, pager, next, jumper" :current-page="pagination.current" :page-size="pagination.size" :total="pagination.total" @current-change="changePage" @size-change="changeSize" /></div>
-    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="640px"><el-form ref="form" :model="form" label-width="130px" size="mini"><el-form-item v-for="field in formFields" :key="field.prop" :label="field.label" :prop="field.prop"><el-input v-model="form[field.prop]" clearable /></el-form-item></el-form><template #footer><el-button size="mini" @click="dialogVisible=false">取消</el-button><el-button type="primary" size="mini" :loading="saving" @click="save">确定</el-button></template></el-dialog>
+
+    <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,
-      saving: false,
-      canCreate: false,
-      canEdit: false,
-      canDelete: false,
-      canExport: true,
-      search: { keyword: '' },
+      submitting: false,
      tableData: [],
+      selectedRows: [],
+      dialogVisible: false,
+      dialogTitle: '',
+      editId: '',
+      handleType: 'create',
+      search: {
+        keyword: ''
+      },
      pagination: { current: 1, size: 10, total: 0 },
-      columns: [
-        { prop: 'device_code', label: '设备编码' },
-        { prop: 'device_name', label: '设备名称' },
-        { prop: 'check_item_name', label: '点检项目' },
-        { prop: 'check_result', label: '点检结果' },
-        { prop: 'check_user', label: '点检人员' },
-        { prop: 'check_time', label: '点检时间' }
-      ],
-      formFields: [
+      formData: {

-      ],
-      form: {},
-      dialogVisible: false
+      },
+      rules: {},
+      columns: [],
+      toolbarButtons: [],
+      rowButtons: [],
+      formCols: []
    }
  },
-  computed: {
-    dialogTitle () { return this.form && this.form.id ? '编辑设备点检日志' : '新增设备点检日志' },
-    displayColumns () { const keys = new Set(this.columns.map(item => item.prop)); const extra = Object.keys(this.tableData[0] || {}).filter(key => !keys.has(key) && key !== 'id').slice(0, 8).map(key => ({ prop: key, label: key })); return [...this.columns, ...extra] }
+  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()
  },
-  mounted () { this.fetchData() },
  methods: {
-    responseData (res) { return res && res.data !== undefined ? res.data : res },
-    normalizeList (data) { 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 } },
-    buildParams () { return { ...this.search, page_no: this.pagination.current, page_size: this.pagination.size } },
-    async fetchData () { this.loading = true; try { const res = await getList(this.buildParams()); const data = this.normalizeList(this.responseData(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() },
-    changePage (page) { this.pagination.current = page; this.fetchData() },
-    changeSize (size) { this.pagination.size = size; this.pagination.current = 1; this.fetchData() },
-    openDialog (row) { this.form = row ? { ...row } : {}; this.dialogVisible = true },
-    async exportTask () {
-      await this.$confirm('确认创建导出任务？', '提示', { type: 'warning' })
-      await createExportTask(this.buildParams())
-      this.$message.success('导出任务创建成功')
+    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 lang="scss" scoped>
-.search-bar { margin-bottom: -18px; }
-.pager { padding-top: 10px; text-align: right; }
-.danger { color: #f56c6c; }
+
+<style scoped>
+.search-bar { padding: 10px 0; }
+/deep/ .el-form-item--mini.el-form-item { margin-bottom: 4px; }
 </style>