dev01 2 years ago
parent
commit
1acf355171

+ 111 - 94
js/component/common/cascaders/index.jsx

@@ -1,32 +1,7 @@
 import React, { Component } from "react";
 import { Button, message, Modal, Spin, Table, Checkbox, Collapse, } from "antd";
 import $ from "jquery/src/ajax";
-
-const params = {
-  "authTree": [
-    {
-      "authName": "商场数据分析",
-      "authId": 1,
-      "children": [{
-        "authName": "数据概览",
-        "authId": 3,
-      },
-      {
-        "authName": "数据概览2",
-        "authId": 4,
-      }]
-    },
-    {
-      "authName": "商场数据分析2",
-      "authId": 2,
-      "children": [{
-        "authName": "数据概览3",
-        "authId": 5,
-      }]
-    }
-  ],
-  "checkedList": [6, 7, 11]
-}
+import "./index.less";
 
 class Cascaders extends Component {
   constructor(props) {
@@ -37,21 +12,19 @@ class Cascaders extends Component {
       checkedList: [],
     };
     this.itemHandle = this.itemHandle.bind(this);
+    this.onSelect = this.onSelect.bind(this);
+    this.onOks = this.onOks.bind(this);
+    this.onCancel = this.onCancel.bind(this);
   }
 
 
   componentDidMount() {
     // 后端返回的数据,转成前端要用的数据保存页面使用
-    const authTree = params.authTree;
-    const checkedList = params.checkedList;
-    this.setState({
-      authTree,
-      checkedList,
-    }, () => {
-      this.authTreeFun();
-    });
+    // const authTree = [...params.authTree];
+    // this.setState({
+    //   authTree
+    // })
   }
-
   // 转成前端要用的数据
   authTreeFun() {
     const checkedList = this.state.checkedList;
@@ -59,53 +32,71 @@ class Cascaders extends Component {
       this.itemHandle(item);
     });
   }
+  // 点击选择部门
+  onSelect() {
+    const list = JSON.parse(localStorage.getItem("departmentData"))
+    const authTree = list
+    this.setState({
+      visible: true,
+      authTree: authTree,
+    }, () => {
+      this.authTreeFun();
+    })
+  }
 
-  // 代码三级联动核心就在这里
-  itemHandle(authId, checked = true) {
-    const authTree = [...this.state.authTree];
+  onOks() {
+    const { authTree, checkedList } = this.state
+    const { id = "id", children = "children", onSel } = this.props
+    let list = []
+    authTree.forEach((its) => {
+      if (its[children]) {
+        its[children].forEach((itl) => {
+          if (itl.checked) {
+            list.push(itl[id])
+          }
+        });
+      }
+    })
+    this.setState({
+      checkedList: list,
+      visible: false,
+    })
+    onSel(checkedList)
+  }
+
+  onCancel() {
+    this.setState({
+      visible: false,
+    })
+  }
 
+  // 代码三级联动核心就在这里
+  itemHandle(iD, checked = true) {
+    const { id = "id", children = "children" } = this.props
+    const { authTree } = this.state
+    // const authTree = [...this.state.authTree];
     authTree.forEach((item1) => {
-      if (item1.authId === authId) {
+      if (item1[id] == iD) {
         item1.checked = checked;
-        if (item1.children) {
-          item1.children.forEach((item2) => {
+        if (item1[children]) {
+          item1[children].forEach((item2) => {
             item2.checked = checked;
-            // if (item2.children) {
-            //   item2.children.forEach((item3) => {
-            //     item3.checked = checked;
-            //   });
-            // }
           });
         }
       } else {
         // 反向思路: 保存子选项框的个数, 子选项选中就-1, 等于0说明都选中了, 父选项就勾上
-        let temp1 = item1.children.length;
-        item1.children.forEach((item2) => {
-          if (item2.authId === authId) {
+        let temp1 = !!item1[children] ? item1[children].length : 0;
+        !!item1[children] && item1[children].forEach((item2) => {
+          if (item2[id] == iD) {
             item2.checked = checked;
-            // if (item2.children) {
-            //   item2.children.forEach((item3) => {
-            //     item3.checked = checked;
-            //   });
-            // }
-          } else {
-            // let temp2 = item2.children.length;
-            // item2.children.forEach((item3) => {
-            //   if (item3.authId === authId) {
-            //     item3.checked = checked;
-            //   }
-            //   item3.checked ? temp2 -= 1 : temp2;
-            // });
-            // temp2 === 0 ? item2.checked = true : item2.checked = false;
           }
           //  选中-1, 未选中不动
           item2.checked ? temp1 -= 1 : temp1;
         });
         //  长度是0, 父选项框就勾选
-        temp1 === 0 ? item1.checked = true : item1.checked = false;
+        !!item1[children] && temp1 === 0 ? item1.checked = true : item1.checked = false;
       }
     });
-
     this.setState({
       authTree,
     });
@@ -114,59 +105,85 @@ class Cascaders extends Component {
 
   render() {
     const { Panel } = Collapse;
-    const authTreeMap = this.state.authTree.map((item1) => (
+    const { visible, authTree, checkedList } = this.state
+    const {
+      placeholder = "选择部门",
+      width = 200,
+      height = 32,
+      id = "id",
+      name = "name",
+      children = "children",
+    } = this.props
+    const authTreeMap = authTree.map((item1) => (
       // Panel是手风琴
       <Panel
-        key={item1.authId}
+        key={item1[id]}
         header={(
-          <span onClick={(e) => { e.stopPropagation(); }}>
+          <div className="item" onClick={(e) => { e.stopPropagation(); }}>
             {/* 一级复选框(向下操控二级三级) */}
             <Checkbox
-              name={item1.authId.toString()}
+              name={item1[id]}
               checked={item1.checked}
               onClick={(e) => {
-                this.itemHandle(parseInt(e.target.name), e.target.checked);
+                this.itemHandle(e.target.name, e.target.checked);
               }}
             >
-              {item1.authName}
             </Checkbox>
-          </span>
+            <div className="iname">{item1[name]}</div>
+          </div>
         )}
       >
         {/* 二级复选框(向下操控三级,向上联动一级) */}
-        {item1.children.map((item2) => (
-          <div key={item2.authId}>
+        {!!item1[children] && item1[children].map((item2) => (
+          <div key={item2[id]} className="item">
             <Checkbox
-              name={item2.authId.toString()}
+              name={item2[id]}
               checked={item2.checked}
               onClick={(e) => {
-                this.itemHandle(parseInt(e.target.name), e.target.checked);
+                this.itemHandle(e.target.name, e.target.checked);
               }}
             >
-              {item2.authName}
             </Checkbox>
-            {/* <span>|</span>
-            {item2.children.map((item3) => (
-              <Checkbox
-                key={item3.authId}
-                name={item3.authId.toString()}
-                checked={item3.checked}
-                onClick={(e) => {
-                  this.itemHandle(parseInt(e.target.name), e.target.checked);
-                }}
-              >
-                {item3.authName}
-              </Checkbox>
-            ))} */}
+            <div className="iname">{item2[name]}</div>
           </div>
         ))}
       </Panel>
     ));
     return (
-      <div>
-        <Collapse expandIconPosition="right">
-          {authTreeMap}
-        </Collapse>
+      <div className="cascaders">
+        <div
+          className="cinput"
+          style={{
+            height: height,
+            width: width,
+            color: checkedList.length > 0 ? "rgba(0, 0, 0, 0.65)" : "rgba(191, 191, 191, 1)"
+          }}
+          onClick={this.onSelect}
+        >{checkedList.length > 0 ? `已选择${checkedList.length}个部门` : placeholder}
+        </div>
+        {
+          visible &&
+          <div
+            className="cpop"
+            style={{
+              width: width,
+            }}
+          >
+            <div className="clist">
+              <Collapse expandIconPosition="right">
+                {authTreeMap}
+              </Collapse>
+            </div>
+            <div className="cboot">
+              <Button
+                type="primary"
+                style={{ marginLeft: 10 }}
+                onClick={this.onOks}
+              >确定</Button>
+              <Button onClick={this.onCancel}>取消</Button>
+            </div>
+          </div>
+        }
       </div>
     );
   }

+ 58 - 0
js/component/common/cascaders/index.less

@@ -0,0 +1,58 @@
+.cascaders {
+  display: inline-block;
+  position: relative;
+  z-index: 99999999;
+}
+
+.cinput {
+  margin-right: 10px;
+  padding: 6px 7px;
+  font-size: 12px;
+  color: rgba(0, 0, 0, 0.65);
+  background-color: #fff;
+  border-radius: 4px;
+  border: 1px solid #d9d9d9;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+
+}
+
+.cpop {
+  border: 1px solid #d9d9d9;
+  border-radius: 4px;
+  position: absolute;
+
+}
+
+.clist {
+  max-height: 250px;
+  overflow: auto;
+
+}
+
+.item {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-items: center;
+
+}
+
+.iname {
+  width: 80%;
+  margin-left: 8px;
+  font-size: 12px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+
+}
+
+.cboot {
+  margin: 10px 0;
+  padding: 0 10px;
+  display: flex;
+  flex-direction: row-reverse;
+
+}

+ 1 - 0
js/component/login/adminLogin.jsx

@@ -47,6 +47,7 @@ var Login = React.createClass({
         };
     },
 
+
     keyboard(event) {
         if (event.keyCode == 13) {
             this.handleSubmit()

+ 0 - 2
js/component/manageCenter/channelList/channelunit/index.jsx

@@ -24,7 +24,6 @@ import ChangeLog from "./changelog"; //更名日志
 import ChannelDetail from "./channeldetail"; //渠道详情
 import FollowDetail from "../../../../component/manageCenter/customer/NEW/intentionCustomer/followDetail";//新增渠道跟进
 import ShowModalDiv from "@/showModal.jsx";
-import Cascaders from "../../../common/cascaders"
 
 const { TabPane } = Tabs;
 const FormItem = Form.Item;
@@ -918,7 +917,6 @@ class ChannelUnit extends Component {
             />
           </Spin>
         </div>
-        {/* <Cascaders /> */}
         {this.state.informationTransferVisible && (
           <Modal
             visible={this.state.informationTransferVisible}

+ 31 - 0
js/component/manageCenter/index/content.jsx

@@ -249,6 +249,35 @@ const MessageModal = React.createClass({
             }.bind(this),
         });
     },
+    // 获取部门数据
+    selectSuperId() {
+        $.ajax({
+            method: "get",
+            dataType: "json",
+            url: globalConfig.context + "/api/admin/organization/selectSuperId",
+            data: {},
+            success: function (data) {
+                let theArr = [];
+                if (data.error && data.error.length === 0) {
+                    // for (let i = 0; i < data.data.length; i++) {
+                    //     let theData = data.data[i];
+                    //     theArr.push({
+                    //         value: theData.id,
+                    //         label: theData.name,
+                    //     });
+                    // }
+                    // this.setState({
+                    //     contactsOption: theArr,
+                    // });
+                    localStorage.setItem("departmentData", JSON.stringify(data.data))
+                } else {
+                    // message.warning(data.error[0].message);
+                }
+            }.bind(this),
+        }).always(
+
+        );
+    },
     //主菜单请求
     mainMenu() {
         this.setState({
@@ -513,8 +542,10 @@ const MessageModal = React.createClass({
     },
     componentWillMount() {
         // this.loadReaded();
+        this.selectSuperId();
         this.loadUnread();
         this.mainMenu();
+
     },
     handleOk() {
         let arr = this.state.unreadData.filter(v => v.list.length > 0 && !v.isRead);

+ 15 - 2
js/component/manageCenter/order/orderNew/billing.jsx

@@ -47,6 +47,7 @@ import Project from "../../../../component/project";
 import ImgList from "../../../common/imgList";
 import OrderItemStatus from "../../../common/orderItemStatus";
 import LogPopup from "../../../common/logPopup";
+import Cascaders from "../../../common/cascaders"
 const { Option } = Select;
 const { TabPane } = Tabs;
 const PicturesWall = React.createClass({
@@ -1920,7 +1921,19 @@ const MyService = Form.create()(
                         this.setState({ customerName: e.target.value });
                       }}
                     />
-                    <Select
+                    <Cascaders
+                      placeholder="订单部门"
+                      id="id"
+                      height={28}
+                      name="name"
+                      children="list"
+                      onSel={(e) => {
+                        this.setState({
+
+                        })
+                      }}
+                    />
+                    {/* <Select
                       placeholder="订单部门"
                       style={{ width: 200, marginRight: 10 }}
                       value={this.state.departmenttList}
@@ -1931,7 +1944,7 @@ const MyService = Form.create()(
                       {departmentArr.map(function (item) {
                         return <Option key={item.id}>{item.name}</Option>;
                       })}
-                    </Select>
+                    </Select> */}
                     <Input
                       placeholder="合同编号"
                       style={{ width: "150px", marginRight: 10 }}

+ 20 - 0
js/component/tools.js

@@ -116,6 +116,26 @@ import { provinceList } from './NewDicProvinceList.js';
 import ShowModal from './showModal.jsx';
 
 module.exports = {
+  // deepClone: function (data) {
+  //   let type = typeof data;
+  //   let tempValue;
+  //   if (!(type === 'array' || type === 'object')) return data;
+  //   if (type === 'array') {
+  //     tempValue = [];
+  //     data.forEach((item) => {
+  //       tempValue.push(deepClone(item));
+  //     })
+  //     return tempValue;
+  //   } else if (type === 'object') {
+  //     tempValue = {};
+  //     for (const key in data) {
+  //       if (data.hasOwnProperty(key)) {
+  //         tempValue[key] = deepClone(data[key]);
+  //       }
+  //     }
+  //     return tempValue;
+  //   }
+  // },
   onReplace: function (val) {
     let text = val.replace(/ /gm, ' ⁠⁡⁢⁣⁤⁠⁡⁢⁣⁤ ⁠⁡⁢⁣⁤⁠⁡⁢⁣⁤⁠⁡⁢⁣⁤⁠⁡⁢⁣⁤⁠⁡ ⁠⁡⁢⁣⁤⁠⁡⁢⁣⁤ ⁠⁡⁢⁣⁤⁠⁡⁢⁣⁤ ⁠⁡⁢⁣⁠⁡⁢⁣⁤⁠')
     return text