<template>
  <d2-container>
    <template #header>
      <el-form :inline="true" size="mini"><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 :label="$t(key('code'))"><el-input v-model="search.code" clearable style="width:180px" :placeholder="$t(key('enter_code'))" @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"><template #col-category="{ row }"><el-tag size="mini">{{ categoryText(row.category) }}</el-tag></template><template #col-workshop="{ row }"><span>{{ row.workshop && row.workshop.name }}</span></template></page-table>
    <page-dialog-form ref="dialogForm" :visible.sync="dialogVisible" :title="dialogTitle" width="560px" :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 { getWorkshopConfigAll } from '@/api/scada-manage/workshop-config'
import { getWorkshopPointList, createWorkshopPoint, editWorkshopPoint, deleteWorkshopPoint } from '@/api/scada-manage/workshop-point'
export default { name: 'scada-workshop-point', components: { PageTable, PageDialogForm }, mixins: [i18nMixin('page.scada_manage.workshop_manage.workshop_point')], data () { return { loading: false, submitting: false, tableData: [], selectedRows: [], workshopOptions: [], search: { name: '', code: '' }, pagination: { current: 1, size: 10, total: 0 }, dialogVisible: false, dialogTitle: '', handleType: 'create', editId: '', formData: { workshop_config_id: '', code: '', name: '', category: 0 }, rules: { workshop_config_id: [{ required: true, message: this.key('select_workshop'), trigger: 'change' }], code: [{ required: true, message: this.key('enter_code'), trigger: 'blur' }], name: [{ required: true, message: this.key('enter_name'), trigger: 'blur' }] }, columns: [], toolbarButtons: [], rowButtons: [], formCols: [] } }, created () { this.columns = useTableColumns([{ prop: 'workshop', label: this.key('workshop_name'), minWidth: 140, slot: 'workshop' }, { prop: 'code', label: this.key('code'), minWidth: 120 }, { prop: 'name', label: this.key('name'), minWidth: 140 }, { prop: 'category', label: this.key('category'), width: 120, slot: 'category' }, { 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_point/add', onClick: this.openAdd }, { key: 'batchDelete', label: this.key('delete'), icon: 'el-icon-delete', auth: '/scada_manage/workshop_manage/workshop_point/del', needSelection: true, onClick: this.handleBatchDelete }], row: [{ key: 'edit', label: this.key('edit'), icon: 'el-icon-edit', auth: '/scada_manage/workshop_manage/workshop_point/set', onClick: this.openEdit }, { key: 'delete', label: this.key('delete'), icon: 'el-icon-delete', color: 'danger', auth: '/scada_manage/workshop_manage/workshop_point/del', onClick: this.handleDelete }] }, this.$permission); this.toolbarButtons = b.toolbarButtons; this.rowButtons = b.rowButtons; this.loadWorkshops(); this.fetchData() }, methods: { categoryText (val) { return ({ 0: this.$t(this.key('workshop_area')), 1: this.$t(this.key('single_device')), 2: this.$t(this.key('offline_area')) })[val] || val }, makeFormCols () { return [[{ type: 'select', prop: 'workshop_config_id', label: this.key('workshop_name'), placeholder: this.key('select_workshop'), options: this.workshopOptions }], [{ 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: 'select', prop: 'category', label: this.key('category'), placeholder: this.key('select_category'), options: [{ label: this.$t(this.key('workshop_area')), value: 0 }, { label: this.$t(this.key('single_device')), value: 1 }, { label: this.$t(this.key('offline_area')), value: 2 }] }]] }, async loadWorkshops () { try { const res = await getWorkshopConfigAll(); const list = Array.isArray(res) ? res : (res.data || []); this.workshopOptions = list.map(i => ({ label: i.name, value: i.id })); this.formCols = this.makeFormCols() } catch (e) { this.formCols = this.makeFormCols() } }, async fetchData () { this.loading = true; try { const res = await getWorkshopPointList({ ...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 = { name: '', code: '' }; 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 = { workshop_config_id: '', code: '', name: '', category: 0 }; this.formCols = this.makeFormCols(); this.dialogVisible = true }, openEdit (row) { this.handleType = 'edit'; this.dialogTitle = this.key('edit_title'); this.editId = row.id; this.formData = { workshop_config_id: row.workshop_config_id || (row.workshop && row.workshop.id), code: row.code, name: row.name, category: row.category }; this.formCols = this.makeFormCols(); this.dialogVisible = true }, async onDialogSubmit () { this.submitting = true; try { if (this.handleType === 'create') await createWorkshopPoint(this.formData); else await editWorkshopPoint({ ...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 deleteWorkshopPoint({ id: rows.map(i => i.id) }); this.$message.success(this.$t(this.key('operation_success'))); this.fetchData() }).catch(() => {}) } } }
</script>
