fe_service_ebtp_frontend/src/pages/Bid/BiddingAnnouncement/components/Medias.tsx

import { getDefId } from "@/utils/session";
import { Checkbox, Col, Form, Row, Typography } from "antd";
import React, { useEffect, useState } from "react"
import { getMediaService } from "../service";

//公告发布媒体
interface MediaProps {
  vis: boolean,
  h3Vis: boolean,
  editInformation: boolean,
  editInformation4Change: boolean,
  mediaType: boolean,
  mediaReleases: any,
  medias9: (dis: any) => void,
  label?: string,
}
const Media: React.FC<MediaProps> = (props) => {
  const {
    vis,
    h3Vis,
    editInformation,
    editInformation4Change,
    mediaType,
    mediaReleases,
    medias9,
    label
  } = props;
  //============================================================state
  const [medias, mediasSet] = useState<any>([]);
  const { Text } = Typography
  const defId = getDefId(); //流程id
  //mediaReleases: [{mediaId: "9", status: 1}]  9-无需推送外网；  0：没发 1：发布成功 2发布失败
  let mediaStatus = {};//媒体对应发布状态
  mediaReleases?.length > 0 && mediaReleases.map((item: any) => {
    let state = ''
    item.status == '0' && (state = '暂未发送');
    item.status == '1' && (state = '发布成功');
    item.status == '2' && (state = '发布失败');
    mediaStatus[item.mediaId] = state;
  });
  //============================================================func
  useEffect(() => {
    getMedias()
  }, [vis]);
  //取媒体数据
  async function getMedias() {
    if (vis) {
      let data: never[] = [];
      await getMediaService().then((res: any) => {
        if (res.code == 200) {
          data = res.data;
        }
      })
      mediasSet(data);
    }
  }
  const changeMedia = (checkedParam: any) => {
    medias9(checkedParam.indexOf("9") > -1);
  }
  //============================================================dom

  return (
    <>
      {
        h3Vis && <h3 className="first-title">公告发布媒体</h3>
      }
      <Form.Item
        name="medias"
        label={label ? label : ''}
        rules={[
          {
            required: true,
            message: '当前项不可为空',
          },
        ]}
      >
        <Checkbox.Group
          style={{ width: '100%' }}
          onChange={changeMedia}
          disabled={editInformation || editInformation4Change}
        >
          <Row>
            {
              medias?.length != 0 &&
              medias.map((item: any) => {
                return defId == "recruit_multi" ? (
                  item.id != "6" && <Col span={24} key={item.id + 'Col'}>
                    <Checkbox disabled={item.id != '9' && mediaType} key={item.id} value={item.id}>
                      {item.webName}
                      <span style={{ color: mediaStatus[item.id] == '发布成功' ? 'rgb(7,193,96)' : 'red' }}>
                        {
                          mediaReleases?.length > 0 && mediaStatus[item.id] != undefined && item.id != '9' &&
                          `（${mediaStatus[item.id]}）`
                        }
                      </span>
                    </Checkbox>
                  </Col>
                ) : (
                  <Col span={24} key={item.id + 'Col'}>
                    <Checkbox disabled={item.id != '9' && mediaType} key={item.id} value={item.id}>
                      {item.webName}
                      <span style={{ color: mediaStatus[item.id] == '发布成功' ? 'rgb(7,193,96)' : 'red' }}>
                        {
                          mediaReleases?.length > 0 && mediaStatus[item.id] != undefined && item.id != '9' &&
                          `（${mediaStatus[item.id]}）`
                        }
                      </span>
                    </Checkbox>
                  </Col>
                )
              })
            }
          </Row>
        </Checkbox.Group>
      </Form.Item>
      {defId != "recruit_multi" && <Text type="secondary">如选择发布到【中国招标投标公共服务平台】，在发布前需填写【公共服务平台】信息</Text>}
    </>
  )
}
export default Media