简柏林 / thingskit-front · Commits

Commit 1711bcdc7efbae800c589126a2a8aacf56f99691

Authored by fengwotao
1 parent 4c77769b

style:只是调整布局样式

Inline Side-by-side
Showing 4 changed files with 829 additions and 807 deletions
1   -<template>
2   - <div class="card">
3   - <Card :bordered="false" class="card">
4   - <BasicForm @register="registerForm">
5   - <template #logoUpload>
6   - <Upload
7   - name="avatar"
8   - list-type="picture-card"
9   - class="avatar-uploader"
10   - :show-upload-list="false"
11   - @preview="handlePreview"
12   - :customRequest="customUploadLogoPic"
13   - :before-upload="beforeUploadLogoPic"
14   - >
15   - <img v-if="logoPic" :src="logoPic" />
16   - <div v-else>
17   - <div style="margin-top: 1.875rem">
18   - <LoadingOutlined v-if="loading" />
19   - <PlusOutlined v-else style="font-size: 2.5rem" />
20   - </div>
21   - <div
22   - class="ant-upload-text flex"
23   - style="width: 180px; height: 100px; align-items: center; font-size: 0.5625rem"
24   - >
25   - 支持.PNG、.JPG格式，建议尺寸为32*32px，大小不超过500KB</div
26   - >
27   - </div>
28   - </Upload>
29   - </template>
30   - <template #bgUpload>
31   - <Upload
32   - name="avatar"
33   - list-type="picture-card"
34   - class="avatar-uploader"
35   - :show-upload-list="false"
36   - :customRequest="customUploadBgPic"
37   - :before-upload="beforeUploadBgPic"
38   - >
39   - <img v-if="bgPic" :src="bgPic" alt="avatar" />
40   - <div v-else>
41   - <div style="margin-top: 1.875rem">
42   - <LoadingOutlined v-if="loading1" />
43   - <PlusOutlined v-else style="font-size: 2.5rem" />
44   - </div>
45   - <div
46   - class="ant-upload-text flex"
47   - style="width: 280px; height: 100px; align-items: center; font-size: 0.5625rem"
48   - >
49   - 支持.PNG、.JPG格式，建议尺寸为1920*1080px，大小不超过2M</div
50   - >
51   - </div>
52   - </Upload>
53   - </template>
54   - <template #colorInput="{ model, field }"
55   - ><Input disabled v-model:value="model[field]">
56   - <template #prefix> <input type="color" v-model="model[field]" /> </template
57   - ></Input>
58   - </template>
59   -
60   - <template #homeSwiper>
61   - <Upload
62   - v-model:file-list="fileList"
63   - list-type="picture-card"
64   - @preview="handlePreview"
65   - :customRequest="customUploadHomeSwiper"
66   - :before-upload="beforeUploadHomeSwiper"
67   - @change="handleChange"
68   - >
69   - <div v-if="fileList.length < 5">
70   - <div style="margin-top: 1.875rem">
71   - <PlusOutlined style="font-size: 2.5rem" />
72   - </div>
73   - <div
74   - class="ant-upload-text flex"
75   - style="width: 150px; height: 70px; align-items: center; font-size: 0.5625rem"
76   - >支持.PNG、.JPG格式，建议尺寸为800*600px，大小不超过3M</div
77   - >
78   - </div>
79   - </Upload>
80   - <Modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
81   - <img alt="example" style="width: 100%" :src="previewImage" />
82   - </Modal>
83   - </template>
84   - </BasicForm>
85   - </Card>
86   - <Loading v-bind="compState" />
87   - <Authority value="api:yt:appDesign:update:update">
88   - <a-button @click="handleUpdateInfo" type="primary" class="mt-4">保存信息</a-button>
89   - </Authority>
90   - <Authority value="api:yt:appDesign:data_reset:reset">
91   - <a-button @click="handleResetInfo" type="primary" class="ml-4">恢复默认设置</a-button>
92   - </Authority>
93   - </div>
94   -</template>
95   -
96   -<script lang="ts">
97   - import { defineComponent, ref, unref, onMounted } from 'vue';
98   - import { BasicForm, useForm } from '/@/components/Form/index';
99   - import { Loading } from '/@/components/Loading/index';
100   - import { Card, Upload, Input, Modal } from 'ant-design-vue';
101   - import { PlusOutlined, LoadingOutlined } from '@ant-design/icons-vue';
102   - import { schemas } from '../config/AppDraw.config';
103   - import { FileItem, FileInfo } from '../types/index';
104   - import { logoUpload, bgUpload, resetAppInfo } from '/@/api/oem/index';
105   - import { useMessage } from '/@/hooks/web/useMessage';
106   - import { getAppDesign, updateAppDesign } from '/@/api/oem/index';
107   - import { Authority } from '/@/components/Authority';
108   -
109   - export default defineComponent({
110   - components: {
111   - Card,
112   - BasicForm,
113   - Upload,
114   - Loading,
115   - PlusOutlined,
116   - Input,
117   - Modal,
118   - Authority,
119   - LoadingOutlined,
120   - },
121   - setup() {
122   - const loading = ref(false);
123   - const loading1 = ref(false);
124   - const compState = ref({
125   - absolute: false,
126   - loading: false,
127   - tip: '拼命加载中...',
128   - });
129   - const { createMessage } = useMessage();
130   - const [registerForm, { getFieldsValue, setFieldsValue, resetFields }] = useForm({
131   - schemas,
132   - showSubmitButton: false,
133   - showResetButton: false,
134   - labelWidth: 150,
135   - wrapperCol: {
136   - span: 10,
137   - },
138   - });
139   - const previewVisible = ref<boolean>(false);
140   - const previewImage = ref<string | undefined>('');
141   - function getBase64(file: File) {
142   - return new Promise((resolve, reject) => {
143   - const reader = new FileReader();
144   - reader.readAsDataURL(file);
145   - reader.onload = () => resolve(reader.result);
146   - reader.onerror = (error) => reject(error);
147   - });
148   - }
149   - const handleCancel = () => {
150   - previewVisible.value = false;
151   - };
152   - const handlePreview = async (file: FileItem) => {
153   - if (!file.url && !file.preview) {
154   - file.preview = (await getBase64(file.originFileObj)) as string;
155   - }
156   - previewImage.value = file.url || file.preview;
157   - previewVisible.value = true;
158   - };
159   -
160   - // logo图片上传
161   - const logoPic = ref();
162   - async function customUploadLogoPic({ file }) {
163   - if (beforeUploadLogoPic(file)) {
164   - logoPic.value = '';
165   - loading.value = true;
166   - const formData = new FormData();
167   - formData.append('file', file);
168   - const response = await logoUpload(formData);
169   - if (response.fileStaticUri) {
170   - logoPic.value = response.fileStaticUri;
171   - loading.value = false;
172   - }
173   - }
174   - }
175   - const beforeUploadLogoPic = (file) => {
176   - const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
177   - if (!isJpgOrPng) {
178   - createMessage.error('只能上传图片文件!');
179   - }
180   - const isLt2M = (file.size as number) / 1024 < 500;
181   - if (!isLt2M) {
182   - createMessage.error('图片大小不能超过500KB!');
183   - }
184   - return isJpgOrPng && isLt2M;
185   - };
186   -
187   - // 登录页背景上传
188   - const bgPic = ref();
189   - async function customUploadBgPic({ file }) {
190   - if (beforeUploadBgPic(file)) {
191   - bgPic.value = '';
192   - loading1.value = true;
193   - const formData = new FormData();
194   - formData.append('file', file);
195   - const response = await bgUpload(formData);
196   - if (response.fileStaticUri) {
197   - bgPic.value = response.fileStaticUri;
198   - loading1.value = false;
199   - }
200   - }
201   - }
202   - const beforeUploadBgPic = (file) => {
203   - const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
204   - if (!isJpgOrPng) {
205   - createMessage.error('只能上传图片文件!');
206   - }
207   - const isLt2M = (file.size as number) / 1024 / 1024 < 2;
208   - if (!isLt2M) {
209   - createMessage.error('图片大小不能超过2MB!');
210   - }
211   - return isJpgOrPng && isLt2M;
212   - };
213   - // 首页轮播图
214   - const fileList = ref<FileItem[]>([]);
215   - async function customUploadHomeSwiper({ file }) {
216   - if (beforeUploadHomeSwiper(file)) {
217   - const formData = new FormData();
218   - formData.append('file', file);
219   - const response = await bgUpload(formData);
220   - if (response.fileStaticUri) {
221   - fileList.value.push({
222   - uid: -Math.random() + '',
223   - name: response.fileName,
224   - status: 'done',
225   - url: response.fileStaticUri,
226   - });
227   - const fileArr = fileList.value.filter((item) => {
228   - return item.percent !== 0;
229   - });
230   - fileList.value = fileArr;
231   - }
232   - }
233   - }
234   -
235   - const beforeUploadHomeSwiper = (file) => {
236   - const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
237   - if (!isJpgOrPng) {
238   - createMessage.error('只能上传图片文件!');
239   - }
240   - const isLt2M = (file.size as number) / 1024 / 1024 < 3;
241   - if (!isLt2M) {
242   - createMessage.error('图片大小不能超过3MB!');
243   - }
244   - return isJpgOrPng && isLt2M;
245   - };
246   - const handleChange = (info: FileInfo) => {
247   - if (info.file.status !== 'uploading') {
248   - fileList.value = info.fileList.filter((f: any) => !f.size);
249   - }
250   - };
251   -
252   - const handleUpdateInfo = async () => {
253   - try {
254   - const fieldValue = getFieldsValue();
255   - // 做换字段
256   - const homeSwiper = fileList.value.map((item) => item.url);
257   - const rotation = homeSwiper.join(',');
258   -
259   - compState.value.loading = true;
260   - await updateAppDesign({
261   - ...fieldValue,
262   - background: unref(bgPic),
263   - icon: unref(bgPic),
264   - logo: unref(logoPic),
265   - rotation,
266   - });
267   - compState.value.loading = false;
268   - createMessage.success('保存信息成功');
269   - } catch (e) {
270   - createMessage.error('保存信息失败');
271   - }
272   - };
273   -
274   - onMounted(async () => {
275   - const res = await getAppDesign();
276   - const rotation = res.rotation ? res.rotation.split(',') : [];
277   - const arr: any[] = [];
278   - for (let item of rotation) {
279   - arr.push({
280   - uid: -Math.random() + '',
281   - name: '111',
282   - url: item,
283   - status: 'done',
284   - });
285   - }
286   - setFieldsValue(res);
287   - logoPic.value = res.logo;
288   - bgPic.value = res.background;
289   - if (arr[0]?.url === '') return;
290   - fileList.value = arr;
291   - });
292   - const handleResetInfo = async () => {
293   - try {
294   - compState.value.loading = true;
295   - await resetAppInfo();
296   - compState.value.loading = false;
297   - createMessage.success('恢复出厂设置成功');
298   - resetFields();
299   - const res = await getAppDesign();
300   - const rotation = res.rotation ? res.rotation.split(',') : [];
301   - const arr: any[] = [];
302   - for (let item of rotation) {
303   - arr.push({
304   - uid: -Math.random() + '',
305   - name: '111',
306   - url: item,
307   - status: 'done',
308   - });
309   - }
310   - setFieldsValue(res);
311   - logoPic.value = res.logo;
312   - bgPic.value = res.background;
313   - if (arr[0]?.url === '') return;
314   - fileList.value = arr;
315   - } catch (e) {
316   - compState.value.loading = false;
317   - createMessage.error('恢复出厂设置失败');
318   - }
319   - };
320   - return {
321   - compState,
322   - fileList,
323   - registerForm,
324   - handleUpdateInfo,
325   - handleCancel,
326   - handlePreview,
327   - customUploadLogoPic,
328   - beforeUploadLogoPic,
329   - customUploadBgPic,
330   - beforeUploadBgPic,
331   - customUploadHomeSwiper,
332   - beforeUploadHomeSwiper,
333   - handleChange,
334   - logoPic,
335   - bgPic,
336   - previewVisible,
337   - previewImage,
338   - loading,
339   - loading1,
340   - handleResetInfo,
341   - };
342   - },
343   - });
344   -</script>
345   -
346   -<style lang="less" scoped>
347   - .ant-upload-select-picture-card i {
348   - font-size: 32px;
349   - color: #999;
350   - }
351   -
352   - .ant-upload-select-picture-card .ant-upload-text {
353   - margin-top: 8px;
354   - color: #666;
355   - }
356   -</style>
  1 +<template>
  2 + <div class="card">
  3 + <Card :bordered="false" class="card">
  4 + <BasicForm @register="registerForm">
  5 + <template #logoUpload>
  6 + <ContentUploadText>
  7 + <template #uploadImg>
  8 + <Upload
  9 + name="avatar"
  10 + list-type="picture-card"
  11 + class="avatar-uploader"
  12 + :show-upload-list="false"
  13 + @preview="handlePreview"
  14 + :customRequest="customUploadLogoPic"
  15 + :before-upload="beforeUploadLogoPic"
  16 + >
  17 + <img v-if="logoPic" :src="logoPic" alt="avatar" />
  18 + <div v-else>
  19 + <Spin v-if="loading" tip="正在上传中..." />
  20 + <PlusOutlined v-else style="font-size: 2.5rem" /> </div
  21 + ></Upload>
  22 + </template>
  23 + <template #uploadText>
  24 + <div class="flex justify-center items-center">
  25 + 支持.PNG、.JPG格式，建议尺寸为32*32px，大小不超过500KB
  26 + </div>
  27 + </template>
  28 + </ContentUploadText>
  29 + </template>
  30 + <template #bgUpload>
  31 + <ContentUploadText>
  32 + <template #uploadImg>
  33 + <Upload
  34 + name="avatar"
  35 + list-type="picture-card"
  36 + class="avatar-uploader"
  37 + :show-upload-list="false"
  38 + :customRequest="customUploadBgPic"
  39 + :before-upload="beforeUploadBgPic"
  40 + >
  41 + <img v-if="bgPic" :src="bgPic" alt="avatar" />
  42 + <div v-else>
  43 + <Spin v-if="loading1" tip="正在上传中..." />
  44 + <PlusOutlined v-else style="font-size: 2.5rem" /> </div
  45 + ></Upload>
  46 + </template>
  47 + <template #uploadText>
  48 + <div class="flex justify-center items-center">
  49 + 支持.PNG、.JPG格式，建议尺寸为1920*1080px，大小不超过2M
  50 + </div>
  51 + </template>
  52 + </ContentUploadText>
  53 + </template>
  54 + <template #colorInput="{ model, field }"
  55 + ><Input disabled v-model:value="model[field]">
  56 + <template #prefix> <input type="color" v-model="model[field]" /> </template
  57 + ></Input>
  58 + </template>
  59 +
  60 + <template #homeSwiper>
  61 + <ContentUploadText>
  62 + <template #uploadImg>
  63 + <Upload
  64 + v-model:file-list="fileList"
  65 + list-type="picture-card"
  66 + @preview="handlePreview"
  67 + :customRequest="customUploadHomeSwiper"
  68 + :before-upload="beforeUploadHomeSwiper"
  69 + @change="handleChange"
  70 + >
  71 + <div v-if="fileList.length < 5">
  72 + <div>
  73 + <PlusOutlined style="font-size: 2.5rem" />
  74 + </div> </div
  75 + ></Upload>
  76 + </template>
  77 + <template #uploadText>
  78 + <div class="flex justify-center items-center">
  79 + 支持.PNG、.JPG格式，建议尺寸为800*600px，大小不超过3M
  80 + </div>
  81 + </template>
  82 + </ContentUploadText>
  83 + <Modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
  84 + <img alt="example" style="width: 100%" :src="previewImage" />
  85 + </Modal>
  86 + </template>
  87 + </BasicForm>
  88 + </Card>
  89 + <Loading v-bind="compState" />
  90 + <Authority value="api:yt:appDesign:update:update">
  91 + <a-button @click="handleUpdateInfo" type="primary" class="mt-4">保存信息</a-button>
  92 + </Authority>
  93 + <Authority value="api:yt:appDesign:data_reset:reset">
  94 + <a-button @click="handleResetInfo" type="primary" class="ml-4">恢复默认设置</a-button>
  95 + </Authority>
  96 + </div>
  97 +</template>
  98 +
  99 +<script lang="ts">
  100 + import { defineComponent, ref, unref, onMounted } from 'vue';
  101 + import { BasicForm, useForm } from '/@/components/Form/index';
  102 + import { Loading } from '/@/components/Loading/index';
  103 + import { Card, Upload, Input, Modal } from 'ant-design-vue';
  104 + import { PlusOutlined } from '@ant-design/icons-vue';
  105 + import { schemas } from '../config/AppDraw.config';
  106 + import { FileItem, FileInfo } from '../types/index';
  107 + import { logoUpload, bgUpload, resetAppInfo } from '/@/api/oem/index';
  108 + import { useMessage } from '/@/hooks/web/useMessage';
  109 + import { getAppDesign, updateAppDesign } from '/@/api/oem/index';
  110 + import { Authority } from '/@/components/Authority';
  111 + import ContentUploadText from './ContentUploadText.vue';
  112 +
  113 + export default defineComponent({
  114 + components: {
  115 + Card,
  116 + BasicForm,
  117 + Upload,
  118 + Loading,
  119 + PlusOutlined,
  120 + Input,
  121 + Modal,
  122 + Authority,
  123 + ContentUploadText,
  124 + },
  125 + setup() {
  126 + const loading = ref(false);
  127 + const loading1 = ref(false);
  128 + const compState = ref({
  129 + absolute: false,
  130 + loading: false,
  131 + tip: '拼命加载中...',
  132 + });
  133 + const { createMessage } = useMessage();
  134 + const [registerForm, { getFieldsValue, setFieldsValue, resetFields }] = useForm({
  135 + schemas,
  136 + showSubmitButton: false,
  137 + showResetButton: false,
  138 + labelWidth: 150,
  139 + wrapperCol: {
  140 + span: 10,
  141 + },
  142 + });
  143 + const previewVisible = ref<boolean>(false);
  144 + const previewImage = ref<string | undefined>('');
  145 + function getBase64(file: File) {
  146 + return new Promise((resolve, reject) => {
  147 + const reader = new FileReader();
  148 + reader.readAsDataURL(file);
  149 + reader.onload = () => resolve(reader.result);
  150 + reader.onerror = (error) => reject(error);
  151 + });
  152 + }
  153 + const handleCancel = () => {
  154 + previewVisible.value = false;
  155 + };
  156 + const handlePreview = async (file: FileItem) => {
  157 + if (!file.url && !file.preview) {
  158 + file.preview = (await getBase64(file.originFileObj)) as string;
  159 + }
  160 + previewImage.value = file.url || file.preview;
  161 + previewVisible.value = true;
  162 + };
  163 +
  164 + // logo图片上传
  165 + const logoPic = ref();
  166 + async function customUploadLogoPic({ file }) {
  167 + if (beforeUploadLogoPic(file)) {
  168 + logoPic.value = '';
  169 + loading.value = true;
  170 + const formData = new FormData();
  171 + formData.append('file', file);
  172 + const response = await logoUpload(formData);
  173 + if (response.fileStaticUri) {
  174 + logoPic.value = response.fileStaticUri;
  175 + loading.value = false;
  176 + }
  177 + }
  178 + }
  179 + const beforeUploadLogoPic = (file) => {
  180 + const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
  181 + if (!isJpgOrPng) {
  182 + createMessage.error('只能上传图片文件!');
  183 + }
  184 + const isLt2M = (file.size as number) / 1024 < 500;
  185 + if (!isLt2M) {
  186 + createMessage.error('图片大小不能超过500KB!');
  187 + }
  188 + return isJpgOrPng && isLt2M;
  189 + };
  190 +
  191 + // 登录页背景上传
  192 + const bgPic = ref();
  193 + async function customUploadBgPic({ file }) {
  194 + if (beforeUploadBgPic(file)) {
  195 + bgPic.value = '';
  196 + loading1.value = true;
  197 + const formData = new FormData();
  198 + formData.append('file', file);
  199 + const response = await bgUpload(formData);
  200 + if (response.fileStaticUri) {
  201 + bgPic.value = response.fileStaticUri;
  202 + loading1.value = false;
  203 + }
  204 + }
  205 + }
  206 + const beforeUploadBgPic = (file) => {
  207 + const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
  208 + if (!isJpgOrPng) {
  209 + createMessage.error('只能上传图片文件!');
  210 + }
  211 + const isLt2M = (file.size as number) / 1024 / 1024 < 2;
  212 + if (!isLt2M) {
  213 + createMessage.error('图片大小不能超过2MB!');
  214 + }
  215 + return isJpgOrPng && isLt2M;
  216 + };
  217 + // 首页轮播图
  218 + const fileList = ref<FileItem[]>([]);
  219 + async function customUploadHomeSwiper({ file }) {
  220 + if (beforeUploadHomeSwiper(file)) {
  221 + const formData = new FormData();
  222 + formData.append('file', file);
  223 + const response = await bgUpload(formData);
  224 + if (response.fileStaticUri) {
  225 + fileList.value.push({
  226 + uid: -Math.random() + '',
  227 + name: response.fileName,
  228 + status: 'done',
  229 + url: response.fileStaticUri,
  230 + });
  231 + const fileArr = fileList.value.filter((item) => {
  232 + return item.percent !== 0;
  233 + });
  234 + fileList.value = fileArr;
  235 + }
  236 + }
  237 + }
  238 +
  239 + const beforeUploadHomeSwiper = (file) => {
  240 + const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
  241 + if (!isJpgOrPng) {
  242 + createMessage.error('只能上传图片文件!');
  243 + }
  244 + const isLt2M = (file.size as number) / 1024 / 1024 < 3;
  245 + if (!isLt2M) {
  246 + createMessage.error('图片大小不能超过3MB!');
  247 + }
  248 + return isJpgOrPng && isLt2M;
  249 + };
  250 + const handleChange = (info: FileInfo) => {
  251 + if (info.file.status !== 'uploading') {
  252 + fileList.value = info.fileList.filter((f: any) => !f.size);
  253 + }
  254 + };
  255 +
  256 + const handleUpdateInfo = async () => {
  257 + try {
  258 + const fieldValue = getFieldsValue();
  259 + // 做换字段
  260 + const homeSwiper = fileList.value.map((item) => item.url);
  261 + const rotation = homeSwiper.join(',');
  262 +
  263 + compState.value.loading = true;
  264 + await updateAppDesign({
  265 + ...fieldValue,
  266 + background: unref(bgPic),
  267 + icon: unref(bgPic),
  268 + logo: unref(logoPic),
  269 + rotation,
  270 + });
  271 + compState.value.loading = false;
  272 + createMessage.success('保存信息成功');
  273 + } catch (e) {
  274 + createMessage.error('保存信息失败');
  275 + }
  276 + };
  277 +
  278 + onMounted(async () => {
  279 + const res = await getAppDesign();
  280 + const rotation = res.rotation ? res.rotation.split(',') : [];
  281 + const arr: any[] = [];
  282 + for (let item of rotation) {
  283 + arr.push({
  284 + uid: -Math.random() + '',
  285 + name: '111',
  286 + url: item,
  287 + status: 'done',
  288 + });
  289 + }
  290 + setFieldsValue(res);
  291 + logoPic.value = res.logo;
  292 + bgPic.value = res.background;
  293 + if (arr[0]?.url === '') return;
  294 + fileList.value = arr;
  295 + });
  296 + const handleResetInfo = async () => {
  297 + try {
  298 + compState.value.loading = true;
  299 + await resetAppInfo();
  300 + compState.value.loading = false;
  301 + createMessage.success('恢复出厂设置成功');
  302 + resetFields();
  303 + const res = await getAppDesign();
  304 + const rotation = res.rotation ? res.rotation.split(',') : [];
  305 + const arr: any[] = [];
  306 + for (let item of rotation) {
  307 + arr.push({
  308 + uid: -Math.random() + '',
  309 + name: '111',
  310 + url: item,
  311 + status: 'done',
  312 + });
  313 + }
  314 + setFieldsValue(res);
  315 + logoPic.value = res.logo;
  316 + bgPic.value = res.background;
  317 + if (arr[0]?.url === '') return;
  318 + fileList.value = arr;
  319 + } catch (e) {
  320 + compState.value.loading = false;
  321 + createMessage.error('恢复出厂设置失败');
  322 + }
  323 + };
  324 + return {
  325 + compState,
  326 + fileList,
  327 + registerForm,
  328 + handleUpdateInfo,
  329 + handleCancel,
  330 + handlePreview,
  331 + customUploadLogoPic,
  332 + beforeUploadLogoPic,
  333 + customUploadBgPic,
  334 + beforeUploadBgPic,
  335 + customUploadHomeSwiper,
  336 + beforeUploadHomeSwiper,
  337 + handleChange,
  338 + logoPic,
  339 + bgPic,
  340 + previewVisible,
  341 + previewImage,
  342 + loading,
  343 + loading1,
  344 + handleResetInfo,
  345 + };
  346 + },
  347 + });
  348 +</script>
  349 +
  350 +<style lang="less" scoped>
  351 + .ant-upload-select-picture-card i {
  352 + font-size: 32px;
  353 + color: #999;
  354 + }
  355 +
  356 + .ant-upload-select-picture-card .ant-upload-text {
  357 + margin-top: 8px;
  358 + color: #666;
  359 + }
  360 +</style>
... ...
... ... @@ -3,81 +3,82 @@
3 3 <Card :bordered="false" class="card">
4 4 <BasicForm @register="registerForm">
5 5 <template #logoUpload>
6   - <Upload
7   - name="avatar"
8   - list-type="picture-card"
9   - class="avatar-uploader"
10   - :show-upload-list="false"
11   - :customRequest="customUploadLogoPic"
12   - :before-upload="beforeUploadLogoPic"
13   - >
14   - <img v-if="logoPic" :src="logoPic" />
15   - <div v-else>
16   - <div style="margin-top: 1.875rem">
17   - <LoadingOutlined v-if="loading" />
18   - <PlusOutlined v-else style="font-size: 2.5rem" />
19   - </div>
20   - <div
21   - class="ant-upload-text flex"
22   - style="width: 180px; height: 100px; align-items: center; font-size: 0.5625rem"
23   - >
24   - 支持.PNG、.JPG格式，建议尺寸为32*32px，大小不超过500KB</div
  6 + <ContentUploadText>
  7 + <template #uploadImg>
  8 + <Upload
  9 + name="avatar"
  10 + list-type="picture-card"
  11 + class="avatar-uploader"
  12 + :show-upload-list="false"
  13 + :customRequest="customUploadLogoPic"
  14 + :before-upload="beforeUploadLogoPic"
25 15 >
26   - </div>
27   - </Upload>
  16 + <img v-if="logoPic" :src="logoPic" alt="avatar" />
  17 + <div v-else>
  18 + <Spin v-if="loading" tip="正在上传中..." />
  19 + <PlusOutlined v-else style="font-size: 2.5rem" /> </div
  20 + ></Upload>
  21 + </template>
  22 + <template #uploadText>
  23 + <div class="flex justify-center items-center">
  24 + 支持.PNG、.JPG格式，建议尺寸为32*32px，大小不超过500KB
  25 + </div>
  26 + </template>
  27 + </ContentUploadText>
28 28 </template>
29 29 <template #iconUpload>
30   - <Upload
31   - name="avatar"
32   - list-type="picture-card"
33   - class="avatar-uploader"
34   - :show-upload-list="false"
35   - :customRequest="customUploadIconPic"
36   - :before-upload="beforeUploadIconPic"
37   - >
38   - <div v-if="iconPic">
39   - <img :src="iconPic" class="m-auto" />
40   - <div style="background-color: #ccc; margin-top: 20px">重新上传</div>
41   - </div>
42   - <div v-else>
43   - <div style="margin-top: 20px">
44   - <LoadingOutlined v-if="loading1" />
45   - <PlusOutlined v-else style="font-size: 30px" />
46   - </div>
47   - <div
48   - class="ant-upload-text flex"
49   - style="width: 130px; height: 70px; align-items: center; font-size: 0.5625rem"
50   - >
51   - 支持.ICON格式，建议尺寸为16*16px</div
  30 + <ContentUploadText>
  31 + <template #uploadImg>
  32 + <Upload
  33 + name="avatar"
  34 + list-type="picture-card"
  35 + class="avatar-uploader"
  36 + :show-upload-list="false"
  37 + :customRequest="customUploadIconPic"
  38 + :before-upload="beforeUploadIconPic"
52 39 >
53   - </div>
54   - </Upload>
  40 + <div v-if="iconPic">
  41 + <img :src="iconPic" class="m-auto" />
  42 + <div style="background-color: #ccc; margin-top: 20px">重新上传</div>
  43 + </div>
  44 + <div v-else>
  45 + <div>
  46 + <Spin v-if="loading1" tip="正在上传中..." />
  47 + <PlusOutlined v-else style="font-size: 2.5rem" />
  48 + </div> </div
  49 + ></Upload>
  50 + </template>
  51 + <template #uploadText>
  52 + <div class="flex justify-center items-center"> 支持.ICON格式，建议尺寸为16*16px </div>
  53 + </template>
  54 + </ContentUploadText>
55 55 </template>
56 56 <template #bgUpload>
57   - <Upload
58   - name="avatar"
59   - list-type="picture-card"
60   - class="avatar-uploader"
61   - :show-upload-list="false"
62   - :customRequest="customUploadBgPic"
63   - :before-upload="beforeUploadBgPic"
64   - >
65   - <img v-if="bgPic" :src="bgPic" alt="avatar" />
66   - <div v-else>
67   - <div style="margin-top: 1.875rem">
68   - <LoadingOutlined v-if="loading2" />
69   - <PlusOutlined v-else style="font-size: 2.5rem" />
70   - </div>
71   - <div
72   - class="ant-upload-text flex"
73   - style="width: 280px; height: 130px; align-items: center; font-size: 0.5625rem"
74   - >
75   - 支持.PNG、.JPG格式，建议尺寸为1920*1080px以上，大小不超过5M</div
  57 + <ContentUploadText>
  58 + <template #uploadImg>
  59 + <Upload
  60 + name="avatar"
  61 + list-type="picture-card"
  62 + class="avatar-uploader"
  63 + :show-upload-list="false"
  64 + :customRequest="customUploadBgPic"
  65 + :before-upload="beforeUploadBgPic"
76 66 >
77   - </div>
78   - </Upload>
  67 + <img v-if="bgPic" :src="bgPic" alt="avatar" />
  68 + <div v-else>
  69 + <div>
  70 + <Spin v-if="loading2" tip="正在上传中..." />
  71 + <PlusOutlined v-else style="font-size: 2.5rem" />
  72 + </div> </div
  73 + ></Upload>
  74 + </template>
  75 + <template #uploadText>
  76 + <div class="flex justify-center items-center">
  77 + 支持.PNG、.JPG格式，建议尺寸为1920*1080px以上，大小不超过5M
  78 + </div>
  79 + </template>
  80 + </ContentUploadText>
79 81 </template>
80   -
81 82 <template #colorInput="{ model, field }"
82 83 ><Input disabled v-model:value="model[field]">
83 84 <template #prefix> <input type="color" v-model="model[field]" /> </template
... ... @@ -97,7 +98,7 @@
97 98
98 99 <script lang="ts">
99 100 import { defineComponent, ref, onMounted, unref } from 'vue';
100   - import { Card, Upload, Input } from 'ant-design-vue';
  101 + import { Card, Upload, Input, Spin } from 'ant-design-vue';
101 102 import { BasicForm, useForm } from '/@/components/Form/index';
102 103 import { schemas } from '../config/CVIDraw.config';
103 104 import { Loading } from '/@/components/Loading/index';
... ... @@ -111,10 +112,11 @@
111 112 updatePlatForm,
112 113 resetPlateInfo,
113 114 } from '/@/api/oem/index';
114   - import { PlusOutlined, LoadingOutlined } from '@ant-design/icons-vue';
  115 + import { PlusOutlined } from '@ant-design/icons-vue';
115 116 import { useUserStore } from '/@/store/modules/user';
116 117 import { createLocalStorage } from '/@/utils/cache/index';
117 118 import { Authority } from '/@/components/Authority';
  119 + import ContentUploadText from './ContentUploadText.vue';
118 120
119 121 export default defineComponent({
120 122 components: {
... ... @@ -125,7 +127,8 @@
125 127 Input,
126 128 PlusOutlined,
127 129 Authority,
128   - LoadingOutlined,
  130 + ContentUploadText,
  131 + Spin,
129 132 },
130 133 setup() {
131 134 const loading = ref(false);
... ...
  1 +<template>
  2 + <a-row type="flex" align="middle" justify="start">
  3 + <a-col :span="12">
  4 + <slot name="uploadImg"></slot>
  5 + </a-col>
  6 + <a-col :span="12">
  7 + <slot name="uploadText"></slot>
  8 + </a-col>
  9 + </a-row>
  10 +</template>
  11 +
  12 +<script lang="ts" setup></script>
  13 +
  14 +<style lang="less" scoped></style>
... ...
1   -<template>
2   - <div class="card">
3   - <Card :bordered="false" class="card">
4   - <BasicForm @register="registerForm">
5   - <template #qrcode>
6   - <Upload
7   - name="avatar"
8   - list-type="picture-card"
9   - class="avatar-uploader"
10   - :show-upload-list="false"
11   - :customRequest="customUploadqrcodePic"
12   - :before-upload="beforeUploadqrcodePic"
13   - >
14   - <img v-if="qrcodePic" :src="qrcodePic" alt="avatar" />
15   - <div v-else>
16   - <div style="margin-top: 1.875rem">
17   - <LoadingOutlined v-if="loading" />
18   - <PlusOutlined v-else style="font-size: 2.5rem" />
19   - </div>
20   - <div
21   - class="ant-upload-text flex"
22   - style="width: 180px; height: 100px; align-items: center; font-size: 0.5625rem"
23   - >
24   - 支持.PNG、.JPG格式，建议尺寸为300*300px，大小不超过5M</div
25   - >
26   - </div>
27   - </Upload>
28   - </template>
29   - <template #customProv>
30   - <BasicForm @register="registerCustomForm" />
31   - </template>
32   - </BasicForm>
33   - </Card>
34   - <Loading v-bind="compState" />
35   - <Authority value="api:yt:enterprise:update:update">
36   - <a-button
37   - v-if="isWhereAdmin !== 'CUSTOMER_USER'"
38   - @click="handleUpdateInfo"
39   - type="primary"
40   - class="mt-4"
41   - >更新基本信息</a-button
42   - >
43   - </Authority>
44   - </div>
45   -</template>
46   -
47   -<script lang="ts">
48   - import { defineComponent, onMounted, ref, computed } from 'vue';
49   - import { Card, Upload } from 'ant-design-vue';
50   - import { BasicForm, useForm } from '/@/components/Form/index';
51   - import { schemas, provSchemas } from '../config/enterPriseInfo.config';
52   - import { getAreaList, getEnterPriseDetail, updateEnterPriseDetail } from '/@/api/oem/index';
53   - import { Loading } from '/@/components/Loading';
54   - import { useMessage } from '/@/hooks/web/useMessage';
55   - import { useUserStore } from '/@/store/modules/user';
56   - import { createLocalStorage } from '/@/utils/cache';
57   - import { PlusOutlined, LoadingOutlined } from '@ant-design/icons-vue';
58   - import { qrcodeUpload } from '/@/api/oem/index';
59   - import type { FileItem } from '/@/components/Upload/src/typing';
60   - import type { CityItem, Code } from '../types';
61   - import { Authority } from '/@/components/Authority';
62   - import { USER_INFO_KEY } from '/@/enums/cacheEnum';
63   - import { getAuthCache } from '/@/utils/auth';
64   -
65   - export default defineComponent({
66   - components: {
67   - Card,
68   - BasicForm,
69   - Loading,
70   - Upload,
71   - PlusOutlined,
72   - Authority,
73   - LoadingOutlined,
74   - },
75   - setup() {
76   - const userInfo: any = getAuthCache(USER_INFO_KEY);
77   - const isWhereAdmin: any = computed(() => {
78   - if (userInfo.roles.includes('TENANT_ADMIN')) {
79   - return 'TENANT_ADMIN';
80   - } else if (userInfo.roles.includes('CUSTOMER_USER')) {
81   - return 'CUSTOMER_USER';
82   - } else {
83   - return 'SYS_ADMIN';
84   - }
85   - });
86   -
87   - const loading = ref(false);
88   - const compState = ref({
89   - absolute: false,
90   - loading: false,
91   - tip: '拼命加载中...',
92   - });
93   - const [registerForm, { getFieldsValue, setFieldsValue, validate, clearValidate }] = useForm({
94   - labelWidth: 80,
95   - schemas,
96   - showResetButton: false,
97   - showSubmitButton: false,
98   - wrapperCol: {
99   - span: 12,
100   - },
101   - });
102   -
103   - const [
104   - registerCustomForm,
105   - { getFieldsValue: getNameTown, updateSchema, setFieldsValue: setNameTown },
106   - ] = useForm({
107   - labelWidth: 80,
108   - schemas: provSchemas,
109   - showResetButton: false,
110   - showSubmitButton: false,
111   - compact: true,
112   - actionColOptions: {
113   - span: 0,
114   - },
115   - });
116   -
117   - const { createMessage } = useMessage();
118   -
119   - const qrcodePic = ref();
120   - const customUploadqrcodePic = async ({ file }) => {
121   - clearValidate('qrcode');
122   - if (beforeUploadqrcodePic(file)) {
123   - qrcodePic.value = '';
124   - loading.value = true;
125   - const formData = new FormData();
126   - formData.append('file', file);
127   - const response = await qrcodeUpload(formData);
128   - if (response.fileStaticUri) {
129   - qrcodePic.value = response.fileStaticUri;
130   - loading.value = false;
131   - }
132   - }
133   - };
134   - const beforeUploadqrcodePic = (file: FileItem) => {
135   - const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
136   - if (!isJpgOrPng) {
137   - createMessage.error('只能上传图片文件!');
138   - }
139   - const isLt2M = (file.size as number) / 1024 / 1024 < 5;
140   - if (!isLt2M) {
141   - createMessage.error('图片大小不能超过5MB!');
142   - }
143   - return isJpgOrPng && isLt2M;
144   - };
145   - // 更新
146   - const handleUpdateInfo = async () => {
147   - try {
148   - const fieldsValue = getFieldsValue();
149   - const { nameTown } = getNameTown();
150   - const newFieldValue: any = {
151   - ...fieldsValue,
152   - codeTown: nameTown,
153   - qrCode: qrcodePic.value,
154   - };
155   - delete newFieldValue.nameProv;
156   - delete newFieldValue.nameCity;
157   - delete newFieldValue.nameCoun;
158   - delete newFieldValue.nameTown;
159   - // 表单校验
160   - let validateArray = [
161   - 'name',
162   - 'abbreviation',
163   - 'officialWebsite',
164   - 'email',
165   - 'synopsis',
166   - 'nameCountry',
167   - 'address',
168   - 'contacts',
169   - 'tel',
170   - 'id',
171   - ];
172   - if (newFieldValue.qrCode == undefined || newFieldValue.qrCode == '') {
173   - validateArray.push('qrcode');
174   - } else {
175   - const findExistIndex = validateArray.findIndex((o) => o == 'qrcode');
176   - if (findExistIndex !== -1) {
177   - validateArray.splice(findExistIndex, 1);
178   - }
179   - }
180   - if (newFieldValue.codeTown == undefined) {
181   - validateArray.push('prov');
182   - console.log(validateArray);
183   - } else {
184   - const findExistIndex1 = validateArray.findIndex((o) => o == 'prov');
185   - if (findExistIndex1 !== -1) {
186   - validateArray.splice(findExistIndex1, 1);
187   - }
188   - clearValidate('prov');
189   - }
190   - const values = await validate(validateArray);
191   - if (!values) return;
192   - compState.value.loading = true;
193   - await updateEnterPriseDetail(newFieldValue);
194   - createMessage.success('更新信息成功');
195   - setEnterPriseInfo(newFieldValue);
196   - } finally {
197   - compState.value.loading = false;
198   - }
199   - };
200   -
201   - const userStore = useUserStore();
202   - const storage = createLocalStorage();
203   -
204   - // 设置企业信息
205   - function setEnterPriseInfo(newFieldValue) {
206   - // 保存store
207   - userStore.setEnterPriseInfo(newFieldValue);
208   - // 保存本地缓存
209   - storage.set('enterpriseInfo', newFieldValue);
210   - }
211   -
212   - // 地区显示回显和数据联动
213   - async function updateCityData(
214   - cities: CityItem[],
215   - couns: CityItem[],
216   - towns: CityItem[],
217   - code: Code
218   - ) {
219   - // 加工后端返回字段
220   -
221   - cities.forEach((item) => {
222   - item.label = item.name;
223   - item.value = item.code;
224   - });
225   -
226   - couns.forEach((item) => {
227   - item.label = item.name;
228   - item.value = item.code;
229   - });
230   - towns.forEach((item) => {
231   - item.label = item.name;
232   - item.value = item.code;
233   - });
234   - const { codeProv, codeCity, codeCoun, codeTown } = code;
235   - updateSchema([
236   - {
237   - field: 'nameCity',
238   - componentProps: ({ formModel }) => {
239   - return {
240   - options: cities,
241   - async onChange(value) {
242   - if (value === undefined) {
243   - formModel.nameCoun = undefined; // reset city value
244   - formModel.nameTown = undefined;
245   - updateSchema([
246   - {
247   - field: 'nameCoun',
248   - componentProps: {
249   - options: [],
250   - },
251   - },
252   - {
253   - field: 'nameTown',
254   - componentProps: {
255   - options: [],
256   - },
257   - },
258   - ]);
259   - } else {
260   - let couns: CityItem[] = await getAreaList({ parentId: value });
261   - couns.forEach((item) => {
262   - item.label = item.name;
263   - item.value = item.code;
264   - });
265   - formModel.nameCoun = undefined; // reset city value
266   - formModel.nameTown = undefined;
267   - updateSchema({
268   - field: 'nameCoun',
269   - componentProps: {
270   - // 请选择区
271   - options: couns,
272   - async onChange(value) {
273   - if (value === undefined) {
274   - formModel.nameTown = undefined;
275   - } else {
276   - let towns: CityItem[] = await getAreaList({ parentId: value });
277   - towns.forEach((item) => {
278   - item.label = item.name;
279   - item.value = item.code;
280   - });
281   - formModel.nameTown = undefined;
282   - updateSchema({
283   - field: 'nameTown',
284   - componentProps: {
285   - placeholder: '城镇/街道',
286   - options: towns,
287   - },
288   - });
289   - }
290   - },
291   - },
292   - });
293   - }
294   - },
295   - };
296   - },
297   - },
298   - {
299   - field: 'nameCoun',
300   - componentProps: {
301   - options: couns,
302   - async onChange(value) {
303   - if (value === undefined) {
304   - setNameTown({
305   - nameTown: undefined,
306   - });
307   - updateSchema({
308   - field: 'nameTown',
309   - componentProps: {
310   - placeholder: '城镇/街道',
311   - options: [],
312   - },
313   - });
314   - } else {
315   - let towns = await getAreaList({ parentId: value });
316   - towns.forEach((item) => {
317   - item.label = item.name;
318   - item.value = item.code;
319   - });
320   - setNameTown({
321   - nameTown: undefined,
322   - });
323   - updateSchema({
324   - field: 'nameTown',
325   - componentProps: {
326   - placeholder: '城镇/街道',
327   - options: towns,
328   - },
329   - });
330   - }
331   - },
332   - },
333   - },
334   - {
335   - field: 'nameTown',
336   - componentProps: {
337   - options: towns,
338   - },
339   - },
340   - ]);
341   - setNameTown({
342   - nameProv: codeProv,
343   - nameCity: codeCity,
344   - nameCoun: codeCoun,
345   - nameTown: codeTown,
346   - });
347   - }
348   -
349   - onMounted(async () => {
350   - const res = await getEnterPriseDetail();
351   - if (res.sysTown) {
352   - const { cities, couns, towns, codeCountry, codeProv, codeCity, codeCoun, codeTown } =
353   - res.sysTown;
354   - const code = {
355   - codeCountry,
356   - codeProv,
357   - codeCity,
358   - codeCoun,
359   - codeTown,
360   - };
361   - updateCityData(cities, couns, towns, code);
362   - setFieldsValue({ nameCountry: codeCountry });
363   - }
364   - setFieldsValue(res);
365   - qrcodePic.value = res.qrCode;
366   - });
367   -
368   - return {
369   - registerForm,
370   - compState,
371   - qrcodePic,
372   - handleUpdateInfo,
373   - customUploadqrcodePic,
374   - beforeUploadqrcodePic,
375   - registerCustomForm,
376   - loading,
377   - isWhereAdmin,
378   - };
379   - },
380   - });
381   -</script>
  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 + <Upload
  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 v-if="qrcodePic" :src="qrcodePic" alt="avatar" />
  17 + <div v-else>
  18 + <Spin v-if="loading" tip="正在上传中..." />
  19 + <PlusOutlined v-else style="font-size: 2.5rem" /> </div
  20 + ></Upload>
  21 + </template>
  22 + <template #uploadText>
  23 + <div class="flex justify-center items-center">
  24 + 支持.PNG、.JPG格式，建议尺寸为300*300px，大小不超过5M
  25 + </div>
  26 + </template>
  27 + </ContentUploadText>
  28 + </template>
  29 + <template #customProv>
  30 + <BasicForm @register="registerCustomForm" />
  31 + </template>
  32 + </BasicForm>
  33 + </Card>
  34 + <Loading v-bind="compState" />
  35 + <Authority value="api:yt:enterprise:update:update">
  36 + <a-button
  37 + v-if="isWhereAdmin !== 'CUSTOMER_USER'"
  38 + @click="handleUpdateInfo"
  39 + type="primary"
  40 + class="mt-4"
  41 + >更新基本信息</a-button
  42 + >
  43 + </Authority>
  44 + </div>
  45 +</template>
  46 +
  47 +<script lang="ts">
  48 + import { defineComponent, onMounted, ref, computed } from 'vue';
  49 + import { Card, Upload } from 'ant-design-vue';
  50 + import { BasicForm, useForm } from '/@/components/Form/index';
  51 + import { schemas, provSchemas } from '../config/enterPriseInfo.config';
  52 + import { getAreaList, getEnterPriseDetail, updateEnterPriseDetail } from '/@/api/oem/index';
  53 + import { Loading } from '/@/components/Loading';
  54 + import { useMessage } from '/@/hooks/web/useMessage';
  55 + import { useUserStore } from '/@/store/modules/user';
  56 + import { createLocalStorage } from '/@/utils/cache';
  57 + import { PlusOutlined } from '@ant-design/icons-vue';
  58 + import { qrcodeUpload } from '/@/api/oem/index';
  59 + import type { FileItem } from '/@/components/Upload/src/typing';
  60 + import type { CityItem, Code } from '../types';
  61 + import { Authority } from '/@/components/Authority';
  62 + import { USER_INFO_KEY } from '/@/enums/cacheEnum';
  63 + import { getAuthCache } from '/@/utils/auth';
  64 + import ContentUploadText from './ContentUploadText.vue';
  65 +
  66 + export default defineComponent({
  67 + components: {
  68 + Card,
  69 + BasicForm,
  70 + Loading,
  71 + Upload,
  72 + PlusOutlined,
  73 + Authority,
  74 + ContentUploadText,
  75 + },
  76 + setup() {
  77 + const userInfo: any = getAuthCache(USER_INFO_KEY);
  78 + const isWhereAdmin: any = computed(() => {
  79 + if (userInfo.roles.includes('TENANT_ADMIN')) {
  80 + return 'TENANT_ADMIN';
  81 + } else if (userInfo.roles.includes('CUSTOMER_USER')) {
  82 + return 'CUSTOMER_USER';
  83 + } else {
  84 + return 'SYS_ADMIN';
  85 + }
  86 + });
  87 +
  88 + const loading = ref(false);
  89 + const compState = ref({
  90 + absolute: false,
  91 + loading: false,
  92 + tip: '拼命加载中...',
  93 + });
  94 + const [registerForm, { getFieldsValue, setFieldsValue, validate, clearValidate }] = useForm({
  95 + labelWidth: 80,
  96 + schemas,
  97 + showResetButton: false,
  98 + showSubmitButton: false,
  99 + wrapperCol: {
  100 + span: 12,
  101 + },
  102 + });
  103 +
  104 + const [
  105 + registerCustomForm,
  106 + { getFieldsValue: getNameTown, updateSchema, setFieldsValue: setNameTown },
  107 + ] = useForm({
  108 + labelWidth: 80,
  109 + schemas: provSchemas,
  110 + showResetButton: false,
  111 + showSubmitButton: false,
  112 + compact: true,
  113 + actionColOptions: {
  114 + span: 0,
  115 + },
  116 + });
  117 +
  118 + const { createMessage } = useMessage();
  119 +
  120 + const qrcodePic = ref();
  121 + const customUploadqrcodePic = async ({ file }) => {
  122 + clearValidate('qrcode');
  123 + if (beforeUploadqrcodePic(file)) {
  124 + qrcodePic.value = '';
  125 + loading.value = true;
  126 + const formData = new FormData();
  127 + formData.append('file', file);
  128 + const response = await qrcodeUpload(formData);
  129 + if (response.fileStaticUri) {
  130 + qrcodePic.value = response.fileStaticUri;
  131 + loading.value = false;
  132 + }
  133 + }
  134 + };
  135 + const beforeUploadqrcodePic = (file: FileItem) => {
  136 + const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
  137 + if (!isJpgOrPng) {
  138 + createMessage.error('只能上传图片文件!');
  139 + }
  140 + const isLt2M = (file.size as number) / 1024 / 1024 < 5;
  141 + if (!isLt2M) {
  142 + createMessage.error('图片大小不能超过5MB!');
  143 + }
  144 + return isJpgOrPng && isLt2M;
  145 + };
  146 + // 更新
  147 + const handleUpdateInfo = async () => {
  148 + try {
  149 + const fieldsValue = getFieldsValue();
  150 + const { nameTown } = getNameTown();
  151 + const newFieldValue: any = {
  152 + ...fieldsValue,
  153 + codeTown: nameTown,
  154 + qrCode: qrcodePic.value,
  155 + };
  156 + delete newFieldValue.nameProv;
  157 + delete newFieldValue.nameCity;
  158 + delete newFieldValue.nameCoun;
  159 + delete newFieldValue.nameTown;
  160 + // 表单校验
  161 + let validateArray = [
  162 + 'name',
  163 + 'abbreviation',
  164 + 'officialWebsite',
  165 + 'email',
  166 + 'synopsis',
  167 + 'nameCountry',
  168 + 'address',
  169 + 'contacts',
  170 + 'tel',
  171 + 'id',
  172 + ];
  173 + if (newFieldValue.qrCode == undefined || newFieldValue.qrCode == '') {
  174 + validateArray.push('qrcode');
  175 + } else {
  176 + const findExistIndex = validateArray.findIndex((o) => o == 'qrcode');
  177 + if (findExistIndex !== -1) {
  178 + validateArray.splice(findExistIndex, 1);
  179 + }
  180 + }
  181 + if (newFieldValue.codeTown == undefined) {
  182 + validateArray.push('prov');
  183 + console.log(validateArray);
  184 + } else {
  185 + const findExistIndex1 = validateArray.findIndex((o) => o == 'prov');
  186 + if (findExistIndex1 !== -1) {
  187 + validateArray.splice(findExistIndex1, 1);
  188 + }
  189 + clearValidate('prov');
  190 + }
  191 + const values = await validate(validateArray);
  192 + if (!values) return;
  193 + compState.value.loading = true;
  194 + await updateEnterPriseDetail(newFieldValue);
  195 + createMessage.success('更新信息成功');
  196 + setEnterPriseInfo(newFieldValue);
  197 + } finally {
  198 + compState.value.loading = false;
  199 + }
  200 + };
  201 +
  202 + const userStore = useUserStore();
  203 + const storage = createLocalStorage();
  204 +
  205 + // 设置企业信息
  206 + function setEnterPriseInfo(newFieldValue) {
  207 + // 保存store
  208 + userStore.setEnterPriseInfo(newFieldValue);
  209 + // 保存本地缓存
  210 + storage.set('enterpriseInfo', newFieldValue);
  211 + }
  212 +
  213 + // 地区显示回显和数据联动
  214 + async function updateCityData(
  215 + cities: CityItem[],
  216 + couns: CityItem[],
  217 + towns: CityItem[],
  218 + code: Code
  219 + ) {
  220 + // 加工后端返回字段
  221 +
  222 + cities.forEach((item) => {
  223 + item.label = item.name;
  224 + item.value = item.code;
  225 + });
  226 +
  227 + couns.forEach((item) => {
  228 + item.label = item.name;
  229 + item.value = item.code;
  230 + });
  231 + towns.forEach((item) => {
  232 + item.label = item.name;
  233 + item.value = item.code;
  234 + });
  235 + const { codeProv, codeCity, codeCoun, codeTown } = code;
  236 + updateSchema([
  237 + {
  238 + field: 'nameCity',
  239 + componentProps: ({ formModel }) => {
  240 + return {
  241 + options: cities,
  242 + async onChange(value) {
  243 + if (value === undefined) {
  244 + formModel.nameCoun = undefined; // reset city value
  245 + formModel.nameTown = undefined;
  246 + updateSchema([
  247 + {
  248 + field: 'nameCoun',
  249 + componentProps: {
  250 + options: [],
  251 + },
  252 + },
  253 + {
  254 + field: 'nameTown',
  255 + componentProps: {
  256 + options: [],
  257 + },
  258 + },
  259 + ]);
  260 + } else {
  261 + let couns: CityItem[] = await getAreaList({ parentId: value });
  262 + couns.forEach((item) => {
  263 + item.label = item.name;
  264 + item.value = item.code;
  265 + });
  266 + formModel.nameCoun = undefined; // reset city value
  267 + formModel.nameTown = undefined;
  268 + updateSchema({
  269 + field: 'nameCoun',
  270 + componentProps: {
  271 + // 请选择区
  272 + options: couns,
  273 + async onChange(value) {
  274 + if (value === undefined) {
  275 + formModel.nameTown = undefined;
  276 + } else {
  277 + let towns: CityItem[] = await getAreaList({ parentId: value });
  278 + towns.forEach((item) => {
  279 + item.label = item.name;
  280 + item.value = item.code;
  281 + });
  282 + formModel.nameTown = undefined;
  283 + updateSchema({
  284 + field: 'nameTown',
  285 + componentProps: {
  286 + placeholder: '城镇/街道',
  287 + options: towns,
  288 + },
  289 + });
  290 + }
  291 + },
  292 + },
  293 + });
  294 + }
  295 + },
  296 + };
  297 + },
  298 + },
  299 + {
  300 + field: 'nameCoun',
  301 + componentProps: {
  302 + options: couns,
  303 + async onChange(value) {
  304 + if (value === undefined) {
  305 + setNameTown({
  306 + nameTown: undefined,
  307 + });
  308 + updateSchema({
  309 + field: 'nameTown',
  310 + componentProps: {
  311 + placeholder: '城镇/街道',
  312 + options: [],
  313 + },
  314 + });
  315 + } else {
  316 + let towns = await getAreaList({ parentId: value });
  317 + towns.forEach((item) => {
  318 + item.label = item.name;
  319 + item.value = item.code;
  320 + });
  321 + setNameTown({
  322 + nameTown: undefined,
  323 + });
  324 + updateSchema({
  325 + field: 'nameTown',
  326 + componentProps: {
  327 + placeholder: '城镇/街道',
  328 + options: towns,
  329 + },
  330 + });
  331 + }
  332 + },
  333 + },
  334 + },
  335 + {
  336 + field: 'nameTown',
  337 + componentProps: {
  338 + options: towns,
  339 + },
  340 + },
  341 + ]);
  342 + setNameTown({
  343 + nameProv: codeProv,
  344 + nameCity: codeCity,
  345 + nameCoun: codeCoun,
  346 + nameTown: codeTown,
  347 + });
  348 + }
  349 +
  350 + onMounted(async () => {
  351 + const res = await getEnterPriseDetail();
  352 + if (res.sysTown) {
  353 + const { cities, couns, towns, codeCountry, codeProv, codeCity, codeCoun, codeTown } =
  354 + res.sysTown;
  355 + const code = {
  356 + codeCountry,
  357 + codeProv,
  358 + codeCity,
  359 + codeCoun,
  360 + codeTown,
  361 + };
  362 + updateCityData(cities, couns, towns, code);
  363 + setFieldsValue({ nameCountry: codeCountry });
  364 + }
  365 + setFieldsValue(res);
  366 + qrcodePic.value = res.qrCode;
  367 + });
  368 +
  369 + return {
  370 + registerForm,
  371 + compState,
  372 + qrcodePic,
  373 + handleUpdateInfo,
  374 + customUploadqrcodePic,
  375 + beforeUploadqrcodePic,
  376 + registerCustomForm,
  377 + loading,
  378 + isWhereAdmin,
  379 + };
  380 + },
  381 + });
  382 +</script>
... ...