feat:处理用户解绑

src/data-source/plan/request-apis.ts

@@ -2,7 +2,7 @@
  * @Author: zhangleyuan
  * @Date: 2021-02-21 16:08:38
  * @LastEditors: zhangleyuan
- * @LastEditTime: 2021-03-04 13:51:35
+ * @LastEditTime: 2021-03-04 19:42:21
  * @Description: 描述一下
  * @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
  */
@@ -35,3 +35,9 @@ export function getPlanCustomerRecordPage(params: object) {
 export function getPlanCustomerDetail(params: object) {
   return Service.Hades("public/hades/getPlanCustomerDetail", params);
 }
+export function getPlanCustomerAboutUser(params: object) {
+  return Service.Hades("public/hades/getPlanCustomerAboutUser", params);
+}
+export function removePlanCustomer(params: object) {
+  return Service.Hades("public/hades/removePlanCustomer", params);
+}

src/domains/plan-domain/planService.ts

@@ -2,11 +2,11 @@
  * @Author: zhangleyuan
  * @Date: 2021-02-21 16:15:38
  * @LastEditors: zhangleyuan
- * @LastEditTime: 2021-03-04 13:51:01
+ * @LastEditTime: 2021-03-04 19:42:52
  * @Description: 描述一下
  * @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
  */
-import {getTrainingPlanPage,createTrainingPlan,updateStateTrainingPlan,getTrainingPlanDetail,updateTrainingPlan,deleteTrainingPlan,getPlanUserRecordPage,getPlanCustomerRecordPage,getPlanCustomerDetail} from '@/data-source/plan/request-apis';
+import {getTrainingPlanPage,createTrainingPlan,updateStateTrainingPlan,getTrainingPlanDetail,updateTrainingPlan,deleteTrainingPlan,getPlanUserRecordPage,getPlanCustomerRecordPage,getPlanCustomerDetail,getPlanCustomerAboutUser,removePlanCustomer} from '@/data-source/plan/request-apis';
 export default class PlanService {
     // 获取员工列表 
     static getTrainingPlanPage(params: any) {
@@ -36,4 +36,10 @@ export default class PlanService {
     static getPlanCustomerDetail(params: any) {
       return getPlanCustomerDetail(params);
     } 
+    static getPlanCustomerAboutUser(params: any) {
+      return getPlanCustomerAboutUser(params);
+    }
+    static removePlanCustomer(params: any) {
+      return removePlanCustomer(params);
+    }
 }
\ No newline at end of file

src/modules/plan-manage/components/EmployeeShareData.jsx

@@ -225,6 +225,7 @@ class EmployeeShareData extends React.Component {
                   columns={this.parselumns()}
                   pagination={false}
                   onChange={this.handleChangeTable}
+                  bordered
               />
               {dataSource.length >0 &&
                 <div className="box-footer">

src/modules/plan-manage/components/UserLearningData.jsx

@@ -5,6 +5,7 @@ import { PageControl } from "@/components";
 import UserLearningDataFilter from './UserLearningDataFilter';
 import PlanService from '@/domains/plan-domain/planService';
 import UserLearnDetailModal from "../modal/UserLearnDetailModal";
+import UnbundEmployeeModal from '../modal/UnbundEmployeeModal'
 import User from '@/common/js/user';
 import './UserLearningData.less';
 const { Search } = Input;
@@ -33,6 +34,7 @@ class UserLearningData extends React.Component {
       },
       totalCount:0,
       userLearnDetailModalSHow:false,
+      unbundEmployeeModalVisible:false
     }
   }
   componentDidMount(){
@@ -103,6 +105,17 @@ class UserLearningData extends React.Component {
       userLearnDetailModalSHow:false,
     })
   }
+  UnbundEmployee = (record)=>{
+    this.setState({
+      unbundEmployeeModalVisible:true,
+      storeCustomerId:record.storeCustomerId
+    })
+  }
+  handleCloseUnbundEmployeeModal = ()=>{
+    this.setState({
+      unbundEmployeeModalVisible:false,
+    })
+  }
   // 请求表头
   parselumns = () => {
     const columns = [
@@ -200,7 +213,7 @@ class UserLearningData extends React.Component {
             <div className="operate-area">
               <span className="operate-item" onClick={()=>this.watchDetail(record)}>学习详情</span>
               <span className="split">|</span>
-              <span className="operate-item">解绑</span>
+              <span className="operate-item" onClick={()=>{this.UnbundEmployee(record)}}>解绑</span>
             </div>
           )
         }
@@ -209,7 +222,7 @@ class UserLearningData extends React.Component {
     return columns;
   }
   render() {
-    const { dataSource,query,size,totalCount,userLearnDetailModalSHow,storeCustomerId,planId} = this.state;
+    const { dataSource,query,size,totalCount,userLearnDetailModalSHow,storeCustomerId,planId,unbundEmployeeModalVisible} = this.state;
     return (
       <div className="user-learning-data">
         <div className="search-container">
@@ -223,6 +236,7 @@ class UserLearningData extends React.Component {
                   pagination={false}
                   className="user-learning-table"
                   onChange={this.handleChangeTable}
+                  bordered
               />
               {dataSource.length >0 &&
                 <div className="box-footer">
@@ -242,9 +256,16 @@ class UserLearningData extends React.Component {
               }
         </div>
         { userLearnDetailModalSHow &&
-           <UserLearnDetailModal storeCustomerId={storeCustomerId} planId={planId} visible={userLearnDetailModalSHow} onClose={this.closeUserLearnDetailModal}/>
+          <UserLearnDetailModal storeCustomerId={storeCustomerId} planId={planId} visible={userLearnDetailModalSHow} onClose={this.closeUserLearnDetailModal}/>
+        }
+        {unbundEmployeeModalVisible && 
+          <UnbundEmployeeModal
+            visible={unbundEmployeeModalVisible}
+            onClose={this.handleCloseUnbundEmployeeModal}
+            storeCustomerId={storeCustomerId}
+          />
         }
-       
+      
       </div>
     )
   }

src/modules/plan-manage/modal/UnbundEmployeeModal.jsx

+import React from 'react';
+import {Table, Modal,Input} from 'antd';
+import { PageControl } from "@/components";
+import PlanService from '@/domains/plan-domain/planService'
+import User from '@/common/js/user'
+import './UnbundEmployeeModal.less';
+import _ from "underscore";
+const { Search } = Input;
+class UnbundEmployeeModal extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      dataSource:[],
+      selectOperatorList:[]
+    };
+  }
+  componentDidMount() {
+    this.handleFetchDataList();
+  }
+ 
+   // 获取绑定员工列表
+  handleFetchDataList = () => {
+    const params ={
+        planId: getParameterByName("id"),
+        storeCustomerId: this.props.storeCustomerId,
+        storeId:this.props.storeId
+    }
+    PlanService.getPlanCustomerAboutUser(params).then((res) => {
+      const { result = {} } = res ;
+      this.setState({
+        dataSource: result,
+      });
+    });
+  }
+
+  // 请求表头
+  parseColumns = () => {
+    const columns = [
+      {
+        title: '员工',
+        key: 'storeUserName',
+        dataIndex: 'storeUserName'
+      },
+      {
+        title: '角色',
+        key: '',
+        dataIndex: ''
+      },
+      {
+        title: '手机号',
+        key: 'storeUserPhone',
+        dataIndex: 'storeUserPhone'
+      }
+    ];
+    return columns;
+  }
+  selectOperator = (record,selected) =>{
+    // console.log('selected',selected);
+    this.setState({selectOperatorList:record});
+  }
+  confirmUnbund = ()=>{
+    
+    const { selectOperatorList } = this.state;
+
+    console.log('selectOperatorList',selectOperatorList);
+
+    const params = {
+      planId:getParameterByName("id"),
+      removeUserId:_.pluck(selectOperatorList, 'storeUserId'),
+      storeCustomerId:this.props.storeCustomerId,
+      storeId:User.getStoreId(),
+      storeUserId:User.getStoreUserId()
+    }
+    PlanService.removePlanCustomer(params).then((res) => {
+      message.success('解绑成功');
+      this.props.onClose();
+    });
+  }
+  render() {
+    const { size,dataSource,totalCount,query,selectOperatorList} = this.state;
+    const { visible } = this.props;
+    return (
+        <Modal
+          title="选择需解绑的员工"
+          onCancel={this.props.onClose}
+          maskClosable={false}
+          visible={visible}
+          className="select-operator-modal"
+          closable={true}
+          width={800}
+          onOk={() => {this.confirmUnbund()}} 
+          closeIcon={<span className="icon iconfont modal-close-icon">&#xe6ef;</span>} 
+        >
+          <div>
+            <Table
+              rowKey={record => record.storeUserId}
+              dataSource={dataSource}
+              columns={this.parseColumns()}
+              pagination={false}
+              bordered
+              rowSelection={{
+                type: 'checkbox',
+                onSelect: (record, selected) => {
+                  this.selectOperator(record, selected)
+                },
+                onSelectAll: (selected, _selectedRows, changeRows) => {
+                  this.setState({selectOperatorList:selected});
+                }
+              }}
+            />
+          </div>
+        </Modal>
+    )
+  }
+}
+
+export default UnbundEmployeeModal;
\ No newline at end of file