cxt
5 years ago
commit
d8672c6a9d
@ -0,0 +1,57 @@
|
||||
$(document).on('turbolinks:load', function() {
|
||||
if ($('body.admins-courses-index-page').length > 0) {
|
||||
let searchContainer = $(".course-list-form");
|
||||
let searchForm = $("form.search-form",searchContainer);
|
||||
|
||||
searchContainer.on('change', '.course-homepage-show', function(){
|
||||
searchForm.find('input[type="submit"]').trigger('click');
|
||||
});
|
||||
|
||||
//导出
|
||||
searchContainer.on('click', "#course-export", function () {
|
||||
window.location.href = "/admins/courses.xlsx?" + searchForm.serialize();
|
||||
});
|
||||
|
||||
$(".course-list-container").on("change", '.course-setting-form', function () {
|
||||
var s_id = $(this).attr("data-id");
|
||||
var s_value = $(this).val();
|
||||
var s_name = $(this).attr("name");
|
||||
var json = {};
|
||||
json[s_name] = s_value;
|
||||
$.ajax({
|
||||
url: "/admins/courses/" + s_id,
|
||||
type: "PUT",
|
||||
dataType:'script',
|
||||
data: json
|
||||
});
|
||||
});
|
||||
|
||||
// ************** 学校选择 *************
|
||||
searchForm.find('.school-select').select2({
|
||||
theme: 'bootstrap4',
|
||||
placeholder: '请选择单位',
|
||||
minimumInputLength: 1,
|
||||
ajax: {
|
||||
delay: 500,
|
||||
url: '/api/schools/search.json',
|
||||
dataType: 'json',
|
||||
data: function (params) {
|
||||
return {keyword: params.term};
|
||||
},
|
||||
processResults: function (data) {
|
||||
return {results: data.schools}
|
||||
}
|
||||
},
|
||||
templateResult: function (item) {
|
||||
if (!item.id || item.id === '') return item.text;
|
||||
return item.name;
|
||||
},
|
||||
templateSelection: function (item) {
|
||||
if (item.id) {
|
||||
}
|
||||
return item.name || item.text;
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
@ -0,0 +1,60 @@
|
||||
$(document).on('turbolinks:load', function() {
|
||||
var $modal = $('.modal.admin-merge-course-list-modal');
|
||||
if ($modal.length > 0) {
|
||||
var $form = $modal.find('form.admin-merge-course-list-form');
|
||||
var $originCourseListIdInput = $form.find('input[name="origin_course_list_id"]');
|
||||
|
||||
$form.validate({
|
||||
errorElement: 'span',
|
||||
errorClass: 'danger text-danger',
|
||||
rules: {
|
||||
course_list_name: {
|
||||
required: true
|
||||
}
|
||||
},
|
||||
messages: {
|
||||
course_list_name: {
|
||||
required: '请输入课程名称'
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// modal ready fire
|
||||
$modal.on('show.bs.modal', function (event) {
|
||||
var $link = $(event.relatedTarget);
|
||||
|
||||
var couresListId = $link.data('courseListId');
|
||||
var url = $link.data('url');
|
||||
|
||||
$originCourseListIdInput.val(couresListId);
|
||||
$form.data('url', url);
|
||||
});
|
||||
|
||||
$modal.on('click', '.submit-btn', function(){
|
||||
$form.find('.error').html('');
|
||||
|
||||
if ($form.valid()) {
|
||||
var url = $form.data('url');
|
||||
|
||||
$.ajax({
|
||||
method: 'POST',
|
||||
dataType: 'json',
|
||||
url: url,
|
||||
data: $form.serialize(),
|
||||
success: function(){
|
||||
$.notify({ message: '操作成功' });
|
||||
$modal.modal('hide');
|
||||
|
||||
setTimeout(function(){
|
||||
window.location.reload();
|
||||
}, 500);
|
||||
},
|
||||
error: function(res){
|
||||
var data = res.responseJSON;
|
||||
$form.find('.error').html(data.message);
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
@ -0,0 +1,35 @@
|
||||
class Admins::CourseListsController < Admins::BaseController
|
||||
|
||||
def index
|
||||
course_lists = Admins::CourseListQuery.call(params)
|
||||
@course_lists = paginate course_lists.preload(:courses, :user)
|
||||
@params_page = params[:page] || 1
|
||||
respond_to do |format|
|
||||
format.js
|
||||
format.html
|
||||
end
|
||||
end
|
||||
|
||||
def destroy
|
||||
CourseList.find(params[:id]).destroy!
|
||||
|
||||
render_delete_success
|
||||
end
|
||||
|
||||
def merge
|
||||
origin_course_list = CourseList.find_by!(id: params[:origin_course_list_id])
|
||||
o_courselist = CourseList.find_by(name: params[:course_list_name])
|
||||
if o_courselist
|
||||
origin_course_list.courses.each do |course|
|
||||
course.update!(name: course.name.sub(origin_course_list.name, params[:course_list_name]), course_list_id: o_courselist.id)
|
||||
end
|
||||
origin_course_list.destroy
|
||||
else
|
||||
origin_course_list.courses.each do |course|
|
||||
course.update!(name: course.name.sub(origin_course_list.name, params[:course_list_name]))
|
||||
end
|
||||
origin_course_list.update!(name: params[:course_list_name])
|
||||
end
|
||||
render_ok
|
||||
end
|
||||
end
|
||||
@ -0,0 +1,49 @@
|
||||
class Admins::CoursesController < Admins::BaseController
|
||||
before_action :find_course, except: [:index]
|
||||
|
||||
def index
|
||||
default_sort('created_at', 'desc')
|
||||
|
||||
courses = Admins::CourseQuery.call(params)
|
||||
@ended_courses = courses.where(is_end: 1).size
|
||||
@processed_courses = courses.where(is_end: 0).size
|
||||
@courses = paginate courses.includes(:school, :students, :attachments, :homework_commons, teacher: :user_extension)
|
||||
|
||||
respond_to do |format|
|
||||
format.js
|
||||
format.html
|
||||
format.xlsx do
|
||||
@courses = courses.includes(:school, :students, :attachments, :homework_commons, :course_acts, teacher: :user_extension)
|
||||
filename = "课堂列表_#{Time.current.strftime('%Y%m%d%H%M%S')}.xlsx"
|
||||
render xlsx: 'index', filename: filename
|
||||
end
|
||||
end
|
||||
end
|
||||
|
||||
def destroy
|
||||
if @course.is_delete == 0
|
||||
@course.delete!
|
||||
Tiding.create!(user_id: current_user.id, trigger_user_id: current_user.id, container_id: @course.id,
|
||||
container_type: 'DeleteCourse', tiding_type: 'System', belong_container: @course, extra: @course.name)
|
||||
end
|
||||
end
|
||||
|
||||
def update
|
||||
if @course.update_attributes(setting_params)
|
||||
render_ok
|
||||
else
|
||||
redirect_to admins_courses_path
|
||||
flash[:danger] = "更新失败"
|
||||
end
|
||||
end
|
||||
|
||||
private
|
||||
|
||||
def find_course
|
||||
@course = Course.find_by!(id: params[:id])
|
||||
end
|
||||
|
||||
def setting_params
|
||||
params.permit(:homepage_show, :email_notify)
|
||||
end
|
||||
end
|
||||
@ -0,0 +1,25 @@
|
||||
class Admins::ProjectsController < Admins::BaseController
|
||||
|
||||
def index
|
||||
default_sort('created_at', 'desc')
|
||||
|
||||
search = params[:search].to_s.strip
|
||||
projects = Project.where("name like ?", "%#{search}%")
|
||||
@projects = paginate projects.includes(:owner, :members, :issues, :versions, :attachments, :project_score)
|
||||
end
|
||||
|
||||
def destroy
|
||||
project = Project.find_by!(id: params[:id])
|
||||
ActiveRecord::Base.transaction do
|
||||
g = Gitlab.client
|
||||
g.delete_project(project.gpid)
|
||||
# 删除Trustie版本库记录
|
||||
repoisitory = Repository.where(project_id: project.id, type: "Repository::Gitlab").first
|
||||
repoisitory.destroy!
|
||||
Tiding.where(container_id: project.id, container_type: ["JoinProject", "DealProject", "ReporterJoinProject", "ManagerJoinProject"]).destroy_all
|
||||
project.destroy!
|
||||
render_delete_success
|
||||
end
|
||||
end
|
||||
|
||||
end
|
||||
@ -0,0 +1,22 @@
|
||||
class Admins::ShixunRecyclesController < Admins::BaseController
|
||||
|
||||
def index
|
||||
sort_by = params[:sort_by].presence || 'created_at'
|
||||
sort_direction = params[:sort_direction].presence || 'desc'
|
||||
search = params[:search].to_s.strip
|
||||
shixuns = Shixun.where(status: -1).where("name like ?", "%#{search}%").order("#{sort_by} #{sort_direction}")
|
||||
@shixuns = paginate shixuns.preload(:user, :laboratory)
|
||||
end
|
||||
|
||||
def destroy
|
||||
Shixun.find(params[:id]).destroy!
|
||||
|
||||
render_delete_success
|
||||
end
|
||||
|
||||
def resume
|
||||
Shixun.find(params[:id]).update!(status: 0)
|
||||
render_delete_success
|
||||
end
|
||||
|
||||
end
|
||||
@ -0,0 +1,3 @@
|
||||
class Version < ApplicationRecord
|
||||
belongs_to :project
|
||||
end
|
||||
@ -0,0 +1,30 @@
|
||||
class Admins::CourseListQuery < ApplicationQuery
|
||||
include CustomSortable
|
||||
|
||||
attr_reader :params
|
||||
|
||||
sort_columns :created_at, default_by: :created_at, default_direction: :desc
|
||||
|
||||
def initialize(params)
|
||||
@params = params
|
||||
end
|
||||
|
||||
def call
|
||||
course_lists = CourseList.all
|
||||
|
||||
# 关键字模糊查询
|
||||
keyword = params[:keyword].to_s.strip
|
||||
if keyword.present?
|
||||
search_type = params[:search_type] || "0"
|
||||
case search_type
|
||||
when "0"
|
||||
course_lists = course_lists.joins(:user)
|
||||
.where('CONCAT(lastname, firstname) like :keyword', keyword: "%#{keyword}%")
|
||||
when "1"
|
||||
course_lists = course_lists.where('name like :keyword', keyword: "%#{keyword}%")
|
||||
end
|
||||
end
|
||||
|
||||
custom_sort(course_lists, params[:sort_by], params[:sort_direction])
|
||||
end
|
||||
end
|
||||
@ -0,0 +1,44 @@
|
||||
class Admins::CourseQuery < ApplicationQuery
|
||||
include CustomSortable
|
||||
|
||||
attr_reader :params
|
||||
|
||||
sort_columns :created_at, default_by: :created_at, default_direction: :desc, default_table: 'courses'
|
||||
|
||||
def initialize(params)
|
||||
@params = params
|
||||
end
|
||||
|
||||
def call
|
||||
courses = Course.all
|
||||
|
||||
courses = courses.where(id: params[:id]) if params[:id].present?
|
||||
|
||||
# 状态过滤
|
||||
status =
|
||||
case params[:status].to_s.strip
|
||||
when 'processing' then 0
|
||||
when 'ended' then 1
|
||||
end
|
||||
courses = courses.where(is_end: status) if status
|
||||
|
||||
# 单位
|
||||
if params[:school_id].present?
|
||||
courses = courses.where(school_id: params[:school_id])
|
||||
end
|
||||
|
||||
# 首页展示
|
||||
if params[:homepage_show].present? && params[:homepage_show].to_s == 'true'
|
||||
courses = courses.where(homepage_show: true)
|
||||
end
|
||||
|
||||
# 关键字
|
||||
keyword = params[:keyword].to_s.strip
|
||||
if keyword
|
||||
sql = 'CONCAT(lastname, firstname) LIKE :keyword OR courses.name LIKE :keyword OR course_lists.name LIKE :keyword'
|
||||
courses = courses.joins(:teacher, :course_list).where(sql, keyword: "%#{keyword}%")
|
||||
end
|
||||
|
||||
custom_sort(courses, params[:sort_by], params[:sort_direction])
|
||||
end
|
||||
end
|
||||
@ -0,0 +1,22 @@
|
||||
<% define_admin_breadcrumbs do %>
|
||||
<% add_admin_breadcrumb('课程列表') %>
|
||||
<% end %>
|
||||
|
||||
<div class="box search-form-container course-list-list-form">
|
||||
<%= form_tag(admins_course_lists_path, method: :get, class: 'form-inline search-form flex-1', remote: true) do %>
|
||||
<div class="form-group">
|
||||
<label>搜索类型：</label>
|
||||
<% auto_trial_options = [['创建者姓名', 0], ['课程名称', 1]] %>
|
||||
<%= select_tag(:search_type, options_for_select(auto_trial_options), class: 'form-control') %>
|
||||
</div>
|
||||
<%= text_field_tag(:keyword, params[:keyword], class: 'form-control col-sm-2 ml-3', placeholder: '输入关键字搜索') %>
|
||||
<%= submit_tag('搜索', class: 'btn btn-primary ml-3','data-disable-with': '搜索中...') %>
|
||||
<%= link_to "清除",admins_course_lists_path,class: "btn btn-default",id:"course-lists-clear-search",'data-disable-with': '清除中...' %>
|
||||
<% end %>
|
||||
</div>
|
||||
|
||||
<div class="box admin-list-container course-list-list-container">
|
||||
<%= render partial: 'admins/course_lists/shared/list', locals: { courses: @course_lists } %>
|
||||
</div>
|
||||
|
||||
<%= render 'admins/course_lists/shared/merge_course_list_modal' %>
|
||||
@ -0,0 +1 @@
|
||||
$(".course-list-list-container").html("<%= j render partial: 'admins/course_lists/shared/list', locals: { courses: @course_lists }%>");
|
||||
@ -0,0 +1,37 @@
|
||||
<table class="table table-hover text-center shixuns-list-table">
|
||||
<thead class="thead-light">
|
||||
<th width="4%">序号</th>
|
||||
<th width="8%">ID</th>
|
||||
<th width="38%" class="text-left">课程名称</th>
|
||||
<th width="10%">课堂数</th>
|
||||
<th width="10%">创建者</th>
|
||||
<th width="12%"><%= sort_tag('创建时间', name: 'created_at', path: admins_course_lists_path) %></th>
|
||||
<th width="18%">操作</th>
|
||||
</thead>
|
||||
<tbody>
|
||||
<% if courses.present? %>
|
||||
<% courses.each_with_index do |course_list,index| %>
|
||||
<tr id="course-list-item-<%= course_list.id %>">
|
||||
<td><%= list_index_no(@params_page.to_i, index) %></td>
|
||||
<td><%= course_list.id %></td>
|
||||
<td class="text-left"><%= course_list.name %></td>
|
||||
<% course_count = course_list.courses.size %>
|
||||
<td><%= course_count %></td>
|
||||
<td><%= link_to course_list.user.try(:real_name),"/users/#{course_list.user.try(:login)}",target:'_blank' %></td>
|
||||
<td><%= format_time course_list.created_at %></td>
|
||||
<td class="operate">
|
||||
<% if course_count == 0 %>
|
||||
<%= delete_link '删除', admins_course_list_path(course_list, element: ".course-list-item-#{course_list.id}"), class: 'delete-department-action' %>
|
||||
<% end %>
|
||||
<%= javascript_void_link '修改', class: 'action', data: { course_list_id: course_list.id,
|
||||
toggle: 'modal', target: '.admin-merge-course-list-modal', url: merge_admins_course_lists_path } %>
|
||||
</td>
|
||||
</tr>
|
||||
<% end %>
|
||||
<% else %>
|
||||
<%= render 'admins/shared/no_data_for_table' %>
|
||||
<% end %>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<%= render partial: 'admins/shared/paginate', locals: { objects: courses } %>
|
||||
@ -0,0 +1,29 @@
|
||||
<div class="modal fade admin-merge-course-list-modal" tabindex="-1" role="dialog" aria-hidden="true">
|
||||
<div class="modal-dialog modal-dialog-centered" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title">修改课程</h5>
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<form class="admin-merge-course-list-form" data-url="<%= merge_admins_course_lists_path %>">
|
||||
<%= hidden_field_tag(:origin_course_list_id, nil) %>
|
||||
|
||||
<div class="form-group d-flex">
|
||||
<label for="course_list_id" class="col-form-label">更改为：</label>
|
||||
<div class="d-flex flex-column-reverse w-75">
|
||||
<input id="course_list_name" name="course_list_name" placeholder="请输入课程名称" class="form-control">
|
||||
</div>
|
||||
</div>
|
||||
<div class="error text-danger"></div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
|
||||
<button type="button" class="btn btn-primary submit-btn">确认</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,2 @@
|
||||
alert("删除成功");
|
||||
$(".course-item-<%= @course.id %>").find(".delete-course-action").remove();
|
||||
@ -0,0 +1,34 @@
|
||||
<% define_admin_breadcrumbs do %>
|
||||
<% add_admin_breadcrumb('课堂列表') %>
|
||||
<% end %>
|
||||
|
||||
<div class="box search-form-container course-list-form">
|
||||
<%= form_tag(admins_courses_path, method: :get, class: 'form-inline search-form flex-1', remote: true) do %>
|
||||
<div class="form-group mr-1">
|
||||
<label for="status">状态：</label>
|
||||
<% status_options = [['全部', ''], ["正在进行(#{@processed_courses})", 'processing'], ["已结束#{@ended_courses}", 'ended']] %>
|
||||
<%= select_tag(:status, options_for_select(status_options), class: 'form-control') %>
|
||||
</div>
|
||||
|
||||
<div class="form-group col-12 col-md-3">
|
||||
<label for="school_name">单位：</label>
|
||||
<%= select_tag :school_id, options_for_select([''], params[:school_id]), class: 'form-control school-select flex-1' %>
|
||||
</div>
|
||||
|
||||
<%= text_field_tag(:keyword, params[:keyword], class: 'form-control col-12 col-md-2 mr-3', placeholder: '创建者/课堂名称/课程名称检索') %>
|
||||
|
||||
<div class="form-check mr-2">
|
||||
<%= hidden_field_tag(:homepage_show, false, id:'') %>
|
||||
<%= check_box_tag(:homepage_show, true, params[:homepage_show].to_s == 'true', class: 'form-check-input course-homepage-show') %>
|
||||
<label class="form-check-label" for="homepage_show">只看首页展示</label>
|
||||
</div>
|
||||
|
||||
<%= submit_tag('搜索', class: 'btn btn-primary ml-3', 'data-disable-with': '搜索中...') %>
|
||||
<input type="reset" class="btn btn-secondary clear-btn" value="清空"/>
|
||||
<% end %>
|
||||
<a href="javascript:void(0)" class="btn btn-primary" id="course-export" data-disable-with = '导出中...'>导出</a>
|
||||
</div>
|
||||
|
||||
<div class="box admin-list-container course-list-container">
|
||||
<%= render partial: 'admins/courses/shared/list', locals: { courses: @courses } %>
|
||||
</div>
|
||||
@ -0,0 +1 @@
|
||||
$('.course-list-container').html("<%= j( render partial: 'admins/courses/shared/list', locals: { courses: @courses } ) %>");
|
||||
@ -0,0 +1,29 @@
|
||||
wb = xlsx_package.workbook
|
||||
|
||||
wb.styles do |s|
|
||||
blue_cell = s.add_style :bg_color => "FAEBDC", :sz => 10,:height => 25,:b => true, :border => { :style => :thin, :color =>"000000" },:alignment => {wrap_text: true,:horizontal => :center,:vertical => :center}
|
||||
wb.add_worksheet(name: "课堂列表") do |sheet|
|
||||
sheet.add_row %w(ID 课堂名称 成员 资源 普通作业 分组作业 实训作业 试卷 评测次数 私有 状态 单位 创建者 创建时间 动态时间), :height => 25,:style => blue_cell
|
||||
|
||||
@courses.each do |course|
|
||||
data = [
|
||||
course.id,
|
||||
course.name,
|
||||
course.course_members_count,
|
||||
get_attachment_count(course, 0),
|
||||
course.course_homework_count(1),
|
||||
course.course_homework_count(3),
|
||||
course.course_homework_count(4),
|
||||
course.exercises_count,
|
||||
course.evaluate_count,
|
||||
course.is_public == 1 ? "--" : "√",
|
||||
course.is_end ? "已结束" : "正在进行",
|
||||
course.school&.name,
|
||||
course.teacher&.real_name,
|
||||
course.created_at&.strftime('%Y-%m-%d %H:%M'),
|
||||
course.max_activity_time ? course.max_activity_time&.strftime('%Y-%m-%d %H:%M') : "--"
|
||||
]
|
||||
sheet.add_row(data)
|
||||
end
|
||||
end
|
||||
end
|
||||
@ -0,0 +1,62 @@
|
||||
<table class="table table-hover text-center subject-list-table">
|
||||
<thead class="thead-light">
|
||||
<tr>
|
||||
<th width="4%">ID</th>
|
||||
<th width="10%" class="text-left">课堂名称</th>
|
||||
<th width="6%">成员</th>
|
||||
<th width="4%">资源</th>
|
||||
<th width="4%">普通作业</th>
|
||||
<th width="4%">分组作业</th>
|
||||
<th width="4%">实训作业</th>
|
||||
<th width="4%">试卷</th>
|
||||
<th width="7%">评测次数</th>
|
||||
<th width="4%">私有</th>
|
||||
<th width="6%">状态</th>
|
||||
<th width="10%">单位</th>
|
||||
<th width="7%">创建者</th>
|
||||
<th width="10%"><%= sort_tag('创建时间', name: 'created_at', path: admins_courses_path) %></th>
|
||||
<th width="4%">首页</th>
|
||||
<th width="6%">邮件通知</th>
|
||||
<th width="6%">操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<% if courses.present? %>
|
||||
<% courses.each do |course| %>
|
||||
<tr class="course-item-<%= course.id %>">
|
||||
<td><%= course.id %></td>
|
||||
<td class="text-left">
|
||||
<%= link_to(course.name, "/courses/#{course.id}", target: '_blank') %>
|
||||
</td>
|
||||
<td><%= course.course_members_count %></td>
|
||||
<td><%= get_attachment_count(course, 0) %></td>
|
||||
<td><%= course.course_homework_count(1) %></td>
|
||||
<td><%= course.course_homework_count(3) %></td>
|
||||
<td><%= course.course_homework_count(4) %></td>
|
||||
<td><%= course.exercises_count %></td>
|
||||
<td><%= course.evaluate_count %></td>
|
||||
<td><%= course.is_public == 1 ? "--" : "√" %></td>
|
||||
<td><%= course.is_end ? "已结束" : "正在进行" %></td>
|
||||
<td><%= course.school&.name %></td>
|
||||
<td><%= course.teacher&.real_name %></td>
|
||||
<td><%= course.created_at&.strftime('%Y-%m-%d %H:%M') %></td>
|
||||
<td>
|
||||
<%= check_box_tag :homepage_show,!course.homepage_show,course.homepage_show,remote:true,data:{id:course.id},class:"course-setting-form" %>
|
||||
</td>
|
||||
<td>
|
||||
<%= check_box_tag :email_notify,!course.email_notify,course.email_notify,remote:true,data:{id:course.id},class:"course-setting-form" %>
|
||||
</td>
|
||||
<td class="action-container">
|
||||
<% if course.is_delete == 0 %>
|
||||
<%= delete_link '删除', admins_course_path(course, element: ".course-item-#{course.id}"), class: 'delete-course-action' %>
|
||||
<% end %>
|
||||
</td>
|
||||
</tr>
|
||||
<% end %>
|
||||
<% else %>
|
||||
<%= render 'admins/shared/no_data_for_table' %>
|
||||
<% end %>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<%= render partial: 'admins/shared/paginate', locals: { objects: courses } %>
|
||||
@ -0,0 +1,2 @@
|
||||
alert("删除成功");
|
||||
$(".course-item-<%= @course.id %>").find(".delete-course-action").remove();
|
||||
@ -0,0 +1,15 @@
|
||||
<% define_admin_breadcrumbs do %>
|
||||
<% add_admin_breadcrumb('项目列表') %>
|
||||
<% end %>
|
||||
|
||||
<div class="box search-form-container project-list-form">
|
||||
<%= form_tag(admins_projects_path, method: :get, class: 'form-inline search-form flex-1', remote: true) do %>
|
||||
<%= text_field_tag(:search, params[:search], class: 'form-control col-12 col-md-2 mr-3', placeholder: '项目名称检索') %>
|
||||
<%= submit_tag('搜索', class: 'btn btn-primary ml-3', 'data-disable-with': '搜索中...') %>
|
||||
<input type="reset" class="btn btn-secondary clear-btn" value="清空"/>
|
||||
<% end %>
|
||||
</div>
|
||||
|
||||
<div class="box admin-list-container project-list-container">
|
||||
<%= render partial: 'admins/projects/shared/list', locals: { projects: @projects } %>
|
||||
</div>
|
||||
@ -0,0 +1 @@
|
||||
$('.project-list-container').html("<%= j( render partial: 'admins/projects/shared/list', locals: { projects: @projects } ) %>");
|
||||
@ -0,0 +1,48 @@
|
||||
<table class="table table-hover text-center subject-list-table">
|
||||
<thead class="thead-light">
|
||||
<tr>
|
||||
<th width="4%">ID</th>
|
||||
<th width="15%" class="text-left">项目名称</th>
|
||||
<th width="6%">公开</th>
|
||||
<th width="5%">issue</th>
|
||||
<th width="5%">资源</th>
|
||||
<th width="6%">版本库</th>
|
||||
<th width="8%">PullRequest</th>
|
||||
<th width="6%">里程碑</th>
|
||||
<th width="10%">成员</th>
|
||||
<th width="10%">管理员</th>
|
||||
<th width="15%"><%= sort_tag('创建时间', name: 'created_at', path: admins_projects_path) %></th>
|
||||
<th width="10%">操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<% if projects.present? %>
|
||||
<% projects.each do |project| %>
|
||||
<tr class="project-item-<%= project.id %>">
|
||||
<td><%= project.id %></td>
|
||||
<td class="text-left">
|
||||
<%= link_to(project.name, "/projects/#{project.id}", target: '_blank') %>
|
||||
</td>
|
||||
<td><%= project.is_public ? '√' : '' %></td>
|
||||
<td><%= project.issues.size %></td>
|
||||
<td><%= project.attachments.size %></td>
|
||||
<td><%= project.project_score.try(:changeset_num).to_i %></td>
|
||||
<td><%= project.project_score.try(:pull_request_num).to_i %></td>
|
||||
<td><%= project.versions.size %></td>
|
||||
<td><%= project.members.size %></td>
|
||||
<td>
|
||||
<%= project.owner ? link_to(project.owner&.real_name, "/users/#{project.owner&.login}", target: '_blank') : "" %>
|
||||
</td>
|
||||
<td><%= project.created_on&.strftime('%Y-%m-%d %H:%M') %></td>
|
||||
<td class="action-container">
|
||||
<%= delete_link '删除', admins_project_path(project, element: ".project-item-#{project.id}"), class: 'delete-project-action' %>
|
||||
</td>
|
||||
</tr>
|
||||
<% end %>
|
||||
<% else %>
|
||||
<%= render 'admins/shared/no_data_for_table' %>
|
||||
<% end %>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<%= render partial: 'admins/shared/paginate', locals: { objects: projects } %>
|
||||
@ -0,0 +1,15 @@
|
||||
<% define_admin_breadcrumbs do %>
|
||||
<% add_admin_breadcrumb('实训回收站') %>
|
||||
<% end %>
|
||||
|
||||
<div class="box search-form-container shixun-recycles-list-form">
|
||||
<%= form_tag(admins_shixun_recycles_path, method: :get, class: 'form-inline search-form',id:"shixun-recycles-search-form",remote:true) do %>
|
||||
<%= text_field_tag(:search, params[:search], class: 'form-control col-sm-2 ml-3', placeholder: '输入名称关键字搜索') %>
|
||||
<%= submit_tag('搜索', class: 'btn btn-primary ml-3','data-disable-with': '搜索中...') %>
|
||||
<%= link_to "清除",admins_shixun_recycles_path,class: "btn btn-default",id:"shixun-recycles-clear-search",'data-disable-with': '清除中...' %>
|
||||
<% end %>
|
||||
</div>
|
||||
|
||||
<div class="box admin-list-container shixun-recycles-list-container">
|
||||
<%= render partial: 'admins/shixun_recycles/shared/list', locals: { shixuns: @shixuns } %>
|
||||
</div>
|
||||
@ -0,0 +1 @@
|
||||
$(".shixun-recycles-list-container").html("<%= j render partial: "admins/shixun_recycles/shared/list",locals: {shixuns: @shixuns} %>")
|
||||
@ -0,0 +1,31 @@
|
||||
<table class="table table-hover text-center shixuns-list-table">
|
||||
<thead class="thead-light">
|
||||
<th width="8%">ID</th>
|
||||
<th width="32%" class="text-left">实训名称</th>
|
||||
<th width="20%">子站源</th>
|
||||
<th width="10%">创建者</th>
|
||||
<th width="20%"><%= sort_tag('创建于', name: 'created_at', path: admins_shixun_recycles_path) %></th>
|
||||
<th width="10%">操作</th>
|
||||
</thead>
|
||||
<tbody>
|
||||
<% if shixuns.present? %>
|
||||
<% shixuns.each do |shixun| %>
|
||||
<tr id="shixun_recycle_item_<%= shixun.id %>">
|
||||
<td><%= shixun.identifier %></td>
|
||||
<td class="text-left"><span><%= link_to overflow_hidden_span(shixun.name), "/shixuns/#{shixun.identifier}", :target => "_blank", :title => shixun.name %></span></td>
|
||||
<td><%= shixun.laboratory&.school&.name %></td>
|
||||
<td><%= link_to shixun.user.try(:real_name),"/users/#{shixun.user.try(:login)}",target:'_blank' %></td>
|
||||
<td><%= format_time shixun.created_at %></td>
|
||||
<td class="operate">
|
||||
<%= delete_link '删除', admins_shixun_recycle_path(shixun, element: ".shixun-recycle-item-#{shixun.id}"), class: 'delete-shixun-recyle-action' %>
|
||||
<%= link_to('恢复', resume_admins_shixun_recycle_path(shixun), :method => :post, :remote => true, :data => { confirm: "您确定要恢复吗？" } ) %>
|
||||
</td>
|
||||
</tr>
|
||||
<% end %>
|
||||
<% else %>
|
||||
<%= render 'admins/shared/no_data_for_table' %>
|
||||
<% end %>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<%= render partial: 'admins/shared/paginate', locals: { objects: shixuns } %>
|
||||
@ -1,3 +1,3 @@
|
||||
json.partial! 'attachments/attachment', attachment: @file
|
||||
# json.partial! "files/course_groups", attachment_group_settings: @file.attachment_group_settings
|
||||
json.partial! "files/course_groups", attachment_group_settings: @file.attachment_group_settings
|
||||
json.partial! "attachment_histories/list", attachment_histories: @attachment_histories
|
||||
@ -0,0 +1,46 @@
|
||||
import React from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
|
||||
import './index.css';
|
||||
import './indexPlus.css';
|
||||
import App from './App';
|
||||
|
||||
// 加之前main.js 18.1MB
|
||||
// import { message } from 'antd';
|
||||
import message from 'antd/lib/message';
|
||||
import 'antd/lib/message/style/css';
|
||||
|
||||
import { AppContainer } from 'react-hot-loader';
|
||||
|
||||
import registerServiceWorker from './registerServiceWorker';
|
||||
|
||||
import { configureUrlQuery } from 'react-url-query';
|
||||
|
||||
import history from './history';
|
||||
|
||||
// link the history used in our app to url-query so it can update the URL with it.
|
||||
configureUrlQuery({ history });
|
||||
// ----------------------------------------------------------------------------------- 请求配置
|
||||
|
||||
window.__useKindEditor = false;
|
||||
|
||||
|
||||
const render = (Component) => {
|
||||
ReactDOM.render(
|
||||
<AppContainer {...this.props} {...this.state}>
|
||||
<Component {...this.props} {...this.state}/>
|
||||
</AppContainer>,
|
||||
document.getElementById('root')
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
// ReactDOM.render(
|
||||
// ,
|
||||
// document.getElementById('root'));
|
||||
// registerServiceWorker();
|
||||
|
||||
render(App);
|
||||
if (module.hot) {
|
||||
module.hot.accept('./App', () => { render(App) });
|
||||
}
|
||||
@ -0,0 +1,117 @@
|
||||
/*
|
||||
* @Description:
|
||||
* @Author: tangjiang
|
||||
* @Github:
|
||||
* @Date: 2019-11-20 23:10:48
|
||||
* @LastEditors: tangjiang
|
||||
* @LastEditTime: 2019-11-28 14:41:42
|
||||
*/
|
||||
const CONST = {
|
||||
jcLabel: {
|
||||
name: '任务名称',
|
||||
language: '编程语言',
|
||||
description: '描述',
|
||||
difficult: '难易度',
|
||||
category: '分类',
|
||||
openOrNot: '公开程序',
|
||||
timeLimit: '时间限制'
|
||||
},
|
||||
fontSetting: {
|
||||
title: '代码格式',
|
||||
type: 'select',
|
||||
content: [
|
||||
{
|
||||
text: '字体大小',
|
||||
value: [
|
||||
{
|
||||
key: 1,
|
||||
text: '12px',
|
||||
value: 12
|
||||
},
|
||||
{
|
||||
key: 1,
|
||||
text: '14px',
|
||||
value: 14
|
||||
},
|
||||
{
|
||||
key: 1,
|
||||
text: '16px',
|
||||
value: 16
|
||||
},
|
||||
{
|
||||
key: 1,
|
||||
text: '18px',
|
||||
value: 18
|
||||
},
|
||||
{
|
||||
key: 1,
|
||||
text: '24px',
|
||||
value: 24
|
||||
},
|
||||
{
|
||||
key: 1,
|
||||
text: '30px',
|
||||
value: 30
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
opacitySetting: {
|
||||
title: '代码格式',
|
||||
type: 'label',
|
||||
content: [
|
||||
{
|
||||
text: '字体大小',
|
||||
value: 'CTRL + S'
|
||||
},
|
||||
{
|
||||
text: '唤出快捷键列表',
|
||||
value: 'F1/ALT + F1'
|
||||
},
|
||||
{
|
||||
text: '向左缩进',
|
||||
value: 'CTRL + ['
|
||||
},
|
||||
{
|
||||
text: '向右缩进',
|
||||
value: 'CTRL + ]'
|
||||
},
|
||||
{
|
||||
text: '跳到匹配的括号',
|
||||
value: 'CTRL + SHIFT + \\'
|
||||
},
|
||||
{
|
||||
text: '转到行首',
|
||||
value: 'HOME'
|
||||
},
|
||||
{
|
||||
text: '转到行尾',
|
||||
value: 'END'
|
||||
}
|
||||
]
|
||||
},
|
||||
tagBackground: {
|
||||
1: '#52c41a',
|
||||
2: '#faad14',
|
||||
3: '#f5222d'
|
||||
},
|
||||
diffText: {
|
||||
1: '简单',
|
||||
2: '中等',
|
||||
3: '困难'
|
||||
},
|
||||
reviewResult: {
|
||||
'-1': '测试用例结果不匹配',
|
||||
'0': '评测通过',
|
||||
'1': '',
|
||||
'2': '评测超时',
|
||||
'3': '评测pod失败',
|
||||
'4': '编译失败',
|
||||
'5': '执行失败'
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
export default CONST;
|
||||
|
||||
@ -0,0 +1,163 @@
|
||||
.teamsLayout{background: transparent !important;}
|
||||
|
||||
.competitionstitle{
|
||||
height:50px !important;
|
||||
border-radius: 6px;
|
||||
background: #fff;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.competitionstitle2{
|
||||
height:50px !important;
|
||||
margin-left: 30px !important;
|
||||
background: #fff;
|
||||
width: 1200px;
|
||||
}
|
||||
.CompetitionsList{
|
||||
position: relative;
|
||||
/*max-height: 210px;*/
|
||||
}
|
||||
.competitonimg{
|
||||
position: absolute;
|
||||
right: -5px;
|
||||
width: 80px;
|
||||
top: 20px;
|
||||
}
|
||||
|
||||
.ant-menu-horizontal {
|
||||
border-bottom:none !important;
|
||||
}
|
||||
|
||||
|
||||
.competitionsvalue{
|
||||
font-size: 16px;
|
||||
font-family: PingFangSC-Medium,PingFangSC;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.competitionmr50 {
|
||||
margin-right: 50px !important;
|
||||
}
|
||||
|
||||
.CompetitionsIndex .ant-list-item{
|
||||
background: #fff !important;
|
||||
margin-top: 20px;
|
||||
border: none !important;
|
||||
}
|
||||
|
||||
.CompetitionsIndex .ant-list-item{
|
||||
padding:25px;
|
||||
}
|
||||
|
||||
.CompetitionsIndex .ant-list-item-meta-title{
|
||||
height:28px;
|
||||
font-size:28px;
|
||||
font-family:PingFangSC-Regular,PingFangSC;
|
||||
font-weight:400;
|
||||
color:rgba(5,16,26,1);
|
||||
line-height:28px;
|
||||
}
|
||||
|
||||
.CompetitionsIndex .ant-list-vertical .ant-list-item-meta{
|
||||
margin-bottom: 20px !important;
|
||||
}
|
||||
|
||||
.CompetitionsIndex .ant-list-vertical .ant-list-item-action {
|
||||
margin-top: 20px;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.CompetitionsIndex .ant-list-item-action-split{
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.CompetitionsIndexdadels{
|
||||
font-family: PingFangSC-Regular,PingFangSC;
|
||||
font-weight: 400;
|
||||
color: #777777;
|
||||
margin-bottom: 14px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.CompetitionsIndexbottomvalue{
|
||||
font-size: 24px;
|
||||
font-family: ArialMT;
|
||||
color: rgba(5,16,26,1);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.CompetitionsIndex .gutter-row{
|
||||
/*margin-right:20px;*/
|
||||
width: 33%;
|
||||
}
|
||||
|
||||
.pt50{
|
||||
padding-top: 50px;
|
||||
}
|
||||
|
||||
.competitionstitles{
|
||||
max-width: 789px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
display: inline-block;
|
||||
margin-right: 15px;
|
||||
color:#000 !important;
|
||||
}
|
||||
|
||||
.competitionsrelative{
|
||||
position: absolute;
|
||||
top: 28px;
|
||||
}
|
||||
|
||||
.CompetitionsList:hover{
|
||||
/*box-shadow: 0 2px 6px rgba(51,51,51,.09);*/
|
||||
box-shadow:3px 4px 10px 2px rgba(229,229,229,0.5);
|
||||
opacity: 1;
|
||||
border-radius: 2px;
|
||||
}
|
||||
.endedfont{
|
||||
color:#000 !important;
|
||||
}
|
||||
.CompetitionsListzhezhao{
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
width: 1206px;
|
||||
height: 100%;
|
||||
z-index: 10000;
|
||||
display: none;
|
||||
background: rgba(0,0,0,0.33);
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
font-size: 22px;
|
||||
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
flex-direction: column;
|
||||
}
|
||||
.CompetitionsList:hover .CompetitionsListzhezhao{
|
||||
display: block;
|
||||
display: flex;
|
||||
}
|
||||
.competitionstitlesshou:hover a{
|
||||
cursor: pointer;
|
||||
color: #1c91e8 !important;
|
||||
}
|
||||
|
||||
.competitionstitlesshou{
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
||||
.Competitionshead{
|
||||
background-color: #2d28ba !important;
|
||||
background-position: center !important;
|
||||
background-position: 50% !important;
|
||||
background-repeat: no-repeat !important;
|
||||
}
|
||||
|
||||
.span666{
|
||||
color:#666666 !important;
|
||||
}
|
||||
@ -0,0 +1,53 @@
|
||||
.teamsLayout{background: transparent !important;}
|
||||
.teamsLayout .teamsLayoutitle{
|
||||
font-size:18px;
|
||||
font-family:PingFangSC-Semibold,PingFang SC;
|
||||
font-weight:600;
|
||||
color:rgba(5,16,26,1);
|
||||
line-height:25px;
|
||||
margin-top: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.teamsLayoutTable .ant-table-bordered .ant-table-thead > tr > th, .ant-table-bordered .ant-table-tbody > tr > td {
|
||||
border-right: 1px solid transparent !important;
|
||||
}
|
||||
|
||||
.teamsLayoutTable .ant-table-body .ant-table-thead > tr> th:nth-last-child(1){
|
||||
border-right: 1px solid #e8e8e8 !important;
|
||||
}
|
||||
|
||||
.teamsLayoutTable .ant-table-body .ant-table-tbody > tr> td:nth-last-child(1){
|
||||
border-right: 1px solid #e8e8e8 !important;
|
||||
}
|
||||
|
||||
.teamsLayoutTable .ant-table-bordered .ant-table-thead > tr > th{
|
||||
background:#EEEEEE;
|
||||
font-size: 14px;
|
||||
font-family: PingFangSC-Regular,PingFang SC;
|
||||
font-weight: 400;
|
||||
color: rgba(102,102,102,1);
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.teamsLayoutTable .ant-table-bordered .ant-table-tbody > tr > th{
|
||||
background:#EEEEEE;
|
||||
font-size:14px;
|
||||
font-family:PingFangSC-Regular,PingFang SC;
|
||||
font-weight:400;
|
||||
color:rgba(5,16,26,1);
|
||||
line-height:20px;
|
||||
}
|
||||
|
||||
.teamsLayout .mt40{
|
||||
margin-top: 40px !important;
|
||||
}
|
||||
|
||||
.teamsLayoutheji{
|
||||
color: #878787;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.teamsLayoucolor-orange {
|
||||
color: #ff6800!important;
|
||||
font-size: 16px;
|
||||
}
|
||||
@ -0,0 +1,438 @@
|
||||
.teamsLayout{background: transparent !important;}
|
||||
|
||||
.teamsLayout .ant-layout-sider{
|
||||
background: transparent !important;
|
||||
flex: 0 0 180px !important;
|
||||
max-width: 180px !important;
|
||||
min-width: 180px !important;
|
||||
width: 180px !important;
|
||||
}
|
||||
.teamsLayout .teamsLayoutitle{
|
||||
font-size:18px;
|
||||
font-family:PingFangSC-Semibold,PingFang SC;
|
||||
font-weight:600;
|
||||
color:rgba(5,16,26,1);
|
||||
line-height:25px;
|
||||
margin-top: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.teamsLayoutTable .ant-table-bordered .ant-table-thead > tr > th, .ant-table-bordered .ant-table-tbody > tr > td {
|
||||
border-right: 1px solid transparent !important;
|
||||
}
|
||||
|
||||
.teamsLayoutTable .ant-table-body .ant-table-thead > tr> th:nth-last-child(1){
|
||||
border-right: 1px solid #e8e8e8 !important;
|
||||
}
|
||||
|
||||
.teamsLayoutTable .ant-table-body .ant-table-tbody > tr> td:nth-last-child(1){
|
||||
border-right: 1px solid #e8e8e8 !important;
|
||||
}
|
||||
|
||||
.teamsLayoutTable .ant-table-bordered .ant-table-thead > tr > th{
|
||||
background:#EEEEEE;
|
||||
font-size: 14px;
|
||||
font-family: PingFangSC-Regular,PingFang SC;
|
||||
font-weight: 400;
|
||||
color: rgba(102,102,102,1);
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.teamsLayoutTable .ant-table-bordered .ant-table-tbody > tr > th{
|
||||
background:#EEEEEE;
|
||||
font-size:14px;
|
||||
font-family:PingFangSC-Regular,PingFang SC;
|
||||
font-weight:400;
|
||||
color:rgba(5,16,26,1);
|
||||
line-height:20px;
|
||||
}
|
||||
|
||||
.teamsLayout .mt40{
|
||||
margin-top: 40px !important;
|
||||
}
|
||||
|
||||
.teamsLayoutheji{
|
||||
color: #878787;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.teamsLayoucolor-orange {
|
||||
color: #ff6800 !important;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.CompetitionCommonbanner{
|
||||
padding: 20px;
|
||||
background:rgba(255,255,255,1);
|
||||
box-shadow:3px 2px 12px 2px rgba(0,0,0,0.05);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.CompetitionCommonbannerfont{
|
||||
height:100%;
|
||||
width: 365px !important;
|
||||
line-height: 34px;
|
||||
}
|
||||
|
||||
.CompetitionCommonbannerfont .competitionbannerdiv:nth-child(1){
|
||||
max-height:100px;
|
||||
font-size:25px;
|
||||
font-weight:400;
|
||||
color:rgba(5,16,26,1);
|
||||
line-height: 30px;
|
||||
}
|
||||
|
||||
.CompetitionCommonbannerfont .competitionbannerdiv:nth-child(2){
|
||||
max-height: 70px;
|
||||
font-size:16px;
|
||||
font-weight:400;
|
||||
/*color:rgba(155,155,155,1);*/
|
||||
color:#05101A;
|
||||
}
|
||||
|
||||
.CompetitionCommonbannerfont .competitionbannerdiv:nth-child(3){
|
||||
max-height: 70px;
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
/*color: rgba(155,155,155,1);*/
|
||||
color:#05101A;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.Competitioncolor9b{
|
||||
color: #9B9B9B;
|
||||
}
|
||||
|
||||
.Competitioncolor77{
|
||||
color: #777777;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.Competitioncolor516{
|
||||
font-size:24px;
|
||||
color:rgba(5,16,26,1);
|
||||
}
|
||||
|
||||
.Competitionfontsize22{
|
||||
font-size:22px;
|
||||
font-weight:500;
|
||||
color:rgba(255,255,255,1);
|
||||
}
|
||||
|
||||
.Competitionfontsize16{
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
color: rgba(102,102,102,1);
|
||||
}
|
||||
|
||||
.ant-layout-sider {
|
||||
position: relative;
|
||||
min-width: 0;
|
||||
background: #001529;
|
||||
-webkit-transition: all 0.2s;
|
||||
-o-transition: all 0.2s;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.CompetitionMenu .ant-menu-item::after {
|
||||
left: 0px !important;
|
||||
right: auto;
|
||||
border-right: 5px solid #4CACFF;
|
||||
}
|
||||
|
||||
.CompetitionMenu .ant-menu-item{
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
background:none;
|
||||
color:#666;
|
||||
}
|
||||
|
||||
.ant-menu:not(.ant-menu-horizontal) .ant-menu-item-selected {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.CompetitionMenu .ant-menu-item:not(:last-child){
|
||||
margin-bottom: 40px;
|
||||
background: transparent;
|
||||
color:#666;
|
||||
}
|
||||
|
||||
.CompetitionMenu .ant-menu-item{
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.CompetitionMenu .ant-menu-item-selected {
|
||||
color: rgba(76,172,255,1) !important;
|
||||
}
|
||||
|
||||
.CompetitionMenu{
|
||||
width: 145px;
|
||||
background: #fff;
|
||||
border: 1px solid rgba(239,239,239,1);
|
||||
padding-top: 20px;
|
||||
padding-bottom: 40px !important;
|
||||
}
|
||||
|
||||
.teamsLayoutleft{
|
||||
background: transparent !important;
|
||||
}
|
||||
|
||||
.Competitioncharts{
|
||||
font-size: 24px;
|
||||
color: rgba(5,16,26,1);
|
||||
}
|
||||
.Competitionfirst{
|
||||
width:233px;
|
||||
height:298px;
|
||||
background:rgba(250,250,250,1);
|
||||
box-shadow:0px 2px 8px 2px rgba(255,134,34,0.5);
|
||||
border-radius:5px;
|
||||
}
|
||||
.Competitionsecondary{
|
||||
width:234px;
|
||||
height:298px;
|
||||
background:rgba(250,250,250,1);
|
||||
box-shadow:0px 3px 5px 0px rgba(254,190,154,1);
|
||||
border-radius:5px;
|
||||
}
|
||||
|
||||
.Competitionthird{
|
||||
width: 234px;
|
||||
height: 298px;
|
||||
background: rgba(250,250,250,1);
|
||||
box-shadow: 0px 4px 5px 0px rgba(200,200,202,1);
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.Competition399{
|
||||
height:399px;
|
||||
}
|
||||
|
||||
.Competitiontransparent table{
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.Commonimg{
|
||||
position: absolute;
|
||||
right: -5px;
|
||||
width:93px;
|
||||
top: 10px;
|
||||
}
|
||||
|
||||
.Competitionthirdbox{
|
||||
width:234px;
|
||||
height:167px;
|
||||
background:rgba(223,223,225,1);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.Competitionfirstbox{
|
||||
width:233px;
|
||||
height:167px;
|
||||
background:rgba(255,231,160,1);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.Competitionsecondarybox{
|
||||
width:234px;
|
||||
height:167px;
|
||||
background:rgba(253,230,217,1);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.rankingimg{
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border-radius: 50% !important;
|
||||
box-shadow: 0px 0px 12px rgba(0,0,0,0.2);
|
||||
border: 2px solid #459BE5;
|
||||
}
|
||||
|
||||
.Competitioncenter{
|
||||
text-align: center;
|
||||
padding-top: 20px;
|
||||
}
|
||||
|
||||
|
||||
.jinshaifont{
|
||||
font-size: 16px;
|
||||
color: rgba(5,16,26,1);
|
||||
margin-top: 13px !important;
|
||||
}
|
||||
|
||||
.Competitionthird .ant-card-body {
|
||||
padding: 12px;
|
||||
zoom: 1;
|
||||
}
|
||||
|
||||
/*.Competitionthird .ant-card-meta-title{*/
|
||||
/*margin-bottom: 0px !important;*/
|
||||
/*}*/
|
||||
|
||||
.Competitionfirst .ant-card-body {
|
||||
padding: 12px;
|
||||
zoom: 1;
|
||||
}
|
||||
|
||||
.Competitionsecondary .ant-card-body {
|
||||
padding: 12px;
|
||||
zoom: 1;
|
||||
}
|
||||
|
||||
.center{
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.rankfonttop{
|
||||
font-size:14px;
|
||||
color:rgba(102,102,102,1);
|
||||
}
|
||||
|
||||
.rankfontmid{
|
||||
font-size:18px;
|
||||
color:rgba(102,102,102,1);
|
||||
}
|
||||
|
||||
.rankfontbottom{
|
||||
font-size:26px;
|
||||
color:rgba(165,91,41,1);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.rankfontbottoms{
|
||||
font-size:28px;
|
||||
color:rgba(165,91,41,1);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.Competitionuserimg{
|
||||
width: 64px;
|
||||
height: 63px;
|
||||
border-radius: 50%;
|
||||
border: 2px solid #459BE5;
|
||||
}
|
||||
|
||||
.CompetitionsListzhezhao{
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
width: 1206px;
|
||||
height: 100%;
|
||||
z-index: 10000;
|
||||
display: none;
|
||||
background: rgba(0,0,0,0.33);
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
font-size: 22px;
|
||||
|
||||
}
|
||||
|
||||
.relative{position: relative;}
|
||||
|
||||
.relative:hover .CompetitionsListzhezhao{
|
||||
display: block;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.image_urlbox{
|
||||
width: 790px;
|
||||
height: 340px;
|
||||
}
|
||||
|
||||
.CompetitionContents{
|
||||
background: #fff !important;
|
||||
padding: 40px;
|
||||
box-shadow: 3px 2px 12px 2px rgba(0,0,0,0.05);
|
||||
border: 1px solid rgba(239,239,239,1);
|
||||
}
|
||||
|
||||
.rankbeicenter{
|
||||
text-align: center;
|
||||
}
|
||||
.rankbei{
|
||||
font-size: 16px;
|
||||
color: rgba(119,119,119,1);
|
||||
|
||||
}
|
||||
|
||||
.youranklist{
|
||||
background: rgba(226,241,255,1);
|
||||
line-height: 50px;
|
||||
text-align: center;
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
.ranknames{
|
||||
font-size: 16px;
|
||||
color: rgba(62,62,62,1);
|
||||
}
|
||||
|
||||
.ranknameslast{
|
||||
font-size:16px;
|
||||
color:rgba(12,158,254,1);
|
||||
}
|
||||
|
||||
.textleft{
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.textright{
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.userranksclass{
|
||||
text-align: left;
|
||||
width: 18%;
|
||||
padding-left: 12px;
|
||||
margin-right: 28px;
|
||||
}
|
||||
|
||||
.Commonimgbox{
|
||||
width: 800px !important;
|
||||
}
|
||||
|
||||
.CompetitionCommonbannerfont{
|
||||
width: 350px !important;
|
||||
margin-left:10px;
|
||||
}
|
||||
|
||||
.color000{
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.cursorpointer{
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.rankfonttop{
|
||||
overflow:hidden;
|
||||
text-overflow:ellipsis;
|
||||
white-space:nowrap
|
||||
}
|
||||
|
||||
.usernamebox{
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
cursor: default;
|
||||
max-width: 100px;
|
||||
display: inherit;
|
||||
}
|
||||
|
||||
.competimgabsolute{
|
||||
position: absolute;
|
||||
left: 72px;
|
||||
bottom: -10px;
|
||||
}
|
||||
.competimgabsolute .ant-badge-count{
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
.competimgabsoluteijmg{
|
||||
position: absolute;
|
||||
left: -11px;
|
||||
bottom: 0px;
|
||||
}
|
||||
@ -0,0 +1,45 @@
|
||||
import React, { Component } from 'react';
|
||||
import {Button,Layout} from 'antd';
|
||||
import axios from 'axios';
|
||||
import {markdownToHTML,getImageUrl,AttachmentList} from 'educoder';
|
||||
|
||||
|
||||
const { Header, Footer, Sider, Content } = Layout;
|
||||
class CompetitionContents extends Component{
|
||||
constructor(props) {
|
||||
super(props)
|
||||
this.state={
|
||||
hash:undefined
|
||||
}
|
||||
}
|
||||
|
||||
componentDidMount(){
|
||||
window.document.title = '竞赛';
|
||||
this.props.MdifHasAnchorJustScorll();
|
||||
}
|
||||
|
||||
render() {
|
||||
let {mdContentdata, data} = this.props;
|
||||
//mdhash滚动
|
||||
this.props.MdifHasAnchorJustScorll();
|
||||
return (
|
||||
|
||||
<div className={"fr"}>
|
||||
{data && data.permission.editable === true ? this.props.Competitionedittype === false ? this.props.has_url === false ?
|
||||
<Button className={"fr"} type="primary" ghost onClick={() => this.props.Competitionedit()}>
|
||||
编辑
|
||||
</Button>:"":"":""}
|
||||
<div className={this.props.current_user&&this.props.current_user.admin===true||this.props.current_user&&this.props.current_user.business===true?"mt50 mb100 ":"mb100 "}>
|
||||
<Content className={"markdown-body"} dangerouslySetInnerHTML={{__html: markdownToHTML(mdContentdata===undefined?"":mdContentdata.md_content===undefined||mdContentdata.md_content===null?"":mdContentdata.md_content).replace(/▁/g, "▁▁▁")}}>
|
||||
</Content>
|
||||
|
||||
<div className={"mt30"}>
|
||||
<AttachmentList {...this.props} {...this.state} attachments={mdContentdata===undefined?[]:mdContentdata.attachments===undefined?[]:mdContentdata.attachments}></AttachmentList>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
)
|
||||
}
|
||||
}
|
||||
export default CompetitionContents;
|
||||
@ -0,0 +1,232 @@
|
||||
import React, { Component } from 'react';
|
||||
import {Button, Card, Row, Col ,Upload,Icon,message,Tabs} from 'antd';
|
||||
import axios from 'axios';
|
||||
import {getImageUrl,getUrl,appendFileSizeToUploadFileAll,appendFileSizeToUploadFile} from 'educoder';
|
||||
import TPMMDEditor from '../../../tpm/challengesnew/TPMMDEditor';
|
||||
const { TabPane } = Tabs;
|
||||
class CompetitionContentsMd extends Component{
|
||||
constructor(props) {
|
||||
super(props)
|
||||
this.contentMdRef = React.createRef();
|
||||
this.state={
|
||||
contentFileList:[],
|
||||
chartmodule_id:undefined
|
||||
}
|
||||
}
|
||||
componentDidUpdate =(prevState)=>{
|
||||
if(prevState!=this.props){
|
||||
this.getchartdata();
|
||||
}
|
||||
}
|
||||
componentDidMount(){
|
||||
window.document.title = '竞赛';
|
||||
|
||||
this.getchartdata()
|
||||
}
|
||||
|
||||
getchartdata=()=>{
|
||||
let {mdContentdata,chart_rules}=this.props;
|
||||
|
||||
// is_pdf: false
|
||||
if(this.props.module_type==="chart"){
|
||||
let type=true;
|
||||
if(chart_rules===undefined){
|
||||
|
||||
}else{
|
||||
chart_rules.rule_contents.map((items,keys)=>{
|
||||
debugger
|
||||
if(parseInt(this.props.tabkey)===items.competition_stage_id){
|
||||
console.log(items)
|
||||
this.contentMdRef.current.setValue(items.content);
|
||||
this.setState({
|
||||
contentFileList:undefined,
|
||||
chartmodule_id:items.id
|
||||
})
|
||||
type=false;
|
||||
}
|
||||
})
|
||||
|
||||
if(type===true){
|
||||
this.contentMdRef.current.setValue("");
|
||||
this.setState({
|
||||
contentFileList:undefined,
|
||||
chartmodule_id:undefined
|
||||
})
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}else{
|
||||
let contentFileList = mdContentdata===undefined?[]:mdContentdata.attachments===undefined?[]:mdContentdata.attachments.map((item) => {
|
||||
return {
|
||||
id: item.id,
|
||||
uid: item.id,
|
||||
name: appendFileSizeToUploadFile(item),
|
||||
url: item.url,
|
||||
filesize: item.filesize,
|
||||
status: 'done',
|
||||
response:{id: item.id}
|
||||
}
|
||||
})
|
||||
this.setState({
|
||||
contentFileList:contentFileList
|
||||
})
|
||||
this.contentMdRef.current.setValue(mdContentdata===undefined?"":mdContentdata.md_content===undefined?"":mdContentdata.md_content || '')
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
handleContentUploadChange = (info) => {
|
||||
if (info.file.status === 'uploading' || info.file.status === 'done' || info.file.status === 'removed') {
|
||||
let contentFileList = info.fileList;
|
||||
this.setState({ contentFileList: appendFileSizeToUploadFileAll(contentFileList) });
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
onAttachmentRemove = (file, stateName) => {
|
||||
if(file.response!=undefined){
|
||||
this.props.confirm({
|
||||
content: '是否确认删除?',
|
||||
|
||||
onOk: () => {
|
||||
this.deleteAttachment(file, stateName)
|
||||
},
|
||||
onCancel() {
|
||||
console.log('Cancel');
|
||||
},
|
||||
});
|
||||
return false;
|
||||
}
|
||||
|
||||
}
|
||||
deleteAttachment = (file, stateName) => {
|
||||
// 初次上传不能直接取uid
|
||||
const url = `/attachments/${file.response ? file.response.id : file.uid}.json`
|
||||
axios.delete(url, {
|
||||
})
|
||||
.then((response) => {
|
||||
if (response.data) {
|
||||
const { status } = response.data;
|
||||
if (status == 0) {
|
||||
console.log('--- success')
|
||||
this.props.showNotification(response.data.message);
|
||||
this.setState((state) => {
|
||||
const index = state[stateName].indexOf(file);
|
||||
const newFileList = state[stateName].slice();
|
||||
newFileList.splice(index, 1);
|
||||
return {
|
||||
[stateName]: newFileList,
|
||||
};
|
||||
});
|
||||
}
|
||||
}
|
||||
})
|
||||
.catch(function (error) {
|
||||
console.log(error);
|
||||
});
|
||||
}
|
||||
handleSubmit = () => {
|
||||
let {contentFileList}=this.state;
|
||||
const mdContnet = this.contentMdRef.current.getValue().trim();
|
||||
// if(mdContnet.length>10000){
|
||||
// this.props.showNotification("内容超过10000个字");
|
||||
// return
|
||||
// }
|
||||
let attachment_ids=undefined
|
||||
if(contentFileList!=undefined){
|
||||
attachment_ids= contentFileList.map(item => {
|
||||
return item.response ? item.response.id : item.id
|
||||
})
|
||||
}
|
||||
|
||||
let newstage_id=parseInt(this.props.tabkey)===0||null?undefined:parseInt(this.props.tabkey)
|
||||
let data={}
|
||||
if(this.props.module_type==="chart"){
|
||||
data={
|
||||
md_content_id:this.state.chartmodule_id,
|
||||
competition_module_id:this.props.module_id,
|
||||
stage_id:newstage_id,
|
||||
content:mdContnet,
|
||||
}
|
||||
}else{
|
||||
data={
|
||||
md_content_id:this.props.mdContentdata.md_id,
|
||||
competition_module_id:this.props.mdContentdata.id,
|
||||
content:mdContnet,
|
||||
attachment_ids:attachment_ids
|
||||
}
|
||||
}
|
||||
|
||||
let url=`/competitions/${this.props.match.params.identifier}/update_md_content.json`;
|
||||
axios.post(url,data
|
||||
).then((response) => {
|
||||
if(response.data.status===0){
|
||||
this.props.showNotification(response.data.message);
|
||||
this.props.getlistdata(this.props.thiskeys,this.props.tabkey);
|
||||
this.props.hideCompetitionedit();
|
||||
}else{
|
||||
this.props.showNotification(response.data.message);
|
||||
}
|
||||
}).catch((error) => {
|
||||
console.log(error)
|
||||
})
|
||||
|
||||
}
|
||||
render() {
|
||||
let {contentFileList}=this.state;
|
||||
let {chart_rules}=this.props;
|
||||
const uploadProps = {
|
||||
width: 600,
|
||||
fileList: contentFileList,
|
||||
multiple: true,
|
||||
// https://github.com/ant-design/ant-design/issues/15505
|
||||
// showUploadList={false}，然后外部拿到 fileList 数组自行渲染列表。
|
||||
// showUploadList: false,
|
||||
action: `${getUrl()}/api/attachments.json`,
|
||||
onChange: this.handleContentUploadChange,
|
||||
onRemove: (file) => this.onAttachmentRemove(file, 'contentFileList'),
|
||||
beforeUpload: (file) => {
|
||||
console.log('beforeUpload', file.name);
|
||||
const isLt150M = file.size / 1024 / 1024 < 150;
|
||||
if (!isLt150M) {
|
||||
this.props.showNotification("文件大小必须小于150MB");
|
||||
}
|
||||
return isLt150M;
|
||||
},
|
||||
};
|
||||
// console.log(this.props.tabkey)
|
||||
// console.log(chart_rules)
|
||||
console.log(this.props.mdContentdata)
|
||||
return (
|
||||
<div>
|
||||
{chart_rules===undefined?"":this.props.module_type==="chart"?<Tabs activeKey={this.props.tabkey} onChange={(e)=>this.props.Competitioncallback(e)}>
|
||||
|
||||
{chart_rules.stages.map((item,key)=>{
|
||||
return(
|
||||
<TabPane tab={item.name} key={item.id===null?0:item.id}></TabPane>
|
||||
)
|
||||
})}
|
||||
|
||||
</Tabs>:""}
|
||||
<TPMMDEditor ref={this.contentMdRef} placeholder="请输入内容说明" mdID={'courseContentMD'} refreshTimeout={1500}
|
||||
className="courseMessageMD" initValue={this.state.description}></TPMMDEditor>
|
||||
{this.props.module_type==="chart"?"":<Upload {...uploadProps} className="upload_1 newWorkUpload">
|
||||
<Button className="uploadBtn">
|
||||
<Icon type="upload" /> 上传附件
|
||||
</Button>
|
||||
(单个文件150M以内)
|
||||
</Upload>}
|
||||
|
||||
<div className="clearfix mt30 mb30">
|
||||
{/* htmlType="submit" */}
|
||||
<Button type="primary" onClick={this.handleSubmit} className="defalutSubmitbtn fl mr20">提交</Button>
|
||||
<a className="defalutCancelbtn fl" onClick={() => this.props.hideCompetitionedit()}>取消</ a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
)
|
||||
}
|
||||
}
|
||||
export default CompetitionContentsMd;
|
||||
@ -0,0 +1,64 @@
|
||||
import React, { Component } from 'react';
|
||||
import {Tabs} from 'antd';
|
||||
import axios from 'axios';
|
||||
import {markdownToHTML,getImageUrl,AttachmentList} from 'educoder';
|
||||
import CompetitionContentspdfdownload from './CompetitionContentspdfChild/CompetitionContentspdfdownload';
|
||||
import CompetitionContentspdfpeopledata from './CompetitionContentspdfChild/CompetitionContentspdfpeopledata';
|
||||
// import NoneData from "../../../courses/shixunHomework/shixunHomework";
|
||||
|
||||
const { TabPane } = Tabs;
|
||||
class CompetitionContentspdf extends Component{
|
||||
constructor(props) {
|
||||
super(props)
|
||||
this.state={
|
||||
Tabskey:"1"
|
||||
}
|
||||
}
|
||||
|
||||
componentDidMount(){
|
||||
window.document.title = '竞赛';
|
||||
let query=this.props.location&&this.props.location.search;
|
||||
const types = query.split('user_id=')
|
||||
if(types[1]===undefined){
|
||||
}else{
|
||||
this.setState({
|
||||
Tabskey:"2"
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
Competitioncallback=(key)=>{
|
||||
this.setState({
|
||||
Tabskey:key
|
||||
})
|
||||
}
|
||||
|
||||
render() {
|
||||
|
||||
|
||||
return (
|
||||
|
||||
<div className={"fr"}>
|
||||
<div className={"mb100 "}>
|
||||
<Tabs defaultActiveKey="1" onChange={(e) => this.Competitioncallback(e)} activeKey={this.state.Tabskey}>
|
||||
<TabPane tab="获奖证书下载" key="1" >
|
||||
{this.state.Tabskey==="1"?<CompetitionContentspdfdownload
|
||||
{...this.props}
|
||||
{...this.state}
|
||||
Competitioncallback={(e)=>this.Competitioncallback(e)}
|
||||
/>:""}
|
||||
</TabPane>
|
||||
<TabPane tab="完善个人信息" key="2">
|
||||
{this.state.Tabskey==="2"?<CompetitionContentspdfpeopledata
|
||||
{...this.props}
|
||||
{...this.state}
|
||||
/>:""}
|
||||
</TabPane>
|
||||
</Tabs>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
)
|
||||
}
|
||||
}
|
||||
export default CompetitionContentspdf;
|
||||
@ -0,0 +1,24 @@
|
||||
.pdfdownload {
|
||||
max-width: 791px;
|
||||
height: 40px;
|
||||
background: rgba(249, 249, 249, 1);
|
||||
line-height: 40px;
|
||||
padding-left: 15px;
|
||||
}
|
||||
|
||||
.pdfpicture {
|
||||
font-size: 16px;
|
||||
color: rgba(0, 0, 0, 1);
|
||||
}
|
||||
|
||||
.pdfdownloadfont4CACFF {
|
||||
color: #4CACFF !important;
|
||||
}
|
||||
|
||||
.pdfdownloadfont00CC5F {
|
||||
color: #00CC5F;
|
||||
}
|
||||
|
||||
.pdfdownloadfontFF6602 {
|
||||
color: #FF6602;
|
||||
}
|
||||
@ -0,0 +1,270 @@
|
||||
import React, {Component} from 'react';
|
||||
import {Button, Layout, Input, Form} from 'antd';
|
||||
import axios from 'axios';
|
||||
import {getImageUrl} from 'educoder';
|
||||
import mycompetotionchild from './mycompetotionchild.css';
|
||||
import {getHiddenName} from "../../../../user/account/AccountBasicEdit";
|
||||
import '../../../../courses/css/Courses.css'
|
||||
|
||||
export const identityMap = {"teacher": "教师", "student": "学生", "professional": "专业人士"}
|
||||
|
||||
class Mailboxvalidation extends Component {
|
||||
constructor(props) {
|
||||
super(props)
|
||||
this.state = {
|
||||
basicInfo: {},
|
||||
updating: '',
|
||||
secondsFlag: false,
|
||||
seconds: 60,
|
||||
phonebool: false,
|
||||
emailbool: false,
|
||||
formationdata: [],
|
||||
bank_account_editable: false,
|
||||
leader: false,
|
||||
bank_account: undefined,
|
||||
certification: 1
|
||||
}
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
window.document.title = '竞赛';
|
||||
// console.log("3获取用户信息");
|
||||
// console.log(this.props);
|
||||
}
|
||||
|
||||
|
||||
// 绑定邮箱
|
||||
onEmailSubmit = () => {
|
||||
this.props.form.validateFieldsAndScroll((err, values) => {
|
||||
if (!err) {
|
||||
let {id} = this.props.userdata;
|
||||
let reg = /^[a-zA-Z0-9]+([.\-_\\]*[a-zA-Z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$/;
|
||||
if (reg.test(values.email)) {
|
||||
let url = `/users/accounts/${id}/email_bind.json`
|
||||
axios.post((url), {
|
||||
email: values.email,
|
||||
code: values.emailValidateCode
|
||||
}).then((result) => {
|
||||
if (result) {
|
||||
this.props.showNotification("邮箱地址绑定成功!");
|
||||
this.hideUpdating(2);
|
||||
this.props.getdata(id);
|
||||
}
|
||||
}).catch((error) => {
|
||||
console.log(error);
|
||||
})
|
||||
} else {
|
||||
this.props.showNotification("请输入正确的邮箱地址");
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
//取消编辑
|
||||
hideUpdating = (i) => {
|
||||
if (i === 1) {
|
||||
this.props.hideUpdating(1);
|
||||
} else if (i === 2) {
|
||||
this.props.hideUpdating(2);
|
||||
|
||||
|
||||
} else if (i === 3) {
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// 获取验证码
|
||||
getCode = (index) => {
|
||||
let url = `/accounts/get_verification_code.json`
|
||||
let login = '';
|
||||
let values = this.props.form.getFieldsValue();
|
||||
if (index == 3) {
|
||||
//绑定手机号码
|
||||
login = values.phone;
|
||||
let reg = /^1\d{10}$/;
|
||||
if (reg.test(login) == false) {
|
||||
this.props.showNotification(`请先输入正确的手机号码`);
|
||||
return;
|
||||
}
|
||||
} else if (index == 4) {
|
||||
// 绑定邮箱
|
||||
login = values.email;
|
||||
let reg = /^[a-zA-Z0-9]+([.\-_\\]*[a-zA-Z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$/;
|
||||
if (reg.test(login) == false) {
|
||||
this.props.showNotification(`请先输入正确的邮箱地址`);
|
||||
return;
|
||||
}
|
||||
}
|
||||
let type = index;
|
||||
if (!login) {
|
||||
this.props.showNotification(`请先输入${index == 3 ? "手机号码" : "邮箱地址"}`);
|
||||
return;
|
||||
}
|
||||
axios.get((url), {
|
||||
params: {
|
||||
login, type
|
||||
}
|
||||
}).then((result) => {
|
||||
if (result) {
|
||||
// 倒计时
|
||||
this.setState({
|
||||
secondsFlag: true
|
||||
})
|
||||
this.remainTime();
|
||||
}
|
||||
}).catch((error) => {
|
||||
console.log(error);
|
||||
})
|
||||
}
|
||||
|
||||
// 获取验证码倒计时
|
||||
remainTime = () => {
|
||||
this.setState({
|
||||
seconds: 60
|
||||
})
|
||||
this.timer = setInterval(() => {
|
||||
let {seconds} = this.state;
|
||||
let s = parseInt(seconds) - 1;
|
||||
if (s > -1) {
|
||||
this.setState({
|
||||
seconds: s
|
||||
})
|
||||
} else {
|
||||
this.setState({
|
||||
secondsFlag: false
|
||||
})
|
||||
clearInterval(this.timer);
|
||||
}
|
||||
}, 1000)
|
||||
}
|
||||
|
||||
phonebools = () => {
|
||||
this.setState({
|
||||
phonebool: true
|
||||
})
|
||||
}
|
||||
|
||||
emailbools = () => {
|
||||
console.log("点击了邮箱");
|
||||
this.setState({
|
||||
emailbool: true
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
render() {
|
||||
const {getFieldDecorator} = this.props.form;
|
||||
const {updating, seconds, secondsFlag, basicInfo, phonebool, emailbool, certification, formationdata, bank_account_editable, leader, bank_account} = this.state
|
||||
console.log(emailbool);
|
||||
return (
|
||||
<div>
|
||||
<style>{`
|
||||
|
||||
.flexRow {
|
||||
padding: 20px 0;
|
||||
}
|
||||
.flexRow .name {
|
||||
margin-left: 12px;
|
||||
color: #666666;
|
||||
|
||||
text-align: center;
|
||||
flex: 0 0 100px;
|
||||
}
|
||||
.flexRow .description {
|
||||
margin-left: 10px;
|
||||
flex: 1;
|
||||
color: #CDCDCD;
|
||||
}
|
||||
.description span {
|
||||
margin-right: 20px;
|
||||
color: #05101A;
|
||||
}
|
||||
.flexRow .status {
|
||||
width: 100px;
|
||||
color: #28AC7F;
|
||||
text-align: right;
|
||||
}
|
||||
.flexTable .flexTable {
|
||||
border-bottom: 1px solid #EBEBEB;
|
||||
}
|
||||
|
||||
.settingForm label{
|
||||
color: #666666;
|
||||
font-size: 14px !important ;
|
||||
}
|
||||
.settingForm input {
|
||||
width: 340px;
|
||||
height: 40px;
|
||||
}
|
||||
.settingForm input.validateInput {
|
||||
width: 220px;
|
||||
}
|
||||
.settingForm .formItemInline button {
|
||||
width: 110px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
.settingForm .ant-form-item-label {
|
||||
text-align: left;
|
||||
width: 84px;
|
||||
}
|
||||
|
||||
|
||||
.formItemInline .ant-form-explain{
|
||||
position:absolute;
|
||||
bottom:-22px;
|
||||
left:0px;
|
||||
width:100%;
|
||||
}
|
||||
`}</style>
|
||||
<div className="settingForm ml38">
|
||||
<React.Fragment>
|
||||
<Form>
|
||||
<Form.Item
|
||||
label="邮箱地址"
|
||||
className="formItemInline hideRequireTag mb20 mt20"
|
||||
>
|
||||
{getFieldDecorator('email', {
|
||||
rules: [{
|
||||
// initialValue: this.state.cityDefaultValue,
|
||||
required: true,
|
||||
message: basicInfo && basicInfo.mail ? '请输入要更换的新邮箱地址' : '请输入邮箱地址',
|
||||
}],
|
||||
})(
|
||||
<Input placeholder={`${basicInfo && basicInfo.mail ? '请输入要更换的新邮箱地址' : '请输入邮箱地址'}`}></Input>
|
||||
)}
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
label="邮箱验证码"
|
||||
className="mb20 formItemInline hideRequireTag"
|
||||
>
|
||||
{getFieldDecorator('emailValidateCode', {
|
||||
rules: [{
|
||||
// initialValue: this.state.cityDefaultValue,
|
||||
required: true,
|
||||
message: '请输入邮箱收到的验证码',
|
||||
}],
|
||||
})(
|
||||
<Input placeholder="请输入邮箱收到的验证码" className="validateInput"></Input>
|
||||
)}
|
||||
<Button type="primary" disabled={secondsFlag} onClick={() => this.getCode(4)}>
|
||||
{!secondsFlag ? "获取验证码" : `重新发送${seconds}s`}</Button>
|
||||
</Form.Item>
|
||||
|
||||
<div className="mb20" style={{marginLeft: '204px'}}>
|
||||
<Button type="primary" onClick={() => this.onEmailSubmit()}>确定</Button>
|
||||
<Button type="primary grayBtn" style={{marginLeft: '20px'}}
|
||||
onClick={() => this.hideUpdating(2)}>取消</Button>
|
||||
</div>
|
||||
</Form>
|
||||
</React.Fragment>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
const Mailboxvalidations = Form.create({name: 'Mailboxvalidation'})(Mailboxvalidation);
|
||||
|
||||
export default Mailboxvalidations;
|
||||
|
||||
@ -0,0 +1,262 @@
|
||||
import React, {Component} from 'react';
|
||||
import {Button, Layout, Input, Form} from 'antd';
|
||||
import axios from 'axios';
|
||||
import {getImageUrl} from 'educoder';
|
||||
import mycompetotionchild from './mycompetotionchild.css';
|
||||
import {getHiddenName} from "../../../../user/account/AccountBasicEdit";
|
||||
import '../../../../courses/css/Courses.css'
|
||||
import RealNameCertificationModal from "../../../../user/modal/RealNameCertificationModal";
|
||||
|
||||
export const identityMap = {"teacher": "教师", "student": "学生", "professional": "专业人士"}
|
||||
|
||||
class Phonenumberverification extends Component {
|
||||
constructor(props) {
|
||||
super(props)
|
||||
this.state = {
|
||||
updating: '',
|
||||
secondsFlag: false,
|
||||
seconds: 60,
|
||||
phonebool: false,
|
||||
emailbool: false,
|
||||
formationdata: [],
|
||||
bank_account_editable: false,
|
||||
leader: false,
|
||||
bank_account: undefined,
|
||||
certification: 1
|
||||
}
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
window.document.title = '竞赛';
|
||||
// console.log("获取用户信息");
|
||||
// console.log(this.props);
|
||||
}
|
||||
|
||||
|
||||
// 绑定手机
|
||||
onPhoneSubmit = () => {
|
||||
this.props.form.validateFieldsAndScroll((err, values) => {
|
||||
if (!err) {
|
||||
let {id} = this.props.userdata;
|
||||
let reg = /^1\d{10}$/;
|
||||
if (reg.test(values.phone)) {
|
||||
let url = `/users/accounts/${id}/phone_bind.json`
|
||||
axios.post((url), {
|
||||
phone: values.phone,
|
||||
code: values.phoneValidateCode
|
||||
}).then((result) => {
|
||||
if (result) {
|
||||
this.props.showNotification("手机号码绑定成功!");
|
||||
this.props.hideUpdating(1)
|
||||
this.props.getdata(id);
|
||||
}
|
||||
}).catch((error) => {
|
||||
console.log(error);
|
||||
})
|
||||
} else {
|
||||
this.props.showNotification("请输入有效的11位手机号码");
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
//取消编辑
|
||||
hideUpdating = (i) => {
|
||||
if (i === 1) {
|
||||
this.props.hideUpdating(1);
|
||||
} else if (i === 2) {
|
||||
this.props.hideUpdating(2);
|
||||
|
||||
} else if (i === 3) {
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// 获取验证码
|
||||
getCode = (index) => {
|
||||
let url = `/accounts/get_verification_code.json`
|
||||
let login = '';
|
||||
let values = this.props.form.getFieldsValue();
|
||||
if (index == 3) {
|
||||
//绑定手机号码
|
||||
login = values.phone;
|
||||
let reg = /^1\d{10}$/;
|
||||
if (reg.test(login) == false) {
|
||||
this.props.showNotification(`请先输入正确的手机号码`);
|
||||
return;
|
||||
}
|
||||
} else if (index == 4) {
|
||||
// 绑定邮箱
|
||||
login = values.email;
|
||||
let reg = /^[a-zA-Z0-9]+([.\-_\\]*[a-zA-Z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$/;
|
||||
if (reg.test(login) == false) {
|
||||
this.props.showNotification(`请先输入正确的邮箱地址`);
|
||||
return;
|
||||
}
|
||||
}
|
||||
let type = index;
|
||||
if (!login) {
|
||||
this.props.showNotification(`请先输入${index == 3 ? "手机号码" : "邮箱地址"}`);
|
||||
return;
|
||||
}
|
||||
axios.get((url), {
|
||||
params: {
|
||||
login, type
|
||||
}
|
||||
}).then((result) => {
|
||||
if (result) {
|
||||
// 倒计时
|
||||
this.setState({
|
||||
secondsFlag: true
|
||||
})
|
||||
this.remainTime();
|
||||
}
|
||||
}).catch((error) => {
|
||||
console.log(error);
|
||||
})
|
||||
}
|
||||
|
||||
// 获取验证码倒计时
|
||||
remainTime = () => {
|
||||
this.setState({
|
||||
seconds: 60
|
||||
})
|
||||
this.timer = setInterval(() => {
|
||||
let {seconds} = this.state;
|
||||
let s = parseInt(seconds) - 1;
|
||||
if (s > -1) {
|
||||
this.setState({
|
||||
seconds: s
|
||||
})
|
||||
} else {
|
||||
this.setState({
|
||||
secondsFlag: false
|
||||
})
|
||||
clearInterval(this.timer);
|
||||
}
|
||||
}, 1000)
|
||||
}
|
||||
|
||||
phonebools = () => {
|
||||
this.setState({
|
||||
phonebool: true
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
render() {
|
||||
const {getFieldDecorator} = this.props.form;
|
||||
const {updating, seconds, secondsFlag, phonebool, emailbool, certification, formationdata, bank_account_editable, leader, bank_account} = this.state
|
||||
const {basicInfo} = this.props
|
||||
console.log(emailbool);
|
||||
return (
|
||||
<div>
|
||||
<style>{`
|
||||
|
||||
.flexRow {
|
||||
padding: 20px 0;
|
||||
}
|
||||
.flexRow .name {
|
||||
margin-left: 12px;
|
||||
color: #666666;
|
||||
|
||||
text-align: center;
|
||||
flex: 0 0 100px;
|
||||
}
|
||||
.flexRow .description {
|
||||
margin-left: 10px;
|
||||
flex: 1;
|
||||
color: #CDCDCD;
|
||||
}
|
||||
.description span {
|
||||
margin-right: 20px;
|
||||
color: #05101A;
|
||||
}
|
||||
.flexRow .status {
|
||||
width: 100px;
|
||||
color: #28AC7F;
|
||||
text-align: right;
|
||||
}
|
||||
.flexTable .flexTable {
|
||||
border-bottom: 1px solid #EBEBEB;
|
||||
}
|
||||
|
||||
.settingForm label{
|
||||
color: #666666;
|
||||
font-size: 14px !important ;
|
||||
}
|
||||
.settingForm input {
|
||||
width: 340px;
|
||||
height: 40px;
|
||||
}
|
||||
.settingForm input.validateInput {
|
||||
width: 220px;
|
||||
}
|
||||
.settingForm .formItemInline button {
|
||||
width: 110px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
.settingForm .ant-form-item-label {
|
||||
text-align: left;
|
||||
width: 84px;
|
||||
}
|
||||
.formItemInline .ant-form-explain{
|
||||
position:absolute;
|
||||
bottom:-22px;
|
||||
left:0px;
|
||||
width:100%;
|
||||
}
|
||||
`}</style>
|
||||
<div className="settingForm ml38">
|
||||
<React.Fragment>
|
||||
<Form>
|
||||
<Form.Item
|
||||
label="你的手机号"
|
||||
className="formItemInline hideRequireTag mb20 mt20"
|
||||
>
|
||||
{getFieldDecorator('phone', {
|
||||
rules: [{
|
||||
// initialValue: this.state.cityDefaultValue,
|
||||
required: true,
|
||||
message: `请输入要${basicInfo.phone ? '更换' : '绑定'}的手机号码`,
|
||||
}],
|
||||
})(
|
||||
<Input placeholder={`请输入要${basicInfo.phone ? '更换' : '绑定'}的手机号码`}></Input>
|
||||
)}
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
label="手机验证码"
|
||||
className="mb20 formItemInline hideRequireTag"
|
||||
>
|
||||
{getFieldDecorator('phoneValidateCode', {
|
||||
rules: [{
|
||||
// initialValue: this.state.cityDefaultValue,
|
||||
required: true,
|
||||
message: '请输入手机获取的验证码',
|
||||
}],
|
||||
})(
|
||||
<Input placeholder="请输入手机获取的验证码" className="validateInput"></Input>
|
||||
)}
|
||||
<Button type="primary" disabled={secondsFlag} onClick={() => this.getCode(3)}>
|
||||
{!secondsFlag ? "获取验证码" : `重新发送${seconds}s`}
|
||||
</Button>
|
||||
</Form.Item>
|
||||
|
||||
<div className="mb20" style={{marginLeft: '204px'}}>
|
||||
<Button type="primary" onClick={() => this.onPhoneSubmit()}>确定</Button>
|
||||
<Button type="primary grayBtn" style={{marginLeft: '20px'}}
|
||||
onClick={() => this.hideUpdating(1)}>取消</Button>
|
||||
</div>
|
||||
</Form>
|
||||
</React.Fragment>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
const Phonenumberverifications = Form.create({name: 'Phonenumberverification'})(Phonenumberverification);
|
||||
|
||||
export default Phonenumberverifications;
|
||||
|
||||
@ -0,0 +1,314 @@
|
||||
/*垂直布局
|
||||
|
||||
一
|
||||
二
|
||||
三
|
||||
*/
|
||||
.flexdirectionjust {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
|
||||
.directstwebkitflex {
|
||||
display: flex;
|
||||
display: -webkit-flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.diredisplayitflex {
|
||||
display: flex;
|
||||
display: -webkit-flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/*垂直布局*/
|
||||
/*靠左侧
|
||||
一 二 三 四 五 六 七 八
|
||||
*/
|
||||
.flexdirection {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.flexdirections {
|
||||
display: flex;
|
||||
flex-direction: initial;
|
||||
}
|
||||
|
||||
/*靠左侧
|
||||
*/
|
||||
|
||||
|
||||
/*靠右侧八 七 六 五 四 三 二 一*/
|
||||
.flexdirectionss {
|
||||
display: flex;
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
|
||||
|
||||
/*垂直布局
|
||||
一
|
||||
二
|
||||
三
|
||||
四
|
||||
*/
|
||||
.flexdidirectionss {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/*垂直布局
|
||||
四
|
||||
三
|
||||
二
|
||||
一
|
||||
*/
|
||||
.flexdidireverses {
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
|
||||
.fontcolorsysl {
|
||||
color: #FF0000
|
||||
}
|
||||
|
||||
.fontcolorsyslhei {
|
||||
color: #000000
|
||||
}
|
||||
|
||||
.fontcolorsyslhui {
|
||||
color: #888888
|
||||
}
|
||||
|
||||
.fontcolorsyslhui1 {
|
||||
color: #666666;
|
||||
}
|
||||
|
||||
.fontcolorsysllan {
|
||||
color: #4CACFF
|
||||
}
|
||||
|
||||
.fontcolorsysljin {
|
||||
color: #DD7600
|
||||
}
|
||||
|
||||
.w200 {
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
.w64 {
|
||||
width: 64px;
|
||||
}
|
||||
|
||||
.w60 {
|
||||
width: 60px;
|
||||
}
|
||||
|
||||
.w98 {
|
||||
width: 98px;
|
||||
}
|
||||
|
||||
.myysllineheight {
|
||||
line-height: 40px;
|
||||
}
|
||||
|
||||
.myyslminwidth {
|
||||
min-width: 60px;
|
||||
}
|
||||
|
||||
.myyslminwidth276 {
|
||||
width: 276px;
|
||||
}
|
||||
|
||||
.buttongo {
|
||||
background: #E7E7E7;
|
||||
border: 1px solid #E7E7E7;
|
||||
width: 60px;
|
||||
height: 30px;
|
||||
border-radius: 4px;
|
||||
color: #999999;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.buttongo2 {
|
||||
background: #4CACFF;
|
||||
border: 1px solid #4CACFF;
|
||||
width: 64px;
|
||||
height: 32px;
|
||||
border-radius: 4px;
|
||||
color: #FFFFFF;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.fontwenzi {
|
||||
text-align: center;
|
||||
line-height: 30px;
|
||||
}
|
||||
|
||||
.mt17 {
|
||||
margin-top: 17px;
|
||||
}
|
||||
|
||||
.mt36 {
|
||||
margin-top: 36px;
|
||||
}
|
||||
|
||||
.mt23 {
|
||||
margin-top: 23px;
|
||||
}
|
||||
|
||||
.mt19 {
|
||||
margin-top: 19px;
|
||||
}
|
||||
|
||||
.mt23 {
|
||||
margin-top: 23px;
|
||||
}
|
||||
|
||||
.mt34 {
|
||||
margin-top: 34px;
|
||||
}
|
||||
|
||||
.ml11 {
|
||||
margin-left: 11px;
|
||||
}
|
||||
|
||||
.ml38 {
|
||||
margin-left: 38px;
|
||||
}
|
||||
|
||||
.ml7 {
|
||||
margin-left: 7px;
|
||||
}
|
||||
|
||||
.colorgreenlight {
|
||||
color: #6EC76E
|
||||
}
|
||||
|
||||
.colorgreenorg {
|
||||
color: #FF7300;
|
||||
}
|
||||
|
||||
.borcolors {
|
||||
border: 1px solid #4CACFF;
|
||||
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.mycompitcursor {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.basicForm {
|
||||
background: #fff;
|
||||
padding: 30px;
|
||||
margin-bottom: 10px;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
min-height: 390px;
|
||||
}
|
||||
|
||||
.basicForm .title {
|
||||
font-size: 16px;
|
||||
padding-left: 30px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.flexTable {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.flexRow {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.mb15 {
|
||||
margin-bottom: 15px !important;
|
||||
}
|
||||
|
||||
/* BUTTOn */
|
||||
.ant-btn {
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
button.ant-btn.ant-btn-primary.grayBtn {
|
||||
background: #CBCBCB;
|
||||
border-color: #CBCBCB;
|
||||
}
|
||||
|
||||
.borderBottom {
|
||||
border-bottom: 1px solid #4CACFF;
|
||||
}
|
||||
|
||||
/* form ---------------- START */
|
||||
.formItemInline {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.formItemInline .ant-form-item-control-wrapper {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.hideRequireTag .ant-form-item-required:before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
/* .basicForm .ant-form-item-label {
|
||||
width: 100px;
|
||||
padding-right: 10px;
|
||||
}
|
||||
.basicForm .ant-form-item-label label {
|
||||
color: #979797
|
||||
} */
|
||||
|
||||
|
||||
.courseNormalForm .ant-select-show-search {
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.courseNormalForm .ant-select-auto-complete.ant-select .ant-input {
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.courseNormalForm .ant-select-search__field__mirror {
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.courseNormalForm .ant-input-lg {
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.courseNormalForm .ant-select-selection--single {
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.courseNormalForm .ant-select-auto-complete.ant-select .ant-select-selection--single {
|
||||
height: 40px
|
||||
}
|
||||
|
||||
.courseNormalForm .ant-input-affix-wrapper {
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
/* 职业 */
|
||||
.courseNormalForm .ant-select-selection-selected-value {
|
||||
line-height: 38px
|
||||
}
|
||||
|
||||
.courseNormalForm input {
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.w300 {
|
||||
width: 300px;
|
||||
}
|
||||
|
||||
.w56 {
|
||||
width: 56px;
|
||||
}
|
||||
@ -0,0 +1,92 @@
|
||||
import React, { Component } from 'react';
|
||||
|
||||
import { Redirect } from 'react-router';
|
||||
|
||||
import { Route, Link, Switch } from "react-router-dom";
|
||||
|
||||
import Loading from '../../Loading';
|
||||
|
||||
import Loadable from 'react-loadable';
|
||||
import { TPMIndexHOC } from '../tpm/TPMIndexHOC';
|
||||
import { CNotificationHOC } from '../courses/common/CNotificationHOC';
|
||||
|
||||
//新版竞赛首页
|
||||
const CompetitionsIndex = Loadable({
|
||||
loader: () => import('./Competitimain/CompetitionsIndex'),
|
||||
loading: Loading,
|
||||
})
|
||||
|
||||
//竞赛详情页
|
||||
const CompetitionCommon=Loadable({
|
||||
loader: () => import('./Competitioncommon/CompetitionCommon'),
|
||||
loading: Loading,
|
||||
})
|
||||
|
||||
|
||||
//战队详情
|
||||
const CompetitionTeams = Loadable({
|
||||
loader: () => import('./Competition_teams/Competitionteams'),
|
||||
loading: Loading,
|
||||
})
|
||||
|
||||
//团队竞赛报名
|
||||
const Registration = Loadable({
|
||||
loader: () => import('../competition/Registration'),
|
||||
loading: Loading,
|
||||
});
|
||||
|
||||
class Competitions extends Component {
|
||||
constructor(props) {
|
||||
super(props)
|
||||
}
|
||||
|
||||
componentDidMount(){
|
||||
|
||||
window.document.title = '竞赛';
|
||||
}
|
||||
|
||||
render() {
|
||||
|
||||
return (
|
||||
<div className="newMain clearfix">
|
||||
|
||||
<Switch>
|
||||
|
||||
{/*新版竞赛战队详情*/}
|
||||
<Route path="/competitions/:identifier/competition_teams/:competition_team_id"
|
||||
render={
|
||||
(props) => (<CompetitionTeams {...this.props} {...props} {...this.state} />)
|
||||
}
|
||||
></Route>
|
||||
|
||||
|
||||
{/*新版竞赛报名*/}
|
||||
<Route
|
||||
path="/competitions/:identifier/enroll"
|
||||
render={
|
||||
(props) => (<Registration {...this.props} {...props} {...this.state}/>)
|
||||
}
|
||||
/>
|
||||
|
||||
{/*新版竞赛详情页面*/}
|
||||
<Route path="/competitions/:identifier"
|
||||
render={
|
||||
(props) => (<CompetitionCommon {...this.props} {...props} {...this.state} />)
|
||||
}
|
||||
></Route>
|
||||
|
||||
{/*新版竞赛首页*/}
|
||||
<Route path="/competitions"
|
||||
render={
|
||||
(props) => (<CompetitionsIndex {...this.props} {...props} {...this.state} />)
|
||||
}
|
||||
></Route>
|
||||
|
||||
</Switch>
|
||||
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default CNotificationHOC() (TPMIndexHOC (Competitions)) ;
|
||||
@ -0,0 +1,462 @@
|
||||
/*
|
||||
* @Description: undefined
|
||||
* @Author: tangjiang
|
||||
* @Date: 2019-11-15 11:02:49
|
||||
* @Last Modified by: tangjiang
|
||||
* @Last Modified time: 2019-11-18 16:52:38
|
||||
*/
|
||||
|
||||
import './index.scss';
|
||||
|
||||
import React from 'react';
|
||||
import { Table, Button, Dropdown, Icon, Menu, Card, Input, Select, Tag } from 'antd';
|
||||
import { connect } from 'react-redux';
|
||||
import actions from '../../redux/actions';
|
||||
import MultipTags from './components/multiptags';
|
||||
import { Link } from 'react-router-dom';
|
||||
import CONST from '../../constants';
|
||||
|
||||
const {tagBackground, diffText} = CONST;
|
||||
const { Search } = Input;
|
||||
const { Option } = Select;
|
||||
// import reqwest from 'reqwest';
|
||||
/**
|
||||
* 下拉菜单
|
||||
*/
|
||||
const maps = {
|
||||
'categoryMenu': [
|
||||
{
|
||||
'key': '0',
|
||||
'name': '全部',
|
||||
'value': '0'
|
||||
},
|
||||
{
|
||||
'key': '1',
|
||||
'name': '程序设计基础',
|
||||
'value': '1'
|
||||
},
|
||||
{
|
||||
'key': '2',
|
||||
'name': '数据结构与计算',
|
||||
'value': '2'
|
||||
}
|
||||
],
|
||||
'difficultMenu': [
|
||||
{
|
||||
'key': '1',
|
||||
'name': '简单',
|
||||
'value': '1'
|
||||
},
|
||||
{
|
||||
'key': '2',
|
||||
'name': '中等',
|
||||
'value': '2'
|
||||
},
|
||||
{
|
||||
'key': '3',
|
||||
'name': '困难',
|
||||
'value': '3'
|
||||
}
|
||||
],
|
||||
'statusMenu': [
|
||||
{
|
||||
'key': '-1',
|
||||
'name': '未做',
|
||||
'value': '-1'
|
||||
},
|
||||
{
|
||||
'key': '0',
|
||||
'name': '未通过',
|
||||
'value': '0'
|
||||
},
|
||||
{
|
||||
'key': '1',
|
||||
'name': '已通过',
|
||||
'value': '1'
|
||||
}
|
||||
],
|
||||
'come_fromMenu': [
|
||||
{
|
||||
'key': 'all',
|
||||
'name': '全部',
|
||||
'value': 'all'
|
||||
},
|
||||
{
|
||||
'key': 'mine',
|
||||
'name': '我创建的',
|
||||
'value': 'mine'
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
const testMaps = {
|
||||
category: {
|
||||
1: '程序设计基础',
|
||||
2: '数据结构与算法'
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 表格列
|
||||
*/
|
||||
const options = {
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
fixed: 'right',
|
||||
width: 100,
|
||||
render: (text, record) => (
|
||||
<span>
|
||||
<Button type="primary">
|
||||
<Link to={`/problems/${record.identifier}/edit`}>编辑</Link>
|
||||
</Button>
|
||||
</span>
|
||||
),
|
||||
}
|
||||
const columns = [
|
||||
{
|
||||
title: '标题',
|
||||
dataIndex: 'name',
|
||||
render: (name, record) => <Link style={{ color: '#459be5' }} to={`/myproblems/${record.identifier}`}>{name}</Link>
|
||||
},
|
||||
{
|
||||
title: '分类',
|
||||
dataIndex: 'category',
|
||||
width: '20%',
|
||||
align: 'center',
|
||||
render: (category) => <span>{category ? testMaps['category'][+category] : '-'}</span>
|
||||
},
|
||||
{
|
||||
title: '难度',
|
||||
dataIndex: 'difficult',
|
||||
align: 'center',
|
||||
width: '15%',
|
||||
render: (difficult) => {
|
||||
if (difficult) {
|
||||
return <Tag color={tagBackground[+difficult]}>{diffText[+difficult]}</Tag>
|
||||
} else {
|
||||
return '-';
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '热度',
|
||||
dataIndex: 'hack_user_lastest_codes_count',
|
||||
sorter: true,
|
||||
align: 'center',
|
||||
width: '10%'
|
||||
},
|
||||
{
|
||||
title: '通过率',
|
||||
dataIndex: 'passed_rate',
|
||||
sorter: true,
|
||||
align:'right',
|
||||
width: '10%',
|
||||
render: val => <span>{`${val}%`}</span>
|
||||
},
|
||||
];
|
||||
|
||||
class DeveloperHome extends React.PureComponent {
|
||||
state = {
|
||||
data: [],
|
||||
loading: false,
|
||||
searchParams: {
|
||||
search: '', // 查询关键字
|
||||
'come_from': '', // 来源
|
||||
difficult: '', // 难易度
|
||||
status: '', // 未做
|
||||
category: '', // 分类
|
||||
'sort_by': '', // 排序
|
||||
'sort_direction': '', // 排序方向
|
||||
page: 1, // 当前页数
|
||||
limit: 10 // 每页显示条件
|
||||
},
|
||||
columns: columns,
|
||||
searchInfo: []
|
||||
};
|
||||
|
||||
componentDidMount() {
|
||||
// 是否是我的，如果是我的 显示编辑按钮
|
||||
const { isMySource } = this.props;
|
||||
if (isMySource) {
|
||||
this.handleFilterSearch({come_from: 'mine'});
|
||||
let _columns = columns.concat([options]);
|
||||
this.setState({
|
||||
columns: _columns
|
||||
});
|
||||
} else {
|
||||
this.fetchData();
|
||||
}
|
||||
|
||||
const {hacks_count} = this.props.ojListReducer;
|
||||
this.setState({
|
||||
pagination: {
|
||||
total: hacks_count
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
handleTableChange = (pagination, filters, sorter) => {
|
||||
const {field, order} = sorter;
|
||||
const {current, pageSize} = pagination;
|
||||
this.handleFilterSearch({
|
||||
sort_by: field,
|
||||
sort_direction: order === 'descend' ? 'desc' : 'asc',
|
||||
page: current,
|
||||
limit: pageSize
|
||||
});
|
||||
this.props.changePaginationInfo(pagination);
|
||||
};
|
||||
|
||||
fetchData = () => {
|
||||
this.props.fetchOJList(this.state.searchParams);
|
||||
};
|
||||
|
||||
/**
|
||||
* 根据类型获取下拉菜单
|
||||
* @param type 类型
|
||||
* @param handleClick 处理函数
|
||||
*/
|
||||
getMenuItems = (type, handleClick) => {
|
||||
return (
|
||||
<Menu onClick={handleClick}>
|
||||
{
|
||||
maps[type].map((item) => {
|
||||
return (
|
||||
<Menu.Item key={item.key}>
|
||||
{item.name}
|
||||
</Menu.Item>
|
||||
)
|
||||
})
|
||||
}
|
||||
</Menu>
|
||||
)
|
||||
};
|
||||
|
||||
getOptionsItem = (type) => {
|
||||
return maps[type].map(item => {
|
||||
return <Option key={item.key} value={item.value}>{item.name}</Option>
|
||||
});
|
||||
}
|
||||
// 点击条件时加载数据
|
||||
handleFilterSearch = (obj) => {
|
||||
const searchParams = Object.assign({}, this.state.searchParams, obj);
|
||||
this.setState({
|
||||
searchParams: searchParams
|
||||
}, () => {
|
||||
this.fetchData();
|
||||
});
|
||||
}
|
||||
|
||||
// 添加显示搜索条件
|
||||
addShowFilterCtx = (obj) => {
|
||||
const {searchInfo} = this.state
|
||||
const index = searchInfo.findIndex(item => item.type === obj.type);
|
||||
let tempArr = [...searchInfo];
|
||||
if (index > -1) {
|
||||
tempArr[index] = obj;
|
||||
} else {
|
||||
tempArr.push(obj);
|
||||
}
|
||||
this.setState({
|
||||
searchInfo: tempArr
|
||||
});
|
||||
}
|
||||
/**
|
||||
* 搜索输入框
|
||||
* @param value 输入框值
|
||||
*/
|
||||
handleInputSearch = (value) => {
|
||||
value = value.trim();
|
||||
// if (value.length === 0) return;
|
||||
this.handleFilterSearch({search: value});
|
||||
}
|
||||
// handleSearchChange = (e) => {
|
||||
// console.log(e.target.value);
|
||||
// const value = e.target.value.trim();
|
||||
// }
|
||||
// 下拉类别菜单
|
||||
handleCategoryMenuClick = (item) => {
|
||||
this.addShowFilterCtx({
|
||||
type: 'category',
|
||||
key: item.key
|
||||
});
|
||||
this.handleFilterSearch({category: +item.key === 0 ? '' : +item.key});
|
||||
}
|
||||
// 难度下拉
|
||||
handleHardMenuClick = (item) => {
|
||||
this.addShowFilterCtx({
|
||||
type: 'difficult',
|
||||
key: item.key
|
||||
});
|
||||
this.handleFilterSearch({difficult: +item.key});
|
||||
}
|
||||
// 状态下拉
|
||||
handleSatusMenuClick = (item) => {
|
||||
this.addShowFilterCtx({
|
||||
type: 'status',
|
||||
key: item.key
|
||||
});
|
||||
this.handleFilterSearch({status: +item.key});
|
||||
}
|
||||
// 来源下拉
|
||||
handleOriginMenuClick = (item) => {
|
||||
|
||||
this.addShowFilterCtx({
|
||||
type: 'come_from',
|
||||
key: item.key
|
||||
});
|
||||
|
||||
this.handleFilterSearch({come_from: item.key === 'all' ? '' : item.key});
|
||||
|
||||
if (item.key !== 'all') {
|
||||
let _columns = columns.concat([options]);
|
||||
this.setState({
|
||||
columns: _columns
|
||||
});
|
||||
} else {
|
||||
this.setState({
|
||||
columns: columns
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
handleTagClose = (info) => {
|
||||
|
||||
this.handleFilterSearch({[info.type]: ''});
|
||||
// 移除 searcInfo 中的数据
|
||||
const { type } = info;
|
||||
let tempArr = [...this.state.searchInfo];
|
||||
const index = tempArr.findIndex(item => item.type === type);
|
||||
if (index > -1) tempArr.splice(index, 1);
|
||||
this.setState({
|
||||
searchInfo: tempArr
|
||||
});
|
||||
if (info.type === 'come_from' && info.key === 'mine') {
|
||||
this.setState({
|
||||
columns: columns
|
||||
});
|
||||
}
|
||||
}
|
||||
render () {
|
||||
// const { testReducer, handleClick } = this.props;
|
||||
const {
|
||||
ojListReducer: {hacks_list, top_data, hacks_count},
|
||||
pagination
|
||||
} = this.props;
|
||||
const {passed_count = 0, simple_count = 0, medium_count = 0, diff_count = 0} = top_data;
|
||||
const { columns } = this.state;
|
||||
|
||||
// 渲染条件内容
|
||||
const renderSearch = () => {
|
||||
return this.state.searchInfo.map(info => {
|
||||
let ctx = '';
|
||||
const arrs = maps[`${info.type}Menu`];
|
||||
arrs.forEach(item => {
|
||||
if (item.key === info.key) ctx = item.name;
|
||||
});
|
||||
return (
|
||||
<Tag
|
||||
closable
|
||||
className={'search_tag_style'}
|
||||
key={info.type}
|
||||
onClose={() => this.handleTagClose(info)}
|
||||
>{ctx}</Tag>
|
||||
)});
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="developer-list">
|
||||
<div className="ant-spin-container">
|
||||
<div className={'banner-wrap'}></div>
|
||||
<div className="educontent">
|
||||
<div className={'card-top'}>
|
||||
<div className="search-params">
|
||||
<p className={'save-question'}>已解决 <span className={''}>{passed_count}</span> / {hacks_count} 题</p>
|
||||
<div className={'question-level'}>
|
||||
<MultipTags type="success" text="简单" numb={simple_count} style={{ marginRight: '20px' }}/>
|
||||
<MultipTags type="warning" text="中等" numb={medium_count} style={{ marginRight: '20px' }}/>
|
||||
<MultipTags type="error" text="困难" numb={diff_count}/>
|
||||
</div>
|
||||
<Button type="primary">
|
||||
<Link to="/problems/new">新建</Link>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<div className={'card-table'}>
|
||||
<div bordered={false} className={'filter_ctx_area'}>
|
||||
<div>
|
||||
<Dropdown className={'dropdonw-style'} placement="bottomLeft" overlay={this.getMenuItems('categoryMenu', this.handleCategoryMenuClick)}>
|
||||
<span className={'dropdown-span'}>分类 <Icon type="down"/></span>
|
||||
</Dropdown>
|
||||
<Dropdown className={'dropdonw-style'} placement="bottomLeft" overlay={this.getMenuItems('difficultMenu', this.handleHardMenuClick)}>
|
||||
<span className={'dropdown-span'}>难度 <Icon type="down"/></span>
|
||||
</Dropdown>
|
||||
<Dropdown className={'dropdonw-style'} placement="bottomLeft" overlay={this.getMenuItems('statusMenu', this.handleSatusMenuClick)}>
|
||||
<span className={'dropdown-span'}>状态 <Icon type="down"/></span>
|
||||
</Dropdown>
|
||||
<Dropdown className={'dropdonw-style'} placement="bottomLeft" overlay={this.getMenuItems('come_fromMenu', this.handleOriginMenuClick)}>
|
||||
<span className={'dropdown-span'}>来源 <Icon type="down"/></span>
|
||||
</Dropdown>
|
||||
</div>
|
||||
|
||||
<div className={'choice_ctx'}>
|
||||
{renderSearch()}
|
||||
</div>
|
||||
<Search
|
||||
placeholder="输入标题进行搜索"
|
||||
onChange={this.handleSearchChange}
|
||||
onSearch={value => this.handleInputSearch(value)}
|
||||
style={{ width: 320, float: 'right' }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Card bordered={false} style={{ marginTop: '2px'}}>
|
||||
<Table
|
||||
columns={columns}
|
||||
rowKey={record => Math.random()}
|
||||
dataSource={hacks_list}
|
||||
pagination={pagination}
|
||||
onChange={this.handleTableChange}
|
||||
/>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {*} state store
|
||||
* @param {*} ownProps DeveloperHome 中的 props
|
||||
*/
|
||||
const mapStateToProps = (state, ownProps) => {
|
||||
const {
|
||||
testReducer,
|
||||
ojListReducer,
|
||||
commonReducer
|
||||
} = state;
|
||||
|
||||
const { pagination } = ojListReducer;
|
||||
|
||||
return {
|
||||
testReducer,
|
||||
ojListReducer,
|
||||
isMySource: commonReducer.isMySource,
|
||||
pagination
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
const mapDispatchToProps = (dispatch) => ({
|
||||
handleClick: () => dispatch(actions.toggleTodo()),
|
||||
fetchOJList: (params) => dispatch(actions.getOJList(params)),
|
||||
changePaginationInfo: (obj) => dispatch(actions.changePaginationInfo(obj)),
|
||||
});
|
||||
|
||||
export default connect(
|
||||
mapStateToProps,
|
||||
mapDispatchToProps
|
||||
)(DeveloperHome);
|
||||
// export default DeveloperHome;
|
||||
@ -0,0 +1,154 @@
|
||||
/*
|
||||
* @Description: 右侧代码块控制台
|
||||
* @Author: tangjiang
|
||||
* @Github:
|
||||
* @Date: 2019-11-27 16:02:36
|
||||
* @LastEditors: tangjiang
|
||||
* @LastEditTime: 2019-11-28 16:48:50
|
||||
*/
|
||||
import './index.scss';
|
||||
import React, { useState, useRef } from 'react';
|
||||
import { Tabs, Button, Icon } from 'antd';
|
||||
import { connect } from 'react-redux';
|
||||
import InitTabCtx from '../initTabCtx';
|
||||
import ExecResult from '../execResult';
|
||||
import actions from '../../../../redux/actions';
|
||||
|
||||
const { TabPane } = Tabs;
|
||||
const ControlSetting = (props) => {
|
||||
|
||||
const {
|
||||
inputValue,
|
||||
loading,
|
||||
submitLoading,
|
||||
identifier,
|
||||
excuteState,
|
||||
commitRecordDetail,
|
||||
changeLoadingState,
|
||||
changeSubmitLoadingStatus,
|
||||
showOrHideControl,
|
||||
// debuggerCode
|
||||
updateCode,
|
||||
onSubmitForm
|
||||
} = props;
|
||||
const [defaultActiveKey, setDefaultActiveKey] = useState('1'); // 当前选中的tab
|
||||
const [showTextResult, setShowTextResult] = useState(false); // 是否点击控制台按钮
|
||||
const formRef = useRef(null);
|
||||
|
||||
const classNames = `control_tab ${showTextResult ? 'move_up move_up_final' : 'move_down_final'}`;
|
||||
|
||||
// 切换tab
|
||||
const handleTabChange = (key) => {
|
||||
setDefaultActiveKey(key);
|
||||
}
|
||||
|
||||
// 显示/隐藏tab
|
||||
const handleShowControl = () => {
|
||||
setShowTextResult(!showTextResult);
|
||||
showOrHideControl(!showTextResult);
|
||||
}
|
||||
|
||||
// 调试代码
|
||||
const handleTestCode = (e) => {
|
||||
// console.log(formRef.current.handleTestCodeFormSubmit);
|
||||
// 调出控制台界面
|
||||
setShowTextResult(true);
|
||||
showOrHideControl(true);
|
||||
formRef.current.handleTestCodeFormSubmit(() => {
|
||||
setDefaultActiveKey('2');
|
||||
});
|
||||
}
|
||||
|
||||
// 提交
|
||||
const handleSubmit = (e) => {
|
||||
e.preventDefault();
|
||||
changeSubmitLoadingStatus(true)
|
||||
onSubmitForm && onSubmitForm();
|
||||
}
|
||||
|
||||
// 处理调度代码
|
||||
const handleDebuggerCode = (values) => {
|
||||
// 改变状态值
|
||||
changeLoadingState(true);
|
||||
// 调用代码保存接口, 成功后再调用调试接口
|
||||
updateCode(identifier, values, 'debug');
|
||||
// 调用调试接口
|
||||
// debuggerCode(identifier, values);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="pane_control_area">
|
||||
<Tabs
|
||||
className={classNames}
|
||||
activeKey={defaultActiveKey}
|
||||
tabBarStyle={{ backgroundColor: '#000', color: '#fff' }}
|
||||
onChange={handleTabChange}
|
||||
>
|
||||
<TabPane tab={'自定义测试用例'} key={'1'} style={{ height: '280px', overflowY: 'auto' }}>
|
||||
<InitTabCtx
|
||||
inputValue={inputValue}
|
||||
wrappedComponentRef={(form) => formRef.current = form}
|
||||
onDebuggerCode={handleDebuggerCode}
|
||||
/>
|
||||
</TabPane>
|
||||
<TabPane tab={'代码执行结果'} key={'2'} style={{ height: '280px', overflowY: 'auto' }}>
|
||||
<ExecResult
|
||||
excuteState={excuteState}
|
||||
excuteDetail={commitRecordDetail}
|
||||
/>
|
||||
</TabPane>
|
||||
</Tabs>
|
||||
<div className="pane_control_opts">
|
||||
<Button
|
||||
type="link"
|
||||
style={{ color: '#fff' }}
|
||||
onClick={handleShowControl}>
|
||||
控制台 <Icon type={ showTextResult ? "down" : "up" } />
|
||||
</Button>
|
||||
<p>
|
||||
<Button ghost
|
||||
loading={loading}
|
||||
style={{ marginRight: '10px', color: '#28BD8B', borderColor: '#28BD8B' }}
|
||||
onClick={handleTestCode}
|
||||
disabled={!identifier}
|
||||
>调试代码</Button>
|
||||
<Button
|
||||
loading={submitLoading}
|
||||
type="primary"
|
||||
onClick={handleSubmit}
|
||||
>
|
||||
{/* {props.identifier ? '更新' : '提交'} */}
|
||||
提交
|
||||
</Button>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const mapStateToProps = (state) => {
|
||||
const {commonReducer, ojForUserReducer} = state;
|
||||
const { loading, excuteState, submitLoading } = commonReducer;
|
||||
const { user_program_identifier, commitRecordDetail } = ojForUserReducer;
|
||||
return {
|
||||
loading,
|
||||
submitLoading,
|
||||
excuteState,
|
||||
identifier: user_program_identifier,
|
||||
commitRecordDetail // 提交详情
|
||||
};
|
||||
};
|
||||
// changeSubmitLoadingStatus
|
||||
const mapDispatchToProps = (dispatch) => ({
|
||||
showOrHideControl: (flag) => dispatch(actions.showOrHideControl(flag)),
|
||||
changeLoadingState: (flag) => dispatch(actions.changeLoadingState(flag)),
|
||||
changeSubmitLoadingStatus: (flag) => dispatch(actions.changeSubmitLoadingStatus(flag)),
|
||||
debuggerCode: (identifier, values) => dispatch(actions.debuggerCode(identifier, values)),
|
||||
// inputValue 输入值
|
||||
updateCode: (identifier, inputValue, type) => dispatch(actions.updateCode(identifier, inputValue, type))
|
||||
});
|
||||
|
||||
export default connect(
|
||||
mapStateToProps,
|
||||
mapDispatchToProps
|
||||
)(ControlSetting);
|
||||
@ -0,0 +1,103 @@
|
||||
.pane_control_area{
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
// height: 56px;
|
||||
.control_tab{
|
||||
position: absolute;
|
||||
bottom: -325px;
|
||||
width: 100%;
|
||||
// transition: all .2s;
|
||||
opacity: 0;
|
||||
// animation: .3s ease-in-out move_up;
|
||||
// &.active{
|
||||
// bottom: 0;
|
||||
// opacity: 1;
|
||||
// }
|
||||
&.move_up{
|
||||
animation: move_up .3s ease-in;
|
||||
}
|
||||
&.move_up_final {
|
||||
bottom: 0;
|
||||
opacity: 1;
|
||||
}
|
||||
&.move_down{
|
||||
animation: move_down .3s ease-in-out;
|
||||
}
|
||||
&.move_down_final{
|
||||
bottom: -325px;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.ant-tabs-bar{
|
||||
padding: 0 10px;
|
||||
margin: 0px;
|
||||
border-bottom: transparent;
|
||||
}
|
||||
.ant-tabs-ink-bar{
|
||||
bottom: 1px;
|
||||
}
|
||||
// .tab_ctx_area.pos_center{
|
||||
// background: #222;
|
||||
// }
|
||||
.pane_control_opts{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
z-index: 20;
|
||||
height: 56px;
|
||||
padding-right: 30px;
|
||||
padding-left: 10px;
|
||||
background: #000;
|
||||
}
|
||||
|
||||
.setting_drawer{
|
||||
.setting_h2{
|
||||
line-height: 50px;
|
||||
}
|
||||
.setting_desc{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 10px;
|
||||
.flex_item{
|
||||
line-height: 32px;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@keyframes move_up {
|
||||
0%{
|
||||
opacity: 0;
|
||||
// bottom: -325px;
|
||||
}
|
||||
90%{
|
||||
opacity: 0.5;
|
||||
// bottom: 0px;
|
||||
}
|
||||
100%{
|
||||
opacity: 1;
|
||||
bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes move_down{
|
||||
0%{
|
||||
opacity: 1;
|
||||
bottom: 0
|
||||
}
|
||||
10%{
|
||||
opacity: .2;
|
||||
}
|
||||
20%{
|
||||
opacity: 0;
|
||||
}
|
||||
100%{
|
||||
opacity: 0;
|
||||
bottom: -325px;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,134 @@
|
||||
/*
|
||||
* @Description: 执行结果
|
||||
* @Author: tangjiang
|
||||
* @Github:
|
||||
* @Date: 2019-11-28 08:44:54
|
||||
* @LastEditors: tangjiang
|
||||
* @LastEditTime: 2019-11-28 15:14:42
|
||||
*/
|
||||
import './index.scss';
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { Icon } from 'antd';
|
||||
import CONST from '../../../../constants';
|
||||
|
||||
const {reviewResult} = CONST;
|
||||
function ExecResult (props) {
|
||||
|
||||
const { excuteState, excuteDetail } = props;
|
||||
// 指定渲染初始, 加载中, 加载完成页面内容
|
||||
const renderInit = () => (
|
||||
<div className={'excute_result_area excute_flex_center'}>
|
||||
<span className={'init_ctx'}>请先点击“调试代码”运行您的代码</span>
|
||||
</div>
|
||||
);
|
||||
const renderLoading = () => (
|
||||
<div className={'excute_result_area excute_flex_center'}>
|
||||
<span className={'loading_ctx'}>
|
||||
<Icon className={'ctx_icon'} type="loading"/>
|
||||
<span>加载中...</span>
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
const readerLoaded = () => (
|
||||
<div className={'excute_result_area excute_flex_center'}>
|
||||
<span className={'loaded_ctx'}>
|
||||
<Icon className={'ctx_icon'} type="loading"/>
|
||||
<span>加载完成</span>
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
const renderFinish = () => {
|
||||
const {
|
||||
error_line,
|
||||
error_msg,
|
||||
execute_memory,
|
||||
execute_time,
|
||||
input,
|
||||
output,
|
||||
status,
|
||||
expected_output
|
||||
} = codeResult;
|
||||
|
||||
const excuteHeader = (state) => {
|
||||
const review_class = state === 0 ? `excute_suc` : `excute_err`;
|
||||
return (
|
||||
<p className={'excute_head_area'}>
|
||||
<span className={'excute_head_txt'}>执行结果: </span>
|
||||
<span className={review_class}>{reviewResult[`${state}`]}</span>
|
||||
</p>
|
||||
)
|
||||
}
|
||||
|
||||
const excuteCtx = (state) => {
|
||||
if (state === 0) {
|
||||
return (
|
||||
<React.Fragment>
|
||||
<p className={'result_info_style'}>输入: {input}</p>
|
||||
<p className={'result_info_style'}>输出: {output}</p>
|
||||
</React.Fragment>
|
||||
);
|
||||
} else if (state === 4){
|
||||
return (
|
||||
<p className={'result_info_style'}>
|
||||
{error_msg}
|
||||
</p>
|
||||
)
|
||||
} else if (state === -1) {
|
||||
return (
|
||||
<React.Fragment>
|
||||
<p className={'result_info_style'}>输入: {input}</p>
|
||||
<p className={'result_info_style'}>输出: {output}</p>
|
||||
<p className={'result_info_style'}>预期输出: {expected_output}</p>
|
||||
</React.Fragment>
|
||||
)
|
||||
} else if (state === 5) {
|
||||
return (
|
||||
<React.Fragment>
|
||||
<p className={'result_info_style'}> 执行出错信息: {error_msg}</p>
|
||||
<p className={'result_info_style'}>最后执行的输入: {input}</p>
|
||||
</React.Fragment>
|
||||
)
|
||||
}
|
||||
}
|
||||
return (
|
||||
<div className={'excute_result_info'}>
|
||||
{excuteHeader(status)}
|
||||
{excuteCtx(status)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
// 渲染状态
|
||||
const [renderCtx, setRenderCtx] = useState(() => {
|
||||
return function () {
|
||||
return renderInit();
|
||||
}
|
||||
});
|
||||
// 提交记录详情
|
||||
const [codeResult, setCodeResult] = useState({})
|
||||
|
||||
// 渲染状态变化时渲染相应的内容
|
||||
useEffect(() => {
|
||||
if ('loading' === excuteState) {
|
||||
setRenderCtx(() => (renderLoading));
|
||||
} else if ('loaded' === excuteState) {
|
||||
setRenderCtx(() => (readerLoaded));
|
||||
} else if ('finish' === excuteState) {
|
||||
setRenderCtx(() => (renderFinish));
|
||||
}
|
||||
}, [excuteState]);
|
||||
|
||||
// 提交详情变化时
|
||||
useEffect(() => {
|
||||
console.log('提交记录详情=====>>>>>', excuteDetail);
|
||||
setCodeResult(excuteDetail);
|
||||
}, [excuteDetail]);
|
||||
|
||||
return (
|
||||
<React.Fragment>
|
||||
{renderCtx()}
|
||||
</React.Fragment>
|
||||
)
|
||||
}
|
||||
|
||||
export default ExecResult;
|
||||
@ -0,0 +1,47 @@
|
||||
.excute_result_area{
|
||||
display: flex;
|
||||
height: 224px;
|
||||
width: 100%;
|
||||
|
||||
&.excute_flex_center{
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.init_ctx{
|
||||
color: #666666;
|
||||
}
|
||||
.loading_ctx,
|
||||
.loaded_ctx{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
color: #1890ff;
|
||||
.ctx_icon{
|
||||
font-size: 40px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.excute_result_info{
|
||||
padding: 20px 30px;
|
||||
color: #fff;
|
||||
height: 220px;
|
||||
/* overflow-y: auto; */
|
||||
overflow-y: auto;
|
||||
|
||||
.result_info_style{
|
||||
word-wrap: break-word;
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
.excute_head_area{
|
||||
line-height: 30px;
|
||||
.excute_suc{
|
||||
color: #28BD8B;
|
||||
}
|
||||
.excute_err{
|
||||
color: #E51C24;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,50 @@
|
||||
.tab_ctx_area{
|
||||
display: flex;
|
||||
height: 100%;
|
||||
color: #666;
|
||||
font-size: 14px;
|
||||
&.pos_start{
|
||||
justify-content: flex-start;
|
||||
}
|
||||
&.pos_center{
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
&.pos_end{
|
||||
justify-content: flex-end;
|
||||
}
|
||||
.ctx_default{
|
||||
margin: 10px 20px;
|
||||
}
|
||||
.ctx_loading,
|
||||
.ctx_loaded{
|
||||
display: flex;
|
||||
position: relative;
|
||||
flex-direction: column;
|
||||
top: -20px;
|
||||
color: #1890ff;
|
||||
.ctx_icon{
|
||||
font-size: 40px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.user_case_form{
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
margin-top: 20px;
|
||||
.input_area{
|
||||
flex: 1;
|
||||
.ant-form-item-required{
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
.flex_l{
|
||||
padding: 0 10px 0 20px;
|
||||
color: #fff;
|
||||
}
|
||||
.flex_r{
|
||||
padding: 0 20px 0 10px;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,72 @@
|
||||
/*
|
||||
* @Description: 编辑器侧边栏设置信息
|
||||
* @Author: tangjiang
|
||||
* @Github:
|
||||
* @Date: 2019-11-25 17:50:33
|
||||
* @LastEditors: tangjiang
|
||||
* @LastEditTime: 2019-11-27 14:40:36
|
||||
*/
|
||||
import React from 'react';
|
||||
import { Select } from 'antd';
|
||||
|
||||
const { Option } = Select;
|
||||
const SettingDrawer = (props) => {
|
||||
/**
|
||||
* title: '', // 一级标题
|
||||
* type: '', // 类型: 目录 select 和 文本
|
||||
* content: [] // 显示的内容 { text: '' , value: string | [{ key: 1, value: '', text: '' }] }
|
||||
*/
|
||||
const {title, type = 'label', content = [] } = props;
|
||||
|
||||
const handleFontSize = (value) => {
|
||||
const {onChangeFontSize} = props;
|
||||
// console.log('fong size change: ', value);
|
||||
onChangeFontSize && onChangeFontSize(value);
|
||||
}
|
||||
|
||||
const renderCtx = (title, content = [], type = 'label') => {
|
||||
const result = content.map((ctx, index) => {
|
||||
const subText = ctx.text;
|
||||
const value = ctx.value;
|
||||
let renderResult = '';
|
||||
if (typeof value === 'string') {
|
||||
renderResult = (
|
||||
<div className={'setting_desc'} key={`lab_${index}`}>
|
||||
<span className={'flex_item'}>{subText}</span>
|
||||
<span className={'flex_item'}>{ctx.value}</span>
|
||||
</div>
|
||||
);
|
||||
} else if (Array.isArray(value)) {
|
||||
if (type === 'select') {
|
||||
const child = ctx.value.map((opt, i) => (
|
||||
<Option key={opt.key || `${opt.value}`} value={opt.value}>
|
||||
{opt.text}
|
||||
</Option>
|
||||
));
|
||||
renderResult = (
|
||||
<div className={'setting_desc'} key={`sel_${index}`}>
|
||||
<span className={'flex_item'}>{ctx.text}</span>
|
||||
<Select className={'flex_item'} style={{ width: '100px'}} onChange={handleFontSize}>
|
||||
{child}
|
||||
</Select>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
return renderResult;
|
||||
});
|
||||
return (
|
||||
<React.Fragment>
|
||||
<h2 className={'setting_h2'}>{title}</h2>
|
||||
{ result }
|
||||
</React.Fragment>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<div className={'setting_area'}>
|
||||
{renderCtx(title, content, type)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default SettingDrawer;
|
||||
@ -0,0 +1,36 @@
|
||||
/*
|
||||
* @Description: 显示 文字 + number 标签类型
|
||||
* @Author: tangjiang
|
||||
* @Date: 2019-11-15 10:41:06
|
||||
* @Last Modified by: tangjiang
|
||||
* @Last Modified time: 2019-11-15 17:15:27
|
||||
*/
|
||||
import './index.scss';
|
||||
|
||||
import React, { PureComponent } from 'react';
|
||||
const numberal = require('numeral');
|
||||
|
||||
export default class MultipTags extends PureComponent {
|
||||
|
||||
render () {
|
||||
const { type = 'primary', text, numb, ...props} = this.props;
|
||||
|
||||
if (typeof numb !== 'number' && typeof numb !== 'string') {
|
||||
throw new Error('输入的numb必须为数字或数字类型字符串.');
|
||||
}
|
||||
let result = Number(numb) >= 1000
|
||||
? numberal(Number(numb)).format('0.0a')
|
||||
: Number(numb);
|
||||
|
||||
return (
|
||||
<div className={'mul-tag-wrap'} {...props}>
|
||||
<span className={`tag-txt ${type}`}>
|
||||
{ text }
|
||||
</span>
|
||||
<span className={'tag-numb'}>
|
||||
{ result }
|
||||
</span>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,42 @@
|
||||
.mul-tag-wrap{
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
|
||||
.tag-txt, .tag-numb{
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
padding: 0 10px;
|
||||
// line-height: 20px;
|
||||
// height: 20px;
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
}
|
||||
.tag-txt{
|
||||
border: 1px solid transparent;
|
||||
border-top-left-radius: 4px;
|
||||
border-bottom-left-radius: 4px;
|
||||
color: #fff;
|
||||
|
||||
&.primary{
|
||||
background: #1890ff;
|
||||
}
|
||||
&.warning{
|
||||
background: #faad14;
|
||||
}
|
||||
&.success{
|
||||
background: #52c41a;
|
||||
}
|
||||
&.error{
|
||||
background: #f5222d;
|
||||
}
|
||||
}
|
||||
|
||||
.tag-numb{
|
||||
border: 1px solid rgba(238, 238, 238, 1);
|
||||
border-top-right-radius: 4px;
|
||||
border-bottom-right-radius: 4px;
|
||||
border-left-color: transparent;
|
||||
margin-left: -1px;
|
||||
min-width: 40px;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,123 @@
|
||||
/*
|
||||
* @Description: 抽取代码编辑器
|
||||
* @Author: tangjiang
|
||||
* @Github:
|
||||
* @Date: 2019-11-27 15:02:52
|
||||
* @LastEditors: tangjiang
|
||||
* @LastEditTime: 2019-11-28 12:39:39
|
||||
*/
|
||||
import './index.scss';
|
||||
import React, { useState, useRef, useEffect } from 'react';
|
||||
import { Icon, Drawer } from 'antd';
|
||||
import { connect } from 'react-redux';
|
||||
import MonacoEditor from '@monaco-editor/react';
|
||||
import SettingDrawer from '../../components/monacoSetting';
|
||||
import CONST from '../../../../constants';
|
||||
import actions from '../../../../redux/actions';
|
||||
|
||||
const { fontSetting, opacitySetting } = CONST;
|
||||
|
||||
const MyMonacoEditor = (props) => {
|
||||
|
||||
const {
|
||||
language,
|
||||
code,
|
||||
showOrHideControl,
|
||||
saveUserInputCode
|
||||
} = props;
|
||||
const [showDrawer, setShowDrawer] = useState(false); // 控制配置滑框
|
||||
const [editCode, setEditCode] = useState('');
|
||||
// const [curLang, setCurLang] = useState('C');
|
||||
const [fontSize, setFontSize] = useState(12);
|
||||
const [ height, setHeight ] = useState('calc(100% - 112px)');
|
||||
const editorRef = useRef(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (code) {
|
||||
setEditCode(code);
|
||||
}
|
||||
}, [code]);
|
||||
|
||||
useEffect(() => {
|
||||
setHeight(showOrHideControl ? 'calc(100% - 382px)' : 'calc(100% - 112px)');
|
||||
}, [showOrHideControl]);
|
||||
// 控制侧边栏设置的显示
|
||||
const handleShowDrawer = () => {
|
||||
setShowDrawer(true);
|
||||
}
|
||||
// 关闭设置
|
||||
const handleDrawerClose = () => {
|
||||
setShowDrawer(false);
|
||||
}
|
||||
// 侧边栏改变字体大小
|
||||
const handleFontSizeChange = (value) => {
|
||||
setFontSize(value);
|
||||
}
|
||||
|
||||
// 文本框内容变化时，记录文本框内容
|
||||
const handleEditorChange = (origin, monaco) => {
|
||||
editorRef.current = monaco; // 获取当前monaco实例
|
||||
setEditCode(origin); // 保存编辑器初始值
|
||||
editorRef.current.onDidChangeModelContent(e => { // 监听编辑器内容的变化
|
||||
// TODO 需要优化 节流
|
||||
const val = editorRef.current.getValue();
|
||||
setEditCode(val);
|
||||
// 值一变化保存当前代码值
|
||||
saveUserInputCode(val);
|
||||
});
|
||||
}
|
||||
|
||||
// 配置编辑器属性
|
||||
const editorOptions = {
|
||||
selectOnLineNumbers: true,
|
||||
automaticLayout: true,
|
||||
fontSize: `${fontSize}px`
|
||||
}
|
||||
|
||||
return (
|
||||
<React.Fragment>
|
||||
<div className={"monaco_editor_area"}>
|
||||
<div className="code_title">
|
||||
<span>已保存</span>
|
||||
<Icon className={'code-icon'} type="setting" onClick={handleShowDrawer}/>
|
||||
</div>
|
||||
<MonacoEditor
|
||||
height={height}
|
||||
width="100%"
|
||||
language={language && language.toLowerCase()}
|
||||
value={editCode}
|
||||
options={editorOptions}
|
||||
theme="dark"
|
||||
editorDidMount={handleEditorChange}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Drawer
|
||||
className={'setting_drawer'}
|
||||
placement="right"
|
||||
closable={false}
|
||||
onClose={handleDrawerClose}
|
||||
visible={showDrawer}
|
||||
>
|
||||
<SettingDrawer {...fontSetting} onChangeFontSize={handleFontSizeChange}/>
|
||||
<SettingDrawer {...opacitySetting}/>
|
||||
</Drawer>
|
||||
</React.Fragment>
|
||||
)
|
||||
}
|
||||
|
||||
const mapStateToProps = (state) => {
|
||||
const { showOrHideControl } = state.commonReducer;
|
||||
return {
|
||||
showOrHideControl
|
||||
}
|
||||
};
|
||||
|
||||
const mapDispatchToProps = (dispatch) => ({
|
||||
saveUserInputCode: (code) => dispatch(actions.saveUserInputCode(code)),
|
||||
});
|
||||
|
||||
export default connect(
|
||||
mapStateToProps,
|
||||
mapDispatchToProps
|
||||
)(MyMonacoEditor);
|
||||
@ -0,0 +1,15 @@
|
||||
.monaco_editor_area{
|
||||
height: 100%;
|
||||
.code_title{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
background: #000;
|
||||
color: #fff;
|
||||
height: 56px;
|
||||
padding: 0 30px;
|
||||
.code-icon{
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,62 @@
|
||||
/*
|
||||
* @Description: 文字 | 图标 + 数字样式
|
||||
* @Author: tangjiang
|
||||
* @Github:
|
||||
* @Date: 2019-11-27 10:58:37
|
||||
* @LastEditors: tangjiang
|
||||
* @LastEditTime: 2019-11-27 14:22:38
|
||||
*/
|
||||
import './index.scss';
|
||||
import React from 'react';
|
||||
import { Icon } from 'antd';
|
||||
const numberal = require('numeral');
|
||||
|
||||
const TextNumber = (props) => {
|
||||
/**
|
||||
* text: 显示的文本信息
|
||||
* number: 显示的数字
|
||||
* position: 位置 vertical | horizontal (默认)
|
||||
* type: 内容 文字或图标
|
||||
* onIconClick: 点击图标时的回调函数
|
||||
*/
|
||||
const { text, number, position = 'horizontal', type = 'label', onIconClick} = props;
|
||||
|
||||
const handleIconClick = () => {
|
||||
onIconClick && onIconClick();
|
||||
}
|
||||
|
||||
const renderNumb = () => {
|
||||
let tempNumb = number;
|
||||
if ((tempNumb || tempNumb === 0) && (typeof Number(tempNumb) === 'number')) {
|
||||
tempNumb = numberal(tempNumb).format('0,0');
|
||||
return (
|
||||
<span className={'numb_value'}>{tempNumb}</span>
|
||||
)
|
||||
}
|
||||
return '';
|
||||
}
|
||||
const renderCtx = () => {
|
||||
if (type === 'icon') { // 图标加文字时
|
||||
return (
|
||||
<div className={`text_number_area text_icon_numb flex_${position}`}>
|
||||
<Icon onClick={handleIconClick} type={text} className={'numb_icon'}></Icon>
|
||||
{renderNumb()}
|
||||
</div>
|
||||
)
|
||||
} else {
|
||||
return (
|
||||
<div className={`text_number_area text_label_numb flex_${position}`}>
|
||||
<span className={'text_label'}>{text}</span>
|
||||
{renderNumb()}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
return (
|
||||
<React.Fragment>
|
||||
{renderCtx()}
|
||||
</React.Fragment>
|
||||
);
|
||||
}
|
||||
|
||||
export default TextNumber;
|
||||
@ -0,0 +1,43 @@
|
||||
.text_number_area{
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.flex_vertical{
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.flex_horizontal{
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.text_label_numb,
|
||||
.text_icon_numb{
|
||||
line-height: 18px;
|
||||
vertical-align: top;
|
||||
.numb_value{
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.text_label_numb{
|
||||
.numb_value{
|
||||
color: #333333;
|
||||
}
|
||||
.text_label{
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.text_icon_numb{
|
||||
.numb_icon{
|
||||
font-size: 16px;
|
||||
margin-right: 5px;
|
||||
color: #333333;
|
||||
cursor: pointer;
|
||||
}
|
||||
.numb_value{
|
||||
color: #999999;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,75 @@
|
||||
.banner-wrap{
|
||||
width: 100%;
|
||||
height: 300px;
|
||||
background-image: url(/static/media/path.e39ba7de.png);
|
||||
background-color: #000a4f;
|
||||
/* background-size: cover; */
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.developer-list{
|
||||
// overflow: hidden;
|
||||
.ant-spin-container{
|
||||
padding-bottom: 100px;
|
||||
}
|
||||
.card-top {
|
||||
border-radius:4px;
|
||||
background:rgba(255,255,255,1);
|
||||
height:56px;
|
||||
padding: 0 30px;
|
||||
margin-top: 20px;
|
||||
.search-params{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.save-question{
|
||||
width: 200px;
|
||||
}
|
||||
// .flex-end{
|
||||
// // float: right;
|
||||
// }
|
||||
.question-level{
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.card-table{
|
||||
margin-top: 10px;
|
||||
.filter_ctx_area{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 10px 30px;
|
||||
background: #fff;
|
||||
align-items: center;
|
||||
}
|
||||
.choice_ctx{
|
||||
flex: 1;
|
||||
}
|
||||
.ant-card-body{
|
||||
padding: 10px 30px;
|
||||
// width: 100%;
|
||||
}
|
||||
.dropdown-span{
|
||||
position: relative;
|
||||
top: 2px;
|
||||
}
|
||||
.dropdonw-style{
|
||||
margin-right: 50px;
|
||||
.dropdown-span{
|
||||
cursor: pointer;
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.search_tag_style{
|
||||
background: rgb(82, 196, 26);
|
||||
color: #fff;
|
||||
.anticon-close{
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,2 @@
|
||||
@import '../split_pane_resizer.scss';
|
||||
|
||||
@ -0,0 +1,14 @@
|
||||
import React, { PureComponent } from 'react';
|
||||
import connect from 'react-redux';
|
||||
|
||||
class CommitTab extends PureComponent {
|
||||
|
||||
render () {
|
||||
return (
|
||||
<h2>提交页</h2>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
// export default connect()(CommitTab);
|
||||
export default CommitTab;
|
||||
@ -0,0 +1,178 @@
|
||||
/*
|
||||
* @Description: 添加测试用例
|
||||
* @Author: tangjiang
|
||||
* @Github:
|
||||
* @Date: 2019-11-21 09:19:38
|
||||
* @LastEditors: tangjiang
|
||||
* @LastEditTime: 2019-11-26 15:47:06
|
||||
*/
|
||||
import './index.scss';
|
||||
import React, { useState } from 'react';
|
||||
import { Collapse, Icon, Input, Form, Button, Modal } from 'antd';
|
||||
import { connect } from 'react-redux';
|
||||
import actions from '../../../../../redux/actions';
|
||||
const { Panel } = Collapse;
|
||||
const { TextArea } = Input;
|
||||
const FormItem = Form.Item;
|
||||
const AddTestDemo = (props) => {
|
||||
const {
|
||||
onSubmitTest,
|
||||
onDeleteTest,
|
||||
testCase,
|
||||
key,
|
||||
ojTestCaseValidate,
|
||||
index
|
||||
} = props;
|
||||
|
||||
const [isEditor, setIsEditor] = useState(false); // 是否是编辑
|
||||
// console.log('测试用例属性: ====>>>>', props);
|
||||
// 删除操作
|
||||
const handleDeletePanel = (e) => {
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
// console.log('点击的删除按钮')
|
||||
Modal.confirm({
|
||||
title: '删除',
|
||||
content: '确定要删除当前测试用例吗?',
|
||||
okText: '确定',
|
||||
cancelText: '取消',
|
||||
onOk() {
|
||||
console.log('确定删除');
|
||||
onDeleteTest(testCase);
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 输入框值改变时
|
||||
const handleInputChange = (e) => {
|
||||
const { index, testCaseInputChange } = props;
|
||||
const value = e.target.value;
|
||||
testCaseInputChange(value, index);
|
||||
}
|
||||
|
||||
// 输出值改变时
|
||||
const handleOutputChange = (e) => {
|
||||
const { index, testCaseOutputChange } = props;
|
||||
const value = e.target.value;
|
||||
testCaseOutputChange(value, index);
|
||||
}
|
||||
|
||||
// 右侧删除图标
|
||||
const genExtra = () => (
|
||||
<Icon
|
||||
type="close"
|
||||
onClick={handleDeletePanel}
|
||||
/>
|
||||
)
|
||||
|
||||
// 取消操作
|
||||
const handleReset = (e) => {
|
||||
e.preventDefault();
|
||||
props.form.resetFields();
|
||||
}
|
||||
|
||||
// 保存
|
||||
const handleSubmit = (e) => {
|
||||
e.preventDefault();
|
||||
props.form.validateFields((err, values) => {
|
||||
if (err) {
|
||||
return;
|
||||
}
|
||||
console.log('提交表单: ', values);
|
||||
onSubmitTest(values);
|
||||
});
|
||||
}
|
||||
// 编辑后保存
|
||||
const handleEditorOrSave = (e) => {
|
||||
if (!isEditor) {
|
||||
setIsEditor(true);
|
||||
} else {
|
||||
// TODO 调用修改测试用例接口
|
||||
setIsEditor(false); // 保存后 设置 false
|
||||
}
|
||||
}
|
||||
|
||||
// 渲染提交按钮
|
||||
const renderSubmitBtn = () => {
|
||||
const { identifier, testCase, loading } = props;
|
||||
// console.log('========', identifier);
|
||||
// 1. 新增时，不显示按钮
|
||||
if (identifier) {
|
||||
if (testCase.isAdd) {
|
||||
return (
|
||||
<FormItem style={{ textAlign: 'right' }}>
|
||||
<Button style={{ marginRight: '20px' }} onClick={handleReset}>取消</Button>
|
||||
<Button type="primary" onClick={handleSubmit}>保存</Button>
|
||||
</FormItem>
|
||||
);
|
||||
} else {
|
||||
return (
|
||||
<FormItem style={{ textAlign: 'right' }}>
|
||||
<Button onClick={handleEditorOrSave} loading={loading}>{isEditor ? '保存' : (loading ? '保存' : '编辑')}</Button>
|
||||
</FormItem>
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 文本输入框可编辑的情况
|
||||
* 1. 新增时
|
||||
* 2. isAdd 为 false 且 isEditor 为true 时
|
||||
* @param {*} testCase
|
||||
*/
|
||||
const isDisabled = (testCase) => {
|
||||
return !testCase.isAdd && !isEditor;
|
||||
};
|
||||
const {input = {}, output = {}} = (ojTestCaseValidate[index] = {});
|
||||
return (
|
||||
<Collapse className={'collapse_area'}>
|
||||
<Panel header={`测试用例${testCase.position}`} extra={genExtra()} key={key}>
|
||||
<Form>
|
||||
<FormItem
|
||||
label={<span className={'label_text'}>输入</span>}
|
||||
validateStatus={input.validateStatus}
|
||||
help={input.errMsg}
|
||||
colon={ false }
|
||||
>
|
||||
<TextArea
|
||||
rows={5}
|
||||
value={testCase.input}
|
||||
onChange={handleInputChange}
|
||||
disabled={isDisabled(testCase)}/>
|
||||
</FormItem>
|
||||
<FormItem
|
||||
label={<span className={'label_text'}>输出</span>}
|
||||
validateStatus={output.validateStatus}
|
||||
help={output.errMsg}
|
||||
colon={ false }
|
||||
>
|
||||
<Input
|
||||
value={testCase.output}
|
||||
onChange={handleOutputChange}
|
||||
disabled={isDisabled(testCase)}/>
|
||||
</FormItem>
|
||||
</Form>
|
||||
</Panel>
|
||||
</Collapse>
|
||||
);
|
||||
}
|
||||
|
||||
const mapStateToProps = (state) => {
|
||||
const {identifier, loading, ojTestCaseValidate} = state.ojFormReducer;
|
||||
return {
|
||||
identifier,
|
||||
loading,
|
||||
ojTestCaseValidate
|
||||
}
|
||||
};
|
||||
|
||||
const mapDispatchToProps = (dispatch) => ({
|
||||
testCaseOutputChange: (value, index) => dispatch(actions.testCaseOutputChange(value, index)),
|
||||
testCaseInputChange: (value, index) => dispatch(actions.testCaseInputChange(value, index))
|
||||
});
|
||||
|
||||
export default connect(
|
||||
mapStateToProps,
|
||||
mapDispatchToProps
|
||||
)(AddTestDemo);
|
||||
@ -0,0 +1,284 @@
|
||||
/*
|
||||
* @Description:
|
||||
* @Author: tangjiang
|
||||
* @Github:
|
||||
* @Date: 2019-11-20 10:35:40
|
||||
* @LastEditors: tangjiang
|
||||
* @LastEditTime: 2019-11-27 19:04:03
|
||||
*/
|
||||
import 'quill/dist/quill.core.css';
|
||||
import 'quill/dist/quill.bubble.css';
|
||||
import 'quill/dist/quill.snow.css';
|
||||
import './index.scss';
|
||||
// import 'katex/dist/katex.css';
|
||||
import React, { PureComponent } from 'react';
|
||||
import { Form, Input, Select, InputNumber, Button } from 'antd';
|
||||
import { connect } from 'react-redux';
|
||||
import AddTestDemo from './AddTestDemo';
|
||||
import QuillEditor from '../../../quillEditor';
|
||||
import actions from '../../../../../redux/actions';
|
||||
import CONST from '../../../../../constants';
|
||||
const {jcLabel} = CONST;
|
||||
const FormItem = Form.Item;
|
||||
const { Option } = Select;
|
||||
|
||||
const maps = {
|
||||
language: [
|
||||
{ title: 'C', key: 'C' },
|
||||
{ title: 'C++', key: 'C++' },
|
||||
{ title: 'Python', key: 'Python' },
|
||||
{ title: 'Java', key: 'Java' }
|
||||
],
|
||||
difficult: [
|
||||
{ title: '简单', key: '1' },
|
||||
{ title: '中等', key: '2'},
|
||||
{ title: '困难', key: '3' }
|
||||
],
|
||||
category: [
|
||||
{ title: '程序设计', key: '1' },
|
||||
{ title: '算法', key: '2'}
|
||||
],
|
||||
openOrNot: [
|
||||
{ title: '公开', key: '1' },
|
||||
{ title: '私有', key: '0' }
|
||||
]
|
||||
}
|
||||
class EditTab extends PureComponent {
|
||||
|
||||
constructor (props) {
|
||||
super(props);
|
||||
this.editorRef = React.createRef();
|
||||
}
|
||||
|
||||
// 改变任务名称
|
||||
handleNameChange = (e) => {
|
||||
const value = e.target.value;
|
||||
this.props.validateOJName(value);
|
||||
}
|
||||
// 改变语言
|
||||
handleLanguageChange = (value) => {
|
||||
this.props.validateOjLanguage(value);
|
||||
}
|
||||
// 改变描述信息
|
||||
handleChangeDescription = (value) => {
|
||||
// console.log('获取的编辑器内容为: ', value);
|
||||
this.props.validateOjDescription(value);
|
||||
}
|
||||
// 改变难易度
|
||||
handleChangeDifficult = (value) => {
|
||||
this.props.validateOjDifficult(value);
|
||||
}
|
||||
// 改变时间限制
|
||||
handleTimeLimitChange = (value) => {
|
||||
this.props.validateOjTimeLimit(value);
|
||||
}
|
||||
// 改变分类
|
||||
handleChangeCategory = (value) => {
|
||||
this.props.validateOjCategory(value);
|
||||
}
|
||||
// 改变公开程序
|
||||
handleChangeOpenOrNot = (value) => {
|
||||
this.props.validateOpenOrNot(value);
|
||||
}
|
||||
|
||||
render () {
|
||||
const {
|
||||
ojFormReducer: {ojForm, ojFormValidate},
|
||||
testCases = [], // 测试用例集合
|
||||
position, // 添加的测试用例位置
|
||||
addTestCase, // 添加测试用例
|
||||
deleteTestCase, // 删除测试用例
|
||||
} = this.props;
|
||||
// console.log('当前位置: ', position);
|
||||
// console.log('OJForm: ', ojForm);
|
||||
// console.log('当前位置: ', testCases);
|
||||
// 表单label
|
||||
const myLabel = (name, subTitle) => {
|
||||
if (subTitle) {
|
||||
return (
|
||||
<span className={'label_text'}>
|
||||
{name}
|
||||
<span className={'label_sub_text'}>
|
||||
({subTitle})
|
||||
</span>
|
||||
</span>
|
||||
)
|
||||
} else {
|
||||
return (
|
||||
<span className={'label_text'}>{name}</span>
|
||||
)
|
||||
}
|
||||
};
|
||||
// 编程语言
|
||||
const getOptions = (key) => {
|
||||
return maps[key].map((opt, i) => {
|
||||
return (
|
||||
<Option value={opt.key} key={`opt_${i}`}>{opt.title}</Option>
|
||||
);
|
||||
});
|
||||
};
|
||||
// 提交测试用例
|
||||
const handleSubmitTest = (obj) => {
|
||||
console.log('提交的测试用例: ', obj);
|
||||
};
|
||||
// 删除测试用例
|
||||
const handleDeleteTest = (obj) => {
|
||||
console.log('删除的测试用例: ', obj);
|
||||
deleteTestCase(obj);
|
||||
};
|
||||
const renderTestCase = () => {
|
||||
return testCases.map((item, i) => (
|
||||
<AddTestDemo
|
||||
key={`key_${i}`}
|
||||
onSubmitTest={handleSubmitTest}
|
||||
onDeleteTest={handleDeleteTest}
|
||||
testCase={item}
|
||||
index={i}
|
||||
/>
|
||||
));
|
||||
};
|
||||
// 添加测试用例
|
||||
const handleAddTest = () => {
|
||||
console.log('添加测试用例');
|
||||
const obj = {
|
||||
input: '',
|
||||
output: '',
|
||||
position: position,
|
||||
isAdd: true // 新增的测试用例
|
||||
}
|
||||
addTestCase(obj);
|
||||
// TODO 点击新增时，需要滚到到最底部
|
||||
// this.editorRef.current.scrollTop
|
||||
// const oDiv = this.editorRef.current;
|
||||
// oDiv.scrollTo(oDiv.scrollLeft, 99999);
|
||||
// console.log(oDiv.scrollTop);
|
||||
// oDiv.scrollTop = 99999;
|
||||
}
|
||||
return (
|
||||
<div className={'editor_area'}>
|
||||
<Form className={'editor_form'}>
|
||||
<FormItem
|
||||
className={`input_area flex_60`}
|
||||
label={<span>{myLabel(jcLabel['name'])}</span>}
|
||||
validateStatus={ojFormValidate.name.validateStatus}
|
||||
help={ojFormValidate.name.errMsg}
|
||||
colon={ false }
|
||||
>
|
||||
<Input
|
||||
maxLength={60}
|
||||
placeholder="请输入任务名称"
|
||||
value={ojForm.name}
|
||||
suffix={<span style={{ fontSize: '12px', color: 'rgba(0, 0, 0, 0.45)' }}>{60 - ojForm.name.length}</span>}
|
||||
onChange={this.handleNameChange}
|
||||
/>
|
||||
</FormItem>
|
||||
<FormItem
|
||||
className={`input_area flex_40`}
|
||||
label={<span>{myLabel(jcLabel['language'])}</span>}
|
||||
validateStatus={ojFormValidate.language.validateStatus}
|
||||
help={ojFormValidate.language.errMsg}
|
||||
colon={ false }
|
||||
>
|
||||
<Select onChange={this.handleLanguageChange} value={`${ojForm.language}`}>
|
||||
{getOptions('language')}
|
||||
</Select>
|
||||
</FormItem>
|
||||
<FormItem
|
||||
className={`input_area flex_100`}
|
||||
label={<span>{myLabel(jcLabel['description'])}</span>}
|
||||
validateStatus={ojFormValidate.description.validateStatus}
|
||||
help={ojFormValidate.description.errMsg}
|
||||
colon={ false }
|
||||
>
|
||||
<QuillEditor
|
||||
style={{ height: '300px' }}
|
||||
placeholder="init content"
|
||||
onEditorChange={this.handleChangeDescription}
|
||||
htmlCtx={ojForm.description}
|
||||
/>
|
||||
</FormItem>
|
||||
<FormItem
|
||||
className={`input_area flex_50 flex_50_left`}
|
||||
label={<span>{myLabel(jcLabel['difficult'], '任务的难易程度')}</span>}
|
||||
validateStatus={ojFormValidate.difficult.validateStatus}
|
||||
help={ojFormValidate.difficult.errMsg}
|
||||
colon={ false }
|
||||
>
|
||||
<Select onChange={this.handleChangeDifficult} value={`${ojForm.difficult}`}>
|
||||
{getOptions('difficult')}
|
||||
</Select>
|
||||
</FormItem>
|
||||
<FormItem
|
||||
className={`input_area flex_50 flex_50_right`}
|
||||
label={<span>{myLabel(jcLabel['timeLimit'], '程序允许时间限制时长，单位：秒')}</span>}
|
||||
validateStatus={ojFormValidate.timeLimit.validateStatus}
|
||||
help={ojFormValidate.timeLimit.errMsg}
|
||||
colon={ false }
|
||||
>
|
||||
<InputNumber value={ojForm.timeLimit} min={0} style={{ width: '100%' }} onChange={this.handleTimeLimitChange}/>
|
||||
</FormItem>
|
||||
<FormItem
|
||||
className={`input_area flex_50 flex_50_left`}
|
||||
label={<span>{myLabel(jcLabel['category'], '任务所属分类')}</span>}
|
||||
validateStatus={ojFormValidate.category.validateStatus}
|
||||
help={ojFormValidate.category.errMsg}
|
||||
colon={ false }
|
||||
>
|
||||
<Select onChange={this.handleChangeCategory} value={`${ojForm.category}`}>
|
||||
{getOptions('category')}
|
||||
</Select>
|
||||
</FormItem>
|
||||
<FormItem
|
||||
className={`input_area flex_50 flex_50_right`}
|
||||
label={<span>{myLabel(jcLabel['openOrNot'], '社区：您的任务将向整个社会公开')}</span>}
|
||||
validateStatus={ojFormValidate.openOrNot.validateStatus}
|
||||
help={ojFormValidate.openOrNot.errMsg}
|
||||
colon={ false }
|
||||
>
|
||||
<Select onChange={this.handleChangeOpenOrNot} value={`${ojForm.openOrNot}`}>
|
||||
{getOptions('openOrNot')}
|
||||
</Select>
|
||||
</FormItem>
|
||||
</Form>
|
||||
|
||||
{/* 添加测试用例 */}
|
||||
<div className="test_demo_title">
|
||||
<h2>测试用例</h2>
|
||||
<Button type="primary" onClick={handleAddTest}>添加测试用例</Button>
|
||||
</div>
|
||||
<div className="test_demo_ctx">
|
||||
{ renderTestCase() }
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
const mapStateToProps = (state) => {
|
||||
const ojFormReducer = state.ojFormReducer;
|
||||
return {
|
||||
ojFormReducer,
|
||||
testCases: ojFormReducer.testCases, // 测试用例
|
||||
position: ojFormReducer.position, // 测试用例位置
|
||||
}
|
||||
};
|
||||
|
||||
const mapDispatchToProps = (dispatch) => ({
|
||||
// 任务名称校验
|
||||
validateOJName: (value) => dispatch(actions.validateOJName(value)),
|
||||
validateOjLanguage: (value) => dispatch(actions.validateOjLanguage(value)),
|
||||
validateOjDescription: (value) => dispatch(actions.validateOjDescription(value)),
|
||||
validateOjDifficult: (value) => dispatch(actions.validateOjDifficult(value)),
|
||||
validateOjTimeLimit: (value) => dispatch(actions.validateOjTimeLimit(value)),
|
||||
validateOjCategory: (value) => dispatch(actions.validateOjCategory(value)),
|
||||
validateOpenOrNot: (value) => dispatch(actions.validateOpenOrNot(value)),
|
||||
// 新增测试用例
|
||||
addTestCase: (value) => dispatch(actions.addTestCase(value)),
|
||||
// 删除测试用例
|
||||
deleteTestCase: (value) => dispatch(actions.deleteTestCase(value)),
|
||||
});
|
||||
|
||||
export default connect(
|
||||
mapStateToProps,
|
||||
mapDispatchToProps
|
||||
)(EditTab);
|
||||
@ -0,0 +1,65 @@
|
||||
|
||||
.editor_area{
|
||||
padding: 20px 0;
|
||||
.editor_form{
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.label_text{
|
||||
position: relative;
|
||||
font-size: 14px;
|
||||
&::before{
|
||||
display: inline-block;
|
||||
margin-right: 4px;
|
||||
color: #f5222d;
|
||||
font-size: 14px;
|
||||
font-family: SimSun,sans-serif;
|
||||
line-height: 1;
|
||||
content: '*';
|
||||
}
|
||||
}
|
||||
.input_area{
|
||||
display: inline-block;
|
||||
&.flex_60{
|
||||
padding-right: 20px;
|
||||
width: 60%;
|
||||
}
|
||||
&.flex_40{
|
||||
width: 40%;
|
||||
}
|
||||
&.flex_100{
|
||||
width: 100%;
|
||||
}
|
||||
&.flex_50{
|
||||
width: 50%;
|
||||
}
|
||||
&.flex_50_left{
|
||||
padding-right: 10px;
|
||||
}
|
||||
&.flex_50_right{
|
||||
padding-left: 10px;
|
||||
}
|
||||
}
|
||||
.label_sub_text{
|
||||
font-size: 12px;
|
||||
color: #999999;
|
||||
}
|
||||
.test_demo_title,
|
||||
.test_demo_ctx,
|
||||
.editor_form{
|
||||
margin: 0 30px;
|
||||
}
|
||||
.test_demo_title{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
height: 60px;
|
||||
border-bottom: 1px solid #d9d9d9;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.collapse_area{
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,50 @@
|
||||
/*
|
||||
* @Description: 左侧编辑 / 评论 / 提交记录
|
||||
* @Author: tangjiang
|
||||
* @Date: 2019-11-19 11:35:30
|
||||
* @Last Modified by: tangjiang
|
||||
* @Last Modified time: 2019-11-19 19:07:02
|
||||
*/
|
||||
|
||||
import './index.scss';
|
||||
import React, { useState } from 'react';
|
||||
import { Tabs } from 'antd';
|
||||
import EditorTab from './editorTab';
|
||||
import PrevTab from './prevTab';
|
||||
import CommitTab from './commitTab';
|
||||
// import * from 'rc-form';
|
||||
|
||||
const { TabPane } = Tabs;
|
||||
|
||||
const LeftPane = () => {
|
||||
|
||||
const [defaultActiveKey, setDefaultActiveKey] = useState('editor');
|
||||
|
||||
const tabArrs = [
|
||||
{ title: '编辑', key: 'editor', content: (<EditorTab />) },
|
||||
{ title: '预览', key: 'prev', content: (<PrevTab />) },
|
||||
// { title: '提交记录', key: 'commit', content: (<CommitTab />) },
|
||||
];
|
||||
|
||||
const tabs = tabArrs.map((tab) => {
|
||||
const Comp = tab.content;
|
||||
return (
|
||||
<TabPane tab={tab.title} key={tab.key}>
|
||||
{ Comp }
|
||||
</TabPane>
|
||||
)
|
||||
});
|
||||
|
||||
// tab切换时
|
||||
const handleTabChange = (key) => {
|
||||
setDefaultActiveKey(key);
|
||||
}
|
||||
|
||||
return (
|
||||
<Tabs activeKey={defaultActiveKey} onChange={handleTabChange}>
|
||||
{ tabs }
|
||||
</Tabs>
|
||||
)
|
||||
};
|
||||
|
||||
export default LeftPane;
|
||||
@ -0,0 +1,25 @@
|
||||
// .split-pane-left{
|
||||
// .ant-tabs-nav-wrap{
|
||||
// padding: 0 30px;
|
||||
// }
|
||||
// .ant-tabs-bar{
|
||||
// margin: 0;
|
||||
// }
|
||||
// // .ant-tabs-tabpane{
|
||||
// // padding-top: 10px;
|
||||
// // height: calc(100vh - 110px);
|
||||
// // overflow: auto;
|
||||
// // }
|
||||
|
||||
// .ant-form-item-control{
|
||||
// line-height: 1;
|
||||
// }
|
||||
|
||||
// .editor_area,
|
||||
// .prev_area{
|
||||
// height: calc(100vh - 110px);
|
||||
// overflow-y: auto;
|
||||
// padding: 20px 0;
|
||||
// }
|
||||
// }
|
||||
@import '../../split_pane_resizer.scss';
|
||||
@ -0,0 +1,57 @@
|
||||
/*
|
||||
* @Description: 代码预览页面
|
||||
* @Author: tangjiang
|
||||
* @Github:
|
||||
* @Date: 2019-11-24 10:09:55
|
||||
* @LastEditors: tangjiang
|
||||
* @LastEditTime: 2019-11-27 19:30:51
|
||||
*/
|
||||
import './index.scss';
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { connect } from 'react-redux';
|
||||
import {Empty} from 'antd';
|
||||
import QuillEditor from '../../../quillEditor';
|
||||
const PrevTab = (props) => {
|
||||
// const { } = props;
|
||||
const [desc, setDesc] = useState('');
|
||||
|
||||
useEffect(() => {
|
||||
setDesc(props.description);
|
||||
}, [props.description]);
|
||||
|
||||
const renderHtml = () => {
|
||||
if (!desc) {
|
||||
return (
|
||||
<div className={'no_result'}>
|
||||
<Empty />
|
||||
</div>
|
||||
);
|
||||
} else {
|
||||
return (
|
||||
<div className={'render_html'} dangerouslySetInnerHTML={{ __html: desc }}></div>
|
||||
)
|
||||
}
|
||||
}
|
||||
return (
|
||||
<div className={`prev_area`}>
|
||||
{/* {renderHtml()} */}
|
||||
{/* <div dangerouslySetInnerHTML={{ __html: desc }}></div> */}
|
||||
<QuillEditor
|
||||
style={{ height: 'calc(100% - 45px)', overflowY: 'auto' }}
|
||||
options={[]}
|
||||
readOnly={true}
|
||||
htmlCtx={props.description}/>
|
||||
</div>
|
||||
)
|
||||
|
||||
}
|
||||
const mapStateToProps = (state) => {
|
||||
const { ojForm } = state.ojFormReducer;
|
||||
return {
|
||||
description: ojForm.description
|
||||
}
|
||||
}
|
||||
|
||||
export default connect(
|
||||
mapStateToProps
|
||||
)(PrevTab);
|
||||
@ -0,0 +1,11 @@
|
||||
.no_result{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
|
||||
}
|
||||
|
||||
.render_html{
|
||||
padding: 20px 30px;
|
||||
}
|
||||
@ -0,0 +1,215 @@
|
||||
/*
|
||||
* @Description: 右侧代码块
|
||||
* @Author: tangjiang
|
||||
* @Date: 2019-11-18 08:42:04
|
||||
* @Last Modified by: tangjiang
|
||||
* @Last Modified time: 2019-11-20 00:00:34
|
||||
*/
|
||||
|
||||
import './index.scss';
|
||||
|
||||
import React, { Fragment, useState, useRef, useEffect } from 'react';
|
||||
import { Icon, Drawer, Tabs, Button, notification } from 'antd';
|
||||
import _ from 'lodash';
|
||||
import MonacoEditor from '@monaco-editor/react';
|
||||
import { connect } from 'react-redux';
|
||||
import InitTabCtx from './initTabCtx';
|
||||
import SettingDrawer from '../../components/monacoSetting';
|
||||
import CONST from '../../../../constants';
|
||||
import actions from '../../../../redux/actions';
|
||||
|
||||
const { fontSetting, opacitySetting } = CONST;
|
||||
|
||||
const { TabPane } = Tabs;
|
||||
|
||||
const RightPaneCode = (props) => {
|
||||
|
||||
const [showDrawer, setShowDrawer] = useState(false); // 控制配置滑框
|
||||
const [defaultActiveKey, setDefaultActiveKey] = useState('1'); // 当前选中的tab
|
||||
const [showTextResult, setShowTextResult] = useState(false); // 是否点击控制台按钮
|
||||
const [editCode, setEditCode] = useState(()=> {
|
||||
return '#include <stdio.h>';
|
||||
}); // monaco编辑器内容
|
||||
const [language, setLanguage] = useState('C')
|
||||
const [fontSize,setFontSize] = useState(12);
|
||||
const editorRef = useRef(null); // 编辑器ref
|
||||
|
||||
useEffect(() => {
|
||||
if (props.language) {
|
||||
// console.log('当前输入的代码:', editCode);
|
||||
// console.log('当前输入的语言:', props.language);
|
||||
setLanguage(props.language)
|
||||
}
|
||||
}, [props.language]);
|
||||
|
||||
useEffect(() => {
|
||||
}, [props.testCases]);
|
||||
|
||||
useEffect(() => {
|
||||
}, [editCode]);
|
||||
|
||||
// 监听store中编辑器内容变化
|
||||
useEffect(() => {
|
||||
setEditCode(props.code);
|
||||
}, [props.code]);
|
||||
|
||||
// 打开设置
|
||||
const handleShowDrawer = (e) => {
|
||||
e.preventDefault();
|
||||
setShowDrawer(true);
|
||||
}
|
||||
|
||||
// 关闭设置
|
||||
const handleDrawerClose = (e) => {
|
||||
e.preventDefault();
|
||||
setShowDrawer(false);
|
||||
}
|
||||
|
||||
// 切换tab
|
||||
const handleTabChange = (key) => {
|
||||
setDefaultActiveKey(key);
|
||||
}
|
||||
|
||||
// 显示/隐藏tab
|
||||
const handleShowControl = () => {
|
||||
setShowTextResult(!showTextResult);
|
||||
}
|
||||
|
||||
// 侧边栏改变字体大小
|
||||
const handleFontSizeChange = (value) => {
|
||||
setFontSize(value);
|
||||
}
|
||||
// 文本框内容变化时，记录文本框内容
|
||||
const handleEditorChange = (origin, monaco) => {
|
||||
editorRef.current = monaco; // 获取当前monaco实例
|
||||
setEditCode(origin); // 保存编辑器初始值
|
||||
editorRef.current.onDidChangeModelContent(e => { // 监听编辑器内容的变化
|
||||
// TODO 需要优化 节流
|
||||
const val = editorRef.current.getValue();
|
||||
setEditCode(val);
|
||||
// 保存当前代码
|
||||
props.saveOjFormCode(val);
|
||||
});
|
||||
}
|
||||
|
||||
// 提交按钮点击
|
||||
const handleSubmit = (e) => {
|
||||
e.preventDefault();
|
||||
if (!editCode) {
|
||||
notification['error']({
|
||||
message: '必填',
|
||||
description: '代码块内容必须输入!'
|
||||
});
|
||||
editorRef.current.focus();
|
||||
return;
|
||||
}
|
||||
props.changePublishLoadingStatus(true);
|
||||
const { onSubmitForm } = props;
|
||||
onSubmitForm(editCode);
|
||||
}
|
||||
|
||||
// 调试测试代码
|
||||
// const handleTestCode = () => {
|
||||
// // 打开控制台信息
|
||||
// setShowTextResult(true);
|
||||
// this.formRef.handleTestCodeFormSubmit(() => {
|
||||
// // 当验证通过后 切换tab 到代码执行结果
|
||||
// setDefaultActiveKey('2');
|
||||
// });
|
||||
// }
|
||||
|
||||
// 控制台点击时 添加active属性
|
||||
const classNames = `control_tab ${showTextResult ? 'move_up move_up_final' : 'move_down_final'}`;
|
||||
|
||||
// 配置编辑器属性
|
||||
const editorOptions = {
|
||||
selectOnLineNumbers: true,
|
||||
automaticLayout: true,
|
||||
fontSize: `${fontSize}px`
|
||||
}
|
||||
|
||||
// 返回渲染值
|
||||
return (
|
||||
<Fragment>
|
||||
<div className={'right_pane_code_wrap'}>
|
||||
<div className={'code-title'}>
|
||||
<span></span>
|
||||
<Icon className={'code-icon'} type="setting" onClick={handleShowDrawer}/>
|
||||
</div>
|
||||
{/** 代码编辑器 */}
|
||||
<MonacoEditor
|
||||
height={showTextResult ? 'calc(100% - 382px)' : 'calc(100% - 112px)'}
|
||||
width="100%"
|
||||
language={language.toLowerCase()}
|
||||
value={editCode}
|
||||
options={editorOptions}
|
||||
theme="dark"
|
||||
editorDidMount={handleEditorChange}
|
||||
/>
|
||||
{/* 控制台信息 */}
|
||||
<div className="pane_control_area">
|
||||
<Tabs
|
||||
className={classNames}
|
||||
activeKey={defaultActiveKey}
|
||||
tabBarStyle={{ backgroundColor: '#000', color: '#fff' }}
|
||||
onChange={handleTabChange}
|
||||
>
|
||||
<TabPane tab={'自定义测试用例'} key={'1'} style={{ height: '280px', overflowY: 'auto' }}>
|
||||
<InitTabCtx wrappedComponentRef={(form) => this.formRef = form }/>
|
||||
</TabPane>
|
||||
<TabPane tab={'代码执行结果'} key={'2'} style={{ height: '280px', overflowY: 'auto' }}>
|
||||
<h2>代码执行结果</h2>
|
||||
</TabPane>
|
||||
</Tabs>
|
||||
<div className="pane_control_opts">
|
||||
<Button type="link" style={{ color: '#fff' }} onClick={handleShowControl}>控制台 <Icon type={ showTextResult ? "down" : "up" } /></Button>
|
||||
<p>
|
||||
{/* <Button ghost
|
||||
style={{ marginRight: '10px', color: '#28BD8B', borderColor: '#28BD8B' }}
|
||||
onClick={handleTestCode}
|
||||
disabled={!props.identifier || props.testCases.length === 0}
|
||||
>调试代码</Button> */}
|
||||
<Button
|
||||
loading={props.submitLoading}
|
||||
type="primary"
|
||||
onClick={handleSubmit}
|
||||
>{props.identifier ? '更新' : '提交'}</Button>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Drawer
|
||||
className={'setting_drawer'}
|
||||
placement="right"
|
||||
closable={false}
|
||||
onClose={handleDrawerClose}
|
||||
visible={showDrawer}
|
||||
>
|
||||
<SettingDrawer {...fontSetting} onChangeFontSize={handleFontSizeChange}/>
|
||||
<SettingDrawer {...opacitySetting}/>
|
||||
</Drawer>
|
||||
</Fragment>
|
||||
);
|
||||
}
|
||||
|
||||
const mapStateToProps = (state) => {
|
||||
const { ojForm, testCases, identifier, code } = state.ojFormReducer;
|
||||
const { submitLoading } = state.commonReducer;
|
||||
return {
|
||||
language: ojForm.language,
|
||||
testCases,
|
||||
identifier,
|
||||
code,
|
||||
submitLoading
|
||||
}
|
||||
};
|
||||
|
||||
const mapDispatchToProps = (dispatch) => ({
|
||||
saveOjFormCode: (code) => dispatch(actions.saveOjFormCode(code)),
|
||||
changePublishLoadingStatus: (flag) => dispatch(actions.changeSubmitLoadingStatus(flag))
|
||||
});
|
||||
//
|
||||
export default connect(
|
||||
mapStateToProps,
|
||||
mapDispatchToProps
|
||||
)(RightPaneCode);
|
||||
@ -0,0 +1,139 @@
|
||||
.right_pane_code_wrap{
|
||||
position: relative;
|
||||
// justify-content: center;
|
||||
background-color: #222;
|
||||
height: 100%;
|
||||
// justify-content: ;
|
||||
.code-title,
|
||||
.controller-pane,
|
||||
.pane_control_opts{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
// padding: 0 30px;
|
||||
background: #000;
|
||||
color: #fff;
|
||||
}
|
||||
.code-title,
|
||||
.pane_control_opts{
|
||||
padding: 0 30px;
|
||||
}
|
||||
|
||||
.code-title{
|
||||
height: 56px;
|
||||
.code-icon{
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
// .controller-pane{
|
||||
// min-height: 56px;
|
||||
// background-color: #222;
|
||||
// }
|
||||
.code-pane-wrap{
|
||||
height: 800px;
|
||||
// position: absolute;
|
||||
// top: 56px;
|
||||
// bottom: 56px;
|
||||
// width: 100%;
|
||||
}
|
||||
|
||||
.pane_control_area{
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
// height: 56px;
|
||||
.control_tab{
|
||||
position: absolute;
|
||||
bottom: -325px;
|
||||
width: 100%;
|
||||
// transition: all .2s;
|
||||
opacity: 0;
|
||||
// animation: .3s ease-in-out move_up;
|
||||
// &.active{
|
||||
// bottom: 0;
|
||||
// opacity: 1;
|
||||
// }
|
||||
&.move_up{
|
||||
animation: move_up .3s ease-in;
|
||||
}
|
||||
&.move_up_final {
|
||||
bottom: 0;
|
||||
opacity: 1;
|
||||
}
|
||||
&.move_down{
|
||||
animation: move_down .3s ease-in-out;
|
||||
}
|
||||
&.move_down_final{
|
||||
bottom: -325px;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
.pane_control_opts{
|
||||
height: 56px;
|
||||
}
|
||||
|
||||
.ant-tabs-bar{
|
||||
padding: 0 10px;
|
||||
margin: 0px;
|
||||
border-bottom: transparent;
|
||||
}
|
||||
.ant-tabs-ink-bar{
|
||||
bottom: 1px;
|
||||
}
|
||||
// .tab_ctx_area.pos_center{
|
||||
// background: #222;
|
||||
// }
|
||||
.pane_control_opts{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
z-index: 20;
|
||||
}
|
||||
}
|
||||
|
||||
.setting_drawer{
|
||||
.setting_h2{
|
||||
line-height: 50px;
|
||||
}
|
||||
.setting_desc{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 10px;
|
||||
.flex_item{
|
||||
line-height: 32px;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes move_up {
|
||||
0%{
|
||||
opacity: 0;
|
||||
// bottom: -325px;
|
||||
}
|
||||
90%{
|
||||
opacity: 0.5;
|
||||
// bottom: 0px;
|
||||
}
|
||||
100%{
|
||||
opacity: 1;
|
||||
bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes move_down{
|
||||
0%{
|
||||
opacity: 1;
|
||||
bottom: 0
|
||||
}
|
||||
10%{
|
||||
opacity: .2;
|
||||
}
|
||||
20%{
|
||||
opacity: 0;
|
||||
}
|
||||
100%{
|
||||
opacity: 0;
|
||||
bottom: -325px;
|
||||
}
|
||||
}
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in new issue