dingxin 5 年之前
父節點
當前提交
dd58fac154
共有 3 個檔案被更改,包括 137 行新增8 行删除
  1. 50
    0
      src/pages/UserManage/CitySelect.jsx
  2. 82
    8
      src/pages/UserManage/Editor/User.jsx
  3. 5
    0
      src/services/apis.js

+ 50
- 0
src/pages/UserManage/CitySelect.jsx 查看文件

@@ -0,0 +1,50 @@
1
+import React, { useState, useEffect } from 'react';
2
+import { Select } from 'antd';
3
+
4
+import request from '../../utils/request'
5
+
6
+const { Option } = Select;
7
+
8
+/**
9
+ *
10
+ *
11
+ * @param {*} props
12
+ * @returns
13
+ */
14
+const CitySelect = (props) => {
15
+  const [ data, setData ] = useState([])
16
+
17
+  useEffect(() => {
18
+    getCityList();
19
+  },[])
20
+
21
+  const getCityList = (e) => {
22
+    request({
23
+        url: '/api/admin/tdCity',
24
+        method: 'GET',
25
+        params: {leveltype: 2, pageNum: 1,pageSize: 999},
26
+        action: 'select',
27
+    }).then((data) => {
28
+        setData(data)
29
+    })
30
+  }
31
+
32
+  return (
33
+      <Select 
34
+      showSearch 
35
+      value={props.value} 
36
+      style={{ width: '180px' }}
37
+      placeholder="请选择城市" 
38
+      onChange={props.onChange} 
39
+      filterOption={(input, option) =>
40
+        option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
41
+      }
42
+      >
43
+          {data.map(city => (
44
+            <Option key={city.id} value={city.id}>{city.name}</Option>
45
+          ))}
46
+      </Select>
47
+  )
48
+}
49
+export default CitySelect
50
+

+ 82
- 8
src/pages/UserManage/Editor/User.jsx 查看文件

@@ -1,19 +1,49 @@
1 1
 import React, { useState, useEffect } from 'react';
2
-import { Button, notification } from 'antd';
2
+import { Button, notification, Tree } from 'antd';
3 3
 import md5 from 'md5';
4 4
 import moment from 'moment';
5 5
 import router from 'umi/router';
6 6
 import XForm, { FieldTypes } from '../../../components/XForm';
7 7
 import { fetch, apis } from '../../../utils/request';
8
+import SelectCity from '../CitySelect'
9
+
8 10
 
9 11
 const defaultPass = 'abc@123';
10 12
 const saveUser = fetch(apis.member.save)
11 13
 const updateUser = fetch(apis.member.update)
14
+const getCityTree = fetch(apis.member.getTree)
12 15
 
13
-export default (props) => {
16
+export default props => {
17
+  const { TreeNode } = Tree;
14 18
   const [data, setData] = useState({})
15 19
   const [submitting, setSubmitting] = useState(false)
16 20
   const user = props.data;
21
+  // 初始化的值
22
+  const [tree, setTree] = useState([])
23
+  // 城市的值
24
+  const [selectCityTree, setSelectCityTree] = useState([])
25
+  // 省份的值
26
+  // const [selectProvinceTree, setSelectProvinceTree] = useState([])
27
+
28
+  useEffect(() => {
29
+    getCity()
30
+  }, [])
31
+
32
+  const getCity = () => {
33
+    getCityTree().then((user) => {
34
+      console.log('user.tdCityLis', user.tdCityList)
35
+      setTree(user.tdCityList)
36
+      }).catch(() => setSubmitting(false))
37
+    }
38
+
39
+  const onSelect = (selectedKeys, info) => {
40
+    console.log('selected', selectedKeys, info);
41
+  };
42
+  // 选择城市
43
+  const onCheck = (checkedKeys, info) => {
44
+    setSelectCityTree(checkedKeys)
45
+    console.log('onCheck', checkedKeys, info);
46
+  };
17 47
 
18 48
   const fields = [
19 49
     {
@@ -42,8 +72,8 @@ export default (props) => {
42 72
       name: 'phone',
43 73
       type: FieldTypes.Text,
44 74
       rules: [
45
-        {required: true, message: '请填写手机号'},
46
-        {len: 11, message: '手机号格式不正确'}
75
+        { required: true, message: '请填写手机号' },
76
+        { len: 11, message: '手机号格式不正确' },
47 77
       ],
48 78
       value: user.phone,
49 79
     },
@@ -67,16 +97,59 @@ export default (props) => {
67 97
       name: 'expDate',
68 98
       type: FieldTypes.DatePicker,
69 99
       rules: [
70
-        {required: true, message: '请选择有效期'}
100
+        { required: true, message: '请选择有效期'}
71 101
       ],
72 102
       value: moment(user.expDate),
73 103
     },
104
+
105
+    {
106
+      label: '维护城市',
107
+      name: 'cityId',
108
+      rules: [
109
+        { required: true, message: '维护城市' },
110
+      ],
111
+      value: user.orgNum,
112
+      render: row=> <Tree
113
+        checkable
114
+        // 展开指定节点
115
+        // expandedKeys={selectProvinceTree}
116
+        // 选择节点,但同时会包含父节点
117
+        checkedKeys={selectCityTree}
118
+        //  defaultSelectedKeys={['420100']}
119
+        onSelect={onSelect}
120
+        onCheck={onCheck}
121
+      >
122
+      <TreeNode title="全部">
123
+      {tree.map(item => (
124
+        <TreeNode title={item.name} key={item.id}>
125
+           {item.children.map(itemCity => (
126
+            <TreeNode
127
+                title={<span style={{ color: '#1890ff' }}>{itemCity.shortname}</span>}
128
+                key={itemCity.id}
129
+              />
130
+          ))}
131
+        </TreeNode>
132
+       ))}
133
+</TreeNode>
134
+      </Tree>,
135
+    },
136
+
137
+    {
138
+      label: '默认城市',
139
+      name: 'cityId',
140
+      rules: [
141
+        { required: true, message: '默认城市' },
142
+      ],
143
+      value: user.orgNum,
144
+      render: (row, index) => <SelectCity />,
145
+    },
146
+
74 147
     {
75
-      label: '楼盘总数',
148
+      label: '维护项目数量',
76 149
       name: 'orgNum',
77 150
       type: FieldTypes.Text,
78 151
       rules: [
79
-        { required: true, message: '请输入楼盘总数' },
152
+        { required: true, message: '请输入维护项目数量' },
80 153
       ],
81 154
       value: user.orgNum,
82 155
     },
@@ -89,7 +162,8 @@ export default (props) => {
89 162
       loginPassword: md5(defaultPass),
90 163
     }
91 164
 
92
-    const data = { ...user, ...dt }
165
+    const data = { ...user, ...dt, selectCityTree }
166
+    console.log('datadatadatadata', data)
93 167
     setSubmitting(true)
94 168
     if (user && user.userId) {
95 169
       updateUser({ urlData: { id: user.userId }, data }).then((user) => {

+ 5
- 0
src/services/apis.js 查看文件

@@ -41,6 +41,11 @@ const apis = {
41 41
       method: 'PUT',
42 42
       action: 'center',
43 43
     },
44
+    getTree: {
45
+      url: `${prefix}/taUser/city/tree`,
46
+      method: 'get',
47
+      action: 'center',
48
+    },
44 49
     miniapp: {
45 50
       edit: {
46 51
         url: `${prefix}/taMiniapp`,