admin2 1.0.0

package/src/components/SMDatePicker/index.jsx

@@ -0,0 +1,222 @@
+/**
+ * @file components/SMDateRangeTime 日历组件
+ * @modify zhaopengyu&zoujiazhi
+ */
+
+import {useState, useEffect, useCallback, useMemo, useRef} from 'react';
+import moment from 'moment';
+import _ from 'lodash';
+import {DateRangePicker, DatePicker} from 'sm-element-react';
+
+import {useLanguage} from '@/hooks';
+
+import {DEFAULT_FORMATS, DEFAULT_PLACEHOLDER} from './constants';
+import styles from './index.less';
+
+/**
+ * dateSelect
+ * dateData: defaultSelect: 默认哪一天；showTime: 是否展示具体时间选项； dateFormat: 时间格式
+ * onChange 时间更改的回调函数
+ * dateSelectArr 快速选择时间按钮配置
+ */
+const SMDatePicker = props => {
+    const {
+        dateData,
+        onDateChange: onTimeChange,
+        resetCount,
+        isGlobalSearch,
+        onChange,
+        disabled = false,
+        showTip,
+    } = props;
+
+    const {t} = useLanguage();
+    const firstRefreshRef = useRef(false);
+
+    const {
+        defaultSelect = 1,
+        showTime = false,
+        disabledTodayBefore = false,
+        dateSelectArr = [],
+        dateFormat = 'YYYY-MM-DD',
+        defaultDateRange = null,
+        extraSubtract = 0,
+        disabledDateStart = null,
+        disabledDateExtra = moment().endOf('day'),
+        disabledDateFeedback,
+        radio = false,
+        placeholder = DEFAULT_PLACEHOLDER, // 提示
+        allowClear = false, // 是否允许清除
+        isDefaultDisabledDate = true, // 是否需要不禁用时间段功能
+        isAdvanceLastMonth = true, // 是否允许提前推一个月
+        promiseNull = false,
+        isShowNull,
+    } = dateData;
+
+    const [dateRange, setDateRange] = useState([]);
+    const [currentSelect, setCurrentSelect] = useState(defaultSelect);
+
+    // value number类型,获取近几天对应日期
+    const getDateValue = useCallback(value => {
+        if (showTime) {
+            return [
+                moment()
+                    .subtract(value - 1 + extraSubtract, 'days')
+                    .startOf('day').toDate(),
+                moment().subtract(extraSubtract, 'days').endOf('day').toDate(),
+            ];
+        }
+        return [
+            moment().subtract(value - 1 + extraSubtract, 'days').toDate(),
+            moment().subtract(extraSubtract, 'days').toDate(),
+        ];
+    }, [extraSubtract, showTime]);
+
+    // 时间改变
+    const handleDateChange = useCallback(value => {
+        if (_.isArray(value)) {
+            const [startTime, endTime] = value;
+            if (!_.isEqual(value, dateRange)) {
+                setDateRange(value);
+                onTimeChange?.([moment(startTime), moment(endTime)]);
+                onChange?.([moment(startTime), moment(endTime)]);
+            }
+        }
+        else if (!_.isEqual(value, dateRange)) {
+            setDateRange(value);
+            onTimeChange?.(moment(value));
+            onChange?.(moment(value));
+        }
+    }, [dateRange, onChange, onTimeChange]);
+
+    const currentDateRange = useMemo(() => {
+        if (promiseNull && !defaultDateRange) {
+            return null;
+        }
+        return defaultDateRange ? (
+            _.isArray(defaultDateRange) ? [moment(defaultDateRange[0]).toDate(), moment(defaultDateRange[1]).toDate()]
+                : moment(defaultDateRange).toDate()) : getDateValue(defaultSelect);
+    }, [defaultDateRange, defaultSelect, getDateValue, promiseNull]);
+
+    // 点击快速选择日期按钮
+    const changeDateSelect = useCallback(value => {
+        if (value !== currentSelect) {
+            // 更改日期选择按钮选中态
+            setCurrentSelect(value);
+            // 更改日期选择框框value
+            const dateValue = getDateValue(value);
+            const [startTime, endTime] = dateValue;
+            setDateRange(dateValue);
+            onTimeChange?.([moment(startTime), moment(endTime)]);
+            onChange?.([moment(startTime), moment(endTime)]);
+        }
+    }, [currentSelect, getDateValue, onChange, onTimeChange]);
+
+    const disabledDate = useCallback(current => {
+        if (disabledDateFeedback) {
+            return current && (current > disabledDateExtra || current < disabledDateFeedback);
+        }
+        if (disabledDateStart) {
+            return current && current > disabledDateStart;
+        }
+        if (disabledTodayBefore) {
+            return current && current < moment().startOf('day');
+        }
+        return isDefaultDisabledDate && current && current > moment().endOf('day');
+    }, [disabledDateExtra, disabledDateFeedback, disabledDateStart, isDefaultDisabledDate, disabledTodayBefore]);
+
+    const newDateFormat = useMemo(() => {
+        switch (dateFormat) {
+            case DEFAULT_FORMATS.PRE_DATE_TIME:
+                return DEFAULT_FORMATS.DATE_TIME;
+            case DEFAULT_FORMATS.PRE_DATE_TIMER_RANGE:
+                return DEFAULT_FORMATS.DATE_TIMER_RANGE;
+            default:
+                return DEFAULT_FORMATS.DATE_TIME;
+        }
+    }, [dateFormat]);
+
+    const commonDatePickerProps = useMemo(() => ({
+        isReadOnly: !allowClear,
+        value: dateRange,
+        placeholder: t(placeholder),
+        disabledDate,
+        isDisabled: disabled,
+        onChange: handleDateChange,
+    }), [allowClear, placeholder, dateRange, disabledDate, handleDateChange, disabled, t]);
+
+    // 如果currentDateRange和dateRange不同,并且dateRange没有长度,并且dateRange不是Date型,给dateRange赋值
+    useEffect(() => {
+        if (
+            !_.isEqual(currentDateRange, dateRange)
+            && (dateRange && !dateRange.length)
+            && !_.isDate(dateRange) && !isShowNull
+        ) {
+            setDateRange(currentDateRange);
+            onChange?.(currentDateRange);
+        }
+        if (isGlobalSearch) {
+            handleDateChange(currentDateRange);
+        }
+    }, [currentDateRange, dateRange, isGlobalSearch, isShowNull, handleDateChange]);
+
+    // 更新默认值
+    useEffect(() => {
+        if (firstRefreshRef.current && defaultDateRange) {
+            const updateDate = _.isArray(defaultDateRange)
+                ? [moment(defaultDateRange[0]).toDate(), moment(defaultDateRange[1]).toDate()]
+                : moment(defaultDateRange).toDate();
+            setDateRange(updateDate);
+            setCurrentSelect(_.get(dateSelectArr, '[0].value'), 1);
+        }
+        firstRefreshRef.current = true;
+    }, [resetCount, defaultDateRange]);
+
+    return (
+        <div className={styles['sm-datepicker']}>
+            {dateSelectArr.map((item, index) => {
+                return (
+                    <div
+                        key={item.id || index}
+                        className={
+                            styles[
+                                currentSelect === item.value
+                                    ? 'date-select-active'
+                                    : 'date-select'
+                            ]
+                        }
+                        onClick={() => changeDateSelect(item.value)}
+                    >
+                        {t(item.name)}
+                    </div>
+                );
+            })}
+            {
+                !radio ? (showTime ? (
+                    <DateRangePicker
+                        className={`${styles['sm-el-date-range-picker']} ${styles['sm-el-date-range']}`}
+                        isShowTime={showTime}
+                        format={newDateFormat}
+                        isAdvanceLastMonth={isAdvanceLastMonth}
+                        {...commonDatePickerProps}
+                    />
+                ) : (
+                    <DateRangePicker
+                        className={`${styles['sm-el-date-range-picker']}`}
+                        format={newDateFormat}
+                        isAdvanceLastMonth={isAdvanceLastMonth}
+                        {...commonDatePickerProps}
+                    />
+                )) : (
+                    <DatePicker
+                        className={`${styles['sm-el-date-range-picker']}`}
+                        {...commonDatePickerProps}
+                    />
+                )
+            }
+            {showTip && showTip}
+        </div>
+    );
+};
+
+export default SMDatePicker;

package/src/components/SMDatePicker/index.less

@@ -0,0 +1,318 @@
+/**
+ * @file components/SMDateRangeTime/index.less 日历组件样式
+ * @modify zhaopengyu
+ */
+
+@import '../common.less';
+
+:global {
+    .el-picker-panel .el-picker-panel__body table {
+        border-spacing: 7px 2px;
+    }
+    .el-picker-panel+.has-time .el-picker-panel__body table {
+        border-spacing: 14px 2px;
+    }
+
+    .el-picker-panel {
+        .el-picker-panel__body {
+            .el-date-range-picker__time-header {
+                .el-icon-arrow-right {
+                    font-size: 14px;
+                    color: #60718C;
+                    &::before {
+                        content: url(./assets/arrow.svg);
+                    }
+                }
+                .el-input__inner {
+                    border-radius: 2px;
+                    border-color: #d9d9d9;
+                    &:focus {
+                        border-color: @primary-color;
+                    }
+                    &:hover {
+                        border-color: @primary-color;
+                    }
+                }
+            }
+
+            table {
+                padding: 0 16px;
+                border-collapse: separate;
+                // border-spacing: 14px 2px;
+                td {
+                    height: 26px;
+                }
+            }
+
+            .el-date-range-picker__header {
+                font-weight: 600;
+                color: #384A66;
+                padding-left: 16px;
+                padding-right: 16px;
+                border-bottom: 1px solid #E4E8EF;
+                button:hover {
+                    color: @primary-color;
+                }
+            }
+            .el-date-picker__header {
+                font-weight: 600;
+                color: #384A66;
+                padding-left: 16px;
+                padding-right: 16px;
+                border-bottom: 1px solid #E4E8EF;
+                button:hover {
+                    color: @primary-color;
+                }
+                .el-date-picker__header-label:hover {
+                    color: @primary-color;
+                }
+            }
+    
+            .el-date-table {
+                .today:not(.disabled) {
+                    color: @primary-color;
+                }
+                .today::before {
+                    content: '';
+                    border-top-width: 0;
+                }
+                .available:hover {
+                    background-color: transparent;
+                    color: @primary-color;
+                }
+                .el-date-table__row .in-range {
+                    background-color: #eef9f8;
+                    position: relative;
+                    &::after {
+                        position: absolute;
+                        top: 0;
+                        bottom: 0;
+                        width: 14px;
+                        right: 0;
+                        transform: translateX(100%);
+                        transition: all 0.3s;
+                        content: ' ';
+                        background-color: #eef9f8;
+                    }
+                    &:last-child::after {
+                        content: '';
+                        width: 0;
+                    }
+                }
+                .start-date {
+                    background-color: @primary-color !important;
+                    border-radius: 2px;
+                    color: #fff !important;
+                }
+                .end-date:not(.disabled) {
+                    background-color: @primary-color !important;
+                    border-radius: 2px;
+                    color: #fff !important;
+                    &::after {
+                        content: '' !important;
+                        width: 0 !important;
+                    }
+                }
+                .current {
+                    position: relative;
+                    background-color: @primary-color !important;
+                    border-radius: 2px;
+                    color: #fff !important;
+                    z-index: 99;
+                }
+                .disabled {
+                    position: relative;
+                    background-color: #f4f4f4 !important;
+                    &::after {
+                        position: absolute;
+                        top: 0;
+                        bottom: 0;
+                        width: 14px;
+                        right: 0;
+                        transform: translateX(100%);
+                        transition: all 0.3s;
+                        content: ' ';
+                        background-color: #f4f4f4 !important;
+                    }
+                    &:last-child::after {
+                        content: '';
+                        width: 0;
+                    }
+                }
+            }
+        }  
+    }
+
+    .el-date-picker {
+        .el-picker-panel__body {
+            .el-date-picker__header {
+                margin: 0;
+                padding-top: 12px;
+                padding-bottom: 5px;
+            }
+            table {
+                padding: 0; 
+            }
+
+            .el-year-table .current:not(.disabled) .cell,
+            .el-month-table .current:not(.disabled) .cell {
+                background-color: @primary-color !important;
+            }
+        }
+    }
+
+    .el-picker-panel__footer {
+        .el-picker-panel__link-btn {
+            display: none;
+            color: @primary-color;
+        }
+        .el-picker-panel__btn {
+            background-color: @primary-color;
+            border-width: 0;
+            color: #fff;
+        }
+    }
+    .el-time-panel__content {
+        &::before {
+            width: 85%;
+            background-color: #fff;
+            border-top: 1px solid #E4E8EF;
+            border-bottom: 1px solid #E4E8EF;
+            margin-left: auto;
+            margin-right: auto;
+        }
+        &::after {
+            left: 100% !important;
+            background-color: #fff;
+        }
+        .el-scrollbar__wrap {
+            .el-time-spinner__item  {
+                color: #48576a;
+                font-size: 12px;
+            }
+            .el-time-spinner__item:hover:not(.disabled):not(.active) {
+                background-color: #F5F5F5;
+            }
+            .active {
+                color: @primary-color;
+                font-weight: 650;
+            }
+            .el-time-spinner__list::before {
+                height: 82px;
+            }
+        }
+        .el-scrollbar__wrap:not(.el-scrollbar__wrap--hidden-default) {
+            padding-bottom: 0;
+        }
+    }
+    .el-date-range-picker__content {
+        padding-left: 0;
+        padding-right: 0;
+    }
+    .el-time-panel {
+        .el-time-panel__footer .confirm {
+            color: @primary-color;
+        }
+    }
+    .el-time-range-picker.el-picker-panel {
+        border: none;
+        box-shadow: 0px 2px 10px 0px #D1DEF1;
+    }
+    .el-time-panel__btn.confirm {
+        color: @primary-color;
+    }
+    .el-input__inner {
+        border-radius: 2px;
+        border-color: #8E9DB4;
+        &:focus,&:hover {
+            border-color: #13CBB9;
+        }
+        &::before {
+            content: url(./assets/arrow.svg);
+        }
+    }
+    .el-input.el-date-editor.el-date-editor--timerange {
+        .el-input__icon.el-icon-time {
+            &::before {
+                content: ' ';
+                display: inline-block;
+                width: 15px;
+                height: 15px;
+                background-image: url(./assets/calendar.png);
+                background-repeat: no-repeat;
+                background-size: 100%;
+                vertical-align: middle;
+            }
+        }
+    }
+    .el-input.el-date-editor.el-date-editor--time {
+        .el-input__icon.el-icon-time {
+            &::before {
+                content: ' ';
+                display: inline-block;
+                width: 15px;
+                height: 15px;
+                background-image: url(./assets/time.png);
+                background-repeat: no-repeat;
+                background-size: 100%;
+                vertical-align: middle;
+            }
+        }
+    }
+}
+.sm-datepicker{
+    display: inline-block;
+    .date-select, .date-select-active {
+        display: inline-block;
+        padding: 8px;
+        margin-right: 16px;
+        cursor: pointer;
+        color: @black-color;
+    }
+    .date-select-active {
+        color: @auxiliary-tip-color;
+        border-bottom: 2px solid @auxiliary-tip-color;
+    }
+    .datepicker {
+        display: inline-block;
+        height: 40px;
+        line-height: 40px;
+    }
+
+    .sm-el-date-range-picker {
+        :global(.el-date-editor) {
+            width: 226px;
+            :global(.el-input__inner) {
+                height: 32px;
+                border-radius: 2px;
+                padding-right: 20px;
+                border-color: #8E9DB4;
+                &:focus {
+                    border-color: @primary-color;
+                }
+                &:hover {
+                    border-color: @primary-color;
+                }
+            }
+            :global(.el-icon-date) {
+                &::before {
+                    content: ' ';
+                    display: inline-block;
+                    width: 15px;
+                    height: 15px;
+                    background-image: url(./assets/calendar.png);
+                    background-repeat: no-repeat;
+                    background-size: 100%;
+                    vertical-align: middle;
+                }
+            }
+        }
+    }
+
+    .sm-el-date-range {
+        width: 350px;
+        :global(.el-date-editor) {
+            width: 100%;
+        }
+    }
+}

package/src/components/SMDateSearch/index.js

@@ -0,0 +1,63 @@
+import {useState, useEffect, useCallback} from 'react';
+import {Select, DatePicker, Space} from 'antd';
+import _ from 'lodash';
+import moment from 'moment';
+
+import {DATE_FORMAT_TYPE, CHANGE_DATE} from '@/contants';
+import {useLanguage} from '@/hooks';
+
+import SMDatePicker from '../SMDatePicker';
+
+const {Option} = Select;
+const {RangePicker} = DatePicker;
+
+export default props => {
+    const {selectData, dateData, onChange, resetCount} = props;
+
+    const {t} = useLanguage();
+
+    const {disabledDateEnd, dateFormat} = dateData;
+    const [searchId, setSearchId] = useState(selectData.defaultValue);
+    const [searchText, setSearchText] = useState(dateData.defaultValue);
+    const disabledDate = useCallback(current => {
+        if (disabledDateEnd) {
+            return current && (current >  moment().endOf(DATE_FORMAT_TYPE.DAY) || current < disabledDateEnd);
+        }
+    }, [disabledDateEnd]);
+
+    useEffect(() => {
+        setSearchId(selectData.defaultValue);
+        setSearchText(dateData.defaultValue);
+    }, [resetCount]);
+
+    return (
+        <Space>
+            <Select
+                value={searchId}
+                style={{width: 100}}
+                onChange={val => {
+                    setSearchId(val);
+                    onChange(val, searchText, CHANGE_DATE);
+                }}
+            >
+                {
+                    _.map(selectData.list, item => (
+                        <Option key={item.key} value={item.value}>{t(item.name)}</Option>
+                    ))
+                }
+            </Select>
+            <SMDatePicker
+                dateData={{
+                    radio: false,
+                    disabledDate,
+                    showTime: true,
+                    dateFormat,
+                }}
+                onDateChange={val => {
+                    setSearchText(val);
+                    onChange(searchId, val);
+                }}
+            />
+        </Space>
+    );
+};

package/src/components/SMElementPicker/index.jsx

@@ -0,0 +1,38 @@
+/**
+ * @file 每年生效时间
+ * @modify zoujiazhi
+ */
+
+import {useCallback, useEffect} from 'react';
+import moment from 'moment';
+import {TimeRangePicker} from 'sm-element-react';
+
+const SMElementPicker = props => {
+    const {
+        value,
+        isDisabled,
+        defaultValue = [moment().startOf('day').toDate(), moment().endOf('day').toDate()],
+        onChange,
+    } = props;
+
+    const handleTimeSelect = useCallback(time => {
+        onChange?.(time);
+    }, [onChange]);
+
+    useEffect(() => {
+        onChange?.(defaultValue);
+    }, []);
+
+    return (
+        <TimeRangePicker
+            value={value}
+            pickerWidth={265}
+            isReadOnly
+            isDisabled={isDisabled}
+            placeholder="开始时间  =>  结束时间"
+            onChange={handleTimeSelect}
+        />
+    );
+};
+
+export default SMElementPicker;

package/src/components/SMElementPicker/index.less

@@ -0,0 +1,22 @@
+:global {
+    .el-time-panel__footer {
+        .confirm {
+            color: #13CBB9 !important;
+        }
+    }
+    .el-input.el-date-editor.el-date-editor--timerange {
+        input {
+            height: 32px;
+            width: 256px;
+            border-radius: 0;
+        }
+    }
+    .el-input__inner {
+        &:focus {
+            border-color: #13CBB9;
+        }
+    }
+    .el-input__inner:focus {
+        border-color: #13CBB9 !important;
+    }
+}

package/src/components/SMEmpty/index.jsx

@@ -0,0 +1,28 @@
+import {Empty} from 'antd';
+import noDataBg from '@/assets/noData.png';
+import styles from '@/components/SMPieChart/index.less';
+import React from 'react';
+
+import {useLanguage} from '@/hooks';
+
+import style from './index.less';
+
+const SMEmpty = () => {
+
+    const {t} = useLanguage();
+
+    return (
+        <div className={style['empty-content']}>
+            <Empty
+                style={{margin: 'auto'}}
+                image={noDataBg}
+                description={
+                    <span className={styles['empty-desc']}>
+                        {t('暂无数据')}
+                    </span>
+                }
+            />
+        </div>
+    );
+};
+export default SMEmpty;

package/src/components/SMEmpty/index.less

@@ -0,0 +1,9 @@
+
+.empty-content {
+    .ant-empty-image {
+        width: 100%;
+        display: flex;
+        justify-content: center;
+    }
+}
+