Merge branch 'main' into ft-dev

@@ -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

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

@@ -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,
+  });
+};

@@ -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,
       };
     },
   });

 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,
       };
     },
   });

@@ -7,7 +7,7 @@
     width="500px"
     @ok="handleSubmit"
   >
-    <BasicForm @register="registerForm" />
+    <BasicForm @register="registerForm"/>
   </BasicDrawer>
 </template>
 <script lang="ts">
@@ -15,8 +15,8 @@
   import { BasicForm, useForm } from '/@/components/Form';
   import { formSchema } from './device.profile.data';
   import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
-  import { saveOrEditMessageConfig } from '/@/api/message/config';
-  import { useMessage } from '/@/hooks/web/useMessage';
+  import { saveOrEditMessageConfig } from "/@/api/message/config";
+  import { useMessage } from "/@/hooks/web/useMessage";
 
   export default defineComponent({
     name: 'DeviceProfileDrawer',
@@ -25,7 +25,7 @@
     setup(_, { emit }) {
       const isUpdate = ref(true);
 
-      const [registerForm, { validate, setFieldsValue, resetFields }] = useForm({
+      const [registerForm, {  validate,setFieldsValue,resetFields }] = useForm({
         labelWidth: 120,
         schemas: formSchema,
         showActionButtonGroup: false,
@@ -37,8 +37,8 @@
         isUpdate.value = !!data?.isUpdate;
         if (unref(isUpdate)) {
           const config = data.record.config;
-          for (const key in config) {
-            Reflect.set(data.record, key + '', config[key]);
+          for (const key in config){
+            Reflect.set(data.record, key+'', config[key]);
           }
           await setFieldsValue({
             ...data.record,
@@ -53,27 +53,27 @@
           const values = await validate();
           const { createMessage } = useMessage();
           setDrawerProps({ confirmLoading: true });
-          let config = {};
-          if (values.messageType === 'PHONE_MESSAGE') {
-            config = {
-              accessKeyId: values.accessKeyId,
-              accessKeySecret: values.accessKeySecret,
-            };
-          } else if (values.messageType === 'EMAIL_MESSAGE') {
-            config = {
-              host: values.host,
-              port: values.port,
-              username: values.username,
-              password: values.password,
-            };
+          let config={};
+          if(values.messageType === 'PHONE_MESSAGE'){
+            config ={
+              "accessKeyId":values.accessKeyId,
+              "accessKeySecret":values.accessKeySecret,
+            }
+          }else if(values.messageType === 'EMAIL_MESSAGE'){
+            config ={
+              "host":values.host,
+              "port":values.port,
+              "username":values.username,
+              "password":values.password,
+            }
           }
           Reflect.set(values, 'config', config);
-          let saveMessage = '添加成功';
-          let updateMessage = '修改成功';
+          let saveMessage = "添加成功";
+          let updateMessage = "修改成功";
           await saveOrEditMessageConfig(values, unref(isUpdate));
           closeDrawer();
           emit('success');
-          createMessage.success(unref(isUpdate) ? updateMessage : saveMessage);
+          createMessage.success(unref(isUpdate)?updateMessage:saveMessage);
         } finally {
           setDrawerProps({ confirmLoading: false });
         }

+<template>
+  <BasicModal
+    v-bind="$attrs"
+    width="55rem"
+    @register="register"
+    :title=getTitle
+    @visible-change="handleVisibleChange"
+  >
+    <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">
+      <DeviceProfileStep1 @next="handleStep1Next" v-show="current === 0" />
+      <DeviceProfileStep2
+        @prev="handleStepPrev"
+        @next="handleStep2Next"
+        v-show="current === 1"
+        v-if="initStep2"
+      />
+      <DeviceProfileStep3 v-show="current === 2" @redo="handleRedo" v-if="initStep3" />
+    </div>
+  </BasicModal>
+</template>
+<script lang="ts">
+  import { defineComponent, ref, nextTick, computed, unref, reactive, toRefs} from 'vue';
+  import { BasicModal, useModalInner } from '/@/components/Modal';
+  import { BasicForm, FormSchema, useForm } from '/@/components/Form';
+  import DeviceProfileStep1 from "/@/views/device/profile/step/DeviceProfileStep1.vue";
+  import DeviceProfileStep2 from "/@/views/device/profile/step/DeviceProfileStep2.vue";
+  import DeviceProfileStep3 from "/@/views/device/profile/step/DeviceProfileStep3.vue";
+  import { Steps } from "ant-design-vue";
+  const schemas: FormSchema[] = [
+    {
+      field: 'field1',
+      component: 'Input',
+      label: '字段1',
+      colProps: {
+        span: 24,
+      },
+      defaultValue: '111',
+    },
+    {
+      field: 'field2',
+      component: 'Input',
+      label: '字段2',
+      colProps: {
+        span: 24,
+      },
+    },
+  ];
+  export default defineComponent({
+    name:'DeviceModal',
+    components: { BasicModal, BasicForm, DeviceProfileStep1, DeviceProfileStep2, DeviceProfileStep3,
+      [Steps.name]: Steps,
+      [Steps.Step.name]: Steps.Step, },
+    props: {
+      userData: { type: Object },
+    },
+    setup(props) {
+      const state = reactive({
+        initStep2: false,
+        initStep3: false,
+      });
+      const current = ref(0);
+      const isUpdate = ref(true);
+      const modelRef = ref({});
+      const getTitle = computed(() => (!unref(isUpdate) ? '新增设备配置' : '编辑设备配置'));
+      const [
+        registerForm,
+        {
+          // setFieldsValue,
+          // setProps
+        },
+      ] = useForm({
+        labelWidth: 120,
+        schemas,
+        showActionButtonGroup: false,
+        actionColOptions: {
+          span: 24,
+        },
+      });
+
+      const [register] = useModalInner((data) => {
+        isUpdate.value = !!data?.isUpdate;
+        data && onDataReceive(data);
+      });
+
+      function handleStepPrev() {
+        current.value--;
+      }
+      function handleStep1Next(step1Values: any) {
+        current.value++;
+        state.initStep2 = true;
+        console.log(step1Values);
+      }
+      function handleStep2Next(step2Values: any) {
+        current.value++;
+        state.initStep3 = true;
+        console.log(step2Values);
+      }
+      function handleRedo() {
+        current.value = 0;
+        state.initStep2 = false;
+        state.initStep3 = false;
+      }
+
+
+      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 }
+        // })
+      }
+
+      function handleVisibleChange(v) {
+        v && props.userData && nextTick(() => onDataReceive(props.userData));
+      }
+
+      return { register, schemas, registerForm, model: modelRef, getTitle,handleVisibleChange,
+        current, ...toRefs(state), handleStepPrev, handleStep1Next, handleStep2Next, handleRedo};
+    },
+  });
+</script>

@@ -8,40 +8,40 @@
         <TableAction
           :actions="[
             {
-              label: '编辑',
+              label:'编辑',
               icon: 'clarity:note-edit-line',
               onClick: handleEdit.bind(null, record),
             },
             {
-              label: '删除',
+              label:'删除',
               icon: 'ant-design:delete-outlined',
               color: 'error',
               popConfirm: {
                 title: '是否确认删除',
                 confirm: handleDelete.bind(null, record),
-              },
+              }
             },
           ]"
         />
       </template>
     </BasicTable>
-    <DeviceProfileDrawer @register="registerDrawer" @success="handleSuccess" />
+    <DeviceProfileModal @register="registerModal" @success="handleSuccess"/>
   </div>
 </template>
 <script lang="ts">
   import { defineComponent } from 'vue';
   import { BasicTable, useTable, TableAction } from '/@/components/Table';
-  import { useDrawer } from '/@/components/Drawer';
-  import DeviceProfileDrawer from './DeviceProfile.vue';
   import { columns, searchFormSchema } from './device.profile.data';
-  import { useMessage } from '/@/hooks/web/useMessage';
-  import { deviceProfilePage, deleteDeviceProfile } from '/@/api/device/deviceManager';
+  import { useMessage } from "/@/hooks/web/useMessage";
+  import { deviceProfilePage, deleteDeviceProfile } from "/@/api/device/deviceManager";
+  import { useModal } from "/@/components/Modal";
+  import DeviceProfileModal from "/@/views/device/profile/DeviceProfileModal.vue";
   export default defineComponent({
     name: 'DeviceProfileManagement',
-    components: { BasicTable, DeviceProfileDrawer, TableAction },
+    components: { BasicTable, DeviceProfileModal, TableAction},
     setup() {
-      const [registerDrawer, { openDrawer }] = useDrawer();
-      const { createMessage } = useMessage();
+      const {createMessage} = useMessage();
+      const [registerModal, { openModal }] = useModal();
       const [registerTable, { reload }] = useTable({
         title: '设备配置列表',
         api: deviceProfilePage,
@@ -63,13 +63,13 @@
       });
 
       function handleCreate() {
-        openDrawer(true, {
+        openModal(true, {
           isUpdate: false,
         });
       }
 
       function handleEdit(record: Recordable) {
-        openDrawer(true, {
+        openModal(true, {
           record,
           isUpdate: true,
         });
@@ -77,9 +77,9 @@
 
       function handleDelete(record: Recordable) {
         let ids = [record.id];
-        deleteDeviceProfile(ids).then(() => {
-          createMessage.success('删除设备配置成功');
-          handleSuccess();
+        deleteDeviceProfile(ids).then(()=>{
+          createMessage.success("删除设备配置成功")
+          handleSuccess()
         });
       }
 
@@ -88,11 +88,11 @@
       }
       return {
         registerTable,
-        registerDrawer,
         handleCreate,
         handleEdit,
         handleDelete,
         handleSuccess,
+        registerModal,
       };
     },
   });

+<template>
+  <div class="step1">
+    <div class="step1-form">
+      <BasicForm @register="register"> </BasicForm>
+    </div>
+  </div>
+</template>
+<script lang="ts">
+  import { defineComponent, ref } from 'vue';
+  import { BasicForm, useForm } from '/@/components/Form';
+  import { step1Schemas } from './data';
+  import { Select, Input, Divider } from 'ant-design-vue';
+  export default defineComponent({
+    components: {
+      BasicForm,
+      [Select.name]: Select,
+      ASelectOption: Select.Option,
+      [Input.name]: Input,
+      [Input.Group.name]: Input.Group,
+      [Divider.name]: Divider,
+    },
+    emits: ['next'],
+    setup(_, { emit }) {
+      const devicePic = ref('');
+      const [register, { validate }] = useForm({
+        labelWidth: 100,
+        schemas: step1Schemas,
+        actionColOptions: {
+          span: 14,
+        },
+        showResetButton: false,
+        submitButtonOptions: {
+          text: '下一步',
+        },
+        submitFunc: customSubmitFunc,
+      });
+
+      async function customSubmitFunc() {
+        try {
+          const values = await validate();
+          emit('next', values);
+        } catch (error) {}
+      }
+      return { register, devicePic };
+    },
+  });
+</script>
+<style lang="less" scoped>
+  .step1 {
+    &-form {
+      width: 450px;
+      margin: 0 auto;
+    }
+
+    h3 {
+      margin: 0 0 12px;
+      font-size: 16px;
+      line-height: 32px;
+      color: @text-color;
+    }
+
+    h4 {
+      margin: 0 0 4px;
+      font-size: 14px;
+      line-height: 22px;
+      color: @text-color;
+    }
+
+    p {
+      color: @text-color;
+    }
+  }
+
+  .pay-select {
+    width: 20%;
+  }
+
+  .pay-input {
+    width: 70%;
+  }
+</style>

+<template>
+  <div class="step2">
+    <BasicForm @register="register" />
+  </div>
+</template>
+<script lang="ts">
+  import { defineComponent } from 'vue';
+  import { BasicForm, useForm } from '/@/components/Form';
+  import { step2Schemas } from './data';
+  import { Alert, Divider, Descriptions } from 'ant-design-vue';
+
+  export default defineComponent({
+    components: {
+      BasicForm,
+      [Alert.name]: Alert,
+      [Divider.name]: Divider,
+      [Descriptions.name]: Descriptions,
+      [Descriptions.Item.name]: Descriptions.Item,
+    },
+    emits: ['next', 'prev'],
+    setup(_, { emit }) {
+      const [register, { validate}] = useForm({
+        labelWidth: 80,
+        schemas: step2Schemas,
+        actionColOptions: {
+          span: 14,
+        },
+        resetButtonOptions: {
+          text: '上一步',
+        },
+        submitButtonOptions: {
+          text: '下一步',
+        },
+        resetFunc: customResetFunc,
+        submitFunc: customSubmitFunc,
+      });
+
+      async function customResetFunc() {
+        emit('prev');
+      }
+
+      async function customSubmitFunc() {
+        try {
+          const values = await validate();
+          emit('next', values);
+        } catch (error) {}
+      }
+
+      return { register };
+    },
+  });
+</script>
+<style lang="less" scoped>
+  .step2 {
+    width: 450px;
+    margin: 0 auto;
+  }
+</style>

+<template>
+  <div class="step2">
+    <BasicForm @register="register" />
+  </div>
+</template>
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { BasicForm, useForm } from '/@/components/Form';
+import { step3Schemas } from './data';
+import { Alert, Divider, Descriptions } from 'ant-design-vue';
+
+export default defineComponent({
+  components: {
+    BasicForm,
+    [Alert.name]: Alert,
+    [Divider.name]: Divider,
+    [Descriptions.name]: Descriptions,
+    [Descriptions.Item.name]: Descriptions.Item,
+  },
+  emits: ['next', 'prev'],
+  setup(_, { emit }) {
+    const [register, { validate, setProps }] = useForm({
+      labelWidth: 80,
+      schemas: step3Schemas,
+      actionColOptions: {
+        span: 14,
+      },
+      resetButtonOptions: {
+        text: '上一步',
+      },
+      submitButtonOptions: {
+        text: '提交',
+      },
+      resetFunc: customResetFunc,
+      submitFunc: customSubmitFunc,
+    });
+
+    async function customResetFunc() {
+      emit('prev');
+    }
+
+    async function customSubmitFunc() {
+      try {
+        const values = await validate();
+        setProps({
+          submitButtonOptions: {
+            loading: true,
+          },
+        });
+        setTimeout(() => {
+          setProps({
+            submitButtonOptions: {
+              loading: false,
+            },
+          });
+          emit('next', values);
+        }, 1500);
+      } catch (error) {}
+    }
+
+    return { register };
+  },
+});
+</script>
+<style lang="less" scoped>
+.step2 {
+  width: 450px;
+  margin: 0 auto;
+}
+</style>

+import { FormSchema } from '/@/components/Form';
+import {findDictItemByCode} from "/@/api/system/dict";
+
+export const step1Schemas: FormSchema[] = [
+  {
+    field: 'name',
+    label: '配置名称',
+    required: true,
+    component:'Input',
+    componentProps:{
+      maxLength:30
+    }
+  },
+  {
+    field: 'deviceType',
+    label: '队列优先级',
+    component: 'ApiSelect',
+    componentProps: {
+      api:findDictItemByCode,
+      params:{
+        dictCode:"queen_execute_sequence"
+      },
+      labelField:'itemText',
+      valueField:'itemValue',
+    },
+  },
+  {
+    label: '备注',
+    field: 'remark',
+    component: 'InputTextArea',
+  }
+];
+
+export const step2Schemas: FormSchema[] = [
+  {
+    field: 'transportType',
+    component: 'Select',
+    label: '传输方式',
+    defaultValue: 'DEFAULT',
+    componentProps:{
+      options: [
+        {label: '默认', value: "DEFAULT"},
+      ],
+    }
+  },
+];
+
+export const step3Schemas: FormSchema[] = [
+  {
+    field: 'transportType',
+    component: 'Select',
+    label: '报警规则',
+    defaultValue: 'DEFAULT',
+    componentProps:{
+      options: [
+        {label: '默认', value: "DEFAULT"},
+      ],
+    }
+  },
+];

@@ -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,
       };
     },
   });

 <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>

-<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,
+  },
 ];