源码

src/uapbd/common/components/BDFormItem/index.js

@@ -0,0 +1,39 @@
+/*IHTivaHGTSm9T7chEWjS8QMwpg1SIEMOeDuzFmjloOo=*/
+/*
+ * @Descripttion: 
+ * @version: 
+ * @Author: Chendch
+ * @Date: 2022-05-13 16:06:20
+ * @LastEditors: Chendch
+ * @LastEditTime: 2022-05-20 13:29:38
+ */
+import React, {PureComponent, Fragment} from "react";
+require("./index.less");
+export default class BDFormItem extends PureComponent{
+  constructor(props){
+    super(props);
+  }
+
+  render() {
+    const {options = [], lineWrap = false, className="", style = {}} = this.props;
+    return (
+      <div className={`${lineWrap ? "" : "uapbd-form-flex-container-row-container"} ${className}`} style={style}>
+        {options.map( ele => {
+          return (
+            <div className="uapbd-form-flex-contain">
+              <div className="uapbd-form-flex-label nc-theme-form-label-c">
+                {ele.isRequired === true && <span className="required-style">*</span>}
+                {ele.label}
+              </div>
+              <div className="uapbd-form-flex-input nc-theme-from-input-bgc nc-theme-form-input-c">
+                {ele.input}
+              </div>
+            </div>
+          )
+        })}
+			</div>
+    )
+    
+  }
+}
+/*IHTivaHGTSm9T7chEWjS8QMwpg1SIEMOeDuzFmjloOo=*/

src/uapbd/common/components/BDFormItem/index.less

@@ -0,0 +1,42 @@
+.uapbd-form-flex-container-row-container{
+  display: flex;
+  align-items: center;
+  margin-bottom: 8px;
+}
+.uapbd-form-flex-contain{
+  align-items: center;
+  display: flex;
+  flex: 1;
+  margin-bottom: 6px;
+}
+.uapbd-form-flex-label{
+  width: 140px;
+  max-width: 140px;
+  min-width: 140px;
+  line-height: 18px;
+  padding-right: 16px;
+  text-align: right;
+  box-sizing: border-box;
+  color: #2b3441;
+  position: relative;
+  display: inline-block;
+  vertical-align: middle;
+  overflow-wrap: break-word;
+  white-space: pre-wrap;
+}
+.uapbd-form-flex-input{
+  width: calc(~"100% - 140px");
+  text-align: left;
+  padding-right: 8px;
+  position: relative;
+  box-sizing: border-box;
+  color: #2b344b;
+  display: inline-block;
+  vertical-align: middle;
+}
+.required-style {
+  position: relative;
+  color: red;
+  font-weight: 700;
+  margin-right: 5px;
+}

src/uapbd/common/components/SimulatedTableFolding/index.js

@@ -0,0 +1,26 @@
+/*IHTivaHGTSm9T7chEWjS8QMwpg1SIEMOeDuzFmjloOo=*/
+import React, { Component } from "react";
+import { base } from 'nc-lightapp-front';
+const { NCCollapse } = base;
+
+require("./index.less");
+export default class SimulatedTableFolding extends Component {
+    constructor(props) {
+        super(props);
+    }
+
+    render() {
+        const { options = [], lineWrap = false, className = "", style = {}, expanded = true, headerName = '', key = '', content = ``, expandHandle, extra, fieldid=''} = this.props;
+        return (
+            <div className='simulatfold-box' style={{ ...style }} fieldid={fieldid}>
+                <NCCollapse in={true} className='simulatfold-collapse-box card-table-wrapper'>
+                    <NCCollapse.Panel expanded={expanded} header={headerName} key={key} showArrow={true} extra={extra}>
+                        {content}
+                    </NCCollapse.Panel>
+                </NCCollapse>
+            </div>
+        )
+
+    }
+}
+/*IHTivaHGTSm9T7chEWjS8QMwpg1SIEMOeDuzFmjloOo=*/

src/uapbd/common/components/SimulatedTableFolding/index.less

@@ -0,0 +1,81 @@
+.simulatfold-box {
+  margin: 0 8px 4px;
+  border: 1px solid #c6ccd7;
+  border-radius: 4px;
+
+  .wui-collapse-title {
+    line-height: 36px;
+  }
+
+  .wui-collapse-arrow.wui-collapse-icon-position-left .wui-collapse-heading {
+    height: 36px;
+    line-height: 36px;
+  }
+
+  .wui-collapse-collapse {
+    .wui-collapse-collapse {
+      // padding: 8px;
+    }
+  }
+
+  .wui-collapse .wui-collapse-body {
+    border-bottom: none !important;
+
+  }
+
+  .base-collapse-body {
+    padding: 0;
+  }
+
+  .wui-collapse-heading {
+    border: none !important;
+
+    .uf-arrow-down {
+      font-family: iconfont !important;
+      border-radius: 1px;
+      font-size: 12px;
+      height: 14px;
+      width: 14px;
+      background-color: #edf2f4;
+      display: inline-block;
+      vertical-align: middle;
+      color: #5e6d8c;
+      text-align: center;
+      left: 12px;
+
+      &:before {
+        content: "\E6B7";
+      }
+    }
+
+    .collapsible-header {
+      display: flex;
+      line-height: 36px;
+      margin: 0 16px 0 10px;
+      color: #475a7a;
+      position: relative;
+      cursor: pointer;
+      vertical-align: middle;
+      border-radius: 0;
+      outline: none;
+    }
+  }
+}
+
+// 暗黑模式样式适配
+.nc-lightapp-front-black {
+  .simulatfold-box {
+    border: aliceblue;
+    border: 1px solid #39393f;
+
+    .uf-arrow-down {
+      background: #696979;
+      color: #C9C9C9 !important;
+    }
+
+    .collapsible-header {
+      color: #b0b0b0 !important;
+    }
+
+  }
+}