|
@@ -0,0 +1,216 @@
|
|
|
+import React, { Component } from "react";
|
|
|
+import { View, Text } from "@tarojs/components";
|
|
|
+import { AtFloatLayout, AtButton, AtIcon, AtListItem, AtSearchBar } from "taro-ui";
|
|
|
+import Taro from "@tarojs/taro";
|
|
|
+import { getUserByName } from "../../../utils/servers/servers";
|
|
|
+import 'taro-ui/dist/style/components/float-layout.scss';
|
|
|
+import 'taro-ui/dist/style/components/icon.scss';
|
|
|
+import 'taro-ui/dist/style/components/button.scss';
|
|
|
+import './index.less';
|
|
|
+
|
|
|
+
|
|
|
+class CustomerProjectSelect extends Component {
|
|
|
+ constructor(props) {
|
|
|
+ super(props);
|
|
|
+ this.state = {
|
|
|
+ checkboxOption: props.options || [],
|
|
|
+ checkedList: [],
|
|
|
+ value: '',
|
|
|
+ list: [],
|
|
|
+ listState: '',
|
|
|
+ listVisible: false
|
|
|
+ }
|
|
|
+
|
|
|
+ this.handleClose = this.handleClose.bind(this);
|
|
|
+ this.handleChange = this.handleChange.bind(this);
|
|
|
+ this.handleConfirm = this.handleConfirm.bind(this);
|
|
|
+ this.onChange = this.onChange.bind(this);
|
|
|
+ }
|
|
|
+
|
|
|
+ componentDidUpdate(prevProps) {
|
|
|
+ if (JSON.stringify(this.props.checkedList) != JSON.stringify(prevProps.checkedList)) {
|
|
|
+ this.setState({ checkedList: this.props.checkedList });
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ handleClose() {
|
|
|
+ this.setState({ checkedList: [], value: '', list: [], listState: '', listVisible: false });
|
|
|
+ this.props.onClose();
|
|
|
+ }
|
|
|
+
|
|
|
+ handleChange(e) {
|
|
|
+ this.setState({ checkedList: e });
|
|
|
+ }
|
|
|
+
|
|
|
+ handleConfirm() {
|
|
|
+ const { checkedList } = this.state;
|
|
|
+ this.props.onConfirm(checkedList);
|
|
|
+ this.handleClose();
|
|
|
+ }
|
|
|
+
|
|
|
+ onChange(value, lv = true) {
|
|
|
+ this.setState({
|
|
|
+ value,
|
|
|
+ });
|
|
|
+ if (value.length < 2 && !lv) {
|
|
|
+ Taro.showToast({ title: "最少输入两个字符", icon: "none" });
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ if (value.length < 4 && lv) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ this.getList(value);
|
|
|
+ }
|
|
|
+
|
|
|
+ getList(value = this.state.value, pageNo = 1) {
|
|
|
+ this.setState({
|
|
|
+ listState: "LOADING",
|
|
|
+ });
|
|
|
+ getUserByName({
|
|
|
+ name: value,
|
|
|
+ type: 1,
|
|
|
+ pageNo: pageNo,
|
|
|
+ pageSize: 10,
|
|
|
+ })
|
|
|
+ .then((msg) => {
|
|
|
+ if (msg.error.length === 0) {
|
|
|
+ if (msg.data.totalCount === 0) {
|
|
|
+ this.setState({
|
|
|
+ listState: "NO_DATA",
|
|
|
+ });
|
|
|
+ } else if (
|
|
|
+ msg.data.totalCount === this.state.list.length &&
|
|
|
+ pageNo !== 1
|
|
|
+ ) {
|
|
|
+ Taro.showToast({ title: "没有更多数据了", icon: "none" });
|
|
|
+ this.setState({
|
|
|
+ listState: "NO_MORE_DATA",
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ if (
|
|
|
+ msg.data.totalCount ===
|
|
|
+ (pageNo === 1
|
|
|
+ ? msg.data.list
|
|
|
+ : this.state.list.concat(msg.data.list)
|
|
|
+ ).length
|
|
|
+ ) {
|
|
|
+ this.setState({
|
|
|
+ listState: "NO_MORE_DATA",
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.setState({
|
|
|
+ list:
|
|
|
+ pageNo === 1
|
|
|
+ ? msg.data.list
|
|
|
+ : this.state.list.concat(msg.data.list),
|
|
|
+ pageNo: msg.data.pageNo,
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ Taro.showToast({ title: msg.error[0].message, icon: "none" });
|
|
|
+ this.setState({
|
|
|
+ listState: msg.error[0].field === "403" ? "NO_DATA" : "RELOAD",
|
|
|
+ });
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .catch(() => {
|
|
|
+ this.setState({
|
|
|
+ listState: "RELOAD",
|
|
|
+ });
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ handleAddClick(data) {
|
|
|
+ const { checkedList } = this.state;
|
|
|
+ if (checkedList.find(item => item.name == data.name)) {
|
|
|
+ Taro.showToast({ title: `${data.name}已存在!`, icon: "none" });
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ checkedList.push({ id: data.id, name: data.name });
|
|
|
+ this.setState({ checkedList });
|
|
|
+ }
|
|
|
+
|
|
|
+ handleCloseComp(idx) {
|
|
|
+ const { checkedList } = this.state;
|
|
|
+ checkedList.splice(idx, 1);
|
|
|
+ this.setState({ checkedList });
|
|
|
+ }
|
|
|
+
|
|
|
+ render() {
|
|
|
+ const { checkedList } = this.state;
|
|
|
+ return (
|
|
|
+ <AtFloatLayout isOpened={this.props.isOpened} title={this.props.title} scrollY onClose={this.handleClose}>
|
|
|
+ <View style={{ paddingBottom: '90rpx' }}>
|
|
|
+ <View className="tag-list">
|
|
|
+ {checkedList.map((item, idx) => {
|
|
|
+ return (
|
|
|
+ <View className="tag-list-item">
|
|
|
+ <Text>{item.name}</Text>
|
|
|
+ <AtIcon value="close" size="16" color="#F00" onClick={() => this.handleCloseComp(idx)} />
|
|
|
+ </View>
|
|
|
+ )
|
|
|
+ })}
|
|
|
+ </View>
|
|
|
+
|
|
|
+ <View className="cltips">搜索可增加已存在的企业,新增可直接增加企业,删除企业:点击“X”删除</View>
|
|
|
+
|
|
|
+ <View style={{ display: 'flex', alignItems: 'center' }}>
|
|
|
+ <View style={{ flex: 1 }}>
|
|
|
+ <AtSearchBar
|
|
|
+ placeholder="请输入企业/渠道"
|
|
|
+ showActionButton
|
|
|
+ value={this.state.value}
|
|
|
+ onChange={this.onChange}
|
|
|
+ onActionClick={() => {
|
|
|
+ this.setState({
|
|
|
+ listVisible: false,
|
|
|
+ });
|
|
|
+ this.onChange(this.state.value, false);
|
|
|
+ }}
|
|
|
+ onConfirm={() => {
|
|
|
+ this.onChange(this.state.value, false);
|
|
|
+ }}
|
|
|
+ onClear={() => {
|
|
|
+ this.setState({
|
|
|
+ value: "",
|
|
|
+ list: [],
|
|
|
+ listState: "NO_DATA",
|
|
|
+ pageNo: 1,
|
|
|
+ listVisible: false,
|
|
|
+ });
|
|
|
+ }}
|
|
|
+ />
|
|
|
+ </View>
|
|
|
+
|
|
|
+ <AtButton
|
|
|
+ type="primary"
|
|
|
+ size="small"
|
|
|
+ className="add-btn"
|
|
|
+ onClick={() => {
|
|
|
+ this.handleAddClick({id: '0', name: this.state.value})
|
|
|
+ }}
|
|
|
+ >新增</AtButton>
|
|
|
+ </View>
|
|
|
+ {
|
|
|
+ this.state.list.map((v, k) => (
|
|
|
+ <View key={k}>
|
|
|
+ <AtListItem
|
|
|
+ title={v.name}
|
|
|
+ arrow="right"
|
|
|
+ iconInfo={{ size: 25, color: "#000000", value: "bookmark" }}
|
|
|
+ onClick={() => this.handleAddClick(v)}
|
|
|
+ />
|
|
|
+ </View>
|
|
|
+ ))
|
|
|
+ }
|
|
|
+
|
|
|
+ < View className='operate-btn' >
|
|
|
+ <AtButton type='primary' size='normal' onClick={this.handleConfirm}>确定</AtButton>
|
|
|
+ </View>
|
|
|
+ </View>
|
|
|
+ </AtFloatLayout>
|
|
|
+ )
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+export default CustomerProjectSelect;
|