!25 岗位扩展静态页面

Merge pull request !25 from reset/feature/cl

pc4mobx/organization/components/job/Job.js

@@ -1,7 +1,7 @@
 /**
  * @Author: 程亮
  * @Date: 2022-05-26 14:05:59
- * @LastEditTime: 2022-05-30 09:48:35
+ * @LastEditTime: 2022-05-30 17:08:21
  * @Description: 
  * @FilePath: /trunk/src4js/pc4mobx/organization/components/job/job.js
  */
@@ -239,7 +239,7 @@ export default class Job extends React.Component {
             if (c.dataIndex == 'compName') {
                 c.render = function (text, record) {
                     return <a href='javascript:void(0);' onClick={() => {
-                        window.open(`/spa/organization/static/index.html#/main/organization/companyExtend/${record.id}`, "_blank")
+                        window.open(`/spa/organization/static/index.html#/main/organization/jobExtend/${record.id}`, "_blank")
                     }}>{text}</a>
                 }
             }
@@ -368,7 +368,7 @@ export default class Job extends React.Component {
         let tree = (
             <WeaOrgTree ecId={`${this && this.props && this.props.ecId || ''}_WeaOrgTree@dhi1ro`}
                 ref='WeaOrgTree'
-                //dataUrl={"/api/bs/hrmorganization/job/getSearchTree"}
+                dataUrl={"/api/bs/hrmorganization/job/getSearchTree"}
                 loading
                 needSearch
                 noCache={true}

pc4mobx/organization/components/job/JobExtend.js

@@ -0,0 +1,290 @@
+/**
+ * @Author: 程亮
+ * @Date: 2022-05-26 14:07:12
+ * @LastEditTime: 2022-05-30 17:04:50
+ * @Description: 
+ * @FilePath: /trunk/src4js/pc4mobx/organization/components/job/JobExtend.js
+ */
+
+ import { Button, Modal, message, Row, Col, Spin } from 'antd';
+ import isEmpty from 'lodash/isEmpty'
+ import cloneDeep from 'lodash/cloneDeep'
+ import forEach from 'lodash/forEach'
+ import { WeaAlertPage, WeaTools, WeaTableEdit, WeaSearchGroup, WeaRightMenu, WeaFormItem, WeaTab,WeaTop } from 'ecCom'
+ import { WeaSwitch } from 'comsMobx';
+ import { inject, observer } from 'mobx-react';
+ import * as mobx from 'mobx';
+ import { i18n } from '../../public/i18n';
+ 
+ const toJS = mobx.toJS;
+ import '../../style/common.less';
+ 
+ 
+ @inject('jobExtend')
+ @inject('company')
+ @observer
+ export default class JobExtend extends React.Component {
+ 
+   componentDidMount() {
+     this.init();
+   }
+   init = () => {
+     const { jobExtend,company } = this.props;
+     //const {id} = company;
+     let {hash} = window.location;
+     hash = hash.split("?")[0];
+     let id = hash.match("[^/]+(?=/$|$)")[0];
+     jobExtend.init();
+     jobExtend.setId(id);
+     jobExtend.getData();
+   }
+ 
+   getTabChildren = () => {
+     const { jobExtend } = this.props;
+     let { tableInfo, isEditor, tabkey, onRowSelect, selectedRowKeys,detailSelectedKey } = jobExtend;
+     let tabChildren = [];
+     tableInfo = toJS(tableInfo);
+     tableInfo && tableInfo.map((t, i) => {
+       if (detailSelectedKey == i) {
+         tabChildren.push(
+           <WeaTableEdit ecId={`${this && this.props && this.props.ecId || ''}_WeaTableEdit@b813my@${i}`}
+             ref={(ref)=>jobExtend.setPersonalEditTables(ref)}
+             showTitle={isEditor}
+             // title={'列表信息'}
+             //addFirstRow={isEditor}
+             columns={t.tabinfo.columns}
+             datas={t.tabinfo.datas}
+             onChange={this.tableEditChange}
+             selectedRowKeys={toJS(selectedRowKeys)}
+             onRowSelect={keys => onRowSelect(keys)}
+             onBtnsSelect={key => this.onBtnsSelect(key, i)}
+             viewAttr={isEditor ? 2 : 1}
+             getRowSelection={isEditor ? (rowSelection) => {
+               Object.assign(rowSelection, {
+                 getCheckboxProps: record => ({
+                   disabled: record.viewAttr === 1,    // 配置无法勾选的列
+                 })
+               })
+               return rowSelection;
+             } : () => null}
+           />
+         );
+       }
+     })
+     return tabChildren;
+   }
+ 
+   onBtnsSelect = (key, index) => {
+     const {
+       jobExtend
+     } = this.props, {
+       tableInfo,
+       selectedRows,
+       setSelectedRowKeys,
+       selectedRowKeys
+     } = jobExtend;
+ 
+     const datas = tableInfo[index].tabinfo.datas;
+     if (key === 'copy') {
+       tableInfo[index].tabinfo.datas = datas.map((data, i) => {
+         if (!selectedRows[index].includes(i)) {
+           data.viewAttr = 2;
+         }
+         return data
+       })
+     }
+     if (key === 'delete') {
+       tableInfo[index].tabinfo.datas = datas.map((data, i) => {
+         if (selectedRows[index].includes(i)) {
+           data.viewAttr = 1;
+         }
+         return data
+       });
+       setSelectedRowKeys(selectedRowKeys.filter(row => !selectedRows[index].includes(row)))
+     }
+   }
+ 
+   getSearchs = () => {
+     const { jobExtend } = this.props;
+     let { form, conditions, isEditor } = jobExtend;
+     const { isFormInit } = form;
+     let group = [];
+     let tipPosition = 'bottom';
+     window.e9HideFormFieldKeys = [];
+     isFormInit && conditions.forEach((c, i) => {
+       let items = [];
+       c.items.forEach((field, j) => {
+         if (c.hide || (!isEmpty(field.otherParams) && field.otherParams.hide)) {
+           window.e9HideFormFieldKeys.push(field.domkey[0]);
+         } else {
+           items.push({
+             com: (<WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@vh6j67@${j}`}
+               underline={!isEditor}
+               label={`${field.label}`}
+               error={form.getError(field)}
+               tipPosition={tipPosition}
+               labelCol={{ span: `${field.labelcol}` }}
+               wrapperCol={{ span: `${field.fieldcol}` }}>
+               <WeaSwitch ecId={`${this && this.props && this.props.ecId || ''}_WeaSwitch@d4vaqk@${j}`} fieldConfig={field} form={form} />
+             </WeaFormItem>),
+             colSpan: 1
+           });
+         }
+       });
+       group.push(<WeaSearchGroup ecId={`${this && this.props && this.props.ecId || ''}_WeaSearchGroup@x9hby9@${i}`} className={`${isEditor ? 'hrm-center' : ''}`}
+         needTigger={true} hide={c.hide} title={c.title} showGroup={c.defaultshow} items={items} col={2} />)
+     });
+     return group;
+   }
+ 
+   tableEditChange = (data) => {
+     const { jobExtend } = this.props;
+     let { detailSelectedKey = '0', tableInfo } = jobExtend;
+     tableInfo = toJS(tableInfo);
+     let d = cloneDeep(tableInfo);
+     d[Number(detailSelectedKey)].tabinfo.datas = data;
+     jobExtend.updateTableInfo(d);
+   }
+ 
+   getRightMenu = () => {
+     const { jobExtend } = this.props;
+     const { isEditor, buttons } = jobExtend;
+     let arr = [];
+     try {
+       if (buttons.hasEdit) {
+         if (isEditor) {
+           arr = [{
+             icon: <i className='icon-coms-common' />,
+             content: i18n.button.save(),
+             key: 'save',
+             onClick: key => {
+               this.saveEditCard();
+             }
+           }, {
+             icon: <i className='icon-coms-go-back' />,
+             content: i18n.button.back(),
+             key: 'back',
+             onClick: key => {
+               this.backCard();
+             }
+           }]
+         } else {
+           arr = [{
+             icon: <i className='icon-coms-edit' />,
+             content: i18n.button.modify(),
+             key: 'editCard',
+             onClick: key => {
+               this.editCard();
+             }
+           }
+           ]
+         }
+       }
+     } catch (e) { }
+     return arr;
+   }
+ 
+   getTopButtons = () => {
+     const { jobExtend } = this.props;
+     const { isEditor, buttons } = jobExtend;
+     const save = <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@pkes6y`} type="primary" onClick={this.saveEditCard} >{i18n.button.save()}</Button>;
+     const back = <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@pl1fw8`} type="primary" onClick={this.backCard} >{i18n.button.back()}</Button>;
+     const edit = <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@vkeda5`} type="primary" onClick={this.editCard} >{i18n.button.modify()}</Button>;
+     const btns = [];
+     try {
+       if (isEditor) {
+         if (buttons.hasSave) {
+           btns.push(save);
+           btns.push(back);
+         }
+       } else {
+         if (buttons.hasEdit) {
+           btns.push(edit);
+         }
+       }
+     } catch (e) { }
+     return btns;
+   }
+ 
+   editCard = () => {
+     const { jobExtend } = this.props;
+     jobExtend.edit();
+   }
+ 
+   saveEditCard = () => {
+     const { jobExtend } = this.props;
+     jobExtend.save();
+   }
+ 
+   backCard = () => {
+     this.init();
+   }
+ 
+   changeData(key) {
+     const {
+       jobExtend
+     } = this.props;
+     jobExtend.changeData(key);
+ }
+ 
+   render() {
+     const { jobExtend } = this.props;
+     const { loading, tabkey, tabInfo,topTab,selectedKey,date,detailSelectedKey } = jobExtend;
+ 
+     // if(!hasRight && !loading){
+     //   return (
+     //     <WeaAlertPage ecId={`${this && this.props && this.props.ecId || ''}_WeaAlertPage@387kx5`}>
+     //       <div style={{ color: '#000' }}>{i18n.message.authFailed()}</div>
+     //     </WeaAlertPage>
+     //   )
+     // }
+ 
+    try {
+       return (
+         <div className='hrm-my-cardInfo' style={{ height: '100%', position: 'relative' }}>
+           <WeaRightMenu ecId={`${this && this.props && this.props.ecId || ''}_WeaRightMenu@k6oc4u`}
+             datas={this.getRightMenu()}
+           >
+             <WeaTop ecId={`${this && this.props && this.props.ecId || ''}_WeaTop@bj98s7`}
+               loading={true}
+               buttons={this.getTopButtons()}
+               showDropIcon={true}
+               dropMenuDatas={this.getRightMenu()}
+             >
+               <WeaTab ecId={`${this && this.props && this.props.ecId || ''}_WeaTab@9c3zts`}
+                 datas={topTab}
+                 keyParam="viewCondition" //主键
+                 selectedKey={selectedKey}
+                 onChange={this.changeData.bind(this)}
+               />
+               <Spin ecId={`${this && this.props && this.props.ecId || ''}_Spin@4fj4z2`} spinning={loading}>
+                 {this.getSearchs()}
+                 {
+                   !isEmpty(tabInfo) && <div className='hrm-my-cardInfo_detial_tabs'>
+                     <WeaTab ecId={`${this && this.props && this.props.ecId || ''}_WeaTab@vjrq63`}
+                       type='card'
+                       keyParam='key'
+                       datas={toJS(tabInfo)}
+                       selectedKey={detailSelectedKey}
+                       onChange={v => {
+                         jobExtend.updateDetailSelectedKey(v);
+                       }}
+                     />
+                     {this.getTabChildren()}
+                   </div>
+                 }
+               </Spin>
+             </WeaTop>
+           </WeaRightMenu>
+ 
+         </div>
+       )
+     } catch (e) {
+       return <WeaAlertPage ecId={`${this && this.props && this.props.ecId || ''}_WeaAlertPage@h1wgnu`}>
+         <div style={{ color: '#000' }}>{i18n.message.authFailed()}</div>
+       </WeaAlertPage>
+     }
+   }
+ }
+ 
+ 

pc4mobx/organization/index.js

@@ -22,7 +22,8 @@ import Company from "./components/company/company";
 import DepartmentManage from "./components/deptment";
 import StaffScheme from "./components/staff/StaffScheme";
 import Staff from "./components/staff/Staff";
-import Job from "./components/job/job";
+import Job from "./components/job/Job";
+import JobExtend from "./components/job/JobExtend";
 
 import stores from "./stores";
 import "./style/index";
@@ -70,6 +71,7 @@ const Routes = (
     <Route key="staffscheme" path="staffscheme" component={StaffScheme} />
     <Route key="staff" path="staff" component={Staff} />
     <Route key="job" path="job" component={Job} />
+    <Route key="jobExtend" path="jobExtend/:id" component={JobExtend} />
   </Route>
 );
 

pc4mobx/organization/stores/index.js

@@ -7,10 +7,11 @@ import { OfficeManageStore } from "./officeManage";
 import { SequenceStore } from "./sequence";
 import { GroupStore } from "./group";
 import {CompanyExtendStore} from "./companyextend";
-import {CompanyStore} from "./company"
+import {CompanyStore} from "./company";
 import {StaffSchemeStore} from "./staffscheme";
 import {StaffStore} from "./staff";
-import {JobStore} from "./job"
+import {JobStore} from "./job";
+import {JobExtendStore} from "./jobextend";
 
 module.exports = {
   simpleOrgStore: new SimpleOrgStore(),
@@ -25,5 +26,6 @@ module.exports = {
   company: new CompanyStore(),
   staffScheme: new StaffSchemeStore(),
   staff: new StaffStore(),
-  job: new JobStore()
+  job: new JobStore(),
+  jobExtend: new JobExtendStore(),
 };

pc4mobx/organization/stores/jobextend.js

@@ -0,0 +1,239 @@
+import { observable, action, toJS } from "mobx";
+import { WeaForm } from "comsMobx";
+import isEmpty from 'lodash/isEmpty'
+import { WeaTableNew } from "comsMobx";
+import { Modal, message } from "antd";
+import { i18n } from "../public/i18n";
+import forEach from 'lodash/forEach'
+import * as Api from '../apis/job'; // 引入API接口文件
+
+
+export class JobExtendStore {
+  @observable form = new WeaForm();
+  @observable tableInfo = []
+  @observable conditions = [];
+  @observable isEditor = false;
+  @observable isNew = true;
+  @observable loading = true;
+  @observable tabInfo = [];
+  @observable selectedKey = '0';
+  @observable detailSelectedKey = '0';
+  @observable topTab = [];
+  @observable buttons = {};
+  @observable id = ''; //岗位id
+  @observable date = '';
+  @observable personalEditTables;
+  @observable tabkey = '0'
+
+
+  @observable selectedRowKeys = [];
+  @observable selectedRows = [];
+
+  @action onRowSelect = (keys) => {
+    this.setSelectedRowKeys(keys);
+  }
+
+  @action setSelectedRowKeys = (keys) => {
+    this.selectedRowKeys = keys;
+  }
+
+
+  @action
+  edit = () => {
+    this.isEditor = true;
+    this.getData();
+    this.getTabInfo();
+    //this.tabkey = '0';
+    this.detailSelectedKey = '0'
+  }
+
+  init = () => {
+    //this.tabkey = '0';
+    this.detailSelectedKey = '0'
+    this.isEditor = false;
+  }
+
+  save = () => {
+    if (this.loading)
+      return;
+    this.loading = true;
+    this.form.validateForm().then(f => {
+      if (f.isValid) {
+        if (this.personalEditTables) {
+          const targetDatas = this.tableInfo[this.detailSelectedKey].tabinfo.datas,
+            isPass = (targetDatas.length > 0) ? this.personalEditTables.refs.edit.doRequiredCheck().pass : true
+          if (isPass) {
+            this.editResource()
+          } else {
+            this.loading = false;
+          }
+        } else {
+          this.editResource();
+        }
+      } else {
+        f.showErrors();
+        this.setDate(new Date());
+        this.loading = false;
+      }
+    })
+  }
+
+  editResource = () => {
+    let pDatas = this.form.getFormParams();
+    Api.editResource({ ...{
+        id: this.id
+      },
+      ...pDatas,
+      ...this.getTableEditParams()
+    }).then(data => {
+      if (data.code == 200) {
+        message.success(i18n.message.saveSuccess());
+        this.init();
+        this.getData();
+        this.selectedRowKeys = [];
+      } else {
+        message.warning(data.message);
+      }
+      this.loading = false;
+    }, error => {
+      message.warning(error.message);
+      this.loading = false;
+    })
+  }
+
+  getTableEditParams = () => {
+    const params = {};
+    this.tableInfo && this.tableInfo.forEach(t => {
+      t.tabinfo.datas = t.tabinfo.datas || [];
+      params[t.tabinfo.rownum] = t.tabinfo.datas.length;
+      t.tabinfo && t.tabinfo.datas && t.tabinfo.datas.forEach((item, index) => {
+        !isEmpty(item) && forEach(item, (value, key) => {
+          Object.assign(params, {
+            [`${key}_${index}`]: value
+          });
+        })
+      })
+    })
+    return params
+  }
+
+
+
+  getData = () => {
+    this.setLoading(true);
+    let params = {
+      viewAttr: this.isEditor ? 2 : 1,
+      id: this.id,
+      viewCondition:this.selectedKey
+    }
+    Api.getCompanyExtendForm(params).then((res) => {
+      if (res.code === 200) {
+        res.data.result.conditions && this.form.initFormFields(res.data.result.conditions);
+        res.data.result.conditions && this.setConditions(res.data.result.conditions);
+        this.tableInfo = this.handleTable(res.data.result.tables);
+        this.getTabInfo();
+        res.data.result.buttons && this.setButtons(res.data.result.buttons);
+        res.data.result.tabInfo && this.setTopTab(res.data.result.tabInfo);
+        this.isEditor && this.getSelectedRows();
+        this.setLoading(false);
+
+      } else {
+        message.warning(res.msg);
+      }
+    }, error => {
+      message.warning(error.msg);
+    })
+
+   
+
+
+  }
+
+  handleTable = (datas) => {
+    return datas && datas.map(data => {
+      const { tabinfo: { columns } } = data;
+      const length = columns.length;
+      columns.map(c => {
+        c.width = `${95 / length}%`
+      })
+      return data
+    })
+  }
+
+  getTabInfo = () => {
+    this.tabInfo = [];
+    this.tableInfo && this.tableInfo.forEach((c, idx) => {
+      if (!c.hide) {
+        this.tabInfo.push({
+          key: `${idx}`,
+          title: c.tabname,
+        })
+      }
+    })
+    //if (!isEmpty(this.tabInfo)) this.tabkey = this.tabInfo[0].key;
+    if (!isEmpty(this.tabInfo)) this.detailSelectedKey = this.tabInfo[0].key;
+  }
+
+  setLoading(val) {
+    this.loading = val;
+  }
+
+
+  updateTabKey = (key) => {
+    this.tabKey = key;
+  }
+
+  updateDetailSelectedKey =(key) => {
+    this.detailSelectedKey = key;
+  }
+
+  updateTableInfo = (data) => {
+    this.tableInfo = data
+  }
+
+  setSelectedKey = (key) => {
+    this.selectedKey = key;
+  }
+
+  getSelectedRows = () => {
+    const selectedRows = [];
+    this.tableInfo.forEach(t => {
+      const singleTableRows = [];
+      t.tabinfo.datas.forEach((data, i) => {
+        if (data.viewAttr === 1) {
+          singleTableRows.push(i);
+        }
+      });
+      selectedRows.push(singleTableRows);
+    })
+    this.selectedRows = selectedRows;
+  }
+
+
+  setTopTab(topTab) {
+    this.topTab = topTab;
+  }
+
+  changeData(key) {
+    this.setSelectedKey(key);
+    this.getData();
+  }
+
+  setId(id) {
+    this.id = id;
+  }
+
+  setPersonalEditTables = (ref) => {
+    this.personalEditTables = ref;
+  }
+
+  setConditions(conditions) {
+    this.conditions = conditions;
+  }
+
+  setButtons(buttons) {
+    this.buttons = buttons;
+  }
+
+
+}