设置表头

2022-03-23 13:11:01 +08:00 · 2022-03-23 13:11:01 +08:00 · 218d648f33
parent 22a1a64275
commit 218d648f33
5 changed files with 217 additions and 26 deletions
--- a/pc4mobx/hrmSalary/apis/attendance.js
+++ b/pc4mobx/hrmSalary/apis/attendance.js
@ -2,7 +2,14 @@ import { WeaTools } from 'ecCom';

 //数据采集-考勤引用-考勤数据列表
 export const getAttendanceList = params => {
-    return WeaTools.callApi('/api/bs/hrmsalary/attendQuote/list', 'POST', params);
+    return fetch('/api/bs/hrmsalary/attendQuote/list', {
+        method: 'POST',
+        mode: 'cors',
+        headers: {
+            'Content-Type': 'application/json'
+        }, 
+        body: JSON.stringify(params)
+    }).then(res => res.json())
 }

 //数据采集-考勤引用-考勤数据-获取导入参数
@ -119,12 +126,26 @@ export const deleteAttendanceField = params => {

 //数据采集-考勤引用-考勤引用字段设置-列表
 export const getAttendanceFieldSettingList = params => {
-    return WeaTools.callApi('/api/bs/hrmsalary/attendQuote/fieldSetting/list', 'POST', params);
+    return fetch('/api/bs/hrmsalary/attendQuote/fieldSetting/list', {
+        method: 'POST',
+        mode: 'cors',
+        headers: {
+            'Content-Type': 'application/json'
+        }, 
+        body: JSON.stringify(params)
+    }).then(res => res.json())
 }

 //数据采集-考勤引用-考勤引用字段设置-保存
 export const saveAttendanceFieldSetting = params => {
-    return WeaTools.callApi('/api/bs/hrmsalary/attendQuote/fieldSetting/save', 'POST', params);
+    return fetch('/api/bs/hrmsalary/attendQuote/fieldSetting/save', {
+        method: 'POST',
+        mode: 'cors',
+        headers: {
+            'Content-Type': 'application/json'
+        }, 
+        body: JSON.stringify(params)
+    }).then(res => res.json())
 }
 //数据采集-考勤引用-考勤引用字段设置-恢复默认设置
 export const returnToAttendanceFieldSettingDefault = params => {
--- a/pc4mobx/hrmSalary/components/selectItemsModal/index.js
+++ b/pc4mobx/hrmSalary/components/selectItemsModal/index.js
@ -18,7 +18,17 @@ export const items = [
 ]

 export default class SelectItemModal extends React.Component {
+    constructor(props) {
+        super(props)
+        this.state = {
+            searchValue: ""
+        }
+    }

+    handleShowChecked(value) {
+        value = value == 1 ? true : false
+        this.props.onShowChecked(value)
+    }
    
    render(){

@ -36,16 +46,23 @@ export default class SelectItemModal extends React.Component {
                    <WeaInputSearch
                        style={{float: "right", marginRight: "30px"}}
                        placeholder={"请输入关键字"}
+                        value={this.state.searchValue}
+                        onChange={(value) => {
+                            this.setState({searchValue: value})
+                        }}
+                        onSearch={(value) => {
+                            this.props.onSearch(value)
+                        }}
                        />
                </div>
                {this.props.children}
                
                <div style={{marginTop: "40px", overflow:"hidden", height: "50px", lineHeight: "50px"}}>
                    <div style={{float: "left"}}>
-                        <WeaCheckbox content="只显示已选中字段"/>
+                        <WeaCheckbox content="只显示已选中字段" onChange={(value) => {this.handleShowChecked(value)}}/>
                    </div>
                    <div style={{float: "right"}}>
-                        <Button type="primary" style={{marginRight: "10px"}}>保存</Button>
+                        <Button type="primary" style={{marginRight: "10px"}} onClick={() => {this.props.onSave()}}>保存</Button>
                        <Dropdown.Button overlay={menu}>更多</Dropdown.Button>
                    </div>
                </div>
--- a/pc4mobx/hrmSalary/components/selectItemsModal/selectItemsWrapper.js
+++ b/pc4mobx/hrmSalary/components/selectItemsModal/selectItemsWrapper.js
@ -6,17 +6,40 @@ export default class SelectItemsWrapper extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
-            showContent: true
+            showContent: true,
+            checkStatus: false
        }
    }
+
+    handleAllChecked(value) {
+        value = value == 1 ? true : false
+        let items = [...this.props.items]
+        items.map(item => { item.checked = value })
+        this.setState({
+            checkStatus: value
+        })
+        this.props.onChange(items)
+    }
+
+    handleItemChange(value, record) {
+        value = value == 1 ? true : false
+        let items = [...this.props.items]
+        items.map(item => {
+            if(item.id == record.id) {
+                item.checked = value
+            }
+        })
+        this.props.onChange(items)
+    }
+
    render() {
        return (
            <div style={{ margin: "10px 20px" }}>
-                    <div style={{marginBottom: "10px", cursor: "pointer"}} onClick={() => this.setState({
-                        showContent: !this.state.showContent
-                    })}>
-                        <div style={{display: "inline-block"}}><WeaCheckbox content={<span style={{fontWeight: "600"}}>{this.props.title}</span>} /></div>
-                        <div style={{float: 'right', fontWeight: "600"}}>已选中0个字段
+                    <div style={{marginBottom: "10px", cursor: "pointer"}} >
+                        <div style={{display: "inline-block"}}><WeaCheckbox content={<span style={{fontWeight: "600"}}>{this.props.title}</span>} onChange={(value) => {this.handleAllChecked(value)}} value={this.state.checkStatus}/></div>
+                        <div style={{float: 'right', fontWeight: "600"}} onClick={() => this.setState({
+                            showContent: !this.state.showContent
+                            })}>已选中{this.props.items ? this.props.items.filter(item => item.checked).length : 0}个字段
                            <span style={{marginLeft: "10px", fontWeight: "400"}}>
                                {
                                    this.state.showContent ? <Icon type="down" /> : <Icon type="left" />
@ -34,7 +57,7 @@ export default class SelectItemsWrapper extends React.Component {
                        <Row>
                            {
                                this.props.items && this.props.items.map(item => (
-                                    <Col span={6}><WeaCheckbox content={item.title} value={item.checked}/></Col>
+                                    <Col span={6}><WeaCheckbox content={item.name} value={item.checked} onChange={(value) => {this.handleItemChange(value, item)}}/></Col>
                                ))
                            }
                        </Row>
--- a/pc4mobx/hrmSalary/pages/dataAcquisition/attendance/index.js
+++ b/pc4mobx/hrmSalary/pages/dataAcquisition/attendance/index.js
@ -55,10 +55,16 @@ export default class Attendance extends React.Component {
      tabSelectedKey: "0",
      itemMangeVisible: false,
      itemMangeValue: {},
-      fieldName: ""
+      fieldName: "",
+      fieldSettingSearchValue: ""
    }
  }

+  componentWillMount() {
+    const { attendanceStore: { doInit }} = this.props;
+    doInit()
+  }
+
  onShowSlide() {
    const {attendanceStore : {setSlideVisiable}} = this.props;
    setSlideVisiable(true)
@ -85,7 +91,8 @@ export default class Attendance extends React.Component {
  render() {
    const { attendanceStore } = this.props;
    const { loading, hasRight, form, condition, tableStore, showSearchAd, getTableDatas, doSearch, setShowSearchAd } = attendanceStore;
-    const { step, setStep, setSlideVisiable, slideVisiable, doBatchDelete } = attendanceStore;
+    const { step, setStep, setSlideVisiable, slideVisiable, doBatchDelete, attendTableStore, fieldSettingAttendList, fieldSettingCustomList, setFieldSettingAttendList, setFieldSettingCustomList, searchFieldSettingList } = attendanceStore;
+    const { getAttendanceFieldSettingList, saveAttendanceFieldSetting } = attendanceStore
    const selectedRowKeys = toJS(tableStore.selectedRowKeys) || []; // tableStore 右侧选中数组
    if (!hasRight && !loading) { // 无权限处理
      return renderNoright();
@ -151,9 +158,12 @@ export default class Attendance extends React.Component {

    const renderHeaderSetCompoent = () => {
      return (
-        <HeaderSet onSetClick={() => this.setState({
-          selectItemVisible: true
-        })}/>
+        <HeaderSet onSetClick={() => {
+          getAttendanceFieldSettingList({sourceType:'IMPORT'})
+          this.setState({
+            selectItemVisible: true
+          })
+        }}/>
      )
    }

@ -213,7 +223,10 @@ export default class Attendance extends React.Component {
      return (
        <div style={{display: "inline-block"}}>
          <Button type="primary" style={{marginRight: "10px"}} onClick={() => handleNewClick()}>新建</Button>
-          <WeaInputSearch value={this.state.fieldName} onChange={(value) => {this.setState({fieldName: value})}} onSearch={(value) => {handleItemSearch(value)}}/>
+          <WeaInputSearch value={this.state.fieldName} onChange={(value) => {this.setState({fieldName: value})}} onSearch={(value) => {
+            this.setState({fieldSettingSearchValue: value})
+            handleItemSearch(value)
+          }}/>
        </div>
      )
    }
@ -225,13 +238,15 @@ export default class Attendance extends React.Component {
    );

    const handleTabChange = (v) => {
-      const { attendanceStore: { getAttendanceFieldList }} = this.props;
+      const { attendanceStore: { getAttendanceFieldList, getAttendanceList }} = this.props;
      this.setState({
        tabSelectedKey: v
      })

      if(v == "1") {
        getAttendanceFieldList({fieldName: this.state.fieldName})
+      } else if(v == "0") {
+        getAttendanceList({})
      }
    }

@ -289,6 +304,19 @@ export default class Attendance extends React.Component {
      this.setState({itemMangeVisible: false})
    }

+    const handleShowChecked = (value) => {
+      const { attendanceStore: {fieldSettingAttendList, fieldSettingCustomList, setFieldSettingAttendList, setFieldSettingCustomList, searchFieldSettingList }} = this.props;
+      if(value) {
+        let attendList = [...fieldSettingAttendList]
+        let customList = [...fieldSettingCustomList]
+        setFieldSettingAttendList(attendList.filter(item => item.checked == value))
+        setFieldSettingCustomList(customList.filter(item => item.checked == value))
+      } else {
+        searchFieldSettingList(this.state.fieldSettingSearchValue)
+      }
+      
+    }
+
    return (
      <div className="mySalaryBenefitsWrapper">
        <WeaRightMenu
@ -324,10 +352,9 @@ export default class Attendance extends React.Component {
                    }}
                  />
                <WeaTable // table内部做了loading加载处理，页面就不需要再加了
-                  comsWeaTableStore={tableStore} // table store
+                  comsWeaTableStore={attendTableStore} // table store
                  hasOrder={true} // 是否启用排序
                  needScroll={true} // 是否启用table内部列表滚动，将自适应到父级高度
-                  
                  // getColumns={this.getColumns}
                  // onOperatesClick={this.onOperatesClick.bind(this)}
                />
@ -387,10 +414,10 @@ export default class Attendance extends React.Component {
          onCancel={() => { this.setState({modalVisiable: false})}} 
          />

-          <SelectItemModal visible={this.state.selectItemVisible} onCancel={() => this.setState({selectItemVisible: false})}>
+          <SelectItemModal onSave={() => {saveAttendanceFieldSetting()}} onShowChecked={(value) => {handleShowChecked(value)}} onSearch={(value) => {searchFieldSettingList(value)}} visible={this.state.selectItemVisible} onCancel={() => this.setState({selectItemVisible: false})}>
            <div>
-              <SelectItemsWrapper items={items} title={"考勤模块"}/>
-              <SelectItemsWrapper items={items} title={"自定义"}/>
+              <SelectItemsWrapper onChange={(value) => {setFieldSettingAttendList(value)}} items={fieldSettingAttendList} title={"考勤模块"}/>
+              <SelectItemsWrapper onChange={(value) => {setFieldSettingCustomList(value)}} items={fieldSettingCustomList} title={"自定义"}/>
            </div>
          </SelectItemModal>
          
--- a/pc4mobx/hrmSalary/stores/attendanceStore.js
+++ b/pc4mobx/hrmSalary/stores/attendanceStore.js
@ -8,6 +8,7 @@ const { TableStore } = WeaTableNew;

 export class AttendanceStore {
  @observable tableStore = new TableStore(); // new table
+  @observable attendTableStore = new TableStore(); 
  @observable form = new WeaForm(); // nrew 一个form
  @observable condition = []; // 存储后台得到的form数据
  @observable hasRight = true; // 判断用户是有权限查看当前页面： 没有权限渲染无权限页面，有权限渲染数据
@ -18,7 +19,56 @@ export class AttendanceStore {
  @observable slideVisiable = false;
  @observable currentItem = {};
  @observable currentItemOperate = "add";
+  @observable fieldSettingAttendList = []; // 表头考勤列表
+  @observable fieldSettingCustomList = []; // 表头自定义列表

+  requestFeildAttendList = []; // 请求数据
+  requestFeildCustomList = []; // 请求数据
+
+
+  @action
+  searchFieldSettingList = (value) => {
+    if(value != "") {
+      let requestFeildAttendList = [...this.requestFeildAttendList];
+      this.fieldSettingAttendList = requestFeildAttendList.filter(item => item.name.indexOf(value) > -1)
+      let requestFeildCustomList = [...this.requestFeildCustomList]
+      this.fieldSettingCustomList = requestFeildCustomList.filter(item => item.name.indexOf(value) > -1)
+    } else {
+      this.fieldSettingAttendList = [...this.requestFeildAttendList];
+      this.fieldSettingCustomList = [...this.requestFeildCustomList];
+    }
+    
+  }
+
+  @action
+  setFieldSettingAttendList = fieldSettingAttendList => 
+  {
+    this.fieldSettingAttendList = fieldSettingAttendList
+    let requestFeildAttendList = [...this.requestFeildAttendList]
+    requestFeildAttendList.map(item => {
+      this.fieldSettingAttendList.map(inner => {
+        
+        if(inner.id == item.id && inner.checked != item.checked) {
+          item.checked = inner.checked
+        }
+      })
+    })
+    this.requestFeildAttendList = requestFeildAttendList;
+  }
+
+  @action
+  setFieldSettingCustomList = fieldSettingCustomList => 
+  {
+    this.fieldSettingCustomList = fieldSettingCustomList
+    let requestFeildCustomList = [...this.requestFeildCustomList]
+    requestFeildCustomList.map(item => {
+      this.fieldSettingCustomList.map(inner => {
+        if(inner.id == item.id && inner.checked != item.checked) {
+          item.checked = inner.checked
+        }
+      })
+    })
+  }

  @action
  setCurrentItem = currentItem => this.currentItem = currentItem;
@ -38,8 +88,10 @@ export class AttendanceStore {
  // 初始化操作
  @action
  doInit = () => {
-    this.getCondition();
-    this.getTableDatas();
+    // this.getCondition();
+    // this.getTableDatas();
+    this.getAttendanceList({})
+    // this.getAttendanceFieldSettingList({sourceType:'IMPORT'})
  }

  // 获得高级搜索表单数据
@ -161,4 +213,55 @@ export class AttendanceStore {
    })
  }

+  // 考勤数据列表
+  @action
+  getAttendanceList = (params) => {
+    this.loading = true;
+    API.getAttendanceList(params).then(res => {
+      if (res.status) { // 接口请求成功/失败处理
+        this.attendTableStore.getDatas(res.data.datas); // table 请求数据
+      } else {
+        message.error(res.msg || '接口调用失败！')
+      }
+      this.loading = false;
+    })
+  }
+
+  //数据采集-考勤引用-考勤引用字段设置-列表
+  @action
+  getAttendanceFieldSettingList = (params) => {
+    this.loading = true;
+    API.getAttendanceFieldSettingList(params).then(res => {
+      if(res.status) {
+        this.requestFeildAttendList = res.data[0] ? res.data[0].items : []
+        this.fieldSettingAttendList = this.requestFeildAttendList
+        this.requestFeildCustomList = res.data[1] ? res.data[1].items : []
+        this.fieldSettingCustomList = this.requestFeildCustomList;
+      } else {
+        message.error(res.msg || "接口调用失败！")
+      }
+      this.loading = false;
+    })
+
+  }
+
+  //数据采集-考勤引用-考勤引用字段设置-保存
+  @action 
+  saveAttendanceFieldSetting = () => {
+    let attendList = this.requestFeildAttendList.map(item => ({id: item.id, checked: item.checked}))
+    let customList = this.requestFeildCustomList.map(item => ({id: item.id, checked: item.checked}))
+    let request = {
+      sourceType:'IMPORT',
+      currentSettingFields: [...attendList, ...customList]
+    }
+    API.saveAttendanceFieldSetting(request).then(res => {
+      if(res.status) {
+        message.success("保存成功")
+      } else {
+        message.error("保存失败")
+      }
+    })
+  }
+
+
 }