timeline-frontend/src/pages/story/index.tsx

import { DownOutlined, PlusOutlined } from '@ant-design/icons';
import { PageContainer } from '@ant-design/pro-components';
import { history, useRequest } from '@umijs/max';
import { Avatar, Button, Card, Dropdown, Input, List, Modal } from 'antd';
import type { FC } from 'react';
import React, { useState } from 'react';
import OperationModal from './components/OperationModal';
import type { StoryType } from './data.d';
import { addStory, deleteStory, queryTimelineList, updateStory } from './service';
import useStyles from './style.style';
import AuthorizeStoryModal from './components/AuthorizeStoryModal';
import {judgePermission} from "@/pages/story/utils/utils";


const { Search } = Input;

const ListContent = ({
  data: { storyTime, updateTime, updateName, ownerName, itemCount },
}: {
  data: StoryType;
}) => {
  const { styles } = useStyles();
  return (
    <div>
      <div className={styles.listContentItem}>
        <span>创建人</span>
        <p>{ownerName}</p>
      </div>
      <div className={styles.listContentItem}>
        <span>最近更新人</span>
        <p>{updateName ?? ownerName}</p>
      </div>
      <div className={styles.listContentItem}>
        <span>节点数</span>
        <p>{itemCount}</p>
      </div>
      <div className={styles.listContentItem}>
        <span>故事时间</span>
        <p>{storyTime}</p>
      </div>
      <div className={styles.listContentItem}>
        <span>更新时间</span>
        <p>{updateTime}</p>
      </div>
    </div>
  );
};
export const BasicList: FC = () => {
  const { styles } = useStyles();
  const [done, setDone] = useState<boolean>(false);
  const [open, setVisible] = useState<boolean>(false);
  const [authorizeModelOpen, setAuthorizeModelOpen] = useState<boolean>(false);
  const [current, setCurrent] = useState<Partial<StoryType> | undefined>(undefined);
  const {
    data: listData,
    loading,
    run,
  } = useRequest((storyName?: string) => {
    return queryTimelineList({
      count: 50,
      storyName,
    });
  });
  const { run: postRun } = useRequest(
    (method, params) => {
      if (method === 'remove') {
        return deleteStory(params);
      }
      if (method === 'update') {
        return updateStory(params);
      }
      return addStory(params);
    },
    {
      manual: true,
      onSuccess: () => {
        run();
      },
    },
  );
  const list = listData || [];
  const paginationProps = {
    showSizeChanger: true,
    showQuickJumper: true,
    pageSize: 5,
    total: list.length,
  };
  const showEditModal = (item: StoryType) => {
    setVisible(true);
    setCurrent(item);
  };
  const deleteItem = (id: string) => {
    postRun('remove', {
      instanceId: id,
    });
  };
  const editAndDelete = (key: string | number, currentItem: StoryType) => {
    console.log(currentItem);
    if (key === 'edit') showEditModal(currentItem);
    else if (key === 'delete') {
      Modal.confirm({
        title: '删除故事',
        content: '确定删除该故事吗？',
        okText: '确认',
        cancelText: '取消',
        onOk: () => deleteItem(currentItem.instanceId ?? ''),
      });
    }
  };
  const extraContent = (
    <div>
      <Button
        type="dashed"
        onClick={() => {
          setVisible(true);
        }}
        style={{
          marginBottom: 8,
          float: 'left'
        }}
      >
        <PlusOutlined />
        新建故事
      </Button>
      <Search
        className={styles.extraContentSearch}
        placeholder="请输入"
        onSearch={(value) => {
          run(value);
        }}
      />
    </div>
  );
  const MoreBtn: React.FC<{
    item: StoryType;
  }> = ({ item }) => (
    <Dropdown
      menu={{
        onClick: ({ key }) => editAndDelete(key, item),
        items: [
          {
            key: 'edit',
            label: '编辑',
          },
          {
            key: 'delete',
            label: '删除',
          },
        ],
      }}
    >
      <a>
        更多 <DownOutlined />
      </a>
    </Dropdown>
  );
  const handleDone = () => {
    setDone(false);
    setVisible(false);
    setCurrent({});
  };
  const handleSubmit = (values: StoryType) => {
    setDone(true);
    const method = current?.instanceId ? 'update' : 'add';
    postRun(method, { ...current, ...values });
    run();
  };
  return (
    <div>
      <PageContainer title={"Timeline"}>
        <div className={styles.standardList}>
          <Card
            className={styles.listCard}
            variant={undefined}
            style={{
              marginTop: 24,
            }}
            bodyStyle={{
              padding: '0 32px 40px 32px',
            }}
            extra={extraContent}
          >
            <List
              size="large"
              rowKey="id"
              loading={loading}
              pagination={paginationProps}
              dataSource={list}
              renderItem={(item: StoryType) => (
                <List.Item
                  actions={[
                    <a
                      key="edit"
                      disabled={judgePermission(item.permissionType as number, 'edit')}
                      onClick={(e) => {
                        e.preventDefault();
                        showEditModal(item);
                      }}
                    >
                      编辑
                    </a>,
                    // 增加授权操作，可以授权给其他用户
                    <a
                      key="authorize"
                      disabled={judgePermission(item.permissionType as number, 'auth')}
                      onClick={(e) => {
                        e.preventDefault();
                        setCurrent(item);
                        setAuthorizeModelOpen(true);
                      }}
                    >
                      授权
                    </a>,
                    <a
                      key="delete"
                      disabled={judgePermission(item.permissionType as number, 'delete')}
                      onClick={(e) => {
                        e.preventDefault();
                        deleteItem(item.instanceId ?? '');
                      }}
                    >
                      删除
                    </a>,
                  ]}
                >
                  <List.Item.Meta
                    avatar={<Avatar src={item.logo} shape="square" size="large" />}
                    title={
                      <a
                        onClick={() => {
                          history.push(`/timeline/${item.instanceId}`);
                        }}
                      >
                        {item.title}
                      </a>
                    }
                    description={item.description}
                  />
                  <ListContent data={item} />
                </List.Item>
              )}
            />
          </Card>
        </div>
      </PageContainer>
      <OperationModal
        done={done}
        open={open}
        current={current}
        onDone={handleDone}
        onSubmit={handleSubmit}
      />
      <AuthorizeStoryModal
        open={authorizeModelOpen}
        current={current}
        handleOk={(flag) => {
          if(flag) {
            run();
          }
          setAuthorizeModelOpen(false);
          setCurrent({});
        }}
        />
    </div>
  );
};
export default BasicList;