@ysjdemo/umi-create-cli 0.0.3 → 0.0.4

package/lib/templates/qiankun/cf-workbench-function/src/pages/EmployeeManagement/Employee/index.tsx

@@ -0,0 +1,326 @@
+import { ProColumns } from '@ant-design/pro-table';
+import { cfmmUtils, CrudTable, MyPageContainer, MyUpload, UploadBaseProps, useIntl } from '@umijs/max';
+import { Image, Popover, Tag } from 'antd';
+import React from 'react';
+
+import UpdateForm from './components/UpdateForm';
+import { TableListItem } from './data';
+import { handleEmployee, queryEmployee, queryEmployeeByID } from './service';
+
+import GroupDropDownList from '@/pages/EmployeeManagement/Group/components/GroupDropDownList';
+import PostDropDownList from '@/pages/EmployeeManagement/Post/components/PostDropDownList';
+import { ManOutlined, WomanOutlined } from '@ant-design/icons';
+
+const validList = cfmmUtils.getValidList({ valueMap: { actived: 'Y', unactived: 'N' } });
+
+const baseLocalCode = 'pages.Employee';
+const baseLocalName = '员工管理';
+
+//列表数据ID
+const ROW_ID: keyof TableListItem = 'employeeId';
+
+const FORM_INIT_VALUE = {
+  initialValues: {
+    status: 'Y',
+  },
+};
+
+const UPLOAD_ACCEPT: UploadBaseProps['accept'] = ['.png', '.jpeg', '.jpg'];
+const isLt2M = 1024 * 1024 * 2;
+
+const TableList: React.FC = () => {
+  const { formatMessage } = useIntl();
+
+  const columns: ProColumns<TableListItem>[] = [
+    {
+      title: formatMessage({ id: 'pages.Employee.column.employeeCode', defaultMessage: '员工编号' }),
+      dataIndex: 'employeeCode',
+      sorter: true,
+      valueType: 'text',
+      copyable: true,
+      formItemProps: { rules: [{ required: true }] },
+    },
+    {
+      title: formatMessage({ id: 'pages.Employee.column.employeeName', defaultMessage: '员工名称' }),
+      dataIndex: 'employeeName',
+      sorter: true,
+      valueType: 'text',
+      copyable: false,
+      formItemProps: { rules: [{ required: true }] },
+    },
+    {
+      title: formatMessage({ id: 'pages.Employee.column.cardNo', defaultMessage: '员工卡号' }),
+      dataIndex: 'cardNo',
+      sorter: true,
+      valueType: 'text',
+      copyable: true,
+      formItemProps: { rules: [{ required: true }] },
+    },
+
+    {
+      title: formatMessage({ id: 'pages.Employee.column.groupId', defaultMessage: '员工组别' }),
+      dataIndex: 'groupId',
+      sorter: true,
+      valueType: 'text',
+      copyable: false,
+      search: false,
+      renderFormItem: (_, { type, defaultRender, ...rest }, form) => {
+        if (type === 'form') {
+          return (
+            <GroupDropDownList
+              value={form.getFieldValue('groupId')}
+              onChange={(value: number) => {
+                /**
+                 * 设置form中的值为返回的数据
+                 */
+                form.setFieldsValue({ groupId: value });
+              }}
+            />
+          );
+        }
+        return defaultRender(_);
+      },
+      render: (_, record) => (
+        <>
+          {record.groupEntity && (
+            <Popover
+              content={() => {
+                return (
+                  <div>
+                    <Tag color="blue">{record.groupEntity?.departmentEntity?.companyEntity?.companyName}</Tag>
+                    <Tag>{'>'}</Tag>
+                    <Tag color="blue">{record.groupEntity?.departmentEntity?.deptName}</Tag>
+                    <Tag>{'>'}</Tag>
+                    <Tag color="blue">{record.groupEntity?.groupName}</Tag>
+                  </div>
+                );
+              }}
+            >
+              <Tag color="blue">{`${record.groupEntity?.groupName}`}</Tag>
+            </Popover>
+          )}
+        </>
+      ),
+      formItemProps: { rules: [{ required: true }] },
+    },
+    {
+      title: formatMessage({ id: 'pages.Employee.column.postId', defaultMessage: '员工岗位' }),
+      dataIndex: 'postId',
+      sorter: true,
+      valueType: 'text',
+      copyable: false,
+      search: false,
+      renderFormItem: (_, { type, defaultRender, ...rest }, form) => {
+        if (type === 'form') {
+          return (
+            <PostDropDownList
+              value={form.getFieldValue('postId')}
+              onChange={(value: number) => {
+                /**
+                 * 设置form中的值为返回的数据
+                 */
+                form.setFieldsValue({ postId: value });
+              }}
+            />
+          );
+        }
+        return defaultRender(_);
+      },
+      render: (_, record) => (
+        <>
+          {record.postEntity && (
+            <Popover
+              content={() => {
+                return (
+                  <div>
+                    <Tag color="blue">{record.postEntity?.companyEntity?.companyName}</Tag>
+                    <Tag>{'>'}</Tag>
+                    <Tag color="blue">{record.postEntity?.postName}</Tag>
+                  </div>
+                );
+              }}
+            >
+              <Tag color="blue">{`${record.postEntity?.postName}`}</Tag>
+            </Popover>
+          )}
+        </>
+      ),
+      formItemProps: { rules: [{ required: true }] },
+    },
+    {
+      title: formatMessage({ id: 'pages.Employee.column.phone', defaultMessage: '员工电话' }),
+      dataIndex: 'phone',
+      sorter: true,
+      valueType: 'text',
+      copyable: true,
+    },
+    {
+      title: formatMessage({ id: 'pages.Employee.column.email', defaultMessage: '员工邮箱' }),
+      dataIndex: 'email',
+      sorter: true,
+      valueType: 'text',
+      copyable: true,
+    },
+    {
+      title: formatMessage({ id: 'pages.Employee.column.sex', defaultMessage: '员工性别' }),
+      dataIndex: 'sex',
+      sorter: true,
+      valueType: 'select',
+      fieldProps: {
+        options: cfmmUtils.getSexList(),
+      },
+      render: (_, record) => {
+        const sex = cfmmUtils.getSexList().find((item) => item.value === record.sex);
+
+        return sex?.value === 'female' ? (
+          <WomanOutlined style={{ color: 'pink' }} />
+        ) : (
+          <ManOutlined style={{ color: '#1677ff' }} />
+        );
+      },
+      formItemProps: { rules: [{ required: true }] },
+    },
+    {
+      title: formatMessage({ id: 'pages.Employee.column.status', defaultMessage: '状态' }),
+      dataIndex: 'status',
+      sorter: true,
+      valueType: 'select',
+      fieldProps: {
+        options: validList,
+      },
+      render: (_, record) => {
+        const status = validList.find((item) => item.value === record.status);
+        if (!status) return '-';
+        return <Tag color={status.color}>{status.label}</Tag>;
+      },
+      formItemProps: { rules: [{ required: true }] },
+    },
+    {
+      title: formatMessage({ id: 'pages.Employee.column.remark', defaultMessage: '备注' }),
+      dataIndex: 'remark',
+      valueType: 'textarea',
+      ellipsis: true,
+    },
+    {
+      title: formatMessage({ id: 'pages.Employee.column.avatar', defaultMessage: '照片' }),
+      dataIndex: 'avatar',
+      sorter: true,
+      valueType: 'text',
+      copyable: false,
+      search: false,
+      width: '5%',
+      renderFormItem: (_, { type, defaultRender, ...rest }, form) => {
+        if (type === 'form') {
+          return (
+            <MyUpload
+              maxCount={1}
+              bucketName={EMPLOYEE_UPLOAD_BUCKET_NAME}
+              accept={UPLOAD_ACCEPT}
+              uploadType="image"
+              maxSize={isLt2M}
+              onChange={(fileList) => {
+                form.setFieldsValue({
+                  avatar: fileList[0]?.fileId,
+                });
+              }}
+            />
+          );
+        }
+        return defaultRender(_);
+      },
+      render: (_, record) => {
+        if (record.avatar) {
+          return (
+            <Image
+              src={`/${MINIO_URL}/${record.avatar}`}
+              alt=""
+              style={{ width: 25, height: 25, borderRadius: '10%' }}
+            />
+          );
+        } else {
+          return null;
+        }
+      },
+    },
+    {
+      title: formatMessage({ id: 'pages.Employee.column.skillsCertificate', defaultMessage: '岗位技能' }),
+      dataIndex: 'skillsCertificate',
+      sorter: true,
+      valueType: 'text',
+      copyable: false,
+      search: false,
+      renderFormItem: (item: any, { type, defaultRender }, form) => {
+        if (type === 'form') {
+          return (
+            <MyUpload
+              maxCount={1}
+              bucketName={'skillscertificate'}
+              listType={'picture'}
+              accept="image/*"
+              onChange={(fileList) => {
+                /**
+                 * 设置form中的值为返回的数据
+                 */
+                form.setFieldsValue({ skillsCertificate: fileList[0]?.fileId });
+              }}
+            />
+          );
+        }
+        return defaultRender(item);
+      },
+      render: (_, record) => {
+        if (record.skillsCertificate) {
+          return (
+            <Image
+              src={`/${MINIO_URL}/${record.skillsCertificate}`}
+              alt=""
+              style={{ width: 25, height: 25, borderRadius: '10%' }}
+            />
+          );
+        } else {
+          return null;
+        }
+      },
+    },
+  ];
+
+  return (
+    <MyPageContainer>
+      <CrudTable<TableListItem>
+        baseLocalCode={baseLocalCode}
+        baseLocalName={baseLocalName}
+        rowKey={ROW_ID}
+        columns={columns}
+        updateConfig={{
+          Component: UpdateForm,
+        }}
+        createConfig={{
+          props: {
+            form: FORM_INIT_VALUE,
+          },
+        }}
+        multiLang={{
+          fields: [
+            {
+              fieldName: 'employeeName',
+              columnName: 'employee_name',
+              tableName: 'employee',
+            },
+          ],
+        }}
+        apis={{
+          query: queryEmployee,
+          handle: handleEmployee,
+          queryById: queryEmployeeByID,
+        }}
+        actionColumnConfig={{
+          columnConfig: {
+            fixed: 'right',
+          },
+        }}
+      />
+    </MyPageContainer>
+  );
+};
+
+export default TableList;

package/lib/templates/qiankun/cf-workbench-function/src/pages/EmployeeManagement/Employee/service.ts

@@ -0,0 +1,28 @@
+import { request, API } from '@umijs/max';
+import { TableListParams } from './data';
+import { BASE_API } from '@/constants';
+
+export async function queryEmployee(params?: TableListParams) {
+  return request(`${BASE_API}/mes/employee/list`, {
+    method: 'GET',
+    params,
+  });
+}
+
+export async function queryEmployeeByID(deptId: number) {
+  return request(`${BASE_API}/mes/employee/${deptId}`, {
+    method: 'GET',
+  });
+}
+
+// 增删改查
+export async function handleEmployee(method = 'POST', params: TableListParams) {
+  const actionById = method === 'DELETE' || method === 'GET';
+  const baseUrl = `${BASE_API}/mes/employee`;
+  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-function/src/pages/EmployeeManagement/Group/components/GroupDropDownList.tsx

@@ -0,0 +1,56 @@
+import { Select } from 'antd';
+import React, { useEffect, useState } from 'react';
+
+import { TableListItem } from '@/pages/EmployeeManagement/group/data';
+import { queryGroup } from '@/pages/EmployeeManagement/Group/service';
+import { useIntl } from '@umijs/max';
+
+const { Option } = Select;
+
+export interface GroupDropDownListProps {
+  value?: number;
+  disabled?: boolean;
+  placeholder?: string;
+  onChange?: any;
+}
+
+const GroupDropDownList: React.FC<GroupDropDownListProps> = (props) => {
+  const { value, disabled, placeholder, onChange } = props;
+
+  const { formatMessage } = useIntl();
+
+  const [getGroupData, setGroupData] = useState<TableListItem[]>([]);
+
+  useEffect(() => {
+    (async () => {
+      const response = await queryGroup();
+
+      if (response.rows && response.rows.length > 0) {
+        setGroupData(response.rows);
+      }
+    })();
+  }, []);
+
+  return (
+    <Select
+      disabled={disabled}
+      placeholder={
+        placeholder ? placeholder : formatMessage({ id: 'common.select.placeholder', defaultMessage: '请选择' })
+      }
+      onChange={onChange}
+      allowClear
+      value={value}
+    >
+      {getGroupData.map((item) => {
+        return (
+          <Option
+            key={item.groupId}
+            value={item.groupId}
+          >{`${item.departmentEntity?.companyEntity?.companyName} - ${item.departmentEntity?.deptName} - ${item.groupName}`}</Option>
+        );
+      })}
+    </Select>
+  );
+};
+
+export default GroupDropDownList;

package/lib/templates/qiankun/cf-workbench-function/src/pages/EmployeeManagement/Group/components/UpdateForm.tsx

@@ -0,0 +1,108 @@
+import { ProFormSelect, ProFormText, ProFormTextArea } from '@ant-design/pro-form';
+import { cfmmUtils, RefDrawerForm, RefDrawerFormRefType, useIntl } from '@umijs/max';
+import React, { MutableRefObject, useEffect } from 'react';
+
+import { FormValueType, TableListItem } from '@/pages/EmployeeManagement/group/data';
+import { Form } from 'antd';
+
+import { TableListItem as DepartmentItem } from '@/pages/EmployeeManagement/Department/data';
+import { queryDepartment } from '@/pages/EmployeeManagement/Department/service';
+
+export interface UpdateFormProps {
+  updateDrawerRef: MutableRefObject<RefDrawerFormRefType | undefined>;
+  values?: Partial<TableListItem> | null;
+  /** 提交方法，返回true可以控制弹窗关闭 */
+  onSubmit: (values: FormValueType) => Promise<boolean | void>;
+  onCloseAfter?: () => void;
+}
+
+const UpdateForm: React.FC<UpdateFormProps> = (props) => {
+  const { formatMessage } = useIntl();
+  const [form] = Form.useForm();
+
+  useEffect(() => {
+    if (props.values) {
+      form.setFieldsValue({
+        ...props.values,
+      });
+    }
+  }, [props.values]);
+
+  const requestDepartment = async () => {
+    const response = await queryDepartment();
+
+    let data = [];
+    if (response.rows && response.rows.length > 0) {
+      data = response.rows.map((item: DepartmentItem) => {
+        return {
+          label: `${item.deptCode}(${item.deptName})`,
+          value: item.deptId,
+        };
+      });
+    }
+    return data;
+  };
+
+  return (
+    <RefDrawerForm
+      form={form}
+      ref={props.updateDrawerRef}
+      onFinish={props.onSubmit}
+      onCloseAfter={props.onCloseAfter}
+      title={formatMessage({
+        id: 'pages.Group.update.title',
+        defaultMessage: '修改组别',
+      })}
+    >
+      <ProFormText name="groupId" disabled hidden />
+
+      <ProFormSelect
+        name="departmentId"
+        label={formatMessage({
+          id: 'pages.Group.column.deptId',
+          defaultMessage: '所属部门',
+        })}
+        request={requestDepartment}
+        rules={[{ required: true }]}
+      />
+      <ProFormText
+        name="groupCode"
+        disabled
+        label={formatMessage({
+          id: 'pages.Group.column.groupCode',
+          defaultMessage: '组别编号',
+        })}
+        rules={[{ required: true }]}
+      />
+
+      <ProFormText
+        name="groupName"
+        label={formatMessage({
+          id: 'pages.Group.column.groupName',
+          defaultMessage: '组别名称',
+        })}
+        rules={[{ required: true }]}
+      />
+      <ProFormSelect
+        name="status"
+        label={formatMessage({
+          id: 'pages.Group.column.status',
+          defaultMessage: '状态',
+        })}
+        fieldProps={{
+          options: cfmmUtils.getValidList({ valueMap: { actived: 'Y', unactived: 'N' } }),
+        }}
+        rules={[{ required: true }]}
+      />
+      <ProFormTextArea
+        name="remark"
+        label={formatMessage({
+          id: 'pages.Group.column.remark',
+          defaultMessage: '备注',
+        })}
+      />
+    </RefDrawerForm>
+  );
+};
+
+export default UpdateForm;

package/lib/templates/qiankun/cf-workbench-function/src/pages/EmployeeManagement/Group/data.d.ts

@@ -0,0 +1,34 @@
+import { TableListItem as DepartmentItem } from '@/pages/EmployeeManagement/Department/data';
+
+export interface TableListItem {
+  deptId: string;
+  groupId: string;
+  groupCode: string;
+  groupName: string;
+
+  departmentId: string;
+  departmentEntity?: DepartmentItem;
+
+  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-function/src/pages/EmployeeManagement/Group/index.tsx

@@ -0,0 +1,121 @@
+import DepartmentDropDownList from '@/pages/EmployeeManagement/Department/components/DepartmentDropDownList';
+import { TableListItem } from '@/pages/EmployeeManagement/group/data';
+import { ProColumns } from '@ant-design/pro-table';
+import { cfmmUtils, CrudTable, MyPageContainer, useIntl } from '@umijs/max';
+import { Modal, Tag } from 'antd';
+import React from 'react';
+import { handleGroup, queryGroup, queryGroupByID } from './service';
+
+import UpdateForm from './components/UpdateForm';
+
+const validList = cfmmUtils.getValidList({ valueMap: { actived: 'Y', unactived: 'N' } });
+
+
+//列表数据ID
+const ROW_ID: keyof TableListItem = 'groupId';
+
+const FORM_INIT_VALUE = {
+  initialValues: {
+    status: 'Y',
+  },
+};
+
+const baseLocalCode = 'pages.Group';
+const baseLocalName = '组别管理';
+
+const TableList: React.FC = () => {
+  const { formatMessage } = useIntl();
+
+  const columns: ProColumns<TableListItem>[] = [
+    {
+      title: formatMessage({ id: 'pages.Group.column.deptId', defaultMessage: '所属部门' }),
+      dataIndex: 'departmentId',
+      sorter: true,
+      valueType: 'text',
+      copyable: true,
+      renderFormItem: (item, props) => <DepartmentDropDownList {...props} />,
+      render: (_, record) => (
+        <>
+          {record.departmentId ? (
+            <div>{`${record.departmentEntity?.deptName}(${record.departmentEntity?.deptCode})`}</div>
+          ) : (
+            <div>{'-'}</div>
+          )}
+        </>
+      ),
+      formItemProps: { rules: [{ required: true }] },
+    },
+    {
+      title: formatMessage({ id: 'pages.Group.column.groupCode', defaultMessage: '组别编号' }),
+      dataIndex: 'groupCode',
+      sorter: true,
+      valueType: 'text',
+      copyable: true,
+      formItemProps: { rules: [{ required: true }] },
+    },
+    {
+      title: formatMessage({ id: 'pages.Group.column.groupName', defaultMessage: '组别名称' }),
+      dataIndex: 'groupName',
+      sorter: true,
+      valueType: 'text',
+      copyable: false,
+      formItemProps: { rules: [{ required: true }] },
+    },
+    {
+      title: formatMessage({ id: 'pages.Department.column.status', defaultMessage: '状态' }),
+      dataIndex: 'status',
+      sorter: true,
+      valueType: 'select',
+      formItemProps: { rules: [{ required: true }] },
+      fieldProps: {
+        options: validList,
+      },
+      render: (_, record) => {
+        const status = validList.find((item) => item.value === record.status);
+        if (!status) return '-';
+        return <Tag color={status.color}>{status.label}</Tag>;
+      },
+    },
+    {
+      title: formatMessage({ id: 'pages.Group.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={{
+          props: {
+            form: FORM_INIT_VALUE,
+          },
+        }}
+        multiLang={{
+          fields: [
+            {
+              fieldName: 'groupName',
+              columnName: 'group_name',
+              tableName: 'group',
+            },
+          ],
+        }}
+        apis={{
+          query: queryGroup,
+          handle: handleGroup,
+          queryById: queryGroupByID,
+        }}
+      />
+    </MyPageContainer>
+  );
+};
+
+export default TableList;

package/lib/templates/qiankun/cf-workbench-function/src/pages/EmployeeManagement/Group/service.ts

@@ -0,0 +1,28 @@
+import { request, API } from '@umijs/max';
+import { TableListParams } from '@/pages/EmployeeManagement/Group/data';
+import { BASE_API } from '@/constants';
+
+export async function queryGroup(params?: TableListParams) {
+  return request(`${BASE_API}/mes/group/list`, {
+    method: 'GET',
+    params,
+  });
+}
+
+export async function queryGroupByID(groupId: number) {
+  return request(`${BASE_API}/mes/group/${groupId}`, {
+    method: 'GET',
+  });
+}
+
+// 增删改查
+export async function handleGroup(method = 'POST', params: TableListParams) {
+  const actionById = method === 'DELETE' || method === 'GET';
+  const baseUrl = `${BASE_API}/mes/group`;
+  const url = actionById ? `${baseUrl}/${params}` : baseUrl;
+  const nweParams = actionById ? null : { data: { ...params } };
+  return request<API.Result_Base>(url, {
+    method,
+    ...nweParams,
+  });
+}