systemrobotassistant 3.0.8

package/src/component/it-notice-modal/single-tab.jsx

@@ -0,0 +1,70 @@
+import React, { useMemo } from 'react'
+import { Table, Tabs } from 'shineout'
+import DataContainer from '../data-container'
+import createColumns from './columns'
+import styles from './style.less'
+
+const SingleTab = (props) => {
+  const {
+    infoLoading, info, belongSystemList, curBelongSystemId,
+    onTabChange, t,
+  } = props
+
+  const columns = useMemo(() => createColumns(t), [t])
+
+  return (
+    <div className={styles.tabCon}>
+      {
+        belongSystemList?.length ? (
+          <Tabs
+            className={styles.subTabCon}
+            shape="line"
+            active={curBelongSystemId}
+            onChange={(value) => {
+              onTabChange && onTabChange(value)
+            }}
+          >
+            {
+              belongSystemList?.map(item => (
+                <Tabs.Panel
+                  key={item.belongSystemId}
+                  id={item.belongSystemId}
+                  tab={item.belongSystemName}
+                />
+              ))
+            }
+          </Tabs>
+        ) : null
+      }
+      <div className={styles.mainNoticeCon}>
+        {
+          info?.jiraCount > 0 ? (
+            <div className={styles.containerTitle}>
+              {t('包含{0}个需求', <span className={styles.numberText}>{info.jiraCount}</span>)}
+            </div>
+          ) : null
+        }
+        <DataContainer>
+          {
+            info.jiraUnitList?.length ? (
+              <div
+                className={styles.tableWrapper}
+              >
+                <Table
+                  empty={t('暂无数据')}
+                  width={600}
+                  columns={columns}
+                  loading={infoLoading}
+                  className={styles.table}
+                  data={info.jiraUnitList || []}
+                />
+              </div>
+            ) : null
+          }
+        </DataContainer>
+      </div>
+    </div>
+  )
+}
+
+export default SingleTab

package/src/component/it-notice-modal/style.less

@@ -0,0 +1,367 @@
+@primaryColor: var(--primary-color, #1890FF);
+@grayColor: #7E848F;
+
+.itNoticeModal {
+  padding: 0;
+  background-color: #F7F9FC;
+  overflow: hidden;
+  word-break: break-all;
+
+  :global {
+    .so-card-body {
+      display: flex;
+      flex-direction: column;
+      overflow: hidden;
+      color: #35383D;
+      font-family: PingFangSC-Regular, PingFang SC;
+    }
+  }
+
+  .modalHeader {
+    padding: 12px;
+    position: relative;
+    text-align: center;
+    background-color: #FFFFFF;
+    font-size: 20px;
+    box-shadow: 0px 1px 0px 0px rgba(230,234,240,0.5);
+
+    .tabExtraCon {
+      position: absolute;
+      right: 44px;
+      top: 50%;
+      transform: translateY(-50%);
+      font-size: 14px;
+      color: @grayColor;
+    }
+
+    .closeIcon {
+      position: absolute;
+      right: 12px;
+      top: 50%;
+      transform: translateY(-50%);
+      font-size: 20px;
+      color: @grayColor;
+      cursor: pointer;
+    }
+  }
+
+  .modalBody {
+    display: flex;
+    flex: 1;
+    overflow: hidden;
+  }
+
+  .leftCon {
+    width: 204px;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    background-color: #FFFFFF;
+
+    .leftHeader {
+      margin-top: 8px;
+      padding: 8px 8px 8px 12px;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      flex-shrink: 0;
+      font-weight: bold;
+
+      .indentIcon {
+        cursor: pointer;
+        font-size: 16px;
+      }
+    }
+
+    .indentHeader {
+      width: 48px;
+      justify-content: flex-start;
+      flex-direction: column-reverse;
+    }
+
+    .leftListCon {
+      // display: flex;
+      // flex-direction: column;
+      // flex: 1;
+      // overflow-y: auto;
+
+      :global {
+        .so-list-item {
+          padding: 0;
+
+          &::after {
+            display: none;
+          }
+        }
+      }
+      
+      .menuItem {
+        padding: 8px 8px 8px 16px;
+        margin-bottom: 8px;
+        cursor: pointer;
+        // overflow: hidden;
+        // text-overflow: ellipsis;
+        // white-space: nowrap;
+
+        &:last-child {
+          margin-bottom: 0;
+        }
+
+        &.active {
+          position: relative;
+          background-color: #E2F2FF;
+          color: @primaryColor;
+
+          &::before {
+            content: '';
+            position: absolute;
+            left: 0;
+            top: 0;
+            width: 4px;
+            height: 100%;
+            background-color: @primaryColor;
+            border-radius: 0px 4px 4px 0px;
+          }
+        }
+      }
+    }
+  }
+
+  .indentLeftCon {
+    width: 48px;
+    transition: all 0.3s ease-in-out;
+
+    .leftHeader {
+      justify-content: flex-start;
+      flex-direction: column-reverse;
+
+      .headTitle {
+        letter-spacing: 1em;
+        margin-left: 1em;
+      }
+
+      .indentIcon {
+        margin-bottom: 8px;
+      }
+    }
+  }
+
+  .rightCon {
+    position: relative;
+    padding: 8px 8px 0;
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    overflow: hidden;
+  }
+
+  .tabHeader {
+    display: flex;
+    align-items: center;
+    border-bottom: 1px solid #E8EBF0;
+
+    .tabItem {
+      padding: 6px 16px;
+      display: flex;
+      align-items: center;
+      font-size: 16px;
+      font-family: PingFangSC-Medium, PingFang SC;
+      font-weight: bold;
+      line-height: 24px;
+      border-radius: 4px 4px 0px 0px;
+      background-color: #FFFFFF;
+      cursor: pointer;
+
+      .helpIcon {
+        margin-left: 4px;
+        color: @grayColor;
+      }
+    }
+
+    .tabItem.active {
+      position: relative;
+      background: @primaryColor;
+      color: #FFFFFF;
+
+      .helpIcon {
+        color: #FFFFFF;
+      }
+    }
+  }
+
+  .subTabCon {
+    padding-top: 8px;
+    background-color: #FFFFFF;
+  }
+
+  .tabCon {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    overflow: hidden;
+    background-color: #FFFFFF;
+  }
+
+  .signatureCon {
+    position: absolute;
+    top: 0;
+    right: 12px;
+    width: 138px;
+    height: 126px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: #D13135;
+    font-size: 12px;
+    z-index: 10;
+    pointer-events: none;
+
+    img {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 138px;
+      height: 126px;
+    }
+
+    .signatureTextCon {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      transform: translateY(4px) rotate(-15deg);
+      font-family: 方正兰亭粗黑简体;
+
+      .configText {
+        white-space: nowrap;
+      }
+    }
+  }
+
+  .mainNoticeCon {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    overflow: hidden;
+    overflow-y: auto;
+    background-color: #FFFFFF;
+
+    .containerTitle {
+      color: @grayColor;
+      padding: 16px 8px 16px 20px;
+
+      .numberText {
+        margin: 0 4px;
+        color: #35383D;
+        font-size: 16px;
+        font-weight: bold;
+      }
+    }
+  }
+
+  .datesCon {
+    padding: 12px 20px;
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(76px, 1fr));
+    grid-gap: 8px;
+
+    .dateItem {
+      width: 100%;
+      height: 32px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border-radius: 4px;
+      border: 1px solid #D9D9D9;
+      cursor: pointer;
+
+      &.active {
+        border: 1px solid @primaryColor;
+        color: @primaryColor;
+      }
+    }
+  }
+
+  .tableWrapper {
+    padding: 0 20px;
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+  }
+
+  .table {
+    margin-top: 8px;
+    margin-bottom: 0;
+    border: 1px solid rgba(217,217,217,0.5);
+    border-radius: 4px;
+
+    .tdCol {
+      display: flex;
+      flex-direction: column;
+
+      .title {
+        margin-bottom: 4px;
+        color: @grayColor;
+      }
+        
+      .listItem {
+        width: 100%;
+        display: flex;
+        overflow: hidden;
+      }
+    }
+
+    thead th, tr td {
+      padding: 12px;
+      background-color: #F7F9FC;
+      font-weight: normal;
+    }
+
+    tr {
+      td {
+        border-color: rgba(217,217,217,0.5);
+        background-color: #FFFFFF;
+      }
+      &:last-child {
+        td {
+          border-bottom: unset;
+        }
+      }
+    }
+
+    thead th {
+      color: @grayColor;
+    }
+
+    :global {
+      .so-table-head > table {
+        border-bottom: 1px solid rgba(217,217,217,0.5);
+      }
+
+      .so-table-empty {
+        padding: 12px;
+        font-size: 14px;
+      }
+    }
+  }
+
+  .clickText {
+    color: @primaryColor;
+    cursor: pointer;
+  }
+
+  .modalFooter {
+    padding: 12px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: #FFFFFF;
+    box-shadow: 0px -2px 4px 0px rgba(25,122,250,0.15);
+    z-index: 1;
+
+    button + button {
+      margin-left: 12px;
+    }
+  }
+}

package/src/component/it-notice-modal/utils.js

@@ -0,0 +1,8 @@
+import moment from 'moment'
+
+// 拼接文案
+export const getLabel = (curDate, date) => {
+  const curYear = moment(curDate).year()
+  const year = moment(date).year()
+  return `${year !== curYear ? `${year}-` : ''}${moment(date).format('MM-DD')}`
+}

package/src/component/it-notice-tab/index.jsx

@@ -0,0 +1,196 @@
+import React, { useCallback, useEffect } from 'react'
+import classnames from 'classnames'
+import Ellipsis from '@shein-components/Ellipsis'
+import DataContainer from '../data-container'
+import DaysTab from '../days-tab'
+import { openITNoticeModal } from '../it-notice-modal'
+import useImmer from '../../js/state-immer'
+import { getSystemDateList, getVersionPlan } from './server'
+import styles from './style.less'
+
+const cs = classnames.bind(styles)
+
+const defaultState = {
+  detailInfo: [],
+  dateList: [],
+  seletedDate: '',
+  belongSystemList: [],
+  curBelongSystemId: '',
+}
+
+const ITNotice = ({
+  getBelongSystemList, zIndex, t,
+}) => {
+  const [state, setState] = useImmer(defaultState)
+
+  const {
+    detailInfo, dateList, seletedDate, curBelongSystemId, belongSystemList,
+  } = state
+
+  const getData = useCallback(async (params) => {
+    const res = await getVersionPlan({
+      belongSystemId: params.belongSystemId,
+      date: params.date,
+    })
+    if (res) {
+      const { info = [] } = res || {}
+      let index = 0
+      setState({
+        detailInfo: info.map(item => ({
+          ...item,
+          jiraInfoList: item.jiraInfoList?.map(jira => ({
+            ...jira,
+            showIndex: ++index,
+          })),
+        })),
+      })
+    }
+  }, [])
+
+  useEffect(() => {
+    getSystemDateList().then((res) => {
+      const { info = [] } = res || {}
+      const list = info?.[0]?.belongSystemList || []
+      setState({
+        dateList: info,
+        seletedDate: info?.[0]?.date,
+        curBelongSystemId: list?.[0]?.belongSystemId,
+        belongSystemList: list,
+      })
+      if (typeof getBelongSystemList === 'function') {
+        getBelongSystemList(list)
+      }
+      getData({
+        belongSystemId: list?.[0]?.belongSystemId,
+        date: info?.[0]?.date,
+      })
+    })
+  }, [])
+
+  return (
+    <div className={styles.itNoticeTabCon}>
+      <DaysTab
+        activeDay={seletedDate}
+        data={dateList}
+        t={t}
+        onChange={(item) => {
+          const list = item.belongSystemList || []
+          setState({
+            seletedDate: item.date,
+            curBelongSystemId: list?.[0]?.belongSystemId,
+            belongSystemList: list,
+          })
+          getData({
+            belongSystemId: list?.[0]?.belongSystemId,
+            date: item.date,
+          })
+        }}
+      />
+      <div className={styles.mainNoticeCon}>
+        <DataContainer className={styles.cardBody}>
+          {
+            detailInfo?.map(item => (
+              <div className={styles.cardItem}>
+                <div className={styles.itemHeader}>
+                  {/* <img className={styles.img} src="" width={22} height={22} /> */}
+                  <div className={styles.headerLeft}>
+                    <span
+                      className={styles.clickText}
+                      style={{ marginRight: 8 }}
+                      onClick={() => {
+                        window.open(item.jiraIssueUrl)
+                      }}
+                    >
+                      {item.bizProjectIssueNum || item.projectIssueNum}
+                    </span>
+                    {
+                      item.bizOrigDemandOnlineCount > 0 ? (
+                        <span className={styles.total}>
+                          {t('累计已上线:')}
+                          {item.bizOrigDemandOnlineCount}
+                        </span>
+                      ) : null
+                    }
+                  </div>
+                  <div className={styles.headerRight}>
+                    {item?.jiraInfoList?.[0]?.reporterUserName}
+                  </div>
+                </div>
+                <div className={styles.itemBody}>
+                  {
+                    item?.jiraInfoList?.map(jira => (
+                      <div className={styles.listItem}>
+                        <div className={styles.content}>
+                          <span>
+                            {jira.showIndex}
+                            .&nbsp;
+                          </span>
+                          <span
+                            className={styles.clickText}
+                            onClick={() => {
+                              window.open(jira?.jiraUrl)
+                            }}
+                          >
+                            {jira?.summary}
+                          </span>
+                        </div>
+                      </div>
+                    ))
+                  }
+                </div>
+              </div>
+            ))
+          }
+        </DataContainer>
+        <div
+          className={styles.checkMore}
+          onClick={() => {
+            // 打开弹窗
+            openITNoticeModal({
+              zIndex,
+              defaultMenuCollapse: true,
+              t,
+            })
+          }}
+        >
+          {t('查看更多公告')}
+        </div>
+      </div>
+      {
+        belongSystemList?.length > 1 ? (
+          <div className={styles.noticeMenus}>
+            {
+              belongSystemList?.map(item => (
+                <div
+                  key={item.belongSystemId}
+                  className={
+                    cs(styles.menuItem, curBelongSystemId === item.belongSystemId && styles.active)
+                  }
+                  onClick={() => {
+                    // 切换tab
+                    setState({
+                      curBelongSystemId: item.belongSystemId,
+                    })
+                    getData({
+                      belongSystemId: item.belongSystemId,
+                      date: seletedDate,
+                    })
+                  }}
+                >
+                  <Ellipsis
+                    value={item.belongSystemName}
+                    popProps={{
+                      zIndex,
+                    }}
+                  />
+                </div>
+              ))
+            }
+          </div>
+        ) : null
+      }
+    </div>
+  )
+}
+
+export default ITNotice

package/src/component/it-notice-tab/server.js

@@ -0,0 +1,14 @@
+import postRequest from '../../js/request/request'
+
+
+// 返回系统-日期列表
+// https://soapi.sheincorp.cn/application/5161/routes/post_front_manual_getSystemDateList/doc
+export function getSystemDateList(argument) {
+  return postRequest('/front/manual/getSystemDateList', argument)
+}
+
+// 组件-返回版本计划信息
+// https://soapi.sheincorp.cn/application/5161/routes/post_front_manual_getVersionPlan/doc
+export function getVersionPlan(argument) {
+  return postRequest('/front/manual/getVersionPlan', argument)
+}