往来单位关系设置

zhaofeng
1 parent 15244254
Showing 13 changed files with 859 additions and 14 deletions
config/routers/finance.ts
src/pages/finance/CompanyRelationAuth/api.ts
src/pages/finance/CompanyRelationAuth/components/Filter.tsx
src/pages/finance/CompanyRelationAuth/components/SelectModal.tsx
src/pages/finance/CompanyRelationAuth/index.tsx
src/pages/finance/CompanyRelationCreate/api.ts
src/pages/finance/CompanyRelationCreate/components/EditTagList.tsx
src/pages/finance/CompanyRelationCreate/components/Filter.tsx
src/pages/finance/CompanyRelationCreate/components/RelationshipSettings.tsx
src/pages/finance/CompanyRelationCreate/components/SelectCorrespondenceUnits.tsx
src/pages/finance/CompanyRelationCreate/entity.ts
src/pages/finance/CompanyRelationCreate/index.tsx
src/pages/finance/CompanyRelationCreate/useStore.ts
@@ -24,6 +24,10 @@ export default [
     component: "finance/CompanyRelationAuth",
   },
   {
+    path: "/finance2/companyRelationAuth/create", //往来单位关系设置==》新增
+    component: "finance/CompanyRelationCreate",
+  },
+  {
     path: "/finance2/specialAccountSetting/deductAccount", //划扣专用账户
     component: "./finance/SpecialAccount/DeductAccount",
   },
@@ -19,6 +19,10 @@ export interface CompanyRelationListVO {
   compShortName?: string; //简称
   compType?: number[]; //类型
   compTypeName?: number; //类型
+  beforeReimburse?: boolean; //是否报销前提供发票
+  billAmountRatio?: number; //发票要求金额比例（已扩大100倍，前端直接拼接百分号展示）
+  settleMethodNames?: string; // 支持结算方式
+  accountCheckPeriod?: number; //对账周期，每月多少号
 }
  
 /**
@@ -4,6 +4,7 @@ import { useStore } from &quot;../index&quot;;
 import { CompanyCategoryTypeEnum } from "@/pages/finance/entitys";
 import { debounce } from "lodash";
 import { deleteCompanyRelationApi } from '@/pages/finance/CompanyRelationAuth/api';
+import { history } from 'umi';
  
 const Search = Input.Search;
 const { Option } = Select;
@@ -50,8 +51,9 @@ export default function Filter() {
     setDisabled(false);
   }
  
+  // 新增
   function onAdd() {
-    setVisible(true);
+    history.push("/finance2/companyRelationAuth/create");
   }
   /**
    * @param compId
@@ -80,6 +80,8 @@ function SelectModal() {
     setSelectData([]);
   }
  
+
+
   return (
     <Modal
       width={700}
 import React from "react";
-import { Card, Table } from "antd";
+import { Button, Card, Divider, message, Popconfirm, Table } from "antd";
 import { PageHeaderWrapper } from "@ant-design/pro-layout";
 import { createStore } from "@/hooks/moz";
 import store from "./useStore";
 import SelectModal from "./components/SelectModal";
 import Filter from "./components/Filter";
-import { CompanyRelationListVO } from "@/pages/finance/CompanyRelationAuth/api";
+import { CompanyRelationListVO, deleteCompanyRelationApi } from "@/pages/finance/CompanyRelationAuth/api";
  
 const { Column } = Table;
  
@@ -15,8 +15,12 @@ function CompanyRelationAuth() {
   const {
     selected,
     loading,
-
+    selectedRelation,
     setSelectedRelation,
+    companyParams,
+    submitLoading,
+    setSubmitLoading,
+    setLoading,
   } = useStore();
  
   const rowSelection = {
@@ -25,10 +29,34 @@ function CompanyRelationAuth() {
       setSelectedRelation([...selectedRows]);
     },
     getCheckboxProps: (record: CompanyRelationListVO) => ({
-      // disabled: record.name === "Disabled User", // Column configuration not to be checked
       name: String(record.compId),
     }),
   };
+
+  /**
+   * @param compId
+   */
+  async function onDelete() {
+    const compIdList = selectedRelation.map((item) => item.compId);
+
+    try {
+      const pa = { ...companyParams, compIdList };
+      console.log("删除", pa);
+      setSubmitLoading(true);
+      const { success, result } = await deleteCompanyRelationApi(pa);
+      setSubmitLoading(false);
+
+      if (!success) {
+        return message.error(result);
+      } else {
+        message.success(result);
+        setLoading(true);
+      }
+    } catch (e) {
+      setSubmitLoading(false);
+      message.error(e.message);
+    }
+  }
   return (
     <PageHeaderWrapper title="往来单位关系设置">
       <Card>
@@ -46,17 +74,39 @@ function CompanyRelationAuth() {
           <Column title="单位名称" dataIndex="compName" />
           <Column title="简称" dataIndex="compShortName" />
           <Column title="类型" dataIndex="compTypeName" />
-          {/* <Column
+          <Column title="发票要求" dataIndex="beforeReimburse" render={(before) => `支付${before ? "前" : "后"}`} />
+          <Column title="发票金额要求比例" dataIndex="billAmountRatio" render={(ratio) => `${ratio}%`} />
+          <Column title="支持结算方式" dataIndex="settleMethodNames" render={(way) => way || "--"} />
+          <Column title="对账周期" dataIndex="accountCheckPeriod" render={(date) => (date ? `${date}日` : "--")} />
+          <Column
             title="操作"
-            dataIndex="compId"
-            render={(key) => (
-              <Popconfirm title="是否删除" onConfirm={() => onDelete(key)} okText="确定" cancelText="取消">
-                <Button type="link" danger loading={submitLoading}>
-                  删除
-                </Button>
-              </Popconfirm>
+            align="center"
+            width="15%"
+            render={(row) => (
+              <>
+                {/* <a
+                  onClick={(e) => {
+                    e.preventDefault();
+                    // editModal(row, true);
+                  }}
+                >
+                  编辑
+                </a>
+                <Divider type="vertical" /> */}
+                <Popconfirm
+                  title="是否删除"
+                  // onConfirm={() => onDelete(row.id)}
+                  onConfirm={() => onDelete()}
+                  okText="确定"
+                  cancelText="取消"
+                >
+                  <Button type="text" style={{ marginRight: 10 }} danger loading={submitLoading}>
+                    删除
+                  </Button>
+                </Popconfirm>
+              </>
             )}
-          /> */}
+          />
         </Table>
       </Card>
       <SelectModal />
+import { http } from "@/typing/http";
+import request from "@/utils/request";
+import { FINANCE2_HOST } from "@/utils/host";
+
+type PrRes<T> = http.PromiseResp<T>;
+
+export interface CompanyRelationParams {
+  dealerId: number;
+  compCategory: number;
+  keywords?: string;
+  current?: number;
+  pageSize?: number;
+  companyType?: number;
+}
+
+export interface CompanyRelationListVO {
+  compId?: number;
+  compName?: string;
+  compShortName?: string; //简称
+  compType?: number[]; //类型
+  compTypeName?: number; //类型
+  beforeReimburse?: boolean; //是否报销前提供发票
+  billAmountRatio?: number; //发票要求金额比例（已扩大100倍，前端直接拼接百分号展示）
+  settleMethodNames?: string; // 支持结算方式
+  accountCheckPeriod?: number; //对账周期，每月多少号
+}
+
+/**
+ * 查询往来单位关系列表
+ */
+export function getCompanyByDealerApi(params: CompanyRelationParams): PrRes<CompanyRelationListVO[]> {
+  return request.get(`${FINANCE2_HOST}/trade/company/relation/list`, { params });
+}
+
+interface SaveParams {
+  compIdList: number[]; //单位id集合
+  dealerId: number; //商家id，必填
+  compCategory: number; //单位类别，必填
+}
+
+/**
+ * 新增往来单位关系
+ */
+export function saveCompanyRelationApi(params: SaveParams): PrRes<void> {
+  return request.post(`${FINANCE2_HOST}/trade/company/relation/save`, params);
+}
+
+/**
+* 删除往来单位关系
+  /trade/company/relation/delete
+ */
+export function deleteCompanyRelationApi(params: SaveParams): PrRes<void> {
+  return request.post(`${FINANCE2_HOST}/trade/company/relation/delete`, params);
+}
+import * as React from "react";
+import { Tag, Input, Tooltip } from "antd";
+import { PlusOutlined } from "@ant-design/icons";
+import { isArray } from "lodash";
+// import "./EditTagList.less";
+
+interface Props {
+  value?: string[];
+  onChange?: (value: string[]) => any;
+}
+
+const colorArr = ["magenta", "geekblue", "cyan", "orange", "green", "lime", "gold", "volcano", "purple", "red"];
+
+export default ({ value = [], onChange }: Props) => {
+  function handleClose(tag: string) {
+    const tags = value.filter((item) => item !== tag);
+    onChange && onChange(tags);
+  }
+  return (
+    <>
+      <div style={{ borderStyle: "solid", borderColor: "#eee", padding: 5, borderWidth: 1 }}>
+        {isArray(value) &&
+          value.map((tag, index) => {
+            const isLongTag = tag.length > 20;
+            const tagElem = (
+              <Tag
+                className="edit-tag"
+                key={tag}
+                closable={value.length > 1}
+                color={colorArr[index % 10]}
+                onClose={() => handleClose(tag)}
+              >
+                <span>{isLongTag ? `${tag.slice(0, 20)}...` : tag}</span>
+              </Tag>
+            );
+            return isLongTag ? (
+              <Tooltip title={tag} key={tag}>
+                {tagElem}
+              </Tooltip>
+            ) : (
+              tagElem
+            );
+          })}
+      </div>
+    </>
+  );
+};
+import React from "react";
+import { Button, Col, Popconfirm, Row, Select, Input, message } from "antd";
+import { useStore } from "../index";
+import { CompanyCategoryTypeEnum } from "@/pages/finance/entitys";
+import { debounce } from "lodash";
+import { deleteCompanyRelationApi } from '@/pages/finance/CompanyRelationAuth/api';
+import { history } from 'umi';
+
+const Search = Input.Search;
+const { Option } = Select;
+
+export default function Filter() {
+  const {
+    setVisible,
+    dealerList,
+    setCompanyParams,
+    dealerLoading,
+    disabled,
+    setDisabled,
+    setSelected,
+    companyList,
+    comBussinessList,
+    selectedRelation,
+    submitLoading,
+    setSubmitLoading,
+    companyParams,
+    setLoading,
+  } = useStore();
+  const searchDealer = (dealerId: number) => {
+    setCompanyParams({ ...companyParams, dealerId }, true);
+  };
+
+  function searchType(compCategory: number) {
+    setCompanyParams({ ...companyParams, compCategory }, true);
+  }
+
+  function searchCompanyType(companyType: number) {
+    setCompanyParams({ ...companyParams, companyType }, true);
+  }
+
+  const fetchListByName = debounce((value) => {
+    setCompanyParams({ ...companyParams, keywords: value }, true);
+  }, 500);
+
+  function onCancel() {
+    setDisabled(true);
+    setSelected([...companyList]);
+  }
+
+  function onEdit() {
+    setDisabled(false);
+  }
+
+  // 新增
+  function onAdd() {
+    history.push("/finance2/companyRelationAuth/create");
+  }
+  /**
+   * @param compId
+   */
+  async function onDelete() {
+    const compIdList = selectedRelation.map((item) => item.compId);
+    try {
+      const pa = { ...companyParams, compIdList};
+      setSubmitLoading(true);
+      const { success, result } = await deleteCompanyRelationApi(pa);
+      setSubmitLoading(false);
+
+      if (!success) {
+        return message.error(result);
+      } else {
+        message.success(result);
+        setLoading(true);
+      }
+    } catch (e) {
+      setSubmitLoading(false);
+      message.error(e.message);
+    }
+  }
+
+  return (
+    <div
+      style={{
+        display: "flex",
+        flexDirection: "row",
+        justifyContent: "space-between",
+        alignItems: "center",
+        marginBottom: 20,
+      }}
+    >
+      <Row style={{ display: "flex", flex: 1 }}>
+        <Col span={9}>
+          <Select
+            placeholder="请选择商家"
+            showSearch
+            loading={dealerLoading}
+            disabled={!disabled}
+            optionFilterProp="children"
+            onChange={searchDealer}
+            value={companyParams.dealerId}
+            style={{ width: "80%" }}
+          >
+            {dealerList.map((dealer) => (
+              <Option value={dealer.id} key={dealer.id}>
+                {dealer.name}
+              </Option>
+            ))}
+          </Select>
+        </Col>
+        <Col span={5}>
+          <Search
+            allowClear
+            disabled={!disabled}
+            placeholder="搜索单位名称"
+            onChange={(e) => fetchListByName(e.target.value || undefined)}
+            style={{ width: 200 }}
+          />
+        </Col>
+        <Col span={3}>
+          <Select
+            placeholder="搜索单位类别"
+            disabled={!disabled}
+            onChange={searchType}
+            value={companyParams.compCategory}
+            style={{ width: 100 }}
+          >
+            {[1, 2].map((i) => (
+              <Option value={i} key={i}>
+                {CompanyCategoryTypeEnum[i]}
+              </Option>
+            ))}
+          </Select>
+        </Col>
+        <Col>
+          <Select placeholder="搜索类型" disabled={!disabled} onChange={searchCompanyType} style={{ width: 150 }}>
+            {comBussinessList.map((item) => (
+              <Option key={item.id} value={item.id}>
+                {item.name}
+              </Option>
+            ))}
+          </Select>
+        </Col>
+      </Row>
+      <div style={{ display: "flex", flexDirection: "row-reverse" }}>
+        <Button type="primary" onClick={onAdd}>
+          新增
+        </Button>
+
+        <Popconfirm title="确定删除？" onConfirm={onDelete}>
+          <Button style={{marginRight:10}} hidden={!selectedRelation.length} danger  loading={submitLoading}>
+            删除
+          </Button>
+        </Popconfirm>
+      </div>
+    </div>
+  );
+}
+import React, { useState, useEffect, memo } from "react";
+import {
+  Modal,
+  Table,
+  Select,
+  Input,
+  message,
+  Spin,
+  Form,
+  Divider,
+  Space,
+  Typography,
+  Button,
+  InputNumber,
+} from "antd";
+import Column from "antd/lib/table/Column";
+import { RecordStateEnum } from "@/pages/finance/entitys";
+import usePagination from "@/hooks/usePagination";
+import { getCompAccountApi } from "@/pages/finance/TradeCompany/api";
+import { useStore } from "../index";
+import { saveCompanyRelationApi } from "@/pages/finance/CompanyRelationAuth/api";
+import { each } from "lodash";
+import EditTagList from "./EditTagList";
+import { invoiceRequirements, payWay } from "@/pages/finance/CompanyRelationCreate/entity";
+
+const { Option } = Select;
+
+interface Props {
+  onPrevious?: () => void;
+}
+
+function SelectModal({ onPrevious }: Props) {
+  const [form] = Form.useForm();
+  const {
+    visible,
+    selected,
+    setVisible,
+    companyParams,
+    comBussinessList,
+    comBussinessLoading,
+    setDisabled,
+    setLoading,
+    selectData,
+    setSelectData,
+  } = useStore();
+  const [submitLoading, setSubmitLoading] = useState(false);
+
+  useEffect(() => {
+    const formDate = transFormData(selectData);
+    form.setFieldsValue({ ...formDate });
+  }, [selectData]);
+
+  function transFormData(originData: TradeCompany.ComList[]) {
+    let res = {};
+    const comp = originData.map((it) => it.compName);
+    res.comp = comp;
+    return res;
+  }
+
+  // function onSubmit(selectedData: any[]) {
+  //   if (!selectedData.length) {
+  //     return message.info("请先选择往来单位");
+  //   }
+  //   setSubmitLoading(true);
+  //   saveCompanyRelationApi({
+  //     dealerId: companyParams.dealerId,
+  //     compCategory: companyParams.compCategory,
+  //     compIdList: selectedData.map((item) => item.id!),
+  //   })
+  //     .then((res) => {
+  //       message.success("保存成功");
+  //       setLoading(true);
+  //       setSubmitLoading(false);
+  //       setDisabled(true);
+  //       onCancel();
+  //     })
+  //     .catch((e) => {
+  //       setSubmitLoading(false);
+  //       message.error(e.message);
+  //     });
+  // }
+
+  function onCancel() {
+    setVisible(false);
+    setSelectData([]);
+  }
+
+  // 保存
+  function _onOk(formValues:any) {
+    console.log("表单数据", formValues);
+  }
+  return (
+    <>
+      <Form
+        form={form}
+        labelCol={{
+          xs: { span: 24 },
+          sm: { span: 8 },
+          md: { span: 6 },
+        }}
+        wrapperCol={{
+          xs: { span: 24 },
+          sm: { span: 10 },
+          md: { span: 15 },
+        }}
+        onFinish={_onOk}
+      >
+        <Form.Item label="往来单位" name="comp">
+          <EditTagList />
+        </Form.Item>
+        <Form.Item label="发票要求" name="beforeReimburse" rules={[{ required: true, message: "请选择发票要求" }]}>
+          <Select placeholder="请选择发票要求">
+            {invoiceRequirements.map((item) => (
+              <Option key={item.value} value={item.value}>
+                {item.label}
+              </Option>
+            ))}
+          </Select>
+        </Form.Item>
+        <Form.Item
+          label="发票金额要求比例"
+          name="billAmountRatio"
+          rules={[{ required: true, message: "请输入发票金额要求比例" }]}
+        >
+          <InputNumber
+            min={0}
+            max={100}
+            style={{ width: "100%" }}
+            formatter={(value) => `${value}%`}
+            parser={(value) => value!.replace("%", "")}
+          />
+        </Form.Item>
+        <Form.Item label="支持结算方式" name="settleMethods" rules={[{ required: true, message: "请选择结算方式" }]}>
+          <Select placeholder="请选择结算方式">
+            {payWay.map((item) => (
+              <Option key={item.value} value={item.value}>
+                {item.label}
+              </Option>
+            ))}
+          </Select>
+        </Form.Item>
+        <Form.Item label="对账周期" name="accountCheckPeriod" rules={[{ required: true, message: "请输入对账周期" }]}>
+          <InputNumber
+            addonBefore="每月"
+            placeholder="请输入"
+            min={1}
+            precision={0}
+            max={31}
+            addonAfter="日"
+            style={{ width: "100%" }}
+          />
+        </Form.Item>
+      </Form>
+      <div style={{ width: "100%", textAlign: "center", marginTop: 30 }}>
+        <Button type="primary" style={{ marginBottom: 10 }} onClick={() => history.back()}>
+          返回列表
+        </Button>
+        <Divider type="vertical" />
+        <Button
+          type="primary"
+          style={{ marginBottom: 10 }}
+          onClick={() => {
+            const comp = form.getFieldValue("comp");
+            const _selectData = selectData.filter((item) => comp.find((it) => it === item.compName));
+
+            setSelectData(_selectData);
+            onPrevious && onPrevious();
+          }}
+        >
+          返回上一步
+        </Button>
+        <Divider type="vertical" />
+        <Button type="primary" style={{ marginBottom: 10 }} onClick={() => form.submit()}>
+          保存
+        </Button>
+      </div>
+    </>
+  );
+}
+
+export default memo(SelectModal);
+import React, { useState, useEffect, memo } from "react";
+import { Modal, Table, Select, Input, message, Spin, Button, Divider } from "antd";
+import Column from "antd/lib/table/Column";
+import { RecordStateEnum } from "@/pages/finance/entitys";
+import usePagination from "@/hooks/usePagination";
+import { getCompAccountApi } from "@/pages/finance/TradeCompany/api";
+import { useStore } from "../index";
+import { debounce } from "lodash";
+import { saveCompanyRelationApi } from "@/pages/finance/CompanyRelationAuth/api";
+
+interface Props {
+  onNext?: () => void;
+}
+
+function SelectModal({ onNext }: Props) {
+  const {
+    visible,
+    selected,
+    setVisible,
+    companyParams,
+    comBussinessList,
+    comBussinessLoading,
+    setDisabled,
+    setLoading,
+    selectData,
+    setSelectData,
+  } = useStore();
+  const [submitLoading, setSubmitLoading] = useState(false);
+
+  const [delay, setDelay] = useState<boolean>(true);
+  // const [selectData, setSelectData] = useState<TradeCompany.ComList[]>([]);
+
+  const {
+    list: compList,
+    loading,
+    paginationConfig,
+    setParams,
+    innerParams,
+    // } = usePagination<TradeCompany.ComList>(getCompAccountApi, { recordState: RecordStateEnum["已备案"] }, { delay });
+  } = usePagination<TradeCompany.ComList>(getCompAccountApi, {
+    compCategory: companyParams.compCategory,
+    excludeDealerId: companyParams.dealerId,
+  });
+
+  const fetchListByName = debounce((value) => {
+    setParams({ ...innerParams, keywords: value }, true);
+  }, 500);
+
+  function searchType(compTypes: number) {
+    setParams({ compTypes }, true);
+  }
+
+  function handSave() {
+    const res = onSubmit(selectData);
+    if (res) {
+      onCancel();
+    }
+  }
+
+  function onSubmit(selectedData: any[]) {
+    if (!selectedData.length) {
+      return message.info("请先选择往来单位");
+    }
+    setSubmitLoading(true);
+    saveCompanyRelationApi({
+      dealerId: companyParams.dealerId,
+      compCategory: companyParams.compCategory,
+      compIdList: selectedData.map((item) => item.id!),
+    })
+      .then((res) => {
+        message.success("保存成功");
+        setLoading(true);
+        setSubmitLoading(false);
+        setDisabled(true);
+        onCancel();
+      })
+      .catch((e) => {
+        setSubmitLoading(false);
+        message.error(e.message);
+      });
+  }
+  function onCancel() {
+    setVisible(false);
+    setSelectData([]);
+  }
+
+  return (
+    <>
+      <div style={{ display: "flex", flexDirection: "row", marginBottom: 20 }}>
+        <Input.Search
+          allowClear
+          placeholder="搜索单位名称/社会信用代码"
+          onChange={(e) => fetchListByName(e.target.value || undefined)}
+          style={{ width: 250, marginRight: 10 }}
+        />
+        <Select
+          placeholder="搜索业务类型"
+          showSearch
+          allowClear
+          optionFilterProp="children"
+          loading={comBussinessLoading}
+          onChange={searchType}
+          style={{ width: 200 }}
+        >
+          {comBussinessList.map((item) => (
+            <Select.Option key={item.id} value={item.id}>
+              {item.name}
+            </Select.Option>
+          ))}
+        </Select>
+      </div>
+
+      <Table
+        loading={loading}
+        dataSource={compList}
+        pagination={{ ...paginationConfig, showSizeChanger: false }}
+        rowKey="id"
+        rowSelection={{
+          type: "checkbox",
+          selectedRowKeys: selectData.map((row) => row.id as number),
+          onSelect: (row: any, _selected: boolean) => {
+            const index = selectData.findIndex((_row) => _row.id == row.id);
+            if (_selected) {
+              selectData.unshift(row);
+            } else if (index > -1) {
+              selectData.splice(index, 1);
+            }
+            setSelectData([...selectData]);
+          },
+          onSelectAll: (selected, selectedRows, changeRows) => {
+            const changedKeys = changeRows.map((row) => row.id);
+            let newData = [];
+            // 全选
+            if (selected) {
+              // 过滤掉已选的
+              newData = selectData.concat(changeRows.filter((row) => !selectData.some((item) => item == row.id)));
+            } else {
+              // 全不选 - 去掉已选的
+              newData = selectData.filter((row) => !changedKeys.find((y) => y === row.id));
+            }
+            setSelectData(newData);
+          },
+        }}
+      >
+        <Column title="账户名称" dataIndex="compName" />
+        <Column title="业务类型" dataIndex="compTypeName" />
+        <Column title="社会信用代码" dataIndex="creditCode" width="15%" />
+      </Table>
+      <div style={{ width: "100%", textAlign: "center", marginTop: 30 }}>
+        <Button type="primary" style={{ marginBottom: 10 }} onClick={() => history.back()}>
+          返回列表
+        </Button>
+
+        {!!selectData.length && (
+          <>
+            <Divider type="vertical" />
+            <Button
+              type="primary"
+              style={{ marginBottom: 10 }}
+              onClick={() => {
+                onNext && onNext();
+              }}
+            >
+              下一步
+            </Button>
+          </>
+        )}
+      </div>
+    </>
+  );
+}
+
+export default memo(SelectModal);
+// 发票要求 1：支付前 2：支付后
+export const invoiceRequirements = [
+  {
+    label: "支付前",
+    value: 1,
+  },
+  {
+    label: "支付后",
+    value: 2,
+  },
+];
+
+export enum RequirementsTypeEnum {
+  "支付前" = 1,
+  "支付后",
+}
+
+// 往来单位支付方式
+export const payWay = [
+  { label: "即时支付", value: 1 },
+  { label: "周期支付", value: 2 },
+  { label: "员工垫付", value: 3 },
+];
+
+ export enum PayWayEnum {
+   "即时支付" = 1,
+   "周期支付",
+   "员工垫付",
+ }
+import React, { useState } from "react";
+import { Button, Card, Divider, message, Popconfirm, Steps, Table, Tabs } from "antd";
+import { PageHeaderWrapper } from "@ant-design/pro-layout";
+import { createStore } from "@/hooks/moz";
+import store from "./useStore";
+import Filter from "./components/Filter";
+import SelectCorrespondenceUnits from "./components/SelectCorrespondenceUnits";
+import RelationshipSettings from "./components/RelationshipSettings";
+import { CompanyRelationListVO, deleteCompanyRelationApi } from "@/pages/finance/CompanyRelationAuth/api";
+
+const { Column } = Table;
+const { TabPane } = Tabs;
+
+export const { Provider, useStore } = createStore(store);
+
+function CompanyRelationAuth() {
+  const { Step } = Steps;
+  const [current, setCurrent] = useState<number>(0);
+  const {
+    selected,
+    loading,
+    selectedRelation,
+    setSelectedRelation,
+    companyParams,
+    submitLoading,
+    setSubmitLoading,
+    setLoading,
+  } = useStore();
+
+  const rowSelection = {
+    onChange: (selectedRowKeys: React.Key[], selectedRows: CompanyRelationListVO[]) => {
+      setSelectedRelation([...selectedRows]);
+    },
+    getCheckboxProps: (record: CompanyRelationListVO) => ({
+      name: String(record.compId),
+    }),
+  };
+
+  return (
+    <PageHeaderWrapper title="往来单位关系设置">
+      <Card>
+        <Steps type="navigation" current={current} className="site-navigation-steps">
+          <Step title="选择往来单位" />
+          <Step title="关系设置" />
+        </Steps>
+        <Tabs
+          style={{ marginTop: 40 }}
+          activeKey={String(current)}
+          tabBarStyle={{ display: "hidden" }}
+          renderTabBar={() => <div />}
+        >
+          <TabPane key="0">
+            <SelectCorrespondenceUnits onNext={() => setCurrent(current + 1)} />
+          </TabPane>
+          <TabPane key="1">
+            <RelationshipSettings onPrevious={() => setCurrent(0)} />
+          </TabPane>
+        </Tabs>
+      </Card>
+    </PageHeaderWrapper>
+  );
+}
+
+export default () => (
+  <Provider>
+    <CompanyRelationAuth />
+  </Provider>
+);
+import { useState, useEffect } from "react";
+import useInitial from "@/hooks/useInitail";
+import { getDealerApi } from "@/common/api";
+import { getCompanyByDealerApi, CompanyRelationParams, CompanyRelationListVO, saveCompanyRelationApi } from "./api";
+import { CompanyCategoryTypeEnum } from "@/pages/finance/entitys";
+import { message } from "antd";
+import { getCompanyBusinessTypesApi } from "@/pages/finance/TradeCompany/api";
+
+export default function useStore() {
+  const [delay, setDelay] = useState<boolean>(true);
+  const [disabled, setDisabled] = useState<boolean>(true);
+  const [visible, setVisible] = useState(false);
+  const [submitLoading, setSubmitLoading] = useState(false);
+  const [selectData, setSelectData] = useState<TradeCompany.ComList[]>([]);
+  // 存储已选关系，用于批量删除
+  const [selectedRelation, setSelectedRelation] = useState<CompanyRelationListVO[]>([]);
+
+  /** 商家下往来单位列表 */
+  const {
+    data: companyList,
+    setParams: setCompanyParams,
+    setLoading,
+    loading,
+    params: companyParams,
+  } = useInitial<CompanyRelationListVO[], CompanyRelationParams>(
+    getCompanyByDealerApi,
+    [],
+    { compCategory: CompanyCategoryTypeEnum["供应商"], dealerId: -1 },
+    delay
+  );
+  // 商家的列表
+  const { data: dealerList, loading: dealerLoading } = useInitial(getDealerApi, [], {});
+  // 往来单位业务类型列表
+  const { data: comBussinessList, loading: comBussinessLoading } = useInitial(getCompanyBusinessTypesApi, [], null);
+
+  const [selected, setSelected] = useState<CompanyRelationListVO[]>([]);
+
+  useEffect(() => {
+    if (dealerList.length) {
+      setDelay(false);
+      setCompanyParams({ ...companyParams, dealerId: dealerList[0].id }, true); //因为usePagination 未支持 delay变为false后还需手动刷新接口
+    } else {
+      !dealerLoading && message.warning("没有授权商家，无法查看数据");
+    }
+  }, [dealerList, dealerLoading]);
+
+  useEffect(() => {
+    setSelected([...companyList]);
+  }, [companyList]);
+
+  return {
+    selectData,
+    setSelectData,
+    companyList,
+    visible,
+    setVisible,
+    setCompanyParams,
+    companyParams,
+    dealerList,
+    setLoading,
+    loading,
+    dealerLoading,
+    disabled,
+    setDisabled,
+    selected,
+    setSelected,
+    submitLoading,
+    setSubmitLoading,
+    comBussinessList,
+    comBussinessLoading,
+    selectedRelation,
+    setSelectedRelation,
+  };
+}