fix: 账号设置-添加/编辑弹窗账号组初始值bug

src/pages/Contract/Content/Summary/components/Content/index.tsx

@@ -137,7 +137,6 @@ const Content: React.FC<iContentProps> = ({ data, type }) => {
     <div className="pi-flex-column ">
       <div className="card-body card-border">
         <h5 className="card-title">{type === 'expenditure' ? '收入' : '支出'}合同结算进度</h5>
-        <div className="mb-0">
           <div className="progress-content">
             <Tooltip title={type === 'expenditure' ? '已回款: ￥' : '已支付: ￥' + data.totalContractPriceShow}>
               <div className={[ "progress-bar", type === 'expenditure' ? 'pi-bg-success' : 'pi-bg-red' ].join(' ')} style={{ width: (data.progress * 100) + '%' }}>
@@ -150,7 +149,6 @@ const Content: React.FC<iContentProps> = ({ data, type }) => {
               </div>
             </Tooltip>
           </div>
-        </div>
       </div>
       <div className="pi-justify-between mb-3 mt-3">
         <div className="pi-flex-sub pi-mg-right-15 card-border pi-mg-right-15">

src/pages/Management/Setting/components/Modal.tsx

@@ -1,8 +1,10 @@
+import { userStore } from '@/store/mobx'
 import { iUserInfo } from '@/types/setting'
 import consts from '@/utils/consts'
 import { generatePsw } from '@/utils/util'
 import { EyeInvisibleOutlined, EyeTwoTone } from '@ant-design/icons'
 import { Button, Form, Input, Modal, Select } from 'antd'
+import { observer } from 'mobx-react'
 import React, { useEffect, useState } from 'react'
 import { apiAccountDelete } from '../api'
 import styles from '../index.module.scss'
@@ -16,12 +18,17 @@ export interface iUserModal {
   onCancel: () => void
   initData: () => void
 }
-const UserModal:React.FC<iUserModal> = ({ visible, loading, onCreate, onCancel, userInfo, initData }) => {
+const UserModal: React.FC<iUserModal> = ({ visible, loading, onCreate, onCancel, userInfo, initData }) => {
   const [ form ] = Form.useForm()
   const [ delLoading, setDelLoading ] = useState<boolean>(false)
   const [ showPswModal, setShowPswModal ] = useState<boolean>(false)
   useEffect(() => {
-    form.setFieldsValue(userInfo)
+    if (visible) {
+      userInfo.id ? form.setFieldsValue(userInfo) : form.resetFields()
+      if (!userStore.groupList.length) {
+        userStore.getGroupList()
+      }
+    }
   }, [ visible ])
   const delBtnHandler = async () => {
     setDelLoading(true)
@@ -47,14 +54,14 @@ const UserModal:React.FC<iUserModal> = ({ visible, loading, onCreate, onCancel,
           <div>
             {
               userInfo.id ?
-              <>
-                <Button size="small" danger onClick={() => delBtnHandler()} loading={delLoading}>删除账号</Button>
-                <Button size="small" type="primary" ghost onClick={() => {
-                  onCancel()
-                  setShowPswModal(true)
-                }}>修改账号/密码</Button>
-              </>
-              : ''
+                <>
+                  <Button size="small" danger onClick={() => delBtnHandler()} loading={delLoading}>删除账号</Button>
+                  <Button size="small" type="primary" ghost onClick={() => {
+                    onCancel()
+                    setShowPswModal(true)
+                  }}>修改账号/密码</Button>
+                </>
+                : ''
             }
             <Button size="small" className={styles.grayBtn} onClick={() => onCancel()}>关闭</Button>
             <Button size="small" type="primary" loading={loading} onClick={() => {
@@ -65,66 +72,65 @@ const UserModal:React.FC<iUserModal> = ({ visible, loading, onCreate, onCancel,
             }}>{userInfo.id ? '提交修改' : '确认添加'}</Button>
           </div>
         }
-    >
-    <Form
-      form={form}
-      layout="vertical"
-      className={styles.FormContent}
-    >
-      {
-        userInfo.id ?
-        <Form.Item name="id" hidden>
-          <Input />
-        </Form.Item>
-        : ''
-      }
-      <Form.Item name="accountGroup" label="账号组" rules={[ { required: true, message: '请选择账号组' } ]}>
-        <Select
-          showSearch
-          placeholder="请选择"
-          size="small"
-          optionFilterProp="children"
-          filterOption={(input, option) => option?.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}>
-          <Option value={1}>建设单位</Option>
-          <Option value={2}>监理单位</Option>
-          <Option value={3}>施工单位</Option>
-          <Option value={4}>设计单位</Option>
-        </Select>
-      </Form.Item>
-      <Form.Item name="account" label="登录账号" rules={[ { required: true, message: '请输入登录账号' } ]}>
-        <Input size="small" placeholder="支持英文数字组合" disabled={userInfo.id ? true : false} />
-      </Form.Item>
-      {
-        !userInfo.id ?
-        <Form.Item name="password" label="登录密码" rules={[ { required: true, message: '请输入登录密码' } ]}>
-          <Input.Password
-            placeholder="密码支持英文数字及符号"
-            addonAfter={<span className="pi-pd-lr-11" onClick={() => pswHandler()}>随机密码</span>}
-            iconRender={visible => (visible ? <EyeTwoTone /> : <EyeInvisibleOutlined />)}
-          />
-        </Form.Item>
-        : ''
-      }
-      <Form.Item name="name" label="姓名" rules={[ { required: true, message: '请输入姓名' } ]}>
-        <Input size="small" />
-      </Form.Item>
-      <Form.Item name="company" label="单位名称" rules={[ { required: true, message: '请输入单位名称' } ]}>
-        <Input size="small" />
-      </Form.Item>
-      <Form.Item name="position" label="职位名称" rules={[ { required: true, message: '请输入职位名称' } ]}>
-        <Input size="small" />
-      </Form.Item>
-      <Form.Item name="mobile" label="手机" rules={[ { required: true, message: '请输入手机号码' } ]}>
-        <Input size="small" />
-      </Form.Item>
-      <Form.Item name="telephone" label="电话">
-        <Input size="small" placeholder="格式000-0000000" />
-      </Form.Item>
-    </Form>
-  </Modal>
+      >
+        <Form
+          form={form}
+          layout="vertical"
+          className={styles.FormContent}
+        >
+          {
+            userInfo.id ?
+              <Form.Item name="id" hidden>
+                <Input />
+              </Form.Item>
+              : ''
+          }
+          <Form.Item name="accountGroup" label="账号组" rules={[ { required: true, message: '请选择账号组' } ]}>
+            <Select
+              showSearch
+              placeholder="请选择"
+              size="small"
+              optionFilterProp="children"
+              filterOption={(input, option) => option?.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}>
+              {
+                userStore.groupList?.map(item => <Option value={item.key} key={item.key}>{item.value}</Option>)
+              }
+            </Select>
+          </Form.Item>
+          <Form.Item name="account" label="登录账号" rules={[ { required: true, message: '请输入登录账号' } ]}>
+            <Input size="small" placeholder="支持英文数字组合" disabled={userInfo.id ? true : false} />
+          </Form.Item>
+          {
+            !userInfo.id ?
+              <Form.Item name="password" label="登录密码" rules={[ { required: true, message: '请输入登录密码' } ]}>
+                <Input.Password
+                  placeholder="密码支持英文数字及符号"
+                  addonAfter={<span className="pi-pd-lr-11" onClick={() => pswHandler()}>随机密码</span>}
+                  iconRender={visible => (visible ? <EyeTwoTone /> : <EyeInvisibleOutlined />)}
+                />
+              </Form.Item>
+              : ''
+          }
+          <Form.Item name="name" label="姓名" rules={[ { required: true, message: '请输入姓名' } ]}>
+            <Input size="small" />
+          </Form.Item>
+          <Form.Item name="company" label="单位名称" rules={[ { required: true, message: '请输入单位名称' } ]}>
+            <Input size="small" />
+          </Form.Item>
+          <Form.Item name="position" label="职位名称" rules={[ { required: true, message: '请输入职位名称' } ]}>
+            <Input size="small" />
+          </Form.Item>
+          <Form.Item name="mobile" label="手机" rules={[ { required: true, message: '请输入手机号码' } ]}>
+            <Input size="small" />
+          </Form.Item>
+          <Form.Item name="telephone" label="电话">
+            <Input size="small" placeholder="格式000-0000000" />
+          </Form.Item>
+        </Form>
+      </Modal>
       <PswModal visible={showPswModal} onCancel={() => setShowPswModal(false)} userInfo={userInfo} />
     </>
 
   )
 }
-export default UserModal
+export default observer(UserModal)

src/pages/Management/Setting/index.tsx

@@ -71,8 +71,7 @@ export default function Info() {
   }
   const enableHandler = async (record: iUserInfo, enable: 0 | 1) => {
     const { code = -1 } = await apiAccountEnable({ id: record.id, enable })
-    if ( code === consts.RET_CODE.SUCCESS) {
-      // setUserList([ ...userList, { ...record, enable } ])
+    if (code === consts.RET_CODE.SUCCESS) {
       initData()
     }
   }
@@ -81,14 +80,14 @@ export default function Info() {
       title: '账号',
       dataIndex: 'account',
       // eslint-disable-next-line react/display-name
-      render: (text:any, record: iUserInfo) => {
+      render: (text: any, record: iUserInfo) => {
         return (
           <div>
             <span>{text}</span>
             {
               record.isAdmin ?
                 <Tooltip title="管理员"><span className="pi-mg-left-5"><SvgIcon type="xxh-user-circle" /></span></Tooltip>
-              : ''
+                : ''
             }
           </div>
         )
@@ -124,10 +123,10 @@ export default function Info() {
             <Button size="small" className="pi-mg-right-5" onClick={() => editHandler(record)}>编辑</Button>
             {
               !record.isAdmin ?
-              record.enable ?
-              <Button danger size="small" onClick={() => enableHandler(record, 0)}>停用</Button>
-              : <Button size="small" className={styles.greenBtn} onClick={() => enableHandler(record, 1)}>启用</Button>
-              : ''
+                record.enable ?
+                  <Button danger size="small" onClick={() => enableHandler(record, 0)}>停用</Button>
+                  : <Button size="small" className={styles.greenBtn} onClick={() => enableHandler(record, 1)}>启用</Button>
+                : ''
             }
           </div>
         )
@@ -159,7 +158,7 @@ export default function Info() {
             size: "small",
             pageSize: 10
           }}
-         />
+        />
       </div>
       <UserModal {...modalStatus} userInfo={row} onCreate={onCreate} onCancel={onCancel} initData={initData} />
     </div>

src/store/mobx/user/index.ts

@@ -90,6 +90,8 @@ class UserState {
             newData.push({ key: parseInt(key), value })
           }
         }
+        console.log(11)
+
         this.groupList = newData
       }
     })