FEV2 / fw-cms

import React, { useState } from 'react';
import {
  Card, Row, Select, Button, Table,
  Switch, message, Popover, Radio, Dropdown, Menu, Divider
} from 'antd';
import { history } from 'umi';
import type { MenuProps } from 'antd';
import { SnippetsOutlined, PlusOutlined } from '@ant-design/icons';
import Search from 'antd/lib/input/Search';
import Column from 'antd/lib/table/Column';
import { debounce } from 'lodash';
import * as api from './api';
import { useStore } from '../../index';
import RenderGoodsSpec from '@/pages/capital/components/RenderGoodsSpec';
import { AssetTypeEnum } from '@/pages/capital/entity';

const Option = Select.Option;

export default function List() {
  const { typeName, setIsPart, breadcrumbs, MenuItems, setCurrentItem, innerParams,
    list, setBreadcrumbs, setLoading, setParams, paginationConfig, loading, setCurrentBreadcrumb, editDisabled } = useStore();
  const [switchLoading, setSwitchLoading] = useState(false);

  function editAdd(value?: any) {
    setCurrentItem(value);
    setIsPart(value ? value.part : false);
    setBreadcrumbs([...breadcrumbs, { name: `${value != undefined ? '编辑' : '新增'}`, key: 'detail' }]);
    setCurrentBreadcrumb({ name: `${value != undefined ? '编辑' : '新增'}`, key: 'detail' });
  }
  function changeSwich(value: any) {
    const param = {
      code: value.code,
      status: value.status == 1 ? 0 : 1,
    };
    setSwitchLoading(true);
    api.startStop(param).then(res => {
      message.success('操作成功');
      setLoading(true);
      setSwitchLoading(false);
    }).catch(e => {
      message.error(e.message);
      setSwitchLoading(false);
    });
  }

  const _onChange = debounce((value: any) => {
    setParams({ keywords: value, current: 1 }, true);
  }, 500);

  const _onChangeType = debounce((value: any) => {
    setParams({ ...value, current: 1 }, true);
  });

  const handleMenuClick: MenuProps['onClick'] = (e) => {
    switch (e.key) {
      case '1':
        history.push("/ams/standardMange/receive/rules/goods");
        break;
      case '2':
        history.push("/ams/standardMange/receive/rules/shops");
        break;
      case '3':
        history.push("/ams/standardMange/receive/rules/post");
        break;
      default:
        break;
    }
  };

  const clickToAuth = (item: StanderList.ListVO) => {
    history.push(`/ams/standardMange/auth/goods/${item.id}/${editDisabled || ''}`);
  };

  return (
    <Card>
      <Row justify="space-between">
        <Radio.Group
          buttonStyle="solid"
          value={innerParams.status}
          onChange={(e) => _onChangeType({ status: e.target.value })}
        >
          <Radio.Button key="1" value={1}>
            启用
          </Radio.Button>
          <Radio.Button key="0" value={0}>
            禁用
          </Radio.Button>
        </Radio.Group>
        <Select allowClear onChange={(e) => _onChangeType({ type: e })} placeholder="请选择类型">
          {typeName.map(i => (
            <Option value={i.type} key={i.type}>{i.name}</Option>
          ))}
        </Select>
        <Select allowClear onChange={(v) => _onChangeType({ part: v })} placeholder="是否配件">
          <Option value={1} key={1}>是</Option>
          <Option value={0} key={0}>否</Option>
        </Select>
        <Search
          style={{ width: 260 }}
          placeholder="搜索资产名称/型号"
          allowClear
          onChange={(e) => _onChange(e.target.value)}
        />
        {!editDisabled && (
          <div>
            <Dropdown
              overlay={
                <Menu onClick={handleMenuClick} items={MenuItems} />
              }
            >
              <Button icon={<SnippetsOutlined />} type="primary" style={{ width: 100, marginRight: 20 }}>
                领用授权
              </Button>
            </Dropdown>
            <Button type="primary" icon={<PlusOutlined />} onClick={() => editAdd(undefined)}>新增</Button>
          </div>
        )}
      </Row>

      <Table
        dataSource={list}
        style={{ marginTop: 20 }}
        loading={loading}
        pagination={paginationConfig}
        rowKey="id"
        size="small"
      >
        <Column title="物品编码" dataIndex="code" />
        <Column title="物品名称" dataIndex="name" />
        <Column
          title="型号规格"
          dataIndex="specList"
          width="16%"
          render={(text, record) => <RenderGoodsSpec specList={text} />}
        />
        <Column
          title="物品类型"
          dataIndex="type"
          render={(value) => (
            <span>{AssetTypeEnum[value]}</span>
          )}
        />
        <Column
          title="单位"
          dataIndex="unit"
        />
        <Column title="摊销周期(月)" dataIndex="amortizePeriod" align="center" width="8%" />
        <Column
          title="状态"
          render={(value) => (
            <Switch
              checkedChildren="开启"
              unCheckedChildren="关闭"
              checked={!!value.status}
              loading={switchLoading}
              disabled={!!editDisabled}
              onChange={() => changeSwich(value)}
            />
          )}
        />
        <Column
          title="采购渠道"
          dataIndex="purchaseChannelList"
          ellipsis
          render={(text) => (
            <Popover placement="topLeft" content={(text || []).map((i: any) => i.subjectName).join()}>
              <span>{(text || []).map((i: any) => i.subjectName).join()}</span>
            </Popover>
          )}
        />
        {/* <Column title="最高采购金额(元)" dataIndex="maxPrice" /> */}
        <Column
          title="操作"
          align="center"
          render={(record: StanderList.ListVO) => (
            <>
              <Button type="link" style={{ padding: 0 }} onClick={() => { editAdd(record); }}> {!editDisabled ? "编辑" : "查看"}</Button>
              <Divider type="vertical" />
              <Button type="link" style={{ padding: 0 }} onClick={() => { clickToAuth(record); }}>授权</Button>
            </>
          )}
        />
      </Table>
    </Card>
  );
}