@ysjdemo/umi-create-cli 0.0.2 → 0.0.4

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

@@ -0,0 +1,74 @@
+import { ProFormText, ProFormTextArea } from '@ant-design/pro-form';
+import { RefDrawerForm, RefDrawerFormRefType, useIntl } from '@umijs/max';
+import { Form } from 'antd';
+import React, { MutableRefObject, useEffect } from 'react';
+import { FormValueType, TableListItem } from '../data';
+
+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.TimeZone.update.title',
+        defaultMessage: '修改时区',
+      })}
+      onFinish={props.onSubmit}
+    >
+      <ProFormText name="id" disabled hidden />
+      <ProFormText
+        name="zoneId"
+        disabled
+        label={formatMessage({
+          id: 'pages.TimeZone.column.code',
+          defaultMessage: '时区编号',
+        })}
+        rules={[{ required: true }]}
+      />
+      <ProFormText
+        name="zoneName"
+        label={formatMessage({
+          id: 'pages.TimeZone.column.name',
+          defaultMessage: '时区名称',
+        })}
+        rules={[{ required: true }]}
+      />
+      <ProFormText
+        name="utcOffset"
+        label={formatMessage({
+          id: 'pages.TimeZone.column.utcOffset',
+          defaultMessage: '偏移量',
+        })}
+        rules={[{ required: true }, { pattern: /^(UTC[+-][0-9]{2}:[0-5][0-9])$/, message: '格式不正确(UTC+08:00)' }]}
+      />
+
+      <ProFormTextArea
+        name="remark"
+        label={formatMessage({
+          id: 'pages.TimeZone.column.remark',
+          defaultMessage: '备注',
+        })}
+      />
+    </RefDrawerForm>
+  );
+};
+
+export default React.memo(UpdateForm);

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

@@ -0,0 +1,13 @@
+import { API } from '@umijs/max';
+
+export type TableListItem = {
+  id: string;
+  zoneId: string;
+  zoneName: string;
+  centerCode: string;
+  utcOffset: string;
+};
+
+export type TableListParams = API.TableListParams;
+
+export type FormValueType = Partial<TableListItem>;

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

@@ -0,0 +1,91 @@
+import type { ProColumns } from '@ant-design/pro-components';
+import { CrudTable, MyPageContainer, useIntl } from '@umijs/max';
+import React, { useMemo } from 'react';
+import UpdateForm from './components/UpdateForm';
+import { TableListItem } from './data';
+import { handleTimeZoneAction, queryTableList, queryTimeZoneByID } from './services';
+
+const baseLocalCode = 'pages.TimeZone';
+const baseLocalName = '时区';
+
+//列表数据ID
+const ROW_ID: keyof TableListItem = 'id';
+
+const TableList: React.FC = () => {
+  const { formatMessage } = useIntl();
+
+  const columns = useMemo<ProColumns<TableListItem>[]>(
+    () => [
+      {
+        title: formatMessage({
+          id: 'pages.TimeZone.column.code',
+          defaultMessage: '编号',
+        }),
+        dataIndex: 'zoneId',
+        sorter: true,
+        copyable: true,
+        formItemProps: { rules: [{ required: true }] },
+      },
+      {
+        title: formatMessage({
+          id: 'pages.TimeZone.column.name',
+          defaultMessage: '名称',
+        }),
+        dataIndex: 'zoneName',
+        sorter: true,
+        formItemProps: { rules: [{ required: true }] },
+      },
+      {
+        title: formatMessage({
+          id: 'pages.TimeZone.column.utcOffset',
+          defaultMessage: '偏移量',
+        }),
+        dataIndex: 'utcOffset',
+        sorter: false,
+        formItemProps: {
+          rules: [{ required: true }, { pattern: /^(UTC[+-][0-9]{2}:[0-5][0-9])$/, message: '格式不正确(UTC+08:00)' }],
+        },
+      },
+      {
+        title: formatMessage({
+          id: 'pages.TimeZone.column.remark',
+          defaultMessage: '备注',
+        }),
+        dataIndex: 'remark',
+        sorter: false,
+        hideInSearch: true,
+      },
+    ],
+    [],
+  );
+
+  return (
+    <MyPageContainer>
+      <CrudTable<TableListItem>
+        baseLocalCode={baseLocalCode}
+        baseLocalName={baseLocalName}
+        rowKey={ROW_ID}
+        columns={columns}
+        updateConfig={{
+          Component: UpdateForm,
+        }}
+        multiLang={{
+          fields: [
+            {
+              fieldName: 'zoneName',
+              columnName: 'zone_name',
+              tableName: 'time_zone',
+            },
+          ],
+        }}
+        apis={{
+          query: queryTableList,
+          handle: handleTimeZoneAction,
+          queryById: queryTimeZoneByID,
+        }}
+      />
+    </MyPageContainer>
+  );
+};
+
+export default TableList;

package/lib/templates/qiankun/cf-workbench-base/src/pages/System/TimeZone/services.ts

@@ -0,0 +1,32 @@
+import { request, API } from '@umijs/max';
+import { TableListItem, TableListParams } from './data';
+import { BASE_API } from '@/constants';
+
+export async function queryTableList(params: TableListParams) {
+  return request<API.Result_Base_List<TableListItem[]>>(`${BASE_API}/system/timeZone/list`, {
+    method: 'GET',
+    params,
+  });
+}
+
+//增删改查
+export async function handleTimeZoneAction(
+  method = 'POST',
+  params: TableListParams,
+) {
+  const actionById = method === 'DELETE' || method === 'GET';
+  const baseUrl = `${BASE_API}/system/timeZone`;
+  const url = actionById ? `${baseUrl}/${params}` : baseUrl;
+  const nweParams = actionById ? null : { data: { ...params } };
+  return request<API.Result_Base>(url, {
+    method,
+    ...nweParams,
+  });
+}
+
+
+export async function queryTimeZoneByID(id: number) {
+  return request<API.Result_Base<TableListItem>>(`${BASE_API}/system/timeZone/${id}`, {
+    method: 'GET',
+  });
+}

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

@@ -0,0 +1,235 @@
+import SelectRole from '@/pages/System/Role/components/SelectRole';
+import { DrawerForm, ProFormSelect, ProFormText, ProFormTextArea } from '@ant-design/pro-form';
+import { cfmmUtils, 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',
+  sex: 'male',
+};
+
+const CreateForm: React.FC<CreateFormProps> = (props: any) => {
+  const { formatMessage } = useIntl();
+  const [form] = Form.useForm();
+  const FormItem = Form.Item;
+  const { readOnly, open } = props;
+  const [showSelectRoleVisible, setShowSelectRoleVisible] = useState<boolean>(false);
+  const [loading, setLoading] = useState<boolean>(false);
+
+  /**
+   * 保存用户角色
+   */
+  const [roleLabel, setRoleLabel] = useState<SelectValue[]>([]);
+
+  /**
+   * 选择完成用户角色
+   * @param params
+   * @returns
+   */
+  const roleModalAfterClose = (params: any) => {
+    setShowSelectRoleVisible(false);
+
+    if (!params.isOk) return;
+
+    const roleMap = [
+      ...(roleLabel || []),
+      ...params.rows.map((role: { roleId: any; roleName: 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 (form && !props.open) {
+      form.resetFields();
+      //如果没有数据，则变为空
+      setRoleLabel([]);
+    }
+  }, [props.open]);
+
+  /**
+   * 操作角色选择框
+   * @param value
+   */
+  const handleChangeRole = (value: React.SetStateAction<SelectValue[]>) => {
+    setRoleLabel(value);
+  };
+
+  /**
+   * 提交方法
+   */
+  const handleSubmit = async (values: any) => {
+    //调用父级的方法，同时将用户的角色传回去，这样在父级可以一次性将数据发送给API
+    setLoading(true);
+    await props.onSubmit({
+      ...values,
+      roleIds: roleLabel.map((item: any) => {
+        return item.key;
+      }),
+    });
+    setLoading(false);
+  };
+
+  return (
+    <DrawerForm
+      form={form}
+      width={500}
+      title={formatMessage({
+        id: 'pages.User.create.title',
+        defaultMessage: '新增用户',
+      })}
+      open={open}
+      onOpenChange={props.onOpenChange}
+      onFinish={handleSubmit}
+      loading={loading}
+      initialValues={FORM_INIT_VALUE}
+    >
+      <ProFormText
+        name="userCode"
+        label={formatMessage({
+          id: 'pages.User.column.userCode',
+          defaultMessage: '用户编号',
+        })}
+        tooltip={formatMessage({
+          id: 'pages.User.column.userCode.tooltip',
+          defaultMessage: '当不存在该用户时，会创建用户，如果该用户已存在，则会忽略。',
+        })}
+        rules={[{ required: true }]}
+      />
+      <ProFormText
+        name="userName"
+        label={formatMessage({
+          id: 'pages.User.column.userName',
+          defaultMessage: '用户姓名',
+        })}
+        rules={[{ required: true }]}
+      />
+
+      <ProFormText
+        name="password"
+        label={formatMessage({
+          id: 'pages.User.column.password',
+          defaultMessage: '密码',
+        })}
+        tooltip={formatMessage({
+          id: 'pages.User.column.password.tooltip',
+          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: '备注',
+        })}
+      />
+    </DrawerForm>
+  );
+};
+
+export default React.memo(CreateForm);

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

@@ -0,0 +1,113 @@
+import { queryUser } from '@/pages/System/User/service';
+import ProTable, { ActionType, ProColumns } from '@ant-design/pro-table';
+import { useIntl, useQueryTableList } from '@umijs/max';
+import { Button, Modal } from 'antd';
+import React, { useRef, useState } from 'react';
+import { FormValueType, TableListParams } from '../data.d';
+import { TableListItem } from '@/pages/System/User/data';
+
+interface SelectuserProps {
+  onSubmit?: (values: FormValueType) => Promise<void>;
+  setModalVisit?: (visible: boolean) => void;
+  values?: boolean;
+  onCancel?: () => void;
+  visible: boolean;
+  onAfterClose: (params: { isOk: boolean; rows?: TableListItem[] }) => void;
+}
+
+const baseLocalCode = 'pages.User';
+const baseLocalName = '用户管理';
+
+const Selectuser: React.FC<SelectuserProps> = (props) => {
+  const { formatMessage } = useIntl();
+  const actionRef = useRef<ActionType>();
+  const [selectedRowsState, setSelectedRows] = useState<TableListItem[]>([]);
+
+  const { queryList } = useQueryTableList({ baseLocalCode, baseLocalName });
+
+  /**
+   * 查询表格数据
+   * @param params
+   * @returns
+   */
+  const handleSearch = async (params: TableListParams) => {
+    return await queryList<TableListItem[]>(params, {
+      queryFn: queryUser,
+    });
+  };
+
+  const columns: 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.Role.column.remark', defaultMessage: '备注' }),
+      dataIndex: 'remark',
+      valueType: 'textarea',
+      ellipsis: true,
+    },
+  ];
+
+  const hangleOk = () => {
+    props.onAfterClose({ isOk: true, rows: selectedRowsState });
+  };
+
+  const handleCancel = () => {
+    props.onAfterClose({ isOk: false });
+  };
+
+  return (
+    <Modal
+      open={props.visible}
+      destroyOnClose
+      title={formatMessage({
+        id: 'pages.Role.selectUser.title',
+        defaultMessage: '用户列表',
+      })}
+      onCancel={handleCancel}
+      footer={[
+        <Button key="back" onClick={handleCancel}>
+          {formatMessage({ id: 'common.button.cancel', defaultMessage: '取消' })}
+        </Button>,
+        <Button key="submit" type="primary" onClick={hangleOk}>
+          {formatMessage({ id: 'common.button.submit', defaultMessage: '提交' })}
+        </Button>,
+      ]}
+    >
+      <ProTable<TableListItem>
+        actionRef={actionRef}
+        rowKey="userId"
+        search={{
+          labelWidth: 120,
+        }}
+        request={async (params, sorter) => {
+          // 获取出来参数，将当前页面current和页数据大小pageSize提取出来
+          const { current, pageIndex = params.current, pageSize, ...otherParams } = params;
+
+          //调用后台API
+          return await handleSearch({ pageIndex, pageSize, orderBy: { ...sorter }, ...otherParams });
+        }}
+        columns={columns}
+        //批量选择
+        rowSelection={{
+          onChange: (_, selectedRows) => setSelectedRows(selectedRows),
+        }}
+        //rowKey="outUserNo"
+        pagination={{
+          showQuickJumper: true,
+        }}
+        toolBarRender={false}
+      />
+    </Modal>
+  );
+};
+
+export default Selectuser;