List.tsx 1.76 KB
import React from "react";
import { message, Popconfirm, Table, Space } from "antd";
import { useStore } from '../index';
import {deleteConfigApi, Result } from '../api';

const Column = Table.Column;

export default function TableList() {
  const {data, loading, setLoading, setShopData, setCurrent } = useStore();

  function handleDelete(id?: number) {
    deleteConfigApi(id)
    .then(res => {
      message.success(res.result);
      setLoading(true);
    })
    .catch(e => {
      message.error(e.message);
    });
  }

  return (
    <div>
      <Table
        dataSource={data}
        pagination={false}
        loading={loading}
        rowKey="id"
      >
        <Column
          title="上班期间线索有效接通目标(条/天)"
          align="left"
          dataIndex="dialAims"
        />
        <Column
          title="适用门店"
          align="left"
          dataIndex="displayName"
          render={(_text: string, record: Result) => <span style={{color: "#4189FD"}} onClick={() => setShopData({visible: true, data: record.shopList || []})}>{_text}</span>}
        />
        <Column
          title="操作"
          align="left"
          render={(_text, record: Result) => {
            return (
              <Space>
                <a onClick={() => setCurrent({visible: true, data: record})} style={{ display: "block", color: "#4189FD" }}>编辑</a>
                <Popconfirm
                  title="是否删除?"
                  okText="确定"
                  cancelText="取消"
                  onConfirm={() => handleDelete(record.id)}
                >
                  <a style={{color: "#EC3F2F"}}>删除</a>
                </Popconfirm>
              </Space>
            );
          }}
        />
      </Table>
    </div>
  );
}