feat:员工管理增加筛选项

b0299f20 · wufan · 2b5405c1 · b0299f20 · b0299f20 · b0299f20
Commit b0299f20 authored Nov 26, 2020 by wufan
10 changed files
--- a/src/common/less/icon-font.less
+++ b/src/common/less/icon-font.less
+@font-face {
+    font-family: 'iconfont';  /* project id 81196 */
+    src: url('//at.alicdn.com/t/font_81196_rurla8utrha.eot');
+    src: url('//at.alicdn.com/t/font_81196_rurla8utrha.eot?#iefix') format('embedded-opentype'),
+    url('//at.alicdn.com/t/font_81196_rurla8utrha.woff2') format('woff2'),
+    url('//at.alicdn.com/t/font_81196_rurla8utrha.woff') format('woff'),
+    url('//at.alicdn.com/t/font_81196_rurla8utrha.ttf') format('truetype'),
+    url('//at.alicdn.com/t/font_81196_rurla8utrha.svg#iconfont') format('svg');
+  }
+  .iconfont{
+    font-family:"iconfont" !important;
+    font-size:16px;
+    font-style:normal;
+}
\ No newline at end of file
--- a/src/common/less/index.less
+++ b/src/common/less/index.less
 @import './normalize.less';
 @import './antd-override.less';
 @import './variable.less';
+@import './icon-font.less';
 #root{
  height:100%;

--- a/src/components/CheckBox.less
+++ b/src/components/CheckBox.less
+@import '../core/variables.less';
+.xm-checkbox {
+  cursor: pointer;
+  font-size: 12px;
+  display: inline-block;
+  &:hover {
+    .xm-checkbox-inner {
+      border-color: @primaryDark;
+    }
+  }
+  .xm-checkbox-input {
+    white-space: nowrap;
+    cursor: pointer;
+    outline: none;
+    display: inline-block;
+    line-height: 1;
+    position: relative;
+    vertical-align: text-bottom;
+  }
+  input {
+    position: absolute;
+    left: 0;
+    z-index: 1;
+    cursor: pointer;
+    opacity: 0;
+    top: 0;
+    bottom: 0;
+    right: 0;
+    width: 100%;
+    height: 100%;
+  }
+  .xm-checkbox-inner {
+    position: relative;
+    top: 0;
+    left: 0;
+    display: block;
+    width: 14px;
+    height: 14px;
+    border: 1px solid #d9d9d9;
+    border-radius: 2px;
+    background-color: #fff;
+    transition: all .3s;
+    margin-left: 5px;
+    &:after {
+      transform: rotate(45deg) scale(0);
+      position: absolute;
+      left: 4px;
+      top: 1px;
+      display: table;
+      width: 5px;
+      height: 8px;
+      border: 2px solid #fff;
+      border-top: 0;
+      border-left: 0;
+      content: ' ';
+      transition: all .1s cubic-bezier(.71, -.46, .88, .6);
+    }
+  }
+  .xm-checkbox-text {
+    margin-left: 5px;
+  }
+}
+.xm-checkbox-checked {
+  .xm-checkbox-inner {
+    background-color: @primaryDark;
+    border-color: @primaryDark;
+  }
+  .xm-checkbox-inner:after {
+    transform: rotate(45deg) scale(1);
+    position: absolute;
+    left: 4px;
+    top: 1px;
+    display: table;
+    width: 5px;
+    height: 8px;
+    border: 2px solid #fff;
+    border-top: 0;
+    border-left: 0;
+    content: ' ';
+    transition: all .2s ease-out .1s;
+  }
+}
\ No newline at end of file
--- a/src/components/CheckBox.tsx
+++ b/src/components/CheckBox.tsx
+/*
+ * @Author: sunbingqing
+ * @Date: 2019-07-24 17:21:00
+ * @Last Modified by: 孙冰清
+ * @Last Modified time: 2019-07-25 16:50:53
+ */
+import React from 'react';
+import {Checkbox} from 'antd';
+import './CheckBox.less';
+interface CheckBoxProps {
+  defaultChecked?: boolean;
+  className?: string;
+  id?: string;
+  name?: string;
+  value?: any;
+  disabled?: boolean;
+  onChange?: (value: any) => void;
+  children?: any;
+  text?: string;
+}
+const CheckBox = (props: CheckBoxProps) => {
+  const { defaultChecked, className, id, name, value, disabled, onChange, children, text} = props;
+  const cls = className || '';
+  return(
+    <Checkbox
+        id={id}
+        name={name}
+        className={cls}
+        value={value}
+        checked={defaultChecked}
+        disabled={disabled}
+        onChange={(e: any) => {
+        onChange && onChange(e);
+      }}>{children ? children : text}</Checkbox>
+  );
+};
+export default CheckBox;
--- a/src/components/SearchBar.less
+++ b/src/components/SearchBar.less
+@import '../core/variables.less';
+@import '../core/mixins.less';
+.xm-search-bar {
+  display: flex;
+  .ant-select-selection-selected-value {
+    margin-left: 5px !important;
+    margin-right: 5px;
+  }
+  .ant-input {
+    padding: 0 12px !important;
+  }
+  .ant-input-group-wrapper{
+    width: auto;
+    .flex(1)
+  }
+  .ant-input-group > .ant-input:first-child, .ant-input-group-addon:first-child {
+    border-bottom-right-radius: 4px;
+    border-top-right-radius: 4px;
+  }
+  .label{
+    font-size:14px;
+    font-family:PingFangSC-Regular;
+    font-weight:400;
+    color:rgba(102,102,102,1);
+    line-height: 32px;
+    margin-right: 8px;
+  }
+  .ant-input-group-addon{
+    position: absolute;
+    top: 0px;
+    right: 0px;
+    height: 22px;
+    width: 15px;
+    line-height: 1.5;
+    /* padding: 0px; */
+    padding-top: 5px;
+    background: transparent;
+    border: none;
+    z-index: 2;
+    border-radius: 4px;
+  }
+  .ant-btn {
+    padding: 0 5px;
+    i {
+      font-size: 16px;
+    }
+  }
+}
+.xm-search-bar-margin {
+  margin-left:20px !important;
+}
\ No newline at end of file
--- a/src/components/SearchBar.tsx
+++ b/src/components/SearchBar.tsx
+/*
+ * @Author: sunbingqing
+ * @Date: 2019-07-24 17:21:00
+ * @Last Modified by: 吴文洁
+ * @Last Modified time: 2020-02-25 10:23:49
+ */
+import React, { useState, useEffect } from 'react';
+import { Input } from 'antd';
+import _ from 'underscore';
+import './SearchBar.less';
+import Bus from '../core/tbus';
+interface SearchBarProps {
+  value?: string;
+  type?: string;
+  className?: string;
+  label?: string;
+  id?: string;
+  placeholder?: string;
+  options?: any;
+  style?: any,
+  onChangeText?: (value: any) => void;
+  onSearch?: (value: any) => void;
+}
+const SearchBar = (props: SearchBarProps) => {
+  const { type, className, label, id, placeholder, options, onChangeText, onSearch, style } = props;
+  const cls = `xm-search-bar xm-search-bar-${type || ""} ${className || ""}`;
+  const plh = placeholder || `请输入${_.values(options).join('/')}`;
+  const defprops = {
+    id: ''
+  };
+  if (id) { defprops.id = id; }
+  const [ value, setValue] = useState(props.value);
+  useEffect(() => {
+    Bus.bind('resetSearchBar', () => {
+      setValue('');
+    });
+  }, []);
+  function _handleOnChangeText(e: any): any {
+    setValue(e.target.value);
+    onChangeText && onChangeText(e.target.value);
+  }
+  function _onPressEnter() {
+    onSearch && onSearch(value);
+  }
+  function _renderAddonAfter() {
+    return (
+      <span className="icon iconfont" onClick={_onPressEnter}>&#xe6ba;</span>
+    );
+  }
+  return (
+    <div className={cls} style={style}>
+      {
+        !!label && <div className='label'> {label}:</div>
+      }
+      <Input
+        {...defprops}
+        name="value"
+        placeholder={plh}
+        value={value}
+        onChange={_handleOnChangeText}
+        addonAfter={_renderAddonAfter()}
+        onPressEnter={_onPressEnter}
+      />
+    </div>
+  );
+};
+export default SearchBar;
--- a/src/components/index.js
+++ b/src/components/index.js
+/*
+ * @Author: wufan 
+ * @Date: 2020-11-26 14:48:57 
+ * @Last Modified by: mikey.zhaopeng
+ * @Last Modified time: 2020-11-26 14:52:02
+ */
+import SearchBar from './SearchBar.tsx';
+import PageControl from './PageControl.tsx';
+import CheckBox from './CheckBox.tsx';
+export {
+    SearchBar,
+    PageControl,
+    CheckBox,
+  }
\ No newline at end of file
--- a/src/core/tbus.ts
+++ b/src/core/tbus.ts
+import Bus from './bus';
+const tBus: any = Bus;
+export default tBus;
--- a/src/domains/basic-domain/constants.ts
+++ b/src/domains/basic-domain/constants.ts
@@ -10,7 +10,7 @@ import { MapInterface } from '@/domains/basic-domain/interface'
 // 默认是 dev 环境
 const ENV: string = process.env.DEPLOY_ENV || 'dev';
+console.log("process.env.DEPLOY_ENV",process)
 const BASIC_HOST_MAP: MapInterface = {
  dev: 'https://dev-heimdall.xiaomai5.com/',
  dev1: 'https://dev1-heimdall.xiaomai5.com/',

--- a/src/modules/store-manege/EmployeesManagePage.tsx
+++ b/src/modules/store-manege/EmployeesManagePage.tsx
@@ -2,19 +2,23 @@
 * @Author: wufan
 * @Date: 2020-07-09 14:03:09
 * @Last Modified by: mikey.zhaopeng
- * @Last Modified time: 2020-11-25 18:23:40
+ * @Last Modified time: 2020-11-26 14:52:43
 * 店铺管理-员工管理
 */
 import React, { useEffect, useState } from "react";
 import { withRouter } from "react-router-dom";
 import _ from "underscore";
 import PageControl from "@/components/PageControl";
-import { Button, Table, Tooltip, Modal, message, Row, Col } from "antd";
+import SearchBar from "@/components/SearchBar";
+import {CheckBox} from "@/components";
+import { Button, Table, Tooltip, Modal, message, Row, Col, Input } from "antd";
 import { storeRoleEnum } from "@/domains/store-domain/constants";
 import StoreService from "@/domains/store-domain/storeService";
 import "./EmployeesManagePage.less";
 const { confirm } = Modal;
+const { Search } = Input;
 declare var window: any;
 function EmployeesManagePage() {
@@ -28,6 +32,9 @@ function EmployeesManagePage() {
  const [query, setQuery] = useState({
    current: 0,
    size: 10,
+    name: "",
+    phone: "",
+    identity: "",
    instId: "1837447" || window.currentUserInstInfo.instId,
  });
  const [total, setTotal] = useState(0);
@@ -110,15 +117,81 @@ function EmployeesManagePage() {
  function handleToAddEmployee() {}
+  function handleQuery(name: string, value: any) {
+    const _query = _.clone(query);
+    // _query[name] = value;
+    setQuery(_query);
+  }
  return (
    <div className=" page coupon-list-page">
      <div className="page-content">
        <div className="content-header">员工管理</div>
        <div className="box">
          <div className="box-header">
-          {/* <Row type="flex" justify="space-between" align="top">
+            {/* <Row justify="space-between" align="top">
-            <Col></Col>
+              <Col span={8}>
+                <span className="label-text">搜索员工：</span>
+                <SearchBar
+                  label="搜索员工"
+                  type="select"
+                  options={{ name: "员工姓名", phone: "手机号" }}
+                  placeholder="请输入员工姓名/手机号"
+                  value={query.name}
+                  onSearch={(value: any) => {
+                    handleQuery("name", value);
+                  }}
+                />
+              </Col>
+              <Col span={8}>
+              </Col>
            </Row> */}
+            <div
+              style={{
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "space-between",
+                padding: "15px 0 10px",
+              }}
+            >
+              <div style={{ flex: 1 }}>
+                搜索员工：
+                <Search
+                  style={{
+                    width: 300,
+                    marginRight: 40,
+                  }}
+                  placeholder="搜索员工姓名/手机号"
+                  onChange={(event) => {
+                    const val = event.target.value;
+                    const _query = { ...query };
+                    _query.name = val;
+                    setQuery(_query);
+                  }}
+                  onSearch={() => getEmployeeList()}
+                />
+              </div>
+              <div style={{ flex: 1 }}>
+              身份：
+              <CheckBox
+                text="普通讲师"
+                onChange={(e:any) => {
+                  const { checked } = e.target;
+                  ;
+                }}
+              />
+              <CheckBox
+                text="管理员"
+                onChange={(e:any) => {
+                  const { checked } = e.target;
+                }}
+              />
+            </div>
+            </div>
            <Button
              onClick={() => {
                handleToAddEmployee();