CRM系统前端
查看 | 历史 | 提交 | 提交对比
fourteendp
2024-07-04 64a4992a84dadb33614e937f5d7464dcd312a1bd
提交 | 用户 | age
6753e2 1 import { ComponentOptions, h } from 'vue';
L 2 import {
3   FormItemContentRenderParams,
64a499 4   VxeFormItemPropTypes,
6753e2 5   VxeGlobalRendererHandles,
L 6 } from 'vxe-table';
7 import XEUtils from 'xe-utils';
8 import { componentMap } from '../componentMap';
9 import { ComponentType } from '../componentType';
9882e8 10 import { createPlaceholderMessage, sanitizeInputWhitespace } from '../helper';
6753e2 11
L 12 /**
13  * @description: 获取组件
14  */
15 export function getComponent(componentName) {
16   const Component = componentMap.get(componentName as ComponentType);
17   if (!Component) throw `您还没注册此组件 ${componentName}`;
18   return Component as ComponentOptions;
19 }
20
21 export function isEmptyValue(cellValue: any) {
22   return cellValue === null || cellValue === undefined || cellValue === '';
23 }
24
25 export function formatText(cellValue: any) {
26   return '' + (isEmptyValue(cellValue) ? '' : cellValue);
27 }
28
29 export function cellText(cellValue: any): string[] {
30   return [formatText(cellValue)];
31 }
32
33 /**
34  * @description: 方法名转换
35  */
36 export function getOnName(type: string) {
37   return 'on' + type.substring(0, 1).toLocaleUpperCase() + type.substring(1);
38 }
39
40 /**
41  * @description: 获取组件传值所接受的属性
42  */
43 function getModelKey(renderOpts: VxeGlobalRendererHandles.RenderOptions) {
44   let prop = 'value';
45   switch (renderOpts.name) {
46     case 'ASwitch':
47       prop = 'checked';
48       break;
49   }
50   return prop;
51 }
52
53 /**
54  * @description: 回去双向更新的方法
55  */
56 function getModelEvent(renderOpts: VxeGlobalRendererHandles.RenderOptions) {
57   let type = 'update:value';
58   switch (renderOpts.name) {
59     case 'ASwitch':
60       type = 'update:checked';
61       break;
62   }
63   return type;
64 }
65
66 /**
67  * @description: chang值改变方法
68  * @param {}
69  * @return {*}
70  * @author: *
71  */
72 function getChangeEvent() {
73   return 'change';
74 }
75
76 function getClickEvent() {
77   return 'click';
78 }
79 /**
80  * @description: 获取方法
81  * @param {}
82  * @return {*}
83  * @author: *
84  */
85 export function createEvents(
86   renderOpts: VxeGlobalRendererHandles.RenderOptions,
87   params: VxeGlobalRendererHandles.RenderParams,
88   inputFunc?: Function,
89   changeFunc?: Function,
90   clickFunc?: Function,
91 ) {
92   const { events } = renderOpts;
93   const modelEvent = getModelEvent(renderOpts);
94   const changeEvent = getChangeEvent();
95   const clickEvent = getClickEvent();
96   const isSameEvent = changeEvent === modelEvent;
97   const ons: { [type: string]: Function } = {};
98
99   XEUtils.objectEach(events, (func: Function, key: string) => {
100     ons[getOnName(key)] = function (...args: any[]) {
101       func(params, ...args);
102     };
103   });
104   if (inputFunc) {
9882e8 105     ons[getOnName(modelEvent)] = function (targetEvent: any) {
Z 106       inputFunc(targetEvent);
6753e2 107       if (events && events[modelEvent]) {
9882e8 108         events[modelEvent](params, targetEvent);
6753e2 109       }
L 110       if (isSameEvent && changeFunc) {
9882e8 111         changeFunc(targetEvent);
6753e2 112       }
L 113     };
114   }
115   if (!isSameEvent && changeFunc) {
116     ons[getOnName(changeEvent)] = function (...args: any[]) {
117       changeFunc(...args);
118       if (events && events[changeEvent]) {
119         events[changeEvent](params, ...args);
120       }
121     };
122   }
123   if (clickFunc) {
124     ons[getOnName(clickEvent)] = function (...args: any[]) {
125       clickFunc(...args);
126       if (events && events[clickEvent]) {
127         events[clickEvent](params, ...args);
128       }
129     };
130   }
131   return ons;
132 }
133
134 /**
135  * @description: 获取属性
136  */
137 export function createProps(
138   renderOpts: VxeGlobalRendererHandles.RenderOptions,
139   value: any,
140   defaultProps?: { [prop: string]: any },
141 ) {
142   const name = renderOpts.name as ComponentType;
143   return XEUtils.assign(
144     {
145       placeholder: createPlaceholderMessage(name),
146       allowClear: true,
147     },
148     defaultProps,
149     renderOpts.props,
150     {
151       [getModelKey(renderOpts)]: value,
152     },
153   );
154 }
155
156 /**
157  * @description: 创建单元格默认显示内容
158  */
159 export function createDefaultRender(
160   defaultProps?: { [key: string]: any },
161   callBack?: (
162     renderOpts: VxeGlobalRendererHandles.RenderDefaultOptions,
64a499 163     params: VxeGlobalRendererHandles.RenderTableDefaultParams,
6753e2 164   ) => Record<string, any>,
L 165 ) {
166   return function (
167     renderOpts: VxeGlobalRendererHandles.RenderDefaultOptions,
64a499 168     params: VxeGlobalRendererHandles.RenderTableDefaultParams,
6753e2 169   ) {
L 170     const { row, column, $table } = params;
171     const { name, attrs } = renderOpts;
172     const cellValue = XEUtils.get(row, column.field as string);
173     const args = (callBack && callBack(renderOpts, params)) ?? {};
174
175     const Component = getComponent(name);
176     return [
177       h(Component, {
178         ...attrs,
179         ...createProps(renderOpts, cellValue, defaultProps),
180         ...args,
181         ...createEvents(
182           renderOpts,
183           params,
184           (value: any) => XEUtils.set(row, column.field as string, value),
185           () => $table.updateStatus(params),
186         ),
187       }),
188     ];
189   };
190 }
191
192 /**
193  * @description: 创建编辑单元格
194  */
195 export function createEditRender(
196   defaultProps?: { [key: string]: any },
197   callBack?: (
64a499 198     renderOpts: VxeGlobalRendererHandles.RenderTableEditOptions,
F 199     params: VxeGlobalRendererHandles.RenderTableEditParams,
6753e2 200   ) => Record<string, any>,
L 201 ) {
202   return function (
64a499 203     renderOpts: VxeGlobalRendererHandles.RenderTableEditOptions,
F 204     params: VxeGlobalRendererHandles.RenderTableEditParams,
6753e2 205   ) {
L 206     const { row, column, $table } = params;
207     const { name, attrs } = renderOpts;
208     const cellValue = XEUtils.get(row, column.field as string);
209     const args = (callBack && callBack(renderOpts, params)) ?? {};
210
211     const Component = getComponent(name);
212     return [
213       h(Component, {
214         ...attrs,
215         ...createProps(renderOpts, cellValue, defaultProps),
216         ...args,
217         ...createEvents(
218           renderOpts,
219           params,
220           (value: any) => XEUtils.set(row, column.field as string, value),
221           () => $table.updateStatus(params),
222         ),
223       }),
224     ];
225   };
226 }
227
228 /**
229  * @description: 创建筛选渲染内容
230  */
231 export function createFilterRender(
232   defaultProps?: { [key: string]: any },
233   callBack?: (
234     renderOpts: VxeGlobalRendererHandles.RenderFilterOptions,
64a499 235     params: VxeGlobalRendererHandles.RenderTableFilterParams,
6753e2 236   ) => Record<string, any>,
L 237 ) {
238   return function (
239     renderOpts: VxeGlobalRendererHandles.RenderFilterOptions,
64a499 240     params: VxeGlobalRendererHandles.RenderTableFilterParams,
6753e2 241   ) {
L 242     const { column } = params;
243     const { name, attrs } = renderOpts;
244     const args = (callBack && callBack(renderOpts, params)) ?? {};
245
246     const Component = getComponent(name);
247     return [
248       h(
249         'div',
250         {
251           class: 'vxe-table--filter-antd-wrapper',
252         },
253         column.filters.map((option, oIndex) => {
254           const optionValue = option.data;
255           const checked = !!option.data;
256
257           return h(Component, {
258             key: oIndex,
259             ...attrs,
260             ...createProps(renderOpts, optionValue, defaultProps),
261             ...args,
262             ...createEvents(
263               renderOpts,
264               params,
265               (value: any) => {
266                 // 处理 model 值双向绑定
267                 option.data = value;
268               },
269               () => {
270                 // 处理 change 事件相关逻辑
271                 const { $panel } = params;
272                 $panel.changeOption(null, checked, option);
273               },
274             ),
275           });
276         }),
277       ),
278     ];
279   };
280 }
281
282 /**
283  * @description: 默认过滤
284  * @param {}
285  * @return {*}
286  * @author: *
287  */
288
289 export function createDefaultFilterRender() {
64a499 290   return function (params: VxeGlobalRendererHandles.TableFilterMethodParams) {
6753e2 291     const { option, row, column } = params;
L 292     const { data } = option;
293     const cellValue = XEUtils.get(row, column.field as string);
294     return cellValue === data;
295   };
296 }
297
298 /**
299  * @description: 创建 form表单渲染
300  */
301 export function createFormItemRender(
302   defaultProps?: { [key: string]: any },
303   callBack?: (
64a499 304     renderOpts: VxeFormItemPropTypes.ItemRender,
6753e2 305     params: FormItemContentRenderParams,
L 306   ) => Record<string, any>,
307 ) {
64a499 308   return function (
F 309     renderOpts: VxeFormItemPropTypes.ItemRender,
310     params: FormItemContentRenderParams,
311   ) {
6753e2 312     const args = (callBack && callBack(renderOpts, params)) ?? {};
L 313     const { data, property, $form } = params;
314     const { name } = renderOpts;
315     const { attrs } = renderOpts;
316     const itemValue = XEUtils.get(data, property);
317
318     const Component = getComponent(name);
319     return [
320       h(Component, {
321         ...attrs,
322         ...createProps(renderOpts, itemValue, defaultProps),
323         ...args,
324         ...createEvents(
325           renderOpts,
326           params,
327           (value: any) => {
328             // 处理 model 值双向绑定
9882e8 329             XEUtils.set(data, property, sanitizeInputWhitespace(name as ComponentType, value));
6753e2 330           },
L 331           () => {
332             // 处理 change 事件相关逻辑
333             $form.updateStatus({
334               ...params,
335               field: property,
336             });
337           },
338         ),
339       }),
340     ];
341   };
342 }
343
344 /**
345  * @description: cell渲染
346  */
347 export function createCellRender(
348   getSelectCellValue: Function,
349   callBack?: (
64a499 350     renderOpts: VxeGlobalRendererHandles.RenderTableCellOptions,
F 351     params: VxeGlobalRendererHandles.RenderTableCellParams,
6753e2 352   ) => Array<any>,
L 353 ) {
354   return function (
64a499 355     renderOpts: VxeGlobalRendererHandles.RenderTableCellOptions,
F 356     params: VxeGlobalRendererHandles.RenderTableCellParams,
6753e2 357   ) {
L 358     const args = (callBack && callBack(renderOpts, params)) ?? [];
359     const cellLabel = getSelectCellValue && getSelectCellValue(renderOpts, params, ...args);
360     const { placeholder } = renderOpts;
361
362     return [
363       h(
364         'span',
365         {
366           class: 'vxe-cell--label',
367         },
368         placeholder && isEmptyValue(cellLabel)
369           ? [
370               h(
371                 'span',
372                 {
373                   class: 'vxe-cell--placeholder',
374                 },
375                 formatText(placeholder),
376               ),
377             ]
378           : formatText(cellLabel),
379       ),
380     ];
381   };
382 }
383
384 /**
385  * @description: 创建 导出渲染
386  * @param {}
387  * @return {*}
388  * @author: *
389  */
390 export function createExportMethod(
391   getExportCellValue: Function,
392   callBack?: (params: VxeGlobalRendererHandles.ExportMethodParams) => Array<any>,
393 ) {
394   return function (params: VxeGlobalRendererHandles.ExportMethodParams) {
395     const { row, column, options } = params;
396     const args = (callBack && callBack(params)) ?? [];
397     return options && options.original
398       ? XEUtils.get(row, column.field as string)
399       : getExportCellValue(column.editRender || column.cellRender, params, ...args);
400   };
401 }
402
403 /**
404  * @description: 创建单元格默认显示内容
405  */
406 export function createToolbarToolRender(
407   defaultProps?: { [key: string]: any },
408   callBack?: (
409     renderOpts: VxeGlobalRendererHandles.RenderToolOptions,
410     params: VxeGlobalRendererHandles.RenderToolParams,
411   ) => Record<string, any>,
412 ) {
413   return function (
414     renderOpts: VxeGlobalRendererHandles.RenderToolOptions,
415     params: VxeGlobalRendererHandles.RenderToolParams,
416   ) {
417     const { name, attrs } = renderOpts;
418     const args = (callBack && callBack(renderOpts, params)) ?? {};
419
420     const Component = getComponent(name);
421     return [
422       h(Component, {
423         ...attrs,
424         ...createProps(renderOpts, null, defaultProps),
425         ...args,
426         ...createEvents(renderOpts, params),
427       }),
428     ];
429   };
430 }