Merge branch 'd-cas' into 'master'

售后：新增门店机修组工时分成比例配置 See merge request !266

Merge branch 'd-cas' into 'master'
售后：新增门店机修组工时分成比例配置 See merge request !266
张志伟
2 parents 346196a5 6e9d80c3
Showing 4 changed files with 263 additions and 0 deletions
config/routers/cas.ts
src/pages/cas/afterSaleConfiguration/manhoursProportionConfig/api.ts
src/pages/cas/afterSaleConfiguration/manhoursProportionConfig/components/ConfigModal.tsx
src/pages/cas/afterSaleConfiguration/manhoursProportionConfig/index.tsx
@@ -246,6 +246,10 @@ export default [
     path: '/cas/cassetting/manHoursDiscountConfig/create/:id/:brandId?', //工时减免规则配置
     component: './cas/afterSaleConfiguration/manHoursDiscountConfig/subpages/ConfigCreate'
   },
+  {
+    path: '/cas/cassetting/manhoursProportionConfig', // 机修组工时分成比例配置
+    component: './cas/afterSaleConfiguration/manhoursProportionConfig'
+  },
   // {
   //   path: '/cas/part/plantype', // 备件计划类型
   //   component: './cas/spareParts/PlanType'
+import { http } from "@/typing/http";
+import request from "@/utils/request";
+import { CAS_HOST } from "@/utils/host";
+
+type PromisePageResp<T> = http.PromisePageResp<T>;
+
+// 列表参数
+interface ListParam {
+  current?: number;
+  pageSize?: number;
+  keyword?: string;
+  shopId?: number;
+  groupId?: number;
+  userId?: number;
+  userName?: string;
+  teamId?: number;
+}
+
+// 列表结果
+export interface ListResult {
+  groupId: number; // 集团id
+  shopId: number; // 门店id
+  shopName: string; // 门店名称
+  roleCode: string; // 角色编码
+  roleName: string; // 角色名称
+  teamId: number; // 组id
+  teamName: string; // 组名
+  userInfoVOS: Staff[]; // 组员工信息
+}
+
+// 机修组员工信息
+export interface Staff {
+  id?: string; // 配置id
+  staffId: string; // 组员id
+  staffName: string; // 组员名称
+  manHoursProp: number; // 工时分成占比(以小数表示，如0.5表示50%，全部组员相加为1)
+}
+
+/** 工时分成配置列表 */
+export function getListApi(params: ListParam): PromisePageResp<ListResult[]> {
+  return request.get(`${CAS_HOST}/erp/team/setting/list`, { params });
+}
+
+export interface SaveParams {
+  shopId: number; // 门店id
+  shopName: string; // 门店名称
+  teamId: number; // 小组id
+  teamName: string; // 小组名称
+  userId?: number; // 用户id
+  userName?: string; // 用户名称
+  groupId?: number; // 集团id
+  userInfoVOS?: Staff[]; // 各组员分成比例配置
+}
+
+/** 修改配置 */
+export function saveApi(params: SaveParams) {
+  return request.post(`${CAS_HOST}/erp/team/setting/save`, params);
+}
+import React, { useState, useEffect } from "react";
+import "@ant-design/compatible/assets/index.css";
+import { Alert, Modal, Form, message, InputNumber } from "antd";
+import { ListResult, SaveParams, saveApi, Staff } from "../api";
+
+const FormItem = Form.Item;
+const maxFormProps = {
+  labelCol: { span: 6 },
+  wrapperCol: { span: 14 },
+};
+
+interface Props {
+  visible: boolean;
+  onCancel: () => any;
+  detail?: ListResult;
+}
+
+export default function ConfigModal({ visible, onCancel, detail }: Props) {
+  const [form] = Form.useForm();
+  console.log("detail", detail);
+
+  const [confirmLoading, setConfirmLoading] = useState<boolean>(false);
+
+  useEffect(() => {
+    if (visible) {
+      form.resetFields();
+      // init form values
+      const initialValues: any = {};
+      detail?.userInfoVOS?.forEach((user: Staff) => {
+        initialValues[user.staffId] = user.manHoursProp;
+      });
+      form.setFieldsValue(initialValues);
+    }
+  }, [visible]);
+
+  function handleSubmit(fieldsValue: any) {
+    const configItems = detail!.userInfoVOS.map((user: Staff) => ({
+      id: user.id,
+      staffId: user.staffId,
+      staffName: user.staffName,
+      manHoursProp: fieldsValue[user.staffId],
+    }));
+    const sum = configItems.reduce((acc: number, cur: Staff) => acc + cur.manHoursProp, 0);
+    if (sum !== 1) {
+      message.error("所有人员分成占比之和必须等于1");
+      return;
+    }
+
+    const params: SaveParams = {
+      shopId: detail!.shopId,
+      shopName: detail!.shopName,
+      teamId: detail!.teamId,
+      teamName: detail!.teamName,
+      userInfoVOS: configItems,
+    };
+
+    setConfirmLoading(true);
+    saveApi(params)
+      .then(() => {
+        message.success("配置成功！");
+        setConfirmLoading(false);
+        onCancel();
+      })
+      .catch((e) => {
+        setConfirmLoading(false);
+        message.error(e.message);
+      });
+  }
+
+  return (
+    <Modal
+      title="配置机修组工时分成比例"
+      width={640}
+      open={visible}
+      confirmLoading={confirmLoading}
+      onOk={() => form.submit()}
+      onCancel={onCancel}
+    >
+      <Alert message="每人分成占比以小数表示，所有人员分成占比之和必须等于1" type="info" style={{ marginBottom: 20 }} />
+
+      <Form form={form} onFinish={handleSubmit}>
+        {detail?.userInfoVOS?.map((user: Staff) => (
+          <FormItem
+            key={user.id}
+            name={user.staffId}
+            label={user.staffName}
+            rules={[{ required: true, message: "必填" }]}
+            {...maxFormProps}
+          >
+            <InputNumber style={{ width: 200 }} max={1} min={0} step={0.1} defaultValue={user.manHoursProp} />
+          </FormItem>
+        ))}
+      </Form>
+    </Modal>
+  );
+}
+import React, { useState, useEffect } from "react";
+import { Card, Table, Button, Tag, message, Select, Input } from "antd";
+import { PageHeaderWrapper } from "@ant-design/pro-layout";
+
+import usePagination from "@/hooks/usePagination";
+import { getShopApi } from "@/common/api";
+import { getListApi, ListResult, Staff } from "./api";
+
+import ConfigModal from "./components/ConfigModal";
+
+const { Option } = Select;
+const { Column } = Table;
+
+export default function ManhoursProportionConfig() {
+  const { loading, setLoading, list, paginationConfig, setParams } = usePagination(getListApi, {});
+
+  const [shops, setShops] = useState<CommonApi.OptionVO[]>([]);
+  const [visible, setVisible] = useState(false);
+  const [detail, setDetail] = useState<any>({});
+
+  useEffect(() => {
+    getShopApi({})
+      .then((res) => {
+        const { data = [] } = res;
+        setShops(data);
+      })
+      .catch((e) => {
+        message.error(e.message);
+      });
+  }, []);
+
+  return (
+    <PageHeaderWrapper title="机修组工时分成比例配置">
+      <Card>
+        <div style={{ display: "flex", marginBottom: "20px" }}>
+          <Select
+            style={{ width: 240 }}
+            showSearch
+            allowClear
+            optionFilterProp="children"
+            placeholder="请选择门店搜索"
+            onChange={(value) => setParams({ shopId: value }, true)}
+          >
+            {shops.map((shop) => (
+              <Option value={shop.id} key={shop.id}>
+                {shop.name}
+              </Option>
+            ))}
+          </Select>
+
+          <Input.Search
+            style={{ width: 240, marginLeft: 20 }}
+            placeholder="请输入机修组名称搜索"
+            allowClear
+            onSearch={(value) => setParams({ keyword: value }, true)}
+          />
+        </div>
+
+        <Table dataSource={list} loading={loading} pagination={paginationConfig} rowKey="teamId">
+          <Column title="门店" dataIndex="shopName" width={200} />
+          <Column title="机修组" dataIndex="teamName" width={200} />
+          <Column
+            title="分成比例"
+            dataIndex="userInfoVOS"
+            render={(users: Staff[]) => {
+              return users.map((user) => (
+                <Tag color="blue" key={user.id} style={{ marginRight: 10 }}>
+                  {user.staffName}:{user.manHoursProp}
+                </Tag>
+              ));
+            }}
+          />
+          <Column
+            title="操作"
+            dataIndex="teamId"
+            align="center"
+            width={150}
+            render={(val, record: ListResult) => (
+              <Button
+                size="small"
+                type="primary"
+                onClick={() => {
+                  setDetail(record);
+                  setVisible(true);
+                }}
+              >
+                编辑
+              </Button>
+            )}
+          />
+        </Table>
+      </Card>
+
+      <ConfigModal
+        visible={visible}
+        detail={detail}
+        onCancel={() => {
+          setVisible(false);
+          setDetail({});
+          setLoading(true);
+        }}
+      />
+    </PageHeaderWrapper>
+  );
+}