feat(fvm): 分销价格配置联调

莫红玲
1 parent 1a0ae662
Showing 7 changed files with 566 additions and 5 deletions
config/routers/fvm.ts
src/pages/stock/Components/CarTableSelect.tsx
src/pages/stock/Distribute/Price/api.ts
src/pages/stock/Distribute/Price/components/CreatelModal.tsx
src/pages/stock/Distribute/Price/index.tsx
src/pages/stock/Distribute/Records/components/CreatelModal.tsx
src/pages/stock/Distribute/Records/index.tsx
@@ -403,4 +403,8 @@ export default [
     path: 'fvm/distribute/record',  //分销商备案
     component: './stock/Distribute/Records',
   },
+  {
+    path: 'fvm/distribute/price',  //分销价格配置
+    component: './stock/Distribute/Price',
+  },
 ];
+import React, { useEffect, useState } from 'react';
+import { Button, Popconfirm, Card, Table, Modal, Form, Select, Space } from 'antd';
+import useInitial from '@/hooks/useInitail';
+import { getOnsaleBrandApi, getOnsaleSeriesApi, getOnsaleSpecApi } from '@/pages/stock/Components/api';
+import { getGroupCasBrandApi, getSeriesApi, getSpecApi } from '@/common/api';
+
+interface Props {
+  onChange?: (pa: any) => void;
+  value?: any[];
+  disabled?: boolean;
+  bizType?: number;
+}
+
+interface Item {
+  label: string;
+  value: number;
+  key?: number;
+}
+const { Column } = Table;
+const { Option } = Select;
+
+export default function Index({ onChange, value, disabled, bizType = 1 }: Props) {
+  const [form] = Form.useForm();
+  const { data: brandList } = useInitial(bizType == 2 ? getGroupCasBrandApi : getOnsaleBrandApi, [], {});
+  // 控制Modal是否可见
+  const [visible, setVisible] = useState<boolean>(false);
+  // 控制是否可见车型下拉框
+  const [specVisible, setSpecVisible] = useState<boolean>(false);
+  //存储表格当前车系
+  const [currentItem, setCurrentItem] = useState<any>();
+  //存储Modal中可选的车系
+  const [series, setSeries] = useState<any>([]);
+  //存储接口返回的车型
+  const [specList, setSpecList] = useState<any>([]);
+  //存储Modal选择的品牌和车系作为表格的数据源
+  const [savaData, setSavadata] = useState<any>([]);
+  // 存储已经选中的车系
+  const [selectedSeries, setSelectedSeries] = useState<any[]>([]);
+
+  useEffect(() => {
+    if (value && value.length) {
+      setSelectedSeries([...value]);
+      setSavadata([...value]);
+    }
+  }, [value]);
+
+  const _onOk = () => {
+    form
+      .validateFields()
+      .then((fileds) => {
+        if (specVisible) {
+          const { Spec } = fileds;
+          const _specs = Spec.map((item: Item) => ({
+            specId: item.value,
+            specName: item.label,
+          }));
+          currentItem.specs = _specs;
+          currentItem.authType = 2;
+          const tempData = savaData.map((item: any) => (item.seriesId === currentItem.seriesId ? currentItem : item));
+          setSavadata([...tempData]);
+          onChange && onChange(tempData);
+          setVisible(false);
+          setSpecVisible(false);
+          return;
+        }
+        const { Series, brand } = fileds;
+
+        const tempArray = Series.map((item: any) => ({
+          brandName: brand.label,
+          brandId: brand.value,
+          seriesName: item.label,
+          seriesId: Number(item.key),
+          authType: 1, //1全部2部分
+        }));
+
+        selectedSeries.push(...tempArray);
+
+        savaData.push(...tempArray);
+        onChange && onChange(selectedSeries);
+        setVisible(false);
+      })
+      .catch((err) => console.log(err.message));
+  };
+
+  // 选择部分车辆表格==》删除车系
+  const onDelete = (record: any) => {
+    const _savaData = savaData.filter((item: any) => item.seriesId != record.seriesId);
+    const _selectedSeries = selectedSeries.filter((item) => item.seriesId != record.seriesId);
+    setSavadata([..._savaData]);
+    onChange && onChange(_savaData);
+    setSelectedSeries([..._selectedSeries]);
+  };
+
+  // 选择部分车辆表格==》编辑选择部分车型
+  const onSelectSpec = async (record: any) => {
+    const specApi = bizType == 1 ? getOnsaleSpecApi : getSpecApi;
+    const { data } = await specApi(record.seriesId);
+    setCurrentItem(record);
+    setSpecList(data);
+    setSpecVisible(true);
+    setVisible(true);
+  };
+
+  return (
+    <>
+      <Card>
+        <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
+          {!disabled && (
+            <Button
+              type="link"
+              disabled={disabled}
+              onClick={() => {
+                setVisible(true);
+                form.resetFields();
+              }}
+            >
+              新增
+            </Button>
+          )}
+        </div>
+
+        <Table dataSource={value} rowKey={(record) => String(record.seriesId)} bordered>
+          <Column
+            title="品牌"
+            dataIndex="brandName"
+            key="brandName"
+            filters={brandList.map((item) => ({
+              text: item.name,
+              value: item.name,
+            }))}
+            onFilter={(value, record: any) => {
+              return record.brandName.indexOf(value) === 0;
+            }}
+          />
+          <Column title="车系" dataIndex="seriesName" key="seriesName" />
+          <Column
+            title="车型"
+            dataIndex="specs"
+            key="specs"
+            render={(_, record: any) =>
+              record.specs && record.specs.length ? <span>{record.specs.map((item: any) => item.specName).join(',')}</span> : <span>全部</span>
+            }
+          />
+          {!disabled && (
+            <Column
+              title="操作"
+              key="operation"
+              render={(_, record) => (
+                <Space>
+                  <Button type="link" style={{ padding: 0 }} onClick={() => onSelectSpec(record)} disabled={disabled}>
+                    编辑车型
+                  </Button>
+
+                  <Popconfirm title="确定删除？" okText="确定" style={{ padding: 0 }} cancelText="取消" onConfirm={() => onDelete(record)}>
+                    <Button type="link" danger disabled={disabled}>
+                      删除
+                    </Button>
+                  </Popconfirm>
+                </Space>
+              )}
+            />
+          )}
+        </Table>
+      </Card>
+
+      {/* 选择品牌和车系 */}
+      <Modal
+        title="选择车辆信息"
+        maskClosable={false}
+        visible={visible}
+        onOk={() => form.submit()}
+        onCancel={() => {
+          setVisible(false);
+          setSpecVisible(false);
+        }}
+        afterClose={() => {
+          form.resetFields();
+          setCurrentItem({});
+        }}
+      >
+        <Form onFinish={_onOk} form={form}>
+          {specVisible ? (
+            <Form.Item label="车型" name="Spec" rules={[{ required: true, message: '请选择车型' }]}>
+              <Select labelInValue mode="multiple" allowClear>
+                {specList.map((item: any) => (
+                  <Option value={item.id} key={item.id}>
+                    {item.name}
+                  </Option>
+                ))}
+              </Select>
+            </Form.Item>
+          ) : (
+            <>
+              {/* 品牌 */}
+              <Form.Item label="品牌" name="brand" rules={[{ required: true, message: '请选择品牌：' }]}>
+                <Select
+                  labelInValue
+                  placeholder="请选择品牌"
+                  onChange={async (value) => {
+                    form.resetFields(['Series']);
+                    const api = bizType == 1 ? getOnsaleSeriesApi : getSeriesApi;
+                    const { data: seriesList } = await api(value?.key);
+                    const tempArray = selectedSeries.map((item) => item.seriesId);
+                    const tempData = seriesList?.filter((value) => !tempArray.includes(value.id));
+                    setSeries(tempData);
+                  }}
+                >
+                  {brandList.map((item) => (
+                    <Option value={item.id} key={item.id}>
+                      {item.name}
+                    </Option>
+                  ))}
+                </Select>
+              </Form.Item>
+              {/* 车系 */}
+              <Form.Item label="车系" name="Series" rules={[{ required: true, message: '请选择车系' }]}>
+                <Select labelInValue mode="multiple" placeholder="请选择车系" allowClear>
+                  {series.map((item: any) => (
+                    <Option value={item.id} key={item.id}>
+                      {item.name}
+                    </Option>
+                  ))}
+                </Select>
+              </Form.Item>
+            </>
+          )}
+        </Form>
+      </Modal>
+    </>
+  );
+}
+import type { http } from '@/typing/http';
+import request, { host } from '@/utils/request';
+import { FVM_HOST } from '@/utils/host';
+
+export interface QueryParams {
+  subjectId?: number;
+  brandId?: number;
+  seriesId?: number;
+  current?: number;
+  pageSize?: number;
+}
+
+interface User {
+  userName: string; // 备案人员姓名
+  userSfz: string; // 备案人员身份证
+}
+
+
+/**
+ * 保存
+ */
+export interface ListVO {
+  id?: number; //id
+  /**车辆加价金额 */
+  upAmount?: number;
+  /** 是否全部分销商 1是 0否*/
+  allDist?: boolean; //品牌名称
+  authDistList?: AuthSubjectList[],
+  authSeriesList?: AuthSeriesList[],
+}
+
+interface AuthSubjectList {
+  subjectId: number;
+  subjectName: string;
+}
+
+export interface AuthSeriesList {
+  brandId: number;
+  brandName: string;
+  seriesId: number;
+  seriesName: string;
+  allSpec: boolean;
+  authSpecList: AuthSpecList[]
+}
+
+interface AuthSpecList {
+  specId: number,
+  specName: string
+}
+
+export enum StatusEnum {
+  '禁用' = 1,
+  '待审核',
+  '审批通过',
+  '审批未通过',
+  '变更审批中',
+}
+
+export const StatusColor: Record<number, string> = {
+  1: 'default',
+  2: 'orange',
+  3: 'green',
+  4: 'red',
+  5: 'orange',
+}
+/**
+ * 查询列表
+ */
+export function queryListApi(params: QueryParams): http.PromisePageResp<ListVO> {
+  return request.get(`${FVM_HOST}/erp/dist/price/get/page`, { params });
+}
+
+/** 保存修改分销价格设置 */
+export function saveApi(params: ListVO): http.PromiseResp<string> {
+  return request.post<string>(`${FVM_HOST}/erp/dist/price/save`, params);
+}
+
+/**
+ * 删除分销价格设置
+ */
+export function deleteApi(params: { distPriceId?: number }): http.PromiseResp<any> {
+  return request.get(`${FVM_HOST}/erp/dist/price/del`, { params });
+}
+import React, { useEffect, useState } from 'react';
+import { message, Modal, Form, Select, InputNumber, Radio } from 'antd';
+import { getUnitCompanyListApi } from '@/common/api';
+import useInitial from '@/hooks/useInitail';
+import type { ListVO } from '../api';
+import { saveApi } from '../api';
+import CarTableSelect from '@/pages/stock/Components/CarTableSelect';
+
+const Option = Select.Option;
+interface Props {
+  visible: boolean;
+  onCancel: Function;
+  item: ListVO;
+  delearData: CommonApi.OptionVO[];
+  fetchList: () => any;
+}
+
+export default function CreateModal(props: Props) {
+  const [form] = Form.useForm();
+  const { visible, onCancel, fetchList, item = {} as ListVO } = props;
+  const [loading, setLoading] = useState(false);
+  const [delay, setDelay] = useState(true);
+  const { data: companyList, setParams } = useInitial(getUnitCompanyListApi, [], { types: '164' });
+
+  useEffect(() => {
+    if (visible && item.id) {
+      form.setFieldsValue({
+        ...item,
+        authSeriesList: item.authSeriesList && item.authSeriesList.map(i => ({ ...i, authType: i.allSpec ? 1 : 2, specs: i.authSpecList })),
+        allDist: Number(item.allDist),
+        authDistList: item.authDistList && item.authDistList.map(i => ({ value: i.subjectId, label: i.subjectName })),
+      });
+      if (delay) {
+        setDelay(false);
+      }
+    } else {
+      form.resetFields();
+    }
+  }, [visible]);
+
+
+  function okHandle(fieldsValue: any) {
+    setLoading(true);
+    const temp: any = {
+      ...fieldsValue,
+      authDistList: fieldsValue.authDistList && fieldsValue.authDistList.map((i) => ({ subjectId: i.value, subjectName: i.label })),
+      authSeriesList: fieldsValue.authSeriesList.map((i) => ({
+        ...i,
+        allSpec: i.authType,
+        authSpecList: i.specs
+      })),
+    };
+
+    saveApi(temp)
+      .then((res) => {
+        message.success('操作成功');
+        setLoading(false);
+        fetchList && fetchList();
+        onCancel();
+      })
+      .catch((e) => {
+        setLoading(false);
+        message.error(e.message);
+      });
+  }
+
+  return (
+    <Modal
+      title={item.id ? '编辑' : '新增'}
+      confirmLoading={loading}
+      width="60%"
+      style={{}}
+      open={visible}
+      maskClosable={false}
+      onOk={() => form.submit()}
+      onCancel={() => onCancel()}
+    >
+      <Form labelWrap form={form} labelCol={{ span: 4 }} onFinish={okHandle}>
+        <Form.Item name="authSeriesList" label="分销车辆范围" required>
+          <CarTableSelect />
+        </Form.Item>
+        <Form.Item name="upAmount" label="车辆加价金额" rules={[{ required: true, message: '请输入' }]}>
+          <InputNumber min={0} placeholder="请输入" style={{ width: '100%' }} addonAfter="元" />
+        </Form.Item>
+        <Form.Item name="allDist" label="分销商范围" rules={[{ required: true, message: '请选择' }]}>
+          <Radio.Group >
+            <Radio value={1} key={1}>全部</Radio>
+            <Radio value={0} key={0}>部分</Radio>
+          </Radio.Group>
+        </Form.Item>
+        <Form.Item noStyle shouldUpdate={(prevValues, currentValues) => prevValues.allDist != currentValues.allDist}>
+          {({ getFieldValue }): any => {
+            const type = getFieldValue("allDist") || 0;
+            if (!type) {
+              return (
+                <Form.Item name="authDistList" label="适用分销商" hasFeedback rules={[{ required: true, message: '请选择' }]}>
+                  <Select mode="multiple" showSearch optionFilterProp="children" labelInValue placeholder="请选择分销商" filterOption>
+                    {companyList.map((d) => (
+                      <Option key={d.id} value={d.id!}>
+                        {d.name}
+                      </Option>
+                    ))}
+                  </Select>
+                </Form.Item>
+              )
+            }
+          }}
+        </Form.Item>
+      </Form>
+    </Modal>
+  );
+}
+import React, { useState } from 'react';
+import { Table, Card, Popconfirm, message, Button, Select, Tag } from 'antd';
+import Detail from './components/CreatelModal';
+import { PageHeaderWrapper } from '@ant-design/pro-layout';
+import type { ListVO } from './api';
+import { queryListApi, deleteApi } from './api';
+import usePagination from '@/hooks/usePagination';
+import useInitial from '@/hooks/useInitail';
+import { PlusOutlined } from '@ant-design/icons';
+import { getUnitCompanyListApi } from '@/common/api';
+import TextWithMore from '@/components/TextWithMore';
+
+const { Column } = Table;
+
+export default function Index() {
+  const { list, loading, setParams, paginationConfig, setLoading, innerParams } = usePagination(queryListApi, {});
+  const { data: delearData } = useInitial(getUnitCompanyListApi, [], { types: '164' });
+  const [visible, setVisible] = useState(false);
+  const [item, setItem] = useState<ListVO>({});
+  const [timer, setTimer] = useState<any>();
+  const onFilter = (option: any = {}) => {
+    setParams({ ...innerParams, ...option, current: 1 }, true);
+  };
+
+  function _delete(params: ListVO) {
+    deleteApi({ distPriceId: params.id, })
+      .then(() => {
+        message.success('操作成功');
+        setParams({ ...innerParams, current: 1 }, true);
+      })
+      .catch((e) => {
+        message.error(e.message);
+      });
+  }
+
+  function filter(param: any) {
+    timer && clearTimeout(timer);
+    setTimer(
+      setTimeout(() => {
+        setParams({ ...innerParams, ...param }, true);
+      }, 500),
+    );
+  }
+
+  return (
+    <PageHeaderWrapper title="分销价格设置">
+      <Card>
+        <div style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between', marginBottom: 20 }}>
+          <div style={{ display: 'flex', flexDirection: 'row' }}>
+            <Select
+              allowClear
+              showSearch
+              placeholder="请选择商家"
+              notFoundContent="暂无数据"
+              style={{ minWidth: 200, maxWidth: 300, marginLeft: 10 }}
+              onChange={(v) => filter({ dealerId: (v && Number(v)) || undefined, current: 1 })}
+            >
+              {delearData.map((d) => (
+                <Select.Option key={d.id} value={d.id!}>
+                  {d.name}
+                </Select.Option>
+              ))}
+            </Select>
+          </div>
+          <Button
+            type="primary"
+            icon={<PlusOutlined translate="yes" />}
+            onClick={() => {
+              setVisible(true), setItem({});
+            }}
+          >
+            新增
+          </Button>
+        </div>
+        <Table
+          dataSource={list}
+          pagination={paginationConfig}
+          rowKey="id"
+          loading={loading}
+        >
+          <Column
+            title="适用分销商"
+            dataIndex="authDistList"
+            render={(t, record: ListVO) => (!record.allDist ? <TextWithMore list={t && t.map((i) => i.subjectName)} /> : <Tag>全部经销商</Tag>)}
+          />
+          <Column title="车辆加价金额" dataIndex="upAmount" />
+          <Column
+            title="操作"
+            fixed="right"
+            render={(text, record: ListVO) => (
+              <>
+                <Popconfirm placement="top" title={`确认删除？`} onConfirm={() => _delete(record)}>
+                  <Button type="link">删除</Button>
+                </Popconfirm>
+                <Button
+                  type="link"
+                  onClick={() => {
+                    setVisible(true);
+                    setItem(record);
+                  }}
+                >
+                  编辑
+                </Button>
+              </>
+            )}
+          />
+        </Table>
+      </Card>
+      <Detail
+        visible={visible}
+        item={item}
+        delearData={delearData}
+        onCancel={() => {
+          setVisible(false);
+          setItem({});
+        }}
+        fetchList={() => setParams({ ...innerParams, current: 1 }, true)}
+      />
+    </PageHeaderWrapper>
+  );
+}
@@ -177,9 +177,19 @@ export default function CreateModal(props: Props) {
             <Radio value={2} key={2}>固定比例</Radio>
           </Radio.Group>
         </Form.Item>
-        <Form.Item name="installmentValue" label="分期服务费" rules={[{ required: true, message: '请输入' }]}>
-          <InputNumber min={0} disabled={disabled} placeholder='请输入' style={{ width: '100%' }} addonAfter="" />
+        <Form.Item noStyle shouldUpdate={(prevValues, currentValues) => prevValues.installmentType != currentValues.installmentType}>
+          {({ getFieldValue }): any => {
+            const type = getFieldValue("installmentType");
+            if (type) {
+              return (
+                <Form.Item name="installmentValue" label={`分期服务费${type == 1 ? "金额" : "比例"}`} rules={[{ required: true, message: '请输入' }]}>
+                  <InputNumber min={0} max={type == 2 ? 100 : undefined} disabled={disabled} placeholder='请输入' style={{ width: '100%' }} addonAfter={type == 1 ? "元" : "%"} />
+                </Form.Item>
+              )
+            }
+          }}
         </Form.Item>
+
         <Form.Item name="overstatedTaxRatio" label="高开税金" rules={[{ required: true, message: '请输入' }]}>
           <InputNumber min={0} disabled={disabled} placeholder='请输入' style={{ width: '100%' }} addonAfter="%" />
         </Form.Item>
@@ -197,7 +207,7 @@ export default function CreateModal(props: Props) {
           </Select>
         </Form.Item>
  
-        <Form.Item noStyle name="authBrandList" >
+        <Form.Item noStyle name="authBrandList">
           <CarTable disabled={disabled} />
         </Form.Item>
         <Form.Item label="分销商小程序管理人员:" required labelCol={{ span: 8 }} />
@@ -110,7 +110,7 @@ export default function Index() {
             <Column title="回款账户(公户)" dataIndex="companyAccountName" />
             <Column title="回款账户(私户)" dataIndex="personalAccountName" />
             <Column title="销售品牌" dataIndex="authBrandList" render={(t) => <TextWithMore list={t.map((i) => i.brandName)} />} />
-            <Column title="映射售后门店" dataIndex="" />
+            <Column title="映射售后门店" dataIndex="casShopName" />
             <Column title="分期服务费" dataIndex="installmentValue" />
             <Column title="高开税金" dataIndex="overstatedTaxRatio" />
             <Column title="运费承担方" dataIndex="distBear" render={(t) => (t ? '分销商自提' : '签约商家')} />
@@ -134,7 +134,7 @@ export default function Index() {
               fixed="right"
               render={(text, record: ListVO) => (
                 <>
-                  <Popconfirm placement="top" title={`确认${record.status == 1 ? '禁用' : '启用'}？`} onConfirm={() => _status(record)}>
+                  <Popconfirm placement="top" title={`确认${record.status == 1 ? '启用' : '禁用'}？`} onConfirm={() => _status(record)}>
                     <Button type="link">{record.status == 1 ? '启用' : '禁用'}</Button>
                   </Popconfirm>
                   <Button