<template>
  <d2-container>
    <template #header>
      <el-form :inline="true" size="mini">
        <el-form-item :label="$t(key('node_code'))"><el-input v-model="search.scada_data_capture_node_code" clearable style="width:220px" :placeholder="$t(key('enter_node_code'))" @keyup.enter.native="onSearch" /></el-form-item>
        <el-form-item :label="$t(key('device_code'))"><el-select v-model="search.device_code" clearable filterable style="width:220px" :placeholder="$t(key('select_device_code'))"><el-option v-for="item in deviceOptions" :key="item.value" :label="item.label" :value="item.value" /></el-select></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" :pagination="pagination" auto-height @page-change="onPageChange" @selection-change="onSelect" />
    <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 { getAll as getDeviceAll } from '@/api/equipment-management/equipment-registry'
import { getQueryWorkingSubclasses, getQueryCodes, getNodeMappingDeviceList, addNodeMappingDevice, editNodeMappingDevice, delNodeMappingDevice } from '@/api/scada-manage/edge-manager'
export default { name: 'scada-node-mapping-device-code', components: { PageTable, PageDialogForm }, mixins: [i18nMixin('page.scada_manage.basic_configuration.node_mapping_device_code')], data () { return { loading: false, submitting: false, tableData: [], selectedRows: [], workingSubclassOptions: [], nodeOptions: [], deviceOptions: [], search: { scada_data_capture_node_code: '', device_code: '' }, pagination: { current: 1, size: 10, total: 0 }, dialogVisible: false, dialogTitle: '', handleType: 'create', editId: '', formData: { workingsubclass_code: '', node_data_code: '', device_code: '', note: '' }, rules: { workingsubclass_code: [{ required: true, message: this.key('select_process_unit'), trigger: 'change' }], node_data_code: [{ required: true, message: this.key('select_data_node'), trigger: 'change' }], device_code: [{ required: true, message: this.key('select_device_code'), trigger: 'change' }] }, columns: [], toolbarButtons: [], formCols: [] } }, created () { this.columns = useTableColumns([{ prop: 'scada_data_capture_node_code', label: this.key('node_code'), minWidth: 160 }, { prop: 'node_data_name', label: this.key('node_name'), minWidth: 160 }, { prop: 'device_name', label: this.key('mapping_device'), minWidth: 160 }, { prop: 'note', label: this.key('note'), minWidth: 160 }, { prop: 'create_time', label: this.key('create_time'), minWidth: 160 }]); const b = useTableButtons({ toolbar: [{ key: 'add', label: this.key('add_mapping'), icon: 'el-icon-plus', type: 'primary', auth: '/scada_manage/basic_configuration/node_mapping_device_code/add', onClick: this.openAdd }, { key: 'delete', label: this.key('delete'), icon: 'el-icon-delete', auth: '/scada_manage/basic_configuration/node_mapping_device_code/delete', needSelection: true, onClick: this.handleBatchDelete }] }, this.$permission); this.toolbarButtons = b.toolbarButtons; this.loadOptions(); this.fetchData() }, methods: { makeFormCols () { return [[{ type: 'select', prop: 'workingsubclass_code', label: this.key('process_unit'), placeholder: this.key('select_process_unit'), options: this.workingSubclassOptions, disabled: this.handleType === 'edit', onChange: this.onWorkingSubclassChange }], [{ type: 'select', prop: 'node_data_code', label: this.key('data_node'), placeholder: this.key('select_data_node'), options: this.nodeOptions, disabled: this.handleType === 'edit' }], [{ type: 'select', prop: 'device_code', label: this.key('device_code'), placeholder: this.key('select_device_code'), options: this.deviceOptions, disabled: this.handleType === 'edit' }], [{ type: 'input', prop: 'note', label: this.key('note'), placeholder: this.key('enter_note'), inputType: 'textarea', autosize: { minRows: 2, maxRows: 4 } }]] }, async loadOptions () { try { const [workings, devices] = await Promise.all([getQueryWorkingSubclasses(), getDeviceAll()]); this.workingSubclassOptions = Object.keys(workings || {}).map(code => ({ label: workings[code], value: code })); const deviceList = Array.isArray(devices) ? devices : (devices.data || []); this.deviceOptions = deviceList.map(item => ({ label: item.name || item.device_name || item.code, value: item.code || item.device_code })); this.formCols = this.makeFormCols() } catch (e) { this.formCols = this.makeFormCols() } }, async onWorkingSubclassChange (val) { this.formData.node_data_code = ''; try { const res = await getQueryCodes(val, this.formData.device_code); const list = Array.isArray(res) ? res : (res.data || []); this.nodeOptions = list.map(item => ({ label: item.name, value: item.code })); this.formCols = this.makeFormCols() } catch (e) {} }, async fetchData () { this.loading = true; try { const res = await getNodeMappingDeviceList({ ...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.total || res.count || 0) } finally { this.loading = false } }, onSearch () { this.pagination.current = 1; this.fetchData() }, onReset () { this.search = { scada_data_capture_node_code: '', device_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_mapping'); this.editId = ''; this.nodeOptions = []; this.formData = { workingsubclass_code: '', node_data_code: '', device_code: '', note: '' }; this.formCols = this.makeFormCols(); this.dialogVisible = true }, async onDialogSubmit () { this.submitting = true; try { const payload = { ...this.formData, action: this.handleType === 'create' ? 'add_node_mapping_device' : 'update_node_mapping_device' }; if (this.handleType === 'create') await addNodeMappingDevice(payload); else await editNodeMappingDevice({ ...payload, id: this.editId }); this.$message.success(this.$t(this.key('operation_success'))); this.dialogVisible = false; this.fetchData() } finally { this.submitting = false } }, handleBatchDelete () { const rows = this.selectedRows; 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 delNodeMappingDevice({ action: 'delete_node_mapping_device', id: rows.map(i => i.id) }); this.$message.success(this.$t(this.key('operation_success'))); this.fetchData() }).catch(() => {}) } } }
</script>
