Explorar o código

新增客户增加客户性质和客户类型

dev01 hai 5 meses
pai
achega
0c1afaf0bd

+ 157 - 0
src/components/common/CustomNatureSelect/index.jsx

@@ -0,0 +1,157 @@
+import React, { Component } from "react";
+import { View, PickerView, PickerViewColumn } from '@tarojs/components'
+import PropTypes from 'prop-types'
+import './index.less'
+
+class CustomNatureSelect extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      value: [0],
+      natureOptions1: [{
+        id: 1,
+        title: "政府机构"
+      }, {
+        id: 2,
+        title: "科研院所"
+      }, {
+        id: 3,
+        title: "高等院校"
+      }, {
+        id: 4,
+        title: "社会团体"
+      }, {
+        id: 5,
+        title: "企业"
+      }, {
+        id: 0,
+        title: "其他组织"
+      }],
+      natureOptions2: [{
+        id: 1,
+        title: "国企"
+      }, {
+        id: 2,
+        title: "央企"
+      }, {
+        id: 3,
+        title: "私企"
+      }, {
+        id: 4,
+        title: "合资企业(含港澳台)"
+      }, {
+        id: 5,
+        title: "外资控股"
+      }],
+      natureOptions3: [{
+        id: 1,
+        title: "上市公司",
+      }, {
+        id: 0,
+        title: "非上市公司",
+      }],
+    }
+    this.handlePickerChange = this.handlePickerChange.bind(this);
+  }
+
+  componentDidUpdate(prevProps) {
+    // if (!!this.props.value && !!prevProps.value && this.props.value instanceof Array && prevProps.value instanceof Array) {
+    //   if (this.props.value.join(',') != prevProps.value.join(',')) {
+    //     let citys = cityObj[provinceList[this.props.value[0]].id];
+    //     let areas = areaObj[citys[this.props.value[1]].id];
+    //     this.setState({ value: this.props.value, citys, areas });
+    //   }
+    // }
+  }
+
+  handlePickerChange(e) {
+    if (e.detail.value[0] == 4) {
+      this.setState({ value: [e.detail.value[0], 0, 0] });
+    } else {
+      this.setState({ value: [e.detail.value[0]] });
+    }
+  }
+
+  //  params true代表传递地址,false不传递
+  handlePickerShow(params) {
+    if (params) {
+      const { natureOptions1, natureOptions2, natureOptions3, value } = this.state;
+      const valueIds = [];
+      const valueNames = [];
+      value.map((item, idx) => {
+        let id, name = '';
+        if (idx == 0) {
+          id = natureOptions1[item].id;
+          name = natureOptions1[item].title;
+        } else if (idx == 1) {
+          id = natureOptions2[item].id;
+          name = natureOptions2[item].title;
+        } else if (idx == 2) {
+          id = natureOptions3[item].id;
+          name = natureOptions3[item].title;
+        }
+        valueIds.push(id);
+        valueNames.push(name);
+      })
+
+      let tempInfo = { id: valueIds, name: valueNames };
+      this.props.onHandleToggleShow(tempInfo, true)
+    } else {
+      this.props.onHandleToggleShow({}, false)
+    }
+  }
+
+  render() {
+    const { natureOptions1, natureOptions2, natureOptions3, value } = this.state
+    const { pickerShow } = this.props
+    console.log(pickerShow)
+    return (
+      <View className={pickerShow ? 'address-picker-containers' : 'address-picker-container'} onClick={this.handlePickerShow.bind(this, false)}>
+        <View className="picker-content" onClick={e => { e.stopPropagation() }}>
+          <View className="dialog-header">
+            <View className="dialog-button cancel" onClick={this.handlePickerShow.bind(this, false)}>取消</View>
+            <View className="dialog-title">请选择客户性质</View>
+            <View className="dialog-button" onClick={this.handlePickerShow.bind(this, true)}>确定</View>
+          </View>
+          <PickerView onChange={this.handlePickerChange} value={value} className='picker-view-wrap'>
+            <PickerViewColumn>
+              {
+                natureOptions1.map((item, index) => {
+                  return <View className="picker-item" key={index}>{item.title}</View>
+                })
+              }
+            </PickerViewColumn>
+            
+            { this.state.value[0] == 4 ? (
+              <PickerViewColumn>
+                {
+                  natureOptions2.map((item, index) => {
+                    return <View className="picker-item" key={index}>{item.title}</View>
+                  })
+                }
+              </PickerViewColumn>
+            ) : null}
+
+            { this.state.value[0] == 4 ? (
+                <PickerViewColumn>
+                {
+                  natureOptions3.map((item, index) => {
+                    return <View className="picker-item" key={index}>{item.title}</View>
+                  })
+                }
+              </PickerViewColumn>
+            ) : null}
+
+          </PickerView>
+        </View>
+      </View>
+    )
+  }
+}
+
+CustomNatureSelect.propTypes = {
+  pickerShow: PropTypes.bool.isRequired,
+  onHandleToggleShow: PropTypes.func.isRequired,
+}
+
+export default CustomNatureSelect;

+ 86 - 0
src/components/common/CustomNatureSelect/index.less

@@ -0,0 +1,86 @@
+.address-picker-container {
+  width: 100%;
+  height: 100vh;
+  display: flex;
+  z-index: 999;
+  background: rgba(0, 0, 0, 0.7);
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  position: fixed;
+  bottom: 0px;
+  left: 0px;
+  visibility: hidden;
+  // &.show {
+  //     visibility: visible;
+  //     .picker-content {
+  //         transform: translateY(0);
+  //         transition: all 0.4s ease;
+  //     }
+  // }
+}
+
+.address-picker-containers {
+  width: 100%;
+  height: 100vh;
+  display: flex;
+  z-index: 999;
+  background: rgba(0, 0, 0, 0.7);
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  position: fixed;
+  bottom: 0px;
+  left: 0px;
+  visibility: visible;
+
+  .picker-content {
+    transform: translateY(0);
+    transition: all 0.4s ease;
+  }
+}
+
+
+.picker-content {
+  position: absolute;
+  width: 100%;
+  bottom: 0;
+  background-color: #fff;
+  transform: translateY(150%);
+  transition: all 0.4s ease;
+
+  .picker-view-wrap {
+    width: 100%;
+    height: 500px;
+  }
+}
+
+.picker-item {
+  line-height: 70px;
+  font-size: 36px;
+  text-align: center;
+}
+
+.dialog-header {
+  width: 100%;
+  background: #ededed;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  .dialog-title {
+    color: #333;
+  }
+
+  .dialog-button {
+    display: inline-block;
+    text-align: center;
+    font-size: 32px;
+    color: #E28E81;
+    padding: 30px;
+
+    &.cancel {
+      color: #666;
+    }
+  }
+}

+ 162 - 3
src/pages/addEnterprise/index.jsx

@@ -33,7 +33,8 @@ import "taro-ui/dist/style/components/search-bar.scss";
 import "taro-ui/dist/style/components/checkbox.scss";
 
 import MessageNoticebar from "../../components/common/messageNoticebar";
-import AddressPicker from "../../components/common/addressPicker"
+import AddressPicker from "../../components/common/addressPicker";
+import CustomNatureSelect from "../../components/common/CustomNatureSelect";
 
 class AddEnterprise extends Component {
   $instance = getCurrentInstance();
@@ -58,6 +59,55 @@ class AddEnterprise extends Component {
       ],
       channe: "",
       selChannelType: 0,
+      levelList: [
+        { id: 0, title: "一般客户(一年以上预签)" },
+        { id: 1, title: "意向客户(半年内预签)" },
+        { id: 2, title: "重点客户(一个月内预签)" },
+      ],
+      naturePickerShow: false,
+      // natureOptions1: [{
+      //   id: 1,
+      //   title: "政府机构"
+      // }, {
+      //   id: 2,
+      //   title: "科研院所"
+      // }, {
+      //   id: 3,
+      //   title: "高等院校"
+      // }, {
+      //   id: 4,
+      //   title: "社会团体"
+      // }, {
+      //   id: 5,
+      //   title: "企业"
+      // }, {
+      //   id: 0,
+      //   title: "其他组织"
+      // }],
+      // natureOptions2: [{
+      //   id: 1,
+      //   title: "国企"
+      // }, {
+      //   id: 2,
+      //   title: "央企"
+      // }, {
+      //   id: 3,
+      //   title: "私企"
+      // }, {
+      //   id: 4,
+      //   title: "合资企业(含港澳台)"
+      // }, {
+      //   id: 5,
+      //   title: "外资控股"
+      // }],
+      // natureOptions3: [{
+      //   id: 1,
+      //   title: "上市公司",
+      // }, {
+      //   id: 0,
+      //   title: "非上市公司",
+      // }],
+      // natureList: []
     };
     this.checkUserName = this.checkUserName.bind(this);
     this.onSearchChange = this.onSearchChange.bind(this);
@@ -66,7 +116,6 @@ class AddEnterprise extends Component {
   }
 
   componentDidMount() {
-
   }
 
   componentDidShow() {
@@ -212,14 +261,47 @@ class AddEnterprise extends Component {
       Taro.showToast({ title: "请选择意向合作项目", icon: "none" });
       return
     }
+    console.log(info.level)
+    if (info.level === undefined || info.level === null) {
+      Taro.showToast({ title: "请选择客户类型", icon: "none" });
+      return
+    }
+    if (!info.nature) {
+      Taro.showToast({ title: "请选择客户性质", icon: "none" });
+      return
+    }
+    if (info.nature && info.nature[0] == 0 && !info.natureOther) {
+      Taro.showToast({ title: "请输入其他说明", icon: "none" });
+      return
+    }
     info.societyTag = '0'
     info.type = '1'
     let addList = getProvince(info.province, info.city, info.area)
+
+    let enterpriseNature = undefined; // 企业性质 0=其他,1=国企,2=央企,3=私企,4=合资企业(含港澳台),5=外资控股
+    let listedNature = undefined; // 上市 0=否,1=是
+    if (info.nature.length >= 2) {
+      enterpriseNature = info.nature[1];
+    }
+    if (info.nature.length >= 3) {
+      listedNature = info.nature[2];
+    }
+
+    let params = { ...this.state.info };
+    params.nature = params.nature[0];
+    if(enterpriseNature) {
+      params.enterpriseNature = enterpriseNature;
+    }
+    if (listedNature) {
+      params.listedNature = listedNature;
+    }
+    delete params.natureName;
+
     Taro.showLoading({
       title: '保存中...',
     })
     addCustomer({
-      ...info,
+      ...params,
       ...{
         province: addList[0],
         city: addList[1],
@@ -343,6 +425,18 @@ class AddEnterprise extends Component {
     }
   }
 
+  handleNatureToggleShow(e, params) {
+    if (params) {
+      const { info } = this.state;
+      info.nature = e.id;
+      info.natureName = e.name.join('\/');
+      console.log(info)
+      this.setState({ info, naturePickerShow: false });
+    } else {
+      this.setState({ naturePickerShow: false });
+    }
+  }
+
   render() {
     const { info, isOpened, pickerShow, isProject, checkOptions, channelTypeList, channe } = this.state;
     return (
@@ -477,6 +571,71 @@ class AddEnterprise extends Component {
                 }}>{!!info.intendedProject ? info.intendedProject : "点击选择"}</View>
             </View>
 
+            <View className="aitem">
+              <View className="atit">
+                <Text className="atip">*</Text>
+                客户类型
+              </View>
+              <Picker
+                value={this.state.level}
+                range={this.state.levelList} rangeKey='title' mode='selector'
+                onChange={(e) => {
+                  this.setState({
+                    levelName: this.state.levelList[e.detail.value].title,
+                    level: e.detail.value,
+                    info: Object.assign(info, {
+                      level: Number(e.target.value),
+                    })
+                  })
+                }}>
+                <View className={!!this.state.level ? "avals" : "aval"} style={{ width: "233px" }}>
+                  {!!this.state.levelName ? this.state.levelName : "请选择"}
+                </View>
+              </Picker>
+            </View>
+
+            <View className="aitem">
+              <View className="atit">
+                <Text className="atip">*</Text>
+                客户性质
+              </View>
+
+              <View className={!!info.natureName ? "avals" : "aval"} onClick={() => {
+                this.setState({ naturePickerShow: true }, () => {
+                  console.log(this.state.naturePickerShow)
+                })
+              }}>
+                {!!info.natureName ? info.natureName : "点击选择"}
+              </View>
+              <CustomNatureSelect
+                pickerShow={this.state.naturePickerShow}
+                onHandleToggleShow={this.handleNatureToggleShow.bind(this)}
+              />
+            </View>
+
+            { info.nature && info.nature[0] == 0 ? (
+              <View className="aitem" style={{ alignItems: "flex-start" }}>
+                <View className="atit">
+                  <Text className="atip">*</Text>
+                  其他说明
+                </View>
+                <View className="avals">
+                  <AtTextarea
+                    value={info.natureOther}
+                    onChange={e => {
+                      this.setState({
+                        info: Object.assign(info, {
+                          natureOther: e
+                        })
+                      })
+                    }}
+                    maxLength={200}
+                    placeholder='请输入其他说明'
+                  />
+                </View>
+              </View>
+            ) : null}
+            
             <View className="bottom">
               <AtButton type='primary' onClick={this.submit}>保存</AtButton>
               {/* <AtButton type='secondary' size='small'>取消</AtButton> */}