迁移车间配置

src/views/scada_manage/workshop_manage/workshop_config/index.vue

@@ -0,0 +1,28 @@
+<template>
+  <d2-container>
+    <template #header>
+      <el-form :inline="true" size="mini">
+        <el-form-item :label="$t(key('building'))"><el-input v-model="search.building" clearable style="width:180px" :placeholder="$t(key('enter_building'))" @keyup.enter.native="onSearch" /></el-form-item>
+        <el-form-item :label="$t(key('floor'))"><el-input v-model="search.floor" clearable style="width:180px" :placeholder="$t(key('enter_floor'))" @keyup.enter.native="onSearch" /></el-form-item>
+        <el-form-item :label="$t(key('name'))"><el-input v-model="search.name" clearable style="width:180px" :placeholder="$t(key('enter_name'))" @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>
+    </template>
+    <page-table :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="520px" :form-cols="formCols" :form-data="formData" :rules="rules" :submitting="submitting" :confirm-text="key('confirm')" :cancel-text="key('cancel')" @submit="onDialogSubmit" />
+  </d2-container>
+</template>
+<script>
+import { useTableColumns } from '@/composables/useTableColumns'
+import { useTableButtons } from '@/composables/useTableButtons'
+import { i18nMixin } from '@/composables/useI18n'
+import PageTable from '@/components/page-table'
+import PageDialogForm from '@/components/page-dialog-form'
+import { getWorkshopConfigList, createWorkshopConfig, editWorkshopConfig, deleteWorkshopConfig } from '@/api/scada-manage/workshop-config'
+export default {
+  name: 'scada-workshop-config', components: { PageTable, PageDialogForm }, mixins: [i18nMixin('page.scada_manage.workshop_manage.workshop_config')],
+  data () { return { loading: false, submitting: false, tableData: [], selectedRows: [], search: { building: '', floor: '', name: '' }, pagination: { current: 1, size: 10, total: 0 }, dialogVisible: false, dialogTitle: '', handleType: 'create', editId: '', formData: { code: '', name: '', building: '', floor: '' }, rules: { code: [{ required: true, message: this.key('enter_code'), trigger: 'blur' }], name: [{ required: true, message: this.key('enter_name'), trigger: 'blur' }], building: [{ required: true, message: this.key('enter_building'), trigger: 'blur' }], floor: [{ required: true, message: this.key('enter_floor'), trigger: 'blur' }] }, columns: [], toolbarButtons: [], rowButtons: [], formCols: [[{ type: 'input', prop: 'code', label: this.key('code'), placeholder: this.key('enter_code') }], [{ type: 'input', prop: 'name', label: this.key('name'), placeholder: this.key('enter_name') }], [{ type: 'input', prop: 'building', label: this.key('building'), placeholder: this.key('enter_building') }], [{ type: 'input', prop: 'floor', label: this.key('floor'), placeholder: this.key('enter_floor') }]] } },
+  created () { this.columns = useTableColumns([{ prop: 'building', label: this.key('building'), minWidth: 100 }, { prop: 'floor', label: this.key('floor'), minWidth: 100 }, { prop: 'code', label: this.key('code'), minWidth: 120 }, { prop: 'name', label: this.key('name'), minWidth: 140 }, { prop: 'created_time', label: this.key('created_time'), minWidth: 160 }, { prop: '_actions', label: this.key('operation'), width: 160, fixed: 'right' }]); const b = useTableButtons({ toolbar: [{ key: 'add', label: this.key('add'), icon: 'el-icon-plus', type: 'primary', auth: '/scada_manage/workshop_manage/workshop_config/add', onClick: this.openAdd }, { key: 'batchDelete', label: this.key('delete'), icon: 'el-icon-delete', auth: '/scada_manage/workshop_manage/workshop_config/del', needSelection: true, onClick: this.handleBatchDelete }], row: [{ key: 'edit', label: this.key('edit'), icon: 'el-icon-edit', auth: '/scada_manage/workshop_manage/workshop_config/set', onClick: this.openEdit }, { key: 'delete', label: this.key('delete'), icon: 'el-icon-delete', color: 'danger', auth: '/scada_manage/workshop_manage/workshop_config/del', onClick: this.handleDelete }] }, this.$permission); this.toolbarButtons = b.toolbarButtons; this.rowButtons = b.rowButtons; this.fetchData() },
+  methods: { async fetchData () { this.loading = true; try { const res = await getWorkshopConfigList({ ...this.search, page_no: this.pagination.current, page_size: this.pagination.size }); this.tableData = Array.isArray(res) ? res : (res.data || []); this.pagination.total = Array.isArray(res) ? res.length : (res.count || res.total || 0) } finally { this.loading = false } }, onSearch () { this.pagination.current = 1; this.fetchData() }, onReset () { this.search = { building: '', floor: '', name: '' }; this.onSearch() }, onPageChange (p) { this.pagination.current = p.current; this.pagination.size = p.size; this.fetchData() }, onSelect (rows) { this.selectedRows = rows }, openAdd () { this.handleType = 'create'; this.dialogTitle = this.key('add_title'); this.editId = ''; this.formData = { code: '', name: '', building: '', floor: '' }; this.dialogVisible = true }, openEdit (row) { this.handleType = 'edit'; this.dialogTitle = this.key('edit_title'); this.editId = row.id; this.formData = { code: row.code, name: row.name, building: row.building, floor: row.floor }; this.dialogVisible = true }, async onDialogSubmit () { this.submitting = true; try { if (this.handleType === 'create') await createWorkshopConfig(this.formData); else await editWorkshopConfig({ ...this.formData, id: this.editId }); this.$message.success(this.$t(this.key('operation_success'))); this.dialogVisible = false; this.fetchData() } finally { this.submitting = false } }, handleBatchDelete () { this.handleDelete(this.selectedRows) }, handleDelete (row) { const rows = Array.isArray(row) ? row : [row]; if (!rows.length) return this.$message.warning(this.$t(this.key('please_select'))); this.$confirm(this.$t(this.key('confirm_delete')), this.$t(this.key('tip')), { type: 'warning' }).then(async () => { await deleteWorkshopConfig({ id: rows.map(i => i.id) }); this.$message.success(this.$t(this.key('operation_success'))); this.fetchData() }).catch(() => {}) } }
+}
+</script>