feat(front): 新增设备及设备配置页面【待完善新增、修改】

+import {defHttp} from "/@/utils/http/axios";
+import {
+  DeviceModel,
+  DeviceProfileModel,
+  DeviceProfileQueryParam,
+  DeviceQueryParam
+} from "/@/api/device/model/deviceModel";
+
+enum DeviceManagerApi {
+  /**
+   * 设备URL
+   */
+  DEVICE_URL = "/device",
+  /**
+   * 设备配置URL
+   */
+  DEVICE_PROFILE_URL = "/deviceProfile"
+}
+
+export const devicePage = (params: DeviceQueryParam) =>{
+  return defHttp.get<DeviceModel>({
+    url: DeviceManagerApi.DEVICE_URL,
+    params
+  });
+}
+
+/**
+ * 分页查询设备配置页面
+ * @param params pageSize page name
+ */
+export const deviceProfilePage = (params: DeviceProfileQueryParam) => {
+  return defHttp.get<DeviceProfileModel>({
+    url: DeviceManagerApi.DEVICE_PROFILE_URL,
+    params
+  });
+}
+/**
+ * 删除设备配置
+ * @param ids 删除的ids
+ */
+export const deleteDeviceProfile = (ids: string[]) => {
+  return defHttp.delete({
+    url: DeviceManagerApi.DEVICE_PROFILE_URL,
+    data:{
+      ids:ids
+    }
+  })
+}
+
+/**
+ * 删除设备
+ * @param ids 删除的ids
+ */
+export const deleteDevice = (ids: string[]) => {
+  return defHttp.delete({
+    url: DeviceManagerApi.DEVICE_URL,
+    data:{
+      ids:ids
+    }
+  })
+}

+import {BasicPageParams} from "/@/api/model/baseModel";
+export enum DeviceState {
+  INACTIVE='INACTIVE',
+  ONLINE='ONLINE',
+  OFFLINE='OFFLINE'
+}
+export enum DeviceTypeEnum{
+  GATEWAY='GATEWAY',
+  DIRECT_CONNECTION='DIRECT_CONNECTION',
+  SENSOR='SENSOR'
+}
+export type DeviceProfileQueryParam = BasicPageParams & DeviceProfileParam
+export type DeviceQueryParam = BasicPageParams & DeviceParam
+export type DeviceParam = {
+  name?:string,
+  deviceProfileId?:string
+}
+export type DeviceProfileParam = {
+  name?: string
+}
+
+export interface DeviceModel{
+  id:string,
+  name:string,
+  deviceInfo:any,
+  activeTime:string,
+  deviceState:DeviceState,
+  profileId:string,
+  label:string,
+  lastConnectTime:string,
+  deviceType:DeviceTypeEnum
+}
+
+export interface DeviceProfileModel{
+  id:string,
+  name:string,
+  transportType:string,
+  createTime:string,
+  description:string
+}

+<template>
+  <BasicDrawer
+    v-bind="$attrs"
+    @register="registerDrawer"
+    showFooter
+    :title="getTitle"
+    width="500px"
+    @ok="handleSubmit"
+  >
+    <BasicForm @register="registerForm"/>
+  </BasicDrawer>
+</template>
+<script lang="ts">
+  import { defineComponent, ref, computed, unref } from 'vue';
+  import { BasicForm, useForm } from '/@/components/Form';
+  import { formSchema } from './config.data';
+  import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
+  import {saveOrEditMessageConfig} from "/@/api/message/config";
+  import {useMessage} from "/@/hooks/web/useMessage";
+
+  export default defineComponent({
+    name: 'ConfigDrawer',
+    components: { BasicDrawer, BasicForm },
+    emits: ['success', 'register'],
+    setup(_, { emit }) {
+      const isUpdate = ref(true);
+
+      const [registerForm, {  validate,setFieldsValue,resetFields }] = useForm({
+        labelWidth: 120,
+        schemas: formSchema,
+        showActionButtonGroup: false,
+      });
+
+      const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => {
+        await resetFields();
+        setDrawerProps({ confirmLoading: false });
+        isUpdate.value = !!data?.isUpdate;
+        if (unref(isUpdate)) {
+          const config = data.record.config;
+          for (const key in config){
+            Reflect.set(data.record, key+'', config[key]);
+          }
+          await setFieldsValue({
+            ...data.record,
+          });
+        }
+      });
+
+      const getTitle = computed(() => (!unref(isUpdate) ? '新增消息配置' : '编辑消息配置'));
+
+      async function handleSubmit() {
+        try {
+          const values = await validate();
+          const { createMessage } = useMessage();
+          setDrawerProps({ confirmLoading: true });
+          let config={};
+          if(values.messageType === 'PHONE_MESSAGE'){
+            config ={
+              "accessKeyId":values.accessKeyId,
+              "accessKeySecret":values.accessKeySecret,
+            }
+          }else if(values.messageType === 'EMAIL_MESSAGE'){
+            config ={
+              "host":values.host,
+              "port":values.port,
+              "username":values.username,
+              "password":values.password,
+            }
+          }
+          Reflect.set(values, 'config', config);
+          let saveMessage = "添加成功";
+          let updateMessage = "修改成功";
+          await saveOrEditMessageConfig(values, unref(isUpdate));
+          closeDrawer();
+          emit('success');
+          createMessage.success(unref(isUpdate)?updateMessage:saveMessage);
+        } finally {
+          setDrawerProps({ confirmLoading: false });
+        }
+      }
+
+      return {
+        registerDrawer,
+        registerForm,
+        getTitle,
+        handleSubmit,
+      };
+    },
+  });
+</script>

+import { BasicColumn } from '/@/components/Table';
+import { FormSchema } from '/@/components/Table';
+import {findDictItemByCode} from "/@/api/system/dict";
+import {MessageEnum} from "/@/enums/messageEnum";
+import {DeviceTypeEnum,DeviceState} from "/@/api/device/model/deviceModel";
+export const columns: BasicColumn[] = [
+  {
+    title: '设备名称',
+    dataIndex: 'name',
+    width: 200,
+  },
+  {
+    title: '设备类型',
+    dataIndex: 'deviceType',
+    width: 200,
+    slots:{customRender:'deviceType'},
+  },
+  {
+    title: '设备配置',
+    dataIndex: 'deviceProfile.name',
+    width: 180,
+    slots: { customRender: 'deviceProfile' },
+  },
+  {
+    title: '标签',
+    dataIndex: 'label',
+    width: 180
+  },
+  {
+    title: '配置信息',
+    dataIndex: 'deviceInfo',
+    width: 180,
+    slots: { customRender: 'config' },
+  },
+  {
+    title: '状态',
+    dataIndex: 'deviceState',
+    width: 120,
+    slots: { customRender: 'deviceState' },
+  },
+
+  {
+    title: '最后连接时间',
+    dataIndex: 'lastConnectTime',
+    width: 180,
+  },
+  {
+    title: '创建时间',
+    dataIndex: 'createTime',
+    width: 180,
+  },
+];
+
+export const searchFormSchema: FormSchema[] = [
+  {
+    field: 'deviceType',
+    label: '设备类型',
+    component: 'Select',
+    componentProps: {
+      options: [
+        { label: '网关设备', value: DeviceTypeEnum.GATEWAY },
+        { label: '直连设备', value: DeviceTypeEnum.DIRECT_CONNECTION },
+        { label: '网关子设备', value: DeviceTypeEnum.SENSOR },
+      ],
+    },
+    colProps: { span: 4 },
+  },
+  {
+    field: 'deviceState',
+    label: '设备状态',
+    component: 'Select',
+    componentProps: {
+      options: [
+        { label: '待激活', value: DeviceState.INACTIVE },
+        { label: '在线', value: DeviceState.ONLINE },
+        { label: '离线', value: DeviceState.OFFLINE },
+      ],
+    },
+    colProps: { span: 4 },
+  },
+  {
+    field: 'name',
+    label: '设备名称',
+    component: 'Input',
+    colProps: { span: 8 },
+  },
+];
+
+
+export const isMessage = (type:string)=>{
+  return type===MessageEnum.IS_SMS;
+}
+export const isEmail = (type:string)=>{
+  return type===MessageEnum.IS_EMAIL;
+}
+
+export const formSchema: FormSchema[] = [
+  {
+    field: 'configName',
+    label: '配置名称',
+    required: true,
+    component:'Input'
+  },
+  {
+    field: 'messageType',
+    label: '消息类型',
+    required: true,
+    component: 'ApiSelect',
+    componentProps: {
+      api:findDictItemByCode,
+      params:{
+        dictCode:"message_type"
+      },
+      labelField:'itemText',
+      valueField:'itemValue',
+    },
+  },
+  {
+    field: 'platformType',
+    label: '平台类型',
+    required: true,
+    component: 'ApiSelect',
+    componentProps: {
+      api:findDictItemByCode,
+      params:{
+        dictCode:"platform_type"
+      },
+      labelField:'itemText',
+      valueField:'itemValue',
+    },
+    ifShow:({values}) => isMessage(Reflect.get(values,'messageType')),
+  },
+  {
+    field: 'accessKeyId',
+    label: 'accessKeyId',
+    required: true,
+    component:'Input',
+    ifShow:({values}) => isMessage(Reflect.get(values,'messageType')),
+  },
+  {
+    field: 'accessKeySecret',
+    label: 'accessKeySecret',
+    required: true,
+    component:'Input',
+    ifShow:({values}) => isMessage(Reflect.get(values,'messageType')),
+  },
+  {
+    field: 'host',
+    label: '服务器地址',
+    defaultValue:'smtp.163.com',
+    required: true,
+    component:'Input',
+    ifShow:({values}) => isEmail(Reflect.get(values,'messageType')),
+  },
+  {
+    field: 'port',
+    label: '端口',
+    defaultValue: 25,
+    required: true,
+    component:'InputNumber',
+    ifShow:({values}) => isEmail(Reflect.get(values,'messageType')),
+  },
+  {
+    field: 'username',
+    label: '用户名',
+    required: true,
+    component:'Input',
+    ifShow:({values}) => isEmail(Reflect.get(values,'messageType')),
+  },
+  {
+    field: 'password',
+    label: '密码',
+    required: true,
+    component:'InputPassword',
+    ifShow:({values}) => isEmail(Reflect.get(values,'messageType')),
+  },
+  {
+    field: 'config',
+    label: '消息配置',
+    component:'Input',
+    show:false,
+  },
+  {
+    field: 'id',
+    label: '主键',
+    component:'Input',
+    show:false,
+  },
+  {
+    field: 'status',
+    label: '状态',
+    component: 'RadioButtonGroup',
+    defaultValue: 0,
+    componentProps: {
+      options: [
+        { label: '启用', value: 1 },
+        { label: '停用', value: 0 },
+      ],
+    },
+  },
+  {
+    label: '备注',
+    field: 'remark',
+    component: 'InputTextArea',
+  }
+];

+<template>
+  <div>
+    <BasicTable @register="registerTable">
+      <template #toolbar>
+        <a-button type="primary" @click="handleCreate"> 新增设备 </a-button>
+      </template>
+      <template #config="{record}">
+        <a-button type="link" class="ml-2" @click="showData(record)"> 查看配置 </a-button>
+      </template>
+      <template #deviceProfile="{record}">
+        <a-button type="link" class="ml-2" @click="goDeviceProfile"> {{record.deviceProfile.name}} </a-button>
+      </template>
+      <template #deviceType = "{record}">
+        <Tag color="success" class="ml-2">
+          {{record.deviceType==DeviceTypeEnum.GATEWAY ?'网关设备':
+          record.deviceType==DeviceTypeEnum.DIRECT_CONNECTION  ?'直连设备':'网关子设备'}}
+        </Tag>
+      </template>
+      <template #deviceState = "{record}">
+        <Tag :color="record.deviceState==DeviceState.INACTIVE?'warning':record.deviceState==DeviceState.ONLINE?'success':'error'" class="ml-2">
+          {{record.deviceState==DeviceState.INACTIVE ?'待激活':
+          record.deviceState==DeviceState.ONLINE ?'在线':'离线'}}
+        </Tag>
+      </template>
+      <template #action="{ record }">
+        <TableAction
+          :actions="[
+            {
+              label:'编辑',
+              icon: 'clarity:note-edit-line',
+              onClick: handleEdit.bind(null, record),
+            },
+            {
+              label:'删除',
+              icon: 'ant-design:delete-outlined',
+              color: 'error',
+              popConfirm: {
+                title: '是否确认删除',
+                confirm: handleDelete.bind(null, record),
+              }
+            },
+          ]"
+        />
+      </template>
+    </BasicTable>
+    <ConfigDrawer @register="registerDrawer" @success="handleSuccess" />
+  </div>
+</template>
+<script lang="ts">
+import { defineComponent,h} from 'vue';
+import {DeviceState, DeviceTypeEnum} from "/@/api/device/model/deviceModel";
+import { BasicTable, useTable, TableAction } from '/@/components/Table';
+import { useDrawer } from '/@/components/Drawer';
+import ConfigDrawer from './DeviceDrawer.vue';
+import { columns, searchFormSchema } from './config.data';
+import {Modal, Tag} from 'ant-design-vue';
+import { CodeEditor,JsonPreview } from '/@/components/CodeEditor';
+import {useMessage} from "/@/hooks/web/useMessage";
+import {deleteDevice, devicePage} from "/@/api/device/deviceManager";
+import {PageEnum} from "/@/enums/pageEnum";
+import {useGo} from "/@/hooks/web/usePage";
+
+export default defineComponent({
+  name: 'DeviceManagement',
+  components: { BasicTable, ConfigDrawer, TableAction ,CodeEditor,Tag},
+  setup() {
+    const [registerDrawer, { openDrawer }] = useDrawer();
+    const {createMessage} = useMessage();
+    const go = useGo();
+    const [registerTable, { reload }] = useTable({
+      title: '设备列表',
+      api: devicePage,
+      columns,
+      formConfig: {
+        labelWidth: 120,
+        schemas: searchFormSchema,
+      },
+      useSearchForm: true,
+      showTableSetting: true,
+      bordered: true,
+      showIndexColumn: false,
+      actionColumn: {
+        width: 180,
+        title: '操作',
+        dataIndex: 'action',
+        slots: { customRender: 'action' },
+        fixed: undefined,
+      },
+    });
+
+    function handleCreate() {
+      openDrawer(true, {
+        isUpdate: false,
+      });
+    }
+
+    function handleEdit(record: Recordable) {
+      openDrawer(true, {
+        record,
+        isUpdate: true,
+      });
+    }
+
+    function handleDelete(record: Recordable) {
+      let ids = [record.id];
+      deleteDevice(ids).then(()=>{
+        createMessage.success("删除设备成功")
+        handleSuccess()
+      });
+    }
+
+    function handleSuccess() {
+      reload();
+    }
+    function showData(record: Recordable){
+      Modal.info({
+        title: '当前配置',
+        width:480,
+        content: h(JsonPreview, { data: JSON.parse(JSON.stringify(record.deviceInfo)) }),
+      });
+    }
+    function goDeviceProfile(){
+      go(PageEnum.DEVICE_PROFILE)
+    }
+    return {
+      registerTable,
+      registerDrawer,
+      showData,
+      handleCreate,
+      handleEdit,
+      handleDelete,
+      handleSuccess,
+      goDeviceProfile,
+      DeviceTypeEnum,
+      DeviceState
+    };
+  },
+});
+</script>

+<template>
+  <BasicDrawer
+    v-bind="$attrs"
+    @register="registerDrawer"
+    showFooter
+    :title="getTitle"
+    width="500px"
+    @ok="handleSubmit"
+  >
+    <BasicForm @register="registerForm"/>
+  </BasicDrawer>
+</template>
+<script lang="ts">
+  import { defineComponent, ref, computed, unref } from 'vue';
+  import { BasicForm, useForm } from '/@/components/Form';
+  import { formSchema } from './device.profile.data';
+  import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
+  import {saveOrEditMessageConfig} from "/@/api/message/config";
+  import {useMessage} from "/@/hooks/web/useMessage";
+
+  export default defineComponent({
+    name: 'DeviceProfileDrawer',
+    components: { BasicDrawer, BasicForm },
+    emits: ['success', 'register'],
+    setup(_, { emit }) {
+      const isUpdate = ref(true);
+
+      const [registerForm, {  validate,setFieldsValue,resetFields }] = useForm({
+        labelWidth: 120,
+        schemas: formSchema,
+        showActionButtonGroup: false,
+      });
+
+      const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => {
+        await resetFields();
+        setDrawerProps({ confirmLoading: false });
+        isUpdate.value = !!data?.isUpdate;
+        if (unref(isUpdate)) {
+          const config = data.record.config;
+          for (const key in config){
+            Reflect.set(data.record, key+'', config[key]);
+          }
+          await setFieldsValue({
+            ...data.record,
+          });
+        }
+      });
+
+      const getTitle = computed(() => (!unref(isUpdate) ? '新增消息配置' : '编辑消息配置'));
+
+      async function handleSubmit() {
+        try {
+          const values = await validate();
+          const { createMessage } = useMessage();
+          setDrawerProps({ confirmLoading: true });
+          let config={};
+          if(values.messageType === 'PHONE_MESSAGE'){
+            config ={
+              "accessKeyId":values.accessKeyId,
+              "accessKeySecret":values.accessKeySecret,
+            }
+          }else if(values.messageType === 'EMAIL_MESSAGE'){
+            config ={
+              "host":values.host,
+              "port":values.port,
+              "username":values.username,
+              "password":values.password,
+            }
+          }
+          Reflect.set(values, 'config', config);
+          let saveMessage = "添加成功";
+          let updateMessage = "修改成功";
+          await saveOrEditMessageConfig(values, unref(isUpdate));
+          closeDrawer();
+          emit('success');
+          createMessage.success(unref(isUpdate)?updateMessage:saveMessage);
+        } finally {
+          setDrawerProps({ confirmLoading: false });
+        }
+      }
+
+      return {
+        registerDrawer,
+        registerForm,
+        getTitle,
+        handleSubmit,
+      };
+    },
+  });
+</script>

+import { BasicColumn } from '/@/components/Table';
+import { FormSchema } from '/@/components/Table';
+import {findDictItemByCode} from "/@/api/system/dict";
+import {MessageEnum} from "/@/enums/messageEnum";
+export const columns: BasicColumn[] = [
+  {
+    title: '配置名称',
+    dataIndex: 'name',
+    width: 200,
+  },
+  {
+    title: '传输协议',
+    dataIndex: 'transportType',
+    width: 200,
+  },
+  {
+    title: '创建时间',
+    dataIndex: 'createTime',
+    width: 180,
+  },
+  {
+    title: '描述',
+    dataIndex: 'description',
+    width: 180,
+  },
+];
+
+export const searchFormSchema: FormSchema[] = [
+  {
+    field: 'name',
+    label: '配置名称',
+    component: 'Input',
+    colProps: { span: 8 },
+  },
+];
+
+
+export const isMessage = (type:string)=>{
+  return type===MessageEnum.IS_SMS;
+}
+export const isEmail = (type:string)=>{
+  return type===MessageEnum.IS_EMAIL;
+}
+
+export const formSchema: FormSchema[] = [
+  {
+    field: 'configName',
+    label: '配置名称',
+    required: true,
+    component:'Input'
+  },
+  {
+    field: 'messageType',
+    label: '消息类型',
+    required: true,
+    component: 'ApiSelect',
+    componentProps: {
+      api:findDictItemByCode,
+      params:{
+        dictCode:"message_type"
+      },
+      labelField:'itemText',
+      valueField:'itemValue',
+    },
+  },
+  {
+    field: 'platformType',
+    label: '平台类型',
+    required: true,
+    component: 'ApiSelect',
+    componentProps: {
+      api:findDictItemByCode,
+      params:{
+        dictCode:"platform_type"
+      },
+      labelField:'itemText',
+      valueField:'itemValue',
+    },
+    ifShow:({values}) => isMessage(Reflect.get(values,'messageType')),
+  },
+  {
+    field: 'accessKeyId',
+    label: 'accessKeyId',
+    required: true,
+    component:'Input',
+    ifShow:({values}) => isMessage(Reflect.get(values,'messageType')),
+  },
+  {
+    field: 'accessKeySecret',
+    label: 'accessKeySecret',
+    required: true,
+    component:'Input',
+    ifShow:({values}) => isMessage(Reflect.get(values,'messageType')),
+  },
+  {
+    field: 'host',
+    label: '服务器地址',
+    defaultValue:'smtp.163.com',
+    required: true,
+    component:'Input',
+    ifShow:({values}) => isEmail(Reflect.get(values,'messageType')),
+  },
+  {
+    field: 'port',
+    label: '端口',
+    defaultValue: 25,
+    required: true,
+    component:'InputNumber',
+    ifShow:({values}) => isEmail(Reflect.get(values,'messageType')),
+  },
+  {
+    field: 'username',
+    label: '用户名',
+    required: true,
+    component:'Input',
+    ifShow:({values}) => isEmail(Reflect.get(values,'messageType')),
+  },
+  {
+    field: 'password',
+    label: '密码',
+    required: true,
+    component:'InputPassword',
+    ifShow:({values}) => isEmail(Reflect.get(values,'messageType')),
+  },
+  {
+    field: 'config',
+    label: '消息配置',
+    component:'Input',
+    show:false,
+  },
+  {
+    field: 'id',
+    label: '主键',
+    component:'Input',
+    show:false,
+  },
+  {
+    field: 'status',
+    label: '状态',
+    component: 'RadioButtonGroup',
+    defaultValue: 0,
+    componentProps: {
+      options: [
+        { label: '启用', value: 1 },
+        { label: '停用', value: 0 },
+      ],
+    },
+  },
+  {
+    label: '备注',
+    field: 'remark',
+    component: 'InputTextArea',
+  }
+];

+<template>
+  <div>
+    <BasicTable @register="registerTable">
+      <template #toolbar>
+        <a-button type="primary" @click="handleCreate"> 新增设备配置 </a-button>
+      </template>
+      <template #action="{ record }">
+        <TableAction
+          :actions="[
+            {
+              label:'编辑',
+              icon: 'clarity:note-edit-line',
+              onClick: handleEdit.bind(null, record),
+            },
+            {
+              label:'删除',
+              icon: 'ant-design:delete-outlined',
+              color: 'error',
+              popConfirm: {
+                title: '是否确认删除',
+                confirm: handleDelete.bind(null, record),
+              }
+            },
+          ]"
+        />
+      </template>
+    </BasicTable>
+    <DeviceProfileDrawer @register="registerDrawer" @success="handleSuccess" />
+  </div>
+</template>
+<script lang="ts">
+import { defineComponent} from 'vue';
+import { BasicTable, useTable, TableAction } from '/@/components/Table';
+import { useDrawer } from '/@/components/Drawer';
+import DeviceProfileDrawer from './DeviceProfile.vue';
+import { columns, searchFormSchema } from './device.profile.data';
+import {useMessage} from "/@/hooks/web/useMessage";
+import {deviceProfilePage,deleteDeviceProfile} from "/@/api/device/deviceManager";
+export default defineComponent({
+  name: 'DeviceProfileManagement',
+  components: { BasicTable, DeviceProfileDrawer, TableAction},
+  setup() {
+    const [registerDrawer, { openDrawer }] = useDrawer();
+    const {createMessage} = useMessage();
+    const [registerTable, { reload }] = useTable({
+      title: '设备配置列表',
+      api: deviceProfilePage,
+      columns,
+      formConfig: {
+        labelWidth: 120,
+        schemas: searchFormSchema,
+      },
+      useSearchForm: true,
+      showTableSetting: true,
+      bordered: true,
+      showIndexColumn: false,
+      actionColumn: {
+        width: 180,
+        title: '操作',
+        dataIndex: 'action',
+        slots: { customRender: 'action' },
+      },
+    });
+
+    function handleCreate() {
+      openDrawer(true, {
+        isUpdate: false,
+      });
+    }
+
+    function handleEdit(record: Recordable) {
+      openDrawer(true, {
+        record,
+        isUpdate: true,
+      });
+    }
+
+    function handleDelete(record: Recordable) {
+      let ids = [record.id];
+      deleteDeviceProfile(ids).then(()=>{
+        createMessage.success("删除设备配置成功")
+        handleSuccess()
+      });
+    }
+
+    function handleSuccess() {
+      reload();
+    }
+    return {
+      registerTable,
+      registerDrawer,
+      handleCreate,
+      handleEdit,
+      handleDelete,
+      handleSuccess,
+    };
+  },
+});
+</script>