简柏林 / thingskit-front · Commits

Commit e5581a5423aa9ee0e536545c08d23868e66343f0

Authored by sqy
1 parent c800aa87

'设备代码合并'

Inline Side-by-side
Showing 4 changed files with 83 additions and 65 deletions
... ... @@ -6,7 +6,7 @@ VITE_PUBLIC_PATH = /
6 6
7 7 # Cross-domain proxy, you can configure multiple
8 8 # Please note that no line breaks
9   -VITE_PROXY = [["/api","http://192.168.10.120:8082/api"],["/upload","http://192.168.10.120:3300/upload"]]
  9 +VITE_PROXY = [["/api","http://192.168.10.116:8082/api"],["/upload","http://192.168.10.116:3300/upload"]]
10 10 # VITE_PROXY=[["/api","https://vvbin.cn/test"]]
11 11
12 12 # Delete console
... ...
... ... @@ -4,8 +4,8 @@
4 4 width="55rem"
5 5 @register="register"
6 6 :title="getTitle"
7   - @visible-change="handleVisibleChange"
8 7 @cancel="handleCancel"
  8 + @ok="handleOk"
9 9 >
10 10 <div class="step-form-form">
11 11 <a-steps :current="current">
... ... @@ -14,8 +14,9 @@
14 14 </a-steps>
15 15 </div>
16 16 <div class="mt-5">
17   - <DeviceStep1 @next="handleStep1Next" v-show="current === 0" />
  17 + <DeviceStep1 @next="handleStep1Next" v-show="current === 0" ref="DeviceStep1Ref" />
18 18 <DeviceStep2
  19 + ref="DeviceStep2Ref"
19 20 @prev="handleStepPrev"
20 21 @next="handleStep2Next"
21 22 v-show="current === 1"
... ... @@ -25,7 +26,7 @@
25 26 </BasicModal>
26 27 </template>
27 28 <script lang="ts">
28   - import { defineComponent, ref, nextTick, computed, unref, reactive, toRefs } from 'vue';
  29 + import { defineComponent, ref, computed, unref, reactive, toRefs } from 'vue';
29 30 import { BasicModal, useModalInner } from '/@/components/Modal';
30 31 import DeviceStep1 from '/@/views/device/step/DeviceStep1.vue';
31 32 import DeviceStep2 from '/@/views/device/step/DeviceStep2.vue';
... ... @@ -42,7 +43,10 @@
42 43 props: {
43 44 userData: { type: Object },
44 45 },
45   - setup(props) {
  46 + setup(_) {
  47 + // const DeviceStep1Ref = ref<InstanceType<typeof DeviceStep1>>();
  48 + const DeviceStep1Ref = ref<InstanceType<typeof DeviceStep1>>();
  49 + const DeviceStep2Ref = ref<InstanceType<typeof DeviceStep2>>();
46 50 const state = reactive({
47 51 initStep2: false,
48 52 });
... ... @@ -50,10 +54,10 @@
50 54 const isUpdate = ref(true);
51 55 const modelRef = ref({});
52 56 const getTitle = computed(() => (!unref(isUpdate) ? '新增设备' : '编辑设备'));
53   -
  57 + // 所有参数
  58 + let stepState = reactive({});
54 59 const [register] = useModalInner((data) => {
55 60 isUpdate.value = !!data?.isUpdate;
56   - data && onDataReceive(data);
57 61 });
58 62
59 63 function handleStepPrev() {
... ... @@ -62,52 +66,36 @@
62 66 function handleStep1Next(step1Values: any) {
63 67 current.value++;
64 68 state.initStep2 = true;
65   - console.log(step1Values);
  69 + stepState = { ...step1Values };
66 70 }
67 71 function handleStep2Next(step2Values: any) {
68   - current.value++;
69   - console.log(step2Values);
70   - }
71   - function handleRedo() {
72   - current.value = 0;
73   - state.initStep2 = false;
  72 + stepState = { ...stepState, ...step2Values };
74 73 }
75 74 function handleCancel() {
76   - console.log('关闭了弹框');
77   - }
78   -
79   - function onDataReceive(data) {
80   - console.log('Data Received', data);
81   - // 方式1;
82   - // setFieldsValue({
83   - // field2: data.data,
84   - // field1: data.info,
85   - // });
86   -
87   - // // 方式2
88   - modelRef.value = { field2: data.data, field1: data.info };
89   -
90   - // setProps({
91   - // model:{ field2: data.data, field1: data.info }
92   - // })
  75 + current.value = 0;
  76 + DeviceStep1Ref?.value?.resetFields();
  77 + DeviceStep2Ref?.value?.resetFields();
  78 + console.log('关闭弹框');
  79 + stepState = {};
93 80 }
94   -
95   - function handleVisibleChange(v) {
96   - v && props.userData && nextTick(() => onDataReceive(props.userData));
  81 + function handleOk() {
  82 + // 所有参数
  83 + console.log(stepState);
  84 + console.log('确定了');
97 85 }
98   -
99 86 return {
100 87 register,
101 88 model: modelRef,
102 89 getTitle,
103   - handleVisibleChange,
104 90 current,
  91 + DeviceStep1Ref,
  92 + DeviceStep2Ref,
105 93 ...toRefs(state),
106 94 handleStepPrev,
107 95 handleStep1Next,
108 96 handleStep2Next,
109 97 handleCancel,
110   - handleRedo,
  98 + handleOk,
111 99 };
112 100 },
113 101 });
... ...
... ... @@ -56,7 +56,7 @@
56 56 import { useScript } from '/@/hooks/web/useScript';
57 57 import { ScrollActionType } from '/@/components/Container/index';
58 58 import { Input, Divider, Upload, message, Modal, Form, Row, Col } from 'ant-design-vue';
59   - import { EnvironmentTwoTone, LoadingOutlined, PlusOutlined } from '@ant-design/icons-vue';
  59 + import { EnvironmentTwoTone, PlusOutlined } from '@ant-design/icons-vue';
60 60 import { upload } from '/@/api/oss/ossFileUploader';
61 61 import { FileItem } from '/@/components/Upload/src/typing';
62 62
... ... @@ -84,7 +84,7 @@
84 84 lat: '',
85 85 address: '',
86 86 });
87   - const [register, { validate }] = useForm({
  87 + const [register, { validate, resetFields }] = useForm({
88 88 labelWidth: 100,
89 89 schemas: step1Schemas,
90 90 actionColOptions: {
... ... @@ -172,6 +172,7 @@
172 172 visible.value = false;
173 173 };
174 174 return {
  175 + resetFields,
175 176 positionState,
176 177 register,
177 178 beforeUpload,
... ...
1 1 <template>
2 2 <div class="step2">
3   - <div><input type="checkbox" v-model="isCreaentials" @click="checked" /> 添加凭证 </div>
  3 + <div
  4 + ><input type="checkbox" v-model="creaentialsPassword.isCreaentials" @click="checked" />
  5 + 添加凭证
  6 + </div>
4 7
5   - <a-form :label-col="labelCol" :wrapper-col="wrapperCol" v-if="isCreaentials">
6   - <a-form-item label="凭据类型">
  8 + <a-form
  9 + ref="formRef"
  10 + :label-col="labelCol"
  11 + :wrapper-col="wrapperCol"
  12 + v-if="creaentialsPassword.isCreaentials"
  13 + :model="creaentialsPassword"
  14 + >
  15 + <a-form-item label="凭据类型" name="creantialsType">
7 16 <a-select
8   - v-model:value="creaentialsType"
  17 + v-model:value="creaentialsPassword.creaentialsType"
9 18 style="width: 200px"
10 19 @change="handleChange"
11 20 placeholder="请选择凭据类型"
12 21 :options="options"
13 22 />
14 23 </a-form-item>
15   - <div v-if="creaentialsType === 'Access token'">
16   - <a-form-item label="访问令牌">
17   - <a-input type="input" style="width: 200px" v-model:value="token" />
  24 + <div v-if="creaentialsPassword.creaentialsType === 'Access token'">
  25 + <a-form-item label="访问令牌" name="token">
  26 + <a-input type="input" style="width: 200px" v-model:value="creaentialsPassword.token" />
18 27 </a-form-item>
19 28 </div>
20   - <div v-else-if="creaentialsType === 'X.509'">
21   - <a-form-item label="RSA公钥">
22   - <a-input type="input" style="width: 200px" v-model:value="publicKey" />
  29 + <div v-else-if="creaentialsPassword.creaentialsType === 'X.509'">
  30 + <a-form-item label="RSA公钥" name="publicKey">
  31 + <a-input
  32 + type="input"
  33 + style="width: 200px"
  34 + v-model:value="creaentialsPassword.publicKey"
  35 + />
23 36 </a-form-item>
24 37 </div>
25 38 <div v-else>
26   - <a-form-item label="客户端ID">
27   - <a-input type="input" style="width: 200px" v-model:value="clientId" />
  39 + <a-form-item label="客户端ID" name="clientId">
  40 + <a-input type="input" style="width: 200px" v-model:value="creaentialsPassword.clientId" />
28 41 </a-form-item>
29   - <a-form-item label="用户名">
30   - <a-input type="input" style="width: 200px" v-model:value="username" />
  42 + <a-form-item label="用户名" name="username">
  43 + <a-input type="input" style="width: 200px" v-model:value="creaentialsPassword.username" />
31 44 </a-form-item>
32   - <a-form-item label="密码">
33   - <a-input type="password" style="width: 200px" v-model:value="password" />
  45 + <a-form-item label="密码" name="password">
  46 + <a-input
  47 + type="password"
  48 + style="width: 200px"
  49 + v-model:value="creaentialsPassword.password"
  50 + />
34 51 </a-form-item>
35 52 </div>
36 53 </a-form>
... ... @@ -41,9 +58,9 @@
41 58 </div>
42 59 </template>
43 60 <script lang="ts">
44   - import { defineComponent, reactive, ref, toRefs } from 'vue';
  61 + import { defineComponent, reactive, ref, watch } from 'vue';
45 62
46   - import { Input, Form, Select, Button, SelectProps } from 'ant-design-vue';
  63 + import { Input, Form, Select, Button } from 'ant-design-vue';
47 64 export default defineComponent({
48 65 components: {
49 66 [Form.name]: Form,
... ... @@ -52,18 +69,19 @@
52 69 [Select.name]: Select,
53 70 [Button.name]: Button,
54 71 },
55   - emits: ['prev'],
  72 + emits: ['prev', 'next'],
56 73 setup(_, { emit }) {
57   - const isCreaentials = ref(false);
58   - const creaentialsType = ref('Access token');
  74 + const formRef = ref();
59 75 const creaentialsPassword = reactive({
  76 + isCreaentials: false,
  77 + creaentialsType: 'Access token',
60 78 token: '',
61 79 publicKey: '',
62 80 clientId: '',
63 81 username: '',
64 82 password: '',
65 83 });
66   - const options = ref<SelectProps['options']>([
  84 + const options = ref([
67 85 {
68 86 value: 'Access token',
69 87 label: 'Access token',
... ... @@ -79,11 +97,15 @@
79 97 },
80 98 ]);
81 99 const checked = () => {
82   - isCreaentials.value = !isCreaentials.value;
  100 + creaentialsPassword.isCreaentials = !creaentialsPassword.isCreaentials;
83 101 };
84 102 const prevStep = () => {
85 103 emit('prev');
86 104 };
  105 + watch(creaentialsPassword, (newValue) => {
  106 + emit('next', newValue);
  107 + });
  108 +
87 109 // 切换凭证类型时，重置字段
88 110 const handleChange = (value) => {
89 111 if (value === 'Access token') {
... ... @@ -96,16 +118,23 @@
96 118 creaentialsPassword.password = '';
97 119 }
98 120 };
  121 +
  122 + // 重置所有字段
  123 + function resetFields() {
  124 + console.log(formRef);
  125 + formRef.value.resetFields();
  126 + console.log('----');
  127 + }
99 128 return {
100   - ...toRefs(creaentialsPassword),
101   - creaentialsType,
102   - isCreaentials,
103 129 options,
  130 + formRef,
  131 + creaentialsPassword,
104 132 handleChange,
105 133 prevStep,
106 134 checked,
107 135 labelCol: { style: { width: '150px' } },
108 136 wrapperCol: { span: 18 },
  137 + resetFields,
109 138 };
110 139 },
111 140 });
... ...