自定义福利表单

2022-03-22 16:53:39 +08:00 · 2022-03-22 16:53:39 +08:00 · 7c8dabaf8d
parent c020cc5a80
commit 7c8dabaf8d
5 changed files with 165 additions and 15 deletions
--- a/pc4mobx/hrmSalary/components/customForm/index.js
+++ b/pc4mobx/hrmSalary/components/customForm/index.js
@ -0,0 +1,49 @@
+import React from 'react'
+import { Checkbox, Radio, Row, Col } from "antd"
+import { WeaInput } from "ecCom"
+const CheckboxGroup = Checkbox.Group;
+
+export default class CustomForm extends React.Component {
+    
+    render() {
+        return (
+            <div style={{padding: "20px"}}>
+                {
+                    this.props.condition.map(item => {
+                        return (
+                            <Row style={{lineHeight: "40px"}}>
+                                <Col span={6}>
+                                    {item.label} : 
+                                </Col>
+                                <Col span={18}>
+                                    {
+                                        item.conditionType == "INPUT" &&
+                                        <WeaInput value={item.value} />
+                                    }
+
+                                    {
+                                        item.conditionType == "RADIO" && item.options &&
+                                        <Radio.Group>
+                                            {
+                                                item.options.map(o => (
+                                                    <Radio value={o.key}>{o.showname}</Radio>
+                                                ))
+                                            }
+                                        </Radio.Group>
+                                    }
+
+                                    {
+                                        item.conditionType == "CHECKBOX" && 
+                                        item.options && 
+                                        <CheckboxGroup options={item.options.map(o => ({label: o.showname, value: o.key}))} />
+                                    }
+                                </Col>
+                            </Row>
+                        )
+                    })
+                }
+                
+            </div>
+        )
+    }
+}
--- a/pc4mobx/hrmSalary/pages/socialSecurityBenefits/programme/customNewModal.js
+++ b/pc4mobx/hrmSalary/pages/socialSecurityBenefits/programme/customNewModal.js
@ -0,0 +1,16 @@
+import React from 'react'
+import { getCustomSearchs, getSearchs } from '../../../util';
+import { Modal } from  'antd'
+import { observable, action, toJS } from 'mobx';
+import CustomForm from '../../../components/customForm'
+
+export default class CustomNewModal extends React.Component {
+    render() {
+        return (
+            <Modal visible={this.props.visible} onCancel={() => {this.props.onCancel()}} title="新建自定义福利">
+                {/* {getCustomSearchs(this.props.form, toJS(this.props.condition), 1)} */}
+                <CustomForm condition={this.props.condition}/>
+            </Modal>
+        )
+    }
+}
--- a/pc4mobx/hrmSalary/pages/socialSecurityBenefits/programme/index.js
+++ b/pc4mobx/hrmSalary/pages/socialSecurityBenefits/programme/index.js
@ -5,6 +5,7 @@ import { toJS } from 'mobx';
 import { Button, Table, DatePicker, Row, Col } from 'antd';

 import { WeaTop, WeaTab, WeaRightMenu, WeaRangePicker, WeaInputSearch, WeaSlideModal, WeaSelect } from 'ecCom';
+
 import { WeaTableNew } from "comsMobx"

 import "./index.less";
@ -16,6 +17,7 @@ import ContentWrapper from '../../../components/contentWrapper';
 import SlideModalTitle from '../../../components/slideModalTitle';
 import TipLabel from '../../../components/TipLabel'
 import DefaultSlideForm from './defaultSlideForm'
+import CustomNewModal from './customNewModal'


 import {
@ -42,6 +44,7 @@ export default class Programme extends React.Component {
      currentOperate: "add",
      copyModalValue: "",
      copyId: "",
+      customNewVisible: false
    }
  }

@ -102,7 +105,8 @@ export default class Programme extends React.Component {
  render() {
    const { programmeStore } = this.props;
    const { loading, hasRight, form, condition, tableStore, showSearchAd, getTableDatas, doSearch, setShowSearchAd } = programmeStore;
-    const { selectedKey, setSelectedKey, getCustomCategoryList, customTableStore, customSelectkey, setCustomSelectkey, requestParams, setRequestParams } = programmeStore;
+    const { selectedKey, setSelectedKey, getCustomCategoryList, customTableStore, 
+      customSelectkey, setCustomSelectkey, requestParams, setRequestParams, formCondition } = programmeStore;
    if (!hasRight && !loading) { // 无权限处理
      return renderNoright();
    }
@ -166,9 +170,23 @@ export default class Programme extends React.Component {
      this.setState({ slideVisiable: true, currentOperate: "add" })
    }

+    const handleCustomNewClick = () => {
+      const { programmeStore : { getCustomForm, getCumCustomForm }} = this.props;
+      getCustomForm()
+      this.setState({ customNewVisible: true})
+
+    }
+
    const renderSearchOperationItem = () => {
      return <div>
-        <Button type="primary" style={{ marginRight: '10px' }} onClick={() => { handleNewClick() }}>新建</Button>
+        <Button type="primary" style={{ marginRight: '10px' }} onClick={() => { 
+          if(selectedKey == "custom") {
+            handleCustomNewClick()
+          } else {
+            handleNewClick()
+          }
+          
+         }}>新建</Button>
      
        {
          selectedKey == "custom" &&  <WeaSelect
@ -244,10 +262,10 @@ export default class Programme extends React.Component {
                renderSearchOperationItem()
              }
              onChange={(v) => {
+                setSelectedKey(v)
                if(v == "custom") { // 自定义福利
                  getCustomCategoryList()
                } else {
-                  setSelectedKey(v)
                  getTableDatas(v)
                }
              }}
@ -309,6 +327,15 @@ export default class Programme extends React.Component {
            }
            />
          }
+
+          {
+            this.state.customNewVisible && <CustomNewModal 
+              visible={this.state.customNewVisible}
+              condition={formCondition}
+              form={form}
+              onCancel={() => {this.setState({customNewVisible: false})}}
+            />
+          }
      </div>
    )
  }
--- a/pc4mobx/hrmSalary/stores/programme.js
+++ b/pc4mobx/hrmSalary/stores/programme.js
@ -3,12 +3,12 @@ import { message } from 'antd';
 import { WeaForm, WeaTableNew } from 'comsMobx';

 import * as API from '../apis/welfareScheme'; // 引入API接口文件
+import * as CumAPI from '../apis/cumDeduct'

 const { TableStore } = WeaTableNew;

 export class ProgrammeStore {
  @observable tableStore = new TableStore(); // new table
-  @observable form = new WeaForm(); // nrew 一个form
  @observable condition = []; // 存储后台得到的form数据
  @observable hasRight = true; // 判断用户是有权限查看当前页面： 没有权限渲染无权限页面，有权限渲染数据
  @observable showSearchAd = false; // 高级搜索面板显示
@ -22,6 +22,8 @@ export class ProgrammeStore {
    remarks: "",
    paymentArea: "1"
  }
+  @observable form = new WeaForm(); 
+  @observable formCondition = []; // 存储后台得到的form数据

  @action
  setRequestParams = requestParams => this.requestParams = requestParams;
@ -46,17 +48,17 @@ export class ProgrammeStore {
  }

  // 获得高级搜索表单数据
-  @action
-  getCondition = () => {
-    API.getForm().then(action(res => {
-      if (res.status) { // 接口请求成功/失败处理
-        this.condition = res.condition;
-        this.form.initFormFields(res.condition); // 渲染高级搜索form表单
-      } else {
-        message.error(res.msg || '接口调用失败！')
-      }
-    }));
-  }
+  // @action
+  // getCondition = () => {
+  //   API.getForm().then(action(res => {
+  //     if (res.status) { // 接口请求成功/失败处理
+  //       this.condition = res.condition;
+  //       this.form.initFormFields(res.condition); // 渲染高级搜索form表单
+  //     } else {
+  //       message.error(res.msg || '接口调用失败！')
+  //     }
+  //   }));
+  // }

  // 渲染table数据
  @action
@ -147,4 +149,16 @@ export class ProgrammeStore {
    })
  }

+  @action getCustomForm = (params) => {
+    API.getCustomCategoryForm(params).then(res => {
+      if(res.status) {
+        let condition = res.data.item;
+        let items = Object.keys(condition).map(item => {
+          return condition[item]
+        })
+        let fieldCondtion = items
+        this.formCondition = fieldCondtion;
+      }
+    })
+  }
 }
--- a/pc4mobx/hrmSalary/util/index.js
+++ b/pc4mobx/hrmSalary/util/index.js
@ -3,11 +3,55 @@ import { WeaSwitch } from 'comsMobx';
 import { WeaLocaleProvider, WeaAlertPage, WeaSearchGroup, WeaFormItem } from 'ecCom';
 const getLabel = WeaLocaleProvider.getLabel;

+// 渲染form表单: 一般对form的渲染都统一使用该方法
+export const getCustomSearchs = (form, condition, col, isCenter) => {
+  const { isFormInit } = form;
+  const formParams = form.getFormParams();
+  let items = [];
+  let group = [];
+  isFormInit && condition && 
+  condition.map(c =>{
+    c.items.map(fields => {
+      items.push({
+        com:(
+          <WeaFormItem
+            label={`${fields.label}`} // label 标签的文本
+            labelCol={{span: `${fields.labelcol}`}} // label标签占一行比例
+            wrapperCol={{span: `${fields.fieldcol}`}} // 右侧控件占一行比例
+            error={form.getError(fields)} // 错误提示: 处理表单中有必填项,保存的校验
+            tipPosition="bottom" // 错误提示的显示位置: top/bottom
+          >
+            <WeaSwitch
+              fieldConfig={fields}
+              form={form}
+              formParams={formParams}
+            />
+          </WeaFormItem>),
+        colSpan:1,
+      })
+    });
+  });
+
+  if(items.length > 0) {
+    group.push(
+      <WeaSearchGroup
+        col={col || 1} // 高级搜索列布局列数
+        needTigger={true} // 是否开启收缩
+        title={''} // 高级搜索标题
+        showGroup={true} // 是否开启面板
+        items={items} // 条目数组数据
+        center={isCenter || false} // 内容是否居中：一般弹框需要
+      />)
+    return group;
+  }
+}
+
 // 渲染form表单: 一般对form的渲染都统一使用该方法
 export const getSearchs = (form, condition, col, isCenter) => {
  const { isFormInit } = form;
  const formParams = form.getFormParams();
  let group = [];
+  alert("isFormInit: " + isFormInit)
  isFormInit && condition && condition.map(c =>{
    let items = [];
    c.items.map(fields => {