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

src/views/equipment-management/consumables-management/consumables-lifecycle/index.vue

@@ -1,71 +1,298 @@
 <template>
   <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-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 type="primary" icon="el-icon-plus" @click="openDialog()">新增</el-button><el-button icon="el-icon-download" :disabled="loading" @click="exportTask">导出</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>
+    <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"
+    />
+
+    <page-dialog-form
+      ref="dialogForm"
+      :visible.sync="dialogVisible"
+      :title="dialogTitle"
+      width="40%"
+      :form-cols="formCols"
+      :form-data="formData"
+      :rules="rules"
+      label-width="130px"
+      :submitting="submitting"
+      :confirm-text="key('confirm')"
+      :cancel-text="key('cancel')"
+      @submit="onDialogSubmit"
+      @close="onDialogClose"
+    />
   </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 PageDialogForm from '@/components/page-dialog-form'
 import { getList, createItem, editItem, deleteItem, createExportTask } from '@/api/equipment-management/consumables-lifecycle'
+
 export default {
   name: 'equipment-management-consumables-lifecycle',
+  components: { PageTable, PageDialogForm },
+  mixins: [i18nMixin('page.equipment_management.consumables_management.consumables_lifecycle'), confirmMixin],
   data () {
     return {
       loading: false,
-      saving: false,
-      canCreate: true,
-      canEdit: true,
-      canDelete: true,
-      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_consumables_item_name', label: '损耗品项目' },
-        { prop: 'device_name', label: '关联设备' },
-        { prop: 'standard_life', label: '标准寿命' },
-        { prop: 'warning_life', label: '预警寿命' },
-        { prop: 'used_life', label: '已用寿命' },
-        { prop: 'replace_time', label: '更换时间' }
-      ],
-      formFields: [
-        { prop: 'device_consumables_item_id', label: '损耗品项目ID' },
-        { prop: 'device_id', label: '设备ID' },
-        { prop: 'standard_life', label: '标准寿命' },
-        { prop: 'warning_life', label: '预警寿命' },
-        { prop: 'used_life', label: '已用寿命' },
-        { prop: 'remark', label: '备注' }
-      ],
-      form: {},
-      dialogVisible: false
+      formData: {
+        device_consumables_item_id: '',
+        device_id: '',
+        standard_life: '',
+        warning_life: '',
+        used_life: '',
+        remark: ''
+      },
+      rules: {
+        device_consumables_item_id: [{ required: true, message: this.key('enter_consumables_item_id'), trigger: 'blur' }],
+        device_id: [{ required: true, message: this.key('enter_device_id'), trigger: 'blur' }]
+      },
+      columns: [],
+      toolbarButtons: [],
+      rowButtons: [],
+      formCols: [
+        [
+          {
+            type: 'input',
+            prop: 'device_consumables_item_id',
+            label: this.key('consumables_item_id'),
+            placeholder: this.key('enter_consumables_item_id'),
+            clearable: true,
+            style: { width: '90%' }
+          }
+        ],
+        [
+          {
+            type: 'input',
+            prop: 'device_id',
+            label: this.key('device_id'),
+            placeholder: this.key('enter_device_id'),
+            clearable: true,
+            style: { width: '90%' }
+          }
+        ],
+        [
+          {
+            type: 'input',
+            prop: 'standard_life',
+            label: this.key('standard_life'),
+            placeholder: this.key('enter_standard_life'),
+            clearable: true,
+            style: { width: '90%' }
+          }
+        ],
+        [
+          {
+            type: 'input',
+            prop: 'warning_life',
+            label: this.key('warning_life'),
+            placeholder: this.key('enter_warning_life'),
+            clearable: true,
+            style: { width: '90%' }
+          }
+        ],
+        [
+          {
+            type: 'input',
+            prop: 'used_life',
+            label: this.key('used_life'),
+            placeholder: this.key('enter_used_life'),
+            clearable: true,
+            style: { width: '90%' }
+          }
+        ],
+        [
+          {
+            type: 'input',
+            prop: 'remark',
+            label: this.key('remark'),
+            placeholder: this.key('enter_remark'),
+            inputType: 'textarea',
+            autosize: { minRows: 2, maxRows: 6 },
+            clearable: true,
+            style: { width: '90%' }
+          }
+        ]
+      ]
     }
   },
-  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] } },
-  mounted () { this.fetchData() },
+  created () {
+    this.columns = useTableColumns([
+      { prop: 'device_consumables_item_name', label: this.key('consumables_item'), minWidth: 140 },
+      { prop: 'device_name', label: this.key('device_name'), minWidth: 140 },
+      { prop: 'standard_life', label: this.key('standard_life'), minWidth: 140 },
+      { prop: 'warning_life', label: this.key('warning_life'), minWidth: 140 },
+      { prop: 'used_life', label: this.key('used_life'), minWidth: 140 },
+      { prop: 'replace_time', label: this.key('replace_time'), minWidth: 140 },
+      { prop: '_actions', label: this.key('operation'), width: 170, fixed: 'right' }
+    ])
+    const btns = useTableButtons({
+      toolbar: [
+        { key: 'add', label: this.key('add'), icon: 'el-icon-plus', type: 'primary', auth: '/device_management/device_consumables/device_consumables_lifetime_management/create', onClick: this.openAdd },
+        { key: 'export', label: this.key('export'), icon: 'el-icon-download', auth: '/device_management/device_consumables/device_consumables_lifetime_management/export', onClick: this.handleExport }
+      ],
+      row: [
+        { key: 'edit', label: this.key('edit'), icon: 'el-icon-edit', auth: '/device_management/device_consumables/device_consumables_lifetime_management/edit', onClick: this.openEdit },
+        { key: 'delete', label: this.key('delete'), icon: 'el-icon-delete', color: 'danger', auth: '/device_management/device_consumables/device_consumables_lifetime_management/delete', onClick: this.handleDelete }
+      ]
+    }, this.$permission)
+    this.toolbarButtons = btns.toolbarButtons
+    this.rowButtons = btns.rowButtons
+    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 save () {
-      this.saving = true
+    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 {
-        if (this.form.id) await editItem(this.form)
-        else await createItem(this.form)
-        this.$message.success('操作成功')
+        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 = {
+        device_consumables_item_id: '',
+        device_id: '',
+        standard_life: '',
+        warning_life: '',
+        used_life: '',
+        remark: ''
+      }
+      this.editId = ''
+    },
+    openAdd () {
+      this.handleType = 'create'
+      this.dialogTitle = this.key('add_title')
+      this.$nextTick(() => {
+        this.$refs.dialogForm && this.$refs.dialogForm.reset()
+        this.resetForm()
+        this.dialogVisible = true
+      })
+    },
+    openEdit (row) {
+      this.handleType = 'edit'
+      this.dialogTitle = this.key('edit_title')
+      this.editId = row.id
+      this.formData = {
+        device_consumables_item_id: row.device_consumables_item_id || '',
+        device_id: row.device_id || '',
+        standard_life: row.standard_life || '',
+        warning_life: row.warning_life || '',
+        used_life: row.used_life || '',
+        remark: row.remark || ''
+      }
+      this.dialogVisible = true
+    },
+    async onDialogSubmit () {
+      this.submitting = true
+      try {
+        if (this.handleType === 'create') await createItem(this.formData)
+        else await editItem({ ...this.formData, id: this.editId })
+        this.$message.success(this.$t(this.key('operation_success')))
         this.dialogVisible = false
         this.fetchData()
-      } finally { this.saving = false }
+      } finally {
+        this.submitting = false
+      }
     },
-    async remove (row) { await this.$confirm('确认删除该记录？', '提示', { type: 'warning' }); await deleteItem({ id: row.id }); this.$message.success('删除成功'); this.fetchData() },
-    async exportTask () { await this.$confirm('确认创建导出任务？', '提示', { type: 'warning' }); await createExportTask(this.buildParams()); this.$message.success('导出任务创建成功') }
+    onDialogClose () {
+      this.resetForm()
+    },
+    async handleDelete (row) {
+      const cancelled = await this.$confirmAction(
+        { message: this.key('confirm_delete'), title: this.key('tip') },
+        () => deleteItem({ id: [row.id] })
+      )
+      if (cancelled) return
+      this.$message.success(this.$t(this.key('operation_success')))
+      this.pagination.current = Math.min(this.pagination.current, Math.ceil((this.pagination.total - 1) / this.pagination.size) || 1)
+      this.fetchData()
+    },
+    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>
+
+<style scoped>
+.search-bar { padding: 10px 0; }
+/deep/ .el-form-item--mini.el-form-item { margin-bottom: 4px; }
+</style>