fix(front): 设备添加采用分步完善

@@ -7,26 +7,47 @@
     width="500px"
     @ok="handleSubmit"
   >
-    <BasicForm @register="registerForm"/>
+    <BasicForm @register="registerForm">
+      <template #iconSelect>
+        <Upload
+          name="avatar"
+          list-type="picture-card"
+          class="avatar-uploader"
+          :show-upload-list="false"
+          :customRequest="customUpload"
+          :before-upload="beforeUpload"
+        >
+          <img v-if="devicePic" :src="devicePic" alt="avatar"/>
+          <div v-else>
+            <loading-outlined v-if="loading"></loading-outlined>
+            <plus-outlined v-else></plus-outlined>
+            <div class="ant-upload-text">图片上传</div>
+          </div>
+        </Upload>
+      </template>
+    </BasicForm>
   </BasicDrawer>
 </template>
 <script lang="ts">
   import { defineComponent, ref, computed, unref } from 'vue';
   import { BasicForm, useForm } from '/@/components/Form';
-  import { formSchema } from './config.data';
+  import { formSchema } from './device.data';
   import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
   import {saveOrEditMessageConfig} from "/@/api/message/config";
   import {useMessage} from "/@/hooks/web/useMessage";
+  import {upload} from "/@/api/oss/ossFileUploader";
+  import {message, Upload} from "ant-design-vue";
+  import {FileItem} from "/@/components/Upload/src/typing";
 
   export default defineComponent({
-    name: 'ConfigDrawer',
-    components: { BasicDrawer, BasicForm },
+    name: 'DeviceDrawer',
+    components: { BasicDrawer, BasicForm,Upload },
     emits: ['success', 'register'],
     setup(_, { emit }) {
       const isUpdate = ref(true);
-
+      const devicePic = ref("");
       const [registerForm, {  validate,setFieldsValue,resetFields }] = useForm({
-        labelWidth: 120,
+        labelWidth: 80,
         schemas: formSchema,
         showActionButtonGroup: false,
       });
@@ -46,7 +67,7 @@
         }
       });
 
-      const getTitle = computed(() => (!unref(isUpdate) ? '新增消息配置' : '编辑消息配置'));
+      const getTitle = computed(() => (!unref(isUpdate) ? '新增设备' : '编辑设备'));
 
       async function handleSubmit() {
         try {
@@ -78,13 +99,43 @@
           setDrawerProps({ confirmLoading: false });
         }
       }
+      async function customUpload({file}) {
+        if (beforeUpload(file)) {
+          const formData = new FormData()
+          formData.append('file', file)
+          const response = await upload(formData);
+          if (response.fileStaticUri) {
+            devicePic.value = response.fileStaticUri;
+          }
+        }
+      }
 
+      const beforeUpload = (file: FileItem) => {
+        const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
+        if (!isJpgOrPng) {
+          message.error('只能上传图片文件!');
+        }
+        const isLt2M = file.size as number / 1024 / 1024 < 2;
+        if (!isLt2M) {
+          message.error('图片大小不能超过2MB!');
+        }
+        return isJpgOrPng && isLt2M;
+      };
       return {
         registerDrawer,
         registerForm,
         getTitle,
         handleSubmit,
+        beforeUpload,
+        customUpload,
+        devicePic
       };
     },
   });
 </script>
+<style>
+.ant-upload-select-picture-card i {
+  font-size: 32px;
+  color: #999;
+}
+</style>

+<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">
+      <DeviceStep1 @next="handleStep1Next" v-show="current === 0" />
+      <DeviceStep2
+        @prev="handleStepPrev"
+        @next="handleStep2Next"
+        v-show="current === 1"
+        v-if="initStep2"
+      />
+      <DeviceStep3 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 DeviceStep1 from "/@/views/device/step/DeviceStep1.vue";
+  import DeviceStep2 from "/@/views/device/step/DeviceStep2.vue";
+  import DeviceStep3 from "/@/views/device/step/DeviceStep3.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, DeviceStep1, DeviceStep2, DeviceStep3,
+      [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.initSetp2 = false;
+        state.initSetp3 = 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>

 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,
+    width: 120,
   },
   {
     title: '设备类型',
     dataIndex: 'deviceType',
-    width: 200,
+    width: 100,
     slots:{customRender:'deviceType'},
   },
   {
     title: '设备配置',
     dataIndex: 'deviceProfile.name',
-    width: 180,
+    width: 160,
     slots: { customRender: 'deviceProfile' },
   },
+
+  {
+    title: '所属组织',
+    dataIndex: 'organizationId',
+    slots: { customRender: 'organizationId' },
+  },
   {
     title: '标签',
     dataIndex: 'label',
     width: 180
   },
   {
-    title: '配置信息',
-    dataIndex: 'deviceInfo',
-    width: 180,
-    slots: { customRender: 'config' },
-  },
-  {
     title: '状态',
     dataIndex: 'deviceState',
     width: 120,
@@ -44,11 +43,6 @@ export const columns: BasicColumn[] = [
     dataIndex: 'lastConnectTime',
     width: 180,
   },
-  {
-    title: '创建时间',
-    dataIndex: 'createTime',
-    width: 180,
-  },
 ];
 
 export const searchFormSchema: FormSchema[] = [
@@ -87,116 +81,43 @@ export const searchFormSchema: FormSchema[] = [
 ];
 
 
-export const isMessage = (type:string)=>{
-  return type===MessageEnum.IS_SMS;
-}
-export const isEmail = (type:string)=>{
-  return type===MessageEnum.IS_EMAIL;
-}
-
 export const formSchema: FormSchema[] = [
   {
-    field: 'configName',
-    label: '配置名称',
-    required: true,
-    component:'Input'
+    field: 'icon',
+    label: '设备图片: ',
+    slot: 'iconSelect',
+    component: 'Input',
   },
   {
-    field: 'messageType',
-    label: '消息类型',
+    field: 'name',
+    label: '设备名称',
     required: true,
-    component: 'ApiSelect',
-    componentProps: {
-      api:findDictItemByCode,
-      params:{
-        dictCode:"message_type"
-      },
-      labelField:'itemText',
-      valueField:'itemValue',
-    },
+    component:'Input',
+    componentProps:{
+      maxLength:30
+    }
   },
   {
-    field: 'platformType',
-    label: '平台类型',
+    field: 'deviceType',
+    label: '设备类型',
     required: true,
     component: 'ApiSelect',
     componentProps: {
       api:findDictItemByCode,
       params:{
-        dictCode:"platform_type"
+        dictCode:"device_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,
+    field: 'label',
+    label: '设备标签',
     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 },
-      ],
-    },
+    componentProps:{
+      maxLength:255
+    }
   },
   {
     label: '备注',

 <template>
-  <div>
-    <BasicTable @register="registerTable">
+  <PageWrapper dense contentFullHeight fixedHeight contentClass="flex">
+    <OrganizationIdTree class="w-1/6 xl:w-1/5" @select="handleSelect" />
+    <BasicTable @register="registerTable" class="w-5/6 xl:w-4/5">
       <template #toolbar>
         <a-button type="primary" @click="handleCreate"> 新增设备 </a-button>
       </template>
-      <template #config="{record}">
-        <a-button type="link" class="ml-2" @click="showData(record)"> 查看配置 </a-button>
-      </template>
       <template #deviceProfile="{record}">
         <a-button type="link" class="ml-2" @click="goDeviceProfile"> {{record.deviceProfile.name}} </a-button>
       </template>
+      <template #organizationId = "{record}">
+        {{record.organizationDTO.name}}
+      </template>
       <template #deviceType = "{record}">
         <Tag color="success" class="ml-2">
           {{record.deviceType==DeviceTypeEnum.GATEWAY ?'网关设备':
@@ -44,29 +45,38 @@
       </template>
     </BasicTable>
     <ConfigDrawer @register="registerDrawer" @success="handleSuccess" />
-  </div>
+    <DeviceModal @register="registerModal" @success="handleSuccess"></DeviceModal>
+  </PageWrapper>
 </template>
 <script lang="ts">
-import { defineComponent,h} 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 './config.data';
-import {Modal, Tag} from 'ant-design-vue';
-import { CodeEditor,JsonPreview } from '/@/components/CodeEditor';
-import {useMessage} from "/@/hooks/web/useMessage";
-import {deleteDevice, devicePage} from "/@/api/device/deviceManager";
-import {PageEnum} from "/@/enums/pageEnum";
-import {useGo} from "/@/hooks/web/usePage";
+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 { CodeEditor } from '/@/components/CodeEditor';
+  import { useMessage } from "/@/hooks/web/useMessage";
+  import { deleteDevice, devicePage } from "/@/api/device/deviceManager";
+  import { PageEnum } from "/@/enums/pageEnum";
+  import { useGo } from "/@/hooks/web/usePage";
+  import { PageWrapper } from "/@/components/Page";
+  import OrganizationIdTree from "/@/views/common/OrganizationIdTree.vue";
+  import { useModal } from "/@/components/Modal";
+  import DeviceModal from "/@/views/device/DeviceModal.vue";
+
 
 export default defineComponent({
   name: 'DeviceManagement',
-  components: { BasicTable, ConfigDrawer, TableAction ,CodeEditor,Tag},
+  components: { BasicTable, ConfigDrawer,PageWrapper, TableAction ,OrganizationIdTree,CodeEditor,Tag,
+    DeviceModal},
   setup() {
     const [registerDrawer, { openDrawer }] = useDrawer();
     const {createMessage} = useMessage();
     const go = useGo();
+    const searchInfo = reactive<Recordable>({});
+    const [registerModal, { openModal }] = useModal();
     const [registerTable, { reload }] = useTable({
       title: '设备列表',
       api: devicePage,
@@ -79,6 +89,7 @@ export default defineComponent({
       showTableSetting: true,
       bordered: true,
       showIndexColumn: false,
+      searchInfo:searchInfo,
       actionColumn: {
         width: 180,
         title: '操作',
@@ -89,9 +100,12 @@ export default defineComponent({
     });
 
     function handleCreate() {
-      openDrawer(true, {
+      // openDrawer(true, {
+      //   isUpdate: false,
+      // });
+      openModal(true,{
         isUpdate: false,
-      });
+      })
     }
 
     function handleEdit(record: Recordable) {
@@ -112,12 +126,9 @@ export default defineComponent({
     function handleSuccess() {
       reload();
     }
-    function showData(record: Recordable){
-      Modal.info({
-        title: '当前配置',
-        width:480,
-        content: h(JsonPreview, { data: JSON.parse(JSON.stringify(record.deviceInfo)) }),
-      });
+    function handleSelect(organization) {
+      searchInfo.organizationId = organization;
+      handleSuccess();
     }
     function goDeviceProfile(){
       go(PageEnum.DEVICE_PROFILE)
@@ -125,14 +136,16 @@ export default defineComponent({
     return {
       registerTable,
       registerDrawer,
-      showData,
       handleCreate,
       handleEdit,
       handleDelete,
       handleSuccess,
       goDeviceProfile,
       DeviceTypeEnum,
-      DeviceState
+      DeviceState,
+      handleSelect,
+      searchInfo,
+      registerModal
     };
   },
 });

+<template>
+  <div class="step1">
+    <div class="step1-form">
+      <BasicForm @register="register">
+        <template #iconSelect>
+          <Upload
+            name="avatar"
+            list-type="picture-card"
+            class="avatar-uploader"
+            :show-upload-list="false"
+            :customRequest="customUpload"
+            :before-upload="beforeUpload"
+          >
+            <img v-if="devicePic" :src="devicePic" alt="avatar"/>
+            <div v-else>
+              <loading-outlined v-if="loading"></loading-outlined>
+              <plus-outlined v-else></plus-outlined>
+              <div class="ant-upload-text">图片上传</div>
+            </div>
+          </Upload>
+        </template>
+      </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, Upload, message} from 'ant-design-vue';
+  import {upload} from "/@/api/oss/ossFileUploader";
+  import {FileItem} from "/@/components/Upload/src/typing";
+  export default defineComponent({
+    components: {
+      BasicForm,
+      [Select.name]: Select,
+      ASelectOption: Select.Option,
+      [Input.name]: Input,
+      [Input.Group.name]: Input.Group,
+      [Divider.name]: Divider,
+      Upload
+    },
+    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) {}
+      }
+      async function customUpload({file}) {
+        if (beforeUpload(file)) {
+          const formData = new FormData()
+          formData.append('file', file)
+          const response = await upload(formData);
+          if (response.fileStaticUri) {
+            devicePic.value = response.fileStaticUri;
+          }
+        }
+      }
+
+      const beforeUpload = (file: FileItem) => {
+        const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
+        if (!isJpgOrPng) {
+          message.error('只能上传图片文件!');
+        }
+        const isLt2M = file.size as number / 1024 / 1024 < 2;
+        if (!isLt2M) {
+          message.error('图片大小不能超过2MB!');
+        }
+        return isJpgOrPng && isLt2M;
+      };
+
+      return { register, beforeUpload, customUpload, 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">
+    <a-alert message="确认转账后，资金将直接打入对方账户，无法退回。" show-icon />
+    <a-descriptions :column="1" class="mt-5">
+      <a-descriptions-item label="付款账户"> ant-design@alipay.com </a-descriptions-item>
+      <a-descriptions-item label="收款账户"> test@example.com </a-descriptions-item>
+      <a-descriptions-item label="收款人姓名"> Vben </a-descriptions-item>
+      <a-descriptions-item label="转账金额"> 500元 </a-descriptions-item>
+    </a-descriptions>
+    <a-divider />
+    <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, setProps }] = 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();
+          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>

+<template>
+  <div class="step3">
+    <a-result status="success" title="操作成功" sub-title="预计两小时内到账">
+      <template #extra>
+        <a-button type="primary" @click="redo"> 再转一笔 </a-button>
+        <a-button> 查看账单 </a-button>
+      </template>
+    </a-result>
+    <div class="desc-wrap">
+      <a-descriptions :column="1" class="mt-5">
+        <a-descriptions-item label="付款账户"> ant-design@alipay.com </a-descriptions-item>
+        <a-descriptions-item label="收款账户"> test@example.com </a-descriptions-item>
+        <a-descriptions-item label="收款人姓名"> Vben </a-descriptions-item>
+        <a-descriptions-item label="转账金额"> 500元 </a-descriptions-item>
+      </a-descriptions>
+    </div>
+  </div>
+</template>
+<script lang="ts">
+  import { defineComponent } from 'vue';
+  import { Result, Descriptions } from 'ant-design-vue';
+  export default defineComponent({
+    components: {
+      [Result.name]: Result,
+      [Descriptions.name]: Descriptions,
+      [Descriptions.Item.name]: Descriptions.Item,
+    },
+    emits: ['redo'],
+    setup(_, { emit }) {
+      return {
+        redo: () => {
+          emit('redo');
+        },
+      };
+    },
+  });
+</script>
+<style lang="less" scoped>
+  .step3 {
+    width: 600px;
+    margin: 0 auto;
+  }
+
+  .desc-wrap {
+    padding: 24px 40px;
+    margin-top: 24px;
+    background-color: @background-color-light;
+  }
+</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"
+      />
+      <Step3 v-show="current === 2" @redo="handleRedo" v-if="initSetp3" />
+    </div>
+  </PageWrapper>
+</template>
+<script lang="ts">
+  import { defineComponent, ref, reactive, toRefs } from 'vue';
+  import Step1 from './DeviceStep1.vue';
+  import Step2 from './DeviceStep2.vue';
+  import Step3 from './DeviceStep3.vue';
+  import { PageWrapper } from '/@/components/Page';
+  import { Steps } from 'ant-design-vue';
+
+  export default defineComponent({
+    name: 'FormStepPage',
+    components: {
+      Step1,
+      Step2,
+      Step3,
+      PageWrapper,
+      [Steps.name]: Steps,
+      [Steps.Step.name]: Steps.Step,
+    },
+    setup() {
+      const current = ref(0);
+
+      const state = reactive({
+        initSetp2: false,
+        initSetp3: false,
+      });
+
+      function handleStep1Next(step1Values: any) {
+        current.value++;
+        state.initSetp2 = true;
+        console.log(step1Values);
+      }
+
+      function handleStepPrev() {
+        current.value--;
+      }
+
+      function handleStep2Next(step2Values: any) {
+        current.value++;
+        state.initSetp3 = true;
+        console.log(step2Values);
+      }
+
+      function handleRedo() {
+        current.value = 0;
+        state.initSetp2 = false;
+        state.initSetp3 = 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";
+
+export const step1Schemas: 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',
+  }
+];
+
+export const step2Schemas: FormSchema[] = [
+  {
+    field: 'pwd',
+    component: 'InputPassword',
+    label: '支付密码',
+    required: true,
+    defaultValue: '123456',
+  },
+];