'设备页面开发'

@@ -11,6 +11,7 @@ tests/server/static/upload
 # local env files
 .env.local
 .env.*.local
+.env.development
 .eslintcache
 
 # Log files

@@ -15,6 +15,8 @@ enum DeviceManagerApi {
    * 设备配置URL
    */
   DEVICE_PROFILE_URL = '/deviceProfile',
+
+  DEVICE_PROFILE_URL_ME = '/deviceProfile/me',
 }
 
 export const devicePage = (params: DeviceQueryParam) => {
@@ -59,3 +61,20 @@ export const deleteDevice = (ids: string[]) => {
     },
   });
 };
+
+/**
+ * 查询设备配置
+ * @param params pageSize page name
+ */
+export const deviceProfile = () => {
+  return defHttp.get({
+    url: DeviceManagerApi.DEVICE_PROFILE_URL_ME,
+  });
+};
+
+export const createOrEditDevice = (data) => {
+  return defHttp.post({
+    url: DeviceManagerApi.DEVICE_URL,
+    data,
+  });
+};

@@ -6,6 +6,7 @@
     :title="getTitle"
     @cancel="handleCancel"
     @ok="handleOk"
+    centered
   >
     <div class="step-form-form">
       <a-steps :current="current">
@@ -28,9 +29,11 @@
 <script lang="ts">
   import { defineComponent, ref, computed, unref, reactive, toRefs } from 'vue';
   import { BasicModal, useModalInner } from '/@/components/Modal';
+  import { createOrEditDevice } from '/@/api/device/deviceManager';
   import DeviceStep1 from '/@/views/device/step/DeviceStep1.vue';
   import DeviceStep2 from '/@/views/device/step/DeviceStep2.vue';
   import { Steps } from 'ant-design-vue';
+  import { useMessage } from '/@/hooks/web/useMessage';
   export default defineComponent({
     name: 'DeviceModal',
     components: {
@@ -43,31 +46,42 @@
     props: {
       userData: { type: Object },
     },
-    setup(_) {
-      // const DeviceStep1Ref = ref<InstanceType<typeof DeviceStep1>>();
+    setup(_, { emit }) {
       const DeviceStep1Ref = ref<InstanceType<typeof DeviceStep1>>();
       const DeviceStep2Ref = ref<InstanceType<typeof DeviceStep2>>();
+      const { createMessage } = useMessage();
       const state = reactive({
         initStep2: false,
       });
       const current = ref(0);
       const isUpdate = ref(true);
-      const modelRef = ref({});
       const getTitle = computed(() => (!unref(isUpdate) ? '新增设备' : '编辑设备'));
       // 所有参数
-      let stepState = reactive({});
-      const [register] = useModalInner((data) => {
+      let stepState = ref();
+      // 编辑回显
+      const [register, { closeModal }] = useModalInner((data) => {
+        if (data.isUpdate) {
+          DeviceStep1Ref.value?.parentSetFieldsValue(data.record);
+          DeviceStep1Ref.value?.parentSetFieldsValue({
+            profile: data.record.deviceProfile.name,
+            remark: data.record.deviceInfo.description,
+            profileId: data.record.profileId,
+          });
+        }
         isUpdate.value = !!data?.isUpdate;
       });
 
+      // 上一步
       function handleStepPrev() {
         current.value--;
       }
+      // 下一步
       function handleStep1Next(step1Values: any) {
         current.value++;
         state.initStep2 = true;
         stepState = { ...step1Values };
       }
+      //
       function handleStep2Next(step2Values: any) {
         stepState = { ...stepState, ...step2Values };
       }
@@ -75,17 +89,34 @@
         current.value = 0;
         DeviceStep1Ref?.value?.resetFields();
         DeviceStep2Ref?.value?.resetFields();
-        console.log('关闭弹框');
-        stepState = {};
       }
-      function handleOk() {
-        // 所有参数
-        console.log(stepState);
-        console.log('确定了');
+      // 提交
+      async function handleOk() {
+        if (current.value === 0) {
+          // 验证
+          const valid = await DeviceStep1Ref.value?.parentValidate();
+          if (!valid) return;
+
+          stepState.value = DeviceStep1Ref?.value?.parentGetFieldsValue();
+          handleCancel();
+          closeModal();
+        } else {
+          if (!DeviceStep2Ref?.value?.creaentialsPassword.isCreaentials) {
+            const valid = await DeviceStep2Ref?.value?.validate();
+            if (!valid) return;
+            // 第二页验证通过情况
+            handleCancel();
+            closeModal();
+          }
+        }
+        // 验证成功 --掉新增或者编辑接口
+        const msg = computed(() => (stepState.value.id ? '更新设备成功' : '新增设备成功'));
+        await createOrEditDevice(stepState.value);
+        createMessage.success(msg.value);
+        emit('reload');
       }
       return {
         register,
-        model: modelRef,
         getTitle,
         current,
         DeviceStep1Ref,

-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 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',
-  },
-];
-
-export const isMessage = (type: string) => {
-  return type === MessageEnum.IS_SMS;
-};
-export const isEmail = (type: string) => {
-  return type === MessageEnum.IS_EMAIL;
-};

 import { BasicColumn } from '/@/components/Table';
 import { FormSchema } from '/@/components/Table';
-import { findDictItemByCode } from '/@/api/system/dict';
 import { DeviceTypeEnum, DeviceState } from '/@/api/device/model/deviceModel';
+// 表格列数据
 export const columns: BasicColumn[] = [
   {
     title: '设备名称',
@@ -45,6 +45,7 @@ export const columns: BasicColumn[] = [
   },
 ];
 
+// 查询字段
 export const searchFormSchema: FormSchema[] = [
   {
     field: 'deviceType',
@@ -79,48 +80,3 @@ export const searchFormSchema: FormSchema[] = [
     colProps: { span: 8 },
   },
 ];
-
-export const formSchema: FormSchema[] = [
-  {
-    field: 'icon',
-    label: '设备图片: ',
-    slot: 'iconSelect',
-    component: 'Input',
-  },
-  {
-    field: 'name',
-    label: '设备名称',
-    required: true,
-    component: 'Input',
-    componentProps: {
-      maxLength: 30,
-    },
-  },
-  {
-    field: 'deviceType',
-    label: '设备类型',
-    required: true,
-    component: 'ApiSelect',
-    componentProps: {
-      api: findDictItemByCode,
-      params: {
-        dictCode: 'device_type',
-      },
-      labelField: 'itemText',
-      valueField: 'itemValue',
-    },
-  },
-  {
-    field: 'label',
-    label: '设备标签',
-    component: 'Input',
-    componentProps: {
-      maxLength: 255,
-    },
-  },
-  {
-    label: '备注',
-    field: 'remark',
-    component: 'InputTextArea',
-  },
-];

@@ -65,16 +65,13 @@
         />
       </template>
     </BasicTable>
-    <!-- <ConfigDrawer @register="registerDrawer" @success="handleSuccess" /> -->
-    <DeviceModal @register="registerModal" @success="handleSuccess" />
+    <DeviceModal @register="registerModal" @success="handleSuccess" @reload="handleReload" />
   </PageWrapper>
 </template>
 <script lang="ts">
   import { defineComponent, reactive } 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 './device.data';
   import { Tag } from 'ant-design-vue';
   import { useMessage } from '/@/hooks/web/useMessage';
@@ -90,17 +87,16 @@
     name: 'DeviceManagement',
     components: {
       BasicTable,
-      // ConfigDrawer,
       PageWrapper,
       TableAction,
       OrganizationIdTree,
       Tag,
       DeviceModal,
     },
-    setup() {
-      // const [registerDrawer, { openDrawer }] = useDrawer();
+    setup(_) {
       const { createMessage } = useMessage();
       const go = useGo();
+
       const searchInfo = reactive<Recordable>({});
       const [registerModal, { openModal }] = useModal();
       const [registerTable, { reload }] = useTable({
@@ -124,6 +120,9 @@
           fixed: undefined,
         },
       });
+      const handleReload = () => {
+        handleSuccess();
+      };
 
       function handleCreate() {
         openModal(true, {
@@ -158,7 +157,6 @@
       }
       return {
         registerTable,
-        // registerDrawer,
         handleCreate,
         handleEdit,
         handleDelete,
@@ -169,6 +167,7 @@
         handleSelect,
         searchInfo,
         registerModal,
+        handleReload,
       };
     },
   });

@@ -19,7 +19,7 @@
             </div>
           </Upload>
         </template>
-        <template #devicePosition>
+        <template #deviceAddress>
           <Input disabled v-model:value="positionState.address">
             <template #addonAfter>
               <EnvironmentTwoTone @click="selectPosition" />
@@ -28,10 +28,17 @@
         </template>
       </BasicForm>
     </div>
-    <Modal v-model:visible="visible" title="设备位置" @ok="handleOk" width="800px">
+    <Modal
+      v-model:visible="visible"
+      title="设备位置"
+      @ok="handleOk"
+      width="800px"
+      @cancel="handleCancel"
+      centered
+    >
       <div>
         <a-form :label-col="labelCol">
-          <a-row :gutter="20">
+          <a-row :gutter="20" class="pt-4 pl-6">
             <a-col :span="8">
               <a-form-item label="经度">
                 <Input type="input" v-model:value="positionState.lng" disabled />
@@ -59,7 +66,6 @@
   import { EnvironmentTwoTone, PlusOutlined } from '@ant-design/icons-vue';
   import { upload } from '/@/api/oss/ossFileUploader';
   import { FileItem } from '/@/components/Upload/src/typing';
-
   export default defineComponent({
     components: {
       BasicForm,
@@ -79,34 +85,35 @@
     emits: ['next'],
     setup(_, { emit }) {
       const devicePic = ref('');
-      const positionState = reactive({
+      let positionState = reactive({
         lng: '',
         lat: '',
         address: '',
       });
-      const [register, { validate, resetFields }] = useForm({
+      const [register, { validate, resetFields, setFieldsValue, getFieldsValue }] = useForm({
         labelWidth: 100,
         schemas: step1Schemas,
         actionColOptions: {
           span: 14,
         },
+        labelAlign: 'left',
         showResetButton: false,
         submitButtonOptions: {
           text: '下一步',
         },
         submitFunc: customSubmitFunc,
       });
-
       async function customSubmitFunc() {
         try {
           let values = await validate();
           values = { devicePic: devicePic.value, ...positionState, ...values };
           delete values.icon;
-          delete values.devicePosition;
+          delete values.deviceAddress;
           emit('next', values);
           // 获取输入的数据
-        } catch (error) {}
+        } catch (e) {}
       }
+
       // 图片上传
       async function customUpload({ file }) {
         if (beforeUpload(file)) {
@@ -150,12 +157,30 @@
         const BMap = (window as any).BMap;
         if (!wrapEl) return;
         const map = new BMap.Map(wrapEl);
-        map.addEventListener('click', () => {
+        const point = new BMap.Point(104.04813399999999, 30.54348986021446);
+        map.centerAndZoom(point, 15);
+        map.enableScrollWheelZoom(true);
+        let preMarker = null;
+        map.addEventListener('click', (e) => {
           const { lat, lng } = map.he;
           positionState.lat = lat + '';
           positionState.lng = lng + '';
           let gc = new BMap.Geocoder();
           let newPoint = new BMap.Point(lng, lat);
+          if (!e.overlay) {
+            let myIcon = new BMap.Icon(
+              'http://api.map.baidu.com/img/markers.png',
+              new BMap.Size(40, 25),
+              {
+                offset: new BMap.Size(0, 0), // 指定定位位置
+                imageOffset: new BMap.Size(20, -260), // 设置图片偏移
+              }
+            );
+            let marker = new BMap.Marker(e.point, { icon: myIcon });
+            map.removeOverlay(preMarker);
+            map.addOverlay(marker);
+            preMarker = marker;
+          }
           gc.getLocation(newPoint, (rs) => {
             let addComp = rs.addressComponents;
             //获取详细的地址，精确到街道的名称
@@ -163,14 +188,31 @@
             positionState.address = addrname;
           });
         });
-        const point = new BMap.Point(104.04813399999999, 30.54348986021446);
-        map.centerAndZoom(point, 15);
-        map.enableScrollWheelZoom(true);
       }
       // 确定选择的位置
       const handleOk = () => {
         visible.value = false;
       };
+      // 取消选择位置
+      const handleCancel = () => {
+        for (let key in positionState) {
+          positionState[key] = '';
+        }
+      };
+      // 父组件调用更新字段值的方法
+      function parentSetFieldsValue(data) {
+        setFieldsValue(data);
+      }
+
+      function parentGetFieldsValue() {
+        return getFieldsValue();
+      }
+
+      async function parentValidate() {
+        const valid = await validate();
+        return valid;
+      }
+
       return {
         resetFields,
         positionState,
@@ -182,8 +224,12 @@
         visible,
         scrollRef,
         handleOk,
+        handleCancel,
         wrapRef,
         labelCol: { style: { width: '40px' } },
+        parentSetFieldsValue,
+        parentGetFieldsValue,
+        parentValidate,
       };
     },
   });

@@ -4,15 +4,16 @@
       ><input type="checkbox" v-model="creaentialsPassword.isCreaentials" @click="checked" />
       添加凭证
     </div>
-
     <a-form
       ref="formRef"
+      :rules="rules"
       :label-col="labelCol"
       :wrapper-col="wrapperCol"
-      v-if="creaentialsPassword.isCreaentials"
+      v-show="creaentialsPassword.isCreaentials"
       :model="creaentialsPassword"
+      labelAlign="left"
     >
-      <a-form-item label="凭据类型" name="creantialsType">
+      <a-form-item label="凭据类型" name="creaentialsType">
         <a-select
           v-model:value="creaentialsPassword.creaentialsType"
           style="width: 200px"
@@ -23,13 +24,13 @@
       </a-form-item>
       <div v-if="creaentialsPassword.creaentialsType === 'Access token'">
         <a-form-item label="访问令牌" name="token">
-          <a-input type="input" style="width: 200px" v-model:value="creaentialsPassword.token" />
+          <a-input type="password" style="width: 200px" v-model:value="creaentialsPassword.token" />
         </a-form-item>
       </div>
       <div v-else-if="creaentialsPassword.creaentialsType === 'X.509'">
         <a-form-item label="RSA公钥" name="publicKey">
           <a-input
-            type="input"
+            type="password"
             style="width: 200px"
             v-model:value="creaentialsPassword.publicKey"
           />
@@ -51,7 +52,6 @@
         </a-form-item>
       </div>
     </a-form>
-
     <div class="flex justify-start">
       <a-button class="mr-5" @click="prevStep">上一步</a-button>
     </div>
@@ -69,6 +69,7 @@
       [Select.name]: Select,
       [Button.name]: Button,
     },
+
     emits: ['prev', 'next'],
     setup(_, { emit }) {
       const formRef = ref();
@@ -81,6 +82,12 @@
         username: '',
         password: '',
       });
+      const rules = {
+        token: [{ required: true, message: '请输入访问令牌', trigger: 'blur' }],
+        publicKey: [{ required: true, message: '请输入RSA公钥', trigger: 'blur' }],
+        clientId: [{ required: true, message: '请输入客户端ID', trigger: 'blur' }],
+        username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
+      };
       const options = ref([
         {
           value: 'Access token',
@@ -96,8 +103,11 @@
           label: 'MQTT Basic',
         },
       ]);
+      // 切换是否添加凭证
       const checked = () => {
         creaentialsPassword.isCreaentials = !creaentialsPassword.isCreaentials;
+        formRef.value.resetFields();
+        creaentialsPassword.creaentialsType = 'Access token';
       };
       const prevStep = () => {
         emit('prev');
@@ -109,21 +119,40 @@
       // 切换凭证类型时，重置字段
       const handleChange = (value) => {
         if (value === 'Access token') {
-          creaentialsPassword.token = '';
+          resetCreantialsType();
         } else if (value === 'X.509') {
-          creaentialsPassword.publicKey = '';
+          resetCreantialsType();
         } else {
-          creaentialsPassword.clientId = '';
-          creaentialsPassword.username = '';
-          creaentialsPassword.password = '';
+          resetCreantialsType();
         }
       };
+      // 切换凭证类型时，重置字段
+      function resetCreantialsType() {
+        creaentialsPassword.token = '';
+        creaentialsPassword.publicKey = '';
+        creaentialsPassword.clientId = '';
+        creaentialsPassword.username = '';
+        creaentialsPassword.password = '';
+      }
 
       // 重置所有字段
       function resetFields() {
-        console.log(formRef);
+        creaentialsPassword.isCreaentials = false;
+        creaentialsPassword.creaentialsType = 'Access token';
+        creaentialsPassword.token = '';
+        creaentialsPassword.publicKey = '';
+        creaentialsPassword.clientId = '';
+        creaentialsPassword.username = '';
+        creaentialsPassword.password = '';
         formRef.value.resetFields();
-        console.log('----');
+      }
+
+      // 表单验证
+      function validate() {
+        if (creaentialsPassword.isCreaentials) {
+          return formRef.value.validate();
+        }
+        return true;
       }
       return {
         options,
@@ -135,13 +164,15 @@
         labelCol: { style: { width: '150px' } },
         wrapperCol: { span: 18 },
         resetFields,
+        validate,
+        rules,
       };
     },
   });
 </script>
 <style lang="less" scoped>
   .step2 {
-    width: 500px;
+    width: 700px;
     margin: 0 auto;
   }
 </style>

-<template>
-  <PageWrapper
-    title="分步表单"
-    contentBackground
-    content=" 将一个冗长或用户不熟悉的表单任务分成多个步骤，指导用户完成。"
-    contentClass="p-4"
-  >
-    <div class="step-form-form">
-      <a-steps :current="current">
-        <a-step title="填写转账信息" />
-        <a-step title="确认转账信息" />
-        <a-step title="完成" />
-      </a-steps>
-    </div>
-    <div class="mt-5">
-      <Step1 @next="handleStep1Next" v-show="current === 0" />
-      <Step2
-        @prev="handleStepPrev"
-        @next="handleStep2Next"
-        v-show="current === 1"
-        v-if="initSetp2"
-      />
-    </div>
-  </PageWrapper>
-</template>
-<script lang="ts">
-  import { defineComponent, ref, reactive, toRefs } from 'vue';
-  import Step1 from './DeviceStep1.vue';
-  import Step2 from './DeviceStep2.vue';
-  import { PageWrapper } from '/@/components/Page';
-  import { Steps } from 'ant-design-vue';
-
-  export default defineComponent({
-    name: 'FormStepPage',
-    components: {
-      Step1,
-      Step2,
-
-      PageWrapper,
-      [Steps.name]: Steps,
-      [Steps.Step.name]: Steps.Step,
-    },
-    setup() {
-      const current = ref(1);
-
-      const state = reactive({
-        initSetp2: false,
-      });
-
-      function handleStep1Next(step1Values: any) {
-        current.value++;
-        state.initSetp2 = true;
-        console.log(step1Values);
-      }
-
-      function handleStepPrev() {
-        current.value--;
-      }
-
-      function handleStep2Next(step2Values: any) {
-        current.value++;
-        console.log(step2Values);
-      }
-
-      function handleRedo() {
-        current.value = 0;
-        state.initSetp2 = false;
-      }
-
-      return {
-        current,
-        handleStep1Next,
-        handleStep2Next,
-        handleRedo,
-        handleStepPrev,
-        ...toRefs(state),
-      };
-    },
-  });
-</script>
-<style lang="less" scoped>
-  .step-form-content {
-    padding: 24px;
-    background-color: @component-background;
-  }
-
-  .step-form-form {
-    width: 750px;
-    margin: 0 auto;
-  }
-</style>

 import { FormSchema } from '/@/components/Form';
 import { findDictItemByCode } from '/@/api/system/dict';
-
+import { deviceProfile } from '/@/api/device/deviceManager';
+import { getOrganizationList } from '/@/api/system/system';
+import { copyTransFun } from '/@/utils/fnUtils';
+// 第一步的表单
 export const step1Schemas: FormSchema[] = [
   {
     field: 'icon',
@@ -32,6 +35,30 @@ export const step1Schemas: FormSchema[] = [
     },
   },
   {
+    field: 'profileId',
+    label: '设备配置',
+    required: true,
+    component: 'ApiSelect',
+    componentProps: {
+      api: deviceProfile,
+      labelField: 'name',
+      valueField: 'id',
+    },
+  },
+  {
+    field: 'organizationId',
+    required: true,
+    label: '所属组织',
+    component: 'ApiTreeSelect',
+    componentProps: {
+      api: async () => {
+        const data = await getOrganizationList();
+        copyTransFun(data as any as any[]);
+        return data;
+      },
+    },
+  },
+  {
     field: 'label',
     label: '设备标签',
     component: 'Input',
@@ -40,14 +67,32 @@ export const step1Schemas: FormSchema[] = [
     },
   },
   {
-    field: 'devicePosition',
+    field: 'deviceAddress',
     label: '设备位置',
     component: 'Input',
-    slot: 'devicePosition',
+    slot: 'deviceAddress',
   },
   {
-    label: '备注',
     field: 'remark',
+    label: '备注',
     component: 'InputTextArea',
   },
+  {
+    field: 'id',
+    label: 'id',
+    component: 'Input',
+    show: false,
+  },
+  {
+    field: 'profileId',
+    label: '设备配置id',
+    component: 'Input',
+    show: false,
+  },
+  {
+    field: 'deviceToken',
+    label: '设备唯一token',
+    component: 'Input',
+    show: false,
+  },
 ];