kts-component-invoice-operate 1.2.28 → 1.2.29

package/dist/index.esm.js

@@ -2,7 +2,7 @@ import 'kts-components-antd-x3/dist/kts-components-antd-x3.css';
 import React, { createElement } from 'react';
 import GreyReactBox, { decorator } from 'grey-react-box';
 import { chain as chain$1, bignumber, create, all } from 'mathjs';
-import { message, Form, Input, Icon, Tag, Select, Row, Col, Table, Button, Switch, Typography, Drawer, Menu, Dropdown, AutoComplete, Spin, Checkbox, Descriptions, Empty, Divider, Popover, Tree, Modal } from 'kts-components-antd-x3';
+import { message, Form, Input, Icon, Tag, Select, Table, Button, Switch, Typography, Drawer, Menu, Dropdown, AutoComplete, Spin, Checkbox, Descriptions, Empty, Divider, Popover, Tree, Modal } from 'kts-components-antd-x3';
 import { v4 } from 'uuid';
 import classnames from 'classnames';
 import { Input as Input$1, NumberPicker } from '@formily/antd-components';
@@ -1580,7 +1580,7 @@ function SvgAuto(props) {
   })));
 }
 
-var css_248z$1 = ".kts-invoice-operate-invoice-header {\n  padding: 20px 8px;\n  background: #f6f7f9;\n  position: relative;\n  color: rgba(0, 0, 0, 0.85);\n  font-weight: 500;\n}\n.kts-invoice-operate-invoice-header label {\n  margin-right: 5px;\n  white-space: nowrap;\n}\n.kts-invoice-operate-invoice-header .invoice-header-title {\n  top: 20px;\n  left: 0;\n  position: absolute;\n  color: #e28b89;\n  font-weight: 500;\n  font-size: 22px;\n  text-align: center;\n  width: 100%;\n  pointer-events: none;\n  z-index: 1;\n}\n.kts-invoice-operate-invoice-header .invoice-header-no {\n  display: flex;\n}\n.kts-invoice-operate-invoice-header .invoice-header-no .ktsAnt3x-tag {\n  margin-left: 10px;\n  height: 24px;\n}\n.kts-invoice-operate-invoice-header .invoice-header-type {\n  flex: 1;\n  text-align: right;\n}\n.kts-invoice-operate-invoice-header .invoice-header-property {\n  margin: 20px 0 0;\n}\n.kts-invoice-operate-invoice-header .invoice-header-property .ktsAnt3x-col {\n  display: flex;\n  flex-direction: inherit;\n  padding-right: 20px;\n}\n.kts-invoice-operate-invoice-header .invoice-header-property .ktsAnt3x-col span {\n  color: #999;\n}\n";
+var css_248z$1 = ".kts-invoice-operate-invoice-header {\n  padding: 20px 8px;\n  background: #f6f7f9;\n  position: relative;\n  color: rgba(0, 0, 0, 0.85);\n  font-weight: 500;\n}\n.kts-invoice-operate-invoice-header label {\n  margin-right: 5px;\n  white-space: nowrap;\n}\n.kts-invoice-operate-invoice-header .invoice-header-title {\n  top: 20px;\n  left: 0;\n  position: absolute;\n  color: #e28b89;\n  font-weight: 500;\n  font-size: 22px;\n  text-align: center;\n  width: 100%;\n  pointer-events: none;\n  z-index: 1;\n}\n.kts-invoice-operate-invoice-header .invoice-header-no {\n  display: flex;\n}\n.kts-invoice-operate-invoice-header .invoice-header-no .ktsAnt3x-tag {\n  margin-left: 10px;\n  height: 24px;\n}\n.kts-invoice-operate-invoice-header .invoice-header-type {\n  flex: 1;\n  text-align: right;\n}\n.kts-invoice-operate-invoice-header .invoice-header-property {\n  margin: 20px 0 0;\n}\n.kts-invoice-operate-invoice-header .invoice-header-property .ktsAnt3x-col {\n  display: flex;\n  flex-direction: inherit;\n  padding-right: 20px;\n}\n.kts-invoice-operate-invoice-header .invoice-header-property .ktsAnt3x-col span {\n  color: #999;\n}\n.kts-invoice-operate-invoice-header .invoice-header-property-fieldExpand {\n  display: flex;\n  margin: 0;\n  padding: 0;\n  list-style-type: none;\n  gap: 10px;\n  align-items: center;\n}\n.kts-invoice-operate-invoice-header .invoice-header-property-fieldExpand li {\n  display: flex;\n  align-items: center;\n  flex: 1;\n}\n";
 styleInject(css_248z$1);
 
 var InvoiceHeader = decorator(Form.create())(function (props) {
@@ -1771,10 +1771,10 @@ var InvoiceHeader = decorator(Form.create())(function (props) {
     }
   }, props.renderExpand && props.renderExpand(props.form)), React.createElement("div", {
     className: "invoice-header-property"
-  }, _toConsumableArray(props.fieldExpand || []).map(function (e) {}), React.createElement(Row, null, fieldExpand.map(function (e) {
-    return React.createElement(Col, {
-      span: 24 / fieldExpand.length
-    }, React.createElement("label", null, e.label), e.render(form));
+  }, _toConsumableArray(props.fieldExpand || []).map(function (e) {}), React.createElement("ul", {
+    className: 'invoice-header-property-fieldExpand'
+  }, fieldExpand.map(function (e) {
+    return React.createElement("li", null, React.createElement("label", null, e.label), e.render(form));
   }))));
 });
 

package/dist/index.js

@@ -1590,7 +1590,7 @@ function SvgAuto(props) {
   })));
 }
 
-var css_248z$1 = ".kts-invoice-operate-invoice-header {\n  padding: 20px 8px;\n  background: #f6f7f9;\n  position: relative;\n  color: rgba(0, 0, 0, 0.85);\n  font-weight: 500;\n}\n.kts-invoice-operate-invoice-header label {\n  margin-right: 5px;\n  white-space: nowrap;\n}\n.kts-invoice-operate-invoice-header .invoice-header-title {\n  top: 20px;\n  left: 0;\n  position: absolute;\n  color: #e28b89;\n  font-weight: 500;\n  font-size: 22px;\n  text-align: center;\n  width: 100%;\n  pointer-events: none;\n  z-index: 1;\n}\n.kts-invoice-operate-invoice-header .invoice-header-no {\n  display: flex;\n}\n.kts-invoice-operate-invoice-header .invoice-header-no .ktsAnt3x-tag {\n  margin-left: 10px;\n  height: 24px;\n}\n.kts-invoice-operate-invoice-header .invoice-header-type {\n  flex: 1;\n  text-align: right;\n}\n.kts-invoice-operate-invoice-header .invoice-header-property {\n  margin: 20px 0 0;\n}\n.kts-invoice-operate-invoice-header .invoice-header-property .ktsAnt3x-col {\n  display: flex;\n  flex-direction: inherit;\n  padding-right: 20px;\n}\n.kts-invoice-operate-invoice-header .invoice-header-property .ktsAnt3x-col span {\n  color: #999;\n}\n";
+var css_248z$1 = ".kts-invoice-operate-invoice-header {\n  padding: 20px 8px;\n  background: #f6f7f9;\n  position: relative;\n  color: rgba(0, 0, 0, 0.85);\n  font-weight: 500;\n}\n.kts-invoice-operate-invoice-header label {\n  margin-right: 5px;\n  white-space: nowrap;\n}\n.kts-invoice-operate-invoice-header .invoice-header-title {\n  top: 20px;\n  left: 0;\n  position: absolute;\n  color: #e28b89;\n  font-weight: 500;\n  font-size: 22px;\n  text-align: center;\n  width: 100%;\n  pointer-events: none;\n  z-index: 1;\n}\n.kts-invoice-operate-invoice-header .invoice-header-no {\n  display: flex;\n}\n.kts-invoice-operate-invoice-header .invoice-header-no .ktsAnt3x-tag {\n  margin-left: 10px;\n  height: 24px;\n}\n.kts-invoice-operate-invoice-header .invoice-header-type {\n  flex: 1;\n  text-align: right;\n}\n.kts-invoice-operate-invoice-header .invoice-header-property {\n  margin: 20px 0 0;\n}\n.kts-invoice-operate-invoice-header .invoice-header-property .ktsAnt3x-col {\n  display: flex;\n  flex-direction: inherit;\n  padding-right: 20px;\n}\n.kts-invoice-operate-invoice-header .invoice-header-property .ktsAnt3x-col span {\n  color: #999;\n}\n.kts-invoice-operate-invoice-header .invoice-header-property-fieldExpand {\n  display: flex;\n  margin: 0;\n  padding: 0;\n  list-style-type: none;\n  gap: 10px;\n  align-items: center;\n}\n.kts-invoice-operate-invoice-header .invoice-header-property-fieldExpand li {\n  display: flex;\n  align-items: center;\n  flex: 1;\n}\n";
 styleInject(css_248z$1);
 
 var InvoiceHeader = GreyReactBox.decorator(ktsComponentsAntdX3.Form.create())(function (props) {
@@ -1781,10 +1781,10 @@ var InvoiceHeader = GreyReactBox.decorator(ktsComponentsAntdX3.Form.create())(fu
     }
   }, props.renderExpand && props.renderExpand(props.form)), React__default['default'].createElement("div", {
     className: "invoice-header-property"
-  }, _toConsumableArray(props.fieldExpand || []).map(function (e) {}), React__default['default'].createElement(ktsComponentsAntdX3.Row, null, fieldExpand.map(function (e) {
-    return React__default['default'].createElement(ktsComponentsAntdX3.Col, {
-      span: 24 / fieldExpand.length
-    }, React__default['default'].createElement("label", null, e.label), e.render(form));
+  }, _toConsumableArray(props.fieldExpand || []).map(function (e) {}), React__default['default'].createElement("ul", {
+    className: 'invoice-header-property-fieldExpand'
+  }, fieldExpand.map(function (e) {
+    return React__default['default'].createElement("li", null, React__default['default'].createElement("label", null, e.label), e.render(form));
   }))));
 });
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kts-component-invoice-operate",
-  "version": "1.2.28",
+  "version": "1.2.29",
   "scripts": {
     "start": "dumi dev",
     "docs:build": "dumi build",

package/src/Invoice/ui/InvoiceHeader/index.less

@@ -1,26 +1,26 @@
 .kts-invoice-operate-invoice-header {
-  padding: 20px 8px;
-  background: #f6f7f9;
-  position: relative;
-  color: rgba(0, 0, 0, 0.85);
+  padding    : 20px 8px;
+  background : #f6f7f9;
+  position   : relative;
+  color      : rgba(0, 0, 0, 0.85);
   font-weight: 500;
 
   label {
     margin-right: 5px;
-    white-space: nowrap;
+    white-space : nowrap;
   }
 
   .invoice-header-title {
-    top: 20px;
-    left: 0;
-    position: absolute;
-    color: #e28b89;
-    font-weight: 500;
-    font-size: 22px;
-    text-align: center;
-    width: 100%;
+    top           : 20px;
+    left          : 0;
+    position      : absolute;
+    color         : #e28b89;
+    font-weight   : 500;
+    font-size     : 22px;
+    text-align    : center;
+    width         : 100%;
     pointer-events: none;
-    z-index: 1;
+    z-index       : 1;
   }
 
   .invoice-header-no {
@@ -28,12 +28,12 @@
 
     .ktsAnt3x-tag {
       margin-left: 10px;
-      height: 24px;
+      height     : 24px;
     }
   }
 
-  .invoice-header-type{
-    flex: 1;
+  .invoice-header-type {
+    flex      : 1;
     text-align: right;
   }
 
@@ -42,13 +42,29 @@
     margin: 20px 0 0;
 
     .ktsAnt3x-col {
-      display: flex;
+      display       : flex;
       flex-direction: inherit;
-      padding-right: 20px;
+      padding-right : 20px;
 
       span {
         color: #999;
       }
     }
   }
-}
+
+  .invoice-header-property-fieldExpand {
+    display        : flex;
+    margin         : 0;
+    padding        : 0;
+    list-style-type: none;
+    gap            : 10px;
+    align-items    : center;
+
+    li {
+      display    : flex;
+      align-items: center;
+      flex       : 1;
+    }
+  }
+
+}

package/src/Invoice/ui/InvoiceHeader/index.tsx

@@ -201,18 +201,31 @@ export default decorator<IInvoiceHeader, IInvoiceHeader & FormComponentProps>(Fo
           [...props.fieldExpand || []].map(e => {
           })
         }
-        <Row>
+        {/* <Row>
           {
             fieldExpand.map(e => {
               return (
-                <Col span={24 / fieldExpand.length}>
+                <Col span={parseInt(`${24 / fieldExpand.length}`)}>
                   <label>{e.label}</label>
                   {e.render(form)}
                 </Col>
               )
             })
           }
-        </Row>
+        </Row> */}
+        <ul className='invoice-header-property-fieldExpand' >
+          {
+            fieldExpand.map(e => {
+              return (
+                <li>
+                  <label>{e.label}</label>
+                  {e.render(form)}
+                </li>
+              )
+            })
+          }
+        </ul>
+
       </div>
     </div>
   );