App定製課程表功能，總共分幾步？
課程表是如今學生群體最常用的功能之一，當下正值開學季，該如何快速實現課程表功能呢？
首先展示專案效果：
接下來詳細講解課程表功能的實現。
功能實現的思路：
本專案基於AVM多端框架編寫，因此需要想辦法去構造特定資料、然後再改變資料，本專案核心業務就是課程資料的處理，難點在於課表的新增。
專案主要針對大學課表進行設計，課程很多地方存在不確定性，如課程周次數可能連續也可能不連續、上課時間可能 1-2 節也可能一整天、上課教室也可能不一樣，因此課程的資料結構如下圖。
後端需要提供當前周、當前周課程資料、新增課程等介面，當然課程資料查詢是比較複雜的，這裡不展開討論。前端主要是將課表資訊顯示在指定位置，資料比較簡單。
1、課程列表頁面
（1）當前周課程原始資料結構
這個資料需要再重組，因為需要將課程擺放到指定位置，必須知道與頂部距離以及自身高度。可以透過上課時間jie這個引數獲取height，top。
橫向分為8份，每份寬度12。5%，高度70px，預設可以顯示13節課。課程背景預設有7種樣式，星期對應的是left引數也有7種樣式，上課節次對應top引數有12種樣式。具體css樣式如下：
每一門課程都是用絕對定位，寬度相同，根據上課時間決定高度、位置，程式碼表示如下：
（2）當前周星期資料結構
獲取當前周的時間程式碼如下：
this.setDate(new Date()); setDate(date) { let arr = []; let week = date.getDay() - 1; date = this.addDate(date, week * -1); this.currentFirstDate = new Date(date); for (var i = 0; i < 7; i++) { arr[i] = this.formatDate(i == 0 ? date : this.addDate(date, 1)) } this.week_data = arr this.currentWeek() }, addDate(date, n) { date.setDate(date.getDate() + n); return date; }, formatDate(date) { let year = date.getFullYear(); let month = (date.getMonth() + 1); let day = date.getDate(); let week = ['週日', '週一', '週二', '週三', '週四', '週五', '週六'][date.getDay()]; this.currentMonth = month; if (month < 10) { month = '0' + month; } if (day < 10) { day = '0' + day; } return { "week": week, "date": month + '/' + day, "active": false }; }, //當前星期 currentWeek() { let date = new Date(); let weekday = date.getDay(); if (weekday == 1) { this.week_data[0].active = true } else if (weekday == 2) { this.week_data[1].active = true } else if (weekday == 3) { this.week_data[2].active = true } else if (weekday == 4) { this.week_data[3].active = true } else if (weekday == 5) { this.week_data[4].active = true } else if (weekday == 6) { this.week_data[5].active = true } else if (weekday == 0) { this.week_data[6].active = true } }
上一週以及下一週相應程式碼：
last（） {
if
（
this
。week >
1
） {
this
。week =
this
。week -
1
this
。setDate（
this
。addDate（
this
。currentFirstDate， -
7
））；
}
}，
next（） {
if
（
this
。week <
20
） {
this
。week =
this
。week +
1
this
。setDate（
this
。addDate（
this
。currentFirstDate，
7
））；
}
}，
2、課程新增頁面
本專案主要針對大學課程進行設計，由於上課時間地點可能不規律，因此需要考慮周次、節次、星期、上課地點幾個因素。為了方便使用者快速新增課程，同一門課程可支援新增多個上課時間。頁面業務邏輯只有周次選擇、時間選擇兩個地方有點複雜因此將其拆分為兩個元件
課程的主要欄位如下：
name：
‘大學計算機’
，
//課程名稱
room：
‘機房C411’
，
//上課教室
teacher：
‘李國海’
，
//任課教師
weekday：
‘0’
，
//星期
weeks：
‘1-9，11-20’
，
//上課週數
jie：
‘5-9’
，
//上課節次
bg：
‘1’
，
//課程顏色，系統提供7種顏色
大學的課程上課時間可能不規律，上課週數也不一定是 20 周，週數大致分為單雙週以及其他，週數的格式如下：
不規律的周次格式：1-9，11，13，15-20
1-20周單週的格式：1，3，5，7，9，11，13，15，17，19
1-20周雙週的格式：2，4，6，8，10，12，14，16，18，20
1-20周的格式：1-20
但是這種資料格式對後端資料查詢很不友好。
頁面初始資料，預設1-24周全部選中。
（1）單週choose（1），雙週choose（2），全選choose（0），具體業務處理原始碼如下：
choose（n） {
for
（let i
in
this
。weeks） {
this
。weeks［i］。on =
false
}
if
（n ==
1
） {
if
（
this
。choose ==
1
） {
this
。choose =
3
}
else
{
this
。choose =
1
for
（let i =
0
； i <
this
。weeks。length； i++） {
if
（
this
。weeks［i］。week %
2
！=
0
） {
this
。weeks［i］。on =
true
}
}
}
}
else
if
（n ==
2
） {
if
（
this
。choose ==
2
） {
this
。choose =
3
}
else
{
this
。choose =
2
for
（let i =
0
； i <
this
。weeks。length； i++） {
if
（
this
。weeks［i］。week %
2
==
0
） {
this
。weeks［i］。on =
true
}
}
}
}
else
if
（n ==
0
） {
if
（
this
。choose ==
0
） {
this
。choose =
3
}
else
{
this
。choose =
0
for
（let i
in
this
。weeks） {
this
。weeks［i］。on =
true
}
}
}
}
（2）
選擇某一週的函式set_week （i）原始碼如下：
set_week（i） {
if
（
this
。weeks［i］。
on
==
true
） {
this
。weeks［i］。
on
=
false
}
else
{
this
。weeks［i］。
on
=
true
}
}
（3）確定按鈕get_weeks （）原始碼如下：
get_weeks（） {
this
。mask =
false
//影藏元件
let
arr = ［］；
for
（
let
i =
0
； i <
this
。weeks。length； i++） {
let
on
=
this
。weeks［i］。
on
；
if
（
on
==
true
） {
arr。push（
this
。weeks［i］。week）；
}
}
let
result = ［］；
let
tmp；
while
（tmp = arr。shift（）） {
if
（result。length ==
0
） {
result。push（［tmp］）；
continue
；
}
let
e = result［result。length -
1
］；
if
（tmp == e［e。length -
1
］ +
1
） {
e。push（tmp）；
}
else
{
result。push（［tmp］）；
}
}
for
（
let
i =
0
； i < result。length； i++） {
let
res = result［i］；
if
（res。length >
1
） {
result［i］ = res［
0
］ +
‘-’
+ res［res。length -
1
］；
}
else
{
result［i］ = res［
0
］ +
‘’
}
}
for
（
let
i =
0
； i < result。length； i++） {
if
（result［i］。indexOf（
“-”
） ！=
-1
） {
result［i］ = result［i］
}
}
this
。fire（
‘GetWeek’
， { weeks： result。
join
（
‘，’
） }）；
//格式為1-9，11，13，15-20
}
