'设备代码合并'

sqy
1 parent c800aa87
Showing 4 changed files with 83 additions and 65 deletions
.env.development
src/views/device/DeviceModal.vue
src/views/device/step/DeviceStep1.vue
src/views/device/step/DeviceStep2.vue
--- a/.env.development
View file @e5581a5
+++ b/.env.development
View file @e5581a5
@@ -6,7 +6,7 @@ VITE_PUBLIC_PATH = /
 # Cross-domain proxy, you can configure multiple
 # Please note that no line breaks
-VITE_PROXY = [["/api","http://192.168.10.120:8082/api"],["/upload","http://192.168.10.120:3300/upload"]]
+VITE_PROXY = [["/api","http://192.168.10.116:8082/api"],["/upload","http://192.168.10.116:3300/upload"]]
 # VITE_PROXY=[["/api","https://vvbin.cn/test"]]
 # Delete console
--- a/src/views/device/DeviceModal.vue
View file @e5581a5
+++ b/src/views/device/DeviceModal.vue
View file @e5581a5
@@ -4,8 +4,8 @@
     width="55rem"
     @register="register"
     :title="getTitle"
-    @visible-change="handleVisibleChange"
     @cancel="handleCancel"
+    @ok="handleOk"
   >
     <div class="step-form-form">
       <a-steps :current="current">
@@ -14,8 +14,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,7 +26,7 @@
   </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 DeviceStep1 from '/@/views/device/step/DeviceStep1.vue';
   import DeviceStep2 from '/@/views/device/step/DeviceStep2.vue';
@@ -42,7 +43,10 @@
     props: {
       userData: { type: Object },
     },
-    setup(props) {
+    setup(_) {
+      // const DeviceStep1Ref = ref<InstanceType<typeof DeviceStep1>>();
+      const DeviceStep1Ref = ref<InstanceType<typeof DeviceStep1>>();
+      const DeviceStep2Ref = ref<InstanceType<typeof DeviceStep2>>();
       const state = reactive({
         initStep2: false,
       });
@@ -50,10 +54,10 @@
       const isUpdate = ref(true);
       const modelRef = ref({});
       const getTitle = computed(() => (!unref(isUpdate) ? '新增设备' : '编辑设备'));
-
+      // 所有参数
+      let stepState = reactive({});
       const [register] = useModalInner((data) => {
         isUpdate.value = !!data?.isUpdate;
-        data && onDataReceive(data);
       });
       function handleStepPrev() {
@@ -62,52 +66,36 @@
       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();
+        console.log('关闭弹框');
+        stepState = {};
       }
-
-      function handleVisibleChange(v) {
-        v && props.userData && nextTick(() => onDataReceive(props.userData));
+      function handleOk() {
+        // 所有参数
+        console.log(stepState);
+        console.log('确定了');
       }
-
       return {
         register,
         model: modelRef,
         getTitle,
-        handleVisibleChange,
         current,
+        DeviceStep1Ref,
+        DeviceStep2Ref,
         ...toRefs(state),
         handleStepPrev,
         handleStep1Next,
         handleStep2Next,
         handleCancel,
-        handleRedo,
+        handleOk,
       };
     },
   });
--- a/src/views/device/step/DeviceStep1.vue
View file @e5581a5
+++ b/src/views/device/step/DeviceStep1.vue
View file @e5581a5
@@ -56,7 +56,7 @@
   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';
@@ -84,7 +84,7 @@
         lat: '',
         address: '',
       });
-      const [register, { validate }] = useForm({
+      const [register, { validate, resetFields }] = useForm({
         labelWidth: 100,
         schemas: step1Schemas,
         actionColOptions: {
@@ -172,6 +172,7 @@
         visible.value = false;
       };
       return {
+        resetFields,
         positionState,
         register,
         beforeUpload,
--- a/src/views/device/step/DeviceStep2.vue
View file @e5581a5
+++ b/src/views/device/step/DeviceStep2.vue
View file @e5581a5
 <template>
   <div class="step2">
-    <div><input type="checkbox" v-model="isCreaentials" @click="checked" /> 添加凭证 </div>
+    <div
+      ><input type="checkbox" v-model="creaentialsPassword.isCreaentials" @click="checked" />
+      添加凭证
+    </div>
-    <a-form :label-col="labelCol" :wrapper-col="wrapperCol" v-if="isCreaentials">
-      <a-form-item label="凭据类型">
+    <a-form
+      ref="formRef"
+      :label-col="labelCol"
+      :wrapper-col="wrapperCol"
+      v-if="creaentialsPassword.isCreaentials"
+      :model="creaentialsPassword"
+    >
+      <a-form-item label="凭据类型" name="creantialsType">
         <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="input" 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="input"
+            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>
@@ -41,9 +58,9 @@
   </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,19 @@
       [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 options = ref([
         {
           value: 'Access token',
           label: 'Access token',
@@ -79,11 +97,15 @@
         },
       ]);
       const checked = () => {
-        isCreaentials.value = !isCreaentials.value;
+        creaentialsPassword.isCreaentials = !creaentialsPassword.isCreaentials;
       };
       const prevStep = () => {
         emit('prev');
       };
+      watch(creaentialsPassword, (newValue) => {
+        emit('next', newValue);
+      });
+
       // 切换凭证类型时，重置字段
       const handleChange = (value) => {
         if (value === 'Access token') {
@@ -96,16 +118,23 @@
           creaentialsPassword.password = '';
         }
       };
+
+      // 重置所有字段
+      function resetFields() {
+        console.log(formRef);
+        formRef.value.resetFields();
+        console.log('----');
+      }
       return {
-        ...toRefs(creaentialsPassword),
-        creaentialsType,
-        isCreaentials,
         options,
+        formRef,
+        creaentialsPassword,
         handleChange,
         prevStep,
         checked,
         labelCol: { style: { width: '150px' } },
         wrapperCol: { span: 18 },
+        resetFields,
       };
     },
   });