Commit 61e2e296b252c2fb9ecab95fa21a393fa89a5dd5
Merge branch 'ww-dev' into 'main'
fix: 修复平台定制所在城市回显联动问题 See merge request yunteng/thingskit-front!516
Showing
1 changed file
with
210 additions
and
353 deletions
1 | -<template> | |
2 | - <div class="card"> | |
3 | - <Card :bordered="false" class="card"> | |
4 | - <BasicForm @register="registerForm"> | |
5 | - <template #qrcode> | |
6 | - <ContentUploadText> | |
7 | - <template #uploadImg> | |
8 | - <CustomUploadComp :imgUrl="qrcodePic" @setImg="handleSetCodeImgUrl" /> | |
9 | - </template> | |
10 | - <template #uploadText> | |
11 | - <div class="box-outline"> 支持.PNG、.JPG格式,建议尺寸为300*300px,大小不超过5M </div> | |
12 | - </template> | |
13 | - </ContentUploadText> | |
14 | - </template> | |
15 | - <template #customProv> | |
16 | - <BasicForm @register="registerCustomForm" /> | |
17 | - </template> | |
18 | - </BasicForm> | |
19 | - </Card> | |
20 | - <Loading v-bind="compState" /> | |
21 | - <Authority value="api:yt:enterprise:update:update"> | |
22 | - <a-button | |
23 | - v-if="isWhereAdmin !== 'CUSTOMER_USER'" | |
24 | - @click="handleUpdateInfo" | |
25 | - type="primary" | |
26 | - class="mt-4" | |
27 | - >更新基本信息</a-button | |
28 | - > | |
29 | - </Authority> | |
30 | - </div> | |
31 | -</template> | |
32 | - | |
33 | -<script lang="ts"> | |
34 | - import { defineComponent, onMounted, ref, computed } from 'vue'; | |
35 | - import { Card } from 'ant-design-vue'; | |
36 | - import { BasicForm, useForm } from '/@/components/Form/index'; | |
37 | - import { schemas, provSchemas } from '../config/enterPriseInfo.config'; | |
38 | - import { getAreaList, getEnterPriseDetail, updateEnterPriseDetail } from '/@/api/oem/index'; | |
39 | - import { Loading } from '/@/components/Loading'; | |
40 | - import { useMessage } from '/@/hooks/web/useMessage'; | |
41 | - import { useUserStore } from '/@/store/modules/user'; | |
42 | - import { createLocalStorage } from '/@/utils/cache'; | |
43 | - import type { CityItem, Code } from '../types'; | |
44 | - import { Authority } from '/@/components/Authority'; | |
45 | - import { USER_INFO_KEY } from '/@/enums/cacheEnum'; | |
46 | - import { getAuthCache } from '/@/utils/auth'; | |
47 | - import ContentUploadText from './ContentUploadText.vue'; | |
48 | - import { CustomUploadComp } from './customUplaod/index'; | |
49 | - | |
50 | - export default defineComponent({ | |
51 | - components: { | |
52 | - Card, | |
53 | - BasicForm, | |
54 | - Loading, | |
55 | - Authority, | |
56 | - ContentUploadText, | |
57 | - CustomUploadComp, | |
58 | - }, | |
59 | - setup() { | |
60 | - const userInfo: any = getAuthCache(USER_INFO_KEY); | |
61 | - const isWhereAdmin: any = computed(() => { | |
62 | - if (userInfo.roles.includes('TENANT_ADMIN')) { | |
63 | - return 'TENANT_ADMIN'; | |
64 | - } else if (userInfo.roles.includes('CUSTOMER_USER')) { | |
65 | - return 'CUSTOMER_USER'; | |
66 | - } else { | |
67 | - return 'SYS_ADMIN'; | |
68 | - } | |
69 | - }); | |
70 | - | |
71 | - const loading = ref(false); | |
72 | - const compState = ref({ | |
73 | - absolute: false, | |
74 | - loading: false, | |
75 | - tip: '拼命加载中...', | |
76 | - }); | |
77 | - const [registerForm, { getFieldsValue, setFieldsValue, validate, clearValidate }] = useForm({ | |
78 | - labelWidth: 80, | |
79 | - schemas, | |
80 | - showResetButton: false, | |
81 | - showSubmitButton: false, | |
82 | - wrapperCol: { | |
83 | - span: 12, | |
84 | - }, | |
85 | - }); | |
86 | - | |
87 | - const [ | |
88 | - registerCustomForm, | |
89 | - { getFieldsValue: getNameTown, updateSchema, setFieldsValue: setNameTown }, | |
90 | - ] = useForm({ | |
91 | - labelWidth: 80, | |
92 | - schemas: provSchemas, | |
93 | - showResetButton: false, | |
94 | - showSubmitButton: false, | |
95 | - compact: true, | |
96 | - actionColOptions: { | |
97 | - span: 0, | |
98 | - }, | |
99 | - }); | |
100 | - | |
101 | - const { createMessage } = useMessage(); | |
102 | - | |
103 | - const qrcodePic = ref(); | |
104 | - const handleSetCodeImgUrl = (d) => { | |
105 | - qrcodePic.value = d; | |
106 | - }; | |
107 | - // 更新 | |
108 | - const handleUpdateInfo = async () => { | |
109 | - try { | |
110 | - const fieldsValue = getFieldsValue(); | |
111 | - const { nameTown } = getNameTown(); | |
112 | - const newFieldValue: any = { | |
113 | - ...fieldsValue, | |
114 | - codeTown: nameTown, | |
115 | - qrCode: qrcodePic.value, | |
116 | - }; | |
117 | - delete newFieldValue.nameProv; | |
118 | - delete newFieldValue.nameCity; | |
119 | - delete newFieldValue.nameCoun; | |
120 | - delete newFieldValue.nameTown; | |
121 | - // 表单校验 | |
122 | - let validateArray = [ | |
123 | - 'name', | |
124 | - 'abbreviation', | |
125 | - 'officialWebsite', | |
126 | - 'email', | |
127 | - 'synopsis', | |
128 | - 'nameCountry', | |
129 | - 'address', | |
130 | - 'contacts', | |
131 | - 'tel', | |
132 | - 'id', | |
133 | - ]; | |
134 | - if (newFieldValue.qrCode == undefined || newFieldValue.qrCode == '') { | |
135 | - validateArray.push('qrcode'); | |
136 | - } else { | |
137 | - const findExistIndex = validateArray.findIndex((o) => o == 'qrcode'); | |
138 | - if (findExistIndex !== -1) { | |
139 | - validateArray.splice(findExistIndex, 1); | |
140 | - } | |
141 | - } | |
142 | - if (newFieldValue.codeTown == undefined) { | |
143 | - validateArray.push('prov'); | |
144 | - console.log(validateArray); | |
145 | - } else { | |
146 | - const findExistIndex1 = validateArray.findIndex((o) => o == 'prov'); | |
147 | - if (findExistIndex1 !== -1) { | |
148 | - validateArray.splice(findExistIndex1, 1); | |
149 | - } | |
150 | - clearValidate('prov'); | |
151 | - } | |
152 | - const values = await validate(validateArray); | |
153 | - if (!values) return; | |
154 | - compState.value.loading = true; | |
155 | - await updateEnterPriseDetail(newFieldValue); | |
156 | - createMessage.success('更新信息成功'); | |
157 | - setEnterPriseInfo(newFieldValue); | |
158 | - } finally { | |
159 | - compState.value.loading = false; | |
160 | - } | |
161 | - }; | |
162 | - | |
163 | - const userStore = useUserStore(); | |
164 | - const storage = createLocalStorage(); | |
165 | - | |
166 | - // 设置企业信息 | |
167 | - function setEnterPriseInfo(newFieldValue) { | |
168 | - // 保存store | |
169 | - userStore.setEnterPriseInfo(newFieldValue); | |
170 | - // 保存本地缓存 | |
171 | - storage.set('enterpriseInfo', newFieldValue); | |
172 | - } | |
173 | - | |
174 | - // 地区显示回显和数据联动 | |
175 | - async function updateCityData( | |
176 | - cities: CityItem[], | |
177 | - couns: CityItem[], | |
178 | - towns: CityItem[], | |
179 | - code: Code | |
180 | - ) { | |
181 | - // 加工后端返回字段 | |
182 | - | |
183 | - cities.forEach((item) => { | |
184 | - item.label = item.name; | |
185 | - item.value = item.code; | |
186 | - }); | |
187 | - | |
188 | - couns.forEach((item) => { | |
189 | - item.label = item.name; | |
190 | - item.value = item.code; | |
191 | - }); | |
192 | - towns.forEach((item) => { | |
193 | - item.label = item.name; | |
194 | - item.value = item.code; | |
195 | - }); | |
196 | - const { codeProv, codeCity, codeCoun, codeTown } = code; | |
197 | - updateSchema([ | |
198 | - { | |
199 | - field: 'nameCity', | |
200 | - componentProps: ({ formModel }) => { | |
201 | - return { | |
202 | - options: cities, | |
203 | - async onChange(value) { | |
204 | - if (value === undefined) { | |
205 | - formModel.nameCoun = undefined; // reset city value | |
206 | - formModel.nameTown = undefined; | |
207 | - updateSchema([ | |
208 | - { | |
209 | - field: 'nameCoun', | |
210 | - componentProps: { | |
211 | - options: [], | |
212 | - }, | |
213 | - }, | |
214 | - { | |
215 | - field: 'nameTown', | |
216 | - componentProps: { | |
217 | - options: [], | |
218 | - }, | |
219 | - }, | |
220 | - ]); | |
221 | - } else { | |
222 | - let couns: CityItem[] = await getAreaList({ parentId: value }); | |
223 | - couns.forEach((item) => { | |
224 | - item.label = item.name; | |
225 | - item.value = item.code; | |
226 | - }); | |
227 | - formModel.nameCoun = undefined; // reset city value | |
228 | - formModel.nameTown = undefined; | |
229 | - updateSchema({ | |
230 | - field: 'nameCoun', | |
231 | - componentProps: { | |
232 | - // 请选择区 | |
233 | - options: couns, | |
234 | - async onChange(value) { | |
235 | - if (value === undefined) { | |
236 | - formModel.nameTown = undefined; | |
237 | - } else { | |
238 | - let towns: CityItem[] = await getAreaList({ parentId: value }); | |
239 | - towns.forEach((item) => { | |
240 | - item.label = item.name; | |
241 | - item.value = item.code; | |
242 | - }); | |
243 | - formModel.nameTown = undefined; | |
244 | - updateSchema({ | |
245 | - field: 'nameTown', | |
246 | - componentProps: { | |
247 | - placeholder: '城镇/街道', | |
248 | - options: towns, | |
249 | - }, | |
250 | - }); | |
251 | - } | |
252 | - }, | |
253 | - }, | |
254 | - }); | |
255 | - } | |
256 | - }, | |
257 | - }; | |
258 | - }, | |
259 | - }, | |
260 | - { | |
261 | - field: 'nameCoun', | |
262 | - componentProps: { | |
263 | - options: couns, | |
264 | - async onChange(value) { | |
265 | - if (value === undefined) { | |
266 | - setNameTown({ | |
267 | - nameTown: undefined, | |
268 | - }); | |
269 | - updateSchema({ | |
270 | - field: 'nameTown', | |
271 | - componentProps: { | |
272 | - placeholder: '城镇/街道', | |
273 | - options: [], | |
274 | - }, | |
275 | - }); | |
276 | - } else { | |
277 | - let towns = await getAreaList({ parentId: value }); | |
278 | - towns.forEach((item) => { | |
279 | - item.label = item.name; | |
280 | - item.value = item.code; | |
281 | - }); | |
282 | - setNameTown({ | |
283 | - nameTown: undefined, | |
284 | - }); | |
285 | - updateSchema({ | |
286 | - field: 'nameTown', | |
287 | - componentProps: { | |
288 | - placeholder: '城镇/街道', | |
289 | - options: towns, | |
290 | - }, | |
291 | - }); | |
292 | - } | |
293 | - }, | |
294 | - }, | |
295 | - }, | |
296 | - { | |
297 | - field: 'nameTown', | |
298 | - componentProps: { | |
299 | - options: towns, | |
300 | - }, | |
301 | - }, | |
302 | - ]); | |
303 | - setNameTown({ | |
304 | - nameProv: codeProv, | |
305 | - nameCity: codeCity, | |
306 | - nameCoun: codeCoun, | |
307 | - nameTown: codeTown, | |
308 | - }); | |
309 | - } | |
310 | - | |
311 | - onMounted(async () => { | |
312 | - const res = await getEnterPriseDetail(); | |
313 | - if (res.sysTown) { | |
314 | - const { cities, couns, towns, codeCountry, codeProv, codeCity, codeCoun, codeTown } = | |
315 | - res.sysTown; | |
316 | - const code = { | |
317 | - codeCountry, | |
318 | - codeProv, | |
319 | - codeCity, | |
320 | - codeCoun, | |
321 | - codeTown, | |
322 | - }; | |
323 | - updateCityData(cities, couns, towns, code); | |
324 | - setFieldsValue({ nameCountry: codeCountry }); | |
325 | - } | |
326 | - setFieldsValue(res); | |
327 | - qrcodePic.value = res.qrCode; | |
328 | - }); | |
329 | - | |
330 | - return { | |
331 | - registerForm, | |
332 | - compState, | |
333 | - qrcodePic, | |
334 | - handleUpdateInfo, | |
335 | - registerCustomForm, | |
336 | - loading, | |
337 | - isWhereAdmin, | |
338 | - handleSetCodeImgUrl, | |
339 | - }; | |
340 | - }, | |
341 | - }); | |
342 | -</script> | |
343 | - | |
344 | -<style lang="less" scoped> | |
345 | - .box-outline { | |
346 | - border: 1px dashed #d9d9d9; | |
347 | - } | |
348 | - | |
349 | - .fill-img { | |
350 | - width: 100%; | |
351 | - height: 100%; | |
352 | - } | |
353 | -</style> | |
1 | +<template> | |
2 | + <div class="card"> | |
3 | + <Card :bordered="false" class="card"> | |
4 | + <BasicForm @register="registerForm"> | |
5 | + <template #qrcode> | |
6 | + <ContentUploadText> | |
7 | + <template #uploadImg> | |
8 | + <CustomUploadComp :imgUrl="qrcodePic" @setImg="handleSetCodeImgUrl" /> | |
9 | + </template> | |
10 | + <template #uploadText> | |
11 | + <div class="box-outline"> 支持.PNG、.JPG格式,建议尺寸为300*300px,大小不超过5M </div> | |
12 | + </template> | |
13 | + </ContentUploadText> | |
14 | + </template> | |
15 | + <template #customProv> | |
16 | + <BasicForm @register="registerCustomForm" /> | |
17 | + </template> | |
18 | + </BasicForm> | |
19 | + </Card> | |
20 | + <Loading v-bind="compState" /> | |
21 | + <Authority value="api:yt:enterprise:update:update"> | |
22 | + <a-button | |
23 | + v-if="isWhereAdmin !== 'CUSTOMER_USER'" | |
24 | + @click="handleUpdateInfo" | |
25 | + type="primary" | |
26 | + class="mt-4" | |
27 | + >更新基本信息</a-button | |
28 | + > | |
29 | + </Authority> | |
30 | + </div> | |
31 | +</template> | |
32 | + | |
33 | +<script lang="ts"> | |
34 | + import { defineComponent, onMounted, ref, computed } from 'vue'; | |
35 | + import { Card } from 'ant-design-vue'; | |
36 | + import { BasicForm, useForm } from '/@/components/Form/index'; | |
37 | + import { schemas, provSchemas } from '../config/enterPriseInfo.config'; | |
38 | + import { getEnterPriseDetail, updateEnterPriseDetail } from '/@/api/oem/index'; | |
39 | + import { Loading } from '/@/components/Loading'; | |
40 | + import { useMessage } from '/@/hooks/web/useMessage'; | |
41 | + import { useUserStore } from '/@/store/modules/user'; | |
42 | + import { createLocalStorage } from '/@/utils/cache'; | |
43 | + import { Authority } from '/@/components/Authority'; | |
44 | + import { USER_INFO_KEY } from '/@/enums/cacheEnum'; | |
45 | + import { getAuthCache } from '/@/utils/auth'; | |
46 | + import ContentUploadText from './ContentUploadText.vue'; | |
47 | + import { CustomUploadComp } from './customUplaod/index'; | |
48 | + | |
49 | + export default defineComponent({ | |
50 | + components: { | |
51 | + Card, | |
52 | + BasicForm, | |
53 | + Loading, | |
54 | + Authority, | |
55 | + ContentUploadText, | |
56 | + CustomUploadComp, | |
57 | + }, | |
58 | + setup() { | |
59 | + const userInfo: any = getAuthCache(USER_INFO_KEY); | |
60 | + const isWhereAdmin: any = computed(() => { | |
61 | + if (userInfo.roles.includes('TENANT_ADMIN')) { | |
62 | + return 'TENANT_ADMIN'; | |
63 | + } else if (userInfo.roles.includes('CUSTOMER_USER')) { | |
64 | + return 'CUSTOMER_USER'; | |
65 | + } else { | |
66 | + return 'SYS_ADMIN'; | |
67 | + } | |
68 | + }); | |
69 | + | |
70 | + const loading = ref(false); | |
71 | + const compState = ref({ | |
72 | + absolute: false, | |
73 | + loading: false, | |
74 | + tip: '拼命加载中...', | |
75 | + }); | |
76 | + const [registerForm, { getFieldsValue, setFieldsValue, validate, clearValidate }] = useForm({ | |
77 | + labelWidth: 80, | |
78 | + schemas, | |
79 | + showResetButton: false, | |
80 | + showSubmitButton: false, | |
81 | + wrapperCol: { | |
82 | + span: 12, | |
83 | + }, | |
84 | + }); | |
85 | + | |
86 | + const [registerCustomForm, { getFieldsValue: getNameTown, setFieldsValue: setNameTown }] = | |
87 | + useForm({ | |
88 | + labelWidth: 80, | |
89 | + schemas: provSchemas, | |
90 | + showResetButton: false, | |
91 | + showSubmitButton: false, | |
92 | + compact: true, | |
93 | + actionColOptions: { | |
94 | + span: 0, | |
95 | + }, | |
96 | + }); | |
97 | + | |
98 | + const { createMessage } = useMessage(); | |
99 | + | |
100 | + const qrcodePic = ref(); | |
101 | + const handleSetCodeImgUrl = (d) => { | |
102 | + qrcodePic.value = d; | |
103 | + }; | |
104 | + // 更新 | |
105 | + const handleUpdateInfo = async () => { | |
106 | + try { | |
107 | + const fieldsValue = getFieldsValue(); | |
108 | + const { nameTown } = getNameTown(); | |
109 | + const newFieldValue: any = { | |
110 | + ...fieldsValue, | |
111 | + codeTown: nameTown, | |
112 | + qrCode: qrcodePic.value, | |
113 | + }; | |
114 | + delete newFieldValue.nameProv; | |
115 | + delete newFieldValue.nameCity; | |
116 | + delete newFieldValue.nameCoun; | |
117 | + delete newFieldValue.nameTown; | |
118 | + // 表单校验 | |
119 | + let validateArray = [ | |
120 | + 'name', | |
121 | + 'abbreviation', | |
122 | + 'officialWebsite', | |
123 | + 'email', | |
124 | + 'synopsis', | |
125 | + 'nameCountry', | |
126 | + 'address', | |
127 | + 'contacts', | |
128 | + 'tel', | |
129 | + 'id', | |
130 | + ]; | |
131 | + if (newFieldValue.qrCode == undefined || newFieldValue.qrCode == '') { | |
132 | + validateArray.push('qrcode'); | |
133 | + } else { | |
134 | + const findExistIndex = validateArray.findIndex((o) => o == 'qrcode'); | |
135 | + if (findExistIndex !== -1) { | |
136 | + validateArray.splice(findExistIndex, 1); | |
137 | + } | |
138 | + } | |
139 | + if (newFieldValue.codeTown == undefined) { | |
140 | + validateArray.push('prov'); | |
141 | + console.log(validateArray); | |
142 | + } else { | |
143 | + const findExistIndex1 = validateArray.findIndex((o) => o == 'prov'); | |
144 | + if (findExistIndex1 !== -1) { | |
145 | + validateArray.splice(findExistIndex1, 1); | |
146 | + } | |
147 | + clearValidate('prov'); | |
148 | + } | |
149 | + const values = await validate(validateArray); | |
150 | + if (!values) return; | |
151 | + compState.value.loading = true; | |
152 | + await updateEnterPriseDetail(newFieldValue); | |
153 | + createMessage.success('更新信息成功'); | |
154 | + setEnterPriseInfo(newFieldValue); | |
155 | + } finally { | |
156 | + compState.value.loading = false; | |
157 | + } | |
158 | + }; | |
159 | + | |
160 | + const userStore = useUserStore(); | |
161 | + const storage = createLocalStorage(); | |
162 | + | |
163 | + // 设置企业信息 | |
164 | + function setEnterPriseInfo(newFieldValue) { | |
165 | + // 保存store | |
166 | + userStore.setEnterPriseInfo(newFieldValue); | |
167 | + // 保存本地缓存 | |
168 | + storage.set('enterpriseInfo', newFieldValue); | |
169 | + } | |
170 | + | |
171 | + onMounted(async () => { | |
172 | + const res = await getEnterPriseDetail(); | |
173 | + if (res.sysTown) { | |
174 | + const { codeCountry, codeProv, codeCity, codeCoun, codeTown } = res.sysTown; | |
175 | + setNameTown({ | |
176 | + nameProv: codeProv, | |
177 | + nameCity: codeCity, | |
178 | + nameCoun: codeCoun, | |
179 | + nameTown: codeTown, | |
180 | + }); | |
181 | + setFieldsValue({ nameCountry: codeCountry }); | |
182 | + } | |
183 | + setFieldsValue(res); | |
184 | + qrcodePic.value = res.qrCode; | |
185 | + }); | |
186 | + | |
187 | + return { | |
188 | + registerForm, | |
189 | + compState, | |
190 | + qrcodePic, | |
191 | + handleUpdateInfo, | |
192 | + registerCustomForm, | |
193 | + loading, | |
194 | + isWhereAdmin, | |
195 | + handleSetCodeImgUrl, | |
196 | + }; | |
197 | + }, | |
198 | + }); | |
199 | +</script> | |
200 | + | |
201 | +<style lang="less" scoped> | |
202 | + .box-outline { | |
203 | + border: 1px dashed #d9d9d9; | |
204 | + } | |
205 | + | |
206 | + .fill-img { | |
207 | + width: 100%; | |
208 | + height: 100%; | |
209 | + } | |
210 | +</style> | ... | ... |