@ysjdemo/umi-create-cli 0.0.2 → 0.0.4

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

@@ -0,0 +1,170 @@
+import { ProFormText, ProFormTextArea } from '@ant-design/pro-form';
+import { RefDrawerForm, RefDrawerFormRefType, useIntl } from '@umijs/max';
+import { Form, Select, SelectProps, Tag } from 'antd';
+import React, { MutableRefObject, useEffect } from 'react';
+import { FormValueType, TableListItem } from '../data';
+
+const tagOptions = [
+  { color: 'magenta', label: 'magenta' },
+  { color: 'red', label: 'red' },
+  { color: 'volcano', label: 'volcano' },
+  { color: 'orange', label: 'orange' },
+  { color: 'gold', label: 'gold' },
+  { color: 'lime', label: 'lime' },
+  { color: 'green', label: 'green' },
+  { color: 'cyan', label: 'cyan' },
+  { color: 'blue', label: 'blue' },
+  { color: 'geekblue', label: 'geekblue' },
+  { color: 'purple', label: 'purple' },
+];
+
+const tagRender: SelectProps['tagRender'] = (props) => {
+  const { label, value, closable, onClose } = props;
+  const onPreventMouseDown = (event: React.MouseEvent<HTMLSpanElement>) => {
+    event.preventDefault();
+    event.stopPropagation();
+  };
+  return (
+    <Tag
+      color={value}
+      onMouseDown={onPreventMouseDown}
+      closable={closable}
+      onClose={onClose}
+      style={{ marginInlineEnd: 4 }}
+    >
+      {label}
+    </Tag>
+  );
+};
+
+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) return;
+
+    const { values = {} } = props;
+    if (typeof values.tag === 'string') {
+      values.tag = values?.tag?.split(',');
+    }
+    if (typeof values.tagColor === 'string') {
+      values.tagColor = values?.tagColor?.split(',');
+    }
+
+    if (values) {
+      form.setFieldsValue({
+        ...values,
+      });
+    }
+  }, [props.values]);
+
+  return (
+    <RefDrawerForm
+      form={form}
+      ref={props.updateDrawerRef}
+      title={formatMessage({
+        id: 'pages.Dictionary.update.title',
+        defaultMessage: '修改字典',
+      })}
+      onFinish={props.onSubmit}
+    >
+      <ProFormText name="systemId" disabled hidden />
+
+      <ProFormText
+        name="systemCode"
+        label={formatMessage({ id: 'pages.SoftwareEcology.column.systemCode', defaultMessage: '系统编码' })}
+        rules={[{ required: true }]}
+      />
+
+      <ProFormText
+        name="systemName"
+        label={formatMessage({ id: 'pages.SoftwareEcology.column.systemName', defaultMessage: '系统名称' })}
+        rules={[{ required: true }]}
+      />
+      <ProFormText
+        name="title"
+        label={formatMessage({ id: 'pages.SoftwareEcology.column.title', defaultMessage: '系统标题' })}
+        rules={[{ required: true }]}
+      />
+
+      <ProFormText
+        name="url"
+        label={formatMessage({ id: 'pages.SoftwareEcology.column.url', defaultMessage: '系统网址' })}
+        rules={[
+          { required: true },
+          {
+            pattern:
+              /^(https?:\/\/)?((([a-zA-Z0-9]|[a-zA-Z0-9][a-zA-Z0-9\-]*[a-zA-Z0-9])\.)+([A-Za-z]{2,6}|[A-Za-z0-9\-]{2,})|(\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}))(:\d+)?(\/[^ \n]*)?$/,
+            message: formatMessage({ id: 'pages.SoftwareEcology.url', defaultMessage: '请输入有效的网址' }),
+          },
+        ]}
+      />
+
+      <Form.Item
+        name="hrefTarget"
+        label={formatMessage({ id: 'pages.SoftwareEcology.column.hrefTarget', defaultMessage: '系统打开方式' })}
+        rules={[{ required: true }]}
+      >
+        <Select
+          style={{ width: '100%' }}
+          placeholder={formatMessage({ id: 'pages.SoftwareEcology.hrefTarget', defaultMessage: '选择打开方式' })}
+          options={[
+            { value: '_blank', label: '_blank' },
+            { value: '_self', label: '_self' },
+            { value: '_parent', label: '_parent' },
+            { value: '_top', label: '_top' },
+          ]}
+        />
+      </Form.Item>
+
+      <Form.Item
+        name="tag"
+        label={formatMessage({ id: 'pages.SoftwareEcology.column.tag', defaultMessage: '系统标签' })}
+        rules={[{ required: true }]}
+      >
+        <Select
+          mode="tags"
+          style={{ width: '100%' }}
+          placeholder={formatMessage({ id: 'pages.SoftwareEcology.selectTags', defaultMessage: '选择或输入标签' })}
+          options={[
+            { value: '注塑', label: '注塑' },
+            { value: '五金', label: '五金' },
+          ]}
+        />
+      </Form.Item>
+
+      <Form.Item
+        name="tagColor"
+        label={formatMessage({ id: 'pages.SoftwareEcology.column.tagColor', defaultMessage: '标签颜色' })}
+        rules={[{ required: true }]}
+      >
+        <Select mode="multiple" style={{ width: '100%' }} tagRender={tagRender}>
+          {tagOptions.map((tag) => (
+            <Select.Option key={tag.color} value={tag.label}>
+              <span style={{ color: tag.color }}>{tag.label}</span>
+            </Select.Option>
+          ))}
+        </Select>
+      </Form.Item>
+
+      <ProFormTextArea
+        name="remark"
+        label={formatMessage({
+          id: 'pages.SoftwareEcology.column.remark',
+          defaultMessage: '系统描述',
+        })}
+        rules={[{ required: true }]}
+      />
+    </RefDrawerForm>
+  );
+};
+
+export default React.memo(UpdateForm);

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

@@ -0,0 +1,18 @@
+import { API } from '@umijs/max';
+
+export type TableListItem = {
+  remark: string;
+  systemId: string;
+  systemCode: string;
+  systemName: string;
+  icon: string;
+  title: string;
+  tag: any;
+  tagColor: any,
+  url: string;
+  hrefTarget: string;
+  enable: number;
+};
+export type TableListParams = API.TableListParams;
+
+export type FormValueType = Partial<TableListItem>;

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

@@ -0,0 +1,265 @@
+import { ProColumns } from '@ant-design/pro-components';
+import { CrudTable, CrudTableRefType, LangInfoItem, MyPageContainer, useIntl } from '@umijs/max';
+import { Select, SelectProps, Tag } from 'antd';
+import { useMemo, useRef } from 'react';
+import UpdateForm from './components/UpdateForm';
+import { TableListItem } from './data';
+import { handleSoftwareEcology, querySoftwareEcologyByID, queryTableList } from './services';
+
+const baseLocalCode = 'pages.SoftwareEcology';
+const baseLocalName = '软件生态';
+
+const tagOptions = [
+  { color: 'magenta', label: 'magenta' },
+  { color: 'red', label: 'red' },
+  { color: 'volcano', label: 'volcano' },
+  { color: 'orange', label: 'orange' },
+  { color: 'gold', label: 'gold' },
+  { color: 'lime', label: 'lime' },
+  { color: 'green', label: 'green' },
+  { color: 'cyan', label: 'cyan' },
+  { color: 'blue', label: 'blue' },
+  { color: 'geekblue', label: 'geekblue' },
+  { color: 'purple', label: 'purple' },
+];
+
+//列表数据ID
+const ROW_ID: keyof TableListItem = 'systemId';
+
+const tagRender: SelectProps['tagRender'] = (props) => {
+  const { label, value, closable, onClose } = props;
+  const onPreventMouseDown = (event: React.MouseEvent<HTMLSpanElement>) => {
+    event.preventDefault();
+    event.stopPropagation();
+  };
+  return (
+    <Tag
+      color={value}
+      onMouseDown={onPreventMouseDown}
+      closable={closable}
+      onClose={onClose}
+      style={{ marginInlineEnd: 4 }}
+    >
+      {label}
+    </Tag>
+  );
+};
+
+const TableList: React.FC = () => {
+  const { formatMessage } = useIntl();
+  const crudTableRef = useRef<CrudTableRefType<TableListItem>>(null);
+
+  const columns = useMemo<ProColumns<TableListItem>[]>(
+    () => [
+      {
+        title: formatMessage({
+          id: 'pages.SoftwareEcology.column.systemCode',
+          defaultMessage: '系统编码',
+        }),
+        dataIndex: 'systemCode',
+        sorter: true,
+        formItemProps: { rules: [{ required: true }] },
+      },
+      {
+        title: formatMessage({
+          id: 'pages.SoftwareEcology.column.systemName',
+          defaultMessage: '系统名称',
+        }),
+        dataIndex: 'systemName',
+        sorter: true,
+        formItemProps: { rules: [{ required: true }] },
+      },
+      {
+        title: formatMessage({
+          id: 'pages.SoftwareEcology.column.title',
+          defaultMessage: '系统标题',
+        }),
+        dataIndex: 'title',
+        sorter: true,
+        formItemProps: { rules: [{ required: true }] },
+      },
+      {
+        title: formatMessage({
+          id: 'pages.SoftwareEcology.column.url',
+          defaultMessage: '系统网址',
+        }),
+        dataIndex: 'url',
+        sorter: true,
+        formItemProps: {
+          rules: [
+            { required: true },
+            {
+              pattern:
+                /^(https?:\/\/)?((([a-zA-Z0-9]|[a-zA-Z0-9][a-zA-Z0-9-]*[a-zA-Z0-9])\.)+([A-Za-z]{2,6}|[A-Za-z0-9-]{2,})|(\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}))(:\d+)?(\/[^ \n]*)?$/,
+              message: formatMessage({ id: 'pages.SoftwareEcology.url', defaultMessage: '请输入有效的网址' }),
+            },
+          ],
+        },
+      },
+      {
+        title: formatMessage({
+          id: 'pages.SoftwareEcology.column.hrefTarget',
+          defaultMessage: '系统打开方式',
+        }),
+        hideInSearch: true,
+        initialValue: '_blank',
+        dataIndex: 'hrefTarget',
+        sorter: true,
+        renderFormItem: () => (
+          <Select
+            style={{ width: '100%' }}
+            placeholder={formatMessage({ id: 'pages.SoftwareEcology.hrefTarget', defaultMessage: '选择打开方式' })}
+            options={[
+              { value: '_blank', label: '_blank' },
+              { value: '_self', label: '_self' },
+              { value: '_parent', label: '_parent' },
+              { value: '_top', label: '_top' },
+            ]}
+          />
+        ),
+        formItemProps: { rules: [{ required: true }] },
+      },
+
+      {
+        title: formatMessage({
+          id: 'pages.SoftwareEcology.column.tag',
+          defaultMessage: '系统标签',
+        }),
+        dataIndex: 'tag',
+        sorter: true,
+        renderFormItem: () => (
+          <Select
+            mode="tags"
+            style={{ width: '100%' }}
+            placeholder={formatMessage({ id: 'pages.SoftwareEcology.selectTags', defaultMessage: '选择或输入标签' })}
+            options={[
+              {
+                value: formatMessage({ id: 'pages.SoftwareEcology.Injection', defaultMessage: '注塑' }),
+                label: formatMessage({ id: 'pages.SoftwareEcology.Injection', defaultMessage: '注塑' }),
+              },
+              {
+                value: formatMessage({ id: 'pages.SoftwareEcology.hardware', defaultMessage: '五金' }),
+                label: formatMessage({ id: 'pages.SoftwareEcology.hardware', defaultMessage: '五金' }),
+              },
+            ]}
+          />
+        ),
+        render: (_, record) => {
+          const taglist = record.tag.split(',');
+          const tagColorlist = record.tagColor.split(',');
+          return taglist.map((item: any, index: number) => {
+            return (
+              <Tag
+                key={item}
+                onClick={() => {
+                  crudTableRef.current?.setEditLangModalOpen(true);
+                  const langInfoItem: LangInfoItem = {
+                    tableName: 'platform_system',
+                    columnName: 'tag',
+                    recordId: record.systemId,
+                  };
+                  crudTableRef.current?.setCurrentLangInfo(langInfoItem);
+                }}
+                color={tagColorlist[index]}
+              >
+                {item}
+              </Tag>
+            );
+          });
+        },
+        formItemProps: { rules: [{ required: true }] },
+      },
+      {
+        title: formatMessage({
+          id: 'pages.SoftwareEcology.column.tagColor',
+          defaultMessage: '标签颜色',
+        }),
+        hidden: true,
+        dataIndex: 'tagColor',
+        sorter: true,
+        initialValue: 'magenta',
+        hideInSearch: true,
+        formItemProps: { rules: [{ required: true }] },
+        renderFormItem: () => (
+          <Select mode="multiple" style={{ width: '100%' }} tagRender={tagRender}>
+            {tagOptions.map((tag) => (
+              <Select.Option key={tag.color} value={tag.label}>
+                <span style={{ color: tag.color }}>{tag.label}</span>
+              </Select.Option>
+            ))}
+          </Select>
+        ),
+        render: (_, record) => {
+          return (
+            <Tag key={record.systemId} color={record.tagColor}>
+              {record.tagColor}
+            </Tag>
+          );
+        },
+      },
+
+      {
+        title: formatMessage({
+          id: 'pages.SoftwareEcology.column.remark',
+          defaultMessage: '系统描述',
+        }),
+        dataIndex: 'remark',
+        hideInSearch: true,
+        sorter: true,
+        formItemProps: { rules: [{ required: true }] },
+      },
+    ],
+    [crudTableRef],
+  );
+
+  return (
+    <MyPageContainer>
+      <CrudTable<TableListItem>
+        ref={crudTableRef}
+        baseLocalCode={baseLocalCode}
+        baseLocalName={baseLocalName}
+        rowKey={ROW_ID}
+        columns={columns}
+        updateConfig={{
+          Component: UpdateForm,
+        }}
+        multiLang={{
+          fields: [
+            {
+              fieldName: 'title',
+              columnName: 'title',
+              tableName: 'platform_system',
+            },
+            {
+              fieldName: 'remark',
+              columnName: 'remark',
+              tableName: 'platform_system',
+            },
+          ],
+        }}
+        apis={{
+          query: queryTableList,
+          handle: handleSoftwareEcology,
+          queryById: querySoftwareEcologyByID,
+        }}
+        interceptors={{
+          handle: {
+            request(method, data) {
+              if (method === 'POST' || method === 'PUT') {
+                if (data.tag && Array.isArray(data.tag)) {
+                  data.tag = data.tag.join(',');
+                }
+                if (data.tagColor && Array.isArray(data.tagColor)) {
+                  data.tagColor = data.tagColor.join(',');
+                }
+              }
+              return { method, data };
+            },
+          },
+        }}
+      />
+    </MyPageContainer>
+  );
+};
+
+export default TableList;

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

@@ -0,0 +1,28 @@
+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/platformSystem/list`, {
+    method: 'GET',
+    params,
+  });
+}
+
+// 增删改查
+export async function handleSoftwareEcology(method = 'POST', params: TableListParams) {
+  const actionById = method === 'DELETE' || method === 'GET';
+  const baseUrl = `${BASE_API}/system/platformSystem`;
+  const url = actionById ? `${baseUrl}/${params}` : baseUrl;
+  const nweParams = actionById ? null : { data: { ...params } };
+  return request<API.Result_Base>(url, {
+    method,
+    ...nweParams,
+  });
+}
+
+export async function querySoftwareEcologyByID(id: number) {
+  return request<API.Result_Base<TableListItem>>(`${BASE_API}/system/platformSystem/${id}`, {
+    method: 'GET',
+  });
+}