Commit 8e4139d81c544eee1d37fc649f5f251be58bbff7

Authored by ww
1 parent 07cfb735

fix: 修复平台定制所在城市回显联动问题

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>
... ...