FEV2 / fw-cms

import React, { useEffect, useState } from "react";
import { Card, Popconfirm, Row, Button, message, Result, Form, Select, Radio, Input } from "antd";
import { FeeweeFileAccept, FeeweeFileChange } from "@/utils/getFidFile";
import { common } from "@/typing/common";
import { PlusOutlined } from "@ant-design/icons";
import { IMGURL } from "@/utils";
import { PageHeaderWrapper } from "@ant-design/pro-layout";
import { createStore } from "@/hooks/moz";
import { history } from "umi";
import store from "./store";
import PersonModal from "../components/PersonModal";
import { KpiGroupSetteing } from "@/pages/performance/KpiGroupSetting/interface";
import * as api from "./api";
import { ShopList, saveKpiGroupConfig } from "./api";
import IndivatorsTable from "./components/IndivatorsTable";
import StarRatingList from "./components/StarRatingList";
import FeeweeUpload from "@/components/FeeweeUpload";
import { transformDTO, transformFormData } from "../entity";
import moment from "moment";
import ShopSelectNew from "@/components/ShopSelectNew";
import { kpiGroupApi } from "../../KpiGroupSetting/api";
import usePagination from "@/hooks/usePagination";

// 星级数据：
export const { Provider, useStore } = createStore(store);
const { Option } = Select;

interface Props extends common.ConnectProps {}
function Index(props: Props) {
  const { postList, detailError, configId, setId, data, readOnly, setReadOnly, setSelectedIndicators, paramAlias, setParamAlias } = useStore();

  const [form] = Form.useForm();
  const { match } = props;

  const { id, read } = match.params;

  useEffect(() => {
    setReadOnly(read === undefined ? false : read !== "false");
  }, [read]);
  // 选择岗位id
  const [postId, setPostId] = useState<number>();
  const [saveLoading, setSaveLoading] = useState<boolean>(false);

  // 门店列表
  const [shopList, setShopList] = useState<ShopList[]>([]);

  // 人员查看模块
  const [personModal, setPersonModal] = useState<KpiGroupSetteing.Person>({
    visible: false,
    postId: undefined,
    shopIds: "",
  });

  useEffect(() => {
    setId(id);
  }, [id]);

  // 控制回显
  useEffect(() => {
    if (configId && data) {
      const res = transformFormData(data);
      console.log(data);
      form.setFieldsValue({
        ...res,
      });
      console.log('res', data);
      // setSelectedIndicators((res.indicators || []).map((item) => item.indicatorId));
      // 回显
      if (data.shopIds?.length > 0 && data.postId) {
        setPersonModal({
          postId: data.postId,
          shopIds: data.shopIds.join(","),
          visible: false,
        });
      }
      setPostId(data.postId);
    }
  }, [configId, data]);

  // 查询门店
  useEffect(() => {
    if (data.postId) {
      getDealerList(data.postId);
    }
  }, [data.postId]);

  function handSubmit(fieldsValue: any) {
    console.log('fieldsValue', fieldsValue);
    const _shopIds: number[] = fieldsValue.shop.map((item:any) => item.value);
    const res = transformDTO(fieldsValue);
    const _shopNames = fieldsValue.shop.map((item: any) => item.label);
    const pa = { ...res, force: true, id: Number(configId), shopNames: _shopNames };
    console.log(pa);
    setSaveLoading(true);
    saveKpiGroupConfig(pa) 
      .then((res) => {
        setSaveLoading(false);
        message.success("操作成功");
        setSaveLoading(false);
        history.goBack();
      })
      .catch((e) => {
        setSaveLoading(false);
        message.error(e.message);
      });
  }

  // 根据岗位查门店
  function getDealerList(postId: number) {
    api
      .queryShopByPost(postId)
      .then((res) => {
        setShopList(res.data || []);
      })
      .catch((e) => {
        message.error(e.message);
      });
  }
  // 人员查看
  const personView = () => {
    if (!personModal.postId) {
      message.error("请选择岗位");
      return;
    }
    if (!personModal.shopIds) {
      message.error("请选择门店");
      return;
    }
    setPersonModal({ ...personModal, visible: true });
  };

  return (
    <PageHeaderWrapper title="绩效组配置">
      <Card>
        {detailError ? (
          <Result status="warning" title={detailError} />
        ) : (
          <div style={{ paddingLeft: "10%", paddingRight: "10%" }}>
            {/* 选择岗位和门店 */}
            <Form
              form={form}
              name="control-hooks"
              style={{ width: "80%" }}
              initialValues={{
                indicators: [],
              }}
              onFinish={handSubmit}
            >
              <Form.Item label="绩效组名称" name="name" rules={[{ required: true, message: "请输入绩效组名称" }]}>
                <Input />
              </Form.Item>
              <Form.Item name="post" label="岗位" rules={[{ required: true, message: "请选择岗位" }]}>
                <Select
                  labelInValue
                  placeholder="请选择岗位"
                  allowClear
                  disabled={readOnly}
                  showSearch
                  optionFilterProp="children"
                  onChange={(post: { label: string; value: number; key: number }) => {
                    setPersonModal({
                      postId: post.value,
                      visible: false,
                      shopIds: "",
                    });
                    setPostId(post.value);
                    form.setFieldsValue({ shop: [] });
                    // 根据岗位查门店
                    if (post) {
                      getDealerList(post.value);
                    }
                  }}
                >
                  {postList.map((item) => (
                    <Option value={item.id}>{item.postName}</Option>
                  ))}
                </Select>
              </Form.Item>
              <Form.Item name="shop" label="门店" rules={[{ required: true, message: "请选择门店" }]}>
                <ShopSelectNew
                  multiple
                  disabled={readOnly}
                  shopIds={shopList.map((item) => item.shopId)}
                  type={2}
                  onChange={(
                    shops: {
                      key: number;
                      label: string;
                      value: number;
                    }[]
                  ) => {
                    const shopIds = shops.map((item) => item.value).join(",");
                    setPersonModal({ ...personModal, shopIds });
                  }}
                />
              </Form.Item>
              <div style={{ marginBottom: 20 }}>
                <a onClick={() => personView()}>{`人员查看 >`}</a>
              </div>

              <Form.Item name="indicators" label="绩效指标" rules={[{ required: true }]}>
                <IndivatorsTable postId={postId} personModal={personModal} />
              </Form.Item>
              {/* 查看详情直接展示时间 */}

              {readOnly ? (
                <Form.Item name="beginTimeType" label="生效月度" rules={[{ required: true, message: "请选择" }]}>
                  {data.beginTime && moment(data.beginTime).format("YYYY年MM月")}
                </Form.Item>
              ) : (
                <Form.Item name="beginTimeType" label="生效月度" rules={[{ required: true, message: "请选择" }]}>
                  <Radio.Group>
                    <Radio value={1}>本月</Radio>
                    <Radio value={2}>次月</Radio>
                  </Radio.Group>
                </Form.Item>
              )}

              <Form.Item name="reason" label="调整原因" rules={[{ required: true, message: "请输入" }]}>
                <Input.TextArea allowClear showCount maxLength={512} disabled={readOnly} />
              </Form.Item>

              <Form.Item
                label="上传附件"
                name="kpiAttachList"
                valuePropName="fileList"
                getValueFromEvent={FeeweeFileChange}
                extra="请上传PDF/视频MP4/音频MP3/图片/Word/Excel/PPT"
              >
                <FeeweeUpload
                  accept={FeeweeFileAccept}
                  listType="picture-card"
                  disabled={readOnly}
                  limitSize={100}
                  action={IMGURL.uploadUrl}
                >
                  <div>
                    <PlusOutlined />
                  </div>
                </FeeweeUpload>
              </Form.Item>
              <Form.Item name="starEvaluationType" label="星级评定" rules={[{ required: true, message: "请选择" }]}>
                <Radio.Group
                  onChange={(e) => {
                    const way = e.target.value;
                    if (way !== data.starEvaluationType) {
                      switch (way) {
                        case 1:
                          form.setFieldsValue({
                            starLadders: [{ level: 4, lower: 0 }, { level: 3 }, { level: 2 }, { level: 1 }],
                          });
                          break;
                        case 2:
                          form.setFieldsValue({
                            starLadders: [{ level: 1, lower: 0 }, { level: 2 }, { level: 3 }, { level: 4 }],
                          });
                          break;
                        default:
                          break;
                      }
                    } else {
                      form.setFieldsValue({
                        starLadders: data.starLadders,
                      });
                    }
                  }}
                >
                  <Radio value={1}>绩效得分率</Radio>
                  <Radio value={2}>人员百分比</Radio>
                </Radio.Group>
              </Form.Item>
              <Form.Item
                noStyle
                shouldUpdate={(prevValues, currentValues) =>
                  prevValues.starEvaluationType !== currentValues.starEvaluationType
                }
              >
                {({ getFieldValue }) => {
                  const way = getFieldValue("starEvaluationType");
                  if (way) {
                    return <StarRatingList form={form} way={way} />;
                  }
                  return null;
                }}
              </Form.Item>
              <Form.Item
                noStyle
                shouldUpdate={(prevValues, currentValues) =>
                  prevValues.starEvaluationType !== currentValues.starEvaluationType
                }
              >
                {({ getFieldValue }) => {
                  const way = getFieldValue("starEvaluationType");
                  if (way === 2) {
                    return (
                      <div>
                        <h4>不计入D级条件：</h4>
                        <Form.Item
                          name="revokedScoreRatio"
                          label="绩效得分率≥"
                          style={{ width: "45%%" }}
                          rules={[{ required: true, message: "请输入绩效组排名名称" }]}
                        >
                          <Input disabled={readOnly} addonAfter="%" style={{ width: "100%" }} />
                        </Form.Item>
                      </div>
                    );
                  }
                  return null;
                }}
              </Form.Item>
            </Form>

            <Row justify="center" style={{ marginTop: 100 }}>
              <Button
                type="default"
                size="large"
                onClick={() => history.goBack()}
                style={{ marginRight: 50, width: 200 }}
              >
                返回
              </Button>
              {!readOnly && (
                <Popconfirm title="确定完成，提交后不可更改?" onConfirm={form.submit} okText="确定" cancelText="取消">
                  <Button type="primary" size="large" style={{ width: 200 }} loading={saveLoading}>
                    提交
                  </Button>
                </Popconfirm>
              )}
            </Row>

            <PersonModal item={personModal} setPersonModal={setPersonModal} />
          </div>
        )}
      </Card>
    </PageHeaderWrapper>
  );
}
export default (props: Props) => (
  <Provider>
    <Index {...props} />
  </Provider>
);