Merge branch 'feat_device_access' into 'main_dev'

feat: 新增设备接入信息功能

See merge request yunteng/thingskit-front!1217

+import { defHttp } from '/@/utils/http/axios';
+
+enum Api {
+  DEVICE_PROFILE_ACCESS_INFORMATIION = '/device_profile/access_information',
+}
+
+/**
+ * 新增设备接入信息
+ */
+export const deviceProfileAccessInformation = (params) => {
+  return defHttp.post<any>({
+    url: `${Api.DEVICE_PROFILE_ACCESS_INFORMATIION}`,
+    params,
+  });
+};
+
+/**
+ * 获取设备接入信息列表
+ */
+export const getDeviceAccessInformationList = (params) => {
+  return defHttp.get<any>({
+    url: Api.DEVICE_PROFILE_ACCESS_INFORMATIION,
+    params,
+  });
+};
+
+/**
+ * 删除设备接入信息
+ */
+export const deleteDeviceAccessInformation = (params) => {
+  return defHttp.delete<any>({
+    url: Api.DEVICE_PROFILE_ACCESS_INFORMATIION,
+    params,
+  });
+};

@@ -41,6 +41,7 @@ import InputGroup from './components/InputGroup.vue';
 import RegisterAddressInput from '/@/views/task/center/components/PollCommandInput/RegisterAddressInput.vue';
 import DeviceProfileForm from '/@/components/Form/src/components/DeviceProfileForm/index.vue';
 import { Segmented } from './components/Segmented';
+import FormInputGroup from './components/FormInputGroup.vue';
 
 const componentMap = new Map<ComponentType, Component>();
 
@@ -89,6 +90,7 @@ componentMap.set('ApiSelectScrollLoad', ApiSelectScrollLoad);
 componentMap.set('InputGroup', InputGroup);
 componentMap.set('RegisterAddressInput', RegisterAddressInput);
 componentMap.set('DeviceProfileForm', DeviceProfileForm);
+componentMap.set('FormInputGroup', FormInputGroup);
 
 export function add(compName: ComponentType, component: Component) {
   componentMap.set(compName, component);

+<template>
+  <div class="form-input">
+    <!-- 简易封装InputGroup -->
+    <!-- 待完善封装InputGroup -->
+    <InputGroup compact>
+      <Input
+        :placeholder="inputPlaceholder"
+        v-model:value="inputReactive.inputIp"
+        @change="emitChange"
+        style="width: 42%"
+        :maxlength="255"
+      />
+      <InputNumber
+        :min="1"
+        :max="65535"
+        :placeholder="inputNumberPlaceholder"
+        v-model:value="inputReactive.inputPort"
+        @change="emitChange"
+      />
+    </InputGroup>
+  </div>
+</template>
+<script lang="ts" setup>
+  import { PropType, reactive, watch } from 'vue';
+  import { InputGroup, Input, InputNumber } from 'ant-design-vue';
+
+  interface inputReactive {
+    inputIp: string;
+    inputPort: number | string | undefined;
+  }
+
+  const props = defineProps({
+    value: Object as PropType<{}>,
+    inputPlaceholder: {
+      type: String,
+      default: '请输入ip',
+    },
+    inputNumberPlaceholder: {
+      type: String,
+      default: '端口',
+    },
+  });
+
+  const emits = defineEmits(['change', 'update:value']);
+
+  const inputReactive = reactive<inputReactive>({
+    inputIp: '',
+    inputPort: undefined,
+  });
+
+  watch(
+    () => props.value,
+    () => {
+      setValues();
+    },
+    {
+      immediate: true,
+    }
+  );
+
+  function setValues() {
+    if (props?.value) for (let i in props.value) Reflect.set(inputReactive, i, props.value[i]);
+  }
+
+  function emitChange() {
+    emits('change', inputReactive);
+    emits('update:value', inputReactive);
+  }
+</script>
+
+<style lang="less" scoped>
+  .form-input {
+    :deep .ant-input-number {
+      width: 29% !important;
+    }
+  }
+</style>

@@ -148,4 +148,5 @@ export type ComponentType =
   | 'LockControlGroup'
   | 'EnumList'
   | 'Segmented'
+  | 'FormInputGroup'
   | 'StructFormItem';

@@ -208,6 +208,22 @@ export const CameraChannelNoRule: Rule[] = [
   },
 ];
 
+// 验证ip地址正则
+export const IpRule: Rule[] = [
+  {
+    required: true,
+    validator: (_, value: string) => {
+      const ipRegex =
+        /^(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/;
+      if (!ipRegex.test(value)) {
+        return Promise.reject('请输入正确格式的ip');
+      }
+      return Promise.resolve();
+    },
+    validateTrigger: 'blur',
+  },
+];
+
 export const CameraVideoStreamUrl: Rule[] = [
   {
     required: true,
@@ -423,3 +439,6 @@ export const MediaTypeValidate: Rule[] = [
     validateTrigger: 'blur',
   },
 ];
+
+export const ipRegex =
+  /^(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/;

+<template>
+  <BasicDrawer v-bind="$attrs" @register="registerDrawer" title="设备接入信息详情" width="25%">
+    <Description :column="3" size="middle" @register="registeDesc" />
+  </BasicDrawer>
+</template>
+<script lang="ts" setup>
+  import { detailSchema } from '../index';
+  import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
+  import { Description } from '/@/components/Description/index';
+  import { useDescription } from '/@/components/Description';
+
+  defineEmits(['success', 'register']);
+
+  const [registeDesc, { setDescProps }] = useDescription({
+    schema: detailSchema,
+    column: 2,
+    layout: 'vertical',
+  });
+
+  const [registerDrawer, { setDrawerProps }] = useDrawerInner(async (data) => {
+    setDrawerProps({ confirmLoading: false });
+    const dataValue = {
+      ...data,
+      ...data.sipExtend,
+    };
+    setDescProps({ data: dataValue });
+  });
+</script>

+<script setup lang="ts">
+  import { computed, unref } from 'vue';
+  import { ref } from 'vue';
+  import { BasicModal, useModalInner } from '/@/components/Modal';
+  import { deleteFormField, schemas } from '../index';
+  import { useForm, BasicForm } from '/@/components/Form';
+  import { deviceProfileAccessInformation } from '/@/api/device/deviceAccess';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import { ipRegex } from '/@/utils/rules';
+
+  const emit = defineEmits(['handleReload', 'register']);
+
+  const isUpdate = ref<Boolean>(false);
+
+  const getTitle = computed(() => (!unref(isUpdate) ? '新增设备接入信息' : '编辑设备接入信息'));
+
+  const { createMessage } = useMessage();
+
+  const [registerForm, { getFieldsValue, setFieldsValue, validate }] = useForm({
+    labelWidth: 150,
+    schemas,
+    actionColOptions: {
+      span: 14,
+    },
+    showActionButtonGroup: false,
+  });
+
+  const recordInfo = ref<Recordable>({});
+
+  const [register, { closeModal, setModalProps }] = useModalInner(async (data) => {
+    setModalProps({ confirmLoading: false, loading: true });
+    isUpdate.value = data?.isUpdate;
+    recordInfo.value = data?.record;
+    if (data?.record) {
+      const intranetIpAndPort = {
+        inputIp: data?.record.intranetIp,
+        inputPort: data?.record.intranetPort,
+      };
+      const outerIpAndPort = {
+        inputIp: data?.record.outerNetIp,
+        inputPort: data?.record.outerNetPort,
+      };
+      setFieldsValue(data?.record);
+      setFieldsValue({ ...data?.record?.sipExtend });
+      setFieldsValue({ intranetIpAndPort, outerIpAndPort });
+    }
+    setModalProps({ loading: false });
+  });
+
+  const handleCancel = () => closeModal();
+
+  const handleOk = async () => {
+    await validate();
+    let values = getFieldsValue();
+    if (unref(isUpdate)) {
+      values = { ...values, id: unref(recordInfo).id };
+    }
+    const { intranetIpAndPort, outerIpAndPort } = values;
+    values.intranetIp = intranetIpAndPort.inputIp;
+    values.intranetPort = intranetIpAndPort.inputPort;
+    values.outerNetIp = outerIpAndPort.inputIp;
+    values.outerNetPort = outerIpAndPort.inputPort;
+    if (!ipRegex.test(values.intranetIp)) {
+      return createMessage.error('请输入正确格式的ip');
+    }
+    if (!ipRegex.test(values.outerNetIp)) {
+      return createMessage.error('请输入正确格式的ip');
+    }
+    if (!values.intranetPort) {
+      return createMessage.error('请输入内网端口');
+    }
+    if (!values.outerNetPort) {
+      return createMessage.error('请输入外网端口');
+    }
+    const sipExtend = {
+      serverId: values['serverId'],
+      serverDomain: values['serverDomain'],
+      serverPassword: values['serverPassword'],
+    };
+    values.sipExtend = sipExtend;
+    deleteFormField.forEach((deleteItem) => {
+      Reflect.deleteProperty(values, deleteItem);
+    });
+    await deviceProfileAccessInformation(values);
+    createMessage.success('操作成功');
+    emit('handleReload');
+    handleCancel();
+  };
+</script>
+
+<template>
+  <div>
+    <BasicModal
+      v-bind="$attrs"
+      width="35rem"
+      :title="getTitle"
+      @register="register"
+      @cancel="handleCancel"
+      @ok="handleOk"
+      destroyOnClose
+    >
+      <div>
+        <BasicForm @register="registerForm" />
+      </div>
+    </BasicModal>
+  </div>
+</template>

+import deviceAccessModal from './deviceAccessModal.vue';
+import deviceAccessDetailDrawer from './deviceAccessDetailDrawer.vue';
+
+export { deviceAccessModal, deviceAccessDetailDrawer };

+import { DescItem } from '/@/components/Description/src/typing';
+import { BasicColumn, FormSchema } from '/@/components/Table';
+
+//设备接入信息权限标识枚举
+export enum DEVICE_ACCESS_PERMISSION_ENUM {
+  CREATE = 'api:yt:device_profile:access_information:post',
+  UPDATE = 'api:yt:device_profile:access_information:update',
+  DELETE = 'api:yt:device_profile:access_information:delete',
+  GET = 'api:yt:device_profile:access_information:get',
+}
+
+//要删除的表单字段
+export const deleteFormField = [
+  'serverId',
+  'serverDomain',
+  'serverPassword',
+  'intranetIpAndPort',
+  'outerIpAndPort',
+];
+
+//表格字段
+export const columns: BasicColumn[] = [
+  {
+    title: '内网ip',
+    dataIndex: 'intranetIp',
+  },
+  {
+    title: '内网端口',
+    dataIndex: 'intranetPort',
+  },
+  {
+    title: '外网ip',
+    dataIndex: 'outerNetIp',
+  },
+  {
+    title: '外网端口',
+    dataIndex: 'outerNetPort',
+  },
+  {
+    title: '接入协议',
+    dataIndex: 'deviceAgreement',
+  },
+];
+
+//表单查询
+export const searchFormSchema: FormSchema[] = [
+  {
+    field: 'intranetIp',
+    label: '内网ip',
+    component: 'Input',
+    colProps: { span: 6 },
+    componentProps: {
+      maxLength: 255,
+      placeholder: '请输入内网ip',
+    },
+  },
+  {
+    field: 'outerNetIp',
+    label: '外网ip',
+    component: 'Input',
+    colProps: { span: 6 },
+    componentProps: {
+      maxLength: 255,
+      placeholder: '请输入外网ip',
+    },
+  },
+  {
+    field: 'deviceAgreement',
+    label: '接入协议',
+    component: 'Select',
+    colProps: { span: 6 },
+    componentProps() {
+      return {
+        options: [
+          { label: '默认', value: 'DEFAULT' },
+          { label: 'MQTT', value: 'MQTT' },
+          { label: 'CoAP', value: 'COAP' },
+          { label: 'TCP', value: 'TCP' },
+          { label: 'GBT28181', value: 'GBT28181' },
+        ],
+        getPopupContainer: () => document.body,
+        placeholder: '请选择接入协议',
+      };
+    },
+  },
+];
+
+//表单字段
+export const schemas: FormSchema[] = [
+  {
+    field: 'intranetIpAndPort',
+    label: '内网ip&端口',
+    component: 'FormInputGroup',
+    required: true,
+    componentProps: {
+      inputPlaceholder: '请输入内网ip',
+      inputNumberPlaceholder: '内网端口',
+    },
+    colProps: { span: 24 },
+  },
+  {
+    field: 'outerIpAndPort',
+    label: '外网ip&端口',
+    component: 'FormInputGroup',
+    required: true,
+    componentProps: {
+      inputPlaceholder: '请输入外网ip',
+      inputNumberPlaceholder: '外网端口',
+    },
+    colProps: { span: 24 },
+  },
+  {
+    field: 'deviceAgreement',
+    component: 'Select',
+    required: true,
+    label: '接入协议',
+    componentProps() {
+      return {
+        options: [
+          { label: '默认', value: 'DEFAULT' },
+          { label: 'MQTT', value: 'MQTT' },
+          { label: 'CoAP', value: 'COAP' },
+          { label: 'TCP', value: 'TCP' },
+          { label: 'GBT28181', value: 'GBT28181' },
+        ],
+        getPopupContainer: () => document.body,
+        placeholder: '请选择接入协议',
+      };
+    },
+    colProps: { span: 19 },
+  },
+  {
+    field: 'serverId',
+    label: '服务器ID',
+    required: false,
+    colProps: { span: 19 },
+    component: 'Input',
+    componentProps: {
+      maxLength: 255,
+      placeholder: '请输入服务器ID',
+    },
+    ifShow({ values }) {
+      return values.deviceAgreement === 'GBT28181';
+    },
+  },
+  {
+    field: 'serverDomain',
+    label: '服务器域',
+    required: false,
+    colProps: { span: 19 },
+    component: 'Input',
+    componentProps: {
+      maxLength: 255,
+      placeholder: '请输入服务器域',
+    },
+    ifShow({ values }) {
+      return values.deviceAgreement === 'GBT28181';
+    },
+  },
+  {
+    field: 'serverPassword',
+    label: '密码',
+    required: false,
+    colProps: { span: 19 },
+    component: 'InputPassword',
+    componentProps: {
+      maxLength: 255,
+      placeholder: '请输入密码',
+    },
+    ifShow({ values }) {
+      return values.deviceAgreement === 'GBT28181';
+    },
+  },
+];
+
+//详情字段
+export const detailSchema: DescItem[] = [
+  {
+    field: 'intranetIp',
+    label: '内网ip',
+  },
+  {
+    field: 'intranetPort',
+    label: '内网端口',
+  },
+  {
+    field: 'outerNetIp',
+    label: '外网ip',
+  },
+  {
+    field: 'outerNetPort',
+    label: '外网端口',
+  },
+  {
+    field: 'deviceAgreement',
+    label: '接入协议',
+  },
+  {
+    field: 'serverId',
+    label: '服务器ID',
+  },
+  {
+    field: 'serverDomain',
+    label: '服务器域',
+  },
+  {
+    field: 'serverPassword',
+    label: '密码',
+  },
+];

+<script setup lang="ts" name="deviceAccess">
+  import { columns, searchFormSchema, DEVICE_ACCESS_PERMISSION_ENUM } from '.';
+  import { BasicTable, useTable, TableAction } from '/@/components/Table';
+  import { Button, Popconfirm } from 'ant-design-vue';
+  import { useBatchOperation } from '/@/utils/useBatchOperation';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import { Authority } from '/@/components/Authority';
+  import { useModal } from '/@/components/Modal';
+  import { deviceAccessModal, deviceAccessDetailDrawer } from './components/index';
+  import { useDrawer } from '/@/components/Drawer';
+  import { USER_INFO_KEY } from '/@/enums/cacheEnum';
+  import { getAuthCache } from '/@/utils/auth';
+  import { authBtn } from '/@/enums/roleEnum';
+  import {
+    getDeviceAccessInformationList,
+    deleteDeviceAccessInformation,
+  } from '/@/api/device/deviceAccess';
+
+  const [
+    registerTable,
+    { reload, setLoading, getSelectRowKeys, setSelectedRowKeys, getRowSelection },
+  ] = useTable({
+    title: '设备接入信息列表',
+    api: getDeviceAccessInformationList,
+    columns,
+    beforeFetch: (params) => {
+      for (let i in params) if (!params[i]) Reflect.deleteProperty(params, i); // 如果没有值，则此字段也不传
+      return params;
+    },
+    formConfig: {
+      labelWidth: 100,
+      schemas: searchFormSchema,
+    },
+    immediate: true,
+    useSearchForm: true,
+    showTableSetting: true,
+    bordered: true,
+    showIndexColumn: false,
+    clickToRowSelect: false,
+    rowKey: 'id',
+    actionColumn: {
+      width: 230,
+      title: '操作',
+      slots: { customRender: 'action' },
+      fixed: 'right',
+    },
+    rowSelection: {
+      type: 'checkbox',
+    },
+  });
+
+  const [registerModal, { openModal }] = useModal();
+
+  const [registerDetailDrawer, { openDrawer }] = useDrawer();
+
+  const { createMessage } = useMessage();
+
+  const { isExistOption } = useBatchOperation(getRowSelection, setSelectedRowKeys);
+
+  const userInfo: Recordable = getAuthCache(USER_INFO_KEY);
+
+  const role: string = userInfo.roles[0];
+
+  const handleReload = () => {
+    setSelectedRowKeys([]);
+    reload();
+  };
+
+  //新增或编辑
+  const handleCreateOrEdit = (record) => {
+    const data = { isUpdate: !record ? false : true, record };
+    openModal(true, data);
+  };
+
+  const handleDetail = (record?: Recordable) => {
+    openDrawer(true, record);
+  };
+
+  // 删除
+  const handleDelete = async (record?: Recordable) => {
+    let ids: string[] = [];
+    if (record) {
+      ids = [record.id];
+    } else {
+      ids = getSelectRowKeys();
+    }
+    try {
+      setLoading(true);
+      await deleteDeviceAccessInformation({ ids });
+      createMessage.success('删除成功');
+      handleReload();
+    } catch (error) {
+      throw error;
+    } finally {
+      setLoading(false);
+    }
+  };
+</script>
+<template>
+  <div>
+    <BasicTable style="flex: auto" @register="registerTable">
+      <template #toolbar>
+        <Authority :value="DEVICE_ACCESS_PERMISSION_ENUM.CREATE">
+          <Button type="primary" @click="handleCreateOrEdit(null)"> 新增设备接入信息 </Button>
+        </Authority>
+        <Authority :value="DEVICE_ACCESS_PERMISSION_ENUM.DELETE">
+          <Popconfirm
+            title="您确定要批量删除数据"
+            ok-text="确定"
+            cancel-text="取消"
+            @confirm="handleDelete()"
+          >
+            <a-button color="error" :disabled="!isExistOption"> 批量删除 </a-button>
+          </Popconfirm>
+        </Authority>
+      </template>
+      <template #action="{ record }">
+        <TableAction
+          :actions="[
+            {
+              label: '详情',
+              icon: 'ant-design:eye-outlined',
+              auth: DEVICE_ACCESS_PERMISSION_ENUM.GET,
+              onClick: handleDetail.bind(null, record),
+            },
+            {
+              label: '编辑',
+              auth: DEVICE_ACCESS_PERMISSION_ENUM.UPDATE,
+              icon: 'clarity:note-edit-line',
+              ifShow: authBtn(role),
+              onClick: handleCreateOrEdit.bind(null, record),
+            },
+            {
+              label: '删除',
+              auth: DEVICE_ACCESS_PERMISSION_ENUM.DELETE,
+              icon: 'ant-design:delete-outlined',
+              ifShow: authBtn(role),
+              color: 'error',
+              popConfirm: {
+                title: '是否确认删除',
+                confirm: handleDelete.bind(null, record),
+              },
+            },
+          ]"
+        />
+      </template>
+    </BasicTable>
+    <deviceAccessModal @register="registerModal" @handleReload="handleReload" />
+    <deviceAccessDetailDrawer
+      title="设备接入信息详情"
+      @register="registerDetailDrawer"
+      width="40%"
+      destroy-on-close
+    />
+  </div>
+</template>