@ysjdemo/umi-create-cli 0.0.2 → 0.0.4

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

@@ -0,0 +1,315 @@
+import { queryMenu } from '@/pages/System/Menu/service';
+import { PlusOutlined } from '@ant-design/icons';
+import { PageContainer } from '@ant-design/pro-layout';
+import { ProColumns, ProTableProps } from '@ant-design/pro-table';
+import { Button, Card, Col, message, Row, Tag, Tree } from 'antd';
+import _ from 'lodash';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
+import { cfmmUtils, CrudTable, CrudTableRefType, useAuthority, useIntl, API } from 'umi';
+import UpdateForm from './components/UpdateForm';
+import { TableListItem } from './data.d';
+import { handleMenuPermisson, queryMenuPermissonByID, queryPermission } from './service';
+
+import { TableListItem as MenuItem } from '@/pages/System/Menu/data';
+import { DataNode } from 'rc-tree/lib/interface';
+
+const validList = cfmmUtils.getValidList({ valueMap: { actived: 'Y', unactived: 'N' } });
+
+const MC_AuthorityCode_ADD = 'menuPermission_add';
+
+const baseLocalCode = 'pages.MenuPermission';
+const baseLocalName = '菜单权限管理';
+
+//列表数据ID
+const ROW_ID: keyof TableListItem = 'permissionId';
+const FORM_INIT_VALUE = {
+  initialValues: {
+    status: 'Y',
+  },
+};
+
+/**
+ * 处理菜单的递归方法
+ * @param parentKey
+ * @param allMenuData
+ * @returns
+ */
+const GetMenuTree = (parentKey: string, allMenuData: MenuItem[]): DataNode[] | undefined => {
+  // let menuList: DataNode[];
+
+  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; menuName: any; status: string }) => {
+      //子菜单
+      const sunItem = GetMenuTree(menuItem.menuId, allMenuData);
+
+      //无效菜单会无法点击
+      if (sunItem && sunItem.length > 0) {
+        return {
+          title: menuItem.menuName,
+          key: menuItem.menuId.toString(),
+          disabled: menuItem.status.toUpperCase() == 'Y' ? false : true,
+          children: sunItem,
+        };
+      } else {
+        return {
+          title: menuItem.menuName,
+          key: menuItem.menuId.toString(),
+          disabled: menuItem.status.toUpperCase() == 'Y' ? false : true,
+        };
+      }
+    });
+  }
+
+  return undefined;
+};
+
+const TableList: React.FC = () => {
+  const { formatMessage } = useIntl();
+  const crudTableRef = useRef<CrudTableRefType<TableListItem>>(null);
+
+  //加载的左侧菜单数据
+  const [menuTreeDate, setMenuTreeDate] = useState<DataNode[] | undefined>(undefined);
+  const [loading, setLoading] = useState<boolean>(false);
+  //加载的左侧菜单数据
+  const [selectMenuKey, setSelectMenuKey] = useState<string | any>('');
+
+  const { getAuthorityFn } = useAuthority();
+
+  /**
+   * 只要选中的菜单进行改变，则会处理
+   */
+  useEffect(() => {
+    const actionRef = crudTableRef.current?.actionRef;
+    /**
+     * 当改变菜单，表格则会进行刷新
+     */
+    if (actionRef?.current && !loading) {
+      actionRef.current.clearSelected!();
+      actionRef.current.reload();
+    }
+  }, [selectMenuKey]);
+
+  /**
+   * 首次加载所有的左侧菜单
+   */
+  useEffect(() => {
+    handleSearchAllMenu();
+  }, []);
+
+  /**
+   * 查询出所有菜单
+   * @returns
+   */
+  const handleSearchAllMenu = async () => {
+    setLoading(true);
+    queryMenu().then((data) => {
+      if (data.rows && data.rows.length > 0) {
+        /**
+         * 循环处理子菜单
+         */
+        const allSunMenuData: DataNode[] | undefined = GetMenuTree('0', data.rows);
+
+        /**
+         * 加入根节点
+         */
+        // const allMenuData = [{
+        //   title: formatMessage({
+        //     id: 'pages.MenuPermission.menu.rootNode',
+        //     defaultMessage: '系统菜单',
+        //   }),
+        //   key: '0',
+        //   children: allSunMenuData
+        // }]
+
+        /**
+         * 绑定菜单
+         */
+        setMenuTreeDate(allSunMenuData);
+
+        /**
+         * 重新清空选择菜单ID
+         */
+        setSelectMenuKey(0);
+      }
+    });
+    setLoading(false);
+  };
+
+  /**
+   * 左侧菜单选中事件
+   * @param selectedKeys
+   * @param info
+   */
+  const onSelectMenu = (selectedKeys: React.Key[], info: any) => {
+    //处理数据
+    const getKey = parseInt(selectedKeys[0]?.toString(), 10);
+    setSelectMenuKey(getKey);
+  };
+
+  const columns = useMemo<ProColumns<TableListItem>[]>(
+    () => [
+      {
+        title: formatMessage({ id: 'pages.MenuPermission.column.permissionCode', defaultMessage: '菜单权限编号' }),
+        dataIndex: 'permissionCode',
+        copyable: true,
+        formItemProps: { rules: [{ required: true }] },
+      },
+      {
+        title: formatMessage({ id: 'pages.MenuPermission.column.permissionName', defaultMessage: '菜单权限名称' }),
+        dataIndex: 'permissionName',
+        formItemProps: { rules: [{ required: true }] },
+      },
+      {
+        title: formatMessage({ id: 'pages.MenuPermission.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?.label ? <Tag color={status.color}>{status.label}</Tag> : '-';
+        },
+      },
+      {
+        title: formatMessage({ id: 'pages.MenuPermission.column.remark', defaultMessage: '备注' }),
+        dataIndex: 'remark',
+        valueType: 'textarea',
+        ellipsis: true,
+      },
+    ],
+    [],
+  );
+
+  return (
+    <PageContainer
+      header={{
+        title: null,
+        breadcrumb: {},
+      }}
+    >
+      <Row gutter={16}>
+        <Col span={6}>
+          <Card
+            title={formatMessage({
+              id: 'pages.MenuPermission.menu.title',
+              defaultMessage: '菜单列表',
+            })}
+            extra={[
+              <Button key={1} onClick={() => handleSearchAllMenu()}>
+                {formatMessage({
+                  id: 'pages.MenuPermission.menu.reload',
+                  defaultMessage: '重新加载菜单',
+                })}
+              </Button>,
+            ]}
+          >
+            <Tree
+              checkable={false}
+              defaultExpandAll={true}
+              // defaultExpandedKeys={['0-0-0', '0-0-1']}
+              defaultSelectedKeys={[setSelectMenuKey.toString()]}
+              // defaultCheckedKeys={['0-0-0', '0-0-1']}
+              onSelect={onSelectMenu}
+              // onCheck={onCheck}
+              treeData={menuTreeDate}
+            />
+          </Card>
+        </Col>
+        <Col span={18}>
+          <CrudTable<TableListItem, any, ProTableProps<TableListItem, any>>
+            ref={crudTableRef}
+            baseLocalCode={baseLocalCode}
+            baseLocalName={baseLocalName}
+            rowKey={ROW_ID}
+            columns={columns}
+            updateConfig={{
+              Component: UpdateForm,
+            }}
+            createConfig={{
+              props: {
+                form: FORM_INIT_VALUE,
+              },
+            }}
+            multiLang={{
+              fields: [
+                {
+                  fieldName: 'permissionName',
+                  columnName: 'permission_name',
+                  tableName: 'sys_permission',
+                },
+              ],
+            }}
+            apis={{
+              query: queryPermission,
+              handle: handleMenuPermisson,
+              queryById: queryMenuPermissonByID,
+            }}
+            interceptors={{
+              query: {
+                request: (values) => {
+                  values.menuId = selectMenuKey == 0 ? -1 : selectMenuKey;
+                  return values;
+                },
+              },
+              handle: {
+                request: (method: API.MethodTypes, data: any) => {
+                  if (method === 'POST') {
+                    data.menuId = selectMenuKey;
+                    return { data };
+                  }
+                  return { data };
+                },
+              },
+            }}
+            tableProps={{
+              toolBarRender: () => {
+                if (!getAuthorityFn(MC_AuthorityCode_ADD)) return [];
+                return [
+                  <Button
+                    type="primary"
+                    key={'add'}
+                    onClick={() => {
+                      if (selectMenuKey == 0) {
+                        message.error(
+                          formatMessage({
+                            id: 'pages.MenuPermission.column.menuId.requireMessage',
+                            defaultMessage: '请选择左侧菜单，才能创建菜单权限',
+                          }),
+                        );
+
+                        return;
+                      } else {
+                        crudTableRef.current?.setCreateModalOpen(true);
+                      }
+                    }}
+                  >
+                    <PlusOutlined />
+                    {formatMessage({ id: 'common.button.add', defaultMessage: '新增' })}
+                  </Button>,
+                ];
+              },
+            }}
+          />
+        </Col>
+      </Row>
+    </PageContainer>
+  );
+};
+
+export default TableList;

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

@@ -0,0 +1,34 @@
+import { BASE_API } from '@/constants';
+import { request, API } from '@umijs/max';
+import { TableListParams } from './data.d';
+
+export async function queryAllPermissions() {
+  return request(`${BASE_API}/system/permission/list`, {
+    method: 'GET',
+  });
+}
+
+export async function queryPermission(params?: TableListParams) {
+  return request(`${BASE_API}/system/permission/list`, {
+    method: 'GET',
+    params,
+  });
+}
+
+export async function queryMenuPermissonByID(permissonId: number) {
+  return request(`${BASE_API}/system/permission/${permissonId}`, {
+    method: 'GET',
+  });
+}
+
+// 增删改查
+export async function handleMenuPermisson(method = 'POST', params: TableListParams) {
+  const actionById = method === 'DELETE' || method === 'GET';
+  const baseUrl = `${BASE_API}/system/permission`;
+  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/Role/components/CreateForm.tsx

@@ -0,0 +1,189 @@
+import Selectuser from '@/pages/System/User/components/Selectuser';
+import { TableListItem as TableListItems } from '@/pages/System/User/data';
+import { DrawerForm, ProFormSelect, ProFormText, ProFormTextArea } from '@ant-design/pro-form';
+import { cfmmUtils, FormattedMessage, useIntl } from '@umijs/max';
+import { Button, Col, Form, Row, Select } from 'antd';
+import { SelectValue } from 'antd/lib/select';
+import React, { useEffect, useState } from 'react';
+import { FormValueType, TableListItem } from '../data.d';
+
+interface CreateFormProps {
+  onSubmit: (values: FormValueType) => Promise<void>;
+  onOpenChange: (visible: boolean) => void;
+  open?: boolean;
+  values?: Partial<TableListItem>;
+  readOnly?: boolean;
+}
+
+const FORM_INIT_VALUE = {
+  status: 'Y',
+};
+
+const CreateForm: React.FC<CreateFormProps> = (props) => {
+  const { formatMessage } = useIntl();
+  const [form] = Form.useForm();
+  const FormItem = Form.Item;
+  const [showSelectRoleVisible, setShowSelectRoleVisible] = useState<boolean>(false);
+  const { readOnly, open, onOpenChange } = props;
+  const [loading, setLoading] = useState<boolean>(false);
+
+  /***
+   * /**
+   * 保存角色
+   */
+  const [userLabel, setuserLabel] = useState<SelectValue[]>([]);
+
+  /**
+   * 选择完成用户角色
+   * @param params
+   * @returns
+   */
+  const roleModalAfterClose = (params: { isOk: boolean; rows?: TableListItems[] }) => {
+    setShowSelectRoleVisible(false);
+    if (!params.isOk) return;
+
+    const userMap = [
+      ...(userLabel || []),
+      ...(params.rows || []).map((user) => ({ key: user.userId, label: user.userName })),
+    ].reduce((m, user: any) => {
+      m.set(user.key, user);
+      return m;
+    }, new Map());
+
+    let users = [];
+    for (let value of userMap.values()) {
+      users.push(value);
+    }
+
+    console.log(`选择角色完成后${JSON.stringify(users)}`);
+
+    setuserLabel(users);
+  };
+
+  useEffect(() => {
+    if (form && !props.open) {
+      form.resetFields();
+      setuserLabel([]);
+    }
+  }, [props.open]);
+
+  /**
+   * 操作角色选择框
+   * @param value
+   */
+  const handleChangeUser = (value: React.SetStateAction<SelectValue[]>) => {
+    setuserLabel(value);
+  };
+
+  /**
+   * 提交方法
+   */
+  const handleSubmit = async (values: FormValueType) => {
+    setLoading(true);
+    //调用父级的方法，同时将用户的角色传回去，这样在父级可以一次性将数据发送给API
+    await props.onSubmit?.({
+      ...values,
+      userIds: userLabel.map((item: any) => {
+        return item?.key;
+      }),
+    });
+    setLoading(false);
+  };
+
+  return (
+    <DrawerForm
+      form={form}
+      width={500}
+      title={formatMessage({
+        id: 'pages.Role.create.title',
+        defaultMessage: '新增角色',
+      })}
+      open={open}
+      initialValues={FORM_INIT_VALUE}
+      onOpenChange={onOpenChange}
+      onFinish={handleSubmit}
+      loading={loading}
+    >
+      <ProFormText
+        name="roleCode"
+        label={formatMessage({
+          id: 'pages.Role.column.roleCode',
+          defaultMessage: '角色编号',
+        })}
+        rules={[{ required: true }]}
+      />
+
+      <ProFormText
+        name="roleName"
+        label={formatMessage({
+          id: 'pages.Role.column.roleName',
+          defaultMessage: '角色名称',
+        })}
+        rules={[{ required: true }]}
+      />
+
+      <FormItem>
+        <Row>
+          <Col span={4} className="ant-form-item-label">
+            <Row>
+              <Col>
+                {' '}
+                <label title="隶属用户">
+                  <FormattedMessage id="pages.Role.column.subjectionUser" defaultMessage="隶属用户" />
+                </label>
+              </Col>
+              {readOnly ? null : (
+                <Col style={{ paddingRight: 8, paddingBlockStart: 10 }}>
+                  <Button
+                    type="primary"
+                    size="small"
+                    style={{ padding: '0 12px' }}
+                    onClick={() => setShowSelectRoleVisible(true)}
+                  >
+                    <FormattedMessage id="pages.Role.select" defaultMessage="选择" />
+                  </Button>
+                  <Selectuser visible={showSelectRoleVisible} onAfterClose={roleModalAfterClose} />
+                </Col>
+              )}
+            </Row>
+          </Col>
+          <Col span={16}>
+            <Select
+              className="select-user"
+              disabled={readOnly}
+              mode="multiple"
+              labelInValue
+              notFoundContent={null}
+              filterOption={false}
+              style={{ width: '125%' }}
+              value={userLabel}
+              onChange={handleChangeUser}
+            ></Select>
+          </Col>
+        </Row>
+      </FormItem>
+
+      <ProFormSelect
+        name="status"
+        label={formatMessage({
+          id: 'pages.Role.column.status',
+          defaultMessage: '状态',
+        })}
+        fieldProps={{
+          options: cfmmUtils.getValidList({ valueMap: { actived: 'Y', unactived: 'N' } }),
+        }}
+        rules={[{ required: true }]}
+      />
+
+      <ProFormTextArea
+        name="remark"
+        label={formatMessage({
+          id: 'pages.Role.column.remark',
+          defaultMessage: '备注',
+        })}
+      />
+    </DrawerForm>
+  );
+};
+
+export default CreateForm;

package/lib/templates/qiankun/cf-workbench-base/src/pages/System/Role/components/SelectRole.tsx

@@ -0,0 +1,158 @@
+import { FormValueType, TableListItem, TableListParams } from '@/pages/System/Role/data';
+import { queryRole } from '@/pages/System/Role/service';
+import { TableListItem as TableListItems } from '@/pages/System/User/data';
+import ProTable, { ActionType, ProColumns } from '@ant-design/pro-table';
+import { FormattedMessage, useIntl } from '@umijs/max';
+import { Button, message, Modal } from 'antd';
+import React, { useRef, useState } from 'react';
+
+interface SelectRoleProps {
+  onSubmit?: (values: FormValueType) => Promise<void>;
+  setModalVisit?: (visible: boolean) => void;
+  values?: boolean;
+  onCancel?: () => void;
+  visible?: boolean;
+  onAfterClose?: (params: { isOk: boolean; rows: TableListItems }) => void;
+}
+
+const SelectRole: React.FC<SelectRoleProps> = (props: any) => {
+  const { formatMessage } = useIntl();
+  const actionRef = useRef<ActionType>();
+
+  const [selectedRowsState, setSelectedRows] = useState<TableListItem[]>([]);
+
+  /**
+   * 查询角色列表
+   * @param params
+   * @returns
+   */
+  const handleSearch = async (params?: TableListParams) => {
+    const hide = message.loading(
+      formatMessage({
+        id: 'pages.User.query.waitingMessage',
+        defaultMessage: '正在查询用户',
+      }),
+    );
+    try {
+      const result = await queryRole(params);
+
+      // 返回数据处理
+      if (result && result.code == 200) {
+        hide();
+        return {
+          data: result.rows,
+          total: result.total,
+          success: true,
+        };
+      } else {
+        hide();
+        /*
+        message.error(formatMessage({
+          id: 'pages.User.query.failMessage',
+          defaultMessage: '查询用户失败，请重试！',
+        }, { msg: result.msg }));
+        */
+        return {
+          data: [],
+          total: 0,
+          success: false,
+        };
+      }
+    } catch (error) {
+      hide();
+      message.error(
+        formatMessage(
+          {
+            id: 'pages.User.query.failMessage',
+            defaultMessage: '查询用户失败，请重试！',
+          },
+          { msg: JSON.stringify(error) },
+        ),
+      );
+      // console.log(error);
+      return {
+        data: [],
+        total: 0,
+        success: false,
+      };
+    }
+  };
+
+  const columns: ProColumns<TableListItem>[] = [
+    {
+      title: formatMessage({ id: 'pages.Role.column.roleCode', defaultMessage: '角色编号' }),
+      dataIndex: 'roleCode',
+      sorter: true,
+      copyable: true,
+    },
+    {
+      title: formatMessage({ id: 'pages.Role.column.roleName', defaultMessage: '角色名称' }),
+      dataIndex: 'roleName',
+      sorter: true,
+    },
+    {
+      title: formatMessage({ id: 'pages.Role.column.remark', defaultMessage: '备注' }),
+      dataIndex: 'remark',
+      ellipsis: true,
+    },
+  ];
+
+  const hangleOk = () => {
+    props.onAfterClose({ isOk: true, rows: selectedRowsState });
+  };
+
+  const handleCancel = () => {
+    props.onAfterClose({ isOk: false });
+  };
+
+  return (
+    <Modal
+      width={800}
+      open={props.visible}
+      destroyOnClose
+      title={formatMessage({
+        id: 'pages.User.selectRole.title',
+        defaultMessage: '角色列表',
+      })}
+      onCancel={handleCancel}
+      footer={[
+        <Button key="back" onClick={handleCancel}>
+          <FormattedMessage id="common.pages.updateForm.reset.button.text" defaultMessage="取消" />
+        </Button>,
+        <Button key="submit" type="primary" onClick={hangleOk}>
+          <FormattedMessage id="common.pages.updateForm.submit.button.text" defaultMessage="提交" />
+        </Button>,
+      ]}
+    >
+      <ProTable<TableListItem>
+        actionRef={actionRef}
+        rowKey="roleId"
+        search={{
+          labelWidth: 120,
+        }}
+        request={async (params, sorter, filter) => {
+          // 获取出来参数，将当前页面current和页数据大小pageSize提取出来
+          const { current, pageIndex = params.current, pageSize, ...otherParams } = params;
+
+          // 强制将其他参数存放至filter中，这些参数从查询form中来
+          filter = otherParams;
+          //调用后台API
+          const result = await handleSearch({ pageIndex, pageSize, orderBy: { ...sorter }, ...filter });
+
+          return result;
+        }}
+        columns={columns}
+        //批量选择
+        rowSelection={{
+          onChange: (_, selectedRows) => setSelectedRows(selectedRows),
+        }}
+        pagination={{
+          showQuickJumper: true,
+        }}
+        toolBarRender={false}
+      />
+    </Modal>
+  );
+};
+
+export default SelectRole;