Merge branch 'sqy_dev' into 'main'

设备页面开发 See merge request huang/yun-teng-iot-front!6

Merge branch 'sqy_dev' into 'main'
设备页面开发 See merge request huang/yun-teng-iot-front!6
黄 x
2 parents 553b54d7 c1b72283
Showing 10 changed files with 291 additions and 236 deletions
.env.development
.gitignore
src/api/device/deviceManager.ts
src/views/device/DeviceModal.vue
src/views/device/device.data.ts
src/views/device/index.vue
src/views/device/step/DeviceStep1.vue
src/views/device/step/DeviceStep2.vue
src/views/device/step/StepIndexDemo.vue
src/views/device/step/data.ts
--- a/.env.development
View file @20bdaf9
+++ b/.env.development
View file @20bdaf9
@@ -6,7 +6,7 @@ VITE_PUBLIC_PATH = /
 # Cross-domain proxy, you can configure multiple
 # Please note that no line breaks
-VITE_PROXY = [["/api","http://192.168.10.120:8082/api"],["/upload","http://192.168.10.120:3300/upload"]]
+VITE_PROXY = [["/api","http://192.168.10.116:8082/api"],["/upload","http://192.168.10.116:3300/upload"]]
 # VITE_PROXY=[["/api","https://vvbin.cn/test"]]
 # Delete console
--- a/.gitignore
View file @20bdaf9
+++ b/.gitignore
View file @20bdaf9
@@ -11,6 +11,7 @@ tests/server/static/upload
 # local env files
 .env.local
 .env.*.local
+.env.development
 .eslintcache
 # Log files
--- a/src/api/device/deviceManager.ts
View file @20bdaf9
+++ b/src/api/device/deviceManager.ts
View file @20bdaf9
@@ -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,
+  });
+};
--- a/src/views/device/DeviceModal.vue
View file @20bdaf9
+++ b/src/views/device/DeviceModal.vue
View file @20bdaf9
@@ -4,8 +4,9 @@
     width="55rem"
     @register="register"
     :title="getTitle"
-    @visible-change="handleVisibleChange"
     @cancel="handleCancel"
+    @ok="handleOk"
+    centered
   >
     <div class="step-form-form">
       <a-steps :current="current">
@@ -14,8 +15,9 @@
       </a-steps>
     </div>
     <div class="mt-5">
-      <DeviceStep1 @next="handleStep1Next" v-show="current === 0" />
+      <DeviceStep1 @next="handleStep1Next" v-show="current === 0" ref="DeviceStep1Ref" />
       <DeviceStep2
+        ref="DeviceStep2Ref"
         @prev="handleStepPrev"
         @next="handleStep2Next"
         v-show="current === 1"
@@ -25,11 +27,13 @@
   </BasicModal>
 </template>
 <script lang="ts">
-  import { defineComponent, ref, nextTick, computed, unref, reactive, toRefs } from 'vue';
+  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: {
@@ -42,72 +46,87 @@
     props: {
       userData: { type: Object },
     },
-    setup(props) {
+    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) ? '新增设备' : '编辑设备'));
-
-      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;
-        data && onDataReceive(data);
       });
+      // 上一步
       function handleStepPrev() {
         current.value--;
       }
+      // 下一步
       function handleStep1Next(step1Values: any) {
         current.value++;
         state.initStep2 = true;
-        console.log(step1Values);
+        stepState = { ...step1Values };
       }
+      //
       function handleStep2Next(step2Values: any) {
-        current.value++;
-        console.log(step2Values);
-      }
-      function handleRedo() {
-        current.value = 0;
-        state.initStep2 = false;
+        stepState = { ...stepState, ...step2Values };
       }
       function handleCancel() {
-        console.log('关闭了弹框');
-      }
-
-      function onDataReceive(data) {
-        console.log('Data Received', data);
-        // 方式1;
-        // setFieldsValue({
-        //   field2: data.data,
-        //   field1: data.info,
-        // });
-
-        // // 方式2
-        modelRef.value = { field2: data.data, field1: data.info };
-
-        // setProps({
-        //   model:{ field2: data.data, field1: data.info }
-        // })
+        current.value = 0;
+        DeviceStep1Ref?.value?.resetFields();
+        DeviceStep2Ref?.value?.resetFields();
       }
+      // 提交
+      async function handleOk() {
+        if (current.value === 0) {
+          // 验证
+          const valid = await DeviceStep1Ref.value?.parentValidate();
+          if (!valid) return;
-      function handleVisibleChange(v) {
-        v && props.userData && nextTick(() => onDataReceive(props.userData));
+          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,
-        handleVisibleChange,
         current,
+        DeviceStep1Ref,
+        DeviceStep2Ref,
         ...toRefs(state),
         handleStepPrev,
         handleStep1Next,
         handleStep2Next,
         handleCancel,
-        handleRedo,
+        handleOk,
       };
     },
   });
--- a/src/views/device/device.data.ts
View file @20bdaf9
+++ b/src/views/device/device.data.ts
View file @20bdaf9
 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',
-  },
-];
--- a/src/views/device/index.vue
View file @20bdaf9
+++ b/src/views/device/index.vue
View file @20bdaf9
@@ -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,
       };
     },
   });
--- a/src/views/device/step/DeviceStep1.vue
View file @20bdaf9
+++ b/src/views/device/step/DeviceStep1.vue
View file @20bdaf9
@@ -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 />
@@ -56,10 +63,9 @@
   import { useScript } from '/@/hooks/web/useScript';
   import { ScrollActionType } from '/@/components/Container/index';
   import { Input, Divider, Upload, message, Modal, Form, Row, Col } from 'ant-design-vue';
-  import { EnvironmentTwoTone, LoadingOutlined, PlusOutlined } from '@ant-design/icons-vue';
+  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 }] = 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,15 +188,33 @@
             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,
         register,
         beforeUpload,
@@ -181,8 +224,12 @@
         visible,
         scrollRef,
         handleOk,
+        handleCancel,
         wrapRef,
         labelCol: { style: { width: '40px' } },
+        parentSetFieldsValue,
+        parentGetFieldsValue,
+        parentValidate,
       };
     },
   });
--- a/src/views/device/step/DeviceStep2.vue
View file @20bdaf9
+++ b/src/views/device/step/DeviceStep2.vue
View file @20bdaf9
 <template>
   <div class="step2">
-    <div><input type="checkbox" v-model="isCreaentials" @click="checked" /> 添加凭证 </div>
-
-    <a-form :label-col="labelCol" :wrapper-col="wrapperCol" v-if="isCreaentials">
-      <a-form-item label="凭据类型">
+    <div
+      ><input type="checkbox" v-model="creaentialsPassword.isCreaentials" @click="checked" />
+      添加凭证
+    </div>
+    <a-form
+      ref="formRef"
+      :rules="rules"
+      :label-col="labelCol"
+      :wrapper-col="wrapperCol"
+      v-show="creaentialsPassword.isCreaentials"
+      :model="creaentialsPassword"
+      labelAlign="left"
+    >
+      <a-form-item label="凭据类型" name="creaentialsType">
         <a-select
-          v-model:value="creaentialsType"
+          v-model:value="creaentialsPassword.creaentialsType"
           style="width: 200px"
           @change="handleChange"
           placeholder="请选择凭据类型"
           :options="options"
         />
       </a-form-item>
-      <div v-if="creaentialsType === 'Access token'">
-        <a-form-item label="访问令牌">
-          <a-input type="input" style="width: 200px" v-model:value="token" />
+      <div v-if="creaentialsPassword.creaentialsType === 'Access token'">
+        <a-form-item label="访问令牌" name="token">
+          <a-input type="password" style="width: 200px" v-model:value="creaentialsPassword.token" />
         </a-form-item>
       </div>
-      <div v-else-if="creaentialsType === 'X.509'">
-        <a-form-item label="RSA公钥">
-          <a-input type="input" style="width: 200px" v-model:value="publicKey" />
+      <div v-else-if="creaentialsPassword.creaentialsType === 'X.509'">
+        <a-form-item label="RSA公钥" name="publicKey">
+          <a-input
+            type="password"
+            style="width: 200px"
+            v-model:value="creaentialsPassword.publicKey"
+          />
         </a-form-item>
       </div>
       <div v-else>
-        <a-form-item label="客户端ID">
-          <a-input type="input" style="width: 200px" v-model:value="clientId" />
+        <a-form-item label="客户端ID" name="clientId">
+          <a-input type="input" style="width: 200px" v-model:value="creaentialsPassword.clientId" />
         </a-form-item>
-        <a-form-item label="用户名">
-          <a-input type="input" style="width: 200px" v-model:value="username" />
+        <a-form-item label="用户名" name="username">
+          <a-input type="input" style="width: 200px" v-model:value="creaentialsPassword.username" />
         </a-form-item>
-        <a-form-item label="密码">
-          <a-input type="password" style="width: 200px" v-model:value="password" />
+        <a-form-item label="密码" name="password">
+          <a-input
+            type="password"
+            style="width: 200px"
+            v-model:value="creaentialsPassword.password"
+          />
         </a-form-item>
       </div>
     </a-form>
-
     <div class="flex justify-start">
       <a-button class="mr-5" @click="prevStep">上一步</a-button>
     </div>
   </div>
 </template>
 <script lang="ts">
-  import { defineComponent, reactive, ref, toRefs } from 'vue';
+  import { defineComponent, reactive, ref, watch } from 'vue';
-  import { Input, Form, Select, Button, SelectProps } from 'ant-design-vue';
+  import { Input, Form, Select, Button } from 'ant-design-vue';
   export default defineComponent({
     components: {
       [Form.name]: Form,
@@ -52,18 +69,26 @@
       [Select.name]: Select,
       [Button.name]: Button,
     },
-    emits: ['prev'],
+
+    emits: ['prev', 'next'],
     setup(_, { emit }) {
-      const isCreaentials = ref(false);
-      const creaentialsType = ref('Access token');
+      const formRef = ref();
       const creaentialsPassword = reactive({
+        isCreaentials: false,
+        creaentialsType: 'Access token',
         token: '',
         publicKey: '',
         clientId: '',
         username: '',
         password: '',
       });
-      const options = ref<SelectProps['options']>([
+      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',
           label: 'Access token',
@@ -78,41 +103,76 @@
           label: 'MQTT Basic',
         },
       ]);
+      // 切换是否添加凭证
       const checked = () => {
-        isCreaentials.value = !isCreaentials.value;
+        creaentialsPassword.isCreaentials = !creaentialsPassword.isCreaentials;
+        formRef.value.resetFields();
+        creaentialsPassword.creaentialsType = 'Access token';
       };
       const prevStep = () => {
         emit('prev');
       };
+      watch(creaentialsPassword, (newValue) => {
+        emit('next', newValue);
+      });
+
       // 切换凭证类型时，重置字段
       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() {
+        creaentialsPassword.isCreaentials = false;
+        creaentialsPassword.creaentialsType = 'Access token';
+        creaentialsPassword.token = '';
+        creaentialsPassword.publicKey = '';
+        creaentialsPassword.clientId = '';
+        creaentialsPassword.username = '';
+        creaentialsPassword.password = '';
+        formRef.value.resetFields();
+      }
+
+      // 表单验证
+      function validate() {
+        if (creaentialsPassword.isCreaentials) {
+          return formRef.value.validate();
+        }
+        return true;
+      }
       return {
-        ...toRefs(creaentialsPassword),
-        creaentialsType,
-        isCreaentials,
         options,
+        formRef,
+        creaentialsPassword,
         handleChange,
         prevStep,
         checked,
         labelCol: { style: { width: '150px' } },
         wrapperCol: { span: 18 },
+        resetFields,
+        validate,
+        rules,
       };
     },
   });
 </script>
 <style lang="less" scoped>
   .step2 {
-    width: 500px;
+    width: 700px;
     margin: 0 auto;
   }
 </style>
--- a/src/views/device/step/StepIndexDemo.vue deleted 100644 → 0
View file @553b54d
+++ b/src/views/device/step/StepIndexDemo.vue deleted 100644 → 0
View file @553b54d
-<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>
--- a/src/views/device/step/data.ts
View file @20bdaf9
+++ b/src/views/device/step/data.ts
View file @20bdaf9
 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,
+  },
 ];