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 FeeweeUpload from "@/components/FeeweeUpload";
import { transformDTO, transformFormData } from "../entity";
import moment from "moment";
import ShopSelectNew from "@/components/ShopSelectNew";

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, setSelectedSalaryIds } = useStore();
  const [form] = Form.useForm();
  const { match } = props;
  const { id, read } = match.params;

  // 选择岗位id
  const [postId, setPostId] = useState<number>();
  // 适用门店ids;
  const [shopIds, setShopIds] = useState<string>();
  const [saveLoading, setSaveLoading] = useState<boolean>(false);
  // 门店列表
  const [shopList, setShopList] = useState<ShopList[]>([]);
  // 人员查看模块
  const [personModal, setPersonModal] = useState<KpiGroupSetteing.Person>({
    visible: false,
    postId: undefined,
    shopIds: "",
  });


    useEffect(() => {
      setReadOnly(read === undefined ? false : read !== "false");
    }, [read]);

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

  // 控制回显
  useEffect(() => {
    if (configId && data) {
      const res = transformFormData(data);
      console.log('res', res);
      form.setFieldsValue({
        ...res,
      });
      if (data.shopIds?.length > 0) {
        setPersonModal({
          postId: data.postId,
          shopIds: data.shopIds.join(","),
          visible: false,
        });
        setShopIds(data.shopIds.join(","));
      }
      if (data.projects && data.projects.length > 0) {
        const _salaryProjectId: number[] = data.projects.map((item) => item.salaryProjectId);
        setSelectedSalaryIds([..._salaryProjectId]);
      }
      // 保存已经
      setPostId(data.postId);
    }
  }, [configId, data]);

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

  function handSubmit(fieldsValue: any) {
    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, id: configId, shopNames: _shopNames };
    console.log("总的提交表单pa", 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.length === 0) {
      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={{
                projects: [],
              }}
              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
                  showSearch
                  optionFilterProp="children"
                  disabled={readOnly}
                  onChange={(post: { label: string; value: number; key: number }) => {
                    setPersonModal({
                      postId: post.value,
                      visible: false,
                      shopIds: undefined,
                    });
                    setPostId(post.value);
                    setShopIds("");
                    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: "请选择门店" }]}>
                {/* <Select
                  placeholder="请选择门店"
                  allowClear
                  mode="multiple"
                  labelInValue
                  disabled={readOnly}
                  onChange={(
                    shops: {
                      key: number;
                      label: string;
                      value: number;
                    }[]
                  ) => {
                    const shopIds = shops.map((item) => item.value).join(",");
                    setShopIds(shopIds);

                    setPersonModal({
                      ...personModal,
                      shopIds,
                    });
                  }}
                >
                  {shopList.map((item) => (
                    <Option value={item.shopId}>{item.shopName}</Option>
                  ))}
                </Select> */}
                {/* map那里注意加小括号 */}
                <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(",");
                    setShopIds(shopIds);
                    setPersonModal({
                      ...personModal,
                      shopIds,
                    });
                  }}
                />
              </Form.Item>
              <div style={{ marginBottom: 20 }}>
                <a onClick={() => personView()}>{`人员查看 >`}</a>
              </div>

              <Form.Item name="projects" label="薪酬项目" rules={[{ required: true }]}>
                <IndivatorsTable postId={postId} shopIds={shopIds} />
              </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="调整原因">
                <Input.TextArea allowClear showCount maxLength={512} disabled={readOnly} />
              </Form.Item>

              <Form.Item
                label="上传附件"
                name="salaryAttachList"
                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>

            <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>
);