<template>
  <d2-container>
    <page-table :columns="columns" :data="tableData" :loading="loading" :toolbar-buttons="toolbarButtons" :row-buttons="rowButtons" auto-height>
      <template #col-status="{ row }"><el-tag :type="row.status === 'online' ? 'success' : 'info'">{{ row.status || 'offline' }}</el-tag></template>
      <template #col-updated="{ row }"><el-tag v-if="row.updated === 't'" type="warning">{{ $t(key('changed')) }}</el-tag><span v-else>-</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="confirmText" :cancel-text="key('cancel')" @submit="onDialogSubmit" />
    <el-drawer :visible.sync="drawerVisible" size="80%" :title="drawerTitle"><el-alert :title="$t(key('device_config_tip'))" type="info" :closable="false" /><pre class="server-json">{{ selectedServer }}</pre></el-drawer>
  </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 { queryServers, addServer, updateServer, removeServer, verifyServer, modifyServer, setServerExec } from '@/api/scada-manage/edge-manager'
const genRanHex = size => [...Array(size)].map(() => Math.floor(Math.random() * 16).toString(16).toUpperCase()).join('')
export default { name: 'scada-edgeserverconfigure', components: { PageTable, PageDialogForm }, mixins: [i18nMixin('page.scada_manage.basic_configuration.edgeserverconfigure')], data () { return { loading: false, submitting: false, tableData: [], dialogVisible: false, drawerVisible: false, drawerTitle: '', selectedServer: {}, handleType: 'create', testedSettings: null, confirmText: this.key('test'), dialogTitle: '', formData: { deviceName: '', uniqueID: '', url: '', port: 522, address: '' }, rules: { deviceName: [{ required: true, message: this.key('enter_service_name'), trigger: 'blur' }], url: [{ required: true, message: this.key('enter_url'), trigger: 'blur' }], port: [{ required: true, message: this.key('enter_port'), trigger: 'blur' }] }, columns: [], toolbarButtons: [], rowButtons: [], formCols: [] } }, created () { this.columns = useTableColumns([{ prop: 'id', label: this.key('sort'), width: 80 }, { prop: 'name', label: this.key('name'), minWidth: 140 }, { prop: 'url', label: 'URL', minWidth: 160 }, { prop: 'port', label: this.key('port'), width: 100 }, { prop: 'address', label: this.key('address'), minWidth: 200 }, { prop: 'status', label: this.key('status'), width: 100, slot: 'status' }, { prop: 'updated', label: this.key('updated'), width: 110, slot: 'updated' }, { prop: 'note', label: this.key('note'), minWidth: 140 }, { prop: '_actions', label: this.key('operation'), width: 260, fixed: 'right' }], { selectionWidth: 0 }); const b = useTableButtons({ toolbar: [{ key: 'add', label: this.key('add_title'), icon: 'el-icon-plus', type: 'primary', onClick: this.openAdd }], row: [{ key: 'config', label: this.key('device_configuration'), icon: 'el-icon-setting', onClick: this.openDeviceConfig }, { key: 'restart', label: this.key('restart_service'), icon: 'el-icon-refresh', onClick: this.restartServer }, { key: 'edit', label: this.key('edit'), icon: 'el-icon-edit', onClick: this.openEdit }, { key: 'delete', label: this.key('delete'), icon: 'el-icon-delete', color: 'danger', onClick: this.handleDelete }] }, this.$permission); this.toolbarButtons = b.toolbarButtons; this.rowButtons = b.rowButtons; this.formCols = this.makeFormCols(); this.fetchData() }, methods: { makeFormCols () { return [[{ type: 'input', prop: 'deviceName', label: this.key('service_name'), placeholder: this.key('enter_service_name'), disabled: this.handleType === 'edit' }], [{ type: 'input', prop: 'uniqueID', label: this.key('unique_identifier'), placeholder: this.key('unique_identifier_tip'), disabled: true }], [{ type: 'input', prop: 'url', label: 'URL', placeholder: this.key('enter_url'), disabled: this.handleType === 'edit' }], [{ type: 'input', prop: 'port', label: this.key('port'), placeholder: this.key('enter_port'), disabled: this.handleType === 'edit' }], [{ type: 'input', prop: 'address', label: this.key('address'), placeholder: this.key('enter_address') }]] }, async fetchData () { this.loading = true; try { const res = await queryServers(); this.tableData = Array.isArray(res) ? res : (res.data || []) } finally { this.loading = false } }, openAdd () { this.handleType = 'create'; this.testedSettings = null; this.confirmText = this.key('test'); this.dialogTitle = this.key('add_title'); this.formData = { deviceName: 'Edge:' + genRanHex(12), uniqueID: '', url: '', port: 522, address: '' }; this.formCols = this.makeFormCols(); this.dialogVisible = true }, openEdit (row) { this.handleType = 'edit'; this.confirmText = this.key('confirm'); this.dialogTitle = this.key('edit_title'); this.formData = { id: row.id, deviceName: row.name, uniqueID: row.uniqueID || '', url: row.url, port: row.port, address: row.address }; this.formCols = this.makeFormCols(); this.dialogVisible = true }, async onDialogSubmit () { this.submitting = true; try { const base = `http://${this.formData.url}:${this.formData.port}`; if (this.handleType === 'create' && !this.testedSettings) { this.testedSettings = await verifyServer(base); const unique = this.testedSettings && this.testedSettings.Content && this.testedSettings.Content.ServerInfoConfig && this.testedSettings.Content.ServerInfoConfig.UniqueId; this.formData.uniqueID = unique || ''; this.confirmText = this.key('add'); this.$message.success(this.$t(this.key('test_success'))); return } if (this.handleType === 'create') { if (this.testedSettings && this.testedSettings.Content && this.testedSettings.Content.DataPushConfig) { this.testedSettings.Content.DataPushConfig.UseDataPush = true; this.testedSettings.Content.DataPushConfig.CaptureURL = this.formData.address; await modifyServer(base, { data: this.testedSettings.Content }) } await addServer({ action: 'add_server', name: this.formData.deviceName, url: this.formData.url, port: this.formData.port, address: this.formData.address }) } else { await updateServer({ action: 'update_server', id: this.formData.id, address: this.formData.address }) } this.$message.success(this.$t(this.key('operation_success'))); this.dialogVisible = false; this.fetchData() } finally { this.submitting = false } }, openDeviceConfig (row) { this.selectedServer = row; this.drawerTitle = `${row.name} ${row.url}:${row.port}`; this.drawerVisible = true }, restartServer (row) { this.$confirm(this.$t(this.key('confirm_restart')), this.$t(this.key('tip')), { type: 'warning' }).then(async () => { await setServerExec({ action: 'exec', server_id: row.id, command: 'server_restart' }); this.$message.success(this.$t(this.key('request_success'))); this.fetchData() }).catch(() => {}) }, handleDelete (row) { this.$confirm(this.$t(this.key('confirm_delete')), this.$t(this.key('tip')), { type: 'warning' }).then(async () => { await removeServer({ action: 'remove_server', id: row.id }); this.$message.success(this.$t(this.key('operation_success'))); this.fetchData() }).catch(() => {}) } } }
</script><style scoped>.server-json{white-space:pre-wrap;padding:16px}</style>
