kts-component-invoice-operate 3.2.144 → 3.2.146

package/dist/index.esm.js

@@ -22713,8 +22713,18 @@ var RangePicker = DatePicker.RangePicker;
 /** 特殊信息-不动产经营租赁服务 */
 
 var RealEstateInfo = decorator(Form.create())(function (props) {
+  /** 控制器 */
+  var controller = Invoice.useInvoiceController();
   var form = props.form;
   var getFieldDecorator = form.getFieldDecorator;
+  var model = controller.useMemo(function (s) {
+    return s.model;
+  }, []);
+  var readOnly = React.useMemo(function () {
+    return model === 'readOnly';
+  }, [model]); // 注册 form
+
+  controller.useForm('realEstateInfo', form);
   return /*#__PURE__*/React.createElement("div", {
     className: "kts-invoice-operate-real-estate-info-digtal"
   }, /*#__PURE__*/React.createElement("div", {
@@ -22726,11 +22736,11 @@ var RealEstateInfo = decorator(Form.create())(function (props) {
   }, /*#__PURE__*/React.createElement(Form.Item, {
     label: "\u4E0D\u52A8\u4EA7\u5730\u5740"
   }, getFieldDecorator('realEstateAddress', {
-    rules: [{
+    rules: readOnly ? [] : [{
       required: true,
       message: '请选择不动产地址'
     }]
-  })( /*#__PURE__*/React.createElement(Cascader, {
+  })(readOnly ? /*#__PURE__*/React.createElement(MyArrString, null) : /*#__PURE__*/React.createElement(Cascader, {
     style: {
       width: '100%'
     },
@@ -22742,7 +22752,7 @@ var RealEstateInfo = decorator(Form.create())(function (props) {
   }, /*#__PURE__*/React.createElement(Form.Item, {
     label: "\u8BE6\u7EC6\u5730\u5740"
   }, getFieldDecorator('realEstateDetailedAddress', {
-    rules: [{
+    rules: readOnly ? [] : [{
       required: true,
       message: '请输入详细地址'
     }, {
@@ -22754,7 +22764,7 @@ var RealEstateInfo = decorator(Form.create())(function (props) {
         return pattern.test(value) ? Promise.resolve() : Promise.reject('地址必须包含“街”、“路”、“村”、“乡”、“镇”、“道”、“巷”、“号”等任意一个关键词');
       }
     }]
-  })( /*#__PURE__*/React.createElement(Input$2, {
+  })(readOnly ? /*#__PURE__*/React.createElement(MyDiv$3, null) : /*#__PURE__*/React.createElement(Input$2, {
     autoComplete: 'off',
     placeholder: "\u8BF7\u8F93\u5165\u8BE6\u7EC6\u5730\u5740"
   })))), /*#__PURE__*/React.createElement(Col$1, {
@@ -22762,11 +22772,11 @@ var RealEstateInfo = decorator(Form.create())(function (props) {
   }, /*#__PURE__*/React.createElement(Form.Item, {
     label: "\u79DF\u8D41\u671F\u8D77\u6B62"
   }, getFieldDecorator('leaseTerm', {
-    rules: [{
+    rules: readOnly ? [] : [{
       required: true,
       message: '请输入租赁期'
     }]
-  })( /*#__PURE__*/React.createElement(RangePicker, {
+  })(readOnly ? /*#__PURE__*/React.createElement(MyArrMoment, null) : /*#__PURE__*/React.createElement(RangePicker, {
     style: {
       width: '100%'
     }
@@ -22775,11 +22785,11 @@ var RealEstateInfo = decorator(Form.create())(function (props) {
   }, /*#__PURE__*/React.createElement(Form.Item, {
     label: "\u8DE8\u5730\uFF08\u5E02\uFF09\u6807\u5FD7"
   }, getFieldDecorator('crossCitiesSign', {
-    rules: [{
+    rules: readOnly ? [] : [{
       required: true,
       message: '请选择跨地（市）标志'
     }]
-  })( /*#__PURE__*/React.createElement(Select$2, {
+  })(readOnly ? /*#__PURE__*/React.createElement(MyNY, null) : /*#__PURE__*/React.createElement(Select$2, {
     placeholder: "\u8BF7\u9009\u62E9",
     style: {
       width: '100%'
@@ -22793,14 +22803,14 @@ var RealEstateInfo = decorator(Form.create())(function (props) {
   }, /*#__PURE__*/React.createElement(Form.Item, {
     label: "\u4EA7\u6743\u8BC1\u4E66/\u4E0D\u52A8\u4EA7\u6743\u8BC1\u53F7"
   }, getFieldDecorator('realEstateNumber', {
-    rules: [{
+    rules: readOnly ? [] : [{
       required: true,
       message: '请输入证书编号，若没有证书填写“无”'
     }, {
       max: 40,
       message: '证书编号最多40个字符'
     }]
-  })( /*#__PURE__*/React.createElement(Input$2, {
+  })(readOnly ? /*#__PURE__*/React.createElement(MyDiv$3, null) : /*#__PURE__*/React.createElement(Input$2, {
     autoComplete: 'off',
     placeholder: "\u8BF7\u8F93\u5165\u8BC1\u4E66\u7F16\u53F7\uFF0C\u82E5\u6CA1\u6709\u8BC1\u4E66\u586B\u5199\u201C\u65E0\u201D"
   })))), /*#__PURE__*/React.createElement(Col$1, {
@@ -22808,11 +22818,11 @@ var RealEstateInfo = decorator(Form.create())(function (props) {
   }, /*#__PURE__*/React.createElement(Form.Item, {
     label: "\u9762\u79EF\u5355\u4F4D"
   }, getFieldDecorator('realEstateUnit', {
-    rules: [{
+    rules: readOnly ? [] : [{
       required: true,
       message: '请选择面积单位'
     }]
-  })( /*#__PURE__*/React.createElement(Select$2, {
+  })(readOnly ? /*#__PURE__*/React.createElement(MyDiv$3, null) : /*#__PURE__*/React.createElement(Select$2, {
     placeholder: "\u8BF7\u9009\u62E9",
     style: {
       width: '100%'
@@ -22849,6 +22859,108 @@ var RealEstateInfo = decorator(Form.create())(function (props) {
   }, "2")))))))));
 });
 
+var MyDiv$3 = /*#__PURE__*/function (_React$Component) {
+  _inherits(MyDiv, _React$Component);
+
+  var _super = _createSuper(MyDiv);
+
+  function MyDiv() {
+    _classCallCheck(this, MyDiv);
+
+    return _super.apply(this, arguments);
+  }
+
+  _createClass(MyDiv, [{
+    key: "render",
+    value: function render() {
+      return /*#__PURE__*/React.createElement("div", {
+        style: this.props.style
+      }, this.props.value);
+    }
+  }]);
+
+  return MyDiv;
+}(React.Component);
+
+var MyArrString = /*#__PURE__*/function (_React$Component2) {
+  _inherits(MyArrString, _React$Component2);
+
+  var _super2 = _createSuper(MyArrString);
+
+  function MyArrString() {
+    _classCallCheck(this, MyArrString);
+
+    return _super2.apply(this, arguments);
+  }
+
+  _createClass(MyArrString, [{
+    key: "render",
+    value: function render() {
+      var _this$props$value;
+
+      return /*#__PURE__*/React.createElement("div", {
+        style: this.props.style
+      }, (_this$props$value = this.props.value) === null || _this$props$value === void 0 ? void 0 : _this$props$value.filter(function (e) {
+        return !!e;
+      }).join(','));
+    }
+  }]);
+
+  return MyArrString;
+}(React.Component);
+
+var MyArrMoment = /*#__PURE__*/function (_React$Component3) {
+  _inherits(MyArrMoment, _React$Component3);
+
+  var _super3 = _createSuper(MyArrMoment);
+
+  function MyArrMoment() {
+    _classCallCheck(this, MyArrMoment);
+
+    return _super3.apply(this, arguments);
+  }
+
+  _createClass(MyArrMoment, [{
+    key: "render",
+    value: function render() {
+      var _this$props$value2;
+
+      return /*#__PURE__*/React.createElement("div", {
+        style: this.props.style
+      }, (_this$props$value2 = this.props.value) === null || _this$props$value2 === void 0 ? void 0 : _this$props$value2.map(function (e) {
+        return hooks.isMoment(e) && e.format('YYYY-MM-DD');
+      }).filter(function (e) {
+        return !!e;
+      }).join('~'));
+    }
+  }]);
+
+  return MyArrMoment;
+}(React.Component);
+
+var MyNY = /*#__PURE__*/function (_React$Component4) {
+  _inherits(MyNY, _React$Component4);
+
+  var _super4 = _createSuper(MyNY);
+
+  function MyNY() {
+    _classCallCheck(this, MyNY);
+
+    return _super4.apply(this, arguments);
+  }
+
+  _createClass(MyNY, [{
+    key: "render",
+    value: function render() {
+      return /*#__PURE__*/React.createElement("div", {
+        style: this.props.style
+      }, this.props.value === 'Y' ? '是' : '否');
+    }
+  }]);
+
+  return MyNY;
+}(React.Component);
+
 var ImportBuyerDrawer = (function () {
   var controller = Invoice.useInvoiceController();
   var visible = controller.useMemo(function (s) {

package/dist/index.js

@@ -22723,8 +22723,18 @@ var RangePicker = ktsComponentsAntdX4.DatePicker.RangePicker;
 /** 特殊信息-不动产经营租赁服务 */
 
 var RealEstateInfo = GreyReactBox.decorator(ktsComponentsAntdX3.Form.create())(function (props) {
+  /** 控制器 */
+  var controller = Invoice.useInvoiceController();
   var form = props.form;
   var getFieldDecorator = form.getFieldDecorator;
+  var model = controller.useMemo(function (s) {
+    return s.model;
+  }, []);
+  var readOnly = React__default['default'].useMemo(function () {
+    return model === 'readOnly';
+  }, [model]); // 注册 form
+
+  controller.useForm('realEstateInfo', form);
   return /*#__PURE__*/React__default['default'].createElement("div", {
     className: "kts-invoice-operate-real-estate-info-digtal"
   }, /*#__PURE__*/React__default['default'].createElement("div", {
@@ -22736,11 +22746,11 @@ var RealEstateInfo = GreyReactBox.decorator(ktsComponentsAntdX3.Form.create())(f
   }, /*#__PURE__*/React__default['default'].createElement(ktsComponentsAntdX3.Form.Item, {
     label: "\u4E0D\u52A8\u4EA7\u5730\u5740"
   }, getFieldDecorator('realEstateAddress', {
-    rules: [{
+    rules: readOnly ? [] : [{
       required: true,
       message: '请选择不动产地址'
     }]
-  })( /*#__PURE__*/React__default['default'].createElement(ktsComponentsAntdX4.Cascader, {
+  })(readOnly ? /*#__PURE__*/React__default['default'].createElement(MyArrString, null) : /*#__PURE__*/React__default['default'].createElement(ktsComponentsAntdX4.Cascader, {
     style: {
       width: '100%'
     },
@@ -22752,7 +22762,7 @@ var RealEstateInfo = GreyReactBox.decorator(ktsComponentsAntdX3.Form.create())(f
   }, /*#__PURE__*/React__default['default'].createElement(ktsComponentsAntdX3.Form.Item, {
     label: "\u8BE6\u7EC6\u5730\u5740"
   }, getFieldDecorator('realEstateDetailedAddress', {
-    rules: [{
+    rules: readOnly ? [] : [{
       required: true,
       message: '请输入详细地址'
     }, {
@@ -22764,7 +22774,7 @@ var RealEstateInfo = GreyReactBox.decorator(ktsComponentsAntdX3.Form.create())(f
         return pattern.test(value) ? Promise.resolve() : Promise.reject('地址必须包含“街”、“路”、“村”、“乡”、“镇”、“道”、“巷”、“号”等任意一个关键词');
       }
     }]
-  })( /*#__PURE__*/React__default['default'].createElement(ktsComponentsAntdX4.Input, {
+  })(readOnly ? /*#__PURE__*/React__default['default'].createElement(MyDiv$3, null) : /*#__PURE__*/React__default['default'].createElement(ktsComponentsAntdX4.Input, {
     autoComplete: 'off',
     placeholder: "\u8BF7\u8F93\u5165\u8BE6\u7EC6\u5730\u5740"
   })))), /*#__PURE__*/React__default['default'].createElement(ktsComponentsAntdX4.Col, {
@@ -22772,11 +22782,11 @@ var RealEstateInfo = GreyReactBox.decorator(ktsComponentsAntdX3.Form.create())(f
   }, /*#__PURE__*/React__default['default'].createElement(ktsComponentsAntdX3.Form.Item, {
     label: "\u79DF\u8D41\u671F\u8D77\u6B62"
   }, getFieldDecorator('leaseTerm', {
-    rules: [{
+    rules: readOnly ? [] : [{
       required: true,
       message: '请输入租赁期'
     }]
-  })( /*#__PURE__*/React__default['default'].createElement(RangePicker, {
+  })(readOnly ? /*#__PURE__*/React__default['default'].createElement(MyArrMoment, null) : /*#__PURE__*/React__default['default'].createElement(RangePicker, {
     style: {
       width: '100%'
     }
@@ -22785,11 +22795,11 @@ var RealEstateInfo = GreyReactBox.decorator(ktsComponentsAntdX3.Form.create())(f
   }, /*#__PURE__*/React__default['default'].createElement(ktsComponentsAntdX3.Form.Item, {
     label: "\u8DE8\u5730\uFF08\u5E02\uFF09\u6807\u5FD7"
   }, getFieldDecorator('crossCitiesSign', {
-    rules: [{
+    rules: readOnly ? [] : [{
       required: true,
       message: '请选择跨地（市）标志'
     }]
-  })( /*#__PURE__*/React__default['default'].createElement(ktsComponentsAntdX4.Select, {
+  })(readOnly ? /*#__PURE__*/React__default['default'].createElement(MyNY, null) : /*#__PURE__*/React__default['default'].createElement(ktsComponentsAntdX4.Select, {
     placeholder: "\u8BF7\u9009\u62E9",
     style: {
       width: '100%'
@@ -22803,14 +22813,14 @@ var RealEstateInfo = GreyReactBox.decorator(ktsComponentsAntdX3.Form.create())(f
   }, /*#__PURE__*/React__default['default'].createElement(ktsComponentsAntdX3.Form.Item, {
     label: "\u4EA7\u6743\u8BC1\u4E66/\u4E0D\u52A8\u4EA7\u6743\u8BC1\u53F7"
   }, getFieldDecorator('realEstateNumber', {
-    rules: [{
+    rules: readOnly ? [] : [{
       required: true,
       message: '请输入证书编号，若没有证书填写“无”'
     }, {
       max: 40,
       message: '证书编号最多40个字符'
     }]
-  })( /*#__PURE__*/React__default['default'].createElement(ktsComponentsAntdX4.Input, {
+  })(readOnly ? /*#__PURE__*/React__default['default'].createElement(MyDiv$3, null) : /*#__PURE__*/React__default['default'].createElement(ktsComponentsAntdX4.Input, {
     autoComplete: 'off',
     placeholder: "\u8BF7\u8F93\u5165\u8BC1\u4E66\u7F16\u53F7\uFF0C\u82E5\u6CA1\u6709\u8BC1\u4E66\u586B\u5199\u201C\u65E0\u201D"
   })))), /*#__PURE__*/React__default['default'].createElement(ktsComponentsAntdX4.Col, {
@@ -22818,11 +22828,11 @@ var RealEstateInfo = GreyReactBox.decorator(ktsComponentsAntdX3.Form.create())(f
   }, /*#__PURE__*/React__default['default'].createElement(ktsComponentsAntdX3.Form.Item, {
     label: "\u9762\u79EF\u5355\u4F4D"
   }, getFieldDecorator('realEstateUnit', {
-    rules: [{
+    rules: readOnly ? [] : [{
       required: true,
       message: '请选择面积单位'
     }]
-  })( /*#__PURE__*/React__default['default'].createElement(ktsComponentsAntdX4.Select, {
+  })(readOnly ? /*#__PURE__*/React__default['default'].createElement(MyDiv$3, null) : /*#__PURE__*/React__default['default'].createElement(ktsComponentsAntdX4.Select, {
     placeholder: "\u8BF7\u9009\u62E9",
     style: {
       width: '100%'
@@ -22859,6 +22869,108 @@ var RealEstateInfo = GreyReactBox.decorator(ktsComponentsAntdX3.Form.create())(f
   }, "2")))))))));
 });
 
+var MyDiv$3 = /*#__PURE__*/function (_React$Component) {
+  _inherits(MyDiv, _React$Component);
+
+  var _super = _createSuper(MyDiv);
+
+  function MyDiv() {
+    _classCallCheck(this, MyDiv);
+
+    return _super.apply(this, arguments);
+  }
+
+  _createClass(MyDiv, [{
+    key: "render",
+    value: function render() {
+      return /*#__PURE__*/React__default['default'].createElement("div", {
+        style: this.props.style
+      }, this.props.value);
+    }
+  }]);
+
+  return MyDiv;
+}(React__default['default'].Component);
+
+var MyArrString = /*#__PURE__*/function (_React$Component2) {
+  _inherits(MyArrString, _React$Component2);
+
+  var _super2 = _createSuper(MyArrString);
+
+  function MyArrString() {
+    _classCallCheck(this, MyArrString);
+
+    return _super2.apply(this, arguments);
+  }
+
+  _createClass(MyArrString, [{
+    key: "render",
+    value: function render() {
+      var _this$props$value;
+
+      return /*#__PURE__*/React__default['default'].createElement("div", {
+        style: this.props.style
+      }, (_this$props$value = this.props.value) === null || _this$props$value === void 0 ? void 0 : _this$props$value.filter(function (e) {
+        return !!e;
+      }).join(','));
+    }
+  }]);
+
+  return MyArrString;
+}(React__default['default'].Component);
+
+var MyArrMoment = /*#__PURE__*/function (_React$Component3) {
+  _inherits(MyArrMoment, _React$Component3);
+
+  var _super3 = _createSuper(MyArrMoment);
+
+  function MyArrMoment() {
+    _classCallCheck(this, MyArrMoment);
+
+    return _super3.apply(this, arguments);
+  }
+
+  _createClass(MyArrMoment, [{
+    key: "render",
+    value: function render() {
+      var _this$props$value2;
+
+      return /*#__PURE__*/React__default['default'].createElement("div", {
+        style: this.props.style
+      }, (_this$props$value2 = this.props.value) === null || _this$props$value2 === void 0 ? void 0 : _this$props$value2.map(function (e) {
+        return hooks.isMoment(e) && e.format('YYYY-MM-DD');
+      }).filter(function (e) {
+        return !!e;
+      }).join('~'));
+    }
+  }]);
+
+  return MyArrMoment;
+}(React__default['default'].Component);
+
+var MyNY = /*#__PURE__*/function (_React$Component4) {
+  _inherits(MyNY, _React$Component4);
+
+  var _super4 = _createSuper(MyNY);
+
+  function MyNY() {
+    _classCallCheck(this, MyNY);
+
+    return _super4.apply(this, arguments);
+  }
+
+  _createClass(MyNY, [{
+    key: "render",
+    value: function render() {
+      return /*#__PURE__*/React__default['default'].createElement("div", {
+        style: this.props.style
+      }, this.props.value === 'Y' ? '是' : '否');
+    }
+  }]);
+
+  return MyNY;
+}(React__default['default'].Component);
+
 var ImportBuyerDrawer = (function () {
   var controller = Invoice.useInvoiceController();
   var visible = controller.useMemo(function (s) {

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "kts-component-invoice-operate",
-  "version": "3.2.144",
+  "version": "3.2.146",
   "scripts": {
-    "dev": "dumi dev",
+    "dev": "dumi dev --max-old-space-size=6096",
     "start": "dumi dev",
     "docs:build": "dumi build",
     "docs:deploy": "gh-pages -d docs-dist",

package/src/Invoice/Invoice-digtal/_test/disabled/index.tsx

@@ -15,6 +15,7 @@ export default () => {
                     'buyerTaxId',
                     'remark',
                     'itemModelName',
+                    'unit',
                 ]
             })
 

package/src/Invoice/Invoice-digtal/_test/readOnly/index.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import Invoice from '../../..';
 import 'antd/dist/antd.css';
+import moment from 'moment';
 
 export default () => {
 
@@ -34,10 +35,22 @@ export default () => {
                 remarks: '备注\n换行备注',
                 drawer: '张自豪',
             })
+            await controller.formList.get('realEstateInfo')?.setFieldsValue({
+                realEstateAddress: ['北京市', '北京市', '东城区'],
+                realEstateDetailedAddress: '东城区东华门大街',
+                leaseTerm: [moment('2023-07-06'), moment('2023-07-06')],
+                crossCitiesSign: 'Y',
+                realEstateNumber: '123456789',
+                realEstateUnit: '平方米',
+            })
         })()
     }, [controller])
 
     return (
-        <Invoice invoiceType='digtal' controller={controller} />
+        <Invoice
+            invoiceType='digtal'
+            controller={controller}
+            specialInfor={<Invoice.RealEstateInfo />}
+        />
     )
 };

package/src/Invoice/ui/digtal/GoodsList/ui/AddRowButton/index.tsx

@@ -23,7 +23,9 @@ export default () => {
   const goodMax = controller.useMemo(s => s.goodsListState.goodMax, []);
 
   /** 按钮是否禁用 */
-  const disabled = React.useMemo(() => typeof goodMax === 'number' ? goodsNum >= goodMax : !!searchValue, [goodMax, goodsNum, searchValue])
+  const disabled = React.useMemo(() =>{
+    return  typeof goodMax === 'number' ? goodsNum >= goodMax : !!searchValue
+  }, [goodMax, goodsNum, searchValue])
 
   const onClick = React.useCallback(async () => {
     await addGood(controller);

package/src/Invoice/ui/digtal/RealEstateInfo/index.tsx

@@ -3,8 +3,10 @@ import React from "react";
 import { decorator } from 'grey-react-box';
 import { Form } from 'kts-components-antd-x3';
 import { FormComponentProps } from 'kts-components-antd-x3/lib/form';
+import Invoice from '../../..';
 import './index.less';
 import { Cascader, Col, DatePicker, Input, Row, Select } from "kts-components-antd-x4";
+import moment from "moment";
 
 const { RangePicker } = DatePicker;
 
@@ -23,10 +25,20 @@ export interface RealEstateInfoProps {
 /** 特殊信息-不动产经营租赁服务 */
 export default decorator<RealEstateInfoProps, FormComponentProps & RealEstateInfoProps>(Form.create())(props => {
 
+    /** 控制器 */
+    const controller = Invoice.useInvoiceController();
+
     const { form } = props;
 
     const { getFieldDecorator } = form;
 
+    const model = controller.useMemo(s => s.model, []);
+
+    const readOnly = React.useMemo(() => model === 'readOnly', [model]);
+
+    // 注册 form
+    controller.useForm('realEstateInfo', form);
+
     return (
         <div className="kts-invoice-operate-real-estate-info-digtal">
             <div className='real-estate-info-digtal-label' >特殊信息-不动产经营租赁服务</div>
@@ -34,97 +46,166 @@ export default decorator<RealEstateInfoProps, FormComponentProps & RealEstateInf
                 <Col span={6} >
                     <Form.Item label='不动产地址' >
                         {getFieldDecorator('realEstateAddress', {
-                            rules: [{ required: true, message: '请选择不动产地址' }]
+                            rules: readOnly ? [] : [{ required: true, message: '请选择不动产地址' }]
                         })(
-                            <Cascader
-                                style={{ width: '100%' }}
-                                options={props.realEstateAddressOptions}
-                                fieldNames={props.realEstateAddressFieldNames}
-                                placeholder="请选择省市区县"
-                            />
+                            readOnly
+                                ? (<MyArrString />)
+                                : (
+                                    <Cascader
+                                        style={{ width: '100%' }}
+                                        options={props.realEstateAddressOptions}
+                                        fieldNames={props.realEstateAddressFieldNames}
+                                        placeholder="请选择省市区县"
+                                    />
+                                )
                         )}
                     </Form.Item>
                 </Col>
                 <Col span={6} >
                     <Form.Item label='详细地址' >
                         {getFieldDecorator('realEstateDetailedAddress', {
-                            rules: [
+                            rules: readOnly ? [] : [
                                 { required: true, message: '请输入详细地址' },
                                 { max: 120, message: '详细地址最多120个字符' },
-                                { 
+                                {
                                     validator: (_, value) => {
                                         const pattern = /街|路|村|乡|镇|道|巷|号/;
                                         return pattern.test(value) ? Promise.resolve() : Promise.reject('地址必须包含“街”、“路”、“村”、“乡”、“镇”、“道”、“巷”、“号”等任意一个关键词');
                                     }
                                 }
                             ]
-                        })(<Input autoComplete='off' placeholder="请输入详细地址" />)}
+                        })(
+                            readOnly
+                                ? <MyDiv />
+                                : <Input autoComplete='off' placeholder="请输入详细地址" />
+                        )}
                     </Form.Item>
                 </Col>
                 <Col span={6} >
                     <Form.Item label='租赁期起止' >
                         {getFieldDecorator('leaseTerm', {
-                            rules: [{ required: true, message: '请输入租赁期' }]
-                        })(<RangePicker style={{ width: '100%' }} />)}
+                            rules: readOnly ? [] : [{ required: true, message: '请输入租赁期' }]
+                        })(
+                            readOnly
+                                ? <MyArrMoment />
+                                : <RangePicker style={{ width: '100%' }} />
+                        )}
                     </Form.Item>
                 </Col>
                 <Col span={6} >
                     <Form.Item label='跨地（市）标志' >
                         {getFieldDecorator('crossCitiesSign', {
-                            rules: [
+                            rules: readOnly ? [] : [
                                 { required: true, message: '请选择跨地（市）标志' }
                             ]
                         })(
-                            <Select placeholder='请选择' style={{ width: '100%' }} >
-                                <Select.Option value='Y'>是</Select.Option>
-                                <Select.Option value='N'>否</Select.Option>
-                            </Select>
+                            readOnly
+                                ? <MyNY />
+                                : <Select placeholder='请选择' style={{ width: '100%' }} >
+                                    <Select.Option value='Y'>是</Select.Option>
+                                    <Select.Option value='N'>否</Select.Option>
+                                </Select>
                         )}
                     </Form.Item>
                 </Col>
                 <Col span={6} >
                     <Form.Item label='产权证书/不动产权证号' >
                         {getFieldDecorator('realEstateNumber', {
-                            rules: [
+                            rules: readOnly ? [] : [
                                 { required: true, message: '请输入证书编号，若没有证书填写“无”' },
                                 { max: 40, message: '证书编号最多40个字符' },
                             ]
-                        })(<Input autoComplete='off' placeholder="请输入证书编号，若没有证书填写“无”" />)}
+                        })(
+                            readOnly
+                                ? <MyDiv />
+                                : <Input autoComplete='off' placeholder="请输入证书编号，若没有证书填写“无”" />
+                        )}
                     </Form.Item>
                 </Col>
                 <Col span={6} >
                     <Form.Item label='面积单位' >
                         {getFieldDecorator('realEstateUnit', {
-                            rules: [{ required: true, message: '请选择面积单位' }]
+                            rules: readOnly ? [] : [{ required: true, message: '请选择面积单位' }]
                         })(
-                            <Select placeholder='请选择' style={{ width: '100%' }} >
-                                <Select.Option value="平方千米">平方千米</Select.Option>
-                                <Select.Option value="平方米">平方米</Select.Option>
-                                <Select.Option value="公顷">公顷</Select.Option>
-                                <Select.Option value="亩">亩</Select.Option>
-                                <Select.Option value="Hm2">
-                                    <span>
-                                        <span>Hm</span>
-                                        <span style={{ verticalAlign: 'super', fontSize: 'smaller' }} >2</span>
-                                    </span>
-                                </Select.Option>
-                                <Select.Option value="Km2">
-                                    <span>
-                                        <span>Km</span>
-                                        <span style={{ verticalAlign: 'super', fontSize: 'smaller' }} >2</span>
-                                    </span>
-                                </Select.Option>
-                                <Select.Option value="m2">
-                                    <span>
-                                        <span>m</span>
-                                        <span style={{ verticalAlign: 'super', fontSize: 'smaller' }} >2</span>
-                                    </span>
-                                </Select.Option>
-                            </Select>
+                            readOnly
+                                ? <MyDiv />
+                                : <Select placeholder='请选择' style={{ width: '100%' }} >
+                                    <Select.Option value="平方千米">平方千米</Select.Option>
+                                    <Select.Option value="平方米">平方米</Select.Option>
+                                    <Select.Option value="公顷">公顷</Select.Option>
+                                    <Select.Option value="亩">亩</Select.Option>
+                                    <Select.Option value="Hm2">
+                                        <span>
+                                            <span>Hm</span>
+                                            <span style={{ verticalAlign: 'super', fontSize: 'smaller' }} >2</span>
+                                        </span>
+                                    </Select.Option>
+                                    <Select.Option value="Km2">
+                                        <span>
+                                            <span>Km</span>
+                                            <span style={{ verticalAlign: 'super', fontSize: 'smaller' }} >2</span>
+                                        </span>
+                                    </Select.Option>
+                                    <Select.Option value="m2">
+                                        <span>
+                                            <span>m</span>
+                                            <span style={{ verticalAlign: 'super', fontSize: 'smaller' }} >2</span>
+                                        </span>
+                                    </Select.Option>
+                                </Select>
                         )}
                     </Form.Item>
                 </Col>
             </Row>
         </div>
     )
-})
+})
+
+
+class MyDiv extends React.Component<{ value?: string, style?: React.CSSProperties }> {
+    render(): React.ReactNode {
+        return (
+            <div style={this.props.style}>{this.props.value}</div>
+        )
+    }
+}
+
+class MyArrString extends React.Component<{ value?: string[], style?: React.CSSProperties }> {
+    render(): React.ReactNode {
+        return (
+            <div style={this.props.style}>
+                {
+                    this.props.value?.filter(e => !!e)
+                        .join(',')
+                }
+            </div>
+        )
+    }
+}
+
+class MyArrMoment extends React.Component<{ value?: moment.Moment[], style?: React.CSSProperties }> {
+    render(): React.ReactNode {
+        return (
+            <div style={this.props.style}>
+                {
+                    this.props.value?.map(e => moment.isMoment(e) && e.format('YYYY-MM-DD'))
+                        .filter(e => !!e)
+                        .join('~')
+                }
+            </div>
+        )
+    }
+}
+
+class MyNY extends React.Component<{ value?: 'Y' | 'N', style?: React.CSSProperties }> {
+    render(): React.ReactNode {
+        return (
+            <div style={this.props.style}>
+                {
+                    this.props.value === 'Y' ? '是' : '否'
+                }
+            </div>
+        )
+    }
+}
+