@ysjdemo/umi-create-cli 0.0.3 → 0.0.4

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

@@ -0,0 +1,222 @@
+import SelectRole from '@/pages/System/Role/components/SelectRole';
+import { ProFormSelect, ProFormText, ProFormTextArea } from '@ant-design/pro-form';
+import { cfmmUtils, RefDrawerForm, RefDrawerFormRefType, useIntl } from '@umijs/max';
+import { Button, Col, Form, Row, Select } from 'antd';
+import { SelectValue } from 'antd/lib/select';
+import React, { MutableRefObject, useEffect, useState } from 'react';
+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: any) => {
+  const { formatMessage } = useIntl();
+  const [form] = Form.useForm();
+  const [showSelectRoleVisible, setShowSelectRoleVisible] = useState<boolean>(false);
+  const FormItem = Form.Item;
+  const { readOnly } = props;
+
+  /**
+   * 保存用户角色
+   */
+  const [roleLabel, setRoleLabel] = useState<SelectValue[] | any>([]);
+
+  /**
+   * 选择完成用户角色
+   * @param params
+   * @returns
+   */
+  const roleModalAfterClose = (params: any) => {
+    setShowSelectRoleVisible(false);
+
+    if (!params.isOk) return;
+
+    const roleMap = [
+      ...(roleLabel || []),
+      ...params.rows.map((role: any) => ({ key: role.roleId, label: role.roleName })),
+    ].reduce((m, role) => {
+      m.set(role.key, role);
+      return m;
+    }, new Map());
+
+    let roles = [];
+    for (let value of roleMap.values()) {
+      roles.push(value);
+    }
+
+    setRoleLabel(roles);
+  };
+
+  useEffect(() => {
+    if (props.values) {
+      form.setFieldsValue({
+        ...props.values,
+      });
+
+      /**
+       * 判断用户角色列表，有且数量不为空
+       */
+      if (props.values.roles && props.values.roles.length > 0) {
+        setRoleLabel(
+          props.values.roles.map((item: { roleId: number; roleName: string }) => ({
+            key: item.roleId,
+            label: item.roleName,
+          })),
+        );
+      } else {
+        //如果没有数据，则变为空
+        setRoleLabel([]);
+      }
+    }
+  }, [props.values]);
+
+  /**
+   * 操作角色选择框
+   * @param value
+   */
+  const handleChangeRole = (value: any) => {
+    setRoleLabel(value);
+  };
+
+  /**
+   * 提交方法
+   */
+  const handleSubmit = async (values: any) => {
+    //传入的参数应该是原本生成的数据
+    return await props.onSubmit({
+      ...values,
+      roleIds: roleLabel.map((item: any) => {
+        return item.key;
+      }),
+    });
+  };
+
+  return (
+    <RefDrawerForm
+      form={form}
+      ref={props.updateDrawerRef}
+      title={formatMessage({
+        id: 'pages.User.update.title',
+        defaultMessage: '修改用户',
+      })}
+      onFinish={handleSubmit}
+    >
+      <ProFormText name="userId" disabled hidden />
+      <ProFormText
+        name="userCode"
+        disabled
+        label={formatMessage({
+          id: 'pages.User.column.userCode',
+          defaultMessage: '用户编号',
+        })}
+        rules={[{ required: true }]}
+      />
+      <ProFormText
+        name="userName"
+        label={formatMessage({
+          id: 'pages.User.column.userName',
+          defaultMessage: '用户姓名',
+        })}
+        rules={[{ required: true }]}
+      />
+      <ProFormText
+        name="nickName"
+        label={formatMessage({
+          id: 'pages.User.column.nickName',
+          defaultMessage: '昵称',
+        })}
+      />
+      <ProFormText
+        name="phone"
+        label={formatMessage({
+          id: 'pages.User.column.phone',
+          defaultMessage: '电话',
+        })}
+      />
+      <ProFormText
+        name="email"
+        label={formatMessage({
+          id: 'pages.User.column.email',
+          defaultMessage: 'email',
+        })}
+      />
+      <ProFormSelect
+        name="sex"
+        label={formatMessage({
+          id: 'pages.User.column.sex',
+          defaultMessage: '性别',
+        })}
+        rules={[{ required: true }]}
+        fieldProps={{
+          options: cfmmUtils.getSexList(),
+        }}
+      />
+      <FormItem>
+        <Row>
+          <Col span={4} className="ant-form-item-label">
+            <Row>
+              <Col>
+                {' '}
+                <label title="隶属角色">
+                  {formatMessage({ id: 'pages.User.column.subjectionRole', defaultMessage: '隶属角色' })}
+                </label>
+              </Col>
+              {readOnly ? null : (
+                <Col style={{ paddingRight: 8, paddingBlockStart: 10 }}>
+                  <Button
+                    type="primary"
+                    size="small"
+                    style={{ padding: '0 12px' }}
+                    onClick={() => setShowSelectRoleVisible(true)}
+                  >
+                    {formatMessage({ id: 'pages.User.select', defaultMessage: '选择' })}
+                  </Button>
+                  <SelectRole visible={showSelectRoleVisible} onAfterClose={roleModalAfterClose} />
+                </Col>
+              )}
+            </Row>
+          </Col>
+          <Col span={16}>
+            <Select
+              className="select-role"
+              disabled={readOnly}
+              mode="multiple"
+              labelInValue
+              notFoundContent={null}
+              filterOption={false}
+              style={{ width: '125%' }}
+              value={roleLabel}
+              onChange={handleChangeRole}
+            ></Select>
+          </Col>
+        </Row>
+      </FormItem>
+      <ProFormSelect
+        name="status"
+        label={formatMessage({
+          id: 'pages.User.column.isActive',
+          defaultMessage: '有效性',
+        })}
+        rules={[{ required: true }]}
+        fieldProps={{
+          options: cfmmUtils.getValidList({ valueMap: { actived: 'Y', unactived: 'N' } }),
+        }}
+      />
+
+      <ProFormTextArea
+        name="remark"
+        label={formatMessage({
+          id: 'pages.User.column.remark',
+          defaultMessage: '备注',
+        })}
+      />
+    </RefDrawerForm>
+  );
+};
+
+export default React.memo(UpdateForm);

package/lib/templates/qiankun/cf-workbench-base/src/pages/System/User/components/UserListModal.tsx

@@ -0,0 +1,171 @@
+import { ActionType, ProColumns, ProTable } from '@ant-design/pro-components';
+import { cfmmUtils, useIntl, useQueryTableList } from '@umijs/max';
+import { Modal, Tag, message } from 'antd';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { TableListItem, TableListParams } from '../data';
+import { queryUser } from '../service';
+
+interface IProps {
+  showColKeys?: Array<keyof TableListItem>;
+  // 列表过滤条件
+  otherFilterValue?: object;
+  rowSelectionType?: 'checkbox' | 'radio';
+  defautlSelectRowKeys?: React.Key[];
+  disabledKeys?: React.Key[];
+  open: boolean;
+  onCancel: () => void;
+  onOk: (keys: React.Key[], rows: TableListItem[], handleInit: () => void) => void;
+}
+
+const baseLocalCode = 'pages.User';
+const baseLocalName = '员工';
+
+const EmployeeListModal = (props: IProps) => {
+  const {
+    open,
+    onCancel,
+    onOk,
+    defautlSelectRowKeys,
+    disabledKeys = [],
+    rowSelectionType = 'checkbox',
+    showColKeys = ['userCode', 'userName', 'status'],
+    otherFilterValue,
+  } = props;
+  const { formatMessage } = useIntl();
+  const { queryList } = useQueryTableList({ baseLocalCode, baseLocalName });
+  const actionRef = useRef<ActionType>();
+  const [selectedRows, setSelectedRows] = useState<TableListItem[]>([]);
+  const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);
+  const [dataSource, setDataSource] = useState<TableListItem[]>([]);
+  const [total, setTotal] = useState<number>(0);
+  const handleInit = () => {
+    actionRef?.current?.clearSelected!();
+  };
+
+  const handleCancel = useCallback(() => {
+    handleInit();
+    onCancel();
+  }, []);
+
+  const handleSubmit = () => {
+    if (!selectedRowKeys.length) {
+      message.warning(formatMessage({ id: 'pages.User.select.requireMessage', defaultMessage: '请选择员工' }));
+      return;
+    }
+    onOk(selectedRowKeys, selectedRows, handleInit);
+  };
+
+  /**
+   * 查询表格数据
+   * @param params
+   * @returns
+   */
+  const handleSearch = async (params: TableListParams) => {
+    const result = await queryList<TableListItem[]>(params, {
+      queryFn: queryUser,
+    });
+    setDataSource(result.data);
+    setTotal(result.total);
+    return result;
+  };
+
+  const allColumns: ProColumns<TableListItem>[] = [
+    {
+      title: formatMessage({ id: 'pages.User.column.userCode', defaultMessage: '用户编号' }),
+      dataIndex: 'userCode',
+      sorter: true,
+      copyable: true,
+    },
+    {
+      title: formatMessage({ id: 'pages.User.column.userName', defaultMessage: '用户姓名' }),
+      dataIndex: 'userName',
+      sorter: true,
+    },
+    {
+      title: formatMessage({ id: 'pages.User.column.status', defaultMessage: '状态' }),
+      dataIndex: 'status',
+      sorter: true,
+      valueType: 'select',
+      render: (_, record) => {
+        const status = cfmmUtils
+          .getValidList({ valueMap: { actived: 'Y', unactived: 'N' } })
+          .find((item) => item.value === record.status);
+        return status?.label ? <Tag color={status.color}>{status.label}</Tag> : '-';
+      },
+    },
+  ];
+
+  const columns = allColumns.filter((item) => showColKeys.includes(item.dataIndex as keyof TableListItem));
+
+  useEffect(() => {
+    if (defautlSelectRowKeys) {
+      setSelectedRowKeys(defautlSelectRowKeys.filter(Boolean));
+      setSelectedRows(dataSource.filter((item) => defautlSelectRowKeys.includes(item.userId)));
+    }
+  }, [defautlSelectRowKeys, dataSource]);
+
+  return (
+    <Modal
+      title={formatMessage({
+        id: 'pages.User.modal.title',
+        defaultMessage: '用户信息',
+      })}
+      maskClosable={false}
+      width={600}
+      zIndex={1001}
+      open={open}
+      onOk={handleSubmit}
+      onCancel={handleCancel}
+    >
+      <ProTable<TableListItem>
+        actionRef={actionRef}
+        columns={columns}
+        request={async (params, sorter) => {
+          // 获取出来参数，将当前页面current和页数据大小pageSize提取出来
+          const { pageIndex = params.current, pageSize, ...otherParams } = params;
+
+          // 强制将其他参数存放至filter中，这些参数从查询form中来
+          const filters = otherParams;
+
+          const newParams = {
+            pageIndex,
+            pageSize,
+            orderBy: { ...sorter },
+            ...otherFilterValue,
+            ...filters,
+          };
+          //调用后台API
+          const result = await handleSearch(newParams);
+          return {
+            data: result.data,
+            total: result.total,
+          };
+        }}
+        toolBarRender={false}
+        revalidateOnFocus={false}
+        rowKey="userId"
+        pagination={{
+          showSizeChanger: true,
+          pageSizeOptions: ['10', '20', '50', '100'],
+          total: total,
+        }}
+        search={cfmmUtils.getTableSearchFormLayout()}
+        rowSelection={{
+          type: rowSelectionType,
+          selectedRowKeys: selectedRowKeys,
+          onChange: (selectedRowKeys, selectedRows) => {
+            setSelectedRows(selectedRows);
+            setSelectedRowKeys(selectedRowKeys);
+          },
+          getCheckboxProps: (record) => ({
+            // 如果disabledKeys包含record中的id字段，则禁用该行的勾选框
+            disabled: disabledKeys.includes(record.userId),
+          }),
+        }}
+        dateFormatter="string"
+      />
+    </Modal>
+  );
+};
+
+export default React.memo(EmployeeListModal);

package/lib/templates/qiankun/cf-workbench-base/src/pages/System/User/components/UserWorkCenterMappingSelector.tsx

@@ -0,0 +1,108 @@
+import { ModalForm } from '@ant-design/pro-form';
+import { useIntl } from '@umijs/max';
+import { Form, Select } from 'antd';
+import React, { useEffect, useState } from 'react';
+import { MouldSelectList } from '../data';
+import { queryWorkCenter } from '../service';
+
+const { Option } = Select;
+
+export interface UserWorkCenterMappingSelectorProps {
+  modalFormVisible: boolean;
+  setModalFormVisible: (visible: boolean) => void;
+  onSubmit: any;
+  values?: string[];
+  onCancel: any;
+}
+
+/**
+ * 选择权限组件
+ * @param props
+ * @returns
+ */
+const UserWorkCenterMappingSelector: React.FC<UserWorkCenterMappingSelectorProps> = (props) => {
+  const intl = useIntl();
+  const [form] = Form.useForm();
+
+  const [getAllFactoryData, setAllFactoryData] = useState<MouldSelectList[]>([]);
+
+  /**
+   * 选择的权限数据
+   */
+  const [getSelectFactoryList, setSelectFactoryList] = useState<string[]>([]);
+
+  /**
+   * 加载中标识
+   */
+  const [loading, setLoading] = useState<boolean>(false);
+
+  //加载数据
+  useEffect(() => {
+    (async () => {
+      setLoading(true);
+      const response = await queryWorkCenter();
+
+      if (response.rows && response.rows.length > 0) {
+        setAllFactoryData(response.rows);
+      }
+
+      setLoading(false);
+    })();
+  }, []);
+
+  useEffect(() => {
+    if (props.values) {
+      setSelectFactoryList(props.values);
+    } else {
+      setSelectFactoryList([]);
+    }
+  }, [props.values]);
+
+  /**
+   * 提交方法
+   */
+  const handleSubmit = async () => {
+    if (loading) return;
+    setLoading(true);
+    //调用父级的方法
+    await props.onSubmit(getSelectFactoryList.map((i) => parseInt(i)));
+    setLoading(false);
+    //弹出框关闭后，清除选择的数据
+    setSelectFactoryList([]);
+  };
+
+  /**
+   * 选择事件
+   * @param value
+   */
+  const handleChange = (value: string[]) => {
+    setSelectFactoryList(value);
+  };
+
+  return (
+    <ModalForm
+      loading={loading}
+      form={form}
+      width={500}
+      title={intl.formatMessage({
+        id: 'pages.User.dataAuthorize.SetupTitle',
+        defaultMessage: '用户数据授权',
+      })}
+      open={props.modalFormVisible}
+      onOpenChange={props.setModalFormVisible}
+      onFinish={handleSubmit}
+    >
+      <Select mode="multiple" onChange={handleChange} allowClear value={getSelectFactoryList} style={{ width: '100%' }}>
+        {getAllFactoryData.map((item) => {
+          return (
+            <Option key={item.centerId.toString()} value={item.centerId.toString()}>
+              {item.centerName}
+            </Option>
+          );
+        })}
+      </Select>
+    </ModalForm>
+  );
+};
+
+export default UserWorkCenterMappingSelector;

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

@@ -0,0 +1,69 @@
+import { TableListItem as RoleListItem } from '@/pages/System/Role/data';
+
+// export interface RoleListItem {
+//   roleId: number;
+//   roleName: string;
+//   roleCode: string;
+//   status: string;
+//   remark?: string;
+// }
+
+export interface TableListItem {
+  map: any;
+  roleName: string;
+  roleId: string;
+  userId: string;
+  userCode: string;
+  userName: string;
+  password: string;
+  nickName: string;
+  userType?: string;
+  email?: string;
+  phone?: string;
+  sex: string;
+  status: string;
+  avatar?: string;
+  remark?: string;
+  roles: RoleListItem[];
+  permissions: any[];
+  roleIds?: number[];
+}
+
+export interface ChangePasswordItem {
+  userCode: string;
+  password: string;
+  confirmPassword: 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> {
+
+}
+
+export interface PermissionListItem {
+  userIdList?: string[];
+  permissionIdList: string[];
+}
+
+export interface MouldSelectList {
+  centerId: number;
+  centerName: string
+}