aldehyde 0.1.16 → 0.1.19

package/src/aldehyde/controls/cquery/cquick-button.tsx

@@ -1,17 +1,17 @@
 import React from 'react'
 import {Drawer, Space,Button,ButtonProps} from 'antd'
-import {CQueryConfig} from "../../tmpl/interface";
+import {CQueryConfig,PageType} from "../../tmpl/interface";
 import LtmplPage from "./../../module/ltmpl-page";
 import {
     EditOutlined,
 } from '@ant-design/icons';
-
 import Units from '../../units'
-import ModalDtmplEdit from "../../detail/edit/modal-dtmpl-edit";
-
+import DtmplEditPage from "../../detail/edit/dtmpl-edit-page";
+import DtmplEdit from "../../detail/edit/dtmpl-edit";
 interface CquickButtonProps extends ButtonProps{
     mainCode:string;
     cQueryConfig:CQueryConfig;
+    pageType:PageType;
 }
 
 interface CquickButtonState {
@@ -29,7 +29,9 @@ class CquickButton extends React.PureComponent<CquickButtonProps, CquickButtonSt
     }
 
 
-
+    static defaultProps={
+        pageType:'modal'
+    }
 
     showDraw=(currentId:string)=>{
         // console.log("点击了L2MenuQuickBar",currentId);
@@ -47,9 +49,8 @@ class CquickButton extends React.PureComponent<CquickButtonProps, CquickButtonSt
 
 
     render() {
-        const {cQueryConfig,mainCode,type,...button}=this.props;
+        const {cQueryConfig,mainCode,type,pageType,...button}=this.props;
         const {showDraw,} = this.state;
-
         console.log("cQuery mainCode",mainCode);
        let mcode=mainCode && mainCode.indexOf("@R@")>0?mainCode.split("@R@")[0]:mainCode;
         return (
@@ -65,13 +66,14 @@ class CquickButton extends React.PureComponent<CquickButtonProps, CquickButtonSt
                 }}>{outlinedMap[cQueryConfig.title]?outlinedMap[cQueryConfig.title]:cQueryConfig.title}</Button>}
                 {!showDraw?null:
                     cQueryConfig.type=='edit'?
-                        <ModalDtmplEdit visible={showDraw} onCancel={()=>{
+                         <DtmplEditPage pageType={pageType} visible={showDraw} onCancel={()=>{
                             this.setState({
                                 showDraw:false,
                             })}}
                              sourceId={cQueryConfig.id}
-                             code={mcode}
-                             onOk={this.closeDrawer} />:
+                              code={mcode}
+                              onOk={this.closeDrawer} />
+                            :
                         <Drawer
                             placement={'left'}
                             title="关联查询"
@@ -94,8 +96,7 @@ class CquickButton extends React.PureComponent<CquickButtonProps, CquickButtonSt
                             }
                         </Drawer>
                 }
-
-            </>
+                </>
         );
     }
 }

package/src/aldehyde/controls/date-picker/index.tsx

@@ -1,9 +1,10 @@
 import React from 'react'
 import {DatePicker as AntdDatePicker,TimePicker} from "antd";
 import moment from "moment";
+import type { Moment } from "moment";
 import {FieldConfig,EControlProps} from "../../tmpl/interface";
 import Units from "../../units";
-import TmplConfigAnalysis from './../../tmpl/tmpl-config-analysis'
+import type { RangePickerProps } from 'antd/es/date-picker';
 
 const {RangePicker} = AntdDatePicker;
 
@@ -15,38 +16,30 @@ interface DataPickerProps extends EControlProps{
 
 const DatePicker: React.FC<DataPickerProps> = (props) => {
 
-    const {id,value:propsValue, itemType, fieldConfig, onChange,style} = props;
+    const {id,value:propsValue, itemType, fieldConfig, onChange,style,min,max} = props;
     let value=propsValue;
     let format = Units.getMomentFormat(itemType);
 
-    const changeValue = (value) => {
+    const changeValue = (value:Moment) => {
         if (onChange) {
-            onChange(value?moment(value).format(format):undefined);
+            onChange(value?value.format(format):undefined);
         }
     }
 
-    const changeRangeValue = (value:any[]) => {
+    const changeRangeValue = (value:Moment[]) => {
         if (onChange) {
             if(!value){
                 onChange(value);
             }else if(value.length===2 && value[0] && value[1]){
-                onChange(moment(value[0]).format(format)+"~"+moment(value[1]).format(format));
+                onChange(value[0].format(format)+"~"+value[1].format(format));
             }
         }
     }
 
-    // if(value && value.startsWith("$$current")){
-    //     switch (itemType) {
-    //         case 'daterange':
-    //         case 'datetimerange':
-    //             changeRangeValue(TmplConfigAnalysis.current(value,format));
-    //             break;
-    //         default:
-    //             changeValue(TmplConfigAnalysis.current(value,format)[0]);
-    //             break;
-    //     }
-    //
-    // }
+    const disabledDate: RangePickerProps['disabledDate'] = current => {
+       // console.log('current',moment(min,format).format(format));
+        return current && ( (max && moment(current.format(format),format) > moment(max,format)) || (min && moment(current.format(format),format) <moment(min,format)));
+    };
 
     let entryControl = undefined;
     let picker:"date" | "time" | "year" | "month" | "week" | "quarter"="date";
@@ -63,6 +56,7 @@ const DatePicker: React.FC<DataPickerProps> = (props) => {
                 style={{...style}}
                 picker={picker}
                 format={format}
+                disabledDate={disabledDate}
                 value={momentValue}
                 disabled={fieldConfig.disabled}
                 onChange={changeValue}
@@ -75,6 +69,7 @@ const DatePicker: React.FC<DataPickerProps> = (props) => {
             entryControl = <AntdDatePicker
                 id={id}
                 style={{...style}}
+                disabledDate={disabledDate}
                 showTime={{format: Units.getDateTimeFormat(itemType)}}
                 picker='date'
                 format={format}
@@ -94,6 +89,7 @@ const DatePicker: React.FC<DataPickerProps> = (props) => {
             entryControl = <RangePicker id={id} picker={picker}
                                         style={{...style}}
                                         format={format}
+                                        disabledDate={disabledDate}
                                         value={momentValue}
                                         disabled={fieldConfig.disabled}
                                         onChange={changeRangeValue}/>;
@@ -108,6 +104,7 @@ const DatePicker: React.FC<DataPickerProps> = (props) => {
                                         format={format}
                                         style={{...style}}
                                         value={momentValue}
+                                        disabledDate={disabledDate}
                                         disabled={fieldConfig.disabled}
                                         onChange={changeRangeValue}/>;
             break;

package/src/aldehyde/controls/entity-select/entity-select.tsx

@@ -201,10 +201,12 @@ export default class EntitySelect extends React.PureComponent<InnerEntitySelectP
         pageInfo = queryData.pageInfo;
         queryData.entities.forEach((item, index) => {
             let title = item.fieldMap[titleId];
-            let ts=title.split('@R@');
-            let t=ts && ts.length>0?ts[ts.length-1]:title;
-            let option = this.toOption(item.code,t , onEntityClick);
-            options.push(option);
+            if(title){
+                let ts=title.split('@R@');
+                let t=ts && ts.length>0?ts[ts.length-1]:title;
+                let option = this.toOption(item.code,t , onEntityClick);
+                options.push(option);
+            }
         })
         return {options, touchEnd: queryData.touchEnd};
     }

package/src/aldehyde/controls/entity-select/lab-tree-select.tsx

@@ -0,0 +1,148 @@
+import * as React from 'react'
+import {Button, Select, Spin,TreeSelect} from 'antd'
+import {EControlProps, PageInfo, QueryData, QueryKey, SelectConfig, SourceName} from "../../tmpl/interface";
+import {SearchOutlined} from '@ant-design/icons';
+import debounce from 'lodash/debounce';
+import './index.css';
+import HcserviceV3 from "../../tmpl/hcservice-v3";
+import HCDataSource from "../../tmpl/hc-data-source";
+
+interface LabTreeSelectProps extends EControlProps {
+
+};
+
+interface LabTreeSelectState {
+    treeData: object[],
+};
+
+type LoadDataSource = {
+    options: any[],
+    touchEnd: boolean,
+}
+
+export default class LabTreeSelect extends React.PureComponent<LabTreeSelectProps, LabTreeSelectState> {
+
+    static defaultProps = {
+        maxSelected: 100,
+    }
+
+    state = {
+        treeData: [],
+    }
+
+    async componentDidMount() {
+        this.setState({treeData:await this.loadSchoolLevelUnit()}) ;
+    }
+
+    //第一步查根
+    loadSchoolLevelUnit=async ()=>{
+        let data=[];
+     let  res=await  HcserviceV3.requestLtmplQueryTop('221036732522497',{});
+
+      if(res.entities){
+          res.entities.forEach((item, index) => {
+              let d={};
+              d["id"]=item.code;
+              d['level']=1;
+              d["pId"]=0;
+              d["title"]= item.fieldMap['228431869288450'];
+              d["value"]=d["id"]+"@R@"+d["title"];
+              d["key"]=d["value"];
+              d["selectable"]=false;
+              data.push(d);
+          })
+      }
+        return data;
+    }
+
+    loadLab=async (mainCode)=>{
+        let data=[];
+        let  res=await  HcserviceV3.requestLtmplQueryTop('228261345665025',{mainCode});
+
+        if(res.entities){
+            res.entities.forEach((item, index) => {
+                let d={};
+                d["id"]=item.code;
+                d['level']=2;
+                d["pId"]=mainCode;
+                d["title"]= item.fieldMap['227350535774211'];
+                d["value"]=d["id"]+"@R@"+d["title"];
+                d["key"]=d["value"];
+                d["selectable"]=false;
+                data.push(d);
+            })
+        }
+        return data;
+    }
+
+    loadRoom=async (mainCode)=>{
+        let data=[];
+        let  res=await  HcserviceV3.requestLtmplQueryTop('228261733638145',{mainCode});
+
+        if(res.entities){
+            res.entities.forEach((item, index) => {
+                let d={};
+                d["id"]=item.code;
+                d['level']=3;
+                d["pId"]=mainCode;
+                d["title"]= item.fieldMap['227349996806149'];
+                d["value"]=d["id"]+"@R@"+d["title"];
+                d["key"]=d["value"];
+                d["isLeaf"]=true;
+                data.push(d);
+            })
+        }
+        return data;
+    }
+
+    onChange=(newValue: string)=>{
+        const {onChange} = this.props;
+        console.log("newValue",newValue);
+        onChange(newValue);
+    }
+
+
+    onLoadData = async (node) => {
+        console.log('node:',node);
+        const {treeData}=this.state;
+        if(node['level']==1){
+         //加载实验室
+        let d =  await this.loadLab(node['id']);
+         console.log('treeData dddd ',d);
+        this.setState({
+            treeData:[...treeData,...d]
+        })
+        }else if(node['level']==2){
+            let d =  await this.loadRoom(node['id']);
+            console.log('treeData dddd ',d);
+            this.setState({
+                treeData:[...treeData,...d]
+            })
+        }
+    }
+
+    render() {
+        const {id,value,  fieldConfig, style} = this.props;
+        const {treeData} = this.state;
+        let v;
+        if(value){
+            v=value.split("@R@")[1];
+        }
+
+        console.log('treeData',treeData);
+        return (
+            <TreeSelect
+                treeDataSimpleMode
+                style={{ width: '100%' ,minWidth:'260px'}}
+                value={v}
+                dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
+                placeholder="--请选择--"
+                onChange={this.onChange}
+                loadData={this.onLoadData}
+                treeData={treeData}
+            />
+        )
+    }
+}
+
+

package/src/aldehyde/controls/entity-select/popover-entity-select.tsx

@@ -33,7 +33,19 @@ export default class EntitySelect extends React.PureComponent<EntitySelectProps,
         let newValue = [];
         if (selectedRows) {
             for (let row of selectedRows) {
-                newValue.push(row.code + '@R@' + row.title);
+                let title:string=null;
+                if(row.title instanceof Array){
+                    title = row.title[0];
+                }else{
+                    title = row.title;
+                }
+
+                console.log('1323',title);
+                if(row.title && row.title.includes("@R@")){
+                let  ts=  title.split('@R@');
+                    title=ts[ts.length-1];
+                }
+                newValue.push(row.code + '@R@' + title);
             }
         }
         onChange(newValue);

package/src/aldehyde/controls/entry-control.tsx

@@ -12,10 +12,13 @@ import loadable from "@loadable/component";
 import HCDataSource from "../tmpl/hc-data-source";
 import Upload from '../controls/upload';
 import Progress from './progress'
-
+import Cascader from './cascader'
 import EntitySelect from "./entity-select/entity-select";
 import PopoverEntitySelect from './entity-select/popover-entity-select'
 import ColorPicker from './color-picker'
+import LabTreeSelect from './entity-select/lab-tree-select'
+import Units from "../units";
+import {ProgramConfig} from "../index";
 // import EntitySelect from "./entity-select/inner-entity-select";
 // import ChemStruc from "./chemstruc/graph";
 const  CheckboxGroup=Checkbox.Group;
@@ -66,8 +69,13 @@ function renderControl(id:any,fieldConfig: FieldConfig, fieldValue: any, onChang
     let disabled: boolean = fieldConfig.disabled;
 
     let viewOrEdit: ViewOrEdit = 'edit';
+    let fieldConfigM:string=fieldConfig.min;
+    let min=(fieldConfigM || fieldConfigM=='0' ) ? Units.configParamTrans(fieldConfigM) : undefined;
+    fieldConfigM=fieldConfig.max;
+    let max=(fieldConfigM || fieldConfigM=='0' ) ? Units.configParamTrans(fieldConfigM) : undefined;;
+
     let controlProps = {
-       id, fieldConfig, itemType, viewOrEdit, onChange, disabled, value: fieldValue, style: {minWidth: 220, width: '100%'}
+       id, fieldConfig,min,max, itemType, viewOrEdit, onChange, disabled, value: fieldValue, style: {minWidth: 220, width: '100%'}
     }
 
     let antdControlProps = {
@@ -80,6 +88,11 @@ function renderControl(id:any,fieldConfig: FieldConfig, fieldValue: any, onChang
         disabled={true}
     />;
 
+    //自定义组件为先
+    if(ProgramConfig.getCustomEditControl(itemType)){
+        return React.createElement(ProgramConfig.getCustomEditControl(itemType),controlProps);
+    }
+
     switch (itemType) {
         case 'int':
         case 'decimal':
@@ -183,7 +196,7 @@ function renderControl(id:any,fieldConfig: FieldConfig, fieldValue: any, onChang
             entryControl = <AutoComplete {...controlProps} />
             break;
         case 'caselect':
-            entryControl = unSupportControl;
+            entryControl =<Cascader {...controlProps}></Cascader>;
             break;
         case 'relation':
             entryControl = unSupportControl;
@@ -200,11 +213,15 @@ function renderControl(id:any,fieldConfig: FieldConfig, fieldValue: any, onChang
         case 'relselect':
         case 'refselect':
         case 'entity-select':
-            entryControl=<EntitySelect maxSelected={fieldConfig.max?fieldConfig.max:undefined} {...controlProps}  />
+            entryControl=<EntitySelect maxSelected={max?parseInt(max):undefined} {...controlProps}  />
             //  entryControl = <EntitySelect  {...controlProps} sourceName={'rcriteria'}></EntitySelect>
             break;
         case 'table-entity-select':
-            entryControl=<PopoverEntitySelect maxSelected={fieldConfig.max?fieldConfig.max:undefined} {...controlProps}  />
+            entryControl=<PopoverEntitySelect maxSelected={max?parseInt(max):undefined} {...controlProps}  />
+            //  entryControl = <EntitySelect  {...controlProps} sourceName={'rcriteria'}></EntitySelect>
+            break;
+        case 'lab-tree-select':
+            entryControl=<LabTreeSelect maxSelected={max?parseInt(max):undefined} {...controlProps}  />
             //  entryControl = <EntitySelect  {...controlProps} sourceName={'rcriteria'}></EntitySelect>
             break;
         case 'progress':

package/src/aldehyde/controls/enum-tag/index.tsx

@@ -5,7 +5,6 @@ import HCDataSource from "../../tmpl/hc-data-source";
 
 interface EnumTagsProps extends VControlProps {
 
-
 }
 
 
@@ -15,10 +14,17 @@ const EnumTags: React.FC<EnumTagsProps> = (props) => {
     let viewControl = undefined;
     let tagList = [];
     if (value) {
-        value.split(',').forEach(v => {
+        let v=value;
+        if(value instanceof Array){
+
+        }else {
+            v=value.split(',');
+        }
+        v.forEach(v => {
             let color = HCDataSource.getEnumValueColor(fieldConfig.mstrucId, value);
             tagList.push(<Tag key={v} color={color ? color : 'blue'}>{v}</Tag>)
         })
+
     }
     viewControl = <span className="infoStyle">
                                     {tagList}

package/src/aldehyde/controls/input-number/index.tsx

@@ -9,7 +9,7 @@ interface InputNumberProps extends EControlProps {
 
 const InputNumber: React.FC<InputNumberProps> = (props) => {
 
-    const {id,value, itemType, fieldConfig, onChange,style} = props;
+    const {id,value, itemType, fieldConfig, onChange,style,min,max} = props;
 
     let entryControl = undefined;
 
@@ -53,7 +53,7 @@ const InputNumber: React.FC<InputNumberProps> = (props) => {
 
     switch (itemType) {
         case 'int':
-            entryControl = <AntdInputNumber   style={{...style}} min={fieldConfig.min} max={fieldConfig.max}
+            entryControl = <AntdInputNumber   style={{...style}} min={min} max={max}
                                             {...antdControlProps} value={valueSingle}
                                             onKeyUp={changeInt} onChange={changeValue}
             />
@@ -62,7 +62,7 @@ const InputNumber: React.FC<InputNumberProps> = (props) => {
         case 'float':
         case 'double':
             entryControl = <AntdInputNumber style={{...style}}
-                {...antdControlProps} value={valueSingle} min={fieldConfig.min} max={fieldConfig.max}
+                {...antdControlProps} value={valueSingle} min={min} max={max}
                 // style={{width}}
                 step={0.1} onChange={changeValue}
             />
@@ -70,11 +70,11 @@ const InputNumber: React.FC<InputNumberProps> = (props) => {
         case 'intrange':
             entryControl =
                 <Space>
-                <AntdInputNumber  min={fieldConfig.min} max={fieldConfig.max}
+                <AntdInputNumber  min={min} max={max}
                                             placeholder={`开始`} value={valueBegin}
                                             onKeyUp={changeInt} onChange={changeBeginValue}
             />~
-            <AntdInputNumber min={fieldConfig.min} max={fieldConfig.max}
+            <AntdInputNumber min={min} max={max}
                              placeholder={`结束`} value={valueEnd}
                              onKeyUp={changeInt} onChange={changeEndValue}
             />
@@ -83,12 +83,12 @@ const InputNumber: React.FC<InputNumberProps> = (props) => {
         case 'decimalrange':
             entryControl =
                 <Space>
-                    <AntdInputNumber min={fieldConfig.min} max={fieldConfig.max}
+                    <AntdInputNumber min={min} max={max}
                                      placeholder={`开始`} value={valueBegin}
                                       onChange={changeBeginValue} step={0.1}
                                      disabled={disabled}
                     />~
-                    <AntdInputNumber min={fieldConfig.min} max={fieldConfig.max}
+                    <AntdInputNumber min={min} max={max}
                                      placeholder={`结束`} value={valueEnd} step={0.1}
                                       onChange={changeEndValue}  disabled={disabled}
                     />

package/src/aldehyde/controls/view-control.tsx

@@ -13,6 +13,7 @@ import moment from "moment";
 import Progress from './progress'
 import ColorPicker from "./color-picker";
 import EllipsisText from './text/ellipsis-text'
+import {ProgramConfig} from "../index";
 //import ChemStruc from "./chemstruc/graph";
 // import HtmlEditor from "../HtmlEditor/tinymce";
 const Loading = <Spin tip="Loading...">
@@ -54,12 +55,15 @@ function renderControl(fieldConfig: FieldConfig, fieldValue: any,pHolderType:Con
 
     let placeholder = !fieldConfig.disabled ? `请输入${fieldConfig.title}` : "无需输入";
     let disabled: boolean = fieldConfig.disabled;
-    let value = fieldValue ? fieldValue : fieldConfig.defaultValue ? fieldConfig.defaultValue : "";
+    let value = fieldValue ? fieldValue : fieldConfig.defaultValue && !Units.isConfigDefaultValue(fieldConfig.defaultValue) ? fieldConfig.defaultValue : "";
     let viewOrEdit:ViewOrEdit='view';
     let controlProps = {
         fieldConfig, itemType, value,viewOrEdit,
     }
-
+    //自定义组件为先
+    if(ProgramConfig.getCustomEditControl(itemType)){
+        return React.createElement(ProgramConfig.getCustomViewControl(itemType),controlProps);
+    }
     const unSupportControl =
         <span className="infoStyle">{`暂未完成-${itemType}`}</span>;
 
@@ -126,7 +130,7 @@ function renderControl(fieldConfig: FieldConfig, fieldValue: any,pHolderType:Con
             viewControl = unSupportControl;
             break;
         case 'caselect':
-            viewControl = unSupportControl;
+            viewControl = <span className="infoStyle">{value}</span>;
             break;
         case 'relation':
             viewControl = unSupportControl

package/src/aldehyde/detail/button/submit-button-bar.tsx

@@ -94,7 +94,7 @@ class SubmitButtonBar extends React.PureComponent<SubmitButtonProps, SubmitButto
                             //     type="primary"
                             // >{item.title}</Button>
                             // </Popconfirm>
-                           return <Action hiddenType={'disabled'} buttonType={'primary'} serial={serial} key={item.id}   formRef={formRef} actionConfig={item}  doAction={doSubmit}></Action>
+                           return <Action iconType={'icon-title'} hiddenType={'disabled'} buttonType={'primary'} serial={serial} key={item.id}   formRef={formRef} actionConfig={item}  doAction={doSubmit}></Action>
                         }
                     })
                     }
@@ -104,8 +104,11 @@ class SubmitButtonBar extends React.PureComponent<SubmitButtonProps, SubmitButto
 
 
         return (
-            <Affix style={{position: 'absolute', right: 10, maxHeight: 100}}
-                   offsetBottom={this.calcOffsetBottom(buttons, actions)}>
+            <Affix
+                //style={{position: 'absolute', right: 10, maxHeight: 100}}
+                   // offsetBottom={this.calcOffsetBottom(buttons, actions)}>
+                   style={{position: 'absolute',bottom:60,right: 15,}}  offsetBottom={this.calcOffsetBottom(buttons, actions)}
+            >
                 <div className={'submitButtonBar'} >
                     <ul>
                         {buttons.includes('dtmplSave') ? <li key={100}>

package/src/aldehyde/detail/edit/{modal-dtmpl-edit.tsx → dtmpl-edit-page.tsx}

@@ -1,18 +1,20 @@
 import React from 'react';
-import {Button, FormInstance, Modal, Popconfirm} from 'antd'
-import {DtmplBaseProps, DtmplConfig, DtmplData} from "../../tmpl/interface";
+import {Button, Drawer, FormInstance, Modal, Popconfirm, Space} from 'antd'
+import {DtmplBaseProps, DtmplConfig, DtmplData, PageType} from "../../tmpl/interface";
 import DtmplForm from '../../form/dtmpl-form';
 import HCDataSource from "../../tmpl/hc-data-source";
 import Units from "../../units";
 import HcserviceV3 from "../../tmpl/hcservice-v3";
 import Action from "../../controls/action";
+import DtmplEdit from "./dtmpl-edit";
 
 interface ModalEditorProps extends DtmplBaseProps {
-    height: any,
+    height?: any,
+    width?:number,
     visible: boolean,
     onOk: (code: string) => void,
     onCancel: () => void,
-
+    pageType:PageType;
 }
 
 interface ModalEditorState {
@@ -23,7 +25,7 @@ interface ModalEditorState {
     dtmplData:DtmplData,
 }
 
-export default class ModalDtmplEdit extends React.PureComponent<ModalEditorProps, ModalEditorState> {
+export default class DtmplEditPage extends React.PureComponent<ModalEditorProps, ModalEditorState> {
     formRef = React.createRef<FormInstance>();
     autoSaveTimer = -1000000000000000;
     autoSaveInterval=undefined;
@@ -35,12 +37,13 @@ export default class ModalDtmplEdit extends React.PureComponent<ModalEditorProps
     static defaultProps = {
         showConfirm: true,
         height: 500,
+        width:1250,
         //antd modal
         forceRender: true,
         style: {maxWidth: 'calc(100vw - 60px)', maxHeight: 'calc(100vh - 50px)'},
         okText: "确定",
         cancelText: "取消",
-
+        pageType:'modal'
     }
     state = {
         id:'modelDtmplEdit'+Units.getRandomNum(6),
@@ -160,7 +163,7 @@ export default class ModalDtmplEdit extends React.PureComponent<ModalEditorProps
         //处理action
         if (dtmplConfig) {
             dtmplConfig.actions.forEach((ac, index) => {
-                footerButtons.unshift(<Action hiddenType={'disabled'}  serial={serial} key={ac.id}  formRef={this.formRef} actionConfig={ac}  doAction={this.doSubmit}></Action>);
+                footerButtons.unshift(<Action iconType={'icon-title'} hiddenType={'disabled'}  serial={serial} key={ac.id}  formRef={this.formRef} actionConfig={ac}  doAction={this.doSubmit}></Action>);
             })
         }
         footerButtons.unshift(<Popconfirm key="back" placement="topLeft" title={"确定要取消本次修改内容吗?"} onConfirm={onCancel} okText="确定" cancelText="取消">
@@ -171,12 +174,12 @@ export default class ModalDtmplEdit extends React.PureComponent<ModalEditorProps
     }
 
     render() {
-        const {height, onOk, onCancel, code, sourceId,  visible,mainCode} = this.props
+        const {height, onOk, onCancel, code, sourceId,  visible,mainCode,width,pageType} = this.props
         const {dtmplConfig,id,dtmplData} = this.state;
 
-        return <Modal
+        return (<> {pageType=='modal'? <Modal
             visible={visible}
-            width={1250}
+            width={width}
             title={dtmplConfig ? dtmplConfig.title : ""}
             bodyStyle={{height: height, overflow: 'auto'}}
             destroyOnClose={true}
@@ -185,13 +188,33 @@ export default class ModalDtmplEdit extends React.PureComponent<ModalEditorProps
             footer={this.getFooter()}
         >
             {visible} <div onClick={this.onClickBody}>
-                {/*<Scrollbars  autoHide autoHideTimeout={1000}>*/}
                 <DtmplForm parentId={id} dtmplConfig={dtmplConfig} formRef={this.formRef} sourceId={sourceId}
                            onFinish={onOk}
                            showConfirm={false} dtmplData={dtmplData} onValuesChange={this.onValuesChange} />
-                {/*</Scrollbars>*/}
             </div>
-        </Modal>
+            </Modal>
+            :
+            <Drawer
+                placement={'left'}
+                closable={true}
+                mask={false}
+                onClose={onCancel}
+                visible={visible}
+                width={width}
+                style={{
+                    maxWidth: 1960,
+                }}
+                extra={
+                    <Space>{this.getFooter()}</Space>
+                }
+            >
+                <DtmplForm parentId={id} dtmplConfig={dtmplConfig} formRef={this.formRef} sourceId={sourceId}
+                           onFinish={onOk}
+                           showConfirm={false} dtmplData={dtmplData} onValuesChange={this.onValuesChange} />
+            </Drawer>
+       }
+       </>
+    )
 
     }