FEV2 / fw-cms

  import React, { useEffect, useState } from "react";

  import { Modal, Skeleton, Table, Select, Form, Input, Divider, Popconfirm, InputNumber, Button, message } from "antd";

  import useInitial from "@/hooks/useInitail";
  import { PlusOutlined } from "@ant-design/icons";
  import { fetchComps, getshoplist } from "../../api";
  import st from "../../style.less";

  import { edit } from "@/pages/ware/Spu/SkuManage/api";

  
  interface Props{
      onChange?:(data:BearCostSetting.TableList[])=>void;
      value?: BearCostSetting.TableList[];
  }
  
  const { Column } = Table;
  
  const ShareRateItemlist = ({onChange, value=[]}:Props) => {
      const typeList = [{id: 1, name: '门店'}, {id: 2, name: '往来单位'}];
      const [form] = Form.useForm();
      const [data, setData] = useState<BearCostSetting.Data>({});

      const [item, setItem] = useState<BearCostSetting.Item>({});

      const [tableList, setTableList] = useState<BearCostSetting.TableList[]>([]);
      const [compsList, setCompsList] = useState<BearCostSetting.Comp[]>([] as BearCostSetting.Comp[]);
      const [shoplist, setShoplist] = useState<BearCostSetting.Shop[]>([]);
      const [visible, setVisible] = useState(false);
  
      useEffect(() => {
          if (!data.type) return;
              fetchComps()
              .then(res => {
                  res.data && setCompsList([...res.data]);
              })
              .catch(err => {
                  message.error("操作失败");
              });
              getshoplist()
              .then(res => {
                  res.data && setShoplist([...res.data]);
              })
              .catch(err => {
                  message.error("操作失败");
              });
      }, [data.type]);
  
      /**
       * @description: 关闭Modal
       * @param {*}
       * @return {*}
       */
      const closeModal = () => {
          setVisible(false);
          form.resetFields();
      };
  

      /**
       * @description: 编辑
       * @param {BearCostSetting} item
       * @return {*}
       */
      const edit = (item:BearCostSetting.TableList) => {
          const {type, shareRate, id, name, key} = item;
          console.log('type-->', type);
          const shopname = typeList.filter(i => i.id === type)[0].name;
          // if (type === 1) {
          //     const _shoplist = shoplist.filter(i => i.id !== id);
          //     setShoplist([..._shoplist]);
          // } else if (type === 2) {
          //     const _compsList = compsList.filter(i => i.id !== id);
          //     setCompsList([..._compsList]);
          // }
          setData({...data, type});
          form.setFieldsValue({
              type: {value: type, label: shopname},
              id: {value: id, label: name},
              shareRate,
              key
          });
      };
  
      const _delete = (row:BearCostSetting.TableList) => {
          const { key} =row;
          const _tableList = tableList.filter(i => i.key !== key);
          onChange && onChange?.([..._tableList]);
          // value = [];
          setTableList([..._tableList]);

      };
  
          /**
       * @description: 分摊form
       * @param {any} feildValue
       * @return {*}
       */
      function handleItemSave(feildValue: any) {

          console.log('feildValue-->', feildValue);
          const {id, type, shareRate, key} = feildValue;
          const _tableList = tableList.filter(i => {
              return i?.key !== key;
          });
          // const _total = tableList.reduce((total, item) => {
          //     if (item.shareRate)total += item.shareRate;
          //     return total;
          // }, 0);
          // if (_total + shareRate >100) {
          //     message.error("分摊比例大于100%");
          //     return;
          // }
          const tableItem = {id: id.value, type: type.value, name: id.label, shareRate, key: _tableList.length +1};
          onChange && onChange?.([..._tableList, tableItem]);
          setTableList([..._tableList, tableItem]);

          closeModal();
      }
  
      return (
        <>
          <div className={st.header} style={{ display: "flex", justifyContent: "flex-end", marginBottom: 15}}>
            <Button
              type="primary"
              icon={<PlusOutlined />}
              onClick={() => {
                      setVisible(true);
                  }}
            >
              新增
            </Button>
          </div>
          <Table
            dataSource={tableList}

            rowKey={(item, index) => `${index}`}
            size="small"  

          >
            <Column 

              title="门店/往来单位"

              dataIndex="name"
              width={200}

              render={(t) => t || "-"}

            />
            <Column 

              title="分摊比例"

              dataIndex="shareRate"
              width={200}

              render={(t) => (t && `${t}%`) || "-"}

            />
            <Column 
              title="操作"
              width={100} 
              dataIndex="unit"

              render={(text, row:BearCostSetting.Item, index) => (

                <span>

                  <a
                    onClick={() => {
                      console.log('index', index);
                      edit(row);
                        setVisible(true);
                      }}
                  >
                    编辑
                  </a>
                  <Divider type="vertical" />

                  <Popconfirm title="是否删除?" onConfirm={() => _delete(row)} okText="确定" cancelText="取消">
                    <a
                      onClick={(e) => {
                              e.preventDefault();
                          }}
                      style={{ color: "red" }}
                    >
                      删除
                    </a>
                  </Popconfirm>
                </span>
                  )}
            /> 
          </Table>
                
          <Modal

            title="新增分摊比例"

            visible={visible}
            onCancel={closeModal}
            onOk={form.submit}
          >

            <Form form={form} labelCol={{span: '4'}} onFinish={handleItemSave}>

              <Form.Item

                label="对象类型:"

                name="type"
                rules={[{ required: true, message: '请选择缴费方式' }]}
              >
                <Select
                  placeholder="请选择"
                  showSearch
                  optionFilterProp="children"
                  labelInValue
                  onSelect={(item:any) => {

                      form.resetFields(['id']);

                      setData({...data, type: item.value});
                  }}
                  filterOption={(input, option: any) => option?.children.indexOf(input) >= 0}
                >
                  {
                      typeList && typeList.map((item:any) => (
                        <Select.Option value={item.id} key={item.id}>
                          {item.name}
                        </Select.Option>
                      ))
                  }
                </Select>
              </Form.Item>
              <Form.Item

                label={data?.type === 1 ? '门店': "往来单位"}

                name="id"

                rules={[{ required: true, message: '请选择缴费方式' }]}
              >
                <Select
                  placeholder="请选择"
                  showSearch
                  optionFilterProp="children"
                  labelInValue

                  allowClear

                  filterOption={(input, option: any) => option?.children.indexOf(input) >= 0}

                >
                  {
                      data?.type === 2 && (
  
                          compsList && compsList.map((item:any) => (
                            <Select.Option value={item.id} key={item.id}>
                              {item.name}
                            </Select.Option>
                          ))
                      )
                  }
                  {
                      data?.type === 1 && (

                          shoplist && shoplist.map((item:any) => (
                            <Select.Option value={item.id} key={item.id}>
                              {item.name}
                            </Select.Option>
                          ))
                      )
                  }
                </Select>
              </Form.Item>
              <Form.Item

                label="分摊比例"

                name="shareRate"
                rules={[{ required: true, message: '请输入缴费标识' }]}
              >

                <InputNumber placeholder="请填写" addonAfter="%" max={100} min={0} precision={2} />

              </Form.Item>

              <Form.Item
                name="key"
              />

            </Form>
          </Modal>
        </>
      );
  };
  
  export default ShareRateItemlist;