Merge branch 'ft_local_dev' into 'main'

feat:设备配置新增物模型静态页面

See merge request huang/yun-teng-iot-front!356

@@ -11,12 +11,12 @@ import projectSetting from '/@/settings/projectSetting';
 import { PermissionModeEnum } from '/@/enums/appEnum';
 import { PermissionModeEnum } from '/@/enums/appEnum';
 import { asyncRoutes } from '/@/router/routes';
 import { asyncRoutes } from '/@/router/routes';
 import { ERROR_LOG_ROUTE, PAGE_NOT_FOUND_ROUTE } from '/@/router/routes/basic';
 import { ERROR_LOG_ROUTE, PAGE_NOT_FOUND_ROUTE } from '/@/router/routes/basic';
-import { filter, forEach } from '/@/utils/helper/treeHelper';
+import { filter } from '/@/utils/helper/treeHelper';
 import { getMenuList, getMenusIdsByRoleId } from '/@/api/sys/menu';
 import { getMenuList, getMenusIdsByRoleId } from '/@/api/sys/menu';
 import { getPermCode } from '/@/api/sys/user';
 import { getPermCode } from '/@/api/sys/user';
 import { useMessage } from '/@/hooks/web/useMessage';
 import { useMessage } from '/@/hooks/web/useMessage';
 import { PageEnum } from '/@/enums/pageEnum';
 import { PageEnum } from '/@/enums/pageEnum';
-import { MENU_LIST, USER_INFO_KEY } from '/@/enums/cacheEnum';
+import { USER_INFO_KEY } from '/@/enums/cacheEnum';
 import { getAuthCache, setAuthCache } from '/@/utils/auth';
 import { getAuthCache, setAuthCache } from '/@/utils/auth';
 import { createStorage } from '/@/utils/cache/index';
 import { createStorage } from '/@/utils/cache/index';
 
 
@@ -89,7 +89,8 @@ export const usePermissionStore = defineStore({
       this.lastBuildMenuTime = 0;
       this.lastBuildMenuTime = 0;
     },
     },
     async changePermissionCode() {
     async changePermissionCode() {
-      const filterMenu = (allMenuList, menuIdsList) => {
+      //判空处理，如果没有数据则为空，空数组.filter是不会报错的
+      const filterMenu = (allMenuList: Recordable[] = [], menuIdsList) => {
         return allMenuList
         return allMenuList
           .filter((item) => {
           .filter((item) => {
             return menuIdsList.indexOf(item.id) > -1;
             return menuIdsList.indexOf(item.id) > -1;

@@ -3,50 +3,53 @@
     <BasicModal
     <BasicModal
       :maskClosable="false"
       :maskClosable="false"
       v-bind="$attrs"
       v-bind="$attrs"
-      width="55rem"
+      width="60rem"
       @register="register"
       @register="register"
       @ok="handleSubmit"
       @ok="handleSubmit"
       @cancel="handleCancel"
       @cancel="handleCancel"
     >
     >
-      <div class="step-form-form">
-        <a-steps :current="current">
-          <a-step v-for="item in steps" :key="item.title" :title="item.title" />
-        </a-steps>
-      </div>
-      <div class="mt-5">
-        <DeviceConfigurationStep
-          v-show="current === 0"
-          ref="DevConStRef"
-          @next="handleStepNext(true, null)"
-        />
-        <TransportConfigurationStep
-          v-show="current === 1"
-          ref="TransConStRef"
-          @prev="handleStepPrev"
-        />
-      </div>
+      <Tabs
+        type="card"
+        :animated="true"
+        v-model:activeKey="activeKey"
+        :size="size"
+        @change="handleChange"
+      >
+        <TabPane forceRender key="1" tab="设备配置">
+          <DeviceConfigurationStep v-show="activeKey === '1'" ref="DevConStRef" />
+        </TabPane>
+        <TabPane forceRender key="2" tab="传输配置">
+          <TransportConfigurationStep v-show="activeKey === '2'" ref="TransConStRef" />
+        </TabPane>
+        <TabPane forceRender key="3" v-show="activeKey === '3'" tab="物模型管理">
+          <PhysicalModelManagementStep v-show="activeKey === '3'" ref="PhysicalModManRef" />
+        </TabPane>
+      </Tabs>
     </BasicModal>
     </BasicModal>
   </div>
   </div>
 </template>
 </template>
 <script lang="ts" setup>
 <script lang="ts" setup>
   import { ref, unref, reactive } from 'vue';
   import { ref, unref, reactive } from 'vue';
   import { BasicModal, useModalInner } from '/@/components/Modal';
   import { BasicModal, useModalInner } from '/@/components/Modal';
-  import DeviceConfigurationStep from './step/DeviceConfigurationStep.vue';
-  import TransportConfigurationStep from './step/TransportConfigurationStep.vue';
   import { deviceConfigAddOrEdit, deviceConfigGetDetail } from '/@/api/device/deviceConfigApi';
   import { deviceConfigAddOrEdit, deviceConfigGetDetail } from '/@/api/device/deviceConfigApi';
   import { useMessage } from '/@/hooks/web/useMessage';
   import { useMessage } from '/@/hooks/web/useMessage';
-  import { steps } from './device.profile.data';
   import { isEmpty } from '/@/utils/is';
   import { isEmpty } from '/@/utils/is';
+  import { Tabs, TabPane } from 'ant-design-vue';
+  import DeviceConfigurationStep from './step/DeviceConfigurationStep.vue';
+  import TransportConfigurationStep from './step/TransportConfigurationStep.vue';
+  import PhysicalModelManagementStep from './step/PhysicalModelManagementStep.vue';
 
 
   const emits = defineEmits(['success', 'register']);
   const emits = defineEmits(['success', 'register']);
+  const activeKey = ref('1');
+  const size = ref('small');
   const isEditId = ref('');
   const isEditId = ref('');
   const isEditCreatTime = ref('');
   const isEditCreatTime = ref('');
   const { createMessage } = useMessage();
   const { createMessage } = useMessage();
   const isViewDetail = ref(false);
   const isViewDetail = ref(false);
   const isUpdate = ref(false);
   const isUpdate = ref(false);
-  const current = ref(0);
   const DevConStRef = ref<InstanceType<typeof DeviceConfigurationStep>>();
   const DevConStRef = ref<InstanceType<typeof DeviceConfigurationStep>>();
   const TransConStRef = ref<InstanceType<typeof TransportConfigurationStep>>();
   const TransConStRef = ref<InstanceType<typeof TransportConfigurationStep>>();
+  const PhysicalModManRef = ref<InstanceType<typeof PhysicalModelManagementStep>>();
   const postSubmitFormData: any = reactive({
   const postSubmitFormData: any = reactive({
     deviceConfData: {},
     deviceConfData: {},
   });
   });
@@ -56,7 +59,6 @@
   const transportTypeStr = ref('');
   const transportTypeStr = ref('');
   const [register, { closeModal, setModalProps }] = useModalInner(async (data) => {
   const [register, { closeModal, setModalProps }] = useModalInner(async (data) => {
     setModalProps({ confirmLoading: false });
     setModalProps({ confirmLoading: false });
-    current.value = 0;
     isUpdate.value = data.isUpdate;
     isUpdate.value = data.isUpdate;
     isViewDetail.value = data.isView;
     isViewDetail.value = data.isView;
     const res = data.record !== undefined ? await deviceConfigGetDetail(data.record.id) : {};
     const res = data.record !== undefined ? await deviceConfigGetDetail(data.record.id) : {};
@@ -77,16 +79,17 @@
       handleStepNext(false, res);
       handleStepNext(false, res);
     }
     }
   });
   });
+  const handleChange = (e) => {
+    if (e == '2') {
+      handleStepNext(true, null);
+    }
+  };
   const handleStepNext = (e, data) => {
   const handleStepNext = (e, data) => {
     if (e) {
     if (e) {
-      current.value++;
     } else {
     } else {
       setTransConfEditFormData(data);
       setTransConfEditFormData(data);
     }
     }
   };
   };
-  const handleStepPrev = () => {
-    current.value--;
-  };
 
 
   const setDeviceConfEditFormData = async (res) => {
   const setDeviceConfEditFormData = async (res) => {
     await DevConStRef.value?.setFormData(res);
     await DevConStRef.value?.setFormData(res);
@@ -122,6 +125,7 @@
 
 
   const handleCancel = () => {
   const handleCancel = () => {
     closeModal();
     closeModal();
+    activeKey.value = '1';
     DevConStRef.value?.resetFormData();
     DevConStRef.value?.resetFormData();
     TransConStRef.value?.resetFormData();
     TransConStRef.value?.resetFormData();
   };
   };

@@ -3,9 +3,56 @@ import { FormSchema } from '/@/components/Table';
 import { findDictItemByCode } from '/@/api/system/dict';
 import { findDictItemByCode } from '/@/api/system/dict';
 import { MessageEnum } from '/@/enums/messageEnum';
 import { MessageEnum } from '/@/enums/messageEnum';
 import { numberRule } from '/@/utils/rules';
 import { numberRule } from '/@/utils/rules';
+import { Tag } from 'ant-design-vue';
+import { h } from 'vue';
 
 
 import { deviceConfigGetRuleChain } from '/@/api/device/deviceConfigApi';
 import { deviceConfigGetRuleChain } from '/@/api/device/deviceConfigApi';
 
 
+export const physicalColumn: BasicColumn[] = [
+  {
+    title: '功能名称',
+    dataIndex: 'name',
+    width: 80,
+  },
+  {
+    title: '标识符',
+    dataIndex: 'type',
+    width: 80,
+  },
+  {
+    title: '数据类型',
+    dataIndex: 'transportType',
+    width: 80,
+  },
+  {
+    title: '单位',
+    dataIndex: 'description1',
+    width: 70,
+  },
+  {
+    title: '读写类型',
+    dataIndex: 'default',
+    width: 70,
+    customRender: ({ record }) => {
+      const status = record.actionStatus;
+      const enable = status === 'SUCCESS' ? '读写' : '只读';
+      const color = enable === '读写' ? 'blue' : 'blue';
+      const text = enable === '读写' ? '读写' : '只读';
+      return h(Tag, { color }, () => text);
+    },
+  },
+  {
+    title: '创建人',
+    dataIndex: 'description',
+    width: 90,
+  },
+  {
+    title: '创建时间',
+    dataIndex: 'createTime',
+    width: 140,
+  },
+];
+
 export const step1Schemas: FormSchema[] = [
 export const step1Schemas: FormSchema[] = [
   {
   {
     field: 'image',
     field: 'image',
@@ -18,6 +65,7 @@ export const step1Schemas: FormSchema[] = [
     label: '配置名称',
     label: '配置名称',
     required: true,
     required: true,
     component: 'Input',
     component: 'Input',
+    colProps: { span: 14 },
     componentProps() {
     componentProps() {
       return {
       return {
         disabled: false,
         disabled: false,
@@ -30,6 +78,8 @@ export const step1Schemas: FormSchema[] = [
     field: 'defaultRuleChainId',
     field: 'defaultRuleChainId',
     label: '规则链',
     label: '规则链',
     component: 'ApiSelect',
     component: 'ApiSelect',
+    colProps: { span: 14 },
+
     componentProps: {
     componentProps: {
       api: async () => {
       api: async () => {
         const data = await deviceConfigGetRuleChain();
         const data = await deviceConfigGetRuleChain();
@@ -50,6 +100,8 @@ export const step1Schemas: FormSchema[] = [
     field: 'defaultQueueName',
     field: 'defaultQueueName',
     label: '处理队列',
     label: '处理队列',
     component: 'ApiSelect',
     component: 'ApiSelect',
+    colProps: { span: 14 },
+
     componentProps: {
     componentProps: {
       api: findDictItemByCode,
       api: findDictItemByCode,
       params: {
       params: {
@@ -64,10 +116,12 @@ export const step1Schemas: FormSchema[] = [
   {
   {
     label: '描述',
     label: '描述',
     field: 'description',
     field: 'description',
+    colProps: { span: 14 },
     component: 'InputTextArea',
     component: 'InputTextArea',
     componentProps: {
     componentProps: {
       maxLength: 255,
       maxLength: 255,
       placeholder: '请输入描述',
       placeholder: '请输入描述',
+      rows: 6,
     },
     },
   },
   },
 ];
 ];
@@ -132,16 +186,6 @@ export const columns: BasicColumn[] = [
     width: 120,
     width: 120,
   },
   },
 ];
 ];
-export const steps = [
-  {
-    title: '设备配置',
-    content: 'First-content',
-  },
-  {
-    title: '传输配置',
-    content: 'Second-content',
-  },
-];
 
 
 export const defaultObj = {
 export const defaultObj = {
   headers: {
   headers: {

 <template>
 <template>
   <div class="step1">
   <div class="step1">
-    <div class="step1-form">
-      <div>
-        <BasicForm @register="register">
-          <template #imageSelect>
-            <Upload
-              style="width: 20vw"
-              name="avatar"
-              list-type="picture-card"
-              class="avatar-uploader"
-              :show-upload-list="false"
-              :customRequest="customUploadqrcodePic"
-              :before-upload="beforeUploadqrcodePic"
-            >
-              <img
-                v-if="deviceConfigPic"
-                :src="deviceConfigPic"
-                alt=""
-                style="width: 6.25rem; height: 6.25rem"
-              />
-              <div v-else>
-                <LoadingOutlined v-if="loading" />
-                <PlusOutlined v-else />
-                <div class="ant-upload-text">图片上传</div>
-              </div>
-            </Upload>
-          </template>
-        </BasicForm>
-      </div>
-    </div>
+    <BasicForm @register="register">
+      <template #imageSelect>
+        <Upload
+          style="width: 20vw"
+          name="avatar"
+          list-type="picture-card"
+          class="avatar-uploader"
+          :show-upload-list="false"
+          :customRequest="customUploadqrcodePic"
+          :before-upload="beforeUploadqrcodePic"
+        >
+          <img
+            v-if="deviceConfigPic"
+            :src="deviceConfigPic"
+            alt=""
+            style="width: 6.25rem; height: 6.25rem"
+          />
+          <div v-else>
+            <LoadingOutlined v-if="loading" />
+            <PlusOutlined v-else />
+            <div class="ant-upload-text">图片上传</div>
+          </div>
+        </Upload>
+      </template>
+    </BasicForm>
   </div>
   </div>
 </template>
 </template>
 <script lang="ts" setup>
 <script lang="ts" setup>
@@ -41,7 +37,6 @@
   import { useMessage } from '/@/hooks/web/useMessage';
   import { useMessage } from '/@/hooks/web/useMessage';
   import type { FileItem } from '/@/components/Upload/src/typing';
   import type { FileItem } from '/@/components/Upload/src/typing';
 
 
-  const emits = defineEmits(['next']);
   const loading = ref(false);
   const loading = ref(false);
   const { createMessage } = useMessage();
   const { createMessage } = useMessage();
   const deviceConfigPic = ref('');
   const deviceConfigPic = ref('');
@@ -53,10 +48,8 @@
       span: 14,
       span: 14,
     },
     },
     showResetButton: false,
     showResetButton: false,
-    submitButtonOptions: {
-      text: '下一步',
-    },
-    submitFunc: customSubmitFunc,
+    submitOnReset: false,
+    showActionButtonGroup: false,
   });
   });
   const editOrAddNameStatus = (nameStatus) =>
   const editOrAddNameStatus = (nameStatus) =>
     updateSchema({
     updateSchema({
@@ -95,11 +88,6 @@
     setFieldsValue(v);
     setFieldsValue(v);
     deviceConfigPic.value = v.image;
     deviceConfigPic.value = v.image;
   };
   };
-  async function customSubmitFunc() {
-    const values = await validate();
-    if (!values) return;
-    emits('next', true, null);
-  }
   //获取数据
   //获取数据
   async function getFormData() {
   async function getFormData() {
     const values = await validate();
     const values = await validate();

+<template>
+  <div>
+    <BasicTable
+      :rowSelection="{ type: 'checkbox' }"
+      :clickToRowSelect="false"
+      @register="registerTable"
+    >
+      <template #toolbar>
+        <div style="display: flex; justify-content: space-between; width: 773px">
+          <div>
+            <Authority value="">
+              <div style="display: flex">
+                <a-button
+                  style="margin-left: -20px"
+                  type="primary"
+                  @click="handleCreateOrEdit(null)"
+                >
+                  新增物模型
+                </a-button>
+                <a-button class="ml-2" type="primary" @click="handleOpenTsl"> 物模型TSL </a-button>
+              </div>
+            </Authority>
+          </div>
+          <div>
+            <Authority value="">
+              <div style="display: flex">
+                <a-button type="primary"> 发布上线 </a-button>
+                <a-button class="ml-2" type="text"> 返回 </a-button>
+                <Popconfirm
+                  title="您确定要批量删除数据"
+                  ok-text="确定"
+                  cancel-text="取消"
+                  @confirm="handleDeleteOrBatchDelete(null)"
+                >
+                  <a-button
+                    style="display: none"
+                    type="primary"
+                    color="error"
+                    :disabled="hasBatchDelete"
+                  >
+                    批量删除
+                  </a-button>
+                </Popconfirm>
+              </div>
+            </Authority>
+          </div>
+        </div>
+      </template>
+      <template #action="{ record }">
+        <TableAction
+          :actions="[
+            {
+              label: '查看',
+              icon: 'ant-design:eye-outlined',
+              onClick: handleViewDetail.bind(null, record),
+            },
+            {
+              label: '编辑',
+              icon: 'clarity:note-edit-line',
+              auth: '',
+              onClick: handleCreateOrEdit.bind(null, record),
+            },
+            {
+              label: '删除',
+              icon: 'ant-design:delete-outlined',
+              auth: '',
+              color: 'error',
+              popConfirm: {
+                title: '是否确认删除',
+                confirm: handleDeleteOrBatchDelete.bind(null, record),
+              },
+            },
+          ]"
+        />
+      </template>
+    </BasicTable>
+    <PhysicalModelModal @register="registerModal" @success="handleSuccess" />
+    <PhysicalModelTsl @register="registerModalTsl" />
+  </div>
+</template>
+<script lang="ts" setup>
+  import { BasicTable, useTable, TableAction } from '/@/components/Table';
+  import { useModal } from '/@/components/Modal';
+  import { physicalColumn } from '../device.profile.data';
+  import { useBatchDelete } from '/@/hooks/web/useBatchDelete';
+  import { deleteReportManage } from '/@/api/report/reportManager';
+  import { Authority } from '/@/components/Authority';
+  import { deviceConfigGetQuery } from '/@/api/device/deviceConfigApi';
+  import PhysicalModelModal from './cpns/physical/PhysicalModelModal.vue';
+  import PhysicalModelTsl from './cpns/physical/PhysicalModelTsl.vue';
+  import { Popconfirm } from 'ant-design-vue';
+
+  defineEmits(['register']);
+  const [registerModal, { openModal }] = useModal();
+  const [registerModalTsl, { openModal: openModalTsl }] = useModal();
+
+  const [registerTable, { reload, setProps }] = useTable({
+    api: deviceConfigGetQuery,
+    columns: physicalColumn,
+    showIndexColumn: false,
+    clickToRowSelect: false,
+    useSearchForm: false,
+    rowKey: 'id',
+    showTableSetting: true,
+    bordered: true,
+    actionColumn: {
+      width: 200,
+      title: '操作',
+      dataIndex: 'action',
+      slots: { customRender: 'action' },
+      fixed: 'right',
+    },
+  });
+  // 刷新
+  const handleSuccess = () => {
+    reload();
+  };
+
+  const { hasBatchDelete, handleDeleteOrBatchDelete, selectionOptions } = useBatchDelete(
+    deleteReportManage,
+    handleSuccess,
+    setProps
+  );
+  selectionOptions.rowSelection.getCheckboxProps = (record: Recordable) => {
+    // Demo:status为1的选择框禁用
+    if (record.status === 1) {
+      return { disabled: true };
+    } else {
+      return { disabled: false };
+    }
+  };
+  const handleViewDetail = (record: Recordable | null) => {
+    if (record) {
+      openModal(true, {
+        isUpdate: true,
+        record,
+        isView: true,
+      });
+    }
+  };
+  // 新增或编辑
+  const handleCreateOrEdit = (record: Recordable | null) => {
+    if (record) {
+      openModal(true, {
+        isUpdate: false,
+        record,
+        isView: false,
+      });
+    } else {
+      openModal(true, {
+        isUpdate: true,
+        isView: false,
+      });
+    }
+  };
+  const handleOpenTsl = () => {
+    openModalTsl(true, {
+      isUpdate: true,
+    });
+  };
+  defineExpose({});
+</script>
+<style lang="less" scoped>
+  :deep(.ant-table-body) {
+    height: auto !important;
+  }
+</style>

@@ -29,13 +29,6 @@
       <div style="margin-top: 5vh" v-else-if="isMqttType == 'SNMP'">
       <div style="margin-top: 5vh" v-else-if="isMqttType == 'SNMP'">
         <SnmpCpns ref="snmpRef" />
         <SnmpCpns ref="snmpRef" />
       </div>
       </div>
-      <div class="btn-style">
-        <div style="display: flex; width: 4vw; height: 4vh; margin-top: 1.65vh">
-          <Button type="default" style="border-radius: 2px" class="mt-5" @click="customResetFunc"
-            >上一步</Button
-          >
-        </div>
-      </div>
     </div>
     </div>
   </div>
   </div>
 </template>
 </template>
@@ -43,13 +36,11 @@
   import { reactive, ref, onUnmounted, nextTick } from 'vue';
   import { reactive, ref, onUnmounted, nextTick } from 'vue';
   import { BasicForm, useForm } from '/@/components/Form';
   import { BasicForm, useForm } from '/@/components/Form';
   import { step2Schemas } from '../device.profile.data';
   import { step2Schemas } from '../device.profile.data';
-  import { Button } from '/@/components/Button';
   import MqttCpns from './cpns/mqtt/Mqtt.vue';
   import MqttCpns from './cpns/mqtt/Mqtt.vue';
   import CoapCpns from './cpns/coap/Coap.vue';
   import CoapCpns from './cpns/coap/Coap.vue';
   import Lwm2mCpns from './cpns/lwm2m/index.vue';
   import Lwm2mCpns from './cpns/lwm2m/index.vue';
   import SnmpCpns from './cpns/snmp/index.vue';
   import SnmpCpns from './cpns/snmp/index.vue';
 
 
-  const emits = defineEmits(['prev']);
   const mqttRef = ref<InstanceType<typeof MqttCpns>>();
   const mqttRef = ref<InstanceType<typeof MqttCpns>>();
   const coapRef = ref<InstanceType<typeof CoapCpns>>();
   const coapRef = ref<InstanceType<typeof CoapCpns>>();
   const lwm2mRef = ref<InstanceType<typeof Lwm2mCpns>>();
   const lwm2mRef = ref<InstanceType<typeof Lwm2mCpns>>();
@@ -64,6 +55,9 @@
     actionColOptions: {
     actionColOptions: {
       span: 14,
       span: 14,
     },
     },
+    showResetButton: false,
+    submitOnReset: false,
+    showActionButtonGroup: false,
   });
   });
   const setFormData = (v) => {
   const setFormData = (v) => {
     setFieldsValue({
     setFieldsValue({
@@ -86,9 +80,6 @@
       snmpRef.value?.resetFormData();
       snmpRef.value?.resetFormData();
     });
     });
   };
   };
-  async function customResetFunc() {
-    emits('prev');
-  }
   nextTick(() => {
   nextTick(() => {
     updateSchema({
     updateSchema({
       field: 'transportType',
       field: 'transportType',

+<template>
+  <div>
+    <BasicModal
+      :maskClosable="false"
+      v-bind="$attrs"
+      width="55rem"
+      @register="register"
+      @ok="handleSubmit"
+      @cancel="handleCancel"
+    >
+      <Tabs v-model:activeKey="activeKey" :size="size">
+        <TabPane key="1" tab="属性">
+          <Attr v-show="activeKey === '1'" ref="AttrRef" />
+        </TabPane>
+        <TabPane disabled key="2" tab="服务">
+          <Service v-show="activeKey === '2'" ref="ServiceRef" />
+        </TabPane>
+        <TabPane disabled key="3" v-show="activeKey === '3'" tab="事件">
+          <Events v-show="activeKey === '3'" ref="EventsRef" />
+        </TabPane>
+      </Tabs>
+    </BasicModal>
+  </div>
+</template>
+<script lang="ts" setup>
+  import { ref, unref } from 'vue';
+  import { BasicModal, useModalInner } from '/@/components/Modal';
+  import { Tabs, TabPane } from 'ant-design-vue';
+  import Attr from './cpns/Attr.vue';
+  import Service from './cpns/Service.vue';
+  import Events from './cpns/Events.vue';
+
+  defineEmits(['register']);
+  const activeKey = ref('1');
+  const size = ref('small');
+  const AttrRef = ref<InstanceType<typeof Attr>>();
+  const ServiceRef = ref<InstanceType<typeof Service>>();
+  const EventsRef = ref<InstanceType<typeof Events>>();
+  const isUpdate = ref(false);
+  const isViewDetail = ref('');
+  const [register, { closeModal, setModalProps }] = useModalInner(async (data) => {
+    setModalProps({ loading: true });
+    isUpdate.value = data.isUpdate;
+    isViewDetail.value = data.isView;
+    // AttrRef.value?.setFormData()
+    setModalProps({ loading: false });
+    if (!unref(isViewDetail)) {
+      const title = !unref(isUpdate) ? '编辑物模型' : '新增物模型';
+      setModalProps({ title, showOkBtn: true, showCancelBtn: true });
+      if (!unref(isUpdate)) {
+      }
+    } else {
+      setModalProps({ showOkBtn: false, showCancelBtn: false, title: '查看物模型' });
+    }
+  });
+  const handleCancel = () => {
+    AttrRef.value?.resetFormData();
+    closeModal();
+  };
+  const handleSubmit = async () => {
+    const value = await AttrRef.value?.getFormData();
+    if (!value) return;
+    console.log('搜集值', value);
+  };
+</script>
+
+<style lang="less" scope></style>

+<template>
+  <div>
+    <BasicModal
+      title="物模型TSL"
+      :maskClosable="false"
+      v-bind="$attrs"
+      width="55rem"
+      @register="register"
+      @ok="handleSubmit"
+      @cancel="handleCancel"
+    >
+      <TslContent ref="TslConRef" />
+    </BasicModal>
+  </div>
+</template>
+<script lang="ts" setup>
+  import { ref } from 'vue';
+  import { BasicModal, useModalInner } from '/@/components/Modal';
+  // import { useMessage } from '/@/hooks/web/useMessage';
+  import TslContent from './cpns/TslContent.vue';
+
+  defineEmits(['register']);
+  // const { createMessage } = useMessage();
+  const TslConRef = ref<InstanceType<typeof TslContent>>();
+
+  const [register, { closeModal, setModalProps }] = useModalInner(async (data) => {
+    setModalProps({ confirmLoading: true });
+    console.log(data);
+    setModalProps({ confirmLoading: false });
+  });
+  const handleCancel = () => {
+    TslConRef.value?.resetFormData();
+    closeModal();
+  };
+
+  const handleSubmit = () => {
+    const value = TslConRef.value?.getFormData();
+    if (!value) return;
+    console.log('搜集值', value);
+  };
+</script>
+
+<style lang="less" scope>
+  #jsoneditor {
+    width: 100%;
+    height: 450px;
+  }
+</style>

+<template>
+  <div>
+    <BasicForm @register="register" />
+  </div>
+</template>
+<script lang="ts" setup>
+  import { BasicForm, useForm } from '/@/components/Form';
+  import { attrSchemas } from './config';
+
+  const [register, { validate, setFieldsValue, resetFields }] = useForm({
+    labelWidth: 100,
+    schemas: attrSchemas,
+    actionColOptions: {
+      span: 14,
+    },
+    showResetButton: false,
+    submitOnReset: false,
+    showActionButtonGroup: false,
+  });
+
+  //回显数据
+  const setFormData = (v) => {
+    setFieldsValue(v);
+  };
+  //获取数据
+  async function getFormData() {
+    const values = await validate();
+    if (!values) return;
+    return values;
+  }
+  //清空数据
+  const resetFormData = () => {
+    resetFields();
+  };
+
+  defineExpose({
+    setFormData,
+    resetFormData,
+    getFormData,
+  });
+</script>
+<style lang="less" scoped></style>

+<template>
+  <div>
+    <div style="display: flex; justify-content: space-between">
+      <div>模型内容</div>
+      <div>
+        <Button @click="handlePremitter">
+          <template #icon>
+            <SortAscendingOutlined />
+          </template>
+          格式化
+        </Button>
+        <Button class="ml-2" @click="handleCopy">
+          <template #icon>
+            <CopyOutlined />
+          </template>
+          copy
+        </Button>
+      </div>
+    </div>
+    <div class="mt-4">
+      <div id="jsoneditor" ref="jsoneditorRef"></div>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+  import { ref, unref, onMounted, nextTick } from 'vue';
+  import { CopyOutlined, SortAscendingOutlined } from '@ant-design/icons-vue';
+  import { useCopyToClipboard } from '/@/hooks/web/useCopyToClipboard';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import jsoneditor from 'jsoneditor';
+  import 'jsoneditor/dist/jsoneditor.min.css';
+  import { Button } from 'ant-design-vue';
+  import { defaultTslContent } from './config';
+
+  const { createMessage } = useMessage();
+  const jsonValue = ref(defaultTslContent);
+  const jsonInstance = ref();
+  const jsoneditorRef = ref();
+  onMounted(() => {
+    nextTick(() => {
+      let options = {
+        mode: 'code',
+        mainMenuBar: false,
+        statusBar: false,
+      };
+      let editor = new jsoneditor(jsoneditorRef.value, options);
+      editor.set(jsonValue.value);
+      jsonInstance.value = editor;
+    });
+  });
+  const { clipboardRef, copiedRef } = useCopyToClipboard();
+  const handleCopy = () => {
+    try {
+      const valueRef = unref(jsonInstance).get();
+      const value = JSON.stringify(unref(valueRef));
+      if (!value) {
+        createMessage.warning('请输入要拷贝的内容！');
+        return;
+      }
+      clipboardRef.value = value;
+      if (unref(copiedRef)) {
+        createMessage.success('复制成功！');
+      }
+    } catch (e) {
+      console.log(e);
+    }
+  };
+
+  const getFormData = () => {
+    const value = unref(jsonInstance).get();
+    if (!value) return;
+    return value;
+  };
+  const resetFormData = () => {
+    unref(jsonInstance).set(defaultTslContent);
+  };
+  const handlePremitter = () => {
+    const value = unref(jsonInstance).get();
+    return unref(jsonInstance).set(value);
+  };
+  defineExpose({
+    getFormData,
+    resetFormData,
+  });
+</script>
+
+<style lang="less" scope>
+  #jsoneditor {
+    width: 100%;
+    height: 450px;
+  }
+</style>

+import { FormSchema } from '/@/components/Table';
+import { findDictItemByCode } from '/@/api/system/dict';
+
+export const defaultTslContent = {
+  schema: 'https://iotx-tsl.oss-ap-southeast-1.aliyuncs.com/schema.json',
+  profile: {
+    version: '1.5',
+    productKey: 'glzlnU7azMO',
+  },
+  properties: [
+    {
+      identifier: 'LightStatus',
+      name: '工作状态',
+      accessMode: 'rw',
+      required: true,
+      dataType: {
+        type: 'bool',
+        specs: {
+          '0': '关闭',
+          '1': '打开',
+        },
+      },
+    },
+  ],
+};
+
+export const attrSchemas: FormSchema[] = [
+  {
+    field: 'configName',
+    label: '功能名称',
+    required: true,
+    component: 'Input',
+    colProps: {
+      span: 18,
+    },
+    componentProps: {
+      maxLength: 255,
+      placeholder: '请输入功能名称',
+    },
+  },
+  {
+    field: 'configName1',
+    label: '标识符',
+    required: true,
+    component: 'Input',
+    colProps: {
+      span: 18,
+    },
+    componentProps: {
+      maxLength: 255,
+      placeholder: '请输入标识符',
+    },
+  },
+  {
+    field: 'platformType',
+    label: '数据类型',
+    required: true,
+    component: 'ApiSelect',
+    colProps: {
+      span: 9,
+    },
+    componentProps: {
+      placeholder: '请选择数据类型',
+      api: findDictItemByCode,
+      params: {
+        dictCode: 'data_type',
+      },
+      labelField: 'itemText',
+      valueField: 'itemValue',
+    },
+  },
+  {
+    field: 'accessKeyId',
+    label: '单位',
+    required: true,
+    component: 'ApiSelect',
+    colProps: {
+      span: 9,
+    },
+    componentProps: {
+      placeholder: '请选择单位',
+      api: findDictItemByCode,
+      params: {
+        dictCode: 'attribute_unit',
+      },
+      labelField: 'itemText',
+      valueField: 'itemValue',
+    },
+  },
+  {
+    field: 'brand',
+    component: 'ApiRadioGroup',
+    label: '读写类型',
+    required: true,
+    colProps: {
+      span: 24,
+    },
+    defaultValue: 'readonly',
+    componentProps: {
+      placeholder: '请选择读写类型',
+      api: findDictItemByCode,
+      params: {
+        dictCode: 'read_write_type',
+      },
+      labelField: 'itemText',
+      valueField: 'itemValue',
+    },
+  },
+  {
+    label: '描述',
+    field: 'description',
+    component: 'InputTextArea',
+    componentProps: {
+      rows: 6,
+      maxLength: 255,
+      placeholder: '请输入描述',
+    },
+  },
+];

@@ -25,6 +25,7 @@
   const isViewDetail = ref('');
   const isViewDetail = ref('');
   const [register, { setModalProps, closeModal }] = useModalInner(async (data) => {
   const [register, { setModalProps, closeModal }] = useModalInner(async (data) => {
     setModalProps({ loading: true });
     setModalProps({ loading: true });
+    handleCancel(false);
     isUpdate.value = data.isUpdate;
     isUpdate.value = data.isUpdate;
     isViewDetail.value = data.isView;
     isViewDetail.value = data.isView;
     converScriptRef.value?.initEditor(data.record?.configuration?.jsScript);
     converScriptRef.value?.initEditor(data.record?.configuration?.jsScript);
@@ -41,9 +42,12 @@
   const handleSubmit = async () => {
   const handleSubmit = async () => {
     const val = await converScriptRef.value?.getFormData();
     const val = await converScriptRef.value?.getFormData();
     console.log(val);
     console.log(val);
+    handleCancel(true);
   };
   };
-  const handleCancel = () => {
-    closeModal();
+  const handleCancel = (flag) => {
+    if (flag) {
+      closeModal();
+    }
     converScriptRef.value?.resetFormData();
     converScriptRef.value?.resetFormData();
   };
   };
 </script>
 </script>