flat: 暂存

src/pages/Management/List/edit.tsx

@@ -0,0 +1,123 @@
+import { PlusOutlined } from '@ant-design/icons';
+import {
+  ModalForm,
+  ProForm,
+  ProFormDateRangePicker,
+  ProFormSelect,
+  ProFormText,
+} from '@ant-design/pro-components';
+import { Button, Form, message } from 'antd';
+import {DictOptionType, DictValueEnumObj} from "@/components/DictTag";
+
+export type ListFormProps = {
+  onCancel: (flag?: boolean, formVals?: unknown) => void;
+  onSubmit: (values: API.Management.Manage) => Promise<void>;
+  open: boolean;
+  values: Partial<API.Management.Manage>;
+  jobGroupOptions: DictOptionType[];
+  statusOptions: DictValueEnumObj;
+};
+
+const waitTime = (time: number = 100) => {
+  return new Promise((resolve) => {
+    setTimeout(() => {
+      resolve(true);
+    }, time);
+  });
+};
+
+const listEdit: React.FC<ListFormProps> = (props) => {
+  const [form] = Form.useForm<{ name: string; company: string }>();
+
+  const handleCancel = () => {
+    props.onCancel();
+    form.resetFields();
+  };
+
+  const handleFinish = async (values: Record<string, any>) => {
+    props.onSubmit(values as API.Management.Manage);
+  };
+
+  return (
+    <ModalForm<{
+      name: string;
+      company: string;
+    }>
+      title="新建表单"
+      form={form}
+      autoFocusFirstInput
+      open={props.open}
+      modalProps={{
+        destroyOnClose: true,
+        onCancel: () => handleCancel(),
+      }}
+      submitTimeout={2000}
+      onFinish={handleFinish}
+    >
+      <ProForm.Group>
+        <ProFormText
+          width="md"
+          name="jobName"
+          label="岗位名称"
+          placeholder="请输入名称"
+        />
+
+        <ProFormText
+          width="md"
+          name="company"
+          label="我方公司名称"
+          placeholder="请输入名称"
+        />
+      </ProForm.Group>
+      <ProForm.Group>
+        <ProFormText
+          width="md"
+          name="contract"
+          label="合同名称"
+          placeholder="请输入名称"
+        />
+        <ProFormDateRangePicker name="contractTime" label="合同生效时间" />
+      </ProForm.Group>
+      <ProForm.Group>
+        <ProFormSelect
+          request={async () => [
+            {
+              value: 'chapter',
+              label: '盖章后生效',
+            },
+          ]}
+          width="xs"
+          name="useMode"
+          label="合同约定生效方式"
+        />
+        <ProFormSelect
+          width="xs"
+          options={[
+            {
+              value: 'time',
+              label: '履行完终止',
+            },
+          ]}
+          name="unusedMode"
+          label="合同约定失效效方式"
+        />
+      </ProForm.Group>
+      <ProFormText width="sm" name="id" label="主合同编号" />
+      <ProFormText
+        name="project"
+        disabled
+        label="项目名称"
+        initialValue="xxxx项目"
+      />
+      <ProFormText
+        width="xs"
+        name="mangerName"
+        disabled
+        label="商务经理"
+        initialValue="启途"
+      />
+    </ModalForm>
+  );
+};
+
+export default listEdit

src/pages/Management/List/index.tsx

@@ -0,0 +1,72 @@
+import React, {Fragment, useRef, useState} from "react";
+import { useIntl, FormattedMessage, useAccess, history } from '@umijs/max';
+import {getCmsJobList} from "@/services/Management/list";
+import { Dropdown, FormInstance, Space, Button, message, Modal } from 'antd';
+import { ActionType, FooterToolbar, PageContainer, ProColumns, ProTable } from '@ant-design/pro-components';
+import { PlusOutlined, DeleteOutlined, ExclamationCircleOutlined, DownOutlined, EditOutlined } from '@ant-design/icons';
+import EditManageRow from './edit'
+function ManagementList() {
+  const access = useAccess();
+
+  const formTableRef = useRef<FormInstance>();
+  const actionRef = useRef<ActionType>();
+
+  const [currentRow, setCurrentRow] = useState<API.Management.Manage>()
+  const [modalVisible, setModalVisible] = useState<boolean>(false)
+
+  const columns: ProColumns<API.Management.Manage>[] = [
+    {
+      title: '任务编号',
+      dataIndex: 'jobId',
+      valueType: 'text',
+      hideInSearch: true,
+    },
+  ]
+  return (
+    <Fragment>
+      <div style={{ width: '100%', float: 'right' }}>
+        <ProTable<API.Management.Manage>
+          // params 是需要自带的参数
+          // 这个参数优先级更高，会覆盖查询表单的参数
+          actionRef={actionRef}
+          formRef={formTableRef}
+          columns={columns}
+          request={(params) =>
+            getCmsJobList({ ...params } as API.Management.ListParams).then((res) => {
+              const result = {
+                data: res.rows,
+                total: res.total,
+                success: true,
+              };
+              return result;
+            })
+          }
+          toolBarRender={() => [
+            <Button
+              type="primary"
+              key="add"
+              hidden={!access.hasPerms('manage:list:add')}
+              onClick={async () => {
+                setCurrentRow(undefined);
+                setModalVisible(true);
+              }}
+            >
+              <PlusOutlined /> 新建
+            </Button>,
+          ]}
+        />
+      </div>
+      <EditManageRow
+        open={modalVisible}
+        onSubmit={(values) => {
+          console.log(values)
+        }}
+        onCancel={() => {
+          setModalVisible(false);
+          setCurrentRow(undefined);
+        }}
+      ></EditManageRow>
+    </Fragment>
+  )
+}
+export default ManagementList