kts-component-invoice-operate 3.2.13 → 3.2.15

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (186) hide show
  1. package/.dumi/theme/builtins/API.tsx +66 -66
  2. package/.editorconfig +16 -16
  3. package/.fatherrc.ts +4 -4
  4. package/.prettierignore +7 -7
  5. package/.prettierrc +11 -11
  6. package/.umirc.ts +8 -8
  7. package/README.md +5 -5
  8. package/dist/Invoice/ui/digtal/Stakeholder/index.d.ts +2 -0
  9. package/dist/index.esm.js +4738 -6591
  10. package/dist/index.js +4738 -6591
  11. package/docs/index.md +5 -5
  12. package/docs-dist/static/arrowDown.a1cbf0d8.svg +2 -2
  13. package/docs-dist/static/arrowUp.4c482054.svg +2 -2
  14. package/docs-dist/static/fork.5431267d.svg +11 -11
  15. package/docs-dist/static/plus.44013ce3.svg +11 -11
  16. package/docs-dist/static/plus.4fd1af30.svg +11 -11
  17. package/index.html +12 -12
  18. package/package.json +60 -60
  19. package/src/Invoice/Invoice-digtal/_test/disabled/index.tsx +38 -38
  20. package/src/Invoice/Invoice-digtal/_test/easiest/index.tsx +16 -16
  21. package/src/Invoice/Invoice-digtal/_test/header/index.tsx +17 -17
  22. package/src/Invoice/Invoice-digtal/_test/importGoods/index.tsx +470 -470
  23. package/src/Invoice/Invoice-digtal/_test/importStakeholder/index.tsx +17 -17
  24. package/src/Invoice/Invoice-digtal/_test/lineCredit/index.tsx +20 -20
  25. package/src/Invoice/Invoice-digtal/_test/prefab/index.tsx +150 -150
  26. package/src/Invoice/Invoice-digtal/_test/readOnly/index.tsx +41 -41
  27. package/src/Invoice/Invoice-digtal/_test/stakeholder/index.tsx +12 -12
  28. package/src/Invoice/Invoice-digtal/_test/typeSelection/index.tsx +29 -29
  29. package/src/Invoice/Invoice-digtal/index.md +30 -30
  30. package/src/Invoice/InvoiceController/InvoiceControllerForm/index.ts +94 -94
  31. package/src/Invoice/InvoiceController/InvoiceControllerState/BuyerState/index.tsx +88 -88
  32. package/src/Invoice/InvoiceController/InvoiceControllerState/GoodsListState/EndowCode/index.tsx +93 -93
  33. package/src/Invoice/InvoiceController/InvoiceControllerState/GoodsListState/IColumnsReplenish/index.ts +10 -10
  34. package/src/Invoice/InvoiceController/InvoiceControllerState/GoodsListState/IGood/index.ts +75 -75
  35. package/src/Invoice/InvoiceController/InvoiceControllerState/GoodsListState/ImportGoods/index.ts +80 -80
  36. package/src/Invoice/InvoiceController/InvoiceControllerState/GoodsListState/LineAttributeType/index.ts +5 -5
  37. package/src/Invoice/InvoiceController/InvoiceControllerState/GoodsListState/ProductComparison/index.ts +9 -9
  38. package/src/Invoice/InvoiceController/InvoiceControllerState/GoodsListState/index.ts +94 -94
  39. package/src/Invoice/InvoiceController/InvoiceControllerState/Stakeholder/index.ts +10 -10
  40. package/src/Invoice/InvoiceController/InvoiceControllerState/index.ts +56 -56
  41. package/src/Invoice/InvoiceController/fns/addGood.ts +11 -11
  42. package/src/Invoice/InvoiceController/fns/addGoodDiscount.ts +125 -125
  43. package/src/Invoice/InvoiceController/fns/addGoodDiscountV2.ts +84 -84
  44. package/src/Invoice/InvoiceController/fns/delGood.ts +41 -41
  45. package/src/Invoice/InvoiceController/fns/getGoodsSearch.ts +23 -23
  46. package/src/Invoice/InvoiceController/fns/saveEditGood.ts +24 -24
  47. package/src/Invoice/InvoiceController/fns/setEditGood.ts +16 -16
  48. package/src/Invoice/InvoiceController/fns/setGoods.ts +10 -10
  49. package/src/Invoice/InvoiceController/fns/updateInvoiceNo.ts +8 -8
  50. package/src/Invoice/InvoiceController/index.ts +65 -65
  51. package/src/Invoice/_test/buyerNameSearch/index.tsx +41 -41
  52. package/src/Invoice/_test/deduction/index.tsx +935 -935
  53. package/src/Invoice/_test/draft/index.tsx +40 -40
  54. package/src/Invoice/_test/easiest/index.tsx +5 -5
  55. package/src/Invoice/_test/endowCode/index.tsx +1095 -1095
  56. package/src/Invoice/_test/goodsMenuExpand/index.tsx +32 -32
  57. package/src/Invoice/_test/importBuyer/index.tsx +74 -74
  58. package/src/Invoice/_test/importGoods/index.tsx +515 -515
  59. package/src/Invoice/_test/invoiceType/index.tsx +59 -59
  60. package/src/Invoice/_test/isInvoiceNo/index.tsx +12 -12
  61. package/src/Invoice/_test/replaceHead/index.tsx +22 -22
  62. package/src/Invoice/_test/retrieveData/index.tsx +22 -22
  63. package/src/Invoice/_test/seller/index.tsx +28 -28
  64. package/src/Invoice/_test/setDataSource/index.tsx +22 -22
  65. package/src/Invoice/_test/unit/index.tsx +19 -19
  66. package/src/Invoice/index.less +29 -29
  67. package/src/Invoice/index.md +53 -53
  68. package/src/Invoice/index.tsx +165 -165
  69. package/src/Invoice/tools/calculate/index.ts +112 -112
  70. package/src/Invoice/tools/coolingFn/index.ts +17 -17
  71. package/src/Invoice/tools/evaluate/index.ts +7 -7
  72. package/src/Invoice/tools/idGenerator/index.ts +2 -2
  73. package/src/Invoice/tools/itemName/index.ts +55 -55
  74. package/src/Invoice/tools/lazyFn/index.ts +19 -19
  75. package/src/Invoice/tools/mounting/index.ts +13 -13
  76. package/src/Invoice/tools/strringFn/index.ts +40 -40
  77. package/src/Invoice/tools/useToGenerateId/index.ts +8 -8
  78. package/src/Invoice/ui/default/AddComparisonDrawer/index.tsx +149 -149
  79. package/src/Invoice/ui/default/Buyer/index.less +219 -219
  80. package/src/Invoice/ui/default/Buyer/index.tsx +114 -114
  81. package/src/Invoice/ui/default/Buyer/ui/BuyerNameInput/index.tsx +166 -166
  82. package/src/Invoice/ui/default/Buyer/ui/ImportBuyerButton/index.tsx +21 -21
  83. package/src/Invoice/ui/default/EndowCodeDrawer/index.less +8 -8
  84. package/src/Invoice/ui/default/EndowCodeDrawer/index.tsx +431 -431
  85. package/src/Invoice/ui/default/GoodsList/hook/useColumns/autoFillFn/index.ts +519 -519
  86. package/src/Invoice/ui/default/GoodsList/hook/useColumns/index.tsx +620 -620
  87. package/src/Invoice/ui/default/GoodsList/hook/useColumns/ui/ItemNameInput/index.less +9 -9
  88. package/src/Invoice/ui/default/GoodsList/hook/useColumns/ui/ItemNameInput/index.tsx +19 -19
  89. package/src/Invoice/ui/default/GoodsList/hook/useColumns/ui/RowEditButton/index.tsx +30 -30
  90. package/src/Invoice/ui/default/GoodsList/hook/useColumns/ui/RowMenu/hook/_useAddComparison/index.tsx +43 -43
  91. package/src/Invoice/ui/default/GoodsList/hook/useColumns/ui/RowMenu/hook/useAddDiscount/index.tsx +76 -76
  92. package/src/Invoice/ui/default/GoodsList/hook/useColumns/ui/RowMenu/hook/useDelItem/index.tsx +41 -41
  93. package/src/Invoice/ui/default/GoodsList/hook/useColumns/ui/RowMenu/hook/useEndowCode/index.tsx +34 -34
  94. package/src/Invoice/ui/default/GoodsList/hook/useColumns/ui/RowMenu/index.less +13 -13
  95. package/src/Invoice/ui/default/GoodsList/hook/useColumns/ui/RowMenu/index.tsx +98 -98
  96. package/src/Invoice/ui/default/GoodsList/hook/useColumns/ui/RowSaveButton/index.tsx +14 -14
  97. package/src/Invoice/ui/default/GoodsList/hook/useColumns/ui/TitleText/index.tsx +20 -20
  98. package/src/Invoice/ui/default/GoodsList/hook/useDeduction/index.tsx +24 -24
  99. package/src/Invoice/ui/default/GoodsList/hook/useOnRow/index.tsx +39 -39
  100. package/src/Invoice/ui/default/GoodsList/hook/useRowSelection/index.tsx +111 -111
  101. package/src/Invoice/ui/default/GoodsList/hook/useWindowClick/index.tsx +23 -23
  102. package/src/Invoice/ui/default/GoodsList/index.less +177 -177
  103. package/src/Invoice/ui/default/GoodsList/index.tsx +177 -177
  104. package/src/Invoice/ui/default/GoodsList/ui/AddRowButton/index.tsx +65 -65
  105. package/src/Invoice/ui/default/GoodsList/ui/BulkMenu/hooks/useAddDiscountRowButton/index.less +21 -21
  106. package/src/Invoice/ui/default/GoodsList/ui/BulkMenu/hooks/useAddDiscountRowButton/index.tsx +244 -244
  107. package/src/Invoice/ui/default/GoodsList/ui/BulkMenu/hooks/useCommodityComparisonButton/index.tsx +75 -75
  108. package/src/Invoice/ui/default/GoodsList/ui/BulkMenu/hooks/useDelRowButton/index.tsx +69 -69
  109. package/src/Invoice/ui/default/GoodsList/ui/BulkMenu/hooks/useEndowCodeButton/index.tsx +58 -58
  110. package/src/Invoice/ui/default/GoodsList/ui/BulkMenu/index.tsx +37 -37
  111. package/src/Invoice/ui/default/GoodsList/ui/DescribeSwitch/index.tsx +36 -36
  112. package/src/Invoice/ui/default/GoodsList/ui/Search/index.less +10 -10
  113. package/src/Invoice/ui/default/GoodsList/ui/Search/index.tsx +50 -50
  114. package/src/Invoice/ui/default/GoodsList/ui/Statistics/index.less +18 -18
  115. package/src/Invoice/ui/default/GoodsList/ui/Statistics/index.tsx +109 -109
  116. package/src/Invoice/ui/default/GoodsList/ui/TableRow/index.tsx +27 -27
  117. package/src/Invoice/ui/default/GoodsList/ui/TableVirtual/index.less +38 -38
  118. package/src/Invoice/ui/default/GoodsList/ui/TableVirtual/index.tsx +108 -108
  119. package/src/Invoice/ui/default/GoodsList/ui/TableVirtual.o/index.less +44 -44
  120. package/src/Invoice/ui/default/GoodsList/ui/TableVirtual.o/index.tsx +96 -96
  121. package/src/Invoice/ui/default/GoodsList/ui/TaxIncludedSwitch/index.tsx +30 -30
  122. package/src/Invoice/ui/default/ImportBuyerDrawer/index.tsx +75 -75
  123. package/src/Invoice/ui/default/ImportGoodsDrawer/index.tsx +170 -170
  124. package/src/Invoice/ui/default/InvoiceHeader/index.less +68 -68
  125. package/src/Invoice/ui/default/InvoiceHeader/index.tsx +246 -246
  126. package/src/Invoice/ui/default/Seller/index.less +113 -113
  127. package/src/Invoice/ui/default/Seller/index.tsx +98 -98
  128. package/src/Invoice/ui/default/Sign/index.less +14 -14
  129. package/src/Invoice/ui/default/Sign/index.tsx +71 -71
  130. package/src/Invoice/ui/digtal/GoodsList/hook/useColumns/autoFillFn/index.ts +519 -519
  131. package/src/Invoice/ui/digtal/GoodsList/hook/useColumns/index.tsx +635 -635
  132. package/src/Invoice/ui/digtal/GoodsList/hook/useColumns/svg/plus.svg +11 -11
  133. package/src/Invoice/ui/digtal/GoodsList/hook/useColumns/ui/ItemNameInput/index.less +9 -9
  134. package/src/Invoice/ui/digtal/GoodsList/hook/useColumns/ui/ItemNameInput/index.tsx +24 -24
  135. package/src/Invoice/ui/digtal/GoodsList/hook/useColumns/ui/RowEditButton/index.tsx +30 -30
  136. package/src/Invoice/ui/digtal/GoodsList/hook/useColumns/ui/RowMenu/hook/_useAddComparison/index.tsx +43 -43
  137. package/src/Invoice/ui/digtal/GoodsList/hook/useColumns/ui/RowMenu/hook/useAddDiscount/index.tsx +76 -76
  138. package/src/Invoice/ui/digtal/GoodsList/hook/useColumns/ui/RowMenu/hook/useDelItem/index.tsx +41 -41
  139. package/src/Invoice/ui/digtal/GoodsList/hook/useColumns/ui/RowMenu/hook/useEndowCode/index.tsx +34 -34
  140. package/src/Invoice/ui/digtal/GoodsList/hook/useColumns/ui/RowMenu/index.less +13 -13
  141. package/src/Invoice/ui/digtal/GoodsList/hook/useColumns/ui/RowMenu/index.tsx +98 -98
  142. package/src/Invoice/ui/digtal/GoodsList/hook/useColumns/ui/RowSaveButton/index.tsx +14 -14
  143. package/src/Invoice/ui/digtal/GoodsList/hook/useColumns/ui/TitleText/index.tsx +20 -20
  144. package/src/Invoice/ui/digtal/GoodsList/hook/useOnRow/index.tsx +39 -39
  145. package/src/Invoice/ui/digtal/GoodsList/hook/useRowSelection/index.tsx +121 -121
  146. package/src/Invoice/ui/digtal/GoodsList/hook/useWindowClick/index.tsx +23 -23
  147. package/src/Invoice/ui/digtal/GoodsList/index.less +56 -56
  148. package/src/Invoice/ui/digtal/GoodsList/index.tsx +180 -180
  149. package/src/Invoice/ui/digtal/GoodsList/ui/AddRowButton/index.tsx +65 -65
  150. package/src/Invoice/ui/digtal/GoodsList/ui/BulkMenu/hooks/useAddDiscountRowButton/index.tsx +341 -341
  151. package/src/Invoice/ui/digtal/GoodsList/ui/BulkMenu/hooks/useAddDiscountRowButton/svg/add.svg +11 -11
  152. package/src/Invoice/ui/digtal/GoodsList/ui/BulkMenu/hooks/useCommodityComparisonButton/index.tsx +75 -75
  153. package/src/Invoice/ui/digtal/GoodsList/ui/BulkMenu/hooks/useDelRowButton/index.tsx +50 -50
  154. package/src/Invoice/ui/digtal/GoodsList/ui/BulkMenu/hooks/useEmptyRefill/index.tsx +35 -35
  155. package/src/Invoice/ui/digtal/GoodsList/ui/BulkMenu/hooks/useEndowCodeButton/index.tsx +82 -82
  156. package/src/Invoice/ui/digtal/GoodsList/ui/BulkMenu/hooks/useReselectInvoiceType/index.tsx +57 -57
  157. package/src/Invoice/ui/digtal/GoodsList/ui/DescribeSwitch/index.tsx +36 -36
  158. package/src/Invoice/ui/digtal/GoodsList/ui/Search/index.less +11 -11
  159. package/src/Invoice/ui/digtal/GoodsList/ui/Search/index.tsx +50 -50
  160. package/src/Invoice/ui/digtal/GoodsList/ui/Statistics/index.less +53 -53
  161. package/src/Invoice/ui/digtal/GoodsList/ui/Statistics/index.tsx +99 -99
  162. package/src/Invoice/ui/digtal/GoodsList/ui/Statistics/svg/fork.svg +11 -11
  163. package/src/Invoice/ui/digtal/GoodsList/ui/TableRow/index.tsx +27 -27
  164. package/src/Invoice/ui/digtal/GoodsList/ui/TableVirtual/index.less +38 -38
  165. package/src/Invoice/ui/digtal/GoodsList/ui/TableVirtual/index.tsx +108 -108
  166. package/src/Invoice/ui/digtal/GoodsList/ui/TableVirtual.o/index.less +44 -44
  167. package/src/Invoice/ui/digtal/GoodsList/ui/TableVirtual.o/index.tsx +96 -96
  168. package/src/Invoice/ui/digtal/GoodsList/ui/TaxIncludedSwitch/index.tsx +30 -30
  169. package/src/Invoice/ui/digtal/InvoiceHeader/index.less +57 -57
  170. package/src/Invoice/ui/digtal/InvoiceHeader/index.tsx +77 -77
  171. package/src/Invoice/ui/digtal/Sign/index.less +48 -48
  172. package/src/Invoice/ui/digtal/Sign/index.tsx +89 -89
  173. package/src/Invoice/ui/digtal/Stakeholder/index.less +56 -56
  174. package/src/Invoice/ui/digtal/Stakeholder/index.tsx +282 -269
  175. package/src/Invoice/ui/digtal/Stakeholder/svg/arrowDown.svg +2 -2
  176. package/src/Invoice/ui/digtal/Stakeholder/svg/arrowUp.svg +2 -2
  177. package/src/Invoice/ui/digtal/Stakeholder/svg/plus.svg +11 -11
  178. package/src/InvoiceTypeModal/_test/easiest/index.tsx +31 -31
  179. package/src/InvoiceTypeModal/index.less +7 -7
  180. package/src/InvoiceTypeModal/index.md +5 -5
  181. package/src/InvoiceTypeModal/index.tsx +153 -153
  182. package/src/index.ts +9 -9
  183. package/tsconfig.json +31 -31
  184. package/typings.d.ts +3 -3
  185. package/yarn.e.lock +14331 -14331
  186. package/yarn.o.lock +14800 -14800
@@ -1,269 +1,282 @@
1
-
2
- import React from "react";
3
- import Icon from '@ant-design/icons';
4
- import { decorator } from "grey-react-box";
5
- import { Form } from "kts-components-antd-x3";
6
- import { Button, Col, Input, InputProps, Row, Tooltip } from 'kts-xui'
7
- import { FormComponentProps } from "kts-components-antd-x3/lib/form";
8
- import { ReactComponent as ArrowUpSvg } from './svg/arrowUp.svg';
9
- import { ReactComponent as ArrowDownSvg } from './svg/arrowDown.svg';
10
- import { ReactComponent as PlusSvg } from './svg/plus.svg'
11
- import InvoiceController from "../../../InvoiceController";
12
- import Invoice from "../../../../Invoice";
13
- import './index.less';
14
-
15
- const RULES = {
16
- companyName: (label: string) => [
17
- { required: true, message: `${label}必填` },
18
- { max: 300, message: `${label}内容超长` },
19
- { pattern: /^([A-Za-z()\u4e00-\u9fa5])*$/g, message: `${label}仅能中文、英文、括号` }
20
- ],
21
- taxId: (label: string) => [
22
- { max: 26, message: `${label}内容超长` },
23
- { pattern: /^([A-Z0-9])*$/g, message: `${label}仅能数字、英文大写` }
24
- ],
25
- bankName: (label: string) => [
26
- { max: 120, message: `${label}内容超长` },
27
- { pattern: /^([\u4e00-\u9fa5])*$/g, message: `${label}仅能中文` }
28
- ],
29
- bankAccount: (label: string) => [
30
- { max: 100, message: `${label}内容超长` },
31
- { pattern: /^([0-9])*$/g, message: `${label}仅能数字` }
32
- ]
33
- }
34
-
35
- const formatCompanyName = (e: any) => {
36
- const value = e?.target?.value;
37
- if (value) {
38
- return value.replace('(', '(').replace(')', ')').replace(' ', '');
39
- }
40
- }
41
-
42
- export interface IStakeholder {
43
-
44
- /** 是否显示导入按钮 */
45
- isShowImportButton?: boolean;
46
-
47
- /** 点击了 */
48
- onClickImportButton?: (e: InvoiceController) => void
49
-
50
- /** 查看当前可用授信额度 */
51
- lineCredit?: React.ReactNode;
52
- }
53
-
54
- /** 干系人 */
55
- export default decorator<IStakeholder, IStakeholder & FormComponentProps>(Form.create())(props => {
56
-
57
- const { form, isShowImportButton, onClickImportButton } = props;
58
-
59
- const [isExpand, setExpand] = React.useState(true);
60
-
61
- const { getFieldDecorator } = form;
62
-
63
- const controller = Invoice.useInvoiceController();
64
-
65
- const model = controller.useMemo(s => s.model, []);
66
-
67
- const disableds = controller.useMemo(s => s.stakeholder.disableds || [], []);
68
-
69
- const rulesMap = controller.useMemo(s => s.stakeholder.rulesMap || {}, []);
70
-
71
- const readOnly = React.useMemo(() => {
72
- if (model === 'readOnly') return true;
73
- if (model === 'prefab') return true;
74
- return false;
75
- }, [model]);
76
-
77
- const onExpand = React.useCallback(() => { setExpand(e => !e) }, []);
78
-
79
- const isReadOnly = React.useCallback(field => readOnly || disableds.indexOf(field) >= 0, [disableds, readOnly]);
80
-
81
- const getRules = React.useCallback((field, defaultRules) => {
82
- if (isReadOnly(field)) return [];
83
- return rulesMap[field] || defaultRules;
84
- }, [rulesMap, isReadOnly, isReadOnly]);
85
-
86
- controller.useForm('stakeholder', form);
87
-
88
- return (
89
- <div className="kts-invoice-operate-invoice-digtal-stakeholder" >
90
- <div>
91
- {'购买方信息'.split('').map(e => <span>{e}</span>)}
92
- {
93
- !readOnly &&
94
- <Icon
95
- className="digtal-stakeholder-expand-button"
96
- component={isExpand ? ArrowUpSvg : ArrowDownSvg}
97
- onClick={onExpand}
98
- />
99
- }
100
- </div>
101
- <div>
102
- <Form className="digtal-stakeholder-form" >
103
- <Row gutter={[16, 0]}>
104
- <Col span={24} >
105
- <Form.Item label='名称' colon={false}>
106
- {getFieldDecorator('buyerName', {
107
- rules: getRules('buyerName', RULES.companyName('购买方名称')),
108
- getValueFromEvent: formatCompanyName
109
- })(
110
- <MyInput
111
- readOnly={isReadOnly('buyerName')}
112
- placeholder="请输入"
113
- autoComplete="off"
114
- suffix={
115
- isShowImportButton === true &&
116
- <Button
117
- type='link'
118
- style={{ padding: 0, width: 20 }}
119
- icon={<Icon component={PlusSvg} />}
120
- onClick={() => { onClickImportButton && onClickImportButton(controller) }}
121
- />
122
- }
123
- />
124
- )}
125
- </Form.Item>
126
- </Col>
127
-
128
- <Col span={24} >
129
- <Form.Item label='统一社会信用代码/纳税人识别号' colon={false}>
130
- {getFieldDecorator('buyerTaxId', {
131
- rules: getRules('buyerTaxId', [{ required: true, message: '购买方纳税人识别号必填' }, ...RULES.taxId('购买方纳税人识别号')])
132
- })(<MyInput readOnly={isReadOnly('buyerTaxId')} placeholder="请输入" autoComplete="off" />)}
133
- </Form.Item>
134
- </Col>
135
- {
136
- !readOnly && isExpand && (
137
- <>
138
- <Col span={15} >
139
- <Form.Item label='购买方地址' colon={false}>
140
- {getFieldDecorator('buyerAddress', {
141
- rules: getRules('buyerAddress', [{ max: 300, message: '购买方地址内容超长' }])
142
- })(<MyInput readOnly={isReadOnly('buyerAddress')} placeholder="请输入" autoComplete="off" />)}
143
- </Form.Item>
144
- </Col>
145
-
146
- <Col span={9} >
147
- <Form.Item label='电话' colon={false}>
148
- {getFieldDecorator('buyerPhone', {
149
- rules: getRules('buyerPhone', [{ max: 60, message: '购买方电话内容超长' }])
150
- })(<MyInput readOnly={isReadOnly('buyerPhone')} placeholder="请输入" autoComplete="off" />)}
151
- </Form.Item>
152
- </Col>
153
-
154
- <Col span={12} >
155
- <Form.Item label='购买方开户银行' colon={false}>
156
- {getFieldDecorator('buyerBank', {
157
- rules: getRules('buyerBank', RULES.bankName('购买方开户银行'))
158
- })(<MyInput readOnly={isReadOnly('buyerBank')} placeholder="请输入" autoComplete="off" />)}
159
- </Form.Item>
160
- </Col>
161
-
162
- <Col span={12} >
163
- <Form.Item label='银行账号' colon={false}>
164
- {getFieldDecorator('buyerAccount', {
165
- rules: getRules('buyerAccount', RULES.bankAccount('购买方银行账号'))
166
- })(<MyInput readOnly={isReadOnly('buyerAccount')} placeholder="请输入" autoComplete="off" />)}
167
- </Form.Item>
168
- </Col>
169
- </>
170
- )
171
- }
172
- </Row>
173
- </Form>
174
- </div>
175
- <div>
176
- {'销售方信息'.split('').map(e => <span>{e}</span>)}
177
- {
178
- !readOnly &&
179
- <Icon
180
- className="digtal-stakeholder-expand-button"
181
- component={isExpand ? ArrowUpSvg : ArrowDownSvg}
182
- onClick={onExpand}
183
- />
184
- }
185
- </div>
186
- <div>
187
- {
188
- !readOnly && props.lineCredit &&
189
- <div style={{ marginTop: 20 }} >
190
- <Tooltip trigger="click" title={props.lineCredit} >
191
- <Button type="link" >查看当前可用授信额度</Button>
192
- </Tooltip>
193
- </div>
194
- }
195
- <Form className="digtal-stakeholder-form" >
196
- <Row gutter={[16, 0]}>
197
- <Col span={24} >
198
- <Form.Item label='名称' colon={false}>
199
- {getFieldDecorator('supplierName', {
200
- rules: getRules('supplierName', RULES.companyName('销售方名称')),
201
- getValueFromEvent: formatCompanyName
202
- })(<MyInput readOnly={isReadOnly('supplierName')} placeholder="请输入" autoComplete="off" />)}
203
- </Form.Item>
204
- </Col>
205
-
206
- <Col span={24} >
207
- <Form.Item label='统一社会信用代码/纳税人识别号' colon={false}>
208
- {getFieldDecorator('supplierTaxId', {
209
- rules: getRules('supplierTaxId', [{ required: true, message: '销售方纳税人识别号必填' }, ...RULES.taxId('销售方纳税人识别号')])
210
- })(<MyInput readOnly={isReadOnly('supplierTaxId')} placeholder="请输入" autoComplete="off" />)}
211
- </Form.Item>
212
- </Col>
213
- {
214
- !readOnly && isExpand && (
215
- <>
216
- <Col span={15} >
217
- <Form.Item label='销售方地址' colon={false}>
218
- {getFieldDecorator('sellerAddress', {
219
- rules: getRules('sellerAddress', [{ max: 300, message: '销售方地址内容超长' }])
220
- })(<MyInput readOnly={isReadOnly('sellerAddress')} placeholder="请输入" autoComplete="off" />)}
221
- </Form.Item>
222
- </Col>
223
-
224
- <Col span={9} >
225
- <Form.Item label='电话' colon={false}>
226
- {getFieldDecorator('sellerPhone', {
227
- rules: getRules('sellerPhone', [
228
- { required: true, message: '销售方电话必填' },
229
- { max: 60, message: '销售方电话内容超长' }
230
- ])
231
- })(<MyInput readOnly={isReadOnly('sellerPhone')} placeholder="请输入" autoComplete="off" />)}
232
- </Form.Item>
233
- </Col>
234
-
235
- <Col span={12} >
236
- <Form.Item label='销售方开户银行' colon={false}>
237
- {getFieldDecorator('sellerBank', {
238
- rules: getRules('sellerBank', RULES.bankName('销售方开户银行'))
239
- })(<MyInput readOnly={isReadOnly('sellerBank')} placeholder="请输入" autoComplete="off" />)}
240
- </Form.Item>
241
- </Col>
242
-
243
- <Col span={12} >
244
- <Form.Item label='银行账号' colon={false}>
245
- {getFieldDecorator('sellerAccount', {
246
- rules: getRules('sellerAccount', RULES.bankAccount('销售方银行账号'))
247
- })(<MyInput readOnly={isReadOnly('sellerAccount')} placeholder="请输入" autoComplete="off" />)}
248
- </Form.Item>
249
- </Col>
250
- </>
251
- )
252
- }
253
- </Row>
254
- </Form>
255
- </div>
256
- </div>
257
- )
258
- })
259
-
260
- class MyInput extends React.Component<InputProps>{
261
- render() {
262
- const props = this.props;
263
- if (props.readOnly) {
264
- return <span>{props.value}</span>
265
- } else {
266
- return <Input {...props} />
267
- }
268
- }
269
- }
1
+
2
+ import React from "react";
3
+ import Icon from '@ant-design/icons';
4
+ import { decorator } from "grey-react-box";
5
+ import { Form } from "kts-components-antd-x3";
6
+ import { Button, Col, Input, InputProps, Row, Tooltip } from 'kts-xui'
7
+ import { FormComponentProps } from "kts-components-antd-x3/lib/form";
8
+ import { ReactComponent as ArrowUpSvg } from './svg/arrowUp.svg';
9
+ import { ReactComponent as ArrowDownSvg } from './svg/arrowDown.svg';
10
+ import { ReactComponent as PlusSvg } from './svg/plus.svg'
11
+ import InvoiceController from "../../../InvoiceController";
12
+ import Invoice from "../../../../Invoice";
13
+ import './index.less';
14
+
15
+ const RULES = {
16
+ companyNameBySpecial: (label: string) => [
17
+ { required: true, message: `${label}必填` },
18
+ { max: 300, message: `${label}内容超长` },
19
+ { pattern: /^([A-Za-z()\u4e00-\u9fa5])*$/g, message: `${label}仅能中文、英文、括号` }
20
+ ],
21
+ companyNameByNormal: (label: string) => [
22
+ { required: true, message: `${label}必填` },
23
+ { max: 200, message: `${label}内容超长` }
24
+ ],
25
+ taxId: (label: string) => [
26
+ { max: 20, message: `${label}内容超长` },
27
+ { pattern: /^([a-zA-Z0-9])*$/g, message: `${label}仅能数字、英文` }
28
+ ],
29
+ buyerTelPhone: (label: string) => [
30
+ { max: 100, message: `${label}内容超长` },
31
+ { pattern: /^[0-9\s\-\+]+$/g, message: `${label}仅能数字、空格、-、+` }
32
+ ],
33
+ sellerTelPhone: (label: string) => [
34
+ { required: true, message: `${label}必填` },
35
+ { max: 100, message: `${label}内容超长` },
36
+ { pattern: /^[0-9\s\-\+]+$/g, message: `${label}仅能数字、空格、-、+` }
37
+ ],
38
+ bankName: (label: string) => [
39
+ { max: 100, message: `${label}内容超长` }
40
+ ],
41
+ bankAccount: (label: string) => [
42
+ { max: 100, message: `${label}内容超长` },
43
+ { pattern: /^([0-9a-zA-Z-])*$/g, message: `${label}仅能数字、字母、-` }
44
+ ]
45
+ }
46
+
47
+ const formatCompanyName = (e: any) => {
48
+ const value = e?.target?.value;
49
+ if (value) {
50
+ return value.replace('(', '(').replace(')', ')').replace(' ', '');
51
+ }
52
+ }
53
+
54
+ export interface IStakeholder {
55
+
56
+ /** 是否显示导入按钮 */
57
+ isShowImportButton?: boolean;
58
+
59
+ /** 点击了 */
60
+ onClickImportButton?: (e: InvoiceController) => void
61
+
62
+ /** 查看当前可用授信额度 */
63
+ lineCredit?: React.ReactNode;
64
+
65
+ /** 票种类型 */
66
+ isVatNormal?: boolean;
67
+ }
68
+
69
+ /** 干系人 */
70
+ export default decorator<IStakeholder, IStakeholder & FormComponentProps>(Form.create())(props => {
71
+
72
+ const { form, isShowImportButton, onClickImportButton , isVatNormal = false} = props;
73
+
74
+ const [isExpand, setExpand] = React.useState(true);
75
+
76
+ const { getFieldDecorator } = form;
77
+
78
+ const controller = Invoice.useInvoiceController();
79
+
80
+ const model = controller.useMemo(s => s.model, []);
81
+
82
+ const disableds = controller.useMemo(s => s.stakeholder.disableds || [], []);
83
+
84
+ const rulesMap = controller.useMemo(s => s.stakeholder.rulesMap || {}, []);
85
+
86
+ const readOnly = React.useMemo(() => {
87
+ if (model === 'readOnly') return true;
88
+ if (model === 'prefab') return true;
89
+ return false;
90
+ }, [model]);
91
+
92
+ const onExpand = React.useCallback(() => { setExpand(e => !e) }, []);
93
+
94
+ const isReadOnly = React.useCallback(field => readOnly || disableds.indexOf(field) >= 0, [disableds, readOnly]);
95
+
96
+ const getRules = React.useCallback((field, defaultRules) => {
97
+ if (isReadOnly(field)) return [];
98
+ return rulesMap[field] || defaultRules;
99
+ }, [rulesMap, isReadOnly, isReadOnly]);
100
+
101
+ controller.useForm('stakeholder', form);
102
+
103
+ return (
104
+ <div className="kts-invoice-operate-invoice-digtal-stakeholder" >
105
+ <div>
106
+ {'购买方信息'.split('').map(e => <span>{e}</span>)}
107
+ {
108
+ !readOnly &&
109
+ <Icon
110
+ className="digtal-stakeholder-expand-button"
111
+ component={isExpand ? ArrowUpSvg : ArrowDownSvg}
112
+ onClick={onExpand}
113
+ />
114
+ }
115
+ </div>
116
+ <div>
117
+ <Form className="digtal-stakeholder-form" >
118
+ <Row gutter={[16, 0]}>
119
+ <Col span={24} >
120
+ <Form.Item label='名称' colon={false}>
121
+ {getFieldDecorator('buyerName', {
122
+ rules: getRules('buyerName', isVatNormal ?
123
+ RULES.companyNameByNormal('购买方名称') :
124
+ RULES.companyNameBySpecial('购买方名称')),
125
+ })(
126
+ <MyInput
127
+ readOnly={isReadOnly('buyerName')}
128
+ placeholder="请输入"
129
+ autoComplete="off"
130
+ suffix={
131
+ isShowImportButton === true &&
132
+ <Button
133
+ type='link'
134
+ style={{ padding: 0, width: 20 }}
135
+ icon={<Icon component={PlusSvg} />}
136
+ onClick={() => { onClickImportButton && onClickImportButton(controller) }}
137
+ />
138
+ }
139
+ />
140
+ )}
141
+ </Form.Item>
142
+ </Col>
143
+
144
+ <Col span={24} >
145
+ <Form.Item label='统一社会信用代码/纳税人识别号' colon={false}>
146
+ {getFieldDecorator('buyerTaxId', {
147
+ rules: getRules('buyerTaxId', [{ required: !isVatNormal, message: '购买方纳税人识别号必填' }, ...RULES.taxId('购买方纳税人识别号')])
148
+ })(<MyInput readOnly={isReadOnly('buyerTaxId')} placeholder="请输入" autoComplete="off" />)}
149
+ </Form.Item>
150
+ </Col>
151
+ {
152
+ !readOnly && isExpand && (
153
+ <>
154
+ <Col span={15} >
155
+ <Form.Item label='购买方地址' colon={false}>
156
+ {getFieldDecorator('buyerAddress', {
157
+ rules: getRules('buyerAddress', [{ max: 100, message: '购买方地址内容超长' }])
158
+ })(<MyInput readOnly={isReadOnly('buyerAddress')} placeholder="请输入" autoComplete="off" />)}
159
+ </Form.Item>
160
+ </Col>
161
+
162
+ <Col span={9} >
163
+ <Form.Item label='电话' colon={false}>
164
+ {getFieldDecorator('buyerPhone', {
165
+ rules: getRules('buyerPhone', RULES.buyerTelPhone('购买方电话'))
166
+ })(<MyInput readOnly={isReadOnly('buyerPhone')} placeholder="请输入" autoComplete="off" />)}
167
+ </Form.Item>
168
+ </Col>
169
+
170
+ <Col span={12} >
171
+ <Form.Item label='购买方开户银行' colon={false}>
172
+ {getFieldDecorator('buyerBank', {
173
+ rules: getRules('buyerBank', RULES.bankName('购买方开户银行'))
174
+ })(<MyInput readOnly={isReadOnly('buyerBank')} placeholder="请输入" autoComplete="off" />)}
175
+ </Form.Item>
176
+ </Col>
177
+
178
+ <Col span={12} >
179
+ <Form.Item label='银行账号' colon={false}>
180
+ {getFieldDecorator('buyerAccount', {
181
+ rules: getRules('buyerAccount', RULES.bankAccount('购买方银行账号'))
182
+ })(<MyInput readOnly={isReadOnly('buyerAccount')} placeholder="请输入" autoComplete="off" />)}
183
+ </Form.Item>
184
+ </Col>
185
+ </>
186
+ )
187
+ }
188
+ </Row>
189
+ </Form>
190
+ </div>
191
+ <div>
192
+ {'销售方信息'.split('').map(e => <span>{e}</span>)}
193
+ {
194
+ !readOnly &&
195
+ <Icon
196
+ className="digtal-stakeholder-expand-button"
197
+ component={isExpand ? ArrowUpSvg : ArrowDownSvg}
198
+ onClick={onExpand}
199
+ />
200
+ }
201
+ </div>
202
+ <div>
203
+ {
204
+ !readOnly && props.lineCredit &&
205
+ <div style={{ marginTop: 20 }} >
206
+ <Tooltip trigger="click" title={props.lineCredit} >
207
+ <Button type="link" >查看当前可用授信额度</Button>
208
+ </Tooltip>
209
+ </div>
210
+ }
211
+ <Form className="digtal-stakeholder-form" >
212
+ <Row gutter={[16, 0]}>
213
+ <Col span={24} >
214
+ <Form.Item label='名称' colon={false}>
215
+ {getFieldDecorator('supplierName', {
216
+ rules: getRules('supplierName', RULES.companyNameBySpecial('销售方名称')),
217
+ getValueFromEvent: formatCompanyName
218
+ })(<MyInput readOnly={isReadOnly('supplierName')} placeholder="请输入" autoComplete="off" />)}
219
+ </Form.Item>
220
+ </Col>
221
+
222
+ <Col span={24} >
223
+ <Form.Item label='统一社会信用代码/纳税人识别号' colon={false}>
224
+ {getFieldDecorator('supplierTaxId', {
225
+ rules: getRules('supplierTaxId', [{ required: true, message: '销售方纳税人识别号必填' }, ...RULES.taxId('销售方纳税人识别号')])
226
+ })(<MyInput readOnly={isReadOnly('supplierTaxId')} placeholder="请输入" autoComplete="off" />)}
227
+ </Form.Item>
228
+ </Col>
229
+ {
230
+ !readOnly && isExpand && (
231
+ <>
232
+ <Col span={15} >
233
+ <Form.Item label='销售方地址' colon={false}>
234
+ {getFieldDecorator('sellerAddress', {
235
+ rules: getRules('sellerAddress', [{ max: 300, message: '销售方地址内容超长' }])
236
+ })(<MyInput readOnly={isReadOnly('sellerAddress')} placeholder="请输入" autoComplete="off" />)}
237
+ </Form.Item>
238
+ </Col>
239
+
240
+ <Col span={9} >
241
+ <Form.Item label='电话' colon={false}>
242
+ {getFieldDecorator('sellerPhone', {
243
+ rules: getRules('sellerPhone', RULES.sellerTelPhone('销售方电话'))
244
+ })(<MyInput readOnly={isReadOnly('sellerPhone')} placeholder="请输入" autoComplete="off" />)}
245
+ </Form.Item>
246
+ </Col>
247
+
248
+ <Col span={12} >
249
+ <Form.Item label='销售方开户银行' colon={false}>
250
+ {getFieldDecorator('sellerBank', {
251
+ rules: getRules('sellerBank', RULES.bankName('销售方开户银行'))
252
+ })(<MyInput readOnly={isReadOnly('sellerBank')} placeholder="请输入" autoComplete="off" />)}
253
+ </Form.Item>
254
+ </Col>
255
+
256
+ <Col span={12} >
257
+ <Form.Item label='银行账号' colon={false}>
258
+ {getFieldDecorator('sellerAccount', {
259
+ rules: getRules('sellerAccount', RULES.bankAccount('销售方银行账号'))
260
+ })(<MyInput readOnly={isReadOnly('sellerAccount')} placeholder="请输入" autoComplete="off" />)}
261
+ </Form.Item>
262
+ </Col>
263
+ </>
264
+ )
265
+ }
266
+ </Row>
267
+ </Form>
268
+ </div>
269
+ </div>
270
+ )
271
+ })
272
+
273
+ class MyInput extends React.Component<InputProps>{
274
+ render() {
275
+ const props = this.props;
276
+ if (props.readOnly) {
277
+ return <span>{props.value}</span>
278
+ } else {
279
+ return <Input {...props} />
280
+ }
281
+ }
282
+ }
@@ -1,3 +1,3 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" width="12" height="13" viewBox="0 0 12 13" fill="none">
2
- <path d="M2.94338 4.42663C3.03458 4.42662 3.12571 4.46481 3.19459 4.54096L5.99164 7.6327L8.78868 4.54096C8.92463 4.39067 9.14733 4.38824 9.28606 4.53554C9.4248 4.68285 9.42705 4.92408 9.29107 5.07437L6.24283 8.44378C6.17667 8.5169 6.08613 8.55811 5.99164 8.55811C5.89714 8.55811 5.80659 8.5169 5.74044 8.44378L2.69221 5.07437C2.55623 4.92408 2.55849 4.68285 2.69722 4.53554C2.76567 4.46287 2.85455 4.42665 2.94338 4.42663Z"/>
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="12" height="13" viewBox="0 0 12 13" fill="none">
2
+ <path d="M2.94338 4.42663C3.03458 4.42662 3.12571 4.46481 3.19459 4.54096L5.99164 7.6327L8.78868 4.54096C8.92463 4.39067 9.14733 4.38824 9.28606 4.53554C9.4248 4.68285 9.42705 4.92408 9.29107 5.07437L6.24283 8.44378C6.17667 8.5169 6.08613 8.55811 5.99164 8.55811C5.89714 8.55811 5.80659 8.5169 5.74044 8.44378L2.69221 5.07437C2.55623 4.92408 2.55849 4.68285 2.69722 4.53554C2.76567 4.46287 2.85455 4.42665 2.94338 4.42663Z"/>
3
3
  </svg>
@@ -1,3 +1,3 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 13 13" fill="none">
2
- <path d="M9.55662 8.57337C9.46542 8.57338 9.37429 8.53519 9.30541 8.45904L6.50836 5.3673L3.71132 8.45904C3.57537 8.60933 3.35267 8.61176 3.21394 8.46446C3.0752 8.31715 3.07295 8.07592 3.20893 7.92563L6.25717 4.55622C6.32333 4.4831 6.41387 4.44189 6.50836 4.44189C6.60286 4.44189 6.69341 4.4831 6.75956 4.55622L9.80779 7.92563C9.94377 8.07592 9.94151 8.31715 9.80278 8.46446C9.73433 8.53713 9.64545 8.57335 9.55662 8.57337Z"/>
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 13 13" fill="none">
2
+ <path d="M9.55662 8.57337C9.46542 8.57338 9.37429 8.53519 9.30541 8.45904L6.50836 5.3673L3.71132 8.45904C3.57537 8.60933 3.35267 8.61176 3.21394 8.46446C3.0752 8.31715 3.07295 8.07592 3.20893 7.92563L6.25717 4.55622C6.32333 4.4831 6.41387 4.44189 6.50836 4.44189C6.60286 4.44189 6.69341 4.4831 6.75956 4.55622L9.80779 7.92563C9.94377 8.07592 9.94151 8.31715 9.80278 8.46446C9.73433 8.53713 9.64545 8.57335 9.55662 8.57337Z"/>
3
3
  </svg>
@@ -1,12 +1,12 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" width="16" height="15" viewBox="0 0 16 15" fill="none">
2
- <g clip-path="url(#clip0_715_360)">
3
- <path d="M8 14.5312C4.11687 14.5312 0.96875 11.3831 0.96875 7.5C0.96875 3.61687 4.11687 0.46875 8 0.46875C11.8831 0.46875 15.0312 3.61687 15.0312 7.5C15.0312 11.3831 11.8831 14.5312 8 14.5312ZM8 13.5938C11.3656 13.5938 14.0938 10.8656 14.0938 7.5C14.0938 4.13438 11.3656 1.40625 8 1.40625C4.63438 1.40625 1.90625 4.13438 1.90625 7.5C1.90625 10.8656 4.63438 13.5938 8 13.5938Z"/>
4
- <path d="M4.25 7.96875C4.12568 7.96875 4.00645 7.91936 3.91854 7.83146C3.83064 7.74355 3.78125 7.62432 3.78125 7.5C3.78125 7.37568 3.83064 7.25645 3.91854 7.16854C4.00645 7.08064 4.12568 7.03125 4.25 7.03125H11.75C11.8743 7.03125 11.9935 7.08064 12.0815 7.16854C12.1694 7.25645 12.2188 7.37568 12.2188 7.5C12.2188 7.62432 12.1694 7.74355 12.0815 7.83146C11.9935 7.91936 11.8743 7.96875 11.75 7.96875H4.25Z"/>
5
- <path d="M7.53125 3.75C7.53125 3.62568 7.58064 3.50645 7.66854 3.41854C7.75645 3.33064 7.87568 3.28125 8 3.28125C8.12432 3.28125 8.24355 3.33064 8.33146 3.41854C8.41936 3.50645 8.46875 3.62568 8.46875 3.75V11.25C8.46875 11.3743 8.41936 11.4935 8.33146 11.5815C8.24355 11.6694 8.12432 11.7188 8 11.7188C7.87568 11.7188 7.75645 11.6694 7.66854 11.5815C7.58064 11.4935 7.53125 11.3743 7.53125 11.25V3.75Z"/>
6
- </g>
7
- <defs>
8
- <clipPath id="clip0_715_360">
9
- <rect width="15" height="15" transform="translate(0.5)"/>
10
- </clipPath>
11
- </defs>
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="16" height="15" viewBox="0 0 16 15" fill="none">
2
+ <g clip-path="url(#clip0_715_360)">
3
+ <path d="M8 14.5312C4.11687 14.5312 0.96875 11.3831 0.96875 7.5C0.96875 3.61687 4.11687 0.46875 8 0.46875C11.8831 0.46875 15.0312 3.61687 15.0312 7.5C15.0312 11.3831 11.8831 14.5312 8 14.5312ZM8 13.5938C11.3656 13.5938 14.0938 10.8656 14.0938 7.5C14.0938 4.13438 11.3656 1.40625 8 1.40625C4.63438 1.40625 1.90625 4.13438 1.90625 7.5C1.90625 10.8656 4.63438 13.5938 8 13.5938Z"/>
4
+ <path d="M4.25 7.96875C4.12568 7.96875 4.00645 7.91936 3.91854 7.83146C3.83064 7.74355 3.78125 7.62432 3.78125 7.5C3.78125 7.37568 3.83064 7.25645 3.91854 7.16854C4.00645 7.08064 4.12568 7.03125 4.25 7.03125H11.75C11.8743 7.03125 11.9935 7.08064 12.0815 7.16854C12.1694 7.25645 12.2188 7.37568 12.2188 7.5C12.2188 7.62432 12.1694 7.74355 12.0815 7.83146C11.9935 7.91936 11.8743 7.96875 11.75 7.96875H4.25Z"/>
5
+ <path d="M7.53125 3.75C7.53125 3.62568 7.58064 3.50645 7.66854 3.41854C7.75645 3.33064 7.87568 3.28125 8 3.28125C8.12432 3.28125 8.24355 3.33064 8.33146 3.41854C8.41936 3.50645 8.46875 3.62568 8.46875 3.75V11.25C8.46875 11.3743 8.41936 11.4935 8.33146 11.5815C8.24355 11.6694 8.12432 11.7188 8 11.7188C7.87568 11.7188 7.75645 11.6694 7.66854 11.5815C7.58064 11.4935 7.53125 11.3743 7.53125 11.25V3.75Z"/>
6
+ </g>
7
+ <defs>
8
+ <clipPath id="clip0_715_360">
9
+ <rect width="15" height="15" transform="translate(0.5)"/>
10
+ </clipPath>
11
+ </defs>
12
12
  </svg>