简柏林 / thingskit-front · Commits

Commit 0ec5a22fa5b1d0d1e9ff32f0f7a50cf732e46820

Authored by fengwotao
1 parent be28a5e3

fix：DEFECT-659 租户默认设备配置名字不能修改

Inline Side-by-side
Showing 3 changed files with 418 additions and 419 deletions
1 <template> 1 <template>
2 <div> 2 <div>
3 - <BasicModal  
4 - v-bind="$attrs"  
5 - width="55rem"  
6 - @register="register"  
7 - :title="getTitle"  
8 - @ok="handleSubmit"  
9 - @cancel="handleCancel"  
10 - :showOkBtn="isShowOkBtnFalse"  
11 - > 3 + <BasicModal v-bind="$attrs" width="55rem" @register="register" :title="getTitle" @ok="handleSubmit"
  4 + @cancel="handleCancel" :showOkBtn="isShowOkBtnFalse">
12 <div class="step-form-form"> 5 <div class="step-form-form">
13 <a-steps :current="current"> 6 <a-steps :current="current">
14 <a-step title="设备配置" /> 7 <a-step title="设备配置" />
@@ -18,281 +11,289 @@ @@ -18,281 +11,289 @@
18 <div class="mt-5"> 11 <div class="mt-5">
19 <!-- 设备配置 --> 12 <!-- 设备配置 -->
20 <div v-show="current === 0"> 13 <div v-show="current === 0">
21 - <DeviceProfileStep1 ref="DeviceProfileStep1Ref" @next="handleStepNext1"  
22 - /></div> 14 + <DeviceProfileStep1 ref="DeviceProfileStep1Ref" @next="handleStepNext1" />
  15 + </div>
23 <!-- 设备配置 --> 16 <!-- 设备配置 -->
24 <!-- 传输配置 --> 17 <!-- 传输配置 -->
25 <div v-show="current === 1"> 18 <div v-show="current === 1">
26 - <DeviceProfileStep2 ref="DeviceProfileStep2Ref" @prev="handleStepPrev"  
27 - /></div> 19 + <DeviceProfileStep2 ref="DeviceProfileStep2Ref" @prev="handleStepPrev" />
  20 + </div>
28 <!-- 传输配置 --> 21 <!-- 传输配置 -->
29 </div> 22 </div>
30 </BasicModal> 23 </BasicModal>
31 </div> 24 </div>
32 </template> 25 </template>
33 <script lang="ts"> 26 <script lang="ts">
34 - import {  
35 - defineComponent,  
36 - nextTick,  
37 - ref,  
38 - computed,  
39 - unref,  
40 - getCurrentInstance,  
41 - reactive,  
42 - } from 'vue';  
43 - import { BasicModal, useModalInner } from '/@/components/Modal';  
44 - import DeviceProfileStep1 from '/@/views/device/profiles/step/DeviceProfileStep1.vue';  
45 - import DeviceProfileStep2 from '/@/views/device/profiles/step/DeviceProfileStep2.vue';  
46 - import { Steps } from 'ant-design-vue';  
47 - import { deviceConfigAddOrEdit, deviceConfigGetDetail } from '/@/api/device/deviceConfigApi';  
48 - import { useMessage } from '/@/hooks/web/useMessage'; 27 +import {
  28 + defineComponent,
  29 + nextTick,
  30 + ref,
  31 + computed,
  32 + unref,
  33 + getCurrentInstance,
  34 + reactive,
  35 +} from 'vue';
  36 +import { BasicModal, useModalInner } from '/@/components/Modal';
  37 +import DeviceProfileStep1 from '/@/views/device/profiles/step/DeviceProfileStep1.vue';
  38 +import DeviceProfileStep2 from '/@/views/device/profiles/step/DeviceProfileStep2.vue';
  39 +import { Steps } from 'ant-design-vue';
  40 +import { deviceConfigAddOrEdit, deviceConfigGetDetail } from '/@/api/device/deviceConfigApi';
  41 +import { useMessage } from '/@/hooks/web/useMessage';
  42 +
  43 +export default defineComponent({
  44 + name: 'DeviceModal',
  45 + components: {
  46 + BasicModal,
  47 + DeviceProfileStep1,
  48 + DeviceProfileStep2,
  49 + [Steps.name]: Steps,
  50 + [Steps.Step.name]: Steps.Step,
  51 + },
  52 + props: {
  53 + userData: { type: Object },
  54 + },
  55 + emits: ['success', 'register', 'handleStepPrev', 'handleStep3Next', 'handleRedo'],
  56 + setup(_, { emit }) {
  57 + const { proxy } = getCurrentInstance() as any;
  58 + const DeviceProfileStep1Ref = ref(null);
  59 + const DeviceProfileStep2Ref = ref(null);
  60 + const { createMessage } = useMessage();
  61 + let postDeviceConfogData: any = reactive({});
  62 + let getStepOneData: any = reactive({});
  63 + let getStepTwoData: any = reactive({});
  64 + const editData: any = ref({});
  65 + const postEditId = ref('');
  66 + const createTime = ref('');
  67 + const current = ref(0);
  68 + const isUpdate = ref(0);
  69 + const isShowOkBtnFalse = ref(true);
  70 + const isNextStatus = ref(false);
  71 + let transportTypeObj = reactive({
  72 + transportType: '',
  73 + });
  74 + let profileDataObj: any = reactive({
  75 + profileData: null,
  76 + });
  77 + let isEdit = ref(true);
  78 + let noEditObj: any = reactive({});
  79 + const getTitle = computed(() =>
  80 + isUpdate.value == 1 ? '新增设备配置' : isUpdate.value == 2 ? '编辑设备配置' : '设备配置详情'
  81 + );
  82 + const editTransportType = ref('');
  83 + const getViewTitle = computed(() => (!unref(isShowOkBtnFalse) ? '设备配置详情' : ''));
  84 + const [register, { closeModal }] = useModalInner(async (data) => {
  85 + isUpdate.value = data.isUpdate;
  86 + if (isUpdate.value == 1) {
  87 + handleCancel();
  88 + isShowOkBtnFalse.value = true;
  89 + current.value = 0;
  90 + isEdit.value = false;
  91 + proxy.$refs.DeviceProfileStep1Ref.editOrAddNameStatus(false)
  92 + } else if (isUpdate.value == 2) {
  93 + isEdit.value = true;
  94 + handleCancel();
  95 + isShowOkBtnFalse.value = true;
  96 + current.value = 0;
  97 + postEditId.value = data.record.id;
  98 + createTime.value = data.record.createTime;
  99 + editTransportType.value = data.record.transportType;
  100 + editData.value = await deviceConfigGetDetail(postEditId.value);
  101 + proxy.$refs.DeviceProfileStep1Ref.setStepOneFieldsValueFunc({
  102 + name: editData.value.name,
  103 + defaultRuleChainId: editData.value.defaultRuleChainId,
  104 + defaultQueueName: editData.value.defaultQueueName,
  105 + description: editData.value.description,
  106 + image: editData.value.image,
  107 + });
  108 + if (editData.value.default) {
  109 + proxy.$refs.DeviceProfileStep1Ref.editOrAddNameStatus(true)
  110 +
  111 + } else {
  112 + proxy.$refs.DeviceProfileStep1Ref.editOrAddNameStatus(false)
49 113
50 - export default defineComponent({  
51 - name: 'DeviceModal',  
52 - components: {  
53 - BasicModal,  
54 - DeviceProfileStep1,  
55 - DeviceProfileStep2,  
56 - [Steps.name]: Steps,  
57 - [Steps.Step.name]: Steps.Step,  
58 - },  
59 - props: {  
60 - userData: { type: Object },  
61 - },  
62 - emits: ['success', 'register', 'handleStepPrev', 'handleStep3Next', 'handleRedo'],  
63 - setup(_, { emit }) {  
64 - const { proxy } = getCurrentInstance() as any;  
65 - const DeviceProfileStep1Ref = ref(null);  
66 - const DeviceProfileStep2Ref = ref(null);  
67 - const { createMessage } = useMessage();  
68 - let postDeviceConfogData: any = reactive({});  
69 - let getStepOneData: any = reactive({});  
70 - let getStepTwoData: any = reactive({});  
71 - const editData: any = ref({});  
72 - const postEditId = ref('');  
73 - const createTime = ref('');  
74 - const current = ref(0);  
75 - const isUpdate = ref(0);  
76 - const isShowOkBtnFalse = ref(true);  
77 - const isNextStatus = ref(false);  
78 - let transportTypeObj = reactive({  
79 - transportType: '',  
80 - });  
81 - let profileDataObj: any = reactive({  
82 - profileData: null,  
83 - });  
84 - let isEdit = ref(true);  
85 - let noEditObj: any = reactive({});  
86 - const getTitle = computed(() =>  
87 - isUpdate.value == 1 ? '新增设备配置' : isUpdate.value == 2 ? '编辑设备配置' : '设备配置详情'  
88 - );  
89 - const editTransportType = ref('');  
90 - const getViewTitle = computed(() => (!unref(isShowOkBtnFalse) ? '设备配置详情' : ''));  
91 - const [register, { closeModal }] = useModalInner(async (data) => {  
92 - isUpdate.value = data.isUpdate;  
93 - if (isUpdate.value == 1) {  
94 - handleCancel();  
95 - isShowOkBtnFalse.value = true;  
96 - current.value = 0;  
97 - isEdit.value = false;  
98 - } else if (isUpdate.value == 2) {  
99 - isEdit.value = true;  
100 - handleCancel();  
101 - isShowOkBtnFalse.value = true;  
102 - current.value = 0;  
103 - postEditId.value = data.record.id;  
104 - createTime.value = data.record.createTime;  
105 - editTransportType.value = data.record.transportType;  
106 - editData.value = await deviceConfigGetDetail(postEditId.value);  
107 - proxy.$refs.DeviceProfileStep1Ref.setStepOneFieldsValueFunc({  
108 - name: editData.value.name,  
109 - defaultRuleChainId: editData.value.defaultRuleChainId,  
110 - defaultQueueName: editData.value.defaultQueueName,  
111 - description: editData.value.description,  
112 - image: editData.value.image,  
113 - });  
114 - noEditObj = {  
115 - id: editData.value.id,  
116 - name: editData.value?.name,  
117 - createTime: createTime.value,  
118 - transportType: editTransportType.value,  
119 - type: editData.value?.type,  
120 - profileData: editData.value?.profileData,  
121 - defaultQueueName: editData.value.defaultQueueName,  
122 - image: editData.value.image,  
123 - defaultRuleChainId: editData.value.defaultRuleChainId,  
124 - description: editData.value.description,  
125 - tenantId: editData.value.tenantId,  
126 - };  
127 - } else if (isUpdate.value == 3) {  
128 - handleCancel();  
129 - isShowOkBtnFalse.value = false;  
130 - current.value = 0;  
131 - postEditId.value = data.record.id;  
132 - createTime.value = data.record.createTime;  
133 - editData.value = await deviceConfigGetDetail(postEditId.value);  
134 - proxy.$refs.DeviceProfileStep1Ref.setStepOneFieldsValueFunc({  
135 - name: editData.value.name,  
136 - defaultRuleChainId: editData.value.defaultRuleChainId,  
137 - defaultQueueName: editData.value.defaultQueueName,  
138 - description: editData.value.description,  
139 - image: editData.value.image,  
140 - });  
141 - }  
142 - });  
143 - function handleStepPrev() {  
144 - current.value--;  
145 - if (isUpdate.value == 2) {  
146 - isEdit.value = true;  
147 - noEditObj = {  
148 - id: editData.value.id,  
149 - name: editData.value?.name,  
150 - createTime: createTime.value,  
151 - transportType: editTransportType.value,  
152 - type: editData.value?.type,  
153 - profileData: editData.value?.profileData,  
154 - defaultQueueName: editData.value.defaultQueueName,  
155 - image: editData.value.image,  
156 - defaultRuleChainId: editData.value.defaultRuleChainId,  
157 - description: editData.value.description,  
158 - tenantId: editData.value.tenantId,  
159 - };  
160 - nextTick(async () => {  
161 - let getPic = null;  
162 - const getStep1Obj = await proxy.$refs.DeviceProfileStep1Ref?.getStep1Func();  
163 - getPic = getStep1Obj.icon;  
164 - Object.assign(noEditObj, { image: getPic }, getStep1Obj.key);  
165 - });  
166 - }  
167 - }  
168 - //第一步  
169 - function handleStepNext1(v, v1) {  
170 - isNextStatus.value = true;  
171 - if (isNextStatus.value) {  
172 - getStepOneData = {  
173 - ...v,  
174 - ...{ image: v1 },  
175 - };  
176 - }  
177 - current.value++;  
178 - if (isUpdate.value == 2) {  
179 - isEdit.value = false;  
180 - proxy.$refs.DeviceProfileStep2Ref?.setStepTwoFieldsValueFunc(editData.value);  
181 - } else if (isUpdate.value == 3) {  
182 - proxy.$refs.DeviceProfileStep2Ref?.setStepTwoFieldsValueFunc(editData.value);  
183 } 114 }
  115 + noEditObj = {
  116 + id: editData.value.id,
  117 + name: editData.value?.name,
  118 + createTime: createTime.value,
  119 + transportType: editTransportType.value,
  120 + type: editData.value?.type,
  121 + profileData: editData.value?.profileData,
  122 + defaultQueueName: editData.value.defaultQueueName,
  123 + image: editData.value.image,
  124 + defaultRuleChainId: editData.value.defaultRuleChainId,
  125 + description: editData.value.description,
  126 + tenantId: editData.value.tenantId,
  127 + };
  128 + } else if (isUpdate.value == 3) {
  129 + handleCancel();
  130 + isShowOkBtnFalse.value = false;
  131 + current.value = 0;
  132 + postEditId.value = data.record.id;
  133 + createTime.value = data.record.createTime;
  134 + editData.value = await deviceConfigGetDetail(postEditId.value);
  135 + proxy.$refs.DeviceProfileStep1Ref.setStepOneFieldsValueFunc({
  136 + name: editData.value.name,
  137 + defaultRuleChainId: editData.value.defaultRuleChainId,
  138 + defaultQueueName: editData.value.defaultQueueName,
  139 + description: editData.value.description,
  140 + image: editData.value.image,
  141 + });
184 } 142 }
185 - const handleSubmit = async () => {  
186 - let getPic = null;  
187 - getStepTwoData = await proxy.$refs.DeviceProfileStep2Ref?.getStep2DataFunc();  
188 - profileDataObj.profileData = getStepTwoData;  
189 - transportTypeObj.transportType = getStepTwoData?.transportConfiguration?.transportType;  
190 - delete profileDataObj?.profileData?.transportConfiguration?.transportType;  
191 - //没有点击下一步  
192 - if (!isNextStatus.value) { 143 + });
  144 + function handleStepPrev() {
  145 + current.value--;
  146 + if (isUpdate.value == 2) {
  147 + isEdit.value = true;
  148 + noEditObj = {
  149 + id: editData.value.id,
  150 + name: editData.value?.name,
  151 + createTime: createTime.value,
  152 + transportType: editTransportType.value,
  153 + type: editData.value?.type,
  154 + profileData: editData.value?.profileData,
  155 + defaultQueueName: editData.value.defaultQueueName,
  156 + image: editData.value.image,
  157 + defaultRuleChainId: editData.value.defaultRuleChainId,
  158 + description: editData.value.description,
  159 + tenantId: editData.value.tenantId,
  160 + };
  161 + nextTick(async () => {
  162 + let getPic = null;
193 const getStep1Obj = await proxy.$refs.DeviceProfileStep1Ref?.getStep1Func(); 163 const getStep1Obj = await proxy.$refs.DeviceProfileStep1Ref?.getStep1Func();
194 getPic = getStep1Obj.icon; 164 getPic = getStep1Obj.icon;
195 - getStepOneData = {  
196 - ...getStep1Obj.key,  
197 - ...{ image: getPic },  
198 - };  
199 Object.assign(noEditObj, { image: getPic }, getStep1Obj.key); 165 Object.assign(noEditObj, { image: getPic }, getStep1Obj.key);
200 - }  
201 - const id = isUpdate.value == 1 ? '' : postEditId.value;  
202 - const createTimePost = isUpdate.value == 1 ? {} : { createTime: createTime.value };  
203 -  
204 - if (Object.keys(getStepTwoData?.transportConfiguration).length == 0) {  
205 - profileDataObj.profileData = null;  
206 - }  
207 - postDeviceConfogData = {  
208 - ...getStepOneData,  
209 - ...profileDataObj,  
210 - ...transportTypeObj,  
211 - id,  
212 - ...createTimePost, 166 + });
  167 + }
  168 + }
  169 + //第一步
  170 + function handleStepNext1(v, v1) {
  171 + isNextStatus.value = true;
  172 + if (isNextStatus.value) {
  173 + getStepOneData = {
  174 + ...v,
  175 + ...{ image: v1 },
213 }; 176 };
214 - if (isUpdate.value == 1) {  
215 - delete postDeviceConfogData.id;  
216 - }  
217 - let isMappingsKey = ref(false);  
218 - let isMappingValue = ref(false);  
219 - let isQueryings = ref(false);  
220 - let isOIDRepet = ref(false);  
221 - postDeviceConfogData?.profileData?.transportConfiguration?.communicationConfigs?.forEach(  
222 - (f: any) => {  
223 - if (f.spec == 'TELEMETRY_QUERYING' || f.spec == 'CLIENT_ATTRIBUTES_QUERYING') {  
224 - if (f.queryingFrequencyMs == null) {  
225 - isQueryings.value = true;  
226 - return createMessage.error('请填写查询频率');  
227 - } else {  
228 - isQueryings.value = false;  
229 - }  
230 - }  
231 - if (f.mappings.length == 0) {  
232 - isMappingsKey.value = true;  
233 - isMappingValue.value = true; 177 + }
  178 + current.value++;
  179 + if (isUpdate.value == 2) {
  180 + isEdit.value = false;
  181 + proxy.$refs.DeviceProfileStep2Ref?.setStepTwoFieldsValueFunc(editData.value);
  182 + } else if (isUpdate.value == 3) {
  183 + proxy.$refs.DeviceProfileStep2Ref?.setStepTwoFieldsValueFunc(editData.value);
  184 + }
  185 + }
  186 + const handleSubmit = async () => {
  187 + let getPic = null;
  188 + getStepTwoData = await proxy.$refs.DeviceProfileStep2Ref?.getStep2DataFunc();
  189 + profileDataObj.profileData = getStepTwoData;
  190 + transportTypeObj.transportType = getStepTwoData?.transportConfiguration?.transportType;
  191 + delete profileDataObj?.profileData?.transportConfiguration?.transportType;
  192 + //没有点击下一步
  193 + if (!isNextStatus.value) {
  194 + const getStep1Obj = await proxy.$refs.DeviceProfileStep1Ref?.getStep1Func();
  195 + getPic = getStep1Obj.icon;
  196 + getStepOneData = {
  197 + ...getStep1Obj.key,
  198 + ...{ image: getPic },
  199 + };
  200 + Object.assign(noEditObj, { image: getPic }, getStep1Obj.key);
  201 + }
  202 + const id = isUpdate.value == 1 ? '' : postEditId.value;
  203 + const createTimePost = isUpdate.value == 1 ? {} : { createTime: createTime.value };
  204 +
  205 + if (Object.keys(getStepTwoData?.transportConfiguration).length == 0) {
  206 + profileDataObj.profileData = null;
  207 + }
  208 + postDeviceConfogData = {
  209 + ...getStepOneData,
  210 + ...profileDataObj,
  211 + ...transportTypeObj,
  212 + id,
  213 + ...createTimePost,
  214 + };
  215 + if (isUpdate.value == 1) {
  216 + delete postDeviceConfogData.id;
  217 + }
  218 + let isMappingsKey = ref(false);
  219 + let isMappingValue = ref(false);
  220 + let isQueryings = ref(false);
  221 + let isOIDRepet = ref(false);
  222 + postDeviceConfogData?.profileData?.transportConfiguration?.communicationConfigs?.forEach(
  223 + (f: any) => {
  224 + if (f.spec == 'TELEMETRY_QUERYING' || f.spec == 'CLIENT_ATTRIBUTES_QUERYING') {
  225 + if (f.queryingFrequencyMs == null) {
  226 + isQueryings.value = true;
  227 + return createMessage.error('请填写查询频率');
234 } else { 228 } else {
235 - f.mappings.forEach((f1) => {  
236 - const findNoneKey = Object.keys(f1).includes('');  
237 - if (findNoneKey) {  
238 - isMappingsKey.value = true;  
239 - }  
240 - });  
241 - f.mappings.forEach((f2) => {  
242 - const findNoneVal = Object.values(f2).includes('');  
243 - if (findNoneVal) {  
244 - isMappingValue.value = true;  
245 - }  
246 - });  
247 - //新增OID不能重复=====同一层级的OID不能重复  
248 - f.mappings.forEach((item, _) => {  
249 - if (f.mappings.some((citem) => citem !== item && citem.oid === item.oid)) {  
250 - isOIDRepet.value = true;  
251 - }  
252 - }); 229 + isQueryings.value = false;
253 } 230 }
254 } 231 }
255 - );  
256 - if (isQueryings.value) return createMessage.error('请填写查询频率');  
257 - if (isMappingsKey.value) return createMessage.error('请填写Date key和OID');  
258 - if (isMappingValue.value) return createMessage.error('请填写Date key和OID');  
259 - if (isOIDRepet.value) return createMessage.error('OID不能重复');  
260 - deviceConfigAddOrEdit(isEdit.value ? noEditObj : postDeviceConfogData)  
261 - .then((res) => {  
262 - if (!res) return;  
263 - createMessage.success(isUpdate.value == 1 ? '新增' + '成功' : '编辑' + '成功');  
264 - closeModal();  
265 - emit('success');  
266 - isNextStatus.value = false;  
267 - })  
268 - .catch((e) => {  
269 - createMessage.error(e);  
270 - });  
271 - };  
272 - const handleCancel = () => {  
273 - nextTick(() => {  
274 - proxy.$refs.DeviceProfileStep1Ref?.customResetStepOneFunc();  
275 - proxy.$refs.DeviceProfileStep2Ref?.customClearStepTwoValueFunc(); 232 + if (f.mappings.length == 0) {
  233 + isMappingsKey.value = true;
  234 + isMappingValue.value = true;
  235 + } else {
  236 + f.mappings.forEach((f1) => {
  237 + const findNoneKey = Object.keys(f1).includes('');
  238 + if (findNoneKey) {
  239 + isMappingsKey.value = true;
  240 + }
  241 + });
  242 + f.mappings.forEach((f2) => {
  243 + const findNoneVal = Object.values(f2).includes('');
  244 + if (findNoneVal) {
  245 + isMappingValue.value = true;
  246 + }
  247 + });
  248 + //新增OID不能重复=====同一层级的OID不能重复
  249 + f.mappings.forEach((item, _) => {
  250 + if (f.mappings.some((citem) => citem !== item && citem.oid === item.oid)) {
  251 + isOIDRepet.value = true;
  252 + }
  253 + });
  254 + }
  255 + }
  256 + );
  257 + if (isQueryings.value) return createMessage.error('请填写查询频率');
  258 + if (isMappingsKey.value) return createMessage.error('请填写Date key和OID');
  259 + if (isMappingValue.value) return createMessage.error('请填写Date key和OID');
  260 + if (isOIDRepet.value) return createMessage.error('OID不能重复');
  261 + deviceConfigAddOrEdit(isEdit.value ? noEditObj : postDeviceConfogData)
  262 + .then((res) => {
  263 + if (!res) return;
  264 + createMessage.success(isUpdate.value == 1 ? '新增' + '成功' : '编辑' + '成功');
  265 + closeModal();
  266 + emit('success');
  267 + isNextStatus.value = false;
  268 + })
  269 + .catch((e) => {
  270 + createMessage.error(e);
276 }); 271 });
277 - };  
278 - function handleRedo() {  
279 - current.value = 0;  
280 - }  
281 - return {  
282 - isShowOkBtnFalse,  
283 - DeviceProfileStep2Ref,  
284 - DeviceProfileStep1Ref,  
285 - editData,  
286 - handleSubmit,  
287 - handleCancel,  
288 - register,  
289 - getTitle,  
290 - getViewTitle,  
291 - current,  
292 - handleStepPrev,  
293 - handleStepNext1,  
294 - handleRedo,  
295 - };  
296 - },  
297 - }); 272 + };
  273 + const handleCancel = () => {
  274 + nextTick(() => {
  275 + proxy.$refs.DeviceProfileStep1Ref?.customResetStepOneFunc();
  276 + proxy.$refs.DeviceProfileStep2Ref?.customClearStepTwoValueFunc();
  277 + });
  278 + };
  279 + function handleRedo() {
  280 + current.value = 0;
  281 + }
  282 + return {
  283 + isShowOkBtnFalse,
  284 + DeviceProfileStep2Ref,
  285 + DeviceProfileStep1Ref,
  286 + editData,
  287 + handleSubmit,
  288 + handleCancel,
  289 + register,
  290 + getTitle,
  291 + getViewTitle,
  292 + current,
  293 + handleStepPrev,
  294 + handleStepNext1,
  295 + handleRedo,
  296 + };
  297 + },
  298 +});
298 </script> 299 </script>
@@ -4,21 +4,9 @@ @@ -4,21 +4,9 @@
4 <div> 4 <div>
5 <BasicForm @register="register"> 5 <BasicForm @register="register">
6 <template #imageSelect> 6 <template #imageSelect>
7 - <Upload  
8 - style="width: 20vw"  
9 - name="avatar"  
10 - list-type="picture-card"  
11 - class="avatar-uploader"  
12 - :show-upload-list="false"  
13 - :customRequest="customUploadqrcodePic"  
14 - :before-upload="beforeUploadqrcodePic"  
15 - >  
16 - <img  
17 - v-if="peresonalPic"  
18 - :src="peresonalPic"  
19 - alt="avatar"  
20 - style="width: 6.25rem; height: 6.25rem"  
21 - /> 7 + <Upload style="width: 20vw" name="avatar" list-type="picture-card" class="avatar-uploader"
  8 + :show-upload-list="false" :customRequest="customUploadqrcodePic" :before-upload="beforeUploadqrcodePic">
  9 + <img v-if="peresonalPic" :src="peresonalPic" alt="avatar" style="width: 6.25rem; height: 6.25rem" />
22 <div v-else> 10 <div v-else>
23 <LoadingOutlined v-if="loading" /> 11 <LoadingOutlined v-if="loading" />
24 <PlusOutlined v-else /> 12 <PlusOutlined v-else />
@@ -32,154 +20,161 @@ @@ -32,154 +20,161 @@
32 </div> 20 </div>
33 </template> 21 </template>
34 <script lang="ts"> 22 <script lang="ts">
35 - import { defineComponent, ref } from 'vue';  
36 - import { BasicForm, useForm } from '/@/components/Form';  
37 - import { step1Schemas } from './data';  
38 - import { Select, Input, Divider } from 'ant-design-vue';  
39 - import { uploadApi } from '/@/api/personal/index';  
40 - import { Upload } from 'ant-design-vue';  
41 - import { PlusOutlined, LoadingOutlined } from '@ant-design/icons-vue';  
42 - import { useMessage } from '/@/hooks/web/useMessage';  
43 - import type { FileItem } from '/@/components/Upload/src/typing'; 23 +import { defineComponent, ref } from 'vue';
  24 +import { BasicForm, useForm } from '/@/components/Form';
  25 +import { step1Schemas } from './data';
  26 +import { Select, Input, Divider } from 'ant-design-vue';
  27 +import { uploadApi } from '/@/api/personal/index';
  28 +import { Upload } from 'ant-design-vue';
  29 +import { PlusOutlined, LoadingOutlined } from '@ant-design/icons-vue';
  30 +import { useMessage } from '/@/hooks/web/useMessage';
  31 +import type { FileItem } from '/@/components/Upload/src/typing';
44 32
45 - export default defineComponent({  
46 - components: {  
47 - BasicForm,  
48 - [Select.name]: Select,  
49 - [Input.name]: Input,  
50 - [Input.Group.name]: Input.Group,  
51 - [Divider.name]: Divider,  
52 - Upload,  
53 - PlusOutlined,  
54 - LoadingOutlined,  
55 - },  
56 - emits: ['next', 'resetFunc', 'register'],  
57 - setup(_, { emit }) {  
58 - const loading = ref(false); 33 +export default defineComponent({
  34 + components: {
  35 + BasicForm,
  36 + [Select.name]: Select,
  37 + [Input.name]: Input,
  38 + [Input.Group.name]: Input.Group,
  39 + [Divider.name]: Divider,
  40 + Upload,
  41 + PlusOutlined,
  42 + LoadingOutlined,
  43 + },
  44 + emits: ['next', 'resetFunc', 'register'],
  45 + setup(_, { emit }) {
  46 + const loading = ref(false);
59 47
60 - const { createMessage } = useMessage();  
61 - const peresonalPic = ref(''); 48 + const { createMessage } = useMessage();
  49 + const peresonalPic = ref('');
62 50
63 - const [register, { validate, setFieldsValue, resetFields }] = useForm({  
64 - labelWidth: 100,  
65 - schemas: step1Schemas,  
66 - actionColOptions: {  
67 - span: 14,  
68 - },  
69 - showResetButton: false,  
70 - submitButtonOptions: {  
71 - text: '下一步',  
72 - },  
73 - submitFunc: customSubmitFunc,  
74 - });  
75 - //回显数据  
76 - const setStepOneFieldsValueFunc = (v) => {  
77 - setFieldsValue(v);  
78 - peresonalPic.value = v.image;  
79 - };  
80 - const customUploadqrcodePic = async ({ file }) => {  
81 - if (beforeUploadqrcodePic(file)) {  
82 - peresonalPic.value = '';  
83 - loading.value = true;  
84 - const formData = new FormData();  
85 - formData.append('file', file);  
86 - const response = await uploadApi(formData);  
87 - if (response.fileStaticUri) {  
88 - peresonalPic.value = response.fileStaticUri;  
89 - loading.value = false;  
90 - }  
91 - }  
92 - };  
93 - const beforeUploadqrcodePic = (file: FileItem) => {  
94 - const isJpgOrPng =  
95 - file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/jpg';  
96 - if (!isJpgOrPng) {  
97 - createMessage.error('只能上传图片文件!');  
98 - }  
99 - const isLt2M = (file.size as number) / 1024 / 1024 < 5;  
100 - if (!isLt2M) {  
101 - createMessage.error('图片大小不能超过5MB!');  
102 - }  
103 - return isJpgOrPng && isLt2M;  
104 - };  
105 -  
106 - async function customSubmitFunc() {  
107 - const values = await validate();  
108 - emit('next', values, peresonalPic.value); 51 + const [register, { validate, setFieldsValue, resetFields, updateSchema }] = useForm({
  52 + labelWidth: 100,
  53 + schemas: step1Schemas,
  54 + actionColOptions: {
  55 + span: 14,
  56 + },
  57 + showResetButton: false,
  58 + submitButtonOptions: {
  59 + text: '下一步',
  60 + },
  61 + submitFunc: customSubmitFunc,
  62 + });
  63 + const editOrAddNameStatus = (nameStatus) => updateSchema({
  64 + field: 'name', componentProps: {
  65 + disabled: nameStatus
109 } 66 }
110 - //清空数据  
111 - const customResetStepOneFunc = () => {  
112 - resetFields(); 67 + })
  68 + //回显数据
  69 + const setStepOneFieldsValueFunc = (v) => {
  70 + setFieldsValue(v);
  71 + peresonalPic.value = v.image;
  72 + };
  73 + const customUploadqrcodePic = async ({ file }) => {
  74 + if (beforeUploadqrcodePic(file)) {
113 peresonalPic.value = ''; 75 peresonalPic.value = '';
114 - };  
115 - const getStep1Func = async () => {  
116 - const valueStep1 = await validate();  
117 - const pic = peresonalPic.value;  
118 - return {  
119 - key: valueStep1,  
120 - icon: pic,  
121 - };  
122 - }; 76 + loading.value = true;
  77 + const formData = new FormData();
  78 + formData.append('file', file);
  79 + const response = await uploadApi(formData);
  80 + if (response.fileStaticUri) {
  81 + peresonalPic.value = response.fileStaticUri;
  82 + loading.value = false;
  83 + }
  84 + }
  85 + };
  86 + const beforeUploadqrcodePic = (file: FileItem) => {
  87 + const isJpgOrPng =
  88 + file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/jpg';
  89 + if (!isJpgOrPng) {
  90 + createMessage.error('只能上传图片文件!');
  91 + }
  92 + const isLt2M = (file.size as number) / 1024 / 1024 < 5;
  93 + if (!isLt2M) {
  94 + createMessage.error('图片大小不能超过5MB!');
  95 + }
  96 + return isJpgOrPng && isLt2M;
  97 + };
  98 +
  99 + async function customSubmitFunc() {
  100 + const values = await validate();
  101 + emit('next', values, peresonalPic.value);
  102 + }
  103 + //清空数据
  104 + const customResetStepOneFunc = () => {
  105 + resetFields();
  106 + peresonalPic.value = '';
  107 + };
  108 + const getStep1Func = async () => {
  109 + const valueStep1 = await validate();
  110 + const pic = peresonalPic.value;
123 return { 111 return {
124 - register,  
125 - setStepOneFieldsValueFunc,  
126 - customResetStepOneFunc,  
127 - uploadApi,  
128 - peresonalPic,  
129 - beforeUploadqrcodePic,  
130 - customUploadqrcodePic,  
131 - getStep1Func,  
132 - loading, 112 + key: valueStep1,
  113 + icon: pic,
133 }; 114 };
134 - },  
135 - }); 115 + };
  116 + return {
  117 + register,
  118 + setStepOneFieldsValueFunc,
  119 + customResetStepOneFunc,
  120 + uploadApi,
  121 + peresonalPic,
  122 + beforeUploadqrcodePic,
  123 + customUploadqrcodePic,
  124 + getStep1Func,
  125 + loading,
  126 + editOrAddNameStatus
  127 + };
  128 + },
  129 +});
136 </script> 130 </script>
137 <style lang="less" scoped> 131 <style lang="less" scoped>
138 - .step1 {  
139 - &-form {  
140 - width: 500px;  
141 - margin: 0 auto;  
142 - }  
143 -  
144 - h3 {  
145 - margin: 0 0 12px;  
146 - font-size: 16px;  
147 - line-height: 32px;  
148 - color: @text-color;  
149 - } 132 +.step1 {
  133 + &-form {
  134 + width: 500px;
  135 + margin: 0 auto;
  136 + }
150 137
151 - h4 {  
152 - margin: 0 0 4px;  
153 - font-size: 14px;  
154 - line-height: 22px;  
155 - color: @text-color;  
156 - } 138 + h3 {
  139 + margin: 0 0 12px;
  140 + font-size: 16px;
  141 + line-height: 32px;
  142 + color: @text-color;
  143 + }
157 144
158 - p {  
159 - color: @text-color;  
160 - }  
161 - .device-icon-style {  
162 - :deep .ant-upload-select-picture-card {  
163 - display: inherit;  
164 - float: none;  
165 - width: 4.9vw;  
166 - height: 9.5vh;  
167 - margin-right: 8px;  
168 - text-align: center;  
169 - vertical-align: top;  
170 - background-color: #fafafa;  
171 - border: 1px dashed #d9d9d9;  
172 - cursor: pointer;  
173 - transition: border-color 0.3s ease;  
174 - }  
175 - } 145 + h4 {
  146 + margin: 0 0 4px;
  147 + font-size: 14px;
  148 + line-height: 22px;
  149 + color: @text-color;
176 } 150 }
177 151
178 - .pay-select {  
179 - width: 20%; 152 + p {
  153 + color: @text-color;
180 } 154 }
181 155
182 - .pay-input {  
183 - width: 70%; 156 + .device-icon-style {
  157 + :deep .ant-upload-select-picture-card {
  158 + display: inherit;
  159 + float: none;
  160 + width: 4.9vw;
  161 + height: 9.5vh;
  162 + margin-right: 8px;
  163 + text-align: center;
  164 + vertical-align: top;
  165 + background-color: #fafafa;
  166 + border: 1px dashed #d9d9d9;
  167 + cursor: pointer;
  168 + transition: border-color 0.3s ease;
  169 + }
184 } 170 }
  171 +}
  172 +
  173 +.pay-select {
  174 + width: 20%;
  175 +}
  176 +
  177 +.pay-input {
  178 + width: 70%;
  179 +}
185 </style> 180 </style>
@@ -4,7 +4,7 @@ import { findDictItemByCode } from '/@/api/system/dict'; @@ -4,7 +4,7 @@ import { findDictItemByCode } from '/@/api/system/dict';
4 4
5 export const step1Schemas: FormSchema[] = [ 5 export const step1Schemas: FormSchema[] = [
6 { 6 {
7 - field: 'name', 7 + field: 'image',
8 label: '上传图片', 8 label: '上传图片',
9 component: 'Input', 9 component: 'Input',
10 slot: 'imageSelect', 10 slot: 'imageSelect',
@@ -14,9 +14,12 @@ export const step1Schemas: FormSchema[] = [ @@ -14,9 +14,12 @@ export const step1Schemas: FormSchema[] = [
14 label: '配置名称', 14 label: '配置名称',
15 required: true, 15 required: true,
16 component: 'Input', 16 component: 'Input',
17 - componentProps: {  
18 - maxLength: 255,  
19 - placeholder: '请输入配置名称', 17 + componentProps() {
  18 + return {
  19 + disabled: false,
  20 + ength: 255,
  21 + placeholder: '请输入配置名称',
  22 + };
20 }, 23 },
21 }, 24 },
22 { 25 {