'解决冲突'

@@ -7,26 +7,49 @@
     width="500px"
     width="500px"
     @ok="handleSubmit"
     @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" />
+            <plus-outlined v-else />
+            <div class="ant-upload-text">图片上传</div>
+          </div>
+        </Upload>
+      </template>
+    </BasicForm>
   </BasicDrawer>
   </BasicDrawer>
 </template>
 </template>
 <script lang="ts">
 <script lang="ts">
   import { defineComponent, ref, computed, unref } from 'vue';
   import { defineComponent, ref, computed, unref } from 'vue';
   import { BasicForm, useForm } from '/@/components/Form';
   import { BasicForm, useForm } from '/@/components/Form';
-  import { formSchema } from './config.data';
+  import { formSchema } from './device.data';
   import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
   import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
+
   import { saveOrEditMessageConfig } from '/@/api/message/config';
   import { saveOrEditMessageConfig } from '/@/api/message/config';
   import { useMessage } from '/@/hooks/web/useMessage';
   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({
   export default defineComponent({
-    name: 'ConfigDrawer',
-    components: { BasicDrawer, BasicForm },
+    name: 'DeviceDrawer',
+    components: { BasicDrawer, BasicForm, Upload },
     emits: ['success', 'register'],
     emits: ['success', 'register'],
     setup(_, { emit }) {
     setup(_, { emit }) {
       const isUpdate = ref(true);
       const isUpdate = ref(true);
 
 
+      const devicePic = ref('');
       const [registerForm, { validate, setFieldsValue, resetFields }] = useForm({
       const [registerForm, { validate, setFieldsValue, resetFields }] = useForm({
-        labelWidth: 120,
+        labelWidth: 80,
         schemas: formSchema,
         schemas: formSchema,
         showActionButtonGroup: false,
         showActionButtonGroup: false,
       });
       });
@@ -46,7 +69,7 @@
         }
         }
       });
       });
 
 
-      const getTitle = computed(() => (!unref(isUpdate) ? '新增消息配置' : '编辑消息配置'));
+      const getTitle = computed(() => (!unref(isUpdate) ? '新增设备' : '编辑设备'));
 
 
       async function handleSubmit() {
       async function handleSubmit() {
         try {
         try {
@@ -78,13 +101,43 @@
           setDrawerProps({ confirmLoading: false });
           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 {
       return {
         registerDrawer,
         registerDrawer,
         registerForm,
         registerForm,
         getTitle,
         getTitle,
         handleSubmit,
         handleSubmit,
+        beforeUpload,
+        customUpload,
+        devicePic,
       };
       };
     },
     },
   });
   });
 </script>
 </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 {DeviceTypeEnum,DeviceState} from "/@/api/device/model/deviceModel";
+export const columns: BasicColumn[] = [
+  {
+    title: '设备名称',
+    dataIndex: 'name',
+    width: 120,
+  },
+  {
+    title: '设备类型',
+    dataIndex: 'deviceType',
+    width: 100,
+    slots:{customRender:'deviceType'},
+  },
+  {
+    title: '设备配置',
+    dataIndex: 'deviceProfile.name',
+    width: 160,
+    slots: { customRender: 'deviceProfile' },
+  },
+
+  {
+    title: '所属组织',
+    dataIndex: 'organizationId',
+    slots: { customRender: 'organizationId' },
+  },
+  {
+    title: '标签',
+    dataIndex: 'label',
+    width: 180
+  },
+  {
+    title: '状态',
+    dataIndex: 'deviceState',
+    width: 120,
+    slots: { customRender: 'deviceState' },
+  },
+
+  {
+    title: '最后连接时间',
+    dataIndex: 'lastConnectTime',
+    width: 180,
+  },
+];
+
+export const searchFormSchema: FormSchema[] = [
+  {
+    field: 'deviceType',
+    label: '设备类型',
+    component: 'Select',
+    componentProps: {
+      options: [
+        { label: '网关设备', value: DeviceTypeEnum.GATEWAY },
+        { label: '直连设备', value: DeviceTypeEnum.DIRECT_CONNECTION },
+        { label: '网关子设备', value: DeviceTypeEnum.SENSOR },
+      ],
+    },
+    colProps: { span: 4 },
+  },
+  {
+    field: 'deviceState',
+    label: '设备状态',
+    component: 'Select',
+    componentProps: {
+      options: [
+        { label: '待激活', value: DeviceState.INACTIVE },
+        { label: '在线', value: DeviceState.ONLINE },
+        { label: '离线', value: DeviceState.OFFLINE },
+      ],
+    },
+    colProps: { span: 4 },
+  },
+  {
+    field: 'name',
+    label: '设备名称',
+    component: 'Input',
+    colProps: { span: 8 },
+  },
+];
+
+
+export const formSchema: FormSchema[] = [
+  {
+    field: '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',
+  }
+];

 <template>
 <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>
       <template #toolbar>
         <a-button type="primary" @click="handleCreate"> 新增设备 </a-button>
         <a-button type="primary" @click="handleCreate"> 新增设备 </a-button>
       </template>
       </template>
-      <template #config="{ record }">
-        <a-button type="link" class="ml-2" @click="showData(record)"> 查看配置 </a-button>
-      </template>
+
       <template #deviceProfile="{ record }">
       <template #deviceProfile="{ record }">
         <a-button type="link" class="ml-2" @click="goDeviceProfile">
         <a-button type="link" class="ml-2" @click="goDeviceProfile">
           {{ record.deviceProfile.name }}
           {{ record.deviceProfile.name }}
         </a-button>
         </a-button>
       </template>
       </template>
+      <template #organizationId="{ record }">
+        {{ record.organizationDTO.name }}
+      </template>
       <template #deviceType="{ record }">
       <template #deviceType="{ record }">
         <Tag color="success" class="ml-2">
         <Tag color="success" class="ml-2">
           {{
           {{
@@ -65,29 +67,45 @@
       </template>
       </template>
     </BasicTable>
     </BasicTable>
     <ConfigDrawer @register="registerDrawer" @success="handleSuccess" />
     <ConfigDrawer @register="registerDrawer" @success="handleSuccess" />
-  </div>
+    <DeviceModal @register="registerModal" @success="handleSuccess"></DeviceModal>
+  </PageWrapper>
 </template>
 </template>
 <script lang="ts">
 <script lang="ts">
-  import { defineComponent, h } from 'vue';
+  import { defineComponent, reactive } from 'vue';
   import { DeviceState, DeviceTypeEnum } from '/@/api/device/model/deviceModel';
   import { DeviceState, DeviceTypeEnum } from '/@/api/device/model/deviceModel';
   import { BasicTable, useTable, TableAction } from '/@/components/Table';
   import { BasicTable, useTable, TableAction } from '/@/components/Table';
   import { useDrawer } from '/@/components/Drawer';
   import { useDrawer } from '/@/components/Drawer';
   import ConfigDrawer from './DeviceDrawer.vue';
   import ConfigDrawer from './DeviceDrawer.vue';
-  import { columns, searchFormSchema } from './config.data';
-  import { Modal, Tag } from 'ant-design-vue';
-  import { JsonPreview } from '/@/components/CodeEditor';
+  import { columns, searchFormSchema } from './device.data';
+  import { Tag } from 'ant-design-vue';
+  import { CodeEditor } from '/@/components/CodeEditor';
   import { useMessage } from '/@/hooks/web/useMessage';
   import { useMessage } from '/@/hooks/web/useMessage';
   import { deleteDevice, devicePage } from '/@/api/device/deviceManager';
   import { deleteDevice, devicePage } from '/@/api/device/deviceManager';
   import { PageEnum } from '/@/enums/pageEnum';
   import { PageEnum } from '/@/enums/pageEnum';
   import { useGo } from '/@/hooks/web/usePage';
   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({
   export default defineComponent({
     name: 'DeviceManagement',
     name: 'DeviceManagement',
-    components: { BasicTable, ConfigDrawer, TableAction, Tag },
+    components: {
+      BasicTable,
+      ConfigDrawer,
+      PageWrapper,
+      TableAction,
+      OrganizationIdTree,
+      CodeEditor,
+      Tag,
+      DeviceModal,
+    },
     setup() {
     setup() {
-      const go = useGo();
-      const { createMessage } = useMessage();
       const [registerDrawer, { openDrawer }] = useDrawer();
       const [registerDrawer, { openDrawer }] = useDrawer();
+      const { createMessage } = useMessage();
+      const go = useGo();
+      const searchInfo = reactive<Recordable>({});
+      const [registerModal, { openModal }] = useModal();
       const [registerTable, { reload }] = useTable({
       const [registerTable, { reload }] = useTable({
         title: '设备列表',
         title: '设备列表',
         api: devicePage,
         api: devicePage,
@@ -100,6 +118,7 @@
         showTableSetting: true,
         showTableSetting: true,
         bordered: true,
         bordered: true,
         showIndexColumn: false,
         showIndexColumn: false,
+        searchInfo: searchInfo,
         actionColumn: {
         actionColumn: {
           width: 180,
           width: 180,
           title: '操作',
           title: '操作',
@@ -108,20 +127,23 @@
           fixed: undefined,
           fixed: undefined,
         },
         },
       });
       });
-      // 新增
+
       function handleCreate() {
       function handleCreate() {
-        openDrawer(true, {
+        // openDrawer(true, {
+        //   isUpdate: false,
+        // });
+        openModal(true, {
           isUpdate: false,
           isUpdate: false,
         });
         });
       }
       }
-      // 更新
+
       function handleEdit(record: Recordable) {
       function handleEdit(record: Recordable) {
         openDrawer(true, {
         openDrawer(true, {
           record,
           record,
           isUpdate: true,
           isUpdate: true,
         });
         });
       }
       }
-      // 删除
+
       function handleDelete(record: Recordable) {
       function handleDelete(record: Recordable) {
         let ids = [record.id];
         let ids = [record.id];
         deleteDevice(ids).then(() => {
         deleteDevice(ids).then(() => {
@@ -129,17 +151,13 @@
           handleSuccess();
           handleSuccess();
         });
         });
       }
       }
-      // 刷新
+
       function handleSuccess() {
       function handleSuccess() {
         reload();
         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() {
       function goDeviceProfile() {
         go(PageEnum.DEVICE_PROFILE);
         go(PageEnum.DEVICE_PROFILE);
@@ -147,7 +165,6 @@
       return {
       return {
         registerTable,
         registerTable,
         registerDrawer,
         registerDrawer,
-        showData,
         handleCreate,
         handleCreate,
         handleEdit,
         handleEdit,
         handleDelete,
         handleDelete,
@@ -155,6 +172,9 @@
         goDeviceProfile,
         goDeviceProfile,
         DeviceTypeEnum,
         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',
+  },
+];