11

src/pages/Livemgmt/components/EditModal.tsx

@@ -0,0 +1,87 @@
+import React, { useEffect } from 'react';
+import {
+  ModalForm,
+  ProFormText,
+  ProFormTextArea,
+  ProFormDateTimePicker,
+} from '@ant-design/pro-components';
+import { Form } from 'antd';
+import type { LiveStreamItem, CmsLiveForm } from '@/services/jobportal/live';
+
+interface EditModalProps {
+  open: boolean;
+  values?: LiveStreamItem;
+  onCancel: () => void;
+  onSubmit: (values: CmsLiveForm) => Promise<void>;
+}
+
+const EditModal: React.FC<EditModalProps> = ({ open, values, onCancel, onSubmit }) => {
+  const [form] = Form.useForm();
+
+  useEffect(() => {
+    if (open) {
+      form.resetFields();
+      if (values) {
+        form.setFieldsValue(values);
+      }
+    }
+  }, [open, values, form]);
+
+  return (
+    <ModalForm
+      title={values ? '编辑直播带岗' : '新增直播带岗'}
+      form={form}
+      open={open}
+      width={600}
+      modalProps={{ destroyOnClose: true, onCancel }}
+      onFinish={async (formValues) => {
+        await onSubmit({ ...formValues, id: values?.id } as CmsLiveForm);
+      }}
+    >
+      <ProFormText name="id" hidden />
+      <ProFormText
+        name="title"
+        label="直播标题"
+        rules={[{ required: true, message: '请输入直播标题' }]}
+        placeholder="请输入直播标题"
+      />
+      <ProFormText
+        name="liveUrl"
+        label="直播链接"
+        rules={[{ required: true, message: '请输入直播链接' }]}
+        placeholder="请输入直播链接"
+      />
+      <ProFormText
+        name="companyName"
+        label="公司名称"
+        placeholder="请输入公司名称"
+      />
+      <ProFormText
+        name="companyId"
+        label="公司ID"
+        placeholder="请输入公司ID"
+      />
+      <ProFormDateTimePicker
+        name="startTime"
+        label="开始时间"
+        width="md"
+        rules={[{ required: true, message: '请选择开始时间' }]}
+        fieldProps={{ format: 'YYYY-MM-DD HH:mm:ss' }}
+      />
+      <ProFormDateTimePicker
+        name="endTime"
+        label="结束时间"
+        width="md"
+        rules={[{ required: true, message: '请选择结束时间' }]}
+        fieldProps={{ format: 'YYYY-MM-DD HH:mm:ss' }}
+      />
+      <ProFormTextArea
+        name="description"
+        label="直播描述"
+        placeholder="请输入直播描述"
+      />
+    </ModalForm>
+  );
+};
+
+export default EditModal;

src/pages/Livemgmt/index.tsx

@@ -0,0 +1,163 @@
+import React, { useRef, useState } from 'react';
+import { useAccess } from '@umijs/max';
+import { Button, message, Modal } from 'antd';
+import { ActionType, PageContainer, ProColumns, ProTable } from '@ant-design/pro-components';
+import { PlusOutlined, DeleteOutlined, FormOutlined } from '@ant-design/icons';
+import {
+  getCmsLiveList,
+  addCmsLive,
+  updateCmsLive,
+  deleteCmsLive,
+} from '@/services/jobportal/live';
+import type { LiveStreamItem, CmsLiveListParams, CmsLiveForm } from '@/services/jobportal/live';
+import EditModal from './components/EditModal';
+
+const LiveMgmtList: React.FC = () => {
+  const access = useAccess();
+  const actionRef = useRef<ActionType>();
+  const [modalVisible, setModalVisible] = useState(false);
+  const [currentRow, setCurrentRow] = useState<LiveStreamItem>();
+
+  const handleDelete = async (id: number) => {
+    Modal.confirm({
+      title: '确认删除',
+      content: '确定要删除该直播吗？',
+      onOk: async () => {
+        const res = await deleteCmsLive(id);
+        if (res.code === 200) {
+          message.success('删除成功');
+          actionRef.current?.reload();
+        } else {
+          message.error(res.msg || '删除失败');
+        }
+      },
+    });
+  };
+
+  const columns: ProColumns<LiveStreamItem>[] = [
+    {
+      title: '直播标题',
+      dataIndex: 'title',
+      ellipsis: true,
+    },
+    {
+      title: '直播链接',
+      dataIndex: 'liveUrl',
+      ellipsis: true,
+      hideInSearch: true,
+    },
+    {
+      title: '公司名称',
+      dataIndex: 'companyName',
+      ellipsis: true,
+    },
+    {
+      title: '开始时间',
+      dataIndex: 'startTime',
+      valueType: 'dateTime',
+      hideInSearch: true,
+    },
+    {
+      title: '结束时间',
+      dataIndex: 'endTime',
+      valueType: 'dateTime',
+      hideInSearch: true,
+    },
+    {
+      title: '创建时间',
+      dataIndex: 'createTime',
+      valueType: 'dateTime',
+      hideInSearch: true,
+    },
+    {
+      title: '操作',
+      valueType: 'option',
+      width: 160,
+      fixed: 'right',
+      render: (_, record) => [
+        <Button
+          key="edit"
+          type="link"
+          size="small"
+          icon={<FormOutlined />}
+          hidden={!access.hasPerms('cms:live:edit')}
+          onClick={() => {
+            setCurrentRow(record);
+            setModalVisible(true);
+          }}
+        >
+          编辑
+        </Button>,
+        <Button
+          key="delete"
+          type="link"
+          size="small"
+          danger
+          icon={<DeleteOutlined />}
+          hidden={!access.hasPerms('cms:live:remove')}
+          onClick={() => handleDelete(record.id)}
+        >
+          删除
+        </Button>,
+      ],
+    },
+  ];
+
+  return (
+    <PageContainer>
+      <ProTable<LiveStreamItem>
+        headerTitle="直播待岗列表"
+        actionRef={actionRef}
+        rowKey="id"
+        columns={columns}
+        scroll={{ x: 'max-content' }}
+        request={async (params) => {
+          const res = await getCmsLiveList({
+            current: params.current,
+            pageSize: params.pageSize,
+            title: params.title,
+            companyName: params.companyName,
+          } as CmsLiveListParams);
+          return { data: res.rows, total: res.total, success: true };
+        }}
+        toolBarRender={() => [
+          <Button
+            key="add"
+            type="primary"
+            icon={<PlusOutlined />}
+            hidden={!access.hasPerms('cms:live:add')}
+            onClick={() => {
+              setCurrentRow(undefined);
+              setModalVisible(true);
+            }}
+          >
+            新增
+          </Button>,
+        ]}
+      />
+      <EditModal
+        open={modalVisible}
+        values={currentRow}
+        onCancel={() => {
+          setModalVisible(false);
+          setCurrentRow(undefined);
+        }}
+        onSubmit={async (values: CmsLiveForm) => {
+          const res = values.id
+            ? await updateCmsLive(values)
+            : await addCmsLive(values);
+          if (res.code === 200) {
+            message.success(values.id ? '修改成功' : '新增成功');
+            setModalVisible(false);
+            setCurrentRow(undefined);
+            actionRef.current?.reload();
+          } else {
+            message.error(res.msg || '操作失败');
+          }
+        }}
+      />
+    </PageContainer>
+  );
+};
+
+export default LiveMgmtList;