commit: 设备类别开发（未联调)

+export default {
+  categoryText: '设备类别',
+  createCategoryText: '新增设备类别',
+  editCategoryText: '编辑设备类别',
+  type_name: '类别名称',
+  description: '描述',
+  operationSuccessText: '操作成功',
+}

+<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>
+<script setup lang="ts">
+import {BasicModal, useModalInner} from "/@/components/Modal";
+import {BasicForm, useForm} from "/@/components/Form";
+import {computed, ref, unref} from "vue";
+import {useI18n} from "/@/hooks/web/useI18n";
+import {schemas} from "/@/views/equipment/category/index";
+import {ipRegex} from "/@/utils/rules";
+import {deleteFormField} from "/@/views/device/deviceaccess/index";
+import {
+  deviceProfileAccessInformation,
+  updateDeviceProfileAccessInformation
+} from "/@/api/device/deviceAccess";
+import {useMessage} from "/@/hooks/web/useMessage";
+const isUpdate = ref<Boolean>(false);
+const { t } = useI18n();
+const emit = defineEmits(['handleReload', 'register']);
+const { createMessage } = useMessage();
+
+const [registerForm, { getFieldsValue, setFieldsValue, validate, resetFields }] = useForm({
+  labelWidth: 150,
+  schemas,
+  actionColOptions: {
+    span: 14,
+  },
+  showActionButtonGroup: false,
+});
+
+const recordInfo = ref<Recordable>({});
+
+const [register, { closeModal, setModalProps }] = useModalInner(async (data) => {
+  await resetFields();
+  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 getTitle = computed(() =>
+  !unref(isUpdate)
+    ? t('equipment.category.createCategoryText')
+    : t('equipment.category.editCategoryText')
+);
+
+const handleCancel = () => closeModal();
+
+const handleOk = async () => {
+  await validate();
+  let values = getFieldsValue();
+  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(t('deviceManagement.deviceAccess.ipRuleText'));
+  // }
+
+  const sipExtend = {
+    serverId: values['serverId'],
+    serverDomain: values['serverDomain'],
+    serverPassword: values['serverPassword'],
+  };
+  values.sipExtend = sipExtend;
+  deleteFormField.forEach((deleteItem) => {
+    Reflect.deleteProperty(values, deleteItem);
+  });
+  if (unref(isUpdate)) {
+    // 更新
+    values = { ...values, id: unref(recordInfo).id };
+    // await updateDeviceProfileAccessInformation(values);
+  } else {
+    // await deviceProfileAccessInformation(values);
+  }
+  createMessage.success(t('equipment.category.operationSuccessText'));
+  emit('handleReload');
+  handleCancel();
+};
+
+</script>

+import categoryModal  from './categoryModal.vue';
+
+export { categoryModal};

+.category-tree {
+  flex: 1 1 auto;
+  margin: 16px;
+  padding: 32px;
+  max-width: 100%;
+  background: #ffffff;
+  border-radius: 2px;
+  &-search {
+    width: 50%;
+    margin-bottom: 20px;
+  }
+  .ant-tree-treenode-switcher-close:hover {
+    background-color: #f4f4f5 !important;
+    border-radius: 4px !important;
+  }
+  .ant-tree-node-content-wrapper {
+    width: 100%;
+  }
+  .ant-tree-title {
+    display: flex;
+  }
+  .tree-node {
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+
+    .but_operation {
+      display: none; // 默认隐藏按钮
+    }
+
+
+  }
+  .tree-node:hover {
+    &:hover .but_operation {
+      display: inline-block; // 悬停时显示按钮
+        .but_type {
+          margin-left: 32px;
+          color: red;
+        }
+    }
+  }
+}

+
+import { useI18n } from '/@/hooks/web/useI18n';
+
+const { t } = useI18n();
+import { FormSchema } from '/@/components/Table';
+
+//表单字段
+export const schemas: FormSchema[] = [
+  {
+    field: 'intranetIpAndPort',
+    label: t('deviceManagement.deviceAccess.intranetIPWithPortText'),
+    component: 'FormInputGroup',
+    required: true,
+    componentProps: {
+      inputPlaceholder: t('deviceManagement.deviceAccess.intranetIPPlaceholderText'),
+      inputNumberPlaceholder: t('deviceManagement.deviceAccess.intranetPortPlaceholderText'),
+    },
+    colProps: { span: 24 },
+  },
+  {
+    field: 'outerIpAndPort',
+    label: t('deviceManagement.deviceAccess.outernetIPWithPortText'),
+    component: 'FormInputGroup',
+    required: true,
+    componentProps: {
+      inputPlaceholder: t('deviceManagement.deviceAccess.outernetIPPlaceholderText'),
+      inputNumberPlaceholder: t('deviceManagement.deviceAccess.outernetPortPlaceholderText'),
+    },
+    colProps: { span: 24 },
+  }
+];

+<template>
+
+  <PageWrapper dense contentFullHeight contentClass="flex">
+    <div class="category-tree">
+      <div class="category-tree-search">
+        <a-input-search
+          placeholder="请输入关键字搜索"
+          enter-button
+          size="large"
+        />
+      </div>
+      <a-tree :tree-data="treeData" default-expand-all show-icon :default-selected-keys="['0-0']">
+        <template #custom="{ title }">
+          <div class="tree-node">
+            <span>{{ title }}</span>
+            <div class="but_operation">
+              <span class="but_type" @click="handleAdd(key)">新增</span>
+              <span class="but_type">编辑</span>
+              <span class="but_type">删除</span>
+            </div>
+          </div>
+        </template>
+      </a-tree>
+      <categoryModal @register="registerModal" @handleReload="handleReload"/>
+    </div>
+  </PageWrapper>
+
+</template>
+<script setup lang="ts">
+import {PageWrapper} from "/@/components/Page";
+import './index.less';
+import {categoryModal} from './components/index';
+import {useModal} from "/@/components/Modal";
+
+const [registerModal, {openModal}] = useModal();
+const treeData = [
+  {
+    title: '全部',
+    key: '0-0',
+    slots: {title: 'custom'}, // 添加 title: 'custom'
+    children: [
+      {
+        title: '德风石化有限公司',
+        key: '0-0-0',
+        slots: {title: 'custom'}, // 添加 title: 'custom'
+        children: [
+          {
+            title: '公共工程',
+            key: '0-0-0-0',
+            slots: {title: 'custom'}, // 添加 title: 'custom'
+            children: [
+              {
+                title: '中心控制室',
+                key: '0-0-0-0-0',
+                slots: {title: 'custom'}
+              },
+              {title: '辅料管区', key: '0-0-0-0-1', slots: {title: 'custom'}},
+              {title: 'PSA伐区', key: '0-0-0-0-2', slots: {title: 'custom'}},
+              {title: '导热油房区', key: '0-0-0-0-3', slots: {title: 'custom'}},
+              {title: '甲醇裂解区', key: '0-0-0-0-4', slots: {title: 'custom'}},
+              {title: '机柜间', key: '0-0-0-0-5', slots: {title: 'custom'}}
+            ]
+          },
+          {title: '污水处理站', key: '0-0-0-1', slots: {title: 'custom'}} // 添加 title: 'custom'
+        ]
+      }
+    ]
+  }
+];
+
+// 处理新建按钮点击事件
+const handleAdd = (key: string) => {
+  openModal(true, {
+    isUpdate: false, // 表示是新建操作
+    parentKey: key, // 传递当前节点的 key
+  });
+};
+
+
+const handleReload = () => {
+
+};
+</script>