@ysjdemo/umi-create-cli 0.0.3 → 0.0.4

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

@@ -0,0 +1,199 @@
+import Selectuser from '@/pages/System/User/components/Selectuser';
+import { TableListItem as TableListItems } from '@/pages/System/User/data';
+import { ProFormSelect, ProFormText, ProFormTextArea } from '@ant-design/pro-form';
+import { Button, Col, Form, Row, Select } from 'antd';
+import { SelectValue } from 'antd/lib/select';
+import React, { MutableRefObject, useEffect, useState } from 'react';
+import { cfmmUtils, FormattedMessage, RefDrawerForm, RefDrawerFormRefType, useIntl } from 'umi';
+import { FormValueType, TableListItem } from '../data.d';
+
+export interface UpdateFormProps {
+  updateDrawerRef: MutableRefObject<RefDrawerFormRefType | undefined>;
+  /** 提交方法，返回true可以控制弹窗关闭 */
+  onSubmit: (values: FormValueType) => Promise<boolean | void>;
+  values: Partial<TableListItem> | null;
+  readOnly?: boolean;
+}
+
+const UpdateForm: React.FC<UpdateFormProps> = (props) => {
+  const { formatMessage } = useIntl();
+  const [form] = Form.useForm();
+  const FormItem = Form.Item;
+  const { readOnly } = props;
+  const [showSelectRoleVisible, setShowSelectRoleVisible] = useState<boolean>(false);
+  const [loading, setLoading] = useState<boolean>(false);
+
+  /***
+   * /**
+   * 保存角色
+   */
+  const [userLabel, setuserLabel] = useState<SelectValue[] | any>([]);
+
+  /**
+   * 选择完成用户角色
+   * @param params
+   * @returns
+   */
+  const roleModalAfterClose = (params: { isOk: boolean; rows?: TableListItems[] }) => {
+    setShowSelectRoleVisible(false);
+    if (!params.isOk) return;
+
+    // const rolesMap = params.rows.map(roles => ({ key: roles.roleId, label: roles.roleName }))
+
+    const userMap = [
+      ...(userLabel || []),
+      ...(params.rows || []).map((user: { userId: any; userName: any }) => ({
+        key: user.userId,
+        label: user.userName,
+      })),
+    ].reduce((m, user) => {
+      m.set(user.key, user);
+      return m;
+    }, new Map());
+
+    let users = [];
+    for (let value of userMap.values()) {
+      users.push(value);
+    }
+
+    setuserLabel(users);
+  };
+
+  useEffect(() => {
+    if (props.values) {
+      form.setFieldsValue({
+        ...props.values,
+      });
+
+      /**
+       * 判断角色列表，有且数量不为空
+       */
+      if (props.values.users && props.values.users.length > 0) {
+        setuserLabel(props.values.users.map((item) => ({ key: item.userId, label: item.userName })));
+      } else {
+        //如果没有数据，则变为空
+        setuserLabel([]);
+      }
+    }
+  }, [props.values]);
+
+  /**
+   * 操作角色选择框
+   * @param value
+   */
+  const handleChangeUser = (value: React.SetStateAction<SelectValue[]>) => {
+    setuserLabel(value);
+  };
+
+  /**
+   * 提交方法
+   */
+  const handleSubmit = async (values: FormValueType) => {
+    setLoading(true);
+    //调用父级的方法，同时将用户的角色传回去，这样在父级可以一次性将数据发送给API
+    const result = await props.onSubmit({
+      ...values,
+      userIds: userLabel.map((item: any) => {
+        return item.key;
+      }),
+    });
+    setLoading(false);
+
+    return result;
+  };
+
+  return (
+    <RefDrawerForm
+      loading={loading}
+      form={form}
+      ref={props.updateDrawerRef}
+      title={formatMessage({
+        id: 'pages.Role.update.title',
+        defaultMessage: '修改角色',
+      })}
+      onFinish={handleSubmit}
+    >
+      <ProFormText name="roleId" disabled hidden />
+      <ProFormText
+        name="roleCode"
+        disabled
+        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: '备注',
+        })}
+      />
+    </RefDrawerForm>
+  );
+};
+
+export default UpdateForm;

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

@@ -0,0 +1,48 @@
+import { TabletListItem as UserListItem } from '@/pages/System/User/data';
+
+// export interface UserListItem {
+//   userId: number;
+//   userName: string;
+//   userCode: string;
+//   status: string;
+//   remark?: string;
+// }
+
+export interface TableListItem {
+  userIds: any;
+  rows: any;
+  isOk: boolean;
+  roleId: string;
+  roleCode: string;
+  roleName: string;
+  status: string;
+  remark?: string;
+
+  users: UserListItem[];
+  permissions: any[];
+}
+
+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> {}
+
+export interface PermissionListItem {
+  roleIdList?: string[];
+  permissionIdList: string[];
+}

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

@@ -0,0 +1,261 @@
+import { SafetyCertificateOutlined } from '@ant-design/icons';
+import { ActionType, ProColumns } from '@ant-design/pro-table';
+import { cfmmUtils, CrudTable, MyPageContainer, PermissionSelect, useAction, useAuthority, useIntl } from '@umijs/max';
+import { Row, Tag, Tooltip } from 'antd';
+import React, { useRef, useState } from 'react';
+import CreateForm from './components/CreateForm';
+import UpdateForm from './components/UpdateForm';
+import { PermissionListItem, TableListItem } from './data.d';
+import {
+  handleRole,
+  queryAllPermissionsByRoleID,
+  queryRole,
+  queryRoleByID,
+  saveAllPermissionsByRoleID,
+} from './service';
+
+const validList = cfmmUtils.getValidList({ valueMap: { actived: 'Y', unactived: 'N' } });
+
+const MC_AuthorityCode_AUTH = 'role_auth';
+
+const baseLocalCode = 'pages.Role';
+const baseLocalName = '角色管理';
+
+//列表数据ID
+const ROW_ID: keyof TableListItem = 'roleId';
+
+const TableList: React.FC = () => {
+  const actionRef = useRef<ActionType>();
+  const { formatMessage } = useIntl();
+
+  //是否显示授权框
+  const [selectPermissionModalVisible, handleSelectPermissionModalVisible] = useState<boolean>(false);
+
+  //授权数据，即角色ID
+  const [authorizeFormValues, setAuthorizeFormValues] = useState({ roleId: '' });
+
+  //授权数据，即选中的权限数据
+  const [authorizePermissionValues, setAuthorizePermissionValues] = useState<string[]>([]);
+
+  // 封装增删查改的hooks
+  const { doAction } = useAction({ baseLocalCode, baseLocalName });
+  const { getAuthorityFn } = useAuthority();
+
+  /**
+   * 查询角色权限
+   * @param params
+   */
+  const handleSearchRolePermission = async (roleId: string) => {
+    const { success, data } = await doAction('GET', roleId, {
+      actionFn: queryAllPermissionsByRoleID,
+      showMsg: false,
+    });
+    if (success && data) {
+      return data.map((item: { permissionId: number }) => item.permissionId);
+    }
+    return [];
+  };
+
+  /**
+   * 修改角色权限
+   * @param fields
+   * @returns
+   */
+  const handleUpdateRolePermission = async (params: PermissionListItem) => {
+    const waitingMsg = formatMessage({
+      id: 'pages.Role.authorize.waitingMessage',
+      defaultMessage: '正在给角色授权',
+    });
+    const successMsg = formatMessage({
+      id: 'pages.Role.authorize.successMessage',
+      defaultMessage: '角色授权成功',
+    });
+    const failMsg = formatMessage(
+      {
+        id: 'pages.Role.authorize.failMessage',
+        defaultMessage: '角色授权失败，请重试！',
+      },
+      { msg: undefined },
+    );
+
+    const { success } = await doAction('POST', params, {
+      actionFn: saveAllPermissionsByRoleID,
+      waitingMsg,
+      successMsg,
+      failMsg,
+    });
+
+    return success;
+  };
+
+  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.subjectionUser', defaultMessage: '隶属用户' }),
+      dataIndex: 'userIds',
+      hideInSearch: true,
+      render: (_, record) => {
+        if (!record.users || !record.users?.length) return '-';
+        const firstUser = record.users[0];
+        return (
+          <Tooltip
+            title={record.users.map((userItem) => {
+              return <Row key={userItem.userId}>{userItem.userName}</Row>;
+            })}
+          >
+            <>
+              <span>{firstUser.userName}</span>
+              <span style={{ marginLeft: 8 }}>
+                {formatMessage(
+                  { id: 'pages.Role.column.subjectionUser.more.text', defaultMessage: '等共 {number} 用户' },
+                  { number: record.users.length.toString() },
+                )}
+              </span>
+            </>
+          </Tooltip>
+        );
+      },
+    },
+    {
+      title: formatMessage({ id: 'pages.Role.column.status', defaultMessage: '状态' }),
+      dataIndex: 'status',
+      sorter: true,
+      valueType: 'select',
+      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.Role.column.remark', defaultMessage: '备注' }),
+      dataIndex: 'remark',
+      valueType: 'textarea',
+      ellipsis: true,
+    },
+  ];
+
+  return (
+    <MyPageContainer>
+      <CrudTable<TableListItem>
+        baseLocalCode={baseLocalCode}
+        baseLocalName={baseLocalName}
+        rowKey={ROW_ID}
+        columns={columns}
+        updateConfig={{
+          Component: UpdateForm,
+        }}
+        createConfig={{
+          Component: CreateForm,
+        }}
+        multiLang={{
+          fields: [
+            {
+              fieldName: 'roleName',
+              columnName: 'role_name',
+              tableName: 'sys_role',
+            },
+          ],
+        }}
+        apis={{
+          query: queryRole,
+          handle: handleRole,
+          queryById: queryRoleByID,
+        }}
+        actionColumnConfig={{
+          columnConfig: {
+            fixed: 'right',
+          },
+          getDropdownButtonProps: (record) => ({
+            extraButtonList: [
+              {
+                position: 2,
+                label: (
+                  <span
+                    onClick={async () => {
+                      /**
+                       * 获取角色所有权限
+                       */
+
+                      const allPermissionData = await handleSearchRolePermission(record.roleId);
+                      setAuthorizePermissionValues(allPermissionData);
+
+                      /**
+                       * 打开授权框
+                       */
+                      handleSelectPermissionModalVisible(true);
+
+                      /**
+                       * 设置授权数据
+                       */
+                      setAuthorizeFormValues(record);
+                    }}
+                  >
+                    <SafetyCertificateOutlined style={{ marginRight: '6px' }} />
+                    {formatMessage({ id: 'pages.Role.authorize.button.title', defaultMessage: '授权' })}
+                  </span>
+                ),
+                auth: getAuthorityFn(MC_AuthorityCode_AUTH),
+              },
+            ],
+          }),
+        }}
+      />
+
+      {authorizeFormValues && Object.keys(authorizeFormValues).length ? (
+        <PermissionSelect
+          modalFormVisible={selectPermissionModalVisible}
+          onSubmit={async (value) => {
+            //返回的时候，加入修改的ID
+            const success = await handleUpdateRolePermission({
+              permissionIdList: [...value],
+              roleIdList: [authorizeFormValues.roleId],
+            });
+
+            if (success) {
+              //关闭弹出框
+              handleSelectPermissionModalVisible(false);
+
+              //清除授权时的角色ID数据
+              setAuthorizeFormValues({ roleId: '' });
+
+              //清除授权的权限数据
+              setAuthorizePermissionValues([]);
+
+              //重新加载数据
+              if (actionRef.current) {
+                actionRef.current.reload();
+              }
+            }
+          }}
+          onCancel={() => {
+            //关闭弹出框
+            handleSelectPermissionModalVisible(false);
+
+            //清除授权时的角色ID数据
+            setAuthorizeFormValues({ roleId: '' });
+
+            //清除授权的权限数据
+            setAuthorizePermissionValues([]);
+          }}
+          setModalFormVisible={handleSelectPermissionModalVisible}
+          values={authorizePermissionValues}
+        />
+      ) : null}
+    </MyPageContainer>
+  );
+};
+
+export default TableList;

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

@@ -0,0 +1,44 @@
+import { request, API } from '@umijs/max';
+import { PermissionListItem, TableListParams } from './data.d';
+import { BASE_API } from '@/constants';
+
+export async function queryRole(params?: TableListParams) {
+  return request(`${BASE_API}/system/role/list`, {
+    method: 'GET',
+    params,
+  });
+}
+
+
+export async function queryAllPermissionsByRoleID(roleId: string) {
+  return request(`${BASE_API}/system/userRolePermission/rolePermission/${roleId}`, {
+    method: 'GET',
+  });
+}
+
+export async function saveAllPermissionsByRoleID(params: PermissionListItem) {
+  return request(`${BASE_API}/system/userRolePermission/roleAuthorize`, {
+    method: 'POST',
+    data: {
+      ...params,
+    },
+  });
+}
+
+export async function queryRoleByID(roleId: string) {
+  return request(`${BASE_API}/system/role/${roleId}`, {
+    method: 'GET',
+  });
+}
+
+// 增删改查
+export async function handleRole(method = 'POST', params: TableListParams) {
+  const actionById = method === 'DELETE' || method === 'GET';
+  const baseUrl = `${BASE_API}/system/role`;
+  const url = actionById ? `${baseUrl}/${params}` : baseUrl;
+  const nweParams = actionById ? null : { data: { ...params } };
+  return request<API.Result_Base>(url, {
+    method,
+    ...nweParams,
+  });
+}