Merge branch 'master' of lizhiqi/yongxu-web into master

src/pages/setting/UserManagement/edit.tsx

@@ -1,12 +1,19 @@
 import React, { useEffect, useState } from 'react';
-// import type { UploadProps } from 'antd';
-// import { Cascader } from 'antd';
-import { Cascader, Checkbox, Col, Form, Input, InputNumber, message, Modal, Row } from 'antd';
-import { createUser, editUser, queryTreeList } from '@/services/setting';
-// import { LoadingOutlined, PlusOutlined } from '@ant-design/icons';
+import {
+  Cascader,
+  Checkbox,
+  Col,
+  Form,
+  Input,
+  InputNumber,
+  message,
+  Modal,
+  Row,
+  Select,
+} from 'antd';
+import { createUser, editUser, queryTreeList, queryUserList } from '@/services/setting';
 import md5 from 'js-md5';
 import { queryRoleList } from '@/services/role';
-import { infoQuery } from '@/services/ReportingManagement';
 
 interface userEditPros {
   visible: boolean;
@@ -22,81 +29,35 @@ interface userEditPros {
 const Edit: React.FC<userEditPros> = (props) => {
   const { visible, editCallback, detailData } = props;
   const [form] = Form.useForm();
-  // const uploadHeaders = { Authorization: `${localStorage.getItem('token')}` };
-  // const [fileUrl, setFileUrl]: any = useState(
-  //   detailData && detailData.photo ? detailData.photo : '',
-  // );
-  // const [loading, setLoading] = useState(false);
   const [roleList, setRoleList] = useState([]);
-  // const [selectList, setSelectList] = useState([]);
   const [areaList, setAreaList] = useState([]);
-  const [isCurrent, setIsCurrent] = useState(false);
-
-  // const getBase64 = (img: any) => {
-  //   const reader = new FileReader();
-  //   reader.readAsDataURL(img);
-  //   reader.onloadend = () => {
-  //     const url = reader.result;
-  //     setFileUrl(url);
-  //   };
-  // };
+  const [dealerList, setDealerList] = useState([]);
+  const [roleCode, setRoleCode]: any = useState([]);
 
   useEffect(() => {
-    // 编辑时
     if (detailData) {
-      infoQuery().then((res) => {
-        if (res?.code === 0) {
-          // 判断当前编辑用户数据和登录账号是否为同一个
-          // 同一个则直接显示用户数据中user_role（角色名称）和parent_name（所属名称）
-          if (res.data.record_id === detailData.record_id) {
-            setIsCurrent(true);
-            const user_role_list: any = [];
-            const obj = {
-              name: '',
-              record_id: '',
-            };
-            detailData.user_role.forEach((el: { role_id: string; role_name: string }) => {
-              obj.name = el.role_name;
-              obj.record_id = el.role_id;
-              user_role_list.push(obj);
-            });
-            setRoleList(user_role_list);
-          } else {
-            // 角色列表
-            queryRoleList({ q: 'list' }).then((item) => {
-              if (item.code === 0) {
-                setRoleList(item.data.list);
-              }
-            });
-          }
-        }
-      });
-
-      // 编辑时，所属地区根据角色id回显数据
-      // const data = [...detailData?.user_role].sort((a: any, b: any) => b.level - a.level);
-      // if (data && data.length) {
-      //   const param = {
-      //     q: 'list',
-      //     role_id: data[0].role_id,
-      //     user_id: detailData.record_id,
-      //   };
-      //   // 根据角色id请求用户列表接口 保证所属名称字段编辑时回显
-      //   queryRoleUser(param).then((item) => {
-      //     if (item.code === 0) {
-      //       setSelectList(item?.data || []);
-      //     }
-      //   });
-      // }
-    } else {
-      // 新增
-      // 角色列表
-      queryRoleList({ q: 'list' }).then((res) => {
-        if (res.code === 0) {
-          setRoleList(res.data.list);
-        }
+      //  编辑时，根据角色判断是否显示配额和所属经销商
+      const arr: any[] = [];
+      detailData.user_role.forEach((el: any) => {
+        arr.push(el.role_code);
       });
+      setRoleCode(arr);
     }
 
+    //  经销商列表
+    queryUserList({ q: 'list', code_str: '21' }).then((res) => {
+      if (res && res.code === 0) {
+        setDealerList(res.data || []);
+      }
+    });
+
+    // 角色列表
+    queryRoleList({ q: 'list' }).then((res) => {
+      if (res.code === 0) {
+        setRoleList(res.data.list);
+      }
+    });
+
     //  地区列表
     queryTreeList({ q: 'tree', level: '3' }).then((res) => {
       if (res && res.code === 0) {
@@ -105,54 +66,21 @@ const Edit: React.FC<userEditPros> = (props) => {
     });
   }, []);
 
-  // const handleLevel = (values: any) => {
-  //   const data: any = roleList.filter((option: { record_id: string }) =>
-  //     values.includes(option.record_id),
-  //   );
-  //   return [...data].sort((a: any, b: any) => b.level - a.level);
-  // };
-
   // 角色选择
-  // const onRoleChange = (selectedValues: any) => {
-  //   // 切换角色时，所属名称要清空重新选择
-  //   form.setFieldsValue({ parent_id: '' });
-  //   const sortedData = handleLevel(selectedValues);
-  //   if (sortedData && sortedData.length > 0) {
-  //     const maxLevelObject = sortedData[0];
-  //     const param = {
-  //       q: 'list',
-  //       role_id: maxLevelObject.record_id,
-  //     };
-  //     queryRoleUser(param).then((res) => {
-  //       if (res.code === 0) {
-  //         setSelectList(res?.data || []);
-  //       }
-  //     });
-  //   } else {
-  //     setSelectList([]);
-  //   }
-  // };
-
-  // const filesProps: UploadProps = {
-  //   maxCount: 1,
-  //   action: '/web/v1/files',
-  //   headers: uploadHeaders,
-  //   listType: 'picture-card',
-  //   showUploadList: false,
-  //   onChange(info) {
-  //     if (info.file.status === 'uploading') {
-  //       setLoading(true);
-  //       return;
-  //     }
-  //     if (info.file.status === 'done') {
-  //       setLoading(false);
-  //       getBase64(info.file.originFileObj);
-  //     } else if (info.file.status === 'error') {
-  //       setLoading(false);
-  //       message.error('文件上传失败');
-  //     }
-  //   },
-  // };
+  const onRoleChange = (e: any, code: string) => {
+    const {
+      target: { checked },
+    } = e;
+    let arr: any = [...roleCode];
+    if (checked) {
+      if (!roleCode.includes(code)) {
+        arr.push(code);
+      }
+    } else {
+      arr = arr.filter((item: any) => item !== code);
+    }
+    setRoleCode(arr);
+  };
 
   /**
    * 确定
@@ -161,9 +89,6 @@ const Edit: React.FC<userEditPros> = (props) => {
     form.validateFields().then((values) => {
       if (values) {
         const data = { ...values };
-        if (values?.photo) {
-          data.photo = values?.photo?.file?.response?.data?.url;
-        }
         if (values?.password) {
           data.password = md5(values.password);
         }
@@ -175,16 +100,11 @@ const Edit: React.FC<userEditPros> = (props) => {
           data.user_role = user_role;
           delete data.role_id;
         }
-        // if (values?.area) {
-        //   data.province = values.area[0];
-        //   data.city = values.area[1];
-        //   data.district = values.area[2];
-        //   delete data.area;
-        // }
         if (values.districts) {
           const arr: any[] = [];
           values.districts.forEach((el: any) => {
             arr.push({
+              province_id: el[0],
               district_id: el[1],
             });
           });
@@ -256,13 +176,6 @@ const Edit: React.FC<userEditPros> = (props) => {
     },
   };
 
-  // const uploadButton = (
-  //   <div>
-  //     {loading ? <LoadingOutlined /> : <PlusOutlined />}
-  //     <div className="ant-upload-text">上传</div>
-  //   </div>
-  // );
-
   return (
     <Modal
       title={`${detailData ? '编辑' : '新增'}`}
@@ -329,35 +242,45 @@ const Edit: React.FC<userEditPros> = (props) => {
                   : []
               }
             >
-              <Checkbox.Group
-                options={roleList.map((option: { record_id: string; name: string }) => ({
-                  label: option.name,
-                  value: option.record_id,
-                  record_id: option.record_id,
-                }))}
-                disabled={isCurrent}
-                // onChange={onRoleChange}
-              />
-            </Form.Item>
-          </Col>
-          <Col span={12}>
-            <Form.Item
-              {...formItemLayout}
-              name="quota"
-              label="配额"
-              rules={[{ required: true, message: '请输入配额' }]}
-              initialValue={detailData?.quota || ''}
-            >
-              <InputNumber min={0} placeholder="请输入配额" style={{ width: '100%' }} />
+              <Checkbox.Group>
+                {roleList && roleList.length
+                  ? roleList.map((res: any) => {
+                      return (
+                        <Checkbox
+                          key={res.record_id}
+                          value={res.record_id}
+                          onChange={(e) => onRoleChange(e, res.code)}
+                        >
+                          {res.name}
+                        </Checkbox>
+                      );
+                    })
+                  : null}
+              </Checkbox.Group>
             </Form.Item>
           </Col>
+          {roleCode.includes('21') || roleCode.includes('22') ? (
+            <Col span={12}>
+              <Form.Item
+                {...formItemLayout}
+                name="quota"
+                label="配额"
+                initialValue={detailData?.quota || ''}
+                rules={[{ required: true, message: '请输入配额' }]}
+              >
+                <InputNumber min={0} placeholder="请输入配额" style={{ width: '100%' }} />
+              </Form.Item>
+            </Col>
+          ) : null}
           <Col span={12}>
             <Form.Item
               {...formItemLayout}
               name="districts"
               label="地区"
               rules={[{ required: true, message: '请选择地区' }]}
-              initialValue={detailData?.districts || []}
+              initialValue={
+                detailData?.districts.map((item: any) => [item.province_id, item.district_id]) || []
+              }
             >
               <Cascader
                 style={{ width: '100%' }}
@@ -369,57 +292,29 @@ const Edit: React.FC<userEditPros> = (props) => {
               />
             </Form.Item>
           </Col>
-          {/*<Col span={24}>*/}
-          {/*  <Form.Item*/}
-          {/*    {...formItemLayoutTwo}*/}
-          {/*    name="parent_id"*/}
-          {/*    label="上级用户"*/}
-          {/*    initialValue={detailData?.parent_id || ''}*/}
-          {/*  >*/}
-          {/*    <Select placeholder="请选择所属名称" disabled={isCurrent}>*/}
-          {/*      {selectList && selectList.length*/}
-          {/*        ? selectList.map(*/}
-          {/*            (res: { user_name: string; record_id: string; parent_id: string }) => {*/}
-          {/*              return (*/}
-          {/*                <Select.Option key={res.record_id} value={res.record_id}>*/}
-          {/*                  {res?.user_name}*/}
-          {/*                </Select.Option>*/}
-          {/*              );*/}
-          {/*            },*/}
-          {/*          )*/}
-          {/*        : null}*/}
-          {/*    </Select>*/}
-          {/*  </Form.Item>*/}
-          {/*</Col>*/}
-          {/*<Col span={24}>*/}
-          {/*  <Form.Item*/}
-          {/*    {...formItemLayoutTwo}*/}
-          {/*    name="area"*/}
-          {/*    label="所属地区"*/}
-          {/*    initialValue={*/}
-          {/*      detailData?.province || detailData?.city || detailData?.district*/}
-          {/*        ? [detailData?.province, detailData?.city, detailData?.district]*/}
-          {/*        : []*/}
-          {/*    }*/}
-          {/*  >*/}
-          {/*    <Cascader*/}
-          {/*      options={areaList}*/}
-          {/*      placeholder="请选择所属地区"*/}
-          {/*      fieldNames={{ label: 'name', value: 'name', children: 'children' }}*/}
-          {/*    />*/}
-          {/*  </Form.Item>*/}
-          {/*</Col>*/}
-          {/*<Col span={12}>*/}
-          {/*  <Form.Item {...formItemLayout} name="photo" label="头像" initialValue={[]}>*/}
-          {/*    <Upload {...filesProps}>*/}
-          {/*      {fileUrl === '' ? (*/}
-          {/*        uploadButton*/}
-          {/*      ) : (*/}
-          {/*        <img src={fileUrl} alt="data" style={{ width: '100%' }} />*/}
-          {/*      )}*/}
-          {/*    </Upload>*/}
-          {/*  </Form.Item>*/}
-          {/*</Col>*/}
+          {roleCode.includes('22') ? (
+            <Col span={12}>
+              <Form.Item
+                {...formItemLayout}
+                name="parent_id"
+                label="所属经销商"
+                initialValue={detailData?.parent_id || undefined}
+                rules={[{ required: true, message: '请选择所属经销商' }]}
+              >
+                <Select placeholder="请选择所属经销商">
+                  {dealerList && dealerList.length
+                    ? dealerList.map((res: any) => {
+                        return (
+                          <Select.Option key={res.record_id} value={res.record_id}>
+                            {res.user_name}
+                          </Select.Option>
+                        );
+                      })
+                    : null}
+                </Select>
+              </Form.Item>
+            </Col>
+          ) : null}
         </Row>
       </Form>
     </Modal>

src/pages/setting/UserManagement/index.tsx

@@ -1,4 +1,4 @@
-import { Button, Card, Form, Input, Space, Table, Image, Select, message, Modal } from 'antd';
+import { Button, Card, Form, Input, Space, Table, Select, message, Modal } from 'antd';
 import React, { useEffect, useState } from 'react';
 import { PlusCircleOutlined, ReloadOutlined, SearchOutlined } from '@ant-design/icons';
 import type { ColumnsType } from 'antd/es/table';
@@ -13,6 +13,7 @@ import {
 } from '@/services/setting';
 import { PageContainer } from '@ant-design/pro-components';
 import Check from '@/pages/setting/UserManagement/check';
+import { queryRole } from '@/services/role';
 
 interface DataType {
   key: string;
@@ -39,6 +40,7 @@ const UserManagement: React.FC = () => {
   const [loading, setLoading] = useState(false);
   const [checkVisible, setCheckVisible] = useState(false);
   const [checkId, setCheckId] = useState('');
+  const [roleList, setRoleList] = useState([]);
 
   // 获取列表数据
   const getListData = () => {
@@ -57,9 +59,18 @@ const UserManagement: React.FC = () => {
     });
   };
 
+  const getRoleList = () => {
+    queryRole({ q: 'list' }).then((res) => {
+      if (res && res.code === 0) {
+        setRoleList(res.data.list);
+      }
+    });
+  };
+
   useEffect(() => {
     setLoading(true);
     getListData();
+    getRoleList();
   }, []);
 
   // 新增弹框
@@ -197,12 +208,6 @@ const UserManagement: React.FC = () => {
       key: 'index',
       render: (_: any, row: any, index: number) => index + 1,
     },
-    {
-      title: '头像',
-      dataIndex: 'photo',
-      key: 'photo',
-      render: (v) => v && <Image width={50} src={v} alt="头像" />,
-    },
     {
       title: '用户名',
       dataIndex: 'user_name',
@@ -314,14 +319,17 @@ const UserManagement: React.FC = () => {
               </Select.Option>
             </Select>
           </Form.Item>
-          <Form.Item name="status" label="状态">
+          <Form.Item name="role_id" label="角色">
             <Select style={{ width: '175px' }} placeholder="请选择状态">
-              <Select.Option key={1} value={1}>
-                启用
-              </Select.Option>
-              <Select.Option key={2} value={2}>
-                停用
-              </Select.Option>
+              {roleList && roleList.length
+                ? roleList.map((res: any) => {
+                    return (
+                      <Select.Option key={res.record_id} value={res.record_id}>
+                        {res.name}
+                      </Select.Option>
+                    );
+                  })
+                : null}
             </Select>
           </Form.Item>
           <Form.Item style={{ marginBottom: '10px' }}>