win-chart 1.0.0

package/src/components/win-card/components/ChartContent.tsx

@@ -0,0 +1,47 @@
+import { IndicatorService } from 'src/services/IndicatorService';
+import { INDICATOR_DATA_BASE_URL, handleAddQuery } from '@/utils';
+import { IContentProps } from '../utils/interface';
+import { RequestWrapper } from 'src/components/win-wrappers/request-wrapper';
+import { WinChart, WinChartType } from 'src/components/win-chart';
+
+interface IProps extends IContentProps {
+  winChartType: WinChartType;
+  reserveValueWithLabelType?: boolean;
+}
+
+export const ChartContent = ({
+  configData,
+  orgLevelVal,
+  winChartType,
+  reserveValueWithLabelType,
+}: IProps) => {
+  return (
+    <RequestWrapper
+      requestData={{
+        url: handleAddQuery(INDICATOR_DATA_BASE_URL, {
+          id: configData.id,
+          dataAccVal: configData.dataAccCode,
+          orgLevelVal,
+        }),
+      }}
+      service={IndicatorService.getDataInfoList}
+    >
+      {(data) => {
+        return (
+          <WinChart
+            sort={configData.commonConfig.sort}
+            yStart={configData.commonConfig.yStart}
+            color={configData.commonConfig.color}
+            reserveValueWithLabelType={reserveValueWithLabelType}
+            xAxisLabelLength={configData.commonConfig.xAxisLabelLength}
+            xAxisLabelRotate={configData.commonConfig.xAxisLabelRotate}
+            data={data.list0}
+            extraData={data.list1}
+            chartType={winChartType}
+            style={{ height: 'calc(100% - 20px)' }}
+          />
+        );
+      }}
+    </RequestWrapper>
+  );
+};

package/src/components/win-card/components/Indicator.tsx

@@ -0,0 +1,42 @@
+import { IndicatorService } from 'src/services/IndicatorService';
+import { handleAddQuery, INDICATOR_DATA_BASE_URL } from '@/utils';
+import { IContentProps } from '../utils/interface';
+import { IndicatorInfo } from 'src/components/win-card/components/IndicatorInfo';
+import { RequestWrapper } from 'src/components/win-wrappers/request-wrapper';
+import { getExtraLabel } from '../utils/tool';
+
+export const Indicator = ({ configData, unit, orgLevelVal }: IContentProps) => {
+  return (
+    <RequestWrapper
+      noEmptyBox
+      errorBoxHeight={50}
+      requestData={{
+        url: handleAddQuery(INDICATOR_DATA_BASE_URL, {
+          id: configData.id,
+          dataAccVal: configData.dataAccCode,
+          orgLevelVal,
+        }),
+      }}
+      service={IndicatorService.getDataInfoList}
+      style={{
+        height: 'auto',
+      }}
+    >
+      {(data) => {
+        const curConfig = configData.indicatorConfig[0];
+        const subTitle = curConfig.extra?.subTitle;
+
+        return (
+          <IndicatorInfo
+            jumpUrl={`/#/indicator-center/details?id=${curConfig.id}`}
+            label={configData.name}
+            unit={unit}
+            value={data.indicator?.value}
+            extraLabel={getExtraLabel(subTitle) ?? data.indicator?.date}
+            extraValue={data.indicator?.expected}
+          />
+        );
+      }}
+    </RequestWrapper>
+  );
+};

package/src/components/win-card/components/IndicatorArea.tsx

@@ -0,0 +1,63 @@
+import { IndicatorService } from 'src/services/IndicatorService';
+import {
+  getListLabel,
+  handleAddQuery,
+  handleNumberShowStr,
+  unitList,
+} from '@/utils';
+import { IContentProps } from '../utils/interface';
+import { IndicatorInfo } from 'src/components/win-card/components/IndicatorInfo';
+import { RequestWrapper } from 'src/components/win-wrappers/request-wrapper';
+import { INDICATOR_DATA_BASE_URL } from '../../../utils/const';
+import { WinChart, WinChartType } from 'src/components/win-chart';
+import { getExtraLabel } from '../utils/tool';
+import { CnBox } from '@cainiaofe/cn-ui';
+
+export const IndicatorArea = ({ configData, orgLevelVal }: IContentProps) => {
+  return (
+    <RequestWrapper
+      errorBoxHeight={90}
+      requestData={{
+        url: handleAddQuery(INDICATOR_DATA_BASE_URL, {
+          id: configData.id,
+          dataAccVal: configData.dataAccCode,
+          orgLevelVal,
+        }),
+      }}
+      service={IndicatorService.getDataInfoList}
+    >
+      {(data) => {
+        const curConfig = configData.indicatorConfig[0];
+        const subTitle = curConfig.extra?.subTitle;
+
+        return (
+          <CnBox direction='row' justify='space-between'>
+            <div>
+              <IndicatorInfo
+                jumpUrl={`/#/indicator-center/details?id=${curConfig.id}`}
+                label={configData.name}
+                unit={getListLabel(
+                  unitList,
+                  configData.indicatorConfig[0]?.unit,
+                )}
+                value={handleNumberShowStr(data.indicator?.value)}
+                extraLabel={getExtraLabel(subTitle) ?? data.indicator?.date}
+                extraValue={data.indicator?.expected}
+                isUnitWrap
+              />
+            </div>
+            <WinChart
+              color={configData.commonConfig.color}
+              data={data.list0 ?? []}
+              chartType={WinChartType.MINI_AREA}
+              style={{
+                width: 160,
+                height: 84,
+              }}
+            />
+          </CnBox>
+        );
+      }}
+    </RequestWrapper>
+  );
+};

package/src/components/win-card/components/IndicatorInfo.tsx

@@ -0,0 +1,78 @@
+import { IStyleProps } from '@/types';
+import { ReactNode } from 'react';
+import { getHandleOpenLink } from 'src/utils';
+import { css, styled } from 'styled-components';
+import { UnitWrapper } from 'src/components/win-wrappers/card-wrapper';
+
+interface IProps extends IStyleProps {
+  label: string;
+  value: ReactNode;
+  unit: string;
+  extraLabel?: string;
+  extraValue?: ReactNode;
+  extraValueColor?: string;
+  jumpUrl?: string;
+  isUnitWrap?: boolean;
+}
+
+export const IndicatorInfo = ({
+  label,
+  value,
+  unit,
+  extraLabel,
+  extraValue,
+  extraValueColor,
+  jumpUrl,
+  isUnitWrap,
+  ...args
+}: Partial<IProps>) => {
+  return (
+    <div {...args}>
+      <LabelWrapper>
+        <div
+          data-value
+          onClick={getHandleOpenLink(jumpUrl)}
+          style={{
+            ...(!!jumpUrl && {
+              cursor: 'pointer',
+            }),
+          }}
+        >
+          {value}
+          {!isUnitWrap && <UnitWrapper>{unit}</UnitWrapper>}
+        </div>
+      </LabelWrapper>
+      {isUnitWrap && <UnitWrapper>{unit}</UnitWrapper>}
+    </div>
+  );
+};
+
+const LabelWrapper = styled.div<{ unit?: string }>`
+  line-height: 1;
+  margin-top: 12px;
+  margin-bottom: 8px;
+
+  [data-label] {
+    width: 106px;
+    font-size: 12px;
+    margin-bottom: 8px;
+    display: flex;
+
+    ${(props) =>
+      !!props.unit &&
+      css`
+        &::after {
+          content: '(${props.unit})';
+          display: inline-block;
+          color: #6d7a90;
+        }
+      `}
+  }
+
+  [data-value] {
+    font-size: 30px;
+    line-height: 16px;
+    font-weight: 700;
+    color: #000;
+  }
+`;

package/src/components/win-card/components/MatterContent.tsx

@@ -0,0 +1,121 @@
+import $i18n from 'panda-i18n';
+import { useEffect, useRef, useState } from 'react';
+import { checkEntityArr } from '@/utils';
+import { MatterList } from './MatterList';
+import { ICnPaging, IMatterInfo, IStyleProps, MatterType } from '@/types';
+import { Box, CnPagination } from '@cainiaofe/cn-ui';
+import { WorkbenchService } from 'src/services/WorkbenchService';
+import { PanelTitleTab } from 'src/components/panel-title-tab';
+import { RequestWrapper } from 'src/components/win-wrappers/request-wrapper';
+
+const matterTitleList = [
+  {
+    label: $i18n.get({ id: 'TodoList', dm: '待办清单' }),
+    value: MatterType.PENDING,
+  },
+  {
+    label: $i18n.get({ id: 'ISentOut', dm: '我发出的' }),
+    value: MatterType.CREATE,
+  },
+  {
+    label: $i18n.get({ id: 'ItemsAlreadyHandled', dm: '已办事项' }),
+    value: MatterType.COMPLETE,
+  },
+];
+
+interface IProps extends IStyleProps {}
+
+export const MatterContent = ({ style }: IProps) => {
+  const [curTitleTab, setCurTitleTab] = useState(MatterType.PENDING);
+
+  return (
+    <div style={style}>
+      <PanelTitleTab
+        value={curTitleTab}
+        onChange={setCurTitleTab}
+        dataList={matterTitleList}
+      />
+
+      {matterTitleList.map((item) => (
+        <MatterTable
+          key={item.value}
+          show={item.value === curTitleTab}
+          workflowType={item.value}
+          onChangeWorkflowType={setCurTitleTab}
+        />
+      ))}
+    </div>
+  );
+};
+
+const MatterTable = ({
+  show,
+  workflowType,
+  onChangeWorkflowType,
+}: {
+  show: boolean;
+  workflowType: MatterType;
+  onChangeWorkflowType: (workflowType: MatterType) => void;
+}) => {
+  const [hasInitData, setHasInitData] = useState(false);
+  const [paging, setPaging] = useState<Partial<ICnPaging>>({
+    currentPage: 1,
+    pageSize: 5,
+  });
+  const dataRef = useRef<IMatterInfo[]>();
+
+  useEffect(() => {
+    if (hasInitData && !checkEntityArr(dataRef.current)) {
+      if (workflowType === MatterType.PENDING) {
+        onChangeWorkflowType(MatterType.CREATE);
+      } else if (workflowType === MatterType.CREATE) {
+        onChangeWorkflowType(MatterType.COMPLETE);
+      }
+    }
+  }, [hasInitData, onChangeWorkflowType, workflowType]);
+
+  return (
+    <div style={{ display: show ? 'block' : 'none' }}>
+      <RequestWrapper
+        initData={show}
+        errorBoxHeight={300}
+        requestData={{
+          workflowType,
+          currentPage: paging.currentPage,
+          pageSize: paging.pageSize,
+        }}
+        service={WorkbenchService.getMatterDataList}
+      >
+        {(data) => {
+          setHasInitData(true);
+          dataRef.current = data.tableData;
+
+          return (
+            <div>
+              <MatterList
+                data={data.tableData}
+                showHandle={workflowType === 'PENDING'}
+              />
+
+              <Box direction="row" justify="flex-end">
+                <CnPagination
+                  size="small"
+                  shape="arrow-only"
+                  total={data.paging.totalCount}
+                  current={paging.currentPage}
+                  onChange={(currentPage) =>
+                    setPaging({
+                      ...paging,
+                      currentPage,
+                    })
+                  }
+                  pageSize={paging.pageSize}
+                />
+              </Box>
+            </div>
+          );
+        }}
+      </RequestWrapper>
+    </div>
+  );
+};

package/src/components/win-card/components/MatterList.tsx

@@ -0,0 +1,141 @@
+import $i18n from 'panda-i18n';
+import { styled } from 'styled-components';
+import { getHandleOpenLink, checkEntityArr } from '@/utils';
+import { IMatterInfo } from 'src/types';
+import { NoContent } from 'src/components/none-content';
+import { CnBox } from '@cainiaofe/cn-ui';
+import { IconBox } from '@/components/icon';
+
+interface IProps {
+  data?: IMatterInfo[];
+  showHandle?: boolean;
+}
+
+export const MatterList = ({ data = [], showHandle }: IProps) => {
+  return (
+    <ListWrapper>
+      {checkEntityArr(data) ? (
+        data.map((item, index) => (
+          <DescriptionWrapper key={index}>
+            <CnBox direction="row" spacing={8}>
+              <IconBox
+                size={24}
+                src={
+                  ['TERMINATED', 'COMPLETED'].includes(item.status)
+                    ? DONE
+                    : PROCESSING
+                }
+              />
+
+              <div>
+                <div
+                  data-title
+                  onClick={getHandleOpenLink(item.url)}
+                  style={{
+                    ...(item.title.startsWith('【') && {
+                      transform: 'translateX(-8px)',
+                    }),
+                  }}
+                >
+                  {item.title}
+                </div>
+                <div data-extra>
+                  <span>
+                    {$i18n.get(
+                      {
+                        id: 'InitiatoritemApplicantName',
+                        dm: '发起人：{itemApplicantName}',
+                      },
+                      { itemApplicantName: item.applicantName },
+                    )}
+                  </span>
+                  <span>{item.applyTime}</span>
+                  {!!item.handlerName && (
+                    <span>
+                      {$i18n.get(
+                        {
+                          id: 'CurrentApproveritemHandlerName',
+                          dm: '当前审批人：{itemHandlerName}',
+                        },
+                        { itemHandlerName: item.handlerName },
+                      )}
+                    </span>
+                  )}
+                </div>
+              </div>
+            </CnBox>
+            {showHandle && (
+              <HandleWrapper onClick={getHandleOpenLink(item.url)}>
+                👉去处理
+              </HandleWrapper>
+            )}
+          </DescriptionWrapper>
+        ))
+      ) : (
+        <NoContent
+          message={$i18n.get({ id: 'TERM.NoData', dm: '暂无数据' })}
+          style={{ transform: 'translateY(120px)' }}
+        />
+      )}
+    </ListWrapper>
+  );
+};
+
+const ListWrapper = styled.div`
+  display: grid;
+  grid: auto-flow 64px / 1fr;
+  gap: 0;
+  line-height: 1;
+  font-size: 14px;
+  overflow: hidden;
+  height: 310px;
+  margin-bottom: 12px;
+  place-items: center stretch;
+`;
+
+const DescriptionWrapper = styled.div`
+  height: 100%;
+  border-top: solid #eee 1px;
+  display: grid;
+  grid: auto-flow / 1fr 70px;
+  place-items: center stretch;
+
+  [data-title] {
+    cursor: pointer;
+    font-weight: 500;
+    font-size: 14px;
+    line-height: 1;
+    margin-bottom: 8px;
+    white-space: nowrap;
+    overflow: hidden;
+    color: #272f3d;
+    text-overflow: ellipsis;
+  }
+
+  [data-extra] {
+    font-size: 12px;
+    color: #5d677a;
+    line-height: 1;
+    span {
+      margin-right: 12px;
+    }
+  }
+`;
+
+const HandleWrapper = styled.div`
+  cursor: pointer;
+  color: #272f3d;
+  font-size: 12px;
+  height: 22px;
+  text-align: center;
+  line-height: 21px;
+  border: solid #ddd 1px;
+  /* width: 80px; */
+  border-radius: 12px;
+`;
+
+const PROCESSING =
+  'https://img.alicdn.com/imgextra/i3/O1CN01HvOfeP1XOCe517Amr_!!6000000002913-55-tps-31-29.svg';
+
+const DONE =
+  'https://img.alicdn.com/imgextra/i3/O1CN01jr6Aiq1EIjDAqHXkZ_!!6000000000329-55-tps-30-28.svg';

package/src/components/win-card/components/NoticeContent.tsx

@@ -0,0 +1,73 @@
+import { useState } from 'react';
+import { NoticeList } from './NoticeList';
+import { ICnPaging, IStyleProps } from '@/types';
+import { Box, CnPagination } from '@cainiaofe/cn-ui';
+import { WorkbenchService } from 'src/services/WorkbenchService';
+import { RequestWrapper } from 'src/components/win-wrappers/request-wrapper';
+import { useUserInfo } from 'src/components/WinMenu/hooks/useUserInfo';
+
+interface IProps extends IStyleProps {}
+
+export const NoticeContent = ({ style }: IProps) => {
+  return (
+    <div style={style}>
+      <NoticeTable />
+    </div>
+  );
+};
+
+export const NoticeTable = () => {
+  const userInfo = useUserInfo();
+  const [paging, setPaging] = useState<Partial<ICnPaging>>({
+    currentPage: 1,
+    pageSize: 10,
+  });
+  if (!userInfo.employeeId) {
+    return null;
+  }
+  return (
+    <div>
+      <RequestWrapper
+        requestData={{
+          currentPage: paging.currentPage,
+          pageSize: paging.pageSize,
+        }}
+        isInside={userInfo.employeeType === 'inside'}
+        service={WorkbenchService.getNoticeDataList}
+      >
+        {(data) =>
+          data && (
+            <div>
+              <NoticeList
+                data={data.tableData}
+                isInside={userInfo.employeeType === 'inside'}
+              />
+              <Box direction='row' justify='flex-end'>
+                <CnPagination
+                  shape='arrow-only'
+                  pageSizeSelector='dropdown'
+                  pageSizeList={[10, 50, 100]}
+                  total={data.paging.totalCount}
+                  current={paging.currentPage}
+                  onChange={(currentPage) =>
+                    setPaging({
+                      ...paging,
+                      currentPage,
+                    })
+                  }
+                  pageSize={paging.pageSize}
+                  onPageSizeChange={(pageSize) =>
+                    setPaging({
+                      ...paging,
+                      pageSize,
+                    })
+                  }
+                />
+              </Box>
+            </div>
+          )
+        }
+      </RequestWrapper>
+    </div>
+  );
+};

package/src/components/win-card/components/NoticeList.tsx

@@ -0,0 +1,68 @@
+import { styled } from 'styled-components';
+import {
+  getHandleOpenLink,
+  checkEntityArr,
+  getBossOrigin,
+  formatDate,
+} from '@/utils';
+import { IZNoticeInfo } from 'src/types';
+import { NoContent } from 'src/components/none-content';
+import { CnBox, CnButton } from '@cainiaofe/cn-ui';
+
+interface IProps {
+  data?: IZNoticeInfo[];
+  isInside?: boolean;
+}
+
+export const NoticeList = ({ data = [], isInside }: IProps) => {
+  const bossOrigin = getBossOrigin(isInside);
+
+  return (
+    <ListWrapper>
+      {checkEntityArr(data) ? (
+        data.map((item, index) => (
+          <CnBox
+            key={index}
+            align="center"
+            direction="row"
+            justify="space-between"
+            style={{ padding: '4px 0' }}
+          >
+            <CnButton
+              style={{
+                whiteSpace: 'normal',
+                lineHeight: '15px',
+                height: 'auto',
+                textAlign: 'left',
+              }}
+              text
+              type="primary"
+              onClick={getHandleOpenLink(
+                item.bizId
+                  ? `${bossOrigin}/basic/#/notice/detail?bizId=${item.bizId}`
+                  : '',
+              )}
+            >
+              {item.title}
+            </CnButton>
+            <span>{formatDate(item.releaseDate)}</span>
+          </CnBox>
+        ))
+      ) : (
+        <NoContent style={{ transform: 'translateY(120px)' }} />
+      )}
+    </ListWrapper>
+  );
+};
+
+const ListWrapper = styled.div`
+  display: grid;
+  grid: auto-flow 24px / 1fr;
+  gap: 12px;
+  line-height: 1;
+  font-size: 14px;
+  overflow: auto;
+  height: 330px;
+  margin-bottom: 12px;
+  place-items: center stretch;
+`;

package/src/components/win-card/components/SelectDecoration.tsx

@@ -0,0 +1,34 @@
+import { Select } from '@cainiaofe/cn-ui';
+import { styled } from 'styled-components';
+
+export const SelectDecoration = styled(Select).attrs({
+  size: 'small',
+  showSearch: true,
+  style: {
+    width: 130,
+  },
+  popupStyle: {
+    width: 200,
+  },
+})`
+  transform: translateY(-4px);
+
+  span {
+    background: transparent;
+  }
+`;
+
+export const IndicatorSelectDecoration = styled(Select).attrs({
+  size: 'small',
+  showSearch: true,
+  style: {
+    width: 100,
+  },
+  popupStyle: {
+    width: 200,
+  },
+})`
+  span {
+    background: transparent;
+  }
+`;