@ysjdemo/umi-create-cli 0.0.3 → 0.0.4

package/lib/templates/qiankun/cf-workbench-base/src/pages/System/AccountandSettings/components/notification.tsx

@@ -0,0 +1,47 @@
+import { List, Switch } from 'antd';
+import { useIntl } from '@umijs/max';
+
+const NotificationView = () => {
+  const { formatMessage } = useIntl()
+  
+  const getData = () => {
+    const Action = (
+      <Switch
+        checkedChildren={formatMessage({ id: 'accountandsettings.settings.open' })}
+        unCheckedChildren={formatMessage({ id: 'accountandsettings.settings.close' })}
+        defaultChecked
+      />
+    );
+    return [
+      {
+        title: formatMessage({ id: 'accountandsettings.notification.password' }, {}),
+        description: formatMessage({ id: 'accountandsettings.notification.password-description' }, {}),
+        actions: [Action],
+      },
+      {
+        title: formatMessage({ id: 'accountandsettings.notification.messages' }, {}),
+        description: formatMessage({ id: 'accountandsettings.notification.messages-description' }, {}),
+        actions: [Action],
+      },
+      {
+        title: formatMessage({ id: 'accountandsettings.notification.todo' }, {}),
+        description: formatMessage({ id: 'accountandsettings.notification.todo-description' }, {}),
+        actions: [Action],
+      },
+    ];
+  };
+
+  return (
+    <List
+      itemLayout="horizontal"
+      dataSource={getData()}
+      renderItem={(item) => (
+        <List.Item actions={item.actions}>
+          <List.Item.Meta title={item.title} description={item.description} />
+        </List.Item>
+      )}
+    />
+  );
+};
+
+export default NotificationView;

package/lib/templates/qiankun/cf-workbench-base/src/pages/System/AccountandSettings/index.tsx

@@ -0,0 +1,119 @@
+import BaseView from '@/pages/System/AccountandSettings/components/base';
+import { GridContent } from '@ant-design/pro-layout';
+import { useIntl, useModel } from '@umijs/max';
+import { Menu } from 'antd';
+import React, { memo, useEffect, useRef, useState } from 'react';
+import styles from './style.less';
+
+const LocaleSetting = React.lazy(() => import('./components/LocaleSetting'));
+const ChangePassword = React.lazy(() => import('@/pages/System/AccountandSettings/components/changePassword'));
+const NotificationView = React.lazy(() => import('@/pages/System/AccountandSettings/components/notification'));
+
+const { Item } = Menu;
+
+type SettingsStateKeys = 'base' | 'changePassword' | 'notification' | 'localeSetting';
+type MenuMode = 'horizontal' | 'vertical' | 'inline';
+
+const Settings = () => {
+  const { currentUser } = useModel('user');
+  const mainRef = useRef<HTMLDivElement>(null);
+  const { formatMessage } = useIntl();
+
+  const [mode, setMode] = useState<MenuMode | undefined>('inline');
+  const [selectKey, setSelectKey] = useState<string>('base');
+
+  const menuMap: any = {
+    base: formatMessage({ id: 'accountandsettings.menuMap.basic', defaultMessage: 'Basic Settings' }),
+    changePassword: formatMessage({ id: 'accountandsettings.menuMap.changePassword', defaultMessage: '修改密码' }),
+    notification: formatMessage({
+      id: 'accountandsettings.menuMap.notification',
+      defaultMessage: 'New Message Notification',
+    }),
+    localeSetting: formatMessage({ id: 'accountandsettings.menuMap.preferenceSettings', defaultMessage: '偏好设置' }),
+  };
+
+  const getMenu = () => {
+    return Object.keys(menuMap).map((item) => <Item key={item}>{menuMap[item]}</Item>);
+  };
+
+  const getRightTitle = () => {
+    return menuMap[selectKey];
+  };
+
+  const resize = () => {
+    if (!mainRef.current) {
+      return;
+    }
+
+    requestAnimationFrame(() => {
+      if (!mainRef.current) {
+        return;
+      }
+
+      let mode: 'inline' | 'horizontal' = 'inline';
+      const { offsetWidth } = mainRef.current;
+      if (offsetWidth < 641 && offsetWidth > 400) {
+        mode = 'horizontal';
+      }
+      if (window.innerWidth < 768 && offsetWidth > 400) {
+        mode = 'horizontal';
+      }
+      setMode(mode);
+    });
+  };
+
+  const renderChildren = () => {
+    switch (selectKey) {
+      case 'base':
+        return <BaseView />;
+
+      case 'changePassword':
+        return <ChangePassword />;
+
+      case 'notification':
+        return <NotificationView />;
+
+      case 'localeSetting':
+        return <LocaleSetting />;
+
+      default:
+        break;
+    }
+
+    return null;
+  };
+
+  useEffect(() => {
+    window.addEventListener('resize', resize);
+    resize();
+    return () => {
+      window.removeEventListener('resize', resize);
+    };
+  }, []);
+
+  return (
+    <>
+      {currentUser && currentUser.userCode ? (
+        <GridContent>
+          <div className={styles.main} ref={mainRef}>
+            <div className={styles.leftMenu}>
+              <Menu
+                mode={mode}
+                selectedKeys={[selectKey]}
+                onClick={({ key }) => setSelectKey(key as SettingsStateKeys)}
+              >
+                {getMenu()}
+              </Menu>
+            </div>
+            <div className={styles.right}>
+              <div className={styles.title}>{getRightTitle()}</div>
+              {renderChildren()}
+            </div>
+          </div>
+        </GridContent>
+      ) : null}
+    </>
+  );
+};
+
+export default memo(Settings);

package/lib/templates/qiankun/cf-workbench-base/src/pages/System/AccountandSettings/style.less

@@ -0,0 +1,95 @@
+.main {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  padding-top: 16px;
+  padding-bottom: 16px;
+  overflow: auto;
+  background-color: @menu-bg;
+  .leftMenu {
+    width: 224px;
+    border-right: @border-width-base @border-style-base @border-color-split;
+    :global {
+      .ant-menu-inline {
+        border: none;
+      }
+      .ant-menu:not(.ant-menu-horizontal) .ant-menu-item-selected {
+        font-weight: bold;
+      }
+    }
+  }
+  .right {
+    flex: 1;
+    padding-top: 8px;
+    padding-right: 40px;
+    padding-bottom: 8px;
+    padding-left: 40px;
+    .title {
+      margin-bottom: 12px;
+      color: @heading-color;
+      font-weight: 500;
+      font-size: 20px;
+      line-height: 28px;
+    }
+  }
+  :global {
+    .ant-list-split .ant-list-item:last-child {
+      border-bottom: 1px solid @border-color-split;
+    }
+    .ant-list-item {
+      padding-top: 14px;
+      padding-bottom: 14px;
+    }
+  }
+}
+:global {
+  .ant-list-item-meta {
+    // 账号绑定图标
+    .taobao {
+      display: block;
+      color: #ff4000;
+      font-size: 48px;
+      line-height: 48px;
+      border-radius: @border-radius-base;
+    }
+    .dingding {
+      margin: 2px;
+      padding: 6px;
+      color: #fff;
+      font-size: 32px;
+      line-height: 32px;
+      background-color: #2eabff;
+      border-radius: @border-radius-base;
+    }
+    .alipay {
+      color: #2eabff;
+      font-size: 48px;
+      line-height: 48px;
+      border-radius: @border-radius-base;
+    }
+  }
+
+  // 密码强度
+  font.strong {
+    color: @success-color;
+  }
+  font.medium {
+    color: @warning-color;
+  }
+  font.weak {
+    color: @error-color;
+  }
+}
+
+@media screen and (max-width: @screen-md) {
+  .main {
+    flex-direction: column;
+    .leftMenu {
+      width: 100%;
+      border: none;
+    }
+    .right {
+      padding: 40px;
+    }
+  }
+}

package/lib/templates/qiankun/cf-workbench-base/src/pages/System/Dictionary/components/UpdateForm.tsx

@@ -0,0 +1,84 @@
+import { ProFormSelect, ProFormText } from '@ant-design/pro-form';
+import React, { MutableRefObject, useEffect } from 'react';
+import { cfmmUtils, RefDrawerForm, RefDrawerFormRefType, useIntl } from 'umi';
+
+import { Form } from 'antd';
+import { FormValueType, TableListItem } from '../data.d';
+
+export interface UpdateFormProps {
+  updateDrawerRef: MutableRefObject<RefDrawerFormRefType | undefined>;
+  /** 提交方法，返回true可以控制弹窗关闭 */
+  onSubmit: (values: FormValueType) => Promise<boolean | void>;
+  values: Partial<TableListItem> | null;
+}
+
+const UpdateForm: React.FC<UpdateFormProps> = (props) => {
+  const { formatMessage } = useIntl();
+  const [form] = Form.useForm();
+
+  useEffect(() => {
+    if (props.values) {
+      form.setFieldsValue({
+        ...props.values,
+      });
+    }
+  }, [props.values]);
+
+  return (
+    <RefDrawerForm
+      form={form}
+      ref={props.updateDrawerRef}
+      title={formatMessage({
+        id: 'pages.Dictionary.update.title',
+        defaultMessage: '修改字典',
+      })}
+      onFinish={props.onSubmit}
+    >
+      <ProFormText name="dicId" disabled hidden />
+      <ProFormText
+        name="dicCode"
+        disabled
+        label={formatMessage({
+          id: 'pages.Dictionary.column.dicCode',
+          defaultMessage: '字典编号',
+        })}
+        rules={[{ required: true }]}
+      />
+      <ProFormText
+        name="dicType"
+        label={formatMessage({
+          id: 'pages.Dictionary.column.dicType',
+          defaultMessage: '字典类型',
+        })}
+        rules={[{ required: true }]}
+      />
+      <ProFormText
+        name="dicName"
+        label={formatMessage({
+          id: 'pages.Dictionary.column.dicName',
+          defaultMessage: '字典名称',
+        })}
+      />
+      <ProFormText
+        name="dicValue"
+        label={formatMessage({
+          id: 'pages.Dictionary.column.dicValue',
+          defaultMessage: '字典键值',
+        })}
+      />
+      <ProFormSelect
+        name="status"
+        label={formatMessage({
+          id: 'pages.Dictionary.column.status',
+          defaultMessage: '状态',
+        })}
+        fieldProps={{
+          options: cfmmUtils.getValidList({ valueMap: { actived: 'Y', unactived: 'N' } }),
+        }}
+        rules={[{ required: true }]}
+      />
+    </RefDrawerForm>
+  );
+};
+
+export default UpdateForm;

package/lib/templates/qiankun/cf-workbench-base/src/pages/System/Dictionary/data.d.ts

@@ -0,0 +1,34 @@
+
+export interface TableListItem {
+  dicId: string;
+  dicType: string;
+  dicCode: string;
+  dicName: string;
+  dicValue: string;
+  seqNo: number;
+  parentId: string;
+  status: string;
+}
+
+export interface TableListPagination {
+  total: number;
+  pageSize: number;
+  current: number;
+}
+
+export interface TableListData {
+  list: TableListItem[];
+  pagination: Partial<TableListPagination>;
+}
+
+export interface TableListParams {
+  pageSize?: number;
+  pageIndex?: number;
+  orderBy?: { [key: string]: any };
+  [propName: string]: any;
+
+}
+
+export interface FormValueType extends Partial<TableListItem> {
+
+}

package/lib/templates/qiankun/cf-workbench-base/src/pages/System/Dictionary/index.tsx

@@ -0,0 +1,104 @@
+import { ProColumns, ProTableProps } from '@ant-design/pro-table';
+import { cfmmUtils, CrudTable, MyPageContainer, useIntl } from '@umijs/max';
+import { Tag } from 'antd';
+import React, { useMemo } from 'react';
+import UpdateForm from './components/UpdateForm';
+import { TableListItem } from './data.d';
+import { handleDictionary, queryDicByID, queryDictionary } from './service';
+
+const validList = cfmmUtils.getValidList({ valueMap: { actived: 'Y', unactived: 'N' } });
+
+const baseLocalCode = 'pages.Dictionary';
+const baseLocalName = '字典管理';
+
+//列表数据ID
+const ROW_ID: keyof TableListItem = 'dicId';
+const FORM_INIT_VALUE = {
+  initialValues: {
+    status: 'Y',
+  },
+};
+
+const TableList: React.FC = () => {
+  const { formatMessage } = useIntl();
+
+  const columns = useMemo<ProColumns<TableListItem>[]>(
+    () => [
+      {
+        title: formatMessage({ id: 'pages.Dictionary.column.dicType', defaultMessage: '字典类型' }),
+        dataIndex: 'dicType',
+        sorter: true,
+        copyable: true,
+        formItemProps: { rules: [{ required: true }] },
+      },
+      {
+        title: formatMessage({ id: 'pages.Dictionary.column.dicCode', defaultMessage: '字典编号' }),
+        dataIndex: 'dicCode',
+        sorter: true,
+        copyable: true,
+        formItemProps: { rules: [{ required: true }] },
+      },
+      {
+        title: formatMessage({ id: 'pages.Dictionary.column.dicName', defaultMessage: '字典名称' }),
+        dataIndex: 'dicName',
+        sorter: true,
+      },
+      {
+        title: formatMessage({ id: 'pages.Dictionary.column.dicValue', defaultMessage: '字典键值' }),
+        dataIndex: 'dicValue',
+        sorter: true,
+        copyable: true,
+      },
+      {
+        title: formatMessage({ id: 'pages.Dictionary.column.status', defaultMessage: '状态' }),
+        dataIndex: 'status',
+        sorter: true,
+        valueType: 'select',
+        fieldProps: {
+          options: validList,
+        },
+        formItemProps: { rules: [{ required: true }] },
+        render: (_, record) => {
+          const status = validList.find((item) => item.value === record.status);
+          return status?.label ? <Tag color={status.color}>{status.label}</Tag> : '-';
+        },
+      },
+    ],
+    [],
+  );
+
+  return (
+    <MyPageContainer>
+      <CrudTable<TableListItem, any, ProTableProps<TableListItem, any>>
+        baseLocalCode={baseLocalCode}
+        baseLocalName={baseLocalName}
+        rowKey={ROW_ID}
+        columns={columns}
+        updateConfig={{
+          Component: UpdateForm,
+        }}
+        createConfig={{
+          props: {
+            form: FORM_INIT_VALUE,
+          },
+        }}
+        multiLang={{
+          fields: [
+            {
+              fieldName: 'dicName',
+              columnName: 'dic_name',
+              tableName: 'sys_dic',
+            },
+          ],
+        }}
+        apis={{
+          query: queryDictionary,
+          handle: handleDictionary,
+          queryById: queryDicByID,
+        }}
+      />
+    </MyPageContainer>
+  );
+};
+
+export default TableList;

package/lib/templates/qiankun/cf-workbench-base/src/pages/System/Dictionary/service.ts

@@ -0,0 +1,35 @@
+import { BASE_API } from '@/constants';
+import { request, API } from '@umijs/max';
+import { TableListParams } from './data.d';
+
+export async function queryAllDictionary(params?: TableListParams) {
+  return request(`${BASE_API}/system/dic/list`, {
+    method: 'GET',
+    params,
+  });
+}
+
+export async function queryDictionary(params?: TableListParams) {
+  return request(`${BASE_API}/system/dic/list`, {
+    method: 'GET',
+    params,
+  });
+}
+
+export async function queryDicByID(dicId: number) {
+  return request(`${BASE_API}/system/dic/${dicId}`, {
+    method: 'GET',
+  });
+}
+
+// 增删改查
+export async function handleDictionary(method = 'POST', params: TableListParams) {
+  const actionById = method === 'DELETE' || method === 'GET';
+  const baseUrl = `${BASE_API}/system/dic`;
+  const url = actionById ? `${baseUrl}/${params}` : baseUrl;
+  const nweParams = actionById ? null : { data: { ...params } };
+  return request<API.Result_Base>(url, {
+    method,
+    ...nweParams,
+  });
+}

package/lib/templates/qiankun/cf-workbench-base/src/pages/System/Menu/components/MenuDropDownList.tsx

@@ -0,0 +1,105 @@
+import { TableListItem } from '@/pages/System/Menu/data';
+import { queryAllMenus } from '@/pages/System/Menu/service';
+import { TreeSelect } from 'antd';
+import _ from 'lodash';
+import React, { useEffect, useState } from 'react';
+
+const { TreeNode } = TreeSelect;
+
+export interface MenuDropDownListProps {
+  value?: string | undefined;
+  disabled?: boolean;
+  placeholder?: string;
+  onChange?: any;
+}
+
+const MenuDropDownList: React.FC<MenuDropDownListProps> = (props) => {
+  const { value, onChange } = props;
+
+  const [getMenuData, setMenuData] = useState<TableListItem[]>([]);
+  const [defaultValue, setDefaultValue] = useState<string | undefined>(undefined);
+
+  /**
+   * 设置为默认值
+   */
+  useEffect(() => {
+    if (value) {
+      setDefaultValue(value.toString());
+    }
+  }, [value]);
+
+  useEffect(() => {
+    (async () => {
+      const response = await queryAllMenus();
+
+      if (response.rows && response.rows.length > 0) {
+        setMenuData(response.rows);
+      }
+    })();
+  }, []);
+
+  const GetMenuTree = (parentKey: string, allMenuData: TableListItem[]): object | any => {
+    /**
+     * 定义好菜单数组变量
+     */
+    let menuList: React.ReactNode[] = [];
+
+    if (allMenuData.length > 0) {
+      /**
+       * 找出父级菜单下的所有菜单
+       */
+      let filterSonMenu = _.filter(allMenuData, { parentId: parentKey });
+
+      /**
+       * 菜单树以序号进行排序
+       */
+      filterSonMenu = _.sortBy(filterSonMenu, [
+        function (o: { seqNo: any }) {
+          return o.seqNo;
+        },
+      ]);
+
+      /**
+       * 循环找出的子菜单
+       */
+      menuList = filterSonMenu.map((menuItem: any) => {
+        /**
+         * 递归取出子菜单内容
+         */
+        const sunItem: any = GetMenuTree(menuItem.menuId, allMenuData);
+
+        if (sunItem && sunItem.length > 0) {
+          return (
+            <TreeNode key={menuItem.menuId} value={menuItem.menuId.toString()} title={menuItem.menuName}>
+              {sunItem}
+            </TreeNode>
+          );
+        } else {
+          return <TreeNode key={menuItem.menuId} value={menuItem.menuId.toString()} title={menuItem.menuName} />;
+        }
+      });
+
+      //返回处理好的菜单列表
+      return menuList;
+    }
+
+    return undefined;
+  };
+
+  return (
+    <TreeSelect
+      showSearch
+      style={{ width: '100%' }}
+      value={defaultValue}
+      defaultValue={defaultValue}
+      dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
+      allowClear
+      treeDefaultExpandAll
+      onChange={onChange}
+    >
+      {GetMenuTree('0', getMenuData)}
+    </TreeSelect>
+  );
+};
+
+export default MenuDropDownList;