|
|
@@ -0,0 +1,166 @@
|
|
|
+<template>
|
|
|
+<a-card title="第三方平台" >
|
|
|
+
|
|
|
+ <table-pro
|
|
|
+ :service="ThirdDeviceController.page"
|
|
|
+ :columns="columns"
|
|
|
+ :serviceParams="queryParams"
|
|
|
+ ref="tableProDom"
|
|
|
+ @add="openModal('add', {})"
|
|
|
+ >
|
|
|
+ <template #render="{column, record}" >
|
|
|
+ <template v-if="column.key === 'action'" >
|
|
|
+ <a-space>
|
|
|
+ <a @click="openModal('update', record)" >编辑</a>
|
|
|
+ <a-popconfirm
|
|
|
+ title="确定要删除这个设备吗?"
|
|
|
+ ok-text="Yes"
|
|
|
+ cancel-text="No"
|
|
|
+ @confirm="delDevice(record.deviceCode)"
|
|
|
+ >
|
|
|
+ <a>删除</a>
|
|
|
+ </a-popconfirm>
|
|
|
+ </a-space>
|
|
|
+ </template>
|
|
|
+ </template>
|
|
|
+ </table-pro>
|
|
|
+</a-card>
|
|
|
+
|
|
|
+<modal-pro
|
|
|
+ title="第三方设备"
|
|
|
+ :open="visible"
|
|
|
+ @cancel="visible = false"
|
|
|
+ @ok="ok"
|
|
|
+ >
|
|
|
+ <a-form :labelCol="{span: 6}" :wrapperCol="{span: 14}" >
|
|
|
+ <a-form-item label="设备编码" v-bind="validateInfos.deviceCode" >
|
|
|
+ <a-input :disabled="opraState === 'update'" allowClear v-model:value="state.deviceCode" />
|
|
|
+ </a-form-item>
|
|
|
+ <a-form-item label="设备名称" v-bind="validateInfos.deviceLabel" >
|
|
|
+ <a-input allowClear v-model:value="state.deviceLabel" />
|
|
|
+ </a-form-item>
|
|
|
+ <a-form-item label="设备类型" >
|
|
|
+ <a-input allowClear v-model:value="state.deviceType" />
|
|
|
+ <!-- <a-select allowClear v-model:value="state.deviceType" >
|
|
|
+ <a-select-option
|
|
|
+ v-for="item in []"
|
|
|
+ :key="item.id"
|
|
|
+ :value="item.id"
|
|
|
+ >
|
|
|
+ {{item.modelLabel}}
|
|
|
+ </a-select-option>
|
|
|
+ </a-select> -->
|
|
|
+ </a-form-item>
|
|
|
+ <a-form-item label="设备描述" v-bind="validateInfos.deviceDesc" >
|
|
|
+ <a-input allowClear v-model:value="state.deviceDesc" />
|
|
|
+ </a-form-item>
|
|
|
+ <a-form-item label="设备地址" >
|
|
|
+ <a-input allowClear v-model:value="state.deviceAddr" />
|
|
|
+ </a-form-item>
|
|
|
+ </a-form>
|
|
|
+</modal-pro>
|
|
|
+</template>
|
|
|
+<script lang='ts' setup >
|
|
|
+import { ThirdDeviceController } from '@/controller'
|
|
|
+import { reactive, ref } from 'vue'
|
|
|
+import { Form, message } from 'ant-design-vue'
|
|
|
+
|
|
|
+const columns = [
|
|
|
+ {
|
|
|
+ title: '设备编码',
|
|
|
+ dataIndex: 'deviceCode',
|
|
|
+ key: 'deviceCode'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '设备名称',
|
|
|
+ dataIndex: 'deviceLabel',
|
|
|
+ key: 'deviceLabel'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '设备类型',
|
|
|
+ dataIndex: 'deviceType',
|
|
|
+ key: 'deviceType'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '设备状态',
|
|
|
+ dataIndex: 'deviceStatus',
|
|
|
+ key: 'deviceStatus'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '设备状态描述',
|
|
|
+ dataIndex: 'deviceStatusDesc',
|
|
|
+ key: 'deviceStatusDesc'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '设备描述',
|
|
|
+ dataIndex: 'deviceDesc',
|
|
|
+ key: 'deviceDesc'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '设备地址',
|
|
|
+ dataIndex: 'deviceAddr',
|
|
|
+ key: 'deviceAddr'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '设备数据',
|
|
|
+ dataIndex: 'deviceData',
|
|
|
+ key: 'deviceData'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '操作',
|
|
|
+ dataIndex: 'action',
|
|
|
+ key: 'action'
|
|
|
+ }
|
|
|
+]
|
|
|
+
|
|
|
+const useForm = Form.useForm
|
|
|
+
|
|
|
+const queryParams = reactive({
|
|
|
+ deviceCode: null,
|
|
|
+ deviceLabel: null,
|
|
|
+ deviceType: null,
|
|
|
+ deviceStatus: null
|
|
|
+})
|
|
|
+
|
|
|
+const tableProDom = ref()
|
|
|
+
|
|
|
+const visible = ref(false)
|
|
|
+
|
|
|
+const opraState = ref('add')
|
|
|
+
|
|
|
+const state = reactive({
|
|
|
+ deviceCode: null, // 设备编码 唯一标志 必须填写
|
|
|
+ deviceLabel: null, // 设备名称 必须填写
|
|
|
+ deviceType: null, // 设备类型
|
|
|
+ deviceDesc: null, // 设备描述
|
|
|
+ deviceAddr: null // 设备地址
|
|
|
+})
|
|
|
+
|
|
|
+const { resetFields, validate, validateInfos } = useForm(state, reactive({
|
|
|
+ deviceCode: [{ required: true, message: '请填写设备编码' }],
|
|
|
+ deviceLabel: [{ required: true, message: '请填写设备名称' }]
|
|
|
+}))
|
|
|
+
|
|
|
+const ok = () => {
|
|
|
+ validate().then(async () => {
|
|
|
+ opraState.value === 'add' ? await ThirdDeviceController.add(state) : await ThirdDeviceController.update(state)
|
|
|
+ tableProDom.value.reload()
|
|
|
+ visible.value = false
|
|
|
+ })
|
|
|
+}
|
|
|
+
|
|
|
+const openModal = (type: 'add' | 'update', record: any) => {
|
|
|
+ visible.value = true
|
|
|
+ opraState.value = type
|
|
|
+ if (type === 'update') resetFields(record)
|
|
|
+ else resetFields({})
|
|
|
+}
|
|
|
+
|
|
|
+const delDevice = async (deviceCode: string) => {
|
|
|
+ await ThirdDeviceController.del(deviceCode)
|
|
|
+ tableProDom.value.reload()
|
|
|
+}
|
|
|
+
|
|
|
+</script>
|
|
|
+<style lang='less' scoped >
|
|
|
+</style>
|