@ysjdemo/umi-create-cli 0.0.3 → 0.0.4

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

@@ -0,0 +1,177 @@
+import MenuDropDownList from '@/pages/System/Menu/components/MenuDropDownList';
+import { ProFormDigit, ProFormSelect, ProFormText, ProFormTextArea } from '@ant-design/pro-form';
+import {
+  cfmmUtils,
+  DynamicIconItemType,
+  DynamicIconModal,
+  RefDrawerForm,
+  RefDrawerFormRefType,
+  useIntl,
+  useMemoizedFn,
+} from '@umijs/max';
+import { Form } from 'antd';
+import React, { MutableRefObject, useEffect, useState } from 'react';
+import { FormValueType, TableListItem } from '../data.d';
+
+export interface UpdateFormProps {
+  updateDrawerRef: MutableRefObject<RefDrawerFormRefType | undefined>;
+  antdIconList?: DynamicIconItemType[];
+  /** 提交方法，返回true可以控制弹窗关闭 */
+  onSubmit: (values: FormValueType) => Promise<boolean | void>;
+  values: Partial<TableListItem> | null;
+}
+
+const UpdateForm: React.FC<UpdateFormProps> = (props) => {
+  const { formatMessage } = useIntl();
+  const [form] = Form.useForm();
+  const FormItem = Form.Item;
+  const [getIsMenuItem, setIsMenuItem] = useState<boolean>(false);
+  const [iconModalVisible, setIconModalVisible] = useState<boolean>(false);
+
+  useEffect(() => {
+    if (props.values) {
+      form.setFieldsValue({
+        ...props.values,
+      });
+
+      if (props.values.menuType) {
+        setIsMenuItem(props.values.menuType == 'MenuFolder' ? false : true);
+      }
+    }
+  }, [props.values]);
+
+  return (
+    <RefDrawerForm
+      form={form}
+      ref={props.updateDrawerRef}
+      title={formatMessage({
+        id: 'pages.Menu.update.title',
+        defaultMessage: '修改菜单',
+      })}
+      onFinish={props.onSubmit}
+    >
+      <ProFormText name="menuId" disabled hidden />
+      <ProFormText
+        name="menuCode"
+        disabled
+        label={formatMessage({
+          id: 'pages.Menu.column.menuCode',
+          defaultMessage: '菜单编号',
+        })}
+        rules={[{ required: true }]}
+      />
+      <ProFormText
+        name="menuName"
+        label={formatMessage({
+          id: 'pages.Menu.column.menuName',
+          defaultMessage: '菜单名称',
+        })}
+        rules={[{ required: true }]}
+      />
+
+      <ProFormSelect
+        name="menuType"
+        label={formatMessage({
+          id: 'pages.Menu.column.menuType',
+          defaultMessage: '菜单类型',
+        })}
+        valueEnum={{
+          MenuFolder: formatMessage({
+            id: 'pages.Menu.column.menuType.MenuFolder',
+            defaultMessage: '菜单文件夹',
+          }),
+          MenuItem: formatMessage({
+            id: 'pages.Menu.column.menuType.MenuItem',
+            defaultMessage: '菜单项',
+          }),
+        }}
+        fieldProps={{
+          onSelect: (e) => {
+            /**
+             * 选择菜单类型，改变事件将修改其他是否必选项
+             */
+            setIsMenuItem(e == 'MenuFolder' ? false : true);
+          },
+        }}
+        rules={[{ required: true }]}
+      />
+      <ProFormText
+        name="path"
+        label={formatMessage({
+          id: 'pages.Menu.column.path',
+          defaultMessage: '菜单路径',
+        })}
+        rules={[{ required: getIsMenuItem ? true : false }]}
+      />
+      <ProFormText
+        name="icon"
+        label={formatMessage({
+          id: 'pages.Menu.column.icon',
+          defaultMessage: '图标',
+        })}
+      />
+      <ProFormDigit
+        name="seqNo"
+        label={formatMessage({
+          id: 'pages.Menu.column.seqNo',
+          defaultMessage: '排序编号',
+        })}
+        rules={[{ required: getIsMenuItem ? true : false }]}
+      />
+      <FormItem
+        name="parentId"
+        label={formatMessage({
+          id: 'pages.Menu.column.parentId',
+          defaultMessage: '父级菜单',
+        })}
+      >
+        <MenuDropDownList />
+      </FormItem>
+      <ProFormSelect
+        name="hideFlag"
+        label={formatMessage({
+          id: 'pages.Menu.column.hideFlag',
+          defaultMessage: '是否隐藏',
+        })}
+        fieldProps={{
+          options: cfmmUtils.getYesNoList({ valueMap: { yes: 'Y', no: 'N' } }),
+        }}
+        rules={[{ required: true }]}
+      />
+      <ProFormSelect
+        name="status"
+        label={formatMessage({
+          id: 'pages.Menu.column.status',
+          defaultMessage: '状态',
+        })}
+        fieldProps={{
+          options: cfmmUtils.getValidList({ valueMap: { actived: 'Y', unactived: 'N' } }),
+        }}
+        rules={[{ required: true }]}
+      />
+
+      <ProFormTextArea
+        name="remark"
+        label={formatMessage({
+          id: 'pages.Menu.column.remark',
+          defaultMessage: '备注',
+        })}
+      />
+
+      <DynamicIconModal
+        open={iconModalVisible}
+        onCancel={useMemoizedFn(() => {
+          setIconModalVisible(false);
+        })}
+        localIconList={props.antdIconList}
+        initValue={form.getFieldValue('icon')}
+        onOk={useMemoizedFn((selectList) => {
+          form?.setFieldValue('icon', selectList[0].value);
+          setIconModalVisible(false);
+        })}
+      />
+    </RefDrawerForm>
+  );
+};
+
+export default UpdateForm;

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

@@ -0,0 +1,39 @@
+
+export interface TableListItem {
+  children: any;
+  parentEntity: any;
+  menuId: string;
+  menuCode: string;
+  menuName: string;
+  icon: string;
+  hideFlag: string;
+  parentId: string;
+  seqNo: number;
+  path: string;
+  menuType: string;
+  status: string;
+  remark?: 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/Menu/index.tsx

@@ -0,0 +1,334 @@
+import MenuDropDownList from '@/pages/System/Menu/components/MenuDropDownList';
+import { FolderAddOutlined, MenuOutlined } from '@ant-design/icons';
+import { ProFormInstance } from '@ant-design/pro-components';
+import ProTable, { ProColumns } from '@ant-design/pro-table';
+import { message, Tag } from 'antd';
+import _ from 'lodash';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
+import {
+  cfmmUtils,
+  CrudTable,
+  CrudTableRefType,
+  DynamicIconItemType,
+  DynamicIconModal,
+  getAntdIconList,
+  MyPageContainer,
+  useIntl,
+  useMemoizedFn,
+} from 'umi';
+import UpdateForm from './components/UpdateForm';
+import { TableListItem } from './data.d';
+import { handleMenu, queryAllMenus, queryMenuByID } from './service';
+
+const validList = cfmmUtils.getValidList({ valueMap: { actived: 'Y', unactived: 'N' } });
+const yesNoList = cfmmUtils.getYesNoList({ valueMap: { yes: 'Y', no: 'N' } });
+
+const FORM_INIT_VALUE = {
+  initialValues: {
+    hideFlag: 'N',
+    status: 'Y',
+  },
+};
+
+//列表数据ID
+const ROW_ID: keyof TableListItem = 'menuId';
+
+const baseLocalCode = 'pages.Menu';
+const baseLocalName = '菜单管理';
+
+/**
+ * 将菜单变成有上下级结构的数据，但是菜单数据将不能分页
+ * @param parentKey
+ * @param allMenuData
+ * @returns
+ */
+const ProcessMenu = (parentKey: string, allMenuData: TableListItem[]): TableListItem[] | undefined => {
+  if (allMenuData.length > 0) {
+    /**
+     * 找出父级菜单下的所有菜单
+     */
+    let filterSonMenu = _.filter(allMenuData, { parentId: parentKey });
+
+    /**
+     * 进行排序
+     */
+    let filterSonSortMenu = _.sortBy(filterSonMenu, function (o: { seqNo: any }) {
+      return o.seqNo;
+    });
+
+    /**
+     * 循环找出的子菜单
+     */
+    return filterSonSortMenu.map((menuItem: { menuId: string }) => {
+      //子菜单
+      const sunItem = ProcessMenu(menuItem.menuId, allMenuData);
+
+      return sunItem && sunItem.length > 0 ? { ...menuItem, children: sunItem } : menuItem;
+    });
+  }
+
+  return undefined;
+};
+
+const TableList: React.FC = () => {
+  const { formatMessage } = useIntl();
+  const createFormRef = useRef<ProFormInstance>();
+  const crudTableRef = useRef<CrudTableRefType>(null);
+
+  const [antdIconList, setAntdIconList] = useState<DynamicIconItemType[]>([]);
+  const [iconModalVisible, setIconModalVisible] = useState<boolean>(false);
+  const [getIsMenuItem, setIsMenuItem] = useState<boolean>(false);
+
+  const columns = useMemo<ProColumns<TableListItem>[]>(
+    () => [
+      {
+        title: formatMessage({ id: 'pages.Menu.column.menuCode', defaultMessage: '菜单编号' }),
+        dataIndex: 'menuCode',
+        copyable: true,
+        width: 200,
+        formItemProps: { rules: [{ required: true }] },
+      },
+      {
+        title: formatMessage({ id: 'pages.Menu.column.menuName', defaultMessage: '菜单名称' }),
+        dataIndex: 'menuName',
+        copyable: false,
+        formItemProps: { rules: [{ required: true }] },
+      },
+      {
+        title: formatMessage({ id: 'pages.Menu.column.menuType', defaultMessage: '菜单类型' }),
+        dataIndex: 'menuType',
+        sorter: true,
+        valueType: 'select',
+        render: (_, record) => (
+          <>
+            {record.menuType && record.menuType.toUpperCase() === 'MenuFolder'.toUpperCase() && <FolderAddOutlined />}
+            {record.menuType && record.menuType.toUpperCase() === 'MenuItem'.toUpperCase() && <MenuOutlined />}
+          </>
+        ),
+        formItemProps: { rules: [{ required: true }] },
+        fieldProps: {
+          onSelect: (e: string) => {
+            /**
+             * 选择菜单类型，改变事件将修改其他是否必选项
+             */
+            setIsMenuItem(e === 'MenuFolder' ? false : true);
+          },
+        },
+        valueEnum: {
+          MenuFolder: {
+            text: formatMessage({ id: 'pages.Menu.column.menuType.MenuFolder', defaultMessage: '菜单文件夹' }),
+          },
+          MenuItem: {
+            text: formatMessage({ id: 'pages.Menu.column.menuType.MenuItem', defaultMessage: '菜单项' }),
+          },
+        },
+      },
+      {
+        title: formatMessage({ id: 'pages.Menu.column.path', defaultMessage: '菜单路徑' }),
+        dataIndex: 'path',
+        copyable: true,
+        formItemProps: {
+          rules: [{ required: getIsMenuItem ? true : false }],
+        },
+      },
+      {
+        title: formatMessage({ id: 'pages.Menu.column.icon', defaultMessage: '图标' }),
+        dataIndex: 'icon',
+        valueType: 'select',
+        copyable: true,
+        search: false,
+        fieldProps: {
+          options: antdIconList,
+          dropdownStyle: { display: 'none' },
+          onClick: () => setIconModalVisible(true),
+        },
+      },
+      {
+        title: formatMessage({ id: 'pages.Menu.column.seqNo', defaultMessage: '排序编号' }),
+        dataIndex: 'seqNo',
+        sorter: true,
+        valueType: 'digit',
+        search: false,
+        formItemProps: {
+          rules: [{ required: getIsMenuItem ? true : false }],
+        },
+      },
+      {
+        title: formatMessage({ id: 'pages.Menu.column.parentId', defaultMessage: '父级菜单' }),
+        dataIndex: 'parentId',
+        search: false,
+        hideInTable: true,
+        renderFormItem: () => <MenuDropDownList />,
+        render: (_, record) => (
+          <>
+            {record.parentId ? (
+              <div>{`${record.parentEntity.menuName}(${record.parentEntity.menuCode})`}</div>
+            ) : (
+              <div>{'-'}</div>
+            )}
+          </>
+        ),
+      },
+      {
+        title: formatMessage({ id: 'pages.Menu.column.hideFlag', defaultMessage: '是否隐藏' }),
+        dataIndex: 'hideFlag',
+        valueType: 'select',
+        rules: [{ required: true }],
+        fieldProps: {
+          options: yesNoList,
+        },
+        render: (_, record) => {
+          const status = yesNoList.find((item) => item.value === record.hideFlag);
+
+          return status ? <Tag color={status.value === 'N' ? 'success' : 'error'}>{status.label}</Tag> : '-';
+        },
+      },
+      {
+        title: formatMessage({ id: 'pages.Menu.column.status', defaultMessage: '状态' }),
+        dataIndex: 'status',
+        valueType: 'select',
+        formItemProps: { rules: [{ required: true }] },
+        fieldProps: {
+          options: validList,
+        },
+        render: (_, record) => {
+          const status = validList.find((item) => item.value === record.status);
+          return status ? <Tag color={status.color}>{status.label}</Tag> : '-';
+        },
+      },
+      {
+        title: formatMessage({ id: 'pages.Menu.column.remark', defaultMessage: '备注' }),
+        dataIndex: 'remark',
+        valueType: 'textarea',
+        ellipsis: true,
+      },
+    ],
+    [getIsMenuItem],
+  );
+
+  const expandedRowRender = (record: TableListItem) => {
+    return (
+      <ProTable
+        columns={columns}
+        rowKey="menuId"
+        headerTitle={false}
+        search={false}
+        dataSource={record.children || null}
+        pagination={false}
+        expandable={{
+          indentSize: 20,
+          onExpand: (expanded, record) => {
+            expandedRowRender(record);
+          },
+        }}
+        rowSelection={false}
+        options={false}
+      />
+    );
+  };
+
+  useEffect(() => {
+    getAntdIconList()
+      .then((iconList) => {
+        setAntdIconList(iconList);
+      })
+      .catch((err) => {
+        console.log('error', err);
+      });
+  }, []);
+
+  return (
+    <MyPageContainer>
+      <CrudTable<TableListItem>
+        ref={crudTableRef}
+        baseLocalCode={baseLocalCode}
+        baseLocalName={baseLocalName}
+        rowKey={ROW_ID}
+        columns={columns}
+        updateConfig={{
+          Component: UpdateForm,
+          props: {
+            antdIconList,
+          },
+        }}
+        createConfig={{
+          props: {
+            form: FORM_INIT_VALUE,
+            formRef: createFormRef,
+          },
+        }}
+        multiLang={{
+          fields: [
+            {
+              fieldName: 'menuName',
+              columnName: 'menu_name',
+              tableName: 'sys_menu',
+            },
+          ],
+        }}
+        apis={{
+          query: queryAllMenus,
+          handle: handleMenu,
+          queryById: queryMenuByID,
+        }}
+        interceptors={{
+          query: {
+            response(result) {
+              //将数据处理成子菜单的方式
+              result.data = ProcessMenu('0', result.data);
+              return result;
+            },
+          },
+        }}
+        onBeforeAction={(method, fields) => {
+          const editRow = crudTableRef.current?.editRow;
+
+          if (method === 'PUT' && fields.parentId && editRow?.menuId === fields.parentId) {
+            message.error(
+              formatMessage(
+                {
+                  id: 'pages.Menu.update.failMessage',
+                  defaultMessage: '修改菜单失败，请重试！',
+                },
+                {
+                  msg: formatMessage({
+                    id: 'pages.Menu.update.parentIdSame.failMessage',
+                    defaultMessage: '父级菜单不能是自己',
+                  }),
+                },
+              ),
+            );
+
+            return;
+          }
+          return fields;
+        }}
+        tableProps={{
+          rowSelection: false,
+          pagination: false,
+          expandable: {
+            indentSize: 20,
+            onExpand: (expanded, record) => {
+              expandedRowRender(record);
+            },
+          },
+        }}
+      />
+
+      <DynamicIconModal
+        open={iconModalVisible}
+        onCancel={useMemoizedFn(() => {
+          setIconModalVisible(false);
+        })}
+        initValue={createFormRef.current?.getFieldValue('icon')}
+        localIconList={antdIconList}
+        onOk={useMemoizedFn((iconItem) => {
+          createFormRef.current?.setFieldValue('icon', iconItem[0]?.value);
+          setIconModalVisible(false);
+        })}
+      />
+    </MyPageContainer>
+  );
+};
+
+export default TableList;

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

@@ -0,0 +1,34 @@
+import { request, API } from '@umijs/max';
+import { TableListParams } from './data.d';
+import { BASE_API } from '@/constants';
+
+export async function queryAllMenus() {
+  return request(`${BASE_API}/system/menu/list`, {
+    method: 'GET',
+  });
+}
+
+export async function queryMenu(params?: TableListParams) {
+  return request(`${BASE_API}/system/menu/list`, {
+    method: 'GET',
+    params,
+  });
+}
+
+export async function queryMenuByID(menuId: number) {
+  return request(`${BASE_API}/system/menu/${menuId}`, {
+    method: 'GET',
+  });
+}
+
+// 增删改查
+export async function handleMenu(method = 'POST', params: TableListParams) {
+  const actionById = method === 'DELETE' || method === 'GET';
+  const baseUrl = `${BASE_API}/system/menu`;
+  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/MenuPermission/components/UpdateForm.tsx

@@ -0,0 +1,79 @@
+import { ProFormSelect, ProFormText, ProFormTextArea } 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.MenuPermission.update.title',
+        defaultMessage: '修改菜单权限',
+      })}
+      onFinish={props.onSubmit}
+    >
+      <ProFormText name="permissionId" disabled hidden />
+      <ProFormText name="menuId" disabled hidden />
+      <ProFormText
+        name="permissionCode"
+        disabled
+        label={formatMessage({
+          id: 'pages.MenuPermission.column.permissionCode',
+          defaultMessage: '菜单权限编号',
+        })}
+        rules={[{ required: true }]}
+      />
+      <ProFormText
+        name="permissionName"
+        label={formatMessage({
+          id: 'pages.MenuPermission.column.permissionName',
+          defaultMessage: '菜单权限名称',
+        })}
+        rules={[{ required: true }]}
+      />
+      <ProFormSelect
+        name="status"
+        label={formatMessage({
+          id: 'pages.MenuPermission.column.status',
+          defaultMessage: '状态',
+        })}
+        rules={[{ required: true }]}
+        fieldProps={{
+          options: cfmmUtils.getValidList({ valueMap: { actived: 'Y', unactived: 'N' } }),
+        }}
+      />
+
+      <ProFormTextArea
+        name="remark"
+        label={formatMessage({
+          id: 'pages.MenuPermission.column.remark',
+          defaultMessage: '备注',
+        })}
+      />
+    </RefDrawerForm>
+  );
+};
+
+export default React.memo(UpdateForm);

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

@@ -0,0 +1,32 @@
+
+export interface TableListItem {
+  permissionId: string;
+  permissionCode: string;
+  permissionName: string;
+  menuId: string;
+  status: string;
+  remark?: 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> {
+
+}