Skip to content

X
xiaomai-cloud-class-web
Commit 020e12a3 by yuananting
Options

Merge branch 'master' into feature/yuananting/20210712/exam-optimize

parents 5ab744eb 75624ae3
Showing with 1088 additions and 1046 deletions
config/webpack.config.js
'use strict'
const fs = require('fs');
const path = require('path');
const webpack = require('webpack');
const resolve = require('resolve');
const PnpWebpackPlugin = require('pnp-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
const InlineChunkHtmlPlugin = require('react-dev-utils/InlineChunkHtmlPlugin');
const TerserPlugin = require('terser-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const safePostCssParser = require('postcss-safe-parser');
const ManifestPlugin = require('webpack-manifest-plugin');
const InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
const WorkboxWebpackPlugin = require('workbox-webpack-plugin');
const WatchMissingNodeModulesPlugin = require('react-dev-utils/WatchMissingNodeModulesPlugin');
const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin');
const getCSSModuleLocalIdent = require('react-dev-utils/getCSSModuleLocalIdent');
const paths = require('./paths');
const modules = require('./modules');
const getClientEnvironment = require('./env');
const ModuleNotFoundPlugin = require('react-dev-utils/ModuleNotFoundPlugin');
const ForkTsCheckerWebpackPlugin = require('react-dev-utils/ForkTsCheckerWebpackPlugin');
const typescriptFormatter = require('react-dev-utils/typescriptFormatter');
const fs = require('fs')
const path = require('path')
const webpack = require('webpack')
const resolve = require('resolve')
const PnpWebpackPlugin = require('pnp-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin')
const InlineChunkHtmlPlugin = require('react-dev-utils/InlineChunkHtmlPlugin')
const TerserPlugin = require('terser-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin')
const safePostCssParser = require('postcss-safe-parser')
const ManifestPlugin = require('webpack-manifest-plugin')
const InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin')
const WorkboxWebpackPlugin = require('workbox-webpack-plugin')
const WatchMissingNodeModulesPlugin = require('react-dev-utils/WatchMissingNodeModulesPlugin')
const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin')
const getCSSModuleLocalIdent = require('react-dev-utils/getCSSModuleLocalIdent')
const paths = require('./paths')
const modules = require('./modules')
const vConsolePlugin = require('vconsole-webpack-plugin')
const getClientEnvironment = require('./env')
const ModuleNotFoundPlugin = require('react-dev-utils/ModuleNotFoundPlugin')
const ForkTsCheckerWebpackPlugin = require('react-dev-utils/ForkTsCheckerWebpackPlugin')
const typescriptFormatter = require('react-dev-utils/typescriptFormatter')
const postcssNormalize = require('postcss-normalize');
const postcssNormalize = require('postcss-normalize')
const appPackageJson = require(paths.appPackageJson)
const appPackageJson = require(paths.appPackageJson);
// Source maps are resource heavy and can cause out of memory issue for large source files.
const shouldUseSourceMap = process.env.GENERATE_SOURCEMAP !== 'false'
const shouldUseSourceMap = process.env.GENERATE_SOURCEMAP !== 'false';
// Some apps do not need the benefits of saving a web request, so not inlining the chunk
// makes for a smoother build process.
const shouldInlineRuntimeChunk = process.env.INLINE_RUNTIME_CHUNK !== 'false'
const shouldInlineRuntimeChunk = process.env.INLINE_RUNTIME_CHUNK !== 'false';
const isExtendingEslintConfig = process.env.EXTEND_ESLINT === 'true'
const isExtendingEslintConfig = process.env.EXTEND_ESLINT === 'true';
const imageInlineSizeLimit = parseInt(process.env.IMAGE_INLINE_SIZE_LIMIT || '10000')
const imageInlineSizeLimit = parseInt(process.env.IMAGE_INLINE_SIZE_LIMIT || '10000');
// Check if TypeScript is setup
const useTypeScript = fs.existsSync(paths.appTsConfig)
const useTypeScript = fs.existsSync(paths.appTsConfig);
// style files regexes
const cssRegex = /\.css$/
const cssModuleRegex = /\.module\.css$/
const lessRegex = /\.less$/
const lessModuleRegex = /\.module\.less$/
const cssRegex = /\.css$/;
const cssModuleRegex = /\.module\.css$/;
const lessRegex = /\.less$/;
const lessModuleRegex = /\.module\.less$/;
// This is the production and development configuration.
// It is focused on developer experience, fast rebuilds, and a minimal bundle.
module.exports = function (webpackEnv) {
const isEnvDevelopment = webpackEnv === 'development'
const isEnvProduction = webpackEnv === 'production'
const isEnvDevelopment = webpackEnv === 'development';
const isEnvProduction = webpackEnv === 'production';
// Variable used for enabling profiling in Production
// passed into alias object. Uses a flag if passed into the build command
const isEnvProductionProfile = isEnvProduction && process.argv.includes('--profile')
const isEnvProductionProfile = isEnvProduction && process.argv.includes('--profile');
// We will provide `paths.publicUrlOrPath` to our app
// as %PUBLIC_URL% in `index.html` and `process.env.PUBLIC_URL` in JavaScript.
// Omit trailing slash as %PUBLIC_URL%/xyz looks better than %PUBLIC_URL%xyz.
// Get environment variables to inject into our app.
const env = getClientEnvironment(paths.publicUrlOrPath.slice(0, -1))
const env = getClientEnvironment(paths.publicUrlOrPath.slice(0, -1));
var PREFIX = 'b-'; //static 文件夹前缀
// common function to get style loaders
const getStyleLoaders = (cssOptions, preProcessor) => {
const loaders = [
......@@ -73,11 +70,11 @@ module.exports = function (webpackEnv) {
loader: MiniCssExtractPlugin.loader,
// css is located in `static/css`, use '../../' to locate index.html folder
// in production `paths.publicUrlOrPath` can be a relative path
options: paths.publicUrlOrPath.startsWith('.') ? { publicPath: '../../' } : {}
options: paths.publicUrlOrPath.startsWith('.') ? { publicPath: '../../' } : {},
},
{
loader: require.resolve('css-loader'),
options: cssOptions
options: cssOptions,
},
{
// Options for PostCSS as we reference these options twice
......@@ -92,32 +89,32 @@ module.exports = function (webpackEnv) {
require('postcss-flexbugs-fixes'),
require('postcss-preset-env')({
autoprefixer: {
flexbox: 'no-2009'
flexbox: 'no-2009',
},
stage: 3
stage: 3,
}),
// Adds PostCSS Normalize as the reset css with default options,
// so that it honors browserslist config in package.json
// which in turn let's users customize the target behavior as per their needs.
postcssNormalize()
postcssNormalize(),
],
sourceMap: isEnvProduction && shouldUseSourceMap
}
}
].filter(Boolean)
sourceMap: isEnvProduction && shouldUseSourceMap,
},
},
].filter(Boolean);
if (preProcessor) {
loaders.push(
{
loader: require.resolve('resolve-url-loader'),
options: {
sourceMap: isEnvProduction && shouldUseSourceMap
}
sourceMap: isEnvProduction && shouldUseSourceMap,
},
},
{
loader: require.resolve(preProcessor),
options: {
sourceMap: true
}
sourceMap: true,
},
},
{
loader: require.resolve('less-loader'),
......@@ -127,14 +124,14 @@ module.exports = function (webpackEnv) {
'primary-color': '#2966FF',
'border-radius-base': '2px',
},
javascriptEnabled: true
}
}
javascriptEnabled: true,
},
},
}
)
);
}
return loaders
}
return loaders;
};
return {
mode: isEnvProduction ? 'production' : isEnvDevelopment && 'development',
......@@ -156,7 +153,7 @@ module.exports = function (webpackEnv) {
isEnvDevelopment && require.resolve('webpack/hot/dev-server'),
isEnvDevelopment && require.resolve('react-dev-utils/webpackHotDevClient'),
// Finally, this is your app's code:
paths.appIndexJs
paths.appIndexJs,
// We include the app code last so that if there is a runtime error during
// initialization, it doesn't blow up the WebpackDevServer client, and
// changing JS code would still trigger a refresh.
......@@ -168,11 +165,11 @@ module.exports = function (webpackEnv) {
pathinfo: isEnvDevelopment,
// There will be one main bundle, and one file per asynchronous chunk.
// In development, it does not produce real files.
filename: isEnvProduction ? 'static/js/[name].[contenthash:8].js' : isEnvDevelopment && 'static/js/bundle.js',
filename: isEnvProduction ? PREFIX + 'static/js/[name].[contenthash:8].js' : isEnvDevelopment && PREFIX + 'static/js/bundle.js',
// TODO: remove this when upgrading to webpack 5
futureEmitAssets: true,
// There are also additional JS chunk files if you use code splitting.
chunkFilename: isEnvProduction ? 'static/js/[name].[contenthash:8].chunk.js' : isEnvDevelopment && 'static/js/[name].chunk.js',
chunkFilename: isEnvProduction ? PREFIX + 'static/js/[name].[contenthash:8].chunk.js' : isEnvDevelopment && PREFIX + 'static/js/[name].chunk.js',
// webpack uses `publicPath` to determine where the app is being served from.
// It requires a trailing slash, or the file assets will get an incorrect path.
// We inferred the "public path" (such as / or /my-project) from homepage.
......@@ -189,7 +186,7 @@ module.exports = function (webpackEnv) {
globalObject: 'this',
library: appPackageJson.name,
libraryTarget: 'umd',
jsonpFunction: `webpackJsonp_${appPackageJson.name}`
jsonpFunction: `webpackJsonp_${appPackageJson.name}`,
},
optimization: {
minimize: isEnvProduction,
......@@ -203,7 +200,7 @@ module.exports = function (webpackEnv) {
// into invalid ecma 5 code. This is why the 'compress' and 'output'
// sections only apply transformations that are ecma 5 safe
// https://github.com/facebook/create-react-app/pull/4234
ecma: 8
ecma: 8,
},
compress: {
ecma: 5,
......@@ -217,10 +214,10 @@ module.exports = function (webpackEnv) {
// https://github.com/facebook/create-react-app/issues/5250
// Pending further investigation:
// https://github.com/terser-js/terser/issues/120
inline: 2
inline: 2,
},
mangle: {
safari10: true
safari10: true,
},
// Added for profiling in devtools
keep_classnames: isEnvProductionProfile,
......@@ -230,10 +227,10 @@ module.exports = function (webpackEnv) {
comments: false,
// Turned on because emoji and regex is not minified properly using default
// https://github.com/facebook/create-react-app/issues/2488
ascii_only: true
}
ascii_only: true,
},
},
sourceMap: shouldUseSourceMap
sourceMap: shouldUseSourceMap,
}),
// This is only used in production mode
new OptimizeCSSAssetsPlugin({
......@@ -246,28 +243,28 @@ module.exports = function (webpackEnv) {
inline: false,
// `annotation: true` appends the sourceMappingURL to the end of
// the css file, helping the browser find the sourcemap
annotation: true
annotation: true,
}
: false
: false,
},
cssProcessorPluginOptions: {
preset: ['default', { minifyFontValues: { removeQuotes: false } }]
}
})
preset: ['default', { minifyFontValues: { removeQuotes: false } }],
},
}),
],
// Automatically split vendor and commons
// https://twitter.com/wSokra/status/969633336732905474
// https://medium.com/webpack/webpack-4-code-splitting-chunk-graph-and-the-splitchunks-optimization-be739a861366
splitChunks: {
chunks: 'all',
name: false
name: false,
},
// Keep the runtime chunk separated to enable long term caching
// https://twitter.com/wSokra/status/969679223278505985
// https://github.com/facebook/create-react-app/issues/5358
runtimeChunk: {
name: (entrypoint) => `runtime-${entrypoint.name}`
}
name: (entrypoint) => `runtime-${entrypoint.name}`,
},
},
resolve: {
// This allows you to set a fallback for where webpack should look for modules.
......@@ -290,9 +287,9 @@ module.exports = function (webpackEnv) {
// Allows for better profiling with ReactDevTools
...(isEnvProductionProfile && {
'react-dom$': 'react-dom/profiling',
'scheduler/tracing': 'scheduler/tracing-profiling'
'scheduler/tracing': 'scheduler/tracing-profiling',
}),
...(modules.webpackAliases || {})
...(modules.webpackAliases || {}),
},
plugins: [
// Adds support for installing with Plug'n'Play, leading to faster installs and adding
......@@ -303,15 +300,15 @@ module.exports = function (webpackEnv) {
// To fix this, we prevent you from importing files out of src/ -- if you'd like to,
// please link the files into your node_modules/ and let module-resolution kick in.
// Make sure your source files are compiled, as they will not be processed in any way.
new ModuleScopePlugin(paths.appSrc, [paths.appPackageJson])
]
new ModuleScopePlugin(paths.appSrc, [paths.appPackageJson]),
],
},
resolveLoader: {
plugins: [
// Also related to Plug'n'Play, but this time it tells webpack to load its loaders
// from the current package.
PnpWebpackPlugin.moduleLoader(module)
]
PnpWebpackPlugin.moduleLoader(module),
],
},
module: {
strictExportPresence: true,
......@@ -330,12 +327,12 @@ module.exports = function (webpackEnv) {
cache: true,
formatter: require.resolve('react-dev-utils/eslintFormatter'),
eslintPath: require.resolve('eslint'),
resolvePluginsRelativeTo: __dirname
resolvePluginsRelativeTo: __dirname,
},
loader: require.resolve('eslint-loader')
}
loader: require.resolve('eslint-loader'),
},
],
include: paths.appSrc
include: paths.appSrc,
},
{
// "oneOf" will traverse all following loaders until one will
......@@ -350,8 +347,8 @@ module.exports = function (webpackEnv) {
loader: require.resolve('url-loader'),
options: {
limit: imageInlineSizeLimit,
name: 'static/media/[name].[hash:8].[ext]'
}
name: PREFIX + 'static/media/[name].[hash:8].[ext]',
},
},
// Process application JS with Babel.
// The preset includes JSX, Flow, TypeScript, and some ESnext features.
......@@ -368,11 +365,11 @@ module.exports = function (webpackEnv) {
{
loaderMap: {
svg: {
ReactComponent: '@svgr/webpack?-svgo,+titleProp,+ref![path]'
}
}
}
]
ReactComponent: '@svgr/webpack?-svgo,+titleProp,+ref![path]',
},
},
},
],
],
// This is a feature of `babel-loader` for webpack (not Babel itself).
// It enables caching results in ./node_modules/.cache/babel-loader/
......@@ -380,8 +377,8 @@ module.exports = function (webpackEnv) {
cacheDirectory: true,
// See #6846 for context on why cacheCompression is disabled
cacheCompression: false,
compact: isEnvProduction
}
compact: isEnvProduction,
},
},
// Process any JS outside of the app with Babel.
// Unlike the application JS, we only compile the standard ES features.
......@@ -402,8 +399,8 @@ module.exports = function (webpackEnv) {
// code. Without the options below, debuggers like VSCode
// show incorrect code and set breakpoints on the wrong lines.
sourceMaps: shouldUseSourceMap,
inputSourceMap: shouldUseSourceMap
}
inputSourceMap: shouldUseSourceMap,
},
},
// "postcss" loader applies autoprefixer to our CSS.
// "css" loader resolves paths in CSS and adds assets as dependencies.
......@@ -417,13 +414,13 @@ module.exports = function (webpackEnv) {
exclude: cssModuleRegex,
use: getStyleLoaders({
importLoaders: 1,
sourceMap: isEnvProduction && shouldUseSourceMap
sourceMap: isEnvProduction && shouldUseSourceMap,
}),
// Don't consider CSS imports dead code even if the
// containing package claims to have no side effects.
// Remove this when webpack adds a warning or an error for this.
// See https://github.com/webpack/webpack/issues/6571
sideEffects: true
sideEffects: true,
},
// Adds support for CSS Modules (https://github.com/css-modules/css-modules)
// using the extension .module.css
......@@ -433,9 +430,9 @@ module.exports = function (webpackEnv) {
importLoaders: 1,
sourceMap: isEnvProduction && shouldUseSourceMap,
modules: {
getLocalIdent: getCSSModuleLocalIdent
}
})
getLocalIdent: getCSSModuleLocalIdent,
},
}),
},
// Opt-in support for SASS (using .scss or .sass extensions).
// By default we support SASS Modules with the
......@@ -446,11 +443,11 @@ module.exports = function (webpackEnv) {
use: getStyleLoaders(
{
importLoaders: 2,
sourceMap: isEnvProduction && shouldUseSourceMap
sourceMap: isEnvProduction && shouldUseSourceMap,
},
'less-loader'
),
sideEffects: true
sideEffects: true,
},
{
test: lessModuleRegex,
......@@ -459,10 +456,10 @@ module.exports = function (webpackEnv) {
importLoaders: 2,
sourceMap: isEnvProduction && shouldUseSourceMap,
modules: true,
getLocalIdent: getCSSModuleLocalIdent
getLocalIdent: getCSSModuleLocalIdent,
},
'less-loader'
)
),
},
// "file" loader makes sure those assets get served by WebpackDevServer.
// When you `import` an asset, you get its (virtual) filename.
......@@ -477,14 +474,14 @@ module.exports = function (webpackEnv) {
// by webpacks internal loaders.
exclude: [/\.(js|mjs|jsx|ts|tsx)$/, /\.html$/, /\.json$/],
options: {
name: 'static/media/[name].[hash:8].[ext]'
}
}
name: PREFIX + 'static/media/[name].[hash:8].[ext]',
},
},
// ** STOP ** Are you adding a new loader?
// Make sure to add the new loader(s) before the "file" loader.
]
}
]
],
},
],
},
plugins: [
// Generates an `index.html` file with the <script> injected.
......@@ -493,7 +490,7 @@ module.exports = function (webpackEnv) {
{},
{
inject: true,
template: paths.appHtml
template: paths.appHtml,
},
isEnvProduction
? {
......@@ -507,8 +504,8 @@ module.exports = function (webpackEnv) {
keepClosingSlash: true,
minifyJS: true,
minifyCSS: true,
minifyURLs: true
}
minifyURLs: true,
},
}
: undefined
)
......@@ -547,8 +544,8 @@ module.exports = function (webpackEnv) {
new MiniCssExtractPlugin({
// Options similar to the same options in webpackOptions.output
// both options are optional
filename: 'static/css/[name].[contenthash:8].css',
chunkFilename: 'static/css/[name].[contenthash:8].chunk.css'
filename: PREFIX + 'static/css/[name].[contenthash:8].css',
chunkFilename: PREFIX + 'static/css/[name].[contenthash:8].chunk.css',
}),
// Generate an asset manifest file with the following content:
// - "files" key: Mapping of all asset filenames to their corresponding
......@@ -561,16 +558,16 @@ module.exports = function (webpackEnv) {
publicPath: paths.publicUrlOrPath,
generate: (seed, files, entrypoints) => {
const manifestFiles = files.reduce((manifest, file) => {
manifest[file.name] = file.path
return manifest
}, seed)
const entrypointFiles = entrypoints.main.filter((fileName) => !fileName.endsWith('.map'))
manifest[file.name] = file.path;
return manifest;
}, seed);
const entrypointFiles = entrypoints.main.filter((fileName) => !fileName.endsWith('.map'));
return {
files: manifestFiles,
entrypoints: entrypointFiles
}
}
entrypoints: entrypointFiles,
};
},
}),
// Moment.js is an extremely popular library that bundles large locale files
......@@ -594,14 +591,14 @@ module.exports = function (webpackEnv) {
// as they're likely a resource and not a SPA route.
// URLs containing a "?" character won't be blacklisted as they're likely
// a route with query params (e.g. auth callbacks).
new RegExp('/[^/?]+\\.[^/]+$')
]
new RegExp('/[^/?]+\\.[^/]+$'),
],
}),
// TypeScript type checking
useTypeScript &&
new ForkTsCheckerWebpackPlugin({
typescript: resolve.sync('typescript', {
basedir: paths.appNodeModules
basedir: paths.appNodeModules,
}),
async: isEnvDevelopment,
useTypescriptIncrementalApi: true,
......@@ -612,11 +609,8 @@ module.exports = function (webpackEnv) {
reportFiles: ['**', '!**/__tests__/**', '!**/?(*.)(spec|test).*', '!**/src/setupProxy.*', '!**/src/setupTests.*'],
silent: true,
// The formatter is invoked directly in WebpackDevServerUtils during development
formatter: isEnvProduction ? typescriptFormatter : undefined
})
// new vConsolePlugin({
// enable: (process.env.DEPLOY_ENV === 'prod' || process.env.DEPLOY_ENV === 'beta') ? false : true
// })
formatter: isEnvProduction ? typescriptFormatter : undefined,
}),
].filter(Boolean),
// Some libraries import Node modules but don't use them in the browser.
// Tell webpack to provide empty mocks for them so importing them works.
......@@ -628,10 +622,10 @@ module.exports = function (webpackEnv) {
http2: 'empty',
net: 'empty',
tls: 'empty',
child_process: 'empty'
child_process: 'empty',
},
// Turn off performance processing because we utilize
// our own hints via the FileSizeReporter
performance: false
}
}
performance: false,
};
};
package.json
......@@ -110,6 +110,7 @@
"start:dev1": "cross-env DEPLOY_ENV=dev node scripts/start.js",
"start:rc": "cross-env DEPLOY_ENV=rc node scripts/start.js",
"start:gray": "cross-env DEPLOY_ENV=gray node scripts/start.js",
"start:prod": "cross-env DEPLOY_ENV=prod node scripts/start.js",
"build:dev": "cross-env DEPLOY_ENV=dev node scripts/build.js",
"build:dev1": "cross-env DEPLOY_ENV=dev node scripts/build.js",
"build:rc": "cross-env DEPLOY_ENV=rc node scripts/build.js",
......@@ -143,7 +144,6 @@
"@types/ali-oss": "^6.0.5",
"@types/jquery": "^3.5.4",
"ali-oss": "^6.12.0",
"react-sortable-hoc": "^1.11.0",
"vconsole-webpack-plugin": "^1.5.2"
"react-sortable-hoc": "^1.11.0"
}
}
src/core/antd.less
......@@ -6,7 +6,7 @@
*/
@import './variables.less';
@active-color: #2966FF;
@active-color: #2966ff;
// 消息提示框
.ant-message {
......@@ -41,6 +41,9 @@
.ant-switch-small:after {
top: 0.3px;
}
tbody .ant-switch-small {
min-width: 32px;
}
.ant-pagination {
display: inline !important;
......@@ -234,7 +237,7 @@
}
.ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn {
font-weight: 500!important;
font-weight: 500 !important;
}
.ant-tabs-nav .ant-tabs-tab-active {
......@@ -264,7 +267,7 @@
position: absolute;
width: 30px;
height: 4px;
background: #2966FF !important;
background: #2966ff !important;
left: 50%;
transform: translateX(-50%);
}
......@@ -339,14 +342,14 @@ mr0 {
background: #f3f6fa;
.ant-select-selected-icon {
color:#2966FF !important;
color: #2966ff !important;
}
}
.ant-select-dropdown-menu-item-selected {
background: none;
font-weight: 400 !important;
color:#2966FF;
color: #2966ff;
}
.ant-select-open .ant-select-selection {
......@@ -444,7 +447,7 @@ mr0 {
.ant-modal {
.ant-input {
&:focus {
border: 1px solid #2966FF !important;
border: 1px solid #2966ff !important;
}
}
}
......@@ -457,8 +460,8 @@ mr0 {
.ant-calendar-footer-extra {
.ant-tag-blue {
background: #fff;
color: #2966FF;
border-color: #2966FF;
color: #2966ff;
border-color: #2966ff;
}
}
}
......@@ -474,7 +477,7 @@ mr0 {
}
.ant-modal-confirm-info .ant-modal-confirm-body > .anticon {
color: #2966FF!important;
color: #2966ff !important;
}
.ant-breadcrumb > span:last-child .ant-breadcrumb-separator {
......@@ -502,7 +505,7 @@ mr0 {
font-size: 22px !important;
line-height: 22px !important;
float: left !important;
color:#2966FF !important;
color: #2966ff !important;
margin-right: 16px !important;
&.blue {
color: #5cbaff !important;
......@@ -527,8 +530,8 @@ mr0 {
float: left;
margin-right: 16px;
}
>.confirm-icon{
color: #2966FF;
> .confirm-icon {
color: #2966ff;
}
.ant-modal-confirm-content {
margin-left: 38px;
......@@ -594,9 +597,9 @@ mr0 {
// background: #FAFAFA !important;
// }
.ant-table-thead > tr > th{
font-weight:bold !important;
color:#333 !important;
.ant-table-thead > tr > th {
font-weight: bold !important;
color: #333 !important;
}
td.ant-table-column-sort {
background: none;
......@@ -657,11 +660,11 @@ td.ant-table-column-sort {
border-color: @xm-color-text-select-primary !important;
border: none !important;
&:hover {
background-color: #2966FF !important;
background-color: #2966ff !important;
opacity: 0.8 !important;
}
&:active{
background-color:#5C8AFF !important;
&:active {
background-color: #5c8aff !important;
}
}
......@@ -720,9 +723,9 @@ td.ant-table-column-sort {
border-right: 0px !important;
}
.ant-input-search > .ant-input-group > .ant-input-group-addon:last-child .ant-input-search-button span{
color:#bfbfbf !important;
font-size:12px;
.ant-input-search > .ant-input-group > .ant-input-group-addon:last-child .ant-input-search-button span {
color: #bfbfbf !important;
font-size: 12px;
}
.ant-modal-footer {
......@@ -774,4 +777,3 @@ td.ant-table-column-sort {
.ant-table-column-sorter {
margin-left: 8px !important;
}
src/modules/course-manage/components/LiveCourseList.jsx
......@@ -125,7 +125,7 @@ class LiveCourseList extends React.Component {
columns = [
{
title: '直播课',
width: '23%',
key: 'course',
fixed: 'left',
dataIndex: 'courseName',
......@@ -284,6 +284,7 @@ class LiveCourseList extends React.Component {
render: (val, item, index) => {
return (
<Switch
size='small'
checked={item.shelfState === 'YES'}
defaultChecked={item.shelfState === 'YES' ? true : false}
onChange={(checked) => this.changeShelfState(index, item, checked)}
......
src/modules/course-manage/graphics-course/components/GraphicsCourseList.jsx
......@@ -9,7 +9,7 @@
import User from '@/common/js/user';
import college from '@/common/lottie/college';
import { PageControl, XMTable } from '@/components';
import { appId, LIVE_SHARE } from '@/domains/course-domain/constants';
import { LIVE_SHARE } from '@/domains/course-domain/constants';
import CourseService from '@/domains/course-domain/CourseService';
import ShareLiveModal from '@/modules/course-manage/modal/ShareLiveModal';
import { Dropdown, message, Modal, Switch, Tooltip } from 'antd';
......@@ -57,7 +57,7 @@ class GraphicsCourseList extends React.Component {
handlePlanName = (planArray) => {
let planStr = '';
planArray.map((item, index) => {
planArray.forEach((item, index) => {
if (index < planArray.length - 1) {
planStr = planStr + item.planName + '、';
} else {
......@@ -76,18 +76,21 @@ class GraphicsCourseList extends React.Component {
width: 321,
fixed: 'left',
render: (val, record) => {
const { coverUrl, scheduleVideoUrl } = record;
const { coverUrl } = record;
return (
<div className='record__item'>
{/* 上传了封面的话就用上传的封面, 没有的话就取视频的第一帧 */}
<img className='course-cover' src={coverUrl || defaultCoverUrl} />
{record.courseName.length > 25 ? (
<Tooltip title={record.courseName}>
<img className='course-cover' src={coverUrl || defaultCoverUrl} alt='' />
<Choose>
<When condition={record.courseName.length > 25}>
<Tooltip title={record.courseName}>
<div className='course-name'>{record.courseName}</div>
</Tooltip>
</When>
<Otherwise>
<div className='course-name'>{record.courseName}</div>
</Tooltip>
) : (
<div className='course-name'>{record.courseName}</div>
)}
</Otherwise>
</Choose>
</div>
);
},
......@@ -144,12 +147,14 @@ class GraphicsCourseList extends React.Component {
width: 120,
dataIndex: 'courseware',
render: (val, item, index) => {
return (
<Switch
checked={item.shelfState === "YES"}
defaultChecked={item.shelfState==="YES"?true:false}
onChange={(checked)=>this.changeShelfState(index,item,checked)}/>
)
return (
<Switch
size='small'
checked={item.shelfState === 'YES'}
defaultChecked={item.shelfState === 'YES' ? true : false}
onChange={(checked) => this.changeShelfState(index, item, checked)}
/>
);
},
},
{
......@@ -168,7 +173,7 @@ class GraphicsCourseList extends React.Component {
dataIndex: 'created',
sorter: true,
render: (val) => {
return formatDate('YYYY-MM-DD H:i', val);
return window.formatDate('YYYY-MM-DD H:i', val);
},
},
{
......@@ -178,7 +183,7 @@ class GraphicsCourseList extends React.Component {
dataIndex: 'updated',
sorter: true,
render: (val) => {
return formatDate('YYYY-MM-DD H:i', val);
return window.formatDate('YYYY-MM-DD H:i', val);
},
},
{
......@@ -189,19 +194,22 @@ class GraphicsCourseList extends React.Component {
render: (val, record) => {
return (
<div className='related-task'>
{record.relatedPlanList ? (
<Tooltip title={this.handlePlanName(record.relatedPlanList)} placement='top' arrowPointAtCenter>
{record.relatedPlanList.map((item, index) => {
return (
<span>
{item.planName} {index < record.relatedPlanList.length - 1 && <span> 、</span>}{' '}
</span>
);
})}
</Tooltip>
) : (
<span></span>
)}
<Choose>
<When condition={record.relatedPlanList}>
<Tooltip title={this.handlePlanName(record.relatedPlanList)} placement='top' arrowPointAtCenter>
{record.relatedPlanList.map((item, index) => {
return (
<span>
{item.planName} {index < record.relatedPlanList.length - 1 && <span> 、</span>}{' '}
</span>
);
})}
</Tooltip>
</When>
<Otherwise>
<span></span>
</Otherwise>
</Choose>
</div>
);
},
......@@ -297,7 +305,7 @@ class GraphicsCourseList extends React.Component {
className='operate__item'
key='edit'
onClick={() => {
RCHistory.push(`/create-graphics-course?type=edit&id=${item.id}`);
window.RCHistory.push(`/create-graphics-course?type=edit&id=${item.id}`);
}}>
编辑
</div>
......@@ -305,17 +313,17 @@ class GraphicsCourseList extends React.Component {
删除
</div>
</div>
)
}
//改变上架状态
changeShelfState = (index,item,checked) =>{
let _shelfState = checked ? "YES" : "NO"
);
};
//改变上架状态
changeShelfState = (index, item, checked) => {
let _shelfState = checked ? 'YES' : 'NO';
// if(_shelfState==='NO'){
// _shelfState = "YES";
// }else{
// _shelfState = "NO"
// }
const params={
const params = {
courseId: item.id,
shelfState: _shelfState,
};
......@@ -326,7 +334,7 @@ class GraphicsCourseList extends React.Component {
} else {
message.success('已取消展示');
}
this.props.changeShelfState(index,_shelfState)
this.props.changeShelfState(index, _shelfState);
}
});
};
......@@ -355,8 +363,6 @@ class GraphicsCourseList extends React.Component {
// 显示分享弹窗
handleShowShareModal = (record, needStr = false) => {
const { id, scheduleVideoUrl } = record;
const _appId = appId;
const htmlUrl = `${LIVE_SHARE}graphics_detail/${id}?id=${User.getStoreId()}`;
const longUrl = htmlUrl;
const { coverUrl, courseName } = record;
......
src/modules/course-manage/offline-course/AddOfflineCourse.jsx
......@@ -8,80 +8,65 @@
*/
import React from 'react';
import {
Button,
Input,
Radio,
message,
Modal,
TreeSelect,
Select,
Switch,
TimePicker,
InputNumber,
Tooltip,
} from 'antd';
import { Button, Input, Radio, message, Modal, TreeSelect, Select, Switch, TimePicker, InputNumber, Tooltip } from 'antd';
import $ from 'jquery';
import RangePicker from "@/modules/common/DateRangePicker";
import ShowTips from "@/components/ShowTips";
import Breadcrumbs from "@/components/Breadcrumbs";
import SelectStudent from '../modal/select-student';
import Bus from '@/core/bus';
import RangePicker from '@/modules/common/DateRangePicker';
import ShowTips from '@/components/ShowTips';
import Breadcrumbs from '@/components/Breadcrumbs';
import SelectPrepareFileModal from '../../prepare-lesson/modal/SelectPrepareFileModal';
import PreviewOfflineModal from './modal/PreviewOfflineModal';
import StoreService from "@/domains/store-domain/storeService";
import StoreService from '@/domains/store-domain/storeService';
import Service from '@/common/js/service';
import { randomString } from '@/domains/basic-domain/utils';
import User from '@/common/js/user';
import _ from "underscore";
import _ from 'underscore';
import moment from 'moment';
import Upload from '@/core/upload';
import GraphicsEditor from '../components/GraphicsEditor';
import MultipleDatePicker from '@/components/MultipleDatePicker';
import ImgClipModal from '@/components/ImgClipModal'
import ImgClipModal from '@/components/ImgClipModal';
import './AddOfflineCourse.less';
const { Option } = Select;
const defaultCoverUrl = 'https://image.xiaomaiketang.com/xm/pxbWKsYA87.png';
let cutFlag = false;
const unitList = [
{ key: 'HOUR', value: '小时' },
{ key: 'MINUTE', value: '分钟' },
]
];
class AddOfflineCourse extends React.Component {
constructor(props) {
super(props);
const courseId = getParameterByName("id");
const pageType = getParameterByName("type");
const courseId = window.getParameterByName('id');
const pageType = window.getParameterByName('type');
this.state = {
courseId, // 线下课ID,编辑的时候从URL上带过来
pageType, // 页面类型: add->新建 edit->编辑
imageFile: null, // 需要被截取的图片
courseName: null, // 线下课名称
courseId, // 线下课ID,编辑的时候从URL上带过来
pageType, // 页面类型: add->新建 edit->编辑
imageFile: null, // 需要被截取的图片
courseName: null, // 线下课名称
courseMedia: '',
introduce: '',
coverId: null, // 线下封面的recourceId
coverUrl: defaultCoverUrl, // 线下课封面
studentList: [], // 上课学员列表
diskList: [], // 机构可见磁盘目录
selectedFileList: [], // 已经从资料云盘中勾选的文件
showCutModal: false, // 是否显示截图弹窗
coverId: null, // 线下封面的recourceId
coverUrl: defaultCoverUrl, // 线下课封面
studentList: [], // 上课学员列表
diskList: [], // 机构可见磁盘目录
selectedFileList: [], // 已经从资料云盘中勾选的文件
showCutModal: false, // 是否显示截图弹窗
studentModal: false,
categoryName:null, //分类名称
categoryName: null, //分类名称
categoryList: [],
courseCatalogList:[], //分类列表
categoryId:null, //分类的Id值
courseCatalogList: [], //分类列表
categoryId: null, //分类的Id值
whetherVisitorsJoin: 'NO', // 是否允许游客加入
isContent: true,
teacherList: [],
teacherQuery: {
size: 15,
current: 1,
nickName:null
nickName: null,
},
calendarTime: [],
offlineCourseType: 'ALL_DAY_OFFLINE',
......@@ -101,7 +86,7 @@ class AddOfflineCourse extends React.Component {
isEditDisablie: false,
startTime: new Date().getTime() + 300000, // 批量开始时分
endTime: new Date().getTime() + 300000, // 批量结束时分
}
};
}
componentWillMount() {
......@@ -114,27 +99,27 @@ class AddOfflineCourse extends React.Component {
}
initBus = () => {
Bus.bind('offlineEditorImage', this.uploadImage)
}
Bus.bind('offlineEditorImage', this.uploadImage);
};
removeBus = () => {
Bus.unbind('offlineEditorImage', this.uploadImage)
}
Bus.unbind('offlineEditorImage', this.uploadImage);
};
uploadImage = () => {
this.setState({ showSelectImageModal: true })
}
this.setState({ showSelectImageModal: true });
};
//获取分类列表
getCourseCatalogList = ()=>{
getCourseCatalogList = () => {
Service.Hades('public/hades/queryCategoryTree', { source: 0, tenantId: User.getStoreId(), count: false, userId: User.getUserId() }).then((res) => {
const { categoryList = [] } = res.result;
this.setState({
categoryList,
courseCatalogList: this.renderTreeNodes(categoryList),
})
});
});
}
};
renderTreeNodes = (data) => {
let newTreeData = data.map((item) => {
......@@ -151,22 +136,21 @@ class AddOfflineCourse extends React.Component {
checkDetail = (courseId) => {
return Service.Hades('public/hades/getOfflineCourseDetail', {
courseId
courseId,
}).then((res) => {
const { courseState } = res.result;
return courseState === 'UN_START';
});
}
};
// 获取线下课详情
handleFetchScheudleDetail = (courseId) => {
return Service.Hades('public/hades/getOfflineCourseDetail',{
courseId
return Service.Hades('public/hades/getOfflineCourseDetail', {
courseId,
}).then((res) => {
const { result = {} } = res || {};
const {
courseName,
courseState,
categoryId,
offlinePlace,
whetherVisitorsJoin,
......@@ -197,25 +181,25 @@ class AddOfflineCourse extends React.Component {
let coverId;
let coverUrl = this.state.coverUrl;
let hasIntro = false;
courseMediaVOS.map((item) => {
switch (item.contentType){
case "COVER":
switch (item.contentType) {
case 'COVER':
coverId = item.mediaContent;
coverUrl = item.mediaUrl;
break;
case "SCHEDULE":
break;
case 'SCHEDULE':
this.getTextDetail('courseMedia', item.mediaUrl);
break;
case "INTRO":
case 'INTRO':
hasIntro = true;
this.getTextDetail('introduce', item.mediaUrl);
break;
break;
default:
break;
}
return item;
})
});
this.setState({
loadintroduce: !hasIntro,
coverId,
......@@ -248,50 +232,43 @@ class AddOfflineCourse extends React.Component {
signOutType,
isEditDisablie: whetherHaveApply === 'YES',
});
})
}
});
};
getTextDetail = (key, url) => {
$.ajax({
data: {},
type: 'GET',
url,
contentType:'application/x-www-form-urlencoded; charset=UTF-8',
contentType: 'application/x-www-form-urlencoded; charset=UTF-8',
success: (res) => {
this.setState({ [key]: res, [`load${key}`]: true });
}
})
}
},
});
};
handleGoBack = () => {
const {
coverId,
videoName,
videoDuration,
courseName,
categoryId,
whetherVisitorsJoin
} = this.state;
if(videoName || videoDuration || categoryId || courseName || coverId || whetherVisitorsJoin !== whetherVisitorsJoin ){
const { coverId, videoName, videoDuration, courseName, categoryId, whetherVisitorsJoin } = this.state;
if (videoName || videoDuration || categoryId || courseName || coverId || whetherVisitorsJoin !== whetherVisitorsJoin) {
Modal.confirm({
title: '确认要返回吗?',
content: '返回后，本次编辑的内容将不被保存。',
okText: '确认返回',
cancelText: '留在本页',
icon: <span className="icon iconfont default-confirm-icon">&#xe6f4;</span>,
icon: <span className='icon iconfont default-confirm-icon'>&#xe6f4;</span>,
onOk: () => {
window.RCHistory.push({
pathname: `/offline-course`,
});
}
},
});
}else{
} else {
window.RCHistory.push({
pathname: `/offline-course`,
});
}
}
};
// 显示预览弹窗
handleShowPreviewModal = () => {
const {
......@@ -339,68 +316,69 @@ class AddOfflineCourse extends React.Component {
signOutStartTimeNum,
signOutStartTimeUnit,
signOutEndTimeNum,
signOutEndTimeUnit,
}
signOutEndTimeUnit,
};
const previewOfflineModal = (
<PreviewOfflineModal
data={data}
close={() => {
this.setState({
previewOfflineModal: null
})
previewOfflineModal: null,
});
}}
/>
);
this.setState({ previewOfflineModal });
}
};
handleSelectCover = (file)=> {
handleSelectCover = (file) => {
this.setState({
visible: true,
imageFile:file
imageFile: file,
});
}
};
//获取resourceId
getSignature = (blob, fileName) => {
Upload.uploadBlobToOSS(blob, 'cover' + (new Date()).valueOf(),null,'signInfo').then((signInfo) => {
this.setState({
coverClicpPath:signInfo.fileUrl,
coverId:signInfo.resourceId,
visible: false
},()=>this.updateCover())
Upload.uploadBlobToOSS(blob, 'cover' + new Date().valueOf(), null, 'signInfo').then((signInfo) => {
this.setState(
{
coverClicpPath: signInfo.fileUrl,
coverId: signInfo.resourceId,
visible: false,
},
() => this.updateCover()
);
});
};
updateCover = () =>{
const {coverClicpPath,coverId} = this.state
updateCover = () => {
const { coverClicpPath, coverId } = this.state;
this.setState({
showSelectCoverModal: false,
coverUrl:coverClicpPath,
coverId:coverId
})
}
coverUrl: coverClicpPath,
coverId: coverId,
});
};
preSubmit = () => {
//过期判断
if (User.getExpirationTime() && moment().valueOf() > Number(User.getExpirationTime())) {
Modal.warning({
title:"服务已到期",
content: "当前企业购买的小麦企学院服务已到期，如需继续使用学院功能，请尽快续费购买",
okText: "我知道了"
})
return
title: '服务已到期',
content: '当前企业购买的小麦企学院服务已到期，如需继续使用学院功能，请尽快续费购买',
okText: '我知道了',
});
return;
}
const { courseId } = this.state;
if (courseId) {
this.checkDetail(courseId).then(bool => bool ? this.handleSubmit() : message.warning('课程已开始，无法继续编辑'))
this.checkDetail(courseId).then((bool) => (bool ? this.handleSubmit() : message.warning('课程已开始，无法继续编辑')));
} else {
this.handleSubmit();
}
}
};
// 保存
handleSubmit = () => {
......@@ -436,20 +414,20 @@ class AddOfflineCourse extends React.Component {
isMore,
} = this.state;
let coverObj ={
contentType:'COVER',
let coverObj = {
contentType: 'COVER',
mediaContent: coverId,
mediaType:'PICTURE',
mediaType: 'PICTURE',
mediaUrl: coverUrl,
}
};
let scheduleMediaRequests = [];
if(coverId){
scheduleMediaRequests = [coverObj]
if (coverId) {
scheduleMediaRequests = [coverObj];
}
// 编辑且使用默认图时不传
if (pageType === 'edit' && coverUrl === defaultCoverUrl) {
scheduleMediaRequests = []
scheduleMediaRequests = [];
}
const commonParams = {
categoryId,
......@@ -494,16 +472,21 @@ class AddOfflineCourse extends React.Component {
// 校验必填字段:课程名称, 课程线下
this.handleValidate(commonParams).then((res) => {
if (!res) return;
Upload.uploadTextToOSS(introduce, `${randomString()}.txt`, (introduceId) => {
this.submitRemote({
courseId,
pageType,
commonParams,
introduceId,
});
}, () => message.warning('上传课程简介失败'));
Upload.uploadTextToOSS(
introduce,
`${randomString()}.txt`,
(introduceId) => {
this.submitRemote({
courseId,
pageType,
commonParams,
introduceId,
});
},
() => message.warning('上传课程简介失败')
);
});
}
};
submitRemote = (data) => {
const { courseId, pageType, commonParams, introduceId } = data;
......@@ -511,65 +494,68 @@ class AddOfflineCourse extends React.Component {
if (pageType === 'add') {
Service.Hades('public/hades/createOfflineCourse', commonParams).then((res) => {
if (!res) return;
message.success("新建成功");
message.success('新建成功');
window.RCHistory.push({
pathname: `/offline-course`,
});
})
});
} else {
const editParams = {
courseId:courseId,
courseId: courseId,
...commonParams,
}
};
Service.Hades('public/hades/updateOfflineCourse', editParams).then((res) => {
if (!res) return;
message.success("保存成功");
message.success('保存成功');
window.RCHistory.push({
pathname: `/offline-course`,
});
});
}
}
};
handleValidate = (data) => {
return new Promise((resolve) => {
if (!data.courseName) {
message.warning('请输入课程名称');
resolve(false);
} else if(!data.categoryId){
} else if (!data.categoryId) {
message.warning('请选择课程分类');
resolve(false);
} else if(!data.offlinePlace){
} else if (!data.offlinePlace) {
message.warning('请输入上课地点');
resolve(false);
} else if(!data.teacherId ){
} else if (!data.teacherId) {
message.warning('请选择讲师');
resolve(false);
} else if(_.isEmpty(data.calendarTime)){
} else if (_.isEmpty(data.calendarTime)) {
message.warning('请选择上课日期');
resolve(false);
} else if(!data.startTime || !data.endTime){
} else if (!data.startTime || !data.endTime) {
message.warning('请选择上课时间');
resolve(false);
} else if(moment(moment(data.calendarTime[0]).format('YYYY-MM-DD') + moment(data.startTime).format(' HH:mm')).valueOf() < Date.now()){
} else if (moment(moment(data.calendarTime[0]).format('YYYY-MM-DD') + moment(data.startTime).format(' HH:mm')).valueOf() < Date.now()) {
message.warning('上课时间不能早于现在');
resolve(false);
} else if(data.startTime >= data.endTime){
} else if (data.startTime >= data.endTime) {
message.warning('上课结束时间不能早于上课开始时间');
resolve(false);
} else if(data.whetherSetApply === 'YES' && !data.startTimeApply){
} else if (data.whetherSetApply === 'YES' && !data.startTimeApply) {
message.warning('请选择报名时间');
resolve(false);
} else if(data.whetherSetApply === 'YES' && data.startTimeApply >= data.endTimeApply){
} else if (data.whetherSetApply === 'YES' && data.startTimeApply >= data.endTimeApply) {
message.warning('报名结束时间需大于报名开始时间');
resolve(false);
} else if(data.whetherSetApply === 'YES' && data.endTimeApply > moment(moment(data.calendarTime[0]).format('YYYY-MM-DD') + moment(data.endTime).format(' HH:mm:ss')).valueOf()){
} else if (
data.whetherSetApply === 'YES' &&
data.endTimeApply > moment(moment(data.calendarTime[0]).format('YYYY-MM-DD') + moment(data.endTime).format(' HH:mm:ss')).valueOf()
) {
message.warning('报名结束时间需小于上课开始时间');
resolve(false);
} else if(data.whetherSetSignIn === 'YES' && !data.signInTimeNum){
} else if (data.whetherSetSignIn === 'YES' && !data.signInTimeNum) {
message.warning('请输入签到时间');
resolve(false);
} else if(data.whetherSetSignOut === 'YES' && ((data.signOutType === 'START_LATER' && !data.signOutStartTimeNum) || !data.signOutEndTimeNum)){
} else if (data.whetherSetSignOut === 'YES' && ((data.signOutType === 'START_LATER' && !data.signOutStartTimeNum) || !data.signOutEndTimeNum)) {
message.warning('请输入签退时间');
resolve(false);
} else if (data.isMore) {
......@@ -579,7 +565,7 @@ class AddOfflineCourse extends React.Component {
resolve(true);
}
});
}
};
// 使用默认封面图
handleResetCoverUrl = () => {
......@@ -589,41 +575,46 @@ class AddOfflineCourse extends React.Component {
if (isDefaultCover) return;
message.success('已替换为默认图');
this.setState({ coverUrl: defaultCoverUrl });
}
};
// 滑动加载更多讲师列表
handleScrollTeacherList = (e) => {
const { hasNext } = this.state;
const container = e.target;
const { hasNext } = this.state;
const container = e.target;
//判定元素是否滚动到底部
const scrollToBottom = container && container.scrollHeight <= container.clientHeight + container.scrollTop;
if (scrollToBottom && hasNext) {
const { teacherQuery } = this.state;
let _teacherQuery = teacherQuery;
_teacherQuery.current = _teacherQuery.current + 1
this.setState({
teacherQuery:{..._teacherQuery}
},()=>{this.getTeacherList(_teacherQuery.current)})
}
}
getTeacherList(current = 1, selectList){
const { teacherQuery,teacherList} = this.state;
//判定元素是否滚动到底部
const scrollToBottom = container && container.scrollHeight <= container.clientHeight + container.scrollTop;
if (scrollToBottom && hasNext) {
const { teacherQuery } = this.state;
let _teacherQuery = teacherQuery;
_teacherQuery.current = _teacherQuery.current + 1;
this.setState(
{
teacherQuery: { ..._teacherQuery },
},
() => {
this.getTeacherList(_teacherQuery.current);
}
);
}
};
getTeacherList(current = 1, selectList) {
const { teacherQuery, teacherList } = this.state;
const _query = {
...teacherQuery,
current,
size:15
size: 15,
};
StoreService.getStoreUserBasicPage( _query).then((res) => {
const { result = {} } = res;
const { records = [], total = 0, hasNext } = result;
const list = current > 1 ? teacherList.concat(records) : records;
this.setState({
hasNext,
teacherList: list,
teacherQuery:{..._query}
})
StoreService.getStoreUserBasicPage(_query).then((res) => {
const { result = {} } = res;
const { records = [], hasNext } = result;
const list = current > 1 ? teacherList.concat(records) : records;
this.setState({
hasNext,
teacherList: list,
teacherQuery: { ..._query },
});
});
}
......@@ -633,14 +624,14 @@ class AddOfflineCourse extends React.Component {
message.warning('内容过长，不能超过1000字');
}
this.setState({ introduce: value, isMore });
}
};
selectMultiDate = (calendarTime) => {
const dateList = _.sortBy(calendarTime);
this.setState({
calendarTime: dateList,
})
}
});
};
handleChangeDates = (dates) => {
const data = {};
......@@ -652,15 +643,15 @@ class AddOfflineCourse extends React.Component {
data.endTimeApply = dates[1].startOf('minute').valueOf() + 59000;
}
this.setState(data);
}
};
whetherVisitorsJoinChange = ()=>{
if(this.state.whetherVisitorsJoin === "NO"){
whetherVisitorsJoinChange = () => {
if (this.state.whetherVisitorsJoin === 'NO') {
this.setState({ whetherVisitorsJoin: 'YES' });
}else{
} else {
this.setState({ whetherVisitorsJoin: 'NO' });
}
}
};
handleChangeCatalogList = (value, label) => {
this.setState({ categoryId: value, categoryName: label[0] });
......@@ -674,14 +665,11 @@ class AddOfflineCourse extends React.Component {
coverUrl,
introduce,
categoryId,
categoryList,
courseCatalogList,
whetherVisitorsJoin,
loadintroduce,
showSelectCoverModal,
visible,
hasImgReady,
cutImageBlob,
teacherId,
teacherList,
calendarTime,
......@@ -709,64 +697,66 @@ class AddOfflineCourse extends React.Component {
} = this.state;
const isDefaultCover = coverUrl === defaultCoverUrl;
return (
<div className="page add-offline-course-page">
<Breadcrumbs
navList={pageType === "add" ? "新建线下课" : "编辑线下课"}
goBack={this.handleGoBack}
/>
<div className='page add-offline-course-page'>
<Breadcrumbs navList={pageType === 'add' ? '新建线下课' : '编辑线下课'} goBack={this.handleGoBack} />
<div className="box">
<div className="show-tips">
<ShowTips message="请遵守国家相关规定，切勿上传低俗色情、暴力恐怖、谣言诈骗、侵权盗版等相关内容，小麦企学院保有依据国家规定及平台规则进行处理的权利" />
<div className='box'>
<div className='show-tips'>
<ShowTips message='请遵守国家相关规定，切勿上传低俗色情、暴力恐怖、谣言诈骗、侵权盗版等相关内容，小麦企学院保有依据国家规定及平台规则进行处理的权利' />
</div>
<div className="form">
<div className="basic-info__wrap">
<div className="title">基本信息</div>
<div className="course-name">
<span className="label"><span className="require">*</span>课程名称：</span>
<div className='form'>
<div className='basic-info__wrap'>
<div className='title'>基本信息</div>
<div className='course-name'>
<span className='label'>
<span className='require'>*</span>课程名称：
</span>
<Input
value={courseName}
placeholder="请输入线下课的名称（40字以内）"
placeholder='请输入线下课的名称（40字以内）'
maxLength={40}
style={{ width: 240 }}
onChange={(e) => { this.setState({ courseName: e.target.value }) }}
onChange={(e) => {
this.setState({ courseName: e.target.value });
}}
/>
</div>
<div className="course-cover">
<span className="label">封面图：</span>
<div className='course-cover'>
<span className='label'>封面图：</span>
<div className="course-cover__wrap">
<div className="img-content">
{
isDefaultCover && <span className="tag">默认图</span>
}
<img src={coverUrl} />
<div className='course-cover__wrap'>
<div className='img-content'>
{isDefaultCover && <span className='tag'>默认图</span>}
<img src={coverUrl} alt='' />
</div>
<div className="opt-btns">
<Button onClick={() => {
this.setState({
showSelectCoverModal: true
})
}}>上传图片</Button>
<span
className={`default-btn ${isDefaultCover ? 'disabled' : ''}`}
onClick={this.handleResetCoverUrl}
>使用默认图</span>
<div className="tips">建议尺寸1280*720px，图片支持jpg、jpeg、png格式。</div>
<div className='opt-btns'>
<Button
onClick={() => {
this.setState({
showSelectCoverModal: true,
});
}}>
上传图片
</Button>
<span className={`default-btn ${isDefaultCover ? 'disabled' : ''}`} onClick={this.handleResetCoverUrl}>
使用默认图
</span>
<div className='tips'>建议尺寸1280*720px，图片支持jpg、jpeg、png格式。</div>
</div>
</div>
</div>
<div className="course-catalog">
<span className="label special"><span className="require">*</span>课程分类：</span>
<div className='course-catalog'>
<span className='label special'>
<span className='require'>*</span>课程分类：
</span>
<TreeSelect
showSearch
treeNodeFilterProp="title"
treeNodeFilterProp='title'
style={{ width: 240 }}
dropdownStyle={{ maxHeight: 300, overflow: "auto" }}
dropdownStyle={{ maxHeight: 300, overflow: 'auto' }}
treeData={courseCatalogList}
placeholder="请选择课程类型"
placeholder='请选择课程类型'
allowClear
value={categoryId}
treeDefaultExpandAll
......@@ -775,184 +765,189 @@ class AddOfflineCourse extends React.Component {
}}
/>
</div>
<div className="course-catalog">
<span className="label special"><span className="require">*</span>上课地点：</span>
<div className='course-catalog'>
<span className='label special'>
<span className='require'>*</span>上课地点：
</span>
<Input
value={offlinePlace}
maxLength={40}
style={{ width: 240 }}
placeholder="请输入上课地点（40字以内）"
placeholder='请输入上课地点（40字以内）'
onChange={(e) => {
this.setState({ offlinePlace: e.target.value })
this.setState({ offlinePlace: e.target.value });
}}
/>
</div>
<div className="course-catalog" id="teacher">
<span className="label special"><span className="require">* </span>讲师：</span>
<div className='course-catalog' id='teacher'>
<span className='label special'>
<span className='require'>* </span>讲师：
</span>
<Select
placeholder="请选择讲师"
placeholder='请选择讲师'
value={teacherId}
style={{ width: 240 }}
showSearch
allowClear
filterOption={(input, option) => option}
dropdownClassName="offline-dropdown-box"
dropdownClassName='offline-dropdown-box'
onPopupScroll={this.handleScrollTeacherList}
suffixIcon={<span className="icon iconfont" style={{fontSize:'12px',color:'#BFBFBF'}}>&#xe835;</span>}
suffixIcon={
<span className='icon iconfont' style={{ fontSize: '12px', color: '#BFBFBF' }}>
&#xe835;
</span>
}
onChange={(value, option) => {
if (option) {
this.setState({ teacherId: value, teacherName: option.children });
}else{
this.setState({ teacherId: value, teacherName: "" });
} else {
this.setState({ teacherId: value, teacherName: '' });
}
}}
onSearch={(value) => {
let _teacherQuery = {...this.state.teacherQuery};
_teacherQuery.nickName = value
this.setState({
teacherQuery: _teacherQuery
}, () => {
this.getTeacherList()
})
let _teacherQuery = { ...this.state.teacherQuery };
_teacherQuery.nickName = value;
this.setState(
{
teacherQuery: _teacherQuery,
},
() => {
this.getTeacherList();
}
);
}}
onClear ={(value)=>{
this.setState({
teacherQuery:{
size: 15,
current: 1,
nickName:null
onClear={(value) => {
this.setState(
{
teacherQuery: {
size: 15,
current: 1,
nickName: null,
},
},
() => {
this.getTeacherList();
}
}, () => {
this.getTeacherList()
})
}
}
getPopupContainer={() =>
document.getElementById("teacher")
}
>
{_.map(teacherList, (item, index) => {
);
}}
getPopupContainer={() => document.getElementById('teacher')}>
{_.map(teacherList, (item) => {
return (
<Option value={item.id} key={item.id}>{item.nickName}</Option>
<Option value={item.id} key={item.id}>
{item.nickName}
</Option>
);
})}
</Select>
</div>
<div className="allow-tourist-join">
<span className="label">观看设置：</span>
<div className="content">
<div className='allow-tourist-join'>
<span className='label'>观看设置：</span>
<div className='content'>
<div>
<Switch
checked={whetherVisitorsJoin === "YES" ? true : false}
onChange={this.whetherVisitorsJoinChange}
/>
</div>
<Switch checked={whetherVisitorsJoin === 'YES' ? true : false} onChange={this.whetherVisitorsJoinChange} />
</div>
<div>
<div className="desc">
<div className='desc'>
<div>开启：允许未绑定手机号的学员观看</div>
<div>关闭：仅限绑定了手机号的学员可以进入观看线下课</div>
</div>
</div>
</div>
</div>
</div>
<div className="introduce">
<span className="label">课程简介：</span>
<div className="content">
<div className="intro-list">
<div className="intro-list__item introduce-editor">
{(!courseId || loadintroduce) &&
<div className='introduce'>
<span className='label'>课程简介：</span>
<div className='content'>
<div className='intro-list'>
<div className='intro-list__item introduce-editor'>
{(!courseId || loadintroduce) && (
<GraphicsEditor
id="intro"
id='intro'
isIntro={true}
maxLimit={1000}
detail={{
content: introduce
content: introduce,
}}
onChange={(val, textLength) => {
this.changeIntro(val, textLength)
this.changeIntro(val, textLength);
}}
/>
}
)}
</div>
</div>
</div>
</div>
<div className="title" style={{ marginTop: 24 }}>课程设置</div>
<div className="day">
<span className="label">
<span className="require">*</span>
上课日期：
</span>
<div className='title' style={{ marginTop: 24 }}>
课程设置
</div>
<div className='day'>
<span className='label'>
<span className='require'>*</span>
上课日期：
</span>
<div>
<div className='select-day'>
已选 <span className="mark-day">{isLongArr(calendarTime) ? calendarTime.length : 0}</span> 天
已选 <span className='mark-day'>{window.isLongArr(calendarTime) ? calendarTime.length : 0}</span> 天
</div>
<MultipleDatePicker
disabled={isEditDisablie}
selectDateList={calendarTime}
onSelect={this.selectMultiDate}
canSelectTodayBefore={false}
/>
<MultipleDatePicker disabled={isEditDisablie} selectDateList={calendarTime} onSelect={this.selectMultiDate} canSelectTodayBefore={false} />
</div>
</div>
<div className="hour" id="hour">
<span className="label"><span className="require">*</span>上课时间：</span>
<div className='hour' id='hour'>
<span className='label'>
<span className='require'>*</span>上课时间：
</span>
<TimePicker
disabled={isEditDisablie}
className="time-picker"
format="HH:mm"
className='time-picker'
format='HH:mm'
value={startTime ? moment(startTime) : null}
placeholder="开始时间"
placeholder='开始时间'
showNow={false}
style={{ width: 100, minWidth: 100}}
style={{ width: 100, minWidth: 100 }}
onSelect={(time) => {
this.setState({ startTime: time });
}}
getPopupContainer={() =>
document.getElementById("hour")
}
/>&nbsp;&nbsp;~&nbsp;&nbsp;
getPopupContainer={() => document.getElementById('hour')}
/>
&nbsp;&nbsp;~&nbsp;&nbsp;
<TimePicker
disabled={isEditDisablie}
className="time-picker"
format="HH:mm"
className='time-picker'
format='HH:mm'
value={endTime ? moment(endTime) : null}
placeholder="结束时间"
placeholder='结束时间'
showNow={false}
style={{ width: 100, minWidth: 100 }}
onSelect={(time) => {
this.setState({ endTime: time });
}}
getPopupContainer={() =>
document.getElementById("hour")
}
getPopupContainer={() => document.getElementById('hour')}
/>
</div>
<div className="course-catalog">
<span className="label"><span className="require">* </span>学员上课方式：</span>
<div className='course-catalog'>
<span className='label'>
<span className='require'>* </span>学员上课方式：
</span>
<Radio.Group
style={{ display: 'inline-block' }}
value={offlineCourseType}
onChange={(e) => {
this.setState({ offlineCourseType: e.target.value });
}}
className="mt5"
disabled={isEditDisablie}
>
<Radio value="ALL_DAY_OFFLINE" className="mr-16">
<span style={{ color: "#333" }}>所选日期都要上课</span>
className='mt5'
disabled={isEditDisablie}>
<Radio value='ALL_DAY_OFFLINE' className='mr-16'>
<span style={{ color: '#333' }}>所选日期都要上课</span>
</Radio>
<Radio value="ANY_DAY_POFFLINE" className="mr-16">
<span style={{ color: "#333" }}>选择任意1天上课</span>
<Radio value='ANY_DAY_POFFLINE' className='mr-16'>
<span style={{ color: '#333' }}>选择任意1天上课</span>
</Radio>
</Radio.Group>
</div>
<div className="course-catalog">
<span className="label">课程报名：</span>
<div className="switch-box">
<div className="switch-item" key="1">
<div className='course-catalog'>
<span className='label'>课程报名：</span>
<div className='switch-box'>
<div className='switch-item' key='1'>
<Switch
disabled={isEditDisablie}
checked={whetherSetApply === 'YES'}
......@@ -965,79 +960,118 @@ class AddOfflineCourse extends React.Component {
});
}}
/>
<span className="switch-tip">开启后可设置课程报名时间，获取报名数据</span>
<span className='switch-tip'>开启后可设置课程报名时间，获取报名数据</span>
</div>
{whetherSetApply === 'YES' && <div className="switch-item" key="2">
<span className="switch-label">报名日期：</span>
<RangePicker
id="course_date_picker"
showTime={{ showTime: 'HH:mm' }}
allowClear={false}
value={startTimeApply ? [moment(startTimeApply), moment(endTimeApply)] : null }
format={"YYYY-MM-DD HH:mm"}
onChange={(dates) => { this.handleChangeDates(dates) }}
renderExtraFooter={() => calendarTime[0] ? <div style={{ position: 'absolute', bottom: 8, cursor: 'pointer' }}>
<span
onClick={() => this.setState({ startTimeApply: moment(`${moment(calendarTime[0]).format('YYYY-MM-DD')} ${moment(startTime).format('HH:mm')}`).subtract(1, 'days').valueOf(), endTimeApply: moment(`${moment(calendarTime[0]).format('YYYY-MM-DD')} ${moment(startTime).format('HH:mm')}`).valueOf() - 1000 })}
style={{
color: '#2966FF',
border: '1px solid #2966FF',
padding: '2px 8px',
borderRadius: '2px',
marginRight: 8,
}}
>上课前1天</span>
<span
onClick={() => this.setState({ startTimeApply: moment(`${moment(calendarTime[0]).format('YYYY-MM-DD')} ${moment(startTime).format('HH:mm')}`).subtract(2, 'days').valueOf(), endTimeApply: moment(`${moment(calendarTime[0]).format('YYYY-MM-DD')} ${moment(startTime).format('HH:mm')}`).valueOf() - 1000 })}
style={{
color: '#2966FF',
border: '1px solid #2966FF',
padding: '2px 8px',
borderRadius: '2px',
marginRight: 8,
}}
>上课前2天</span>
<span
onClick={() => this.setState({ startTimeApply: moment(`${moment(calendarTime[0]).format('YYYY-MM-DD')} ${moment(startTime).format('HH:mm')}`).subtract(3, 'days').valueOf(), endTimeApply: moment(`${moment(calendarTime[0]).format('YYYY-MM-DD')} ${moment(startTime).format('HH:mm')}`).valueOf() - 1000 })}
style={{
color: '#2966FF',
border: '1px solid #2966FF',
padding: '2px 8px',
borderRadius: '2px',
marginRight: 8,
}}
>上课前3天</span>
</div> : null}
/>
</div>}
{whetherSetApply === 'YES' && <div className="switch-item" key="3">
<span className="switch-label">
报名人数
<Tooltip title="报名一旦开始，报名人数不支持减少">
<span style={{ margin: '0 4px', color: '#999' }} className="icon iconfont">&#xe7c4;</span>
</Tooltip>
：最多
</span>
<InputNumber
value={quota}
min={oldQuta || 1}
max={100000}
precision={0}
style={{ margin: '0 4px', width: 90 }}
disabled={oldQuta < 0}
onChange={(value) => {
this.setState({ quota: value })
}}
/>
<span className="switch-label">人</span>
<span className="switch-tip">未填写时默认为不限制</span>
</div>}
{whetherSetApply === 'YES' && (
<div className='switch-item' key='2'>
<span className='switch-label'>报名日期：</span>
<RangePicker
id='course_date_picker'
showTime={{ showTime: 'HH:mm' }}
allowClear={false}
value={startTimeApply ? [moment(startTimeApply), moment(endTimeApply)] : null}
format={'YYYY-MM-DD HH:mm'}
onChange={(dates) => {
this.handleChangeDates(dates);
}}
renderExtraFooter={() => (
<If condition={calendarTime[0]}>
<div style={{ position: 'absolute', bottom: 8, cursor: 'pointer' }}>
<span
onClick={() =>
this.setState({
startTimeApply: moment(`${moment(calendarTime[0]).format('YYYY-MM-DD')} ${moment(startTime).format('HH:mm')}`)
.subtract(1, 'days')
.valueOf(),
endTimeApply:
moment(`${moment(calendarTime[0]).format('YYYY-MM-DD')} ${moment(startTime).format('HH:mm')}`).valueOf() - 1000,
})
}
style={{
color: '#2966FF',
border: '1px solid #2966FF',
padding: '2px 8px',
borderRadius: '2px',
marginRight: 8,
}}>
上课前1天
</span>
<span
onClick={() =>
this.setState({
startTimeApply: moment(`${moment(calendarTime[0]).format('YYYY-MM-DD')} ${moment(startTime).format('HH:mm')}`)
.subtract(2, 'days')
.valueOf(),
endTimeApply:
moment(`${moment(calendarTime[0]).format('YYYY-MM-DD')} ${moment(startTime).format('HH:mm')}`).valueOf() - 1000,
})
}
style={{
color: '#2966FF',
border: '1px solid #2966FF',
padding: '2px 8px',
borderRadius: '2px',
marginRight: 8,
}}>
上课前2天
</span>
<span
onClick={() =>
this.setState({
startTimeApply: moment(`${moment(calendarTime[0]).format('YYYY-MM-DD')} ${moment(startTime).format('HH:mm')}`)
.subtract(3, 'days')
.valueOf(),
endTimeApply:
moment(`${moment(calendarTime[0]).format('YYYY-MM-DD')} ${moment(startTime).format('HH:mm')}`).valueOf() - 1000,
})
}
style={{
color: '#2966FF',
border: '1px solid #2966FF',
padding: '2px 8px',
borderRadius: '2px',
marginRight: 8,
}}>
上课前3天
</span>
</div>
</If>
)}
/>
</div>
)}
{whetherSetApply === 'YES' && (
<div className='switch-item' key='3'>
<span className='switch-label'>
报名人数
<Tooltip title='报名一旦开始，报名人数不支持减少'>
<span style={{ margin: '0 4px', color: '#999' }} className='icon iconfont'>
&#xe7c4;
</span>
</Tooltip>
：最多
</span>
<InputNumber
value={quota}
min={oldQuta || 1}
max={100000}
precision={0}
style={{ margin: '0 4px', width: 90 }}
disabled={oldQuta < 0}
onChange={(value) => {
this.setState({ quota: value });
}}
/>
<span className='switch-label'>人</span>
<span className='switch-tip'>未填写时默认为不限制</span>
</div>
)}
</div>
</div>
<div className="course-catalog">
<span className="label">考勤签到：</span>
<div className="switch-box">
<div className="switch-item" key="1">
<div className='course-catalog'>
<span className='label'>考勤签到：</span>
<div className='switch-box'>
<div className='switch-item' key='1'>
<Switch
checked={whetherSetSignIn === 'YES'}
onChange={(value) => {
......@@ -1046,64 +1080,68 @@ class AddOfflineCourse extends React.Component {
signInType: 'START_AGO',
signInTimeNum: null,
signInTimeUnit: 'MINUTE',
})
});
}}
/>
<span className="switch-tip">开启后可设置获取签到考勤数据</span>
<span className='switch-tip'>开启后可设置获取签到考勤数据</span>
</div>
{whetherSetSignIn === 'YES' && <div className="switch-item" key="2">
<span className="switch-label">签到时间：</span>
<Radio.Group
style={{ display: 'inline-block' }}
value={signInType}
onChange={(e) => {
this.setState({ signInType: e.target.value });
}}
className="mt5"
>
<Radio value="START_AGO" className="mr-16">
<span style={{ color: "#333" }}>课程开始前</span>
</Radio>
<Radio value="END_AGO" className="mr-16">
<span style={{ color: "#333" }}>课程结束前</span>
</Radio>
</Radio.Group>
</div>}
{whetherSetSignIn === 'YES' && <div className="switch-item" key="3">
<span className="switch-label">课程{signInType === 'START_AGO' ? '开始' : '结束'}前</span>
<InputNumber
value={signInTimeNum}
min={1}
max={signInTimeUnit === 'MINUTE' ? 1440 : 24}
precision={0}
style={{ margin: '0 4px', width: 90 }}
onChange={(value) => {
this.setState({ signInTimeNum: value })
}}
/>
<Select
style={{ width: 72, marginRight: 4 }}
value={signInTimeUnit}
onChange={(value) => {
const data = { signInTimeUnit: value }
if (value === 'HOUR' && signInTimeNum > 24) {
data.signInTimeNum = 24;
}
this.setState(data);
}}
>
{unitList.map(item => (
<Option value={item.key} key={item.key}>{item.value}</Option>
))}
</Select>
<span className="switch-label">内可签到</span>
</div>}
{whetherSetSignIn === 'YES' && (
<div className='switch-item' key='2'>
<span className='switch-label'>签到时间：</span>
<Radio.Group
style={{ display: 'inline-block' }}
value={signInType}
onChange={(e) => {
this.setState({ signInType: e.target.value });
}}
className='mt5'>
<Radio value='START_AGO' className='mr-16'>
<span style={{ color: '#333' }}>课程开始前</span>
</Radio>
<Radio value='END_AGO' className='mr-16'>
<span style={{ color: '#333' }}>课程结束前</span>
</Radio>
</Radio.Group>
</div>
)}
{whetherSetSignIn === 'YES' && (
<div className='switch-item' key='3'>
<span className='switch-label'>课程{signInType === 'START_AGO' ? '开始' : '结束'}前</span>
<InputNumber
value={signInTimeNum}
min={1}
max={signInTimeUnit === 'MINUTE' ? 1440 : 24}
precision={0}
style={{ margin: '0 4px', width: 90 }}
onChange={(value) => {
this.setState({ signInTimeNum: value });
}}
/>
<Select
style={{ width: 72, marginRight: 4 }}
value={signInTimeUnit}
onChange={(value) => {
const data = { signInTimeUnit: value };
if (value === 'HOUR' && signInTimeNum > 24) {
data.signInTimeNum = 24;
}
this.setState(data);
}}>
{unitList.map((item) => (
<Option value={item.key} key={item.key}>
{item.value}
</Option>
))}
</Select>
<span className='switch-label'>内可签到</span>
</div>
)}
</div>
</div>
<div className="course-catalog">
<span className="label">考勤签退：</span>
<div className="switch-box">
<div className="switch-item" key="1">
<div className='course-catalog'>
<span className='label'>考勤签退：</span>
<div className='switch-box'>
<div className='switch-item' key='1'>
<Switch
checked={whetherSetSignOut === 'YES'}
onChange={(value) => {
......@@ -1114,119 +1152,135 @@ class AddOfflineCourse extends React.Component {
signOutStartTimeUnit: 'MINUTE',
signOutEndTimeNum: null,
signOutEndTimeUnit: 'MINUTE',
})
});
}}
/>
<span className="switch-tip">开启后可设置获取签退考勤数据</span>
<span className='switch-tip'>开启后可设置获取签退考勤数据</span>
</div>
{whetherSetSignOut === 'YES' && <div className="switch-item" key="2">
<span className="switch-label">签退时间：</span>
<Radio.Group
style={{ display: 'inline-block' }}
value={signOutType}
onChange={(e) => {
this.setState({ signOutType: e.target.value });
}}
className="mt5"
>
<Radio value="START_LATER" className="mr-16">
<span style={{ color: "#333" }}>课程开始后</span>
</Radio>
<Radio value="END_LATER" className="mr-16">
<span style={{ color: "#333" }}>课程结束后</span>
</Radio>
</Radio.Group>
</div>}
{whetherSetSignOut === 'YES' && <div className="switch-item" key="3">
<span className="switch-label">课程{signOutType === 'START_LATER' ? '开始' : '结束'}后</span>
{signOutType === 'START_LATER' && <InputNumber
value={signOutStartTimeNum}
min={1}
max={signOutStartTimeUnit === 'MINUTE' ? 1440 : 24}
precision={0}
style={{ margin: '0 4px', width: 90 }}
onChange={(value) => {
this.setState({ signOutStartTimeNum: value })
}}
/>}
{signOutType === 'START_LATER' && <Select
style={{ width: 72, marginRight: 4 }}
value={signOutStartTimeUnit}
onChange={(value) => {
const data = { signOutStartTimeUnit: value }
if (value === 'HOUR' && signOutStartTimeNum > 24) {
data.signOutStartTimeNum = 24;
}
this.setState(data);
}}
>
{unitList.map(item => (
<Option value={item.key} key={item.key}>{item.value}</Option>
))}
</Select>}
{signOutType === 'START_LATER' && <span className="switch-label">就可签退，截止签退时间为下课后</span>}
<InputNumber
value={signOutEndTimeNum}
min={1}
max={signOutEndTimeUnit === 'MINUTE' ? 1440 : 24}
precision={0}
style={{ margin: '0 4px', width: 90 }}
onChange={(value) => {
this.setState({ signOutEndTimeNum: value })
}}
/>
<Select
style={{ width: 72, marginRight: 4 }}
value={signOutEndTimeUnit}
onChange={(value) => {
const data = { signOutEndTimeUnit: value }
if (value === 'HOUR' && signOutEndTimeNum > 24) {
data.signOutEndTimeNum = 24;
}
this.setState(data);
}}
>
{unitList.map(item => (
<Option value={item.key} key={item.key}>{item.value}</Option>
))}
</Select>
{signOutType !== 'START_LATER' &&
<span className="switch-label">内可签退</span>
}
</div>}
{whetherSetSignOut === 'YES' && (
<div className='switch-item' key='2'>
<span className='switch-label'>签退时间：</span>
<Radio.Group
style={{ display: 'inline-block' }}
value={signOutType}
onChange={(e) => {
this.setState({ signOutType: e.target.value });
}}
className='mt5'>
<Radio value='START_LATER' className='mr-16'>
<span style={{ color: '#333' }}>课程开始后</span>
</Radio>
<Radio value='END_LATER' className='mr-16'>
<span style={{ color: '#333' }}>课程结束后</span>
</Radio>
</Radio.Group>
</div>
)}
{whetherSetSignOut === 'YES' && (
<div className='switch-item' key='3'>
<span className='switch-label'>课程{signOutType === 'START_LATER' ? '开始' : '结束'}后</span>
{signOutType === 'START_LATER' && (
<InputNumber
value={signOutStartTimeNum}
min={1}
max={signOutStartTimeUnit === 'MINUTE' ? 1440 : 24}
precision={0}
style={{ margin: '0 4px', width: 90 }}
onChange={(value) => {
this.setState({ signOutStartTimeNum: value });
}}
/>
)}
{signOutType === 'START_LATER' && (
<Select
style={{ width: 72, marginRight: 4 }}
value={signOutStartTimeUnit}
onChange={(value) => {
const data = { signOutStartTimeUnit: value };
if (value === 'HOUR' && signOutStartTimeNum > 24) {
data.signOutStartTimeNum = 24;
}
this.setState(data);
}}>
{unitList.map((item) => (
<Option value={item.key} key={item.key}>
{item.value}
</Option>
))}
</Select>
)}
{signOutType === 'START_LATER' && <span className='switch-label'>就可签退，截止签退时间为下课后</span>}
<InputNumber
value={signOutEndTimeNum}
min={1}
max={signOutEndTimeUnit === 'MINUTE' ? 1440 : 24}
precision={0}
style={{ margin: '0 4px', width: 90 }}
onChange={(value) => {
this.setState({ signOutEndTimeNum: value });
}}
/>
<Select
style={{ width: 72, marginRight: 4 }}
value={signOutEndTimeUnit}
onChange={(value) => {
const data = { signOutEndTimeUnit: value };
if (value === 'HOUR' && signOutEndTimeNum > 24) {
data.signOutEndTimeNum = 24;
}
this.setState(data);
}}>
{unitList.map((item) => (
<Option value={item.key} key={item.key}>
{item.value}
</Option>
))}
</Select>
{signOutType !== 'START_LATER' && <span className='switch-label'>内可签退</span>}
</div>
)}
</div>
</div>
</div>
</div>
</div>
<div className="footer">
<div className='footer'>
<Button onClick={this.handleGoBack}>取消</Button>
<Button onClick={this.handleShowPreviewModal}>预览</Button>
<Button type="primary" onClick={_.debounce(() => this.preSubmit(), 3000, true)}>保存</Button>
<Button type='primary' onClick={_.debounce(() => this.preSubmit(), 3000, true)}>
保存
</Button>
</div>
{showSelectCoverModal &&
{showSelectCoverModal && (
<SelectPrepareFileModal
key="basic"
operateType="select"
key='basic'
operateType='select'
multiple={false}
accept="image/jpeg,image/png,image/jpg"
accept='image/jpeg,image/png,image/jpg'
selectTypeList={['JPG', 'JPEG', 'PNG']}
tooltip='支持文件类型：jpg、jpeg、png'
isOpen={showSelectCoverModal}
onClose={() => {
this.setState({ showSelectCoverModal: false })
this.setState({ showSelectCoverModal: false });
}}
onSelect={this.handleSelectCover}
/>
}
{ visible &&
<ImgClipModal visible={visible} imgUrl={imageFile.ossUrl} onConfirm={this.getSignature} onClose={()=>{this.setState({ visible: false });}}/>
}
{ this.state.previewOfflineModal }
)}
{visible && (
<ImgClipModal
visible={visible}
imgUrl={imageFile.ossUrl}
onConfirm={this.getSignature}
onClose={() => {
this.setState({ visible: false });
}}
/>
)}
{this.state.previewOfflineModal}
</div>
)
);
}
}
......
src/modules/course-manage/offline-course/components/AddGraphicsIntro.jsx
/*
* @Author: 吴文洁
* @Date: 2020-07-16 11:05:17
* @Author: 吴文洁
* @Date: 2020-07-16 11:05:17
* @Last Modified by: chenshu
* @Last Modified time: 2021-04-06 16:17:57
* @Description: 添加直播-简介
*/
import SelectPrepareFileModal from '@/modules/prepare-lesson/modal/SelectPrepareFileModal';
import { Col, message, Row, Switch } from 'antd';
import React from 'react';
import { Input, message, Upload, Radio, Row, Col, Button, Popover, Switch } from 'antd';
import Service from '@/common/js/service';
import GraphicsEditor from '../../components/GraphicsEditor';
import User from '@/common/js/user';
import UploadOss from '@/core/upload';
import './AddGraphicsIntro.less';
import SelectPrepareFileModal from '@/modules/prepare-lesson/modal/SelectPrepareFileModal';
import { DISK_MAP } from '@/common/constants/academic/lessonEnum';
import { ImgCutModalNew } from '@/components';
const { TextArea } = Input;
class AddGraphicsIntro extends React.Component {
constructor(props) {
super(props);
this.state = {
showSelectFileModal: false,
diskList: [],
selectType: null,
}
};
}
// 上传封面图
handleShowImgCutModal = (event) => {
const imageFile = event.target.files[0];
if (!imageFile) return;
if (!imageFile) return;
this.setState({
imageFile,
showCutModal: true,
});
}
};
// 选择暖场资源
handleSelectVideo = (file) => {
const { selectType } = this.state;
// 选择暖场资源
handleSelectVideo = (file) => {
const { selectType } = this.state;
this.setState({
showSelectFileModal: false
})
showSelectFileModal: false,
});
const { ossUrl, resourceId, folderName, folderFormat, folderSize } = file;
if(selectType === 'WARMUP'){
if (selectType === 'WARMUP') {
const liveCourseWarmMedia = {
contentType: 'WARMUP',
mediaType: folderFormat === 'MP4' ? 'VIDEO' : 'PICTURE',
mediaContent: resourceId,
mediaUrl: ossUrl,
mediaName: folderName,
size: folderSize
}
size: folderSize,
};
this.props.onChange('liveCourseWarmMedia', liveCourseWarmMedia);
}else{
} else {
// 最多添加九图片
const { liveCourseMediaRequests } = this.props.data;
const list = _.filter(liveCourseMediaRequests, (item) => {
return item.mediaType == "PICTURE";
return item.mediaType == 'PICTURE';
});
if (list.length > 8) {
message.warning("最多添加9张图片");
message.warning('最多添加9张图片');
return;
}
liveCourseMediaRequests.push({
......@@ -78,121 +70,128 @@ class AddGraphicsIntro extends React.Component {
});
this.props.onChange('liveCourseMediaRequests', liveCourseMediaRequests);
}
}
};
changeDetail = (value) => {
this.props.onChange('courseMedia', value);
}
};
changeIntro = (value) => {
this.props.onChange('introduce', value);
}
};
whetherVisitorsJoinChange = ()=>{
if(this.props.data.whetherVisitorsJoin==="NO"){
this.props.onChange('whetherVisitorsJoin','YES')
}else{
this.props.onChange('whetherVisitorsJoin','NO')
whetherVisitorsJoinChange = () => {
if (this.props.data.whetherVisitorsJoin === 'NO') {
this.props.onChange('whetherVisitorsJoin', 'YES');
} else {
this.props.onChange('whetherVisitorsJoin', 'NO');
}
}
};
shelfStateChange = ()=>{
if(this.props.data.shelfState==="NO"){
this.props.onChange('shelfState','YES')
}else{
this.props.onChange('shelfState','NO')
shelfStateChange = () => {
if (this.props.data.shelfState === 'NO') {
this.props.onChange('shelfState', 'YES');
} else {
this.props.onChange('shelfState', 'NO');
}
}
};
render() {
const {data: { id, whetherVisitorsJoin, courseMedia, introduce, shelfState, loadcourseMedia, loadintroduce } } = this.props;
const {
data: { id, whetherVisitorsJoin, courseMedia, introduce, shelfState, loadcourseMedia, loadintroduce },
} = this.props;
const { showSelectFileModal, selectType } = this.state;
return (
<div className="add-video__intro-info">
<div className="allow-tourist-join">
<span className="label">观看设置：</span>
<div className="content">
<div className='add-video__intro-info'>
<div className='allow-tourist-join'>
<span className='label'>观看设置：</span>
<div className='content'>
<div>
<Switch checked={whetherVisitorsJoin==="YES"? true:false} onChange={this.whetherVisitorsJoinChange}/>
</div>
<Switch checked={whetherVisitorsJoin === 'YES' ? true : false} onChange={this.whetherVisitorsJoinChange} />
</div>
<div>
<div className="desc">
<div className='desc'>
<div>开启：允许未绑定手机号的学员观看</div>
<div>关闭：仅限绑定了手机号的学员可以进入观看图文课</div>
</div>
</div>
</div>
</div>
</div>
<div className="store-show">
<span className="label">学院展示：</span>
<div className="content">
<Row>
<Col span={3}>
<Switch checked={shelfState==="YES"? true:false} onChange={this.shelfStateChange}/>
</Col>
<Col span={21}>
<div className="desc">
<div>开启：图文课将在学员学院图文课列表中展示</div>
<div>关闭：图文课将在学员学院图文课列表中隐藏</div>
</div>
</Col>
</Row>
<div className='store-show'>
<span className='label'>学院展示：</span>
<div className='content'>
<Row>
<Col span={3}>
<Switch checked={shelfState === 'YES' ? true : false} onChange={this.shelfStateChange} />
</Col>
<Col span={21}>
<div className='desc'>
<div>开启：图文课将在学员学院图文课列表中展示</div>
<div>关闭：图文课将在学员学院图文课列表中隐藏</div>
</div>
</Col>
</Row>
</div>
</div>
<div className="introduce required">
<span className="label" style={{ marginTop: 5 }}>课程内容：</span>
<div className="content">
<div className="intro-list">
<div className="intro-list__item content-editor">
{(!id || loadcourseMedia) &&
<div className='introduce required'>
<span className='label' style={{ marginTop: 5 }}>
课程内容：
</span>
<div className='content'>
<div className='intro-list'>
<div className='intro-list__item content-editor'>
{(!id || loadcourseMedia) && (
<GraphicsEditor
id="content"
id='content'
detail={{
content: courseMedia
content: courseMedia,
}}
onChange={(val) => {
this.changeDetail(val);
}}
onChange={(val) => { this.changeDetail(val) }}
/>
}
)}
</div>
</div>
</div>
</div>
<div className="introduce">
<span className="label">课程简介：</span>
<div className="content">
<div className="intro-list">
<div className="intro-list__item introduce-editor">
{(!id || loadintroduce) &&
<div className='introduce'>
<span className='label'>课程简介：</span>
<div className='content'>
<div className='intro-list'>
<div className='intro-list__item introduce-editor'>
{(!id || loadintroduce) && (
<GraphicsEditor
id="intro"
id='intro'
isIntro={true}
detail={{
content: introduce
content: introduce,
}}
onChange={(val) => {
this.changeIntro(val);
}}
onChange={(val) => { this.changeIntro(val) }}
/>
}
)}
</div>
</div>
</div>
</div>
{/* 选择暖场图文件弹窗 */}
{ showSelectFileModal &&
{showSelectFileModal && (
<SelectPrepareFileModal
operateType="select"
accept={selectType==="INTRO"?"image/jpeg,image/png,image/jpg":"video/mp4,image/jpeg,image/png,image/jpg"}
selectTypeList={ selectType==="INTRO" ? ['JPG', 'JPEG', 'PNG']: ['MP4', 'JPG', 'JPEG', 'PNG'] }
tooltip={ selectType==="INTRO"?'支持文件类型：jpg、jpeg、png':'支持文件类型：jpg、jpeg、png、mp4'}
operateType='select'
accept={selectType === 'INTRO' ? 'image/jpeg,image/png,image/jpg' : 'video/mp4,image/jpeg,image/png,image/jpg'}
selectTypeList={selectType === 'INTRO' ? ['JPG', 'JPEG', 'PNG'] : ['MP4', 'JPG', 'JPEG', 'PNG']}
tooltip={selectType === 'INTRO' ? '支持文件类型：jpg、jpeg、png' : '支持文件类型：jpg、jpeg、png、mp4'}
isOpen={showSelectFileModal}
onClose={() => {
this.setState({ showSelectFileModal: false })
this.setState({ showSelectFileModal: false });
}}
onSelect={this.handleSelectVideo}
/>
}
)}
</div>
)
);
}
}
......
src/modules/course-manage/offline-course/components/OfflineCourseList.jsx
......@@ -17,6 +17,7 @@ import OfflineCourseData from '@/modules/course-manage/offline-course/OfflineCou
import { Dropdown, message, Modal, Switch, Tooltip } from 'antd';
import moment from 'moment';
import React from 'react';
import { find, reduce, last } from 'underscore';
import { Route, withRouter } from 'react-router-dom';
import ENUM from '../../../knowledge-base/ENUM.js';
import PreviewOfflineModal from '../modal/PreviewOfflineModal';
......@@ -44,7 +45,7 @@ class OfflineCourseList extends React.Component {
handlePlanName = (planArray) => {
let planStr = '';
planArray.map((item, index) => {
planArray.forEach((item, index) => {
if (index < planArray.length - 1) {
planStr = planStr + item.planName + '、';
} else {
......@@ -64,13 +65,13 @@ class OfflineCourseList extends React.Component {
fixed: 'left',
render: (val, record) => {
const { courseMediaVOS, courseName, offlinePlace, calendarTime, startTime, endTime } = record;
const coverUrl = (_.find(courseMediaVOS, (data) => data.contentType === 'COVER') || {}).mediaUrl;
const coverUrl = (find(courseMediaVOS, (data) => data.contentType === 'COVER') || {}).mediaUrl;
let isContinue = calendarTime.length > 1;
_.reduce(calendarTime, (a, b) => {
reduce(calendarTime, (a, b) => {
isContinue = isContinue && b - a === 86400000;
return b;
});
const lastTime = _.last(calendarTime);
const lastTime = last(calendarTime);
const time = `${
!isContinue
? calendarTime.map((item) => moment(item).format('MM-DD')).join('、')
......@@ -138,7 +139,9 @@ class OfflineCourseList extends React.Component {
width: 120,
dataIndex: 'courseware',
render: (val, item, index) => {
return <Switch disabled={item.courseState === 'EXPIRED'} checked={item.shelfState === 'YES'} onChange={() => this.changeShelfState(item)} />;
return (
<Switch size='small' disabled={item.courseState === 'EXPIRED'} checked={item.shelfState === 'YES'} onChange={() => this.changeShelfState(item)} />
);
},
},
{
......
src/modules/course-manage/video-course/components/AddVideoIntro.jsx
/*
* @Author: 吴文洁
* @Date: 2020-07-16 11:05:17
* @Author: 吴文洁
* @Date: 2020-07-16 11:05:17
* @Last Modified by: chenshu
* @Last Modified time: 2021-04-06 16:44:09
* @Description: 添加直播-简介
*/
import SelectPrepareFileModal from '@/modules/prepare-lesson/modal/SelectPrepareFileModal';
import { Col, message, Row, Switch } from 'antd';
import React from 'react';
import { Input, message, Upload, Radio, Row, Col, Button, Popover, Switch } from 'antd';
import Service from '@/common/js/service';
import GraphicsEditor from '../../components/GraphicsEditor';
import User from '@/common/js/user';
import UploadOss from '@/core/upload';
import { filter } from 'underscore';
import './AddVideoIntro.less';
import SelectPrepareFileModal from '@/modules/prepare-lesson/modal/SelectPrepareFileModal';
import { DISK_MAP } from '@/common/constants/academic/lessonEnum';
import { ImgCutModalNew } from '@/components';
const { TextArea } = Input;
const defaultCover = 'https://xiaomai-image.oss-cn-hangzhou.aliyuncs.com/1599635741526.png';
class AddVideoIntro extends React.Component {
constructor(props) {
super(props);
this.state = {
warmUrl: defaultCover,
showSelectFileModal: false,
diskList: [],
selectType:null
}
selectType: null,
};
}
// 上传封面图
handleShowImgCutModal = (event) => {
const imageFile = event.target.files[0];
if (!imageFile) return;
if (!imageFile) return;
this.setState({
imageFile,
showCutModal: true,
});
}
};
// 选择暖场资源
handleSelectVideo = (file) => {
const { selectType } = this.state;
// 选择暖场资源
handleSelectVideo = (file) => {
const { selectType } = this.state;
this.setState({
showSelectFileModal: false
})
showSelectFileModal: false,
});
const { ossUrl, resourceId, folderName, folderFormat, folderSize } = file;
if(selectType === 'WARMUP'){
if (selectType === 'WARMUP') {
const liveCourseWarmMedia = {
contentType: 'WARMUP',
mediaType: folderFormat === 'MP4' ? 'VIDEO' : 'PICTURE',
mediaContent: resourceId,
mediaUrl: ossUrl,
mediaName: folderName,
size: folderSize
}
size: folderSize,
};
this.props.onChange('liveCourseWarmMedia', liveCourseWarmMedia);
}else{
// 最多添加九图片
const { liveCourseMediaRequests } = this.props.data;
} else {
// 最多添加九图片
const { liveCourseMediaRequests } = this.props.data;
const list = _.filter(liveCourseMediaRequests, (item) => {
return item.mediaType == "PICTURE";
});
if (list.length > 8) {
message.warning("最多添加9张图片");
return;
}
liveCourseMediaRequests.push({
contentType: 'INTRO',
size: folderSize,
mediaName: folderName,
mediaContent: resourceId,
mediaType: 'PICTURE',
mediaUrl: ossUrl,
});
this.props.onChange('liveCourseMediaRequests', liveCourseMediaRequests);
const list = filter(liveCourseMediaRequests, (item) => {
return item.mediaType === 'PICTURE';
});
if (list.length > 8) {
message.warning('最多添加9张图片');
return;
}
liveCourseMediaRequests.push({
contentType: 'INTRO',
size: folderSize,
mediaName: folderName,
mediaContent: resourceId,
mediaType: 'PICTURE',
mediaUrl: ossUrl,
});
this.props.onChange('liveCourseMediaRequests', liveCourseMediaRequests);
}
}
};
changeIntro = (value) => {
this.props.onChange('introduce', value);
}
};
handleUpload = (Blob) => {
this.setState({
showSelectFileModal: true,
selectType:'INTRO'
})
}
whetherVisitorsJoinChange = ()=>{
if(this.props.data.whetherVisitorsJoin==="NO"){
this.props.onChange('whetherVisitorsJoin','YES')
}else{
this.props.onChange('whetherVisitorsJoin','NO')
selectType: 'INTRO',
});
};
whetherVisitorsJoinChange = () => {
if (this.props.data.whetherVisitorsJoin === 'NO') {
this.props.onChange('whetherVisitorsJoin', 'YES');
} else {
this.props.onChange('whetherVisitorsJoin', 'NO');
}
}
shelfStateChange = ()=>{
if(this.props.data.shelfState==="NO"){
this.props.onChange('shelfState','YES')
}else{
this.props.onChange('shelfState','NO')
};
shelfStateChange = () => {
if (this.props.data.shelfState === 'NO') {
this.props.onChange('shelfState', 'YES');
} else {
this.props.onChange('shelfState', 'NO');
}
}
};
render() {
const {data: { whetherVisitorsJoin,liveCourseMediaRequests = [], shelfState, id, introduce, loadintroduce } } = this.props;
const {showSelectFileModal,selectType} = this.state
const {
data: { whetherVisitorsJoin, shelfState, id, introduce, loadintroduce },
} = this.props;
const { showSelectFileModal, selectType } = this.state;
return (
<div className="add-video__intro-info">
<div className="allow-tourist-join">
<span className="label">观看设置：</span>
<div className="content">
<div className='add-video__intro-info'>
<div className='allow-tourist-join'>
<span className='label'>观看设置：</span>
<div className='content'>
<div>
<Switch checked={whetherVisitorsJoin==="YES"? true:false} onChange={this.whetherVisitorsJoinChange}/>
</div>
<Switch checked={whetherVisitorsJoin === 'YES' ? true : false} onChange={this.whetherVisitorsJoinChange} />
</div>
<div>
<div className="desc">
<div className='desc'>
<div>开启：允许未绑定手机号的学员观看</div>
<div>关闭：仅限绑定了手机号的学员可以进入观看视频</div>
</div>
</div>
</div>
</div>
</div>
<div className="store-show">
<span className="label">学院展示：</span>
<div className="content">
<Row>
<Col span={3}>
<Switch checked={shelfState==="YES"? true:false} onChange={this.shelfStateChange}/>
</Col>
<Col span={21}>
<div className="desc">
<div>开启：此视频将在学员学院的视频列表中出现</div>
<div>关闭：此视频将在学员学院的视频列表中隐藏</div>
</div>
</Col>
</Row>
<div className='store-show'>
<span className='label'>学院展示：</span>
<div className='content'>
<Row>
<Col span={3}>
<Switch checked={shelfState === 'YES' ? true : false} onChange={this.shelfStateChange} />
</Col>
<Col span={21}>
<div className='desc'>
<div>开启：此视频将在学员学院的视频列表中出现</div>
<div>关闭：此视频将在学员学院的视频列表中隐藏</div>
</div>
</Col>
</Row>
</div>
</div>
<div className="introduce">
<span className="label">视频课简介：</span>
<div className="content">
<div className="intro-list">
<div className="intro-list__item introduce-editor">
{(!id || loadintroduce) &&
<div className='introduce'>
<span className='label'>视频课简介：</span>
<div className='content'>
<div className='intro-list'>
<div className='intro-list__item introduce-editor'>
{(!id || loadintroduce) && (
<GraphicsEditor
id="intro"
id='intro'
isIntro={true}
detail={{
content: introduce
content: introduce,
}}
onChange={(val) => {
this.changeIntro(val);
}}
onChange={(val) => { this.changeIntro(val) }}
/>
}
)}
</div>
</div>
</div>
</div>
{/* 选择暖场图文件弹窗 */}
{ showSelectFileModal &&
{showSelectFileModal && (
<SelectPrepareFileModal
operateType="select"
accept={selectType==="INTRO"?"image/jpeg,image/png,image/jpg":"video/mp4,image/jpeg,image/png,image/jpg"}
selectTypeList={ selectType==="INTRO" ? ['JPG', 'JPEG', 'PNG']: ['MP4', 'JPG', 'JPEG', 'PNG'] }
tooltip={ selectType==="INTRO"?'支持文件类型：jpg、jpeg、png':'支持文件类型：jpg、jpeg、png、mp4'}
operateType='select'
accept={selectType === 'INTRO' ? 'image/jpeg,image/png,image/jpg' : 'video/mp4,image/jpeg,image/png,image/jpg'}
selectTypeList={selectType === 'INTRO' ? ['JPG', 'JPEG', 'PNG'] : ['MP4', 'JPG', 'JPEG', 'PNG']}
tooltip={selectType === 'INTRO' ? '支持文件类型：jpg、jpeg、png' : '支持文件类型：jpg、jpeg、png、mp4'}
isOpen={showSelectFileModal}
onClose={() => {
this.setState({ showSelectFileModal: false })
this.setState({ showSelectFileModal: false });
}}
onSelect={this.handleSelectVideo}
/>
}
)}
</div>
)
);
}
}
......
src/modules/course-manage/video-course/components/VideoCourseList.jsx
......@@ -159,6 +159,7 @@ class VideoCourseList extends React.Component {
render: (val, item, index) => {
return (
<Switch
size='small'
loading={ShelfLoading}
checked={item.shelfState === 'YES'}
defaultChecked={item.shelfState}
......
src/modules/plan-manage/components/BasicInfo.jsx
......@@ -7,17 +7,16 @@
* @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
*/
import React from 'react';
import { Button, Input, Switch, Radio, Row, Col, Modal, message, Tooltip } from 'antd';
import { Button, Input, Switch, Radio, Row, Col, message, Tooltip } from 'antd';
import { withRouter } from 'react-router-dom';
import SelectOperatorModal from '../modal/SelectOperatorModal';
import SelectPrepareFileModal from '@/modules/prepare-lesson/modal/SelectPrepareFileModal';
import Upload from '@/core/upload';
import ImgClipModal from '@/components/ImgClipModal'
import ImgClipModal from '@/components/ImgClipModal';
import './BasicInfo.less';
const { TextArea } = Input;
const defaultCover = 'https://image.xiaomaiketang.com/xm/rEAetaTEh3.png';
let cutFlag = false;
class BasicInfo extends React.Component {
constructor(props) {
super(props);
......@@ -74,7 +73,7 @@ class BasicInfo extends React.Component {
handleSelectCover = (file) => {
this.setState({
visible: true,
imageFile:file
imageFile: file,
});
};
//获取resourceId
......@@ -125,7 +124,7 @@ class BasicInfo extends React.Component {
};
render() {
const { operatorModalVisible, showSelectFileModal, visible, hasImgReady, cutImageBlob,imageFile} = this.state;
const { operatorModalVisible, showSelectFileModal, visible, imageFile } = this.state;
const { data } = this.props;
const { planName, coverUrl, instro, enableState, operateType, selectOperatorList, percentCompleteLive, percentCompleteVideo, percentCompletePicture } =
data;
......@@ -325,9 +324,16 @@ class BasicInfo extends React.Component {
onSelect={this.handleSelectCover}
/>
)}
{ visible &&
<ImgClipModal visible={visible} imgUrl={imageFile.ossUrl} onConfirm={this.getSignature} onClose={()=>{this.setState({ visible: false });}}/>
}
{visible && (
<ImgClipModal
visible={visible}
imgUrl={imageFile.ossUrl}
onConfirm={this.getSignature}
onClose={() => {
this.setState({ visible: false });
}}
/>
)}
</div>
);
}
......
src/modules/plan-manage/components/PlanList.jsx
......@@ -64,6 +64,7 @@ function PlanList(props) {
render: (val, item, index) => {
return (
<Switch
size='small'
checked={item.enableState === 'NO' ? false : true}
onChange={() => changeEnableState(item)}
disabled={User.getUserRole() === 'CloudManager' || User.getUserRole() === 'StoreManager' ? false : true}
......
src/modules/root/Header.jsx
/*
* @Author: 吴文洁
* @Date: 2019-09-10 18:26:03
* @LastEditors: yuananting
* @LastEditTime: 2021-07-06 14:37:49
* @LastEditors: Please set LastEditors
* @LastEditTime: 2021-07-14 14:14:16
* @Description:
*/
import React, { useRef, useContext, useEffect, useState } from 'react';
......@@ -36,7 +36,7 @@ function Header(props) {
const [openDropdown, setOpenDropdown] = useState(false);
const [instScroll, setInstScroll] = useState(false);
const ctx = useContext(XMContext);
const htmlUrl = `${LIVE_SHARE}store/index?id=${User.getStoreId()}&userId=${User.getUserId()}&from=work_weixin`;
const htmlUrl = `${LIVE_SHARE}store/index?id=${User.getStoreId()}&userId=${User.getUserId()}`;
const helpCenterUrl = 'https://www.yuque.com/wangzhong-zkqw0/qixue'; // 帮助中心
const storeUserId = User.getStoreUserId();
const enterpriseId = User.getEnterpriseId();
......@@ -207,8 +207,9 @@ function Header(props) {
}
function handleConvertShortUrl() {
//提供给企业微信下的人员使用的码，用微信方式扫时页时获取企业微信的身份
CourseService.getQrcode({
urls: [htmlUrl],
urls: [`${htmlUrl}&source=workWechat`],
}).then((res) => {
const { result = [] } = res;
const qrcodeWrapDom = document.querySelector('#h5-qrcode');
......@@ -343,7 +344,7 @@ function Header(props) {
<div className='h5-url'>
<div className='name'>手机端学院</div>
<div id='h5-qrcode'></div>
<div className='tip'>微信扫码，打开学院</div>
<div className='tip'>企业员工扫码登录学院</div>
</div>
</div>
</div>
......
src/modules/root/Header.less
......@@ -378,7 +378,7 @@
.name,
.tip {
width: 70px;
font-size: 14px;
font-size: 13px;
color: #333333;
line-height: 52px;
margin: 0 auto;
......
src/routes/index.tsx
......@@ -3,108 +3,86 @@
* @Date: 2020-04-28 18:05:30
* @LastEditors: wufan
* @LastEditTime: 2020-12-26 14:37:23
* @Description:
* @Description:
*/
import mainRoutes from './config/mainRoutes';
import redirectRoutes from './config/redirectRoutes';
import React from 'react'
import { Redirect,HashRouter as Router,Route ,Switch} from 'react-router-dom';
import React from 'react';
import { HashRouter as Router, Route, Switch } from 'react-router-dom';
import { createHashHistory } from 'history';
import App from '../modules/root/App';
import AppContext from '@/modules/root/AppContent';
import Login from '../modules/root/Login';
import CollegeManagePage from '../modules/root/CollegeManagePage';
import CreateCollege from '../modules/root/CreateCollege';
import _ from 'underscore';
import { asyncComponent } from 'react-async-component'
import SwitchRoute from '@/modules/root/SwitchRoute';
import ErrorCollege from '@/modules/root/ErrorCollege';
const history = createHashHistory();
window.RCHistory = _.extend({}, history, {
push: (obj: any) => {
history.push(obj)
},
pushState: (obj: any) => {
history.push(obj)
},
pushStateWithStatus: (obj: any) => {
history.push(obj)
},
goBack: history.goBack,
location: history.location,
replace: (obj: any) => {
history.replace(obj)
}
push: (obj: any) => {
history.push(obj);
},
pushState: (obj: any) => {
history.push(obj);
},
pushStateWithStatus: (obj: any) => {
history.push(obj);
},
goBack: history.goBack,
location: history.location,
replace: (obj: any) => {
history.replace(obj);
},
});
const cache:any = {
path: '',
component: null
}
function dynamic (component:any) {
const resolveComponent = component
return asyncComponent({
resolve: () => {
const ts = resolveComponent()
return ts
},
})
}
export const RootRouter = () => {
return (
<Router {...history}>
<Switch>
<Route key="1" exact path="/login" render={() => <Login />} />
<Route key="2" exact path="/switch-route" render={() => <SwitchRoute />} />
<Route key="3" exact path="/college-manage" render={() => <CollegeManagePage />} />
<Route key="4" exact path="/college-manage/create" render={() => <CreateCollege />} />
<Route key="6" exact path="/error-college" render={() => <ErrorCollege />} />
<Route key="5" path="/" render={() => <AppContext />} />
</Switch>
</Router>
)
}
return (
<Router {...history}>
<Switch>
<Route key='1' exact path='/login' render={() => <Login />} />
<Route key='2' exact path='/switch-route' render={() => <SwitchRoute />} />
<Route key='3' exact path='/college-manage' render={() => <CollegeManagePage />} />
<Route key='4' exact path='/college-manage/create' render={() => <CreateCollege />} />
<Route key='6' exact path='/error-college' render={() => <ErrorCollege />} />
<Route key='5' path='/' render={() => <AppContext />} />
</Switch>
</Router>
);
};
export const MainRoutes = () => {
return (
<Switch>
{
_.map(mainRoutes, ({
path,
component,
}, key) => {
return <Route
key={key}
path={path}
render={() => {
const Component = component;
return <Component />
}}
/>
})
}
</Switch>
)
}
return (
<Switch>
{_.map(mainRoutes, ({ path, component }, key) => {
return (
<Route
key={key}
path={path}
render={() => {
const Component = component;
return <Component />;
}}
/>
);
})}
</Switch>
);
};
export const RedirectRoutes = () => {
return (
<Switch>
{
_.map(redirectRoutes, ({
path,
component,
}, key) => {
return <Route
key={key}
path={path}
render={() => {
const Component = component;
return <Component />
}}
/>
})
}
</Switch>
)
}
return (
<Switch>
{_.map(redirectRoutes, ({ path, component }, key) => {
return (
<Route
key={key}
path={path}
render={() => {
const Component = component;
return <Component />;
}}
/>
);
})}
</Switch>
);
};
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment