new

2026-04-24 20:30:52 +08:00
commit 704bc34625
152 changed files with 45612 additions and 0 deletions
--- a/src/pages/role/Popup.tsx
+++ b/src/pages/role/Popup.tsx
@@ -0,0 +1,137 @@
+import {
+  ModalForm,
+  ProForm,
+  ProFormCheckbox,
+  ProFormDependency,
+  // ProFormDigit,
+  ProFormText,
+} from '@ant-design/pro-components';
+// import { useAccess } from '@umijs/max';
+import { ColorPicker, Form, Space } from 'antd';
+import MyTag from '@/components/MyTag';
+import useUserInfo from '@/hooks/useUserInfo';
+import { getRoleDetail } from '@/services/api';
+import { $t } from '@/utils/i18n';
+// import { preventScientificNotation } from '@/utils';
+import useCardList from './cardList';
+
+type RolesListItem = Partial<API.RolesListItem>;
+export default (props: {
+  action: EX.Action;
+  visible: boolean;
+  formValues: Partial<RolesListItem | undefined>;
+  onSubmit: (values: RolesListItem) => void;
+  onDone: () => void;
+}) => {
+  const { visible, formValues, onSubmit, onDone, action } = props;
+
+  const { userInfo } = useUserInfo();
+  // const { isGlobalCompany } = useAccess();
+  // const userRoleInfo = userInfo?.roleList?.[0];
+  // const level = userRoleInfo?.level || (isGlobalCompany ? 100 : 80);
+
+  const { getMenuMetaByPermissions } = useCardList();
+  const menuList = getMenuMetaByPermissions(
+    userInfo?.menuList || ([] as API.MenuListItem[]),
+  );
+  const actionMap = {
+    add: $t('table.action.add'),
+    view: $t('table.action.view'),
+    edit: $t('table.action.edit'),
+  };
+  return (
+    <ModalForm
+      disabled={action === 'view'}
+      title={`${actionMap[action]} ${$t('form.role.title')}`}
+      initialValues={formValues?.id ? formValues : { color: '#3b82f6' }}
+      open={visible}
+      onFinish={async (values: any) => {
+        values.menuIds = values.menuIds.join(',') || '';
+        return onSubmit(values);
+      }}
+      modalProps={{
+        maskClosable: action === 'view',
+        onCancel: () => onDone(),
+        destroyOnHidden: true,
+      }}
+      request={async () => {
+        if (formValues?.id) {
+          const {
+            data: { data },
+          } = await getRoleDetail({
+            id: formValues.id,
+          });
+          const menuIds = (data?.menuList || []).map(
+            (item: API.MenuListItem) => item.id,
+          );
+          return {
+            ...formValues,
+            menuIds,
+          };
+        }
+        return formValues || {};
+      }}
+    >
+      <ProFormText
+        name="name"
+        label={$t('form.role.roleName')}
+        placeholder={$t('form.role.roleName.placeholder')}
+        rules={[{ required: true, message: $t('form.required') }]}
+      />
+      {/* <ProFormDigit
+        min={1}
+        max={level - 1}
+        extra={$t('form.role.level.placeholder', { level: level - 1 })}
+        precision={0}
+        name="level"
+        label={$t('form.role.level')}
+        fieldProps={{
+          type: 'number',
+          onKeyDown: preventScientificNotation,
+        }}
+        rules={[{ required: true, message: $t('form.required') }]}
+      /> */}
+      <ProForm.Item label={$t('form.role.badgeColor')} required>
+        <Space>
+          <Form.Item
+            name="color"
+            noStyle
+            rules={[{ required: true, message: $t('form.required') }]}
+            getValueFromEvent={(color: { toHexString: () => any }) =>
+              typeof color === 'string' ? color : color.toHexString()
+            }
+          >
+            <ColorPicker format="hex" placement="top" showText disabledAlpha />
+          </Form.Item>
+
+          <ProFormDependency name={['color', 'name']}>
+            {({ color, name }) => (
+              <Space>
+                <span>{$t('form.role.preview')}: </span>
+                <MyTag color={color || '#3b82f6'}>{name || 'Example'}</MyTag>
+              </Space>
+            )}
+          </ProFormDependency>
+        </Space>
+      </ProForm.Item>
+      <ProFormCheckbox.Group
+        name="menuIds"
+        label={$t('form.role.menuIds')}
+        rules={[{ required: true, message: $t('form.required') }]}
+        options={menuList.map((item: API.MenuListItem) => ({
+          label: `${item.meta?.icon || ''} ${item.meta?.title}（${item?.meta?.describe}）`,
+          value: item.id,
+        }))}
+        fieldProps={{
+          style: {
+            display: 'grid',
+            gridTemplateColumns: 'repeat(2, 1fr)',
+            gap: '8px 16px',
+            alignItems: 'center',
+          },
+        }}
+      />
+      <ProFormText hidden name="id" label="ID" />
+    </ModalForm>
+  );
+};