feature: 添加机修组分成比例页面

杜志良
1 parent cc9f4a1c
Showing 5 changed files with 404 additions and 0 deletions
config/routers/cas.ts
src/pages/cas/afterSaleConfiguration/manhoursProportionConfig/api.ts
src/pages/cas/afterSaleConfiguration/manhoursProportionConfig/components/Filter.tsx
src/pages/cas/afterSaleConfiguration/manhoursProportionConfig/components/Modal.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[]; // 组员工信息
+}
+
+// 机修组员工信息
+interface Staff {
+  id?: string; // 配置id
+  staffId: string; // 组员id
+  staffName: string; // 组员名称
+  manHoursProp?: string; // 工时分成占比(以小数表示，如0.5表示50%，全部组员相加为1)
+}
+
+/** 工时分成配置列表 */
+export function getListApi(params: ListParam): PromisePageResp<ListResult[]> {
+  return request.get(`${CAS_HOST}/erp/team/setting/list`, { params });
+}
+
+/** 机修施工组  */
+export interface RepairGroup {
+  id: number; // 小组id
+  name: string; // 小组名称
+  groupId: number; // 集团id
+  shopId: number; // 门店id
+  shopName: string; // 门店名称
+  roIeCode: string; // 角色编码
+  roIeName: string; // 角色名称
+  remark: string; // 备注
+  staffList: Staff[]; // 组员
+}
+
+/** 门店机修施工组：列表  */
+export function getShopRepairGroupsApi(shopId: number): PromisePageResp<RepairGroup[]> {
+  return request.get(`${CAS_HOST}/erp/team/setting/team/list`, { params: { shopId } });
+}
+
+export interface SaveParams {
+  shopId: number; // 门店id
+  shopName: string; // 门店名称
+  teamId: string; // 小组id
+  teamName: string; // 小组名称
+  userId?: string; // 用户id
+  userName?: string; // 用户名称
+  groupId?: string; // 集团id
+  userInfoVOS?: Staff[]; // 各组员分成比例配置
+}
+
+/** 保存/修改配置 */
+export function saveApi(params: SaveParams) {
+  return request.post(`${CAS_HOST}/erp/team/setting/save`, params);
+}
+
+export interface DeleteParams {
+  groupId?: string; // 集团id
+  shopId?: number; // 门店id
+  userId?: string; // 用户id
+  userName?: string; // 用户名称
+  current?: number;
+  pageSize?: number;
+  id: number; // 配置id
+}
+
+/** 删除配置 */
+export function deleteApi(params: DeleteParams) {
+  return request.post(`${CAS_HOST}/erp/team/setting/delete`, params);
+}
+
+/** 删除 */
+export function endApi(id?: number): http.PromiseResp<string> {
+  return request.post(`${CAS_HOST}/erp/help/part/setting/delete`, { id });
+}
+
+/**
+ * 查询领辅料角色
+ */
+
+export interface User {
+  id: string;
+  name: string;
+}
+
+export function getUserListApi(): http.PromiseResp<User[]> {
+  return request.get(`${CAS_HOST}/erp/help/part/setting/role/list`);
+}
+
+/**
+ * 查询辅料类型
+ */
+
+export function getTypeListApi(): http.PromiseResp<User[]> {
+  return request.get(`${CAS_HOST}/erp/help/part/setting/type/list`);
+}
+import React, { useState, useEffect } from "react";
+import { Row, Select } from "antd";
+import { LabeledValue } from "antd/lib/select";
+
+const Option = Select.Option;
+
+const userData = [
+  { value: 7, label: "工作车辆" },
+  { value: 8, label: "员工车辆" },
+  { value: 9, label: "大客户" },
+];
+
+export interface FilterPara {
+  discountType?: number;
+  discountTypeName?: string;
+  [key: string]: any;
+}
+
+interface Props {
+  onChange: Function;
+  filterParam: FilterPara;
+}
+
+export default function Filter({ onChange, filterParam}: Props) {
+  const [type, setType] = useState<LabeledValue>();
+
+  useEffect(() => {
+    if (filterParam) {
+      filterParam.discountType && filterParam.discountTypeName
+        ? setType({
+            key: `${filterParam.discountType}`,
+            value: filterParam.discountType,
+            label: filterParam.discountTypeName,
+          })
+        : null;
+    }
+  }, [filterParam]);
+
+  function onTypeChange(value: LabeledValue) {
+    const _value = value || ({} as LabeledValue);
+    const { key, label } = _value;
+    onChange &&
+      onChange(
+        { discountType: key || undefined, current: 1, discountTypeName: label },
+        true
+      );
+  }
+
+  return (
+    <Row style={{ width: "100%", alignItems: "center" }}>
+      <span>客户类型:</span>
+      <Select
+        allowClear={false}
+        placeholder="请选择"
+        labelInValue
+        value={type}
+        onChange={onTypeChange}
+        style={{ width: 150, marginLeft: 10 }}
+      >
+        {userData.map((r) => (
+          <Option key={r.value} value={r.value}>
+            {r.label || ""}
+          </Option>
+        ))}
+      </Select>
+    </Row>
+  );
+}
+import React, { useState, useEffect } from "react";
+import "@ant-design/compatible/assets/index.css";
+import { Select, Modal, Form, message } from "antd";
+import * as api from "../api";
+import { ListResult, SaveParams, saveApi, getShopRepairGroupsApi, ShopGroup } from "../api";
+import useInitial from "@/hooks/useInitail";
+
+const FormItem = Form.Item;
+const { Option } = Select;
+const maxFormProps = {
+  labelCol: { span: 5 },
+  wrapperCol: { span: 15 },
+};
+
+interface Props {
+  visible: boolean;
+  onCancel: () => any;
+  shopId?: number;
+  detail?: ListResult;
+}
+
+export default function SaveModal({ visible, onCancel, shopId, detail }: Props) {
+  const isNew = !detail.id;
+
+  const [form] = Form.useForm();
+
+  const [confirmLoading, setConfirmLoading] = useState<boolean>(false);
+  const [userData, setUserData] = useState<api.User[]>([]);
+
+  const { data: userList } = useInitial(getShopRepairGroupsApi, [], { shopId });
+
+  useEffect(() => {
+    if (detail.id) {
+      console.log(detail);
+      // form.setFieldsValue({ ..._item });
+    } else {
+      form.resetFields();
+    }
+  }, [visible]);
+
+  function save(fieldsValue: any) {
+    console.log(fieldsValue);
+    setConfirmLoading(true);
+    const datas = {
+      id: detail.id || undefined,
+      roleCode: fieldsValue.roleCode.value,
+      partTypes: (fieldsValue.partTypes || []).map((e: any) => e.value),
+    };
+    api
+      .saveApi(datas)
+      .then(() => {
+        message.success("操作成功！");
+        setConfirmLoading(false);
+        onCancel();
+      })
+      .catch((e) => {
+        setConfirmLoading(false);
+        message.error(e.message);
+      });
+  }
+
+  return (
+    <Modal
+      title={`${isNew ? "新增" : "编辑"}工时分成比例`}
+      width={600}
+      open={visible}
+      confirmLoading={confirmLoading}
+      onOk={() => form.submit()}
+      onCancel={onCancel}
+    >
+      <Form form={form} onFinish={save}>
+        <FormItem name="roleCode" label="角色" rules={[{ required: true, message: "必填" }]} {...maxFormProps}>
+          <Select labelInValue placeholder="请选择角色">
+            {userData.map((r) => (
+              <Select.Option key={r.id} value={r.id}>
+                {r.name || "--"}
+              </Select.Option>
+            ))}
+          </Select>
+        </FormItem>
+        <FormItem
+          label="可领辅料类型"
+          name="partTypes"
+          rules={[{ required: true, message: "该选项为必选项" }]}
+          {...maxFormProps}
+        >
+          <Select placeholder="请选择辅料类型" mode="multiple" labelInValue>
+            {[].map((r) => (
+              <Select.Option key={r.id} value={r.id}>
+                {r.name || "--"}
+              </Select.Option>
+            ))}
+          </Select>
+        </FormItem>
+      </Form>
+    </Modal>
+  );
+}
+import React, { useState } from "react";
+import { Card, ConfigProvider, Table, Button, Popconfirm, message } from "antd";
+import { PageHeaderWrapper } from "@ant-design/pro-layout";
+import zhCN from "antd/lib/locale-provider/zh_CN";
+
+import usePagination from "@/hooks/usePagination";
+// import useInitial from "@/hooks/useInitail";
+import { getListApi, ListResult, deleteApi } from "./api";
+
+// import Filter from "./components/Filter";
+import CreateModal from "./components/Modal";
+
+const { Column } = Table;
+
+export default function ManhoursProportionConfig() {
+  // const { data, loading, setLoading } = useInitial(getListApi, [], {});
+  const { loading, setLoading, list, paginationConfig } = usePagination(getListApi, {});
+
+  const [visible, setVisible] = useState(false);
+  const [detail, setDetail] = useState<any>({});
+
+  function handleDelete(row: ListResult) {
+    const deleteParams = {
+      id: row.teamId,
+    };
+    deleteApi(deleteParams)
+      .then((res) => {
+        message.success("删除成功");
+        setLoading(true);
+      })
+      .catch((e) => {
+        message.error(`删除失败：${e.message}`);
+      });
+  }
+
+  return (
+    <PageHeaderWrapper title="机修组工时分成比例配置">
+      <Card>
+        <div
+          style={{
+            display: "flex",
+            justifyContent: "flex-end",
+            marginBottom: "20px",
+          }}
+        >
+          {/* <Filter
+            filterParam={innerParams}
+            onChange={setParams}
+          /> */}
+          <Button type="primary" onClick={() => setVisible(true)}>
+            新增
+          </Button>
+        </div>
+
+        <ConfigProvider locale={zhCN}>
+          <Table
+            dataSource={list}
+            loading={loading}
+            pagination={paginationConfig}
+            rowKey="teamId"
+          >
+            <Column
+              title="门店"
+              dataIndex="shopName"
+              width={200}
+            />
+            <Column
+              title="机修组"
+              dataIndex="teamName"
+              width={200}
+            />
+            <Column
+              title="分成比例"
+              dataIndex="shopName"
+            />
+
+            <Column
+              title="操作"
+              dataIndex="teamId"
+              align="center"
+              width={150}
+              render={(val, record: ListResult) => (
+                <>
+                  <Button
+                    size="small"
+                    type="primary"
+                    onClick={() => {
+                      setDetail(record);
+                      setVisible(true);
+                    }}
+                  >
+                    编辑
+                  </Button>
+                  <Popconfirm title="确认删除" onConfirm={() => handleDelete(row)}>
+                    <Button danger type="link" size="small" style={{ marginLeft: 10 }}>
+                      删除
+                    </Button>
+                  </Popconfirm>
+                </>
+              )}
+            />
+          </Table>
+        </ConfigProvider>
+      </Card>
+
+      <CreateModal
+        visible={visible}
+        detail={detail}
+        onCancel={() => {
+          setVisible(false);
+          setDetail({});
+          setLoading(true);
+        }}
+      />
+    </PageHeaderWrapper>
+  );
+}