fix(front): 添加设备配置分步操作

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