ToolbarsUI.tsx 4.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170
  1. import { css, cx } from "@linaria/core";
  2. import { Tooltip } from "ant-design-vue";
  3. import _ from "lodash";
  4. import { computed, defineComponent } from "vue";
  5. import { any, array, bool, func } from "vue-types";
  6. export interface ColumnItem {
  7. label?: string;
  8. component?: ((...args: any[]) => any) | Record<string, any>;
  9. dataIndex?: string;
  10. setterIndex?: string;
  11. props?: { [name: string]: any };
  12. itemProps?: { [name: string]: any };
  13. getValue?: (v: any, data?:any) => any;
  14. isDisable?: (value: any, data: any) => boolean;
  15. isLoading?: (value: any, data: any) => boolean;
  16. isVisible?: (value: any, data: any) => boolean;
  17. changeExtra?: (data: any) => any;
  18. children?: ColumnItem[];
  19. }
  20. export default defineComponent({
  21. props: {
  22. columns: array<ColumnItem>().isRequired,
  23. editor: any(),
  24. data: any().isRequired,
  25. disabled: bool(),
  26. onChange: func(),
  27. onChangeEnd: func(),
  28. },
  29. setup(props) {
  30. return () => <FormUI {...props} />;
  31. },
  32. });
  33. const FormUI = (props: {
  34. columns: ColumnItem[];
  35. data: any;
  36. editor: any;
  37. disabled?: boolean;
  38. onChange?: (...arg: any) => void;
  39. onChangeEnd?: (...arg: any) => void;
  40. }) => {
  41. const { columns, ...restProps } = props;
  42. return (
  43. <>
  44. {columns?.map((column: ColumnItem, index: number) => {
  45. if (!column.dataIndex) {
  46. return renderUI({ props: restProps, column, index });
  47. }
  48. return renderFormItem({ column, ...restProps, index });
  49. })}
  50. </>
  51. );
  52. };
  53. const renderUI = ({ props, column, index }: any) => {
  54. const component = column.component;
  55. if (component instanceof Function) {
  56. const params: any = {
  57. ...props,
  58. column,
  59. key: index,
  60. children: FormUI({ ...props, columns: column.children }),
  61. };
  62. return component(params);
  63. } else {
  64. return (
  65. <component {...props} column={column} key={index}>
  66. <FormUI {...props} columns={column.children} />
  67. </component>
  68. );
  69. }
  70. };
  71. export const renderFormItem = (props: {
  72. column: ColumnItem;
  73. index?: number;
  74. data: any;
  75. editor: any;
  76. disabled?: boolean;
  77. onChange?: (...arg: any) => void;
  78. onChangeEnd?: (...arg: any) => void;
  79. }) => {
  80. const { column, data, index, onChange, onChangeEnd } = props;
  81. // const compValue = computed(() => {
  82. // const { data, column } = props;
  83. // if (!column.dataIndex) return;
  84. // const itemValue = _.get(data, column.dataIndex);
  85. // return column.getValue ? column.getValue(itemValue) : itemValue;
  86. // });
  87. // const editor = props.editor;
  88. // const compValue = editor ? editor.commands.get(column.dataIndex) : "";
  89. // console.log(column.dataIndex, compValue.value);
  90. const compValue = computed(() => {
  91. const { data, column } = props;
  92. if (!column.dataIndex) return;
  93. const itemValue = _.get(data, column.dataIndex);
  94. return column.getValue ? column.getValue(itemValue, data) : itemValue;
  95. });
  96. const changeVal = (value: any, ...args: any[]) => {
  97. const { column } = props;
  98. let params = {
  99. dataIndex: column.dataIndex,
  100. setterIndex: column.setterIndex,
  101. value,
  102. ...args,
  103. };
  104. if (column.changeExtra) params = column.changeExtra?.(params);
  105. onChange?.(params);
  106. return params;
  107. };
  108. const changeValEnd = (value: any, ...args: any[]) => {
  109. const params = changeVal(value, ...args);
  110. onChangeEnd?.(params);
  111. };
  112. // const isVisible = column.isVisible?.(compValue.value, data);
  113. // if (column.isVisible && !isVisible) return null;
  114. // const disabled = props.disabled || column.isDisable?.(compValue.value, data);
  115. const component = column.component;
  116. return (
  117. <div
  118. key={index}
  119. class={formItemStyles}
  120. {...column.itemProps}
  121. onClick={(e) => e.stopPropagation()}
  122. >
  123. {column.label ? (
  124. <Tooltip title={column.label} placement="top">
  125. <component
  126. value={compValue.value}
  127. {...column.props}
  128. loading={column.isLoading?.(compValue.value, data)}
  129. onChange={changeVal}
  130. onChangeEnd={changeValEnd}
  131. />
  132. </Tooltip>
  133. ) : (
  134. <component
  135. value={compValue.value}
  136. {...column.props}
  137. loading={column.isLoading?.(compValue.value, data)}
  138. onChange={changeVal}
  139. onChangeEnd={changeValEnd}
  140. />
  141. )}
  142. </div>
  143. );
  144. };
  145. const formItemStyles = css`
  146. height: 100%;
  147. margin: 0 6px;
  148. &.disabled {
  149. cursor: not-allowed;
  150. }
  151. `;
  152. export function useFormColumns(columns: ColumnItem[]) {
  153. return columns;
  154. }