組織構造、ネットワークディスク、メッセージ、プロジェクト、承認などの機能をゼロからステップバイステップで実現する模倣性の高いプロジェクトコラボレーションツール[Worktile]

声明

このコースは、2020 年 8 月 6 日に北京宜城星光科技によって開発されたWorktileを模倣したものです. 関連資料の著作権はオリジナルの Web サイトに属します. このコースは模倣ステーションの作品です, 教育のみを目的としており、商業目的ではありません. 商業協力のため、元のサイトにアクセスしてください。

コース開発に先立って、市販されているほぼすべてのエンタープライズコラボレーションオフィスプラットフォームを試しましたが、その時点で最適だと思った Worktile を選択し、UI スタイルも気に入ったので、困っている友人に勧めたいと思います。

このコースの目的は、プロフェッショナルなローコードアプリケーションプラットフォームである ZhongTouch に基づく、複雑な協調 OA のような SaaS アプリケーションソフトウェアをデモンストレーションし、完全な機能を備えた複雑な SaaS アプリケーションを開発する方法を説明することです。Worktile は、エンタープライズオフィスシナリオ向けに特別に設計されたプロジェクトコラボレーション管理システムであり、多くのビジネス概念と複雑な関係を備えています。おそらくこの種の複雑なアプリケーションを実行する必要はありませんが、そこで使用されるアイデアと使用法を学ぶことは非常に価値があります。。

ソースサイトは時間の経過とともに繰り返し進化する可能性がありますが、コースの作品はそれに応じて変更されないため、作品が現在表示されているソースサイトと異なるのは正常です。

このコースには、各機能モジュールを説明する非常に詳細なビデオがあり、概要、組織構造、ネットワークディスク、インスタントメッセージング、プロジェクト管理、承認など、白紙のページから段階的に実装されます。

アカウント

会社の組織構造を説明するために、次の人物は架空のものです。

CEO:戴国強 13845678901 管理者
ゼネラルマネージャーオフィスマネージャー: Zhao Min 13845678911 管理者
人事責任者: 陳英 13845678902 管理者
最高財務責任者: Fu Yuan 13845678906 管理者
プロジェクトチームリーダー: Zeng Hui 13845678312
プロジェクトチーム開発: 黄紅良 13845678909
プロジェクトチーム開発: Huang Yaoqian 13845678223
テクニカルディレクター: Xie Linhua 13845678907
プロジェクトチームマネージャー: Sun Ronghao 13845678905
プラットフォームグループリーダー: Ge Chuanfu 13845678910
テストチームリーダー: 王伯祥 13845678908
未割り当ての部門: 黄飛凱 13845678102

これらのキャラクターと携帯電話はすべて創作であり、アバターは私のメモからのものです。

このコースアプリケーションは学習者が複製するためのテンプレートとして使用されます。データはあまり乱雑であってはなりません。デモアカウントは提供されず、登録も受け付けられていないため、このアプリケーションを複製しても直接ログインすることはできません。クローン作成後、アカウントログイン管理プラグインを使用するログインページ (/z/login) に移動し、右クリックしてプラグインを選択し、右側のパネルで [登録] をアクティブにし、ページを保存して更新します。登録後、ログインするためのアカウントが得られますが、上記の担当者のアカウントにログインするためのパスワードがまだありません。まず、「バックエンドセキュリティ」の $user.toggleRole の制限をコメントアウトし、クリックします。「メンバー管理」のメンバーの「設定」を選択し、「変更」をクリックします。「メンバーアカウント」タブページでこのメンバーのパスワードを変更すると、そのパスワードはその人としてログインされます。詳細なガイダンスについては、教育ビデオに移動してください。

徹底的な研究の準備ができている学生は、ZhongTouch の公式 Web サイトに登録してログインし、クローンボタンをクリックして、アプリケーション全体をコピーしてデバッグし、自由に変更してください。

グローバル $V

グローバル永続状態は、status の頭文字sです。アプリケーションの起動時に localStorage から読み取り、アプリケーションの終了時 (onbeforeunload) に localStorage に保存し直すため、前回終了したときの状態をすぐに復元できます。

$Vs 左ナビゲーション: 最新の左ナビゲーションラベル
$Vs メッセージ: 最新のプライベートチャットの連絡先またはグループの _id
$Vs unread: 各プライベートチャットまたはグループの最新の未読メッセージの数
$Vs read: 各プライベートチャットまたはグループの最新のメッセージ読み取り時刻
$Vs 折りたたみ: さまざまな折りたたみメニュー
$Vs プロジェクト: 最後に開かれたプロジェクト _id とそのコンポーネントの添え字とビューの添え字
$Vs タスクバー: プロジェクトごとにタスクバーに固定されたタスクリスト

世界的なイベント

click: ポップアップウィンドウがある場合は、$v.popポップアップウィンドウを閉じます。ただしkeep、true の場合は、ポップアップウィンドウの内側または z ページの外側 (確認または警告) をクリックして閉じません。
keydown: ポップアップウィンドウまたはモーダルウィンドウがある場合、exit キーを押してEscapeポップアップウィンドウまたはモーダルウィンドウを閉じます。

組織

会社の組織構造は、他の機能の基礎となります。さまざまな部門とそのメンバーをツリー構造で管理でき、同僚が担当しているタスクの状況をアドレス帳から確認することもできます。

ジョブリストは
、追加、変更、上へ移動、下へ移動、および削除できます。
ユーザーがログイン ($c.exp.onLogin) すると、会社の全従業員と会社の組織構造、つまり $c.exp. 部門の情報が取得されます。
従業員と組織の構造はグローバル変数に統合されているため、アプリケーションのさまざまな場所で使用するのに便利です。
$V.部门これは、「未割り当て部門」の追加を除いて、組織構造のクローンです。組織構造を
$V.部门成员フラット化した後、各部門のメンバーの追加は、
$V.部门总成员$V 部門メンバーに基づいて行われ、その後、すべての子孫部門メンバーが追加されます。
メンバー管理
基本情報設定、メンバーアカウント変更、ロール設定
部門を調整する
メンバー (1 人または全員) を選択して、部門を一括で調整できます。
メンバー検索（フィルター）

主な難易度:

移動とは位置を交換することです。ネイティブ関数がよく使われます。arr.splice(新下标, 0, arr.splice(旧下标, 1)[0])まず古い添え字から要素を削除します。削除された要素は配列なので、[0]後で要素自体を追加し、削除した要素を新しい添え字に挿入します。
$l.arr.splice($index - 1, 0, $l.arr.splice($index, 1)[0]) が上に移動していることも理解しやすいです。$l.arr.splice($index + 1, 0, $l.arr.splice($index, 1)[0]) は下に移動します。以下の講座を学び、 Sortable.js の
使い方をマスターしたら、ここの上下ボタンをドラッグソートに変更すると、操作がより簡単かつ直感的になります。
データベース内の配列の要素を削除するには、一般的に$pullが使用されます。つまり、配列から要素をプルします
。 $xtk.modify("Company", "Position", {$pull: {"x.arr) ": $x} })
データ構造
部門はツリー構造で格納され、部門には名前と上司があり、zchildren 配列はサブ部門の格納に使用されます。
データコンポーネントのデータソースに zchildren が含まれる場合、再帰的にツリー構造にレンダリングされます。
サブ部門のインデント
部門の階層を反映するために、動的スタイルの階層の深さ ($indexes) に従って左インデント (paddingLeft) が計算されます。
部門調整やメンバー更新後に$v.F5マウントコンポーネントに最新データを取得させて再レンダリングする
メンバーを削除する部門はです$unset。特殊な部署「無配属部署」にも注目だ。
サブ部門を削除するには$pull、配列から「引き離します」。

住所録

同僚リスト
同僚の詳細
同僚のタスクリストとステータス番号
メッセージを送ります
頻繁な連絡先
集める
部門ごとに同僚を探す

ネットディスク

Baidu Netdisk や Alibaba Netdisk と同様に、クラウドに保存されているファイルを仮想フォルダーの形式で管理し、フォルダー全体をバッチでアップロードします。

ネットワークディスク表示

フォルダーとファイルの情報を読み取ります。
フォルダツリー
ファイルパス
検索
分類する

主な難易度:

ツリーデータ構造
フォルダーは、直接のツリー構造ではなく、製品テーブルに保存される単なる単純なレコードであり、、、名称(颜色つまり父、親フォルダー) 情報を含みますが、「」に基づいて前のレッスンと同様の構造を構築する必要があります。「parent 」データコンポーネントのデータソースとして使用されます。
フォルダーは、組織構造ほど単一で安定したものではなく、非常に深い階層構造を持つことがあり、すべてのフォルダーを一度に読み出すことはできません。onReady では、最初に最上位のファイルと最上位のフォルダー (その親フォルダーは「none」) を読み取り、それぞれの直接のサブフォルダーを順番に読み取ります (サブフォルダーがあるかどうかに応じて、「展開」を表示するかどうかを決定します)小さな三角形のアイコン）。
ファイルまたはフォルダーを読み取るための重要な点は、親フォルダー _id を実行環境に渡すことです{ 父: _id }。
ファイルはオブジェクトストレージサーバーにアップロードされる通常のリソースであり、ファイル構造ツリー情報を持たないため、ファイルをアップロードした後は毎回、現在のフォルダーを親フォルダーとしてリソーステーブルに追加する必要があります: $resource.modify (_id, {
" x.type": "ネットワークディスク", "x.parent": 現在のフォルダー ID })
いくつかの主要な変数は、
$v.根最大のツリーであるフォルダー構造ツリー (名前は「ネットワークディスク」と呼ばれ、ファイルパスの最初のノード) のルートです。その「zchildren」には上で説明した最上位のフォルダーが含まれ、「files」には最上位のファイルが含まれます。特に、その _id は「none」です。
$v.树これは、親フォルダー _id をキーとしてフォルダーのすべてのレベルから始まる大小のツリーです。つまり、$v.树.无です$v.根。
$v.路径ツリーのルートから現在の
$v.文件夹フォルダーまでのすべてのレベルのフォルダーツリーの配列です。は現在のフォルダー ID です。ユーザーがクリックすると (左側のファイル構造ツリーであっても、メインのフォルダーリストであっても)、そのフォルダーを親フォルダーとして使用して、その中のフォルダーとファイルの情報を読み取ります。また、小さな三角形の「展開」アイコンをクリックすると、孫フォルダの情報を読み書きするだけで済みますが、ツリーにはファイル情報は表示されません。サブフォルダーが読み込まれました。孫フォルダーの情報は、サブフォルダーを表示するかどうかを決定します。フォルダーの小さな三角形。
フォルダー（カスタムコンポーネント）の
動的カラー
再レンダリングデータを再構築し、変更されたときに再度レンダリングする 3 つのコンポーネントがマウントされています
。A. 左側のファイル構造ツリー内のマウントコンポーネントは、ルートノードから開始して、検索されたすべてのフォルダーを再帰的にたどる組み立てに使用されます。一方ではフォルダーを直接マウントし、もう一方ではフォルダーをプッシュします。親フォルダーの zchildren 配列。B. 先頭のファイルパス内のマウントコンポーネントは、現在のフォルダーからルートノードまで再帰的にアセンブリに使用され、フォルダーの各層をパス配列の先頭にプッシュします (シフト解除)。C. メインファイルリストのマウントコンポーネントは、現在のフォルダー内のファイルリストを組み立てるために使用されます。$v.F5
$v.树$v.树
$v.路径
検索と並べ替え
常に最初にフォルダーリストを表示し、次にファイルリストを表示します。これらは個別に検索および並べ替えられ、その後 2 つは結合されます:
($v.search.folder|| $v.tree[$v . フォルダー].zchildren || []). sort ($v.sort.key, $v.sort.incr).concat ( ($v.search.file || $v.tree[$v.folder] .ファイル|| []). sort ($v.sort.key, $v.sort.incr))

ネットワークディスクのアップロード

新しいフォルダ
ファイルをアップロードする (複数の選択肢)
フォルダーをアップロードします (ファイル構造を維持します)
アップロードリスト、アップロードの進行状況とステータス

主な難易度:

ファイルのアップロード
ボタンは、非表示の入力要素 $el.firstElementChild.click() をトリガーします。
アップロードが成功した後、$l.Uユーザーがアップロードプロセス中に他のフォルダーをクリックして $v.List ($v.exp.file.exc({parent : $v.folder})) にはこの心配はありません。
フォルダーのアップロード
$v. フォルダーの変更による影響を避けるために、まず $l. フォルダー = $v. フォルダーという一時変数に割り当てます。フォルダー全体を再帰的にアップロードするための鍵は、各ファイルをアップロードすることです
。には相対パスがありますwebkitRelativePath。各パスノードをループし、最も内側のフォルダーが $l. 現在のフォルダーに割り当てられるまで、未作成のフォルダーノードを作成し、アップロードの完了後にそれを親フォルダーとして使用します。
アップロードリストファイルがアップロードされる前に情報を配列にプッシュし、「アップロード中」としてマークします。画像またはビデオの場合はサムネイルを作成します: URL.createObjectURL(file)。アップロード中に進行スタイルを変更します
。$v.上传アップロード完了後、「アップロード中」フラグを削除します。

ネットワークディスク管理

重命名
動く
消去
色を変更する
チャットに送信する
ゴミ箱

主な難易度:

フォルダーまたはファイルを削除して元の場所から移動しますが、その後復元操作が行われるため、元の場所の情報を保持する必要があります。
親フォルダーを元の親フォルダーに変更することで
$rename: {"x.parent": "x.originalparent"}を実装します。
これにより、親フォルダーのないリソースは論理的に削除されます。
"x.元の親": {$exists: true}

インスタント・メッセージ

企業の WeChat/Feishu/DingTalk インスタントメッセージングと同様に、プライベートチャット、グループチャット、履歴メッセージ、トップへの固定をサポートし、絵文字、写真、ネットワークディスクファイル、プロジェクト、会話への承認を送信でき、ファイルや固定メッセージをブックマークすることもできます。メッセージ。つながりについて学ぶのに最適なコースです。

メッセージの初期化

プライベートグループ (グループメンバーには私も含まれます) とパブリックグループのリスト情報を取得し、それらの _id のリストを作成します$V.消息.群ID。
$socket.open()connection :
group_id list asを開くとchannels、関連するグループからメッセージを受信できるようになります。
saveToDBこれを true に設定すると、情報がデータベースに保存され、オンラインでなくても $socket.hist() を通じて履歴メッセージを表示できます。他の人から送信された未読メッセージも受信できます。
allowMultiLoginこれを true に設定すると、開いている複数のデバイス/ブラウザが同時にメッセージを受信できるようになります。
onConnect はプライベートチャットの履歴メッセージをすべて取得する
ことで接続されました。すべてのプライベートおよびパブリックグループの履歴メッセージを取得することによって。各メッセージに送信日を追加し、メッセージ一覧に分割する日付と週を表示して便宜を図ります。スティッキーセッションの _id のリストを取得します。プライベートチャットオブジェクト _id またはグループチャット _id に従って、各メッセージリストをに配置し、さらに各メッセージリストをに配置し、チャットウィンドウが一番上までスクロールするたびに、そこから _id を取り出して以前の履歴メッセージを取得し、各メッセージ _id を配置します。これに、履歴メッセージを削除するときに使用します。各メッセージの送信時間が読み取り時間よりも長いメッセージの数を入れます。$socket.hist()
$socket.hist($V.消息.群ID)

$V.消息.chat
$V.消息.more
$V.消息.histID
$V.s.已读$V.s.未读
onData は新しいメッセージを受信し
、チャットオブジェクト (プライベートチャット object_id またはグループ chat_id) に従って、対応するメッセージリストにメッセージを入れます$V.消息.chat。
メッセージが現在開いているチャットセッションにある場合、新しいメッセージはレンダリング後にビューにロールインされます。それ以外の場合、未読メッセージの数は 1 増加します。
このメッセージに @my 情報が含まれている場合、通知ウィンドウ通知がポップアップ表示されます (ブロックされていない場合)。

メッセージセッション

グループ/グループ設定の作成
グループに参加
プライベートチャットを開始する
会話リスト。最上位のセッションにメッセージがあるかどうかに関係なく、最初にすべてのメッセージが表示され、次に最上位のメッセージを除くメッセージを含むセッションが表示されます。
$V.message.top.concat($V.message.chat.keys() .filter('!$V.message .top.includes($x)'))
セッションフィルタリング:
.filter('$f.search.kw ? ($c.user[$x].x.name|| $c.xdb[$x].x.name).includes($f.search. kw) : 1')
未読メッセージ (履歴未読メッセージおよび即時未読の新規メッセージを含む)。
未読合計: $Vs unread.values().reduce('$acc + $x', 0)
セッションをクリックすると
、セッション ID が $Vs メッセージに割り当てられ、メッセージリストが表示され、最新のメッセージまでスクロールします。
未読メッセージの数が 6 未満の場合は、すべてのメッセージを既読に設定します (未読をクリアし、送信時間を記録します)最新のメッセージの)
セッションの削除
A. 関連するセッションのファイルリストを削除します。
B. ファイルリスト内のファイル自体を削除します。
C. 関連するセッションの固定メッセージリストを削除します。
D. メッセージ履歴全体を削除します。

インスタント・メッセージ

メッセージリスト
$V.message.chat[$Vsmessage]
日付が前のメッセージと異なる場合は、日付を分割して表示します。
日付 !== $array[$index - 1].date
自分が送信したメッセージを右寄せにして、他人が送信したメッセージと区別します
$c.me._id === from ? " message-item--me" : ""
メッセージポップアップボックス
固定メッセージ、自分が送信したメッセージを削除
HTML组件メッセージ本文をレンダリングします
クロスオブザーバー
読み取るメッセージ ($V.message.more[$Vsmessage].length) がさらにある場合、メッセージボックスの上部までスクロールすると、クロスオブザーバーがそこからアイテムを取り出して渡すようにトリガーされます。$V.消息.more$socket.more() を実行してさらに多くのメッセージを取得し、それらをメッセージリストの先頭に置きます。レンダリング後に最初のメッセージまでスクロールしますが、継続的なトリガーを避けるためにクロスビューアーはウィンドウの外側にありますが、ユーザーはさらに先に進みます。上にスクロールすると再びトリガーされます。
注意すべき点の 1 つは、一時変数 $vlmore を導入して、クロスビューアの新しいレンダリングが行われるたびに最初の実行が発生するのを防ぐことです。これは、この時点でユーザーがアクティブにスクロールすることによって発生するものではないためです。
未読メッセージ
未読メッセージの数を表示します。クリックすると、最後に読んだメッセージまたはメッセージボックスの上部までスクロールして、他のメッセージのクロスオブザーバーをトリガーし、「すべて既読としてマーク」をトリガーします。
テキストメッセージを送信し
、[表情文本]対応する画像に置き換えます: .replace($c.reg.emoticon, $c.fun.emoticon);
@someone: グループ会話で @ を押すと (つまり、Shift + 2)、 keyCode 2 です。50 です) 自分を除くグループメンバーのリストがポップアップ表示されますが、ウィンドウがポップアップ表示されたら、Shift キー以外のキー (keyCode は 16) を押してポップアップウィンドウを閉じ、対応する名前に置き換え
ます@24位的某人_id。 .replace($c.reg.mention , $c.fun.mention); 成员onClick イベントが追加されているため、クリックするとポップアップウィンドウが表示されます: window.mention click();
$socket.send($Vs message, "テキスト", $f.message.txt );
画像/ファイルメッセージの送信
ファイルアイコンをクリックしてアップロードダイアログボックスをポップアップ表示し、1 つまたは複数のファイルを選択してサーバーにアップロードします。
その後、それらをさまざまなファイルタイプに応じて対応する HTML テキストに変換します。i画像の場合は、画像のサムネイルを直接表示します。vビデオの場合は、対応するビデオのスクリーンショットを表示します。f他のファイルタイプの場合は、ファイル拡張子の形式に応じて異なるアイコンが表示されます。
メッセージの送信後、ファイル情報がこのセッションのファイルリストに追加されます。
メッセージの送信直後にデータベースが操作されるのではなく、内容が変数 $v. に配置されてファイルメッセージに保存され、メッセージが返された後に $c.exp.onData で実行されることに注意してください。 , 将来ファイルが削除されたときにメッセージ履歴からも削除されると考えられるため、削除するときは、メッセージ送信時刻 d が使用されます: $socket.pull(_id, from, d), そして今回はサーバー側で生成され、メッセージを受信した後でのみわかります。
プロジェクトタスク/承認/ネットワークディスクメッセージを送信

他の

ファイルリスト
ネットワークディスクからチャットに送信されたファイルは、このリストには含まれません。
ファイルを削除するには:
A. ファイル自体を削除します
B. 関連するセッションのファイルリストから削除します
C. メッセージ履歴から対応するメッセージを削除します。
固定メッセージリスト
削除されると、関連付けられた会話の固定メッセージリストから削除されます
メンバーアイコンをクリックする
とグループ内のグループメンバーが表示され、さらにメンバー情報を表示したり、メンバーを削除したりすることができます
プライベートチャットにメンバー情報を表示
設定アイコンをクリックします
会話の固定と固定解除
グループ設定
グループからの
脱退グループの削除

プロジェクト管理

プロジェクトコラボレーション管理は Worktile の中核機能であり、明確な目的を持って相互に関連するタスクを計画、整理、フォローアップするために使用されます。さまざまなシナリオでのプロジェクトのニーズに適応する、非常に柔軟なパーソナライズされた構成をサポートします。

Worktile は、さまざまな作業領域やシナリオでプロジェクトベースの方法でタスクを計画、制御、フォローアップします。

プロジェクト管理の概念

プロジェクト

タスク収集センターは、明確な目的を持つ相互に関連するタスクを計画、整理、およびフォローアップするために使用されます。プロジェクトは長期または短期の場合があります。

コンポーネント

タスクの表示方法には、かんばん、リスト、表、ガントチャート、カレンダー、レポートなど、さまざまな種類のコンポーネントがあり、タスク情報をさまざまな視覚的な形式でユーザーに提供します。

ビュー

コンポーネントには、タスクをグループ化、フィルタリング、並べ替えるためのさまざまなビューを設定できます。

タスクの種類

さまざまなビジネスシナリオを運ぶモデルは、高度に構造化されたタスク属性で構成されており、タスクの種類と状態フローモード間の関係を指定できるため、情報ストレージとチームコラボレーションの仕様が形成されます。

属性: タスク・タイプでは、このタイプのタスクに含めることができるカスタム情報を指定できます。さまざまな属性タイプがあります: テキスト、リッチ・テキスト、数値、日付、メンバー、複数メンバー、ドロップダウンの単一選択、ドロップダウンの複数選択、継承。

タスク

タスクタイプのインスタンス。各タスクには、タイトル、ステータス、担当者、参加者、開始時刻と終了時刻、コメントなどが含まれます。主要な部分は、タスクタイプに定義されたさまざまな属性です。

このコースを複製した後、さらに属性タイプを拡張し、コンポーネントタイプも拡張することをお勧めします。

データ・モデル

プロジェクト：

{
    名称: String,
    任务类型: [ID],
    描述: String,
    颜色: String,
    置顶: Boolean,
    参与人: [ID],
    组件: [{
        类型: String,
        名称: String,
        任务类型: ID,
        PC显示: [String],
        视图: [{
            名称: String,
            分组: String,
            筛选: String,
            排序: String
        }]
    }]
}

タスクの種類:

{
    名称: String,
    项目: ID,
    父任务类型: ID,
    图标: String,
    描述: String,
    状态: [{
        名称: String,
        颜色: String,
        类型: Number,
        默认: Boolean
    }],
    状态流: {},
    属性: [{
        字段: String,
        类型: String,
        选项: [],
        新建: Boolean,
        必填: Boolean
    }]
}

タスク：

{
    标题: String,
    项目: ID,
    任务类型: ID,
    父任务: ID,
    关联任务: [ID],
    负责人: ID,
    开始时间: Number,
    截止时间: Number,
    评论: [{
        txt: String,
        auth: ID,
        d: Date
    }],
    状态: {
        名称: String,
        颜色: String,
        类型: Number
    },
    属性: { ... } // 例子如下
}

このうち、タスク属性は、採用タスクの属性など、それが属するタスクタイプの属性で指定された特定のデータを格納します。

{
    职位: String,
    部门: String,
    薪资范围: String,
    需求人数: Number,
    在职人数: Number,
    JD描述: String,
    参与人: [ID]
}

データモデルをより直観的に理解するには、データベース管理プラグインをインストールします。

初期化

プロジェクトをロードする

私が貢献しているプライベートプロジェクトをロードする
パブリックプロジェクトをロードする
上記 2 つの項目を組み合わせて簡単な情報を抽出して$v.项目.菜单リストを作成します
からリスト$v.项目.菜单を除外します$v.项目.置顶
がある場合は$V.s.项目._id、このプロジェクト情報の読み込みを続けます
このアイテムをロードするタスクのタイプ
このプロジェクトのすべてのタスクをロードします
この項目を復元する任务栏配列

タスクの仕分け

上記で読み込んだ生データをに整理します$v.任务。

$v.任务.子任务类型タスクタイプに指定した親タスクタイプがある場合は、その親タスクタイプに追加します
各タスクタイプのカスタム属性を$v.任务.属性対応するリストに割り当てます。
読みやすいように、引き続き、そのフィールドに従って、上記の属性リストを対応する$v.任务.字段オブジェクトに割り当てます。
元の $c 定数を変更せずに、すべてのタスクデータのクローンを作成して配列に割り当て、 $v.任务.arr_id に従って$v.任务.Oオブジェクトを形成します。
タスクに親タスクがある場合は、タスクタイプに応じてその親タスクのサブタスク配列にタスクを追加し、x.子任务親タスクチェーンを再帰的に検索してタスクチェーン配列を形成しますx.父任务arr。タスクチェーン配列は、ナビゲーションバーとして表示されます。タスクポップアップウィンドウの上部
タスクタイプで定義された継承タイプの属性については、その下のすべてのタスクのこの属性に継承フィールドを追加します。

グループ化

上記で読み込んだ生データを整理します。$v.分组

現在アクティブなプロジェクトコンポーネント (つまり $Vs project.component) を$v.分组.组件
現在アクティブなコンポーネントのタスクタイプにあるタスクが、現在のアクティブビューのフィルタリング要件によってフィルタリングされた後、現在のアクティブビューで指定されたグループ化フィールドに従ってグループ化され、各タスクが配列に追加され、異なるタスクが追加されます。$v.分组.O[分组属性]配列$v.分组.arrを形成する属性をグループ化する
タスクのステータスに応じて各グループの下にあるタスクの数をカウントし、グループの総数を合計します。
現在アクティブなビューの並べ替え要件に従って、各グループのタスクリストを並べ替えます。
現在のタスクの種類を$v.任务.字段割り当てる$v.分组.字段
ガントチャートコンポーネントの追加処理を行う

タスクアクティビティ

タスクのアクティビティを関数にカプセル化して、タスクが複数の場所で変更されたときに呼び出すのに便利です。変更担当者と変更時刻を受信イベントパラメーターに追加し、それらをタスクに対応する xtk 配列ヘッダーに挿入します。

タスクポップアップ

「タスク」パラメーター ($query.task) を使用して他のページからジャンプすると、タスクのモーダルボックスがポップアップ表示されます。

サイズ変更時

フォームがすべてのコンポーネントを収容できるほど大きくない場合は、次のコンポーネント/ビューを「詳細」に受け取ります。 $v.项目.显示収容できる部品の数を示します。

プロジェクト

アイテムリスト、検索
固定する、固定を解除する
アーカイブタスクの表示、アーカイブタスクのアクティブ化
墓石
スティッキーリスト
ゴミ箱
プロジェクトを作成する
Drawer
Drawer handle.drawer-handler をクリックすると $Vs が切り替わり、左メニューの状態が .drawer-wrap のクラス名drawer-wrap-collapseに切り替わります。
コンポーネントリスト
特定の番号のみを表示:component.slice(0, $v.item.display)
その他のコンポーネント
Component.slice($v.item.display,component.length)
リストでさらにコンポーネントを選択するときにコンポーネント名を表示します: $Vsitem.component >= $v.item.display? Component[$Vsitem.Component].Name ： "もっと"
ビューとさらなるビュー

タスクの種類

新しいタスクタイプの作成とタスクタイプの変更
属性の構成
属性は、データベースに保存されるタスクに関するフィールドです。
事前定義された属性: 現在のステータス、責任者、開始時刻、期限
カスタム属性
「属性タイプ」を追加すると、属性の表示方法が決まり、一度選択すると変更できません。
「親タスクタイプ」がある場合は、「継承」属性を追加します。また、親タスクタイプの定義済み属性やカスタム属性など、継承可能な属性を選択するための専用の「ソース属性名」ドロップダウンボックスが表示されます。トップレベルの先祖の使命まで再帰的/追跡可能であること。
カスタム属性の定義
カスタム属性を選択し、そのプロパティを構成します。
「プロパティ名」は、表示されデータベースに保存されるフィールドの名前です。ドロップダウンボックスにオプションのリストがあります。「新しいページに表示」スイッチをオンにすると、「新しいタスク」に表示されます。 " ポップアップウィンドウを開くと、"必須" オプションが表示されます。 "必須" "塗りつぶし" スイッチを使用すると、属性名の前に赤いアスタリスクが追加され、保存前に塗りつぶされているかどうかが確認されます。
カスタム属性の並べ替えと削除
状態の構成状態
リストは、タスクの可能なすべての状態を決定します。
状態には、名前、色、タイプ、およびコメントがあります。
ステータスには「未開始」、「進行中」、「完了」の 3 種類があり、タスクグループの進行状況バーの 3 色が決まります。
初期状態は新しく作成されたタスクのデフォルト状態であるため、使用できる初期状態は 1 つだけです。
ステートフロー
ステートフローは、特定のステートがどのステートに変化するかを示します。ステートフローがチェックまたはクリアされていない場合、ステートは任意のステートに変更できます。
状態の追加、編集、削除、保存

コンポーネント

コンポーネントの追加、編集、削除、並べ替え
各タスクタイプではさまざまな形式のコンポーネントを追加できます
が、レポートコンポーネントはタスクタイプとは関係がなく、プロジェクトに必要なレポートコンポーネントは 1 つだけです
コンポーネントのビュー
各コンポーネントにはさまざまなビューがあり、グループ化、フィルタリング、並べ替えの方法を定義できます。
編集、追加、削除
PC側の表示
PC側でタスク一覧を表示する際にどの属性を表示するかを定義表示する
属性の追加、削除、並べ替え
カンバンカンバン
の主な機能は、グループをドラッグアンドドロップしたり並べ替えたりできることです。
タスクを別のグループにドラッグするときは、グループのフィールドを新しいグループ名に変更する必要があります。
このグループをドラッグして並べ替えると、グループ名が保存されますビュー内の「グループ名」にリストを追加 arr 配列
で、右下の「ドラッグ＆ソート」スイッチをオンにすると、その隣にマウントされているコンポーネント内の式がトリガーされ、SmoothDnDライブラリがロードされて設定されます。
テーブルとリストは
似ていますが、テーブルが table で表示され、フィールド名がテーブルヘッダーに表示され、リストが div で表示され、フィールド名とその値が一緒に表示される点が異なります。
カレンダー
カレンダーは、マウントコンポーネントの式でロードおよび設定されるFullCalendarプラグインを使用します。
ガントチャートについて
は次のセクションで説明します。
レポートhighchartsプラグインをロードし、とを初期化する
マウントコンポーネントがあります。各チャートはそれぞれのマウントコンポーネント上で直接レンダリングされ、その動的オプションがその中で定義され、動的データがマウントイベントに追加されます。各数量をクリックすると、そのタスクのリストがポップアップ表示されます。$v.任务.状态$v.任务.任务类型
$el$obj.option

ガントチャート

マウント時に移動関数を初期化します$v.甘特
。呼び出しごとに時間軸に 1 週間が追加され、負の値が渡されると、時間軸が左に拡張され、軸の頭から 7 が移動し、正の値は左に移動します。右、軸の終わり + 7、先頭、またはキューの最後に新しい週 (年、月、日の情報を含む) をプッシュします。
日付の計算は月よりも少し複雑です。曜日を基点として使用します。前の日付はキューの先頭にプッシュされ (シフト解除され)、後の日付はキューの最後にプッシュされます。キュー（プッシュ）。延長プロセス中に、日付が 0 より小さいか、今月の最大日数を超える可能性があることに注意してください。これは、日付が 1 か月にわたることを意味します。
月: 年も含まれ、年-月軸のレンダリングに使用されます
日: 日付軸のレンダリングに使用されます
初日: タスクバーの左側のスタイルと今日の行 (gantt-today-line) を計算するために使用されます
時間軸の拡張
実装時は、今日を中心に前後10週間に拡張され、同時に年月軸の両側にクロスビューアが配置され、スクロールすると表示されます。の場合は、自動的に 4 週間延長されます。$v.Gantt.inited は、初期化前のスクロールのトリガーを回避するために使用されます。
ホバー
マウスが左側の固定列 (onMouseOver) のタスクに移動すると、対応するタスクバーが表示範囲にロールインされます (scrollIntoViewIfNeeded)。
マウスをタスクバーに移動すると、タスクの概要情報が表示され、ハンドルを前後にドラッグします。
タスクバーの本体をドラッグし
、ハンドルを前後にドラッグすると、タスクの開始時刻と (または) 期限を変更でき、同時にドラッグレイヤー (ガントドラッグマスク) の視覚効果を動的に表示できます。
マウスが押されると、マウス移動イベントの監視が開始され、マウスが放されると、移動距離/オフセットに応じて開始時間および/または期限が変更されます。
タスクバー本体をドラッグするときに移動がない場合は、クリックアクションとみなされ、ポップアップウィンドウにタスクの詳細が表示されます。

タスク

新しいタスクを作成する
A. カンバン、テーブル、リストタイプのコンポーネントの右上隅に、プリセットなしで新しいタスクを作成するための「新規」ボタンがあります。B . 各グループには、新しいタスクを追加する
ためのプラスボタンがあります。同じグループ:$f.创建任务マウントイベントでは、$v.modal.分组グループ化に使用されるフィールドに割り当てられます。フィールドが状態の場合、考えられる状態オプションはさらにフィルターで除外されます。親タスクタイプがある場合も同様です。C
タスクポップアップウィンドウ (許可されている場合) サブタスクタイプがある場合は、そのサブタスクタブの 1 つで新しいサブタスクを作成この時点で親タスクが事前に設定されます。
このタスクグループの進行状況の
割合タスクの各グループの上には進行状況バーがあり、このグループ内の完了済み、進行中、および未開始のタスクの数と割合をそれぞれ示します。
タスクポップアップの上部は、
プロジェクト名、タスクタイプ、親タスク arr 配列、現在のタスクタイトル、およびそれぞれのアイコンと色で構成されます。
各親タスクをクリックすると、その詳細が表示されます。
チャットに共有する
タスクバーに固定されているのは
$v.任务栏、現在のプロジェクトの固定タスクリストです。これは、展開したり縮小したり、削除したり、クリックして詳細をポップアップ表示したりできます。
タスクのアーカイブ
タスクを削除すると、
タスクアクティビティとそれに関連付けられたリソースも削除されます。
関連するすべてのリソースを検索し、返された arr を複製して 1 つずつ削除します:
$r.arr.clone().forEach('$resource.delete($x._id)')
タイトル
クリックして編集モードに切り替えてフォーカスするか、フォーカスを失うか、Enter キーを押して変更を保存し、プレゼンテーションモードに戻ります。
現在の状態
表示名、アイコン、および色
クリックすると、現在の状態の下に転送可能な状態オプションがポップアップ表示されます
担当者、開始時間、締め切り
基本情報には、
このタスクの現在のタスクタイプのカスタム属性とその値が表示されます。
これらはそれぞれの属性タイプに従って通常 3 列に表示されますが、リッチテキストと複数行テキストは 1 行を占めます。
サブタスクのタブバーとそのリストを
クリックすると、タスクの表示、関連付けの解除、削除、担当者や期日の変更が行えます。
関連タスク
関連および間接的なサブタスク
添付ファイル
タスクポップアップウィンドウの最上位層はマウントコンポーネントであり、関連付けられたリソースを検索します。最初は添付ファイルのリストは表示されませんが、添付ファイルの数も表示されます。
追加、名前変更、削除
添付ファイルのアイコンは、アップロード前のローカルファイルプレビューのサムネイル、リソースのアップロード後のサムネイル、またはファイルの種類に応じて事前に設定されたファイルアイコンです。
コメント
アクティビティは
ユーザーがクリックしたときにのみ表示されるため、読み込みを遅らせて、関連付けられた xtk に個別に保存することができ、コメントなどのタスクにアクティビティを保存する必要はありません。

日付ピッカー

日付セレクターはよく使われる関数ですが少し複雑で、オープンソースのjsライブラリを選択すれば直接使用することもできましたが、最初は式の能力を確認するために直接記述していました。

日付セレクターをポップアップする前に初期化します$v.pop。 :
keep: ポップアップボックス自体がクリックされないようにするには、$c.exp.onLogin に追加されたグローバルクリックイベントを参照します。 date :
現在の日付/時刻が設定されている場合、設定されます。、今日の時刻になります
: 時刻を設定する必要がありますか、上記の日付に分/秒が含まれている場合、デフォルトで true になります
F5: 目的は、日付セレクターでマウントイベントを再度トリガーして再初期化することです$v.日期
cb: 選択/clear the date は呼び出されるコールバック関数です。「期限は開始時刻より前であってはなりません」という検証後に、対応する日付を保存/クリアします。
日付ピッカーの最上位は構築用のマウントコンポーネントです$v.日期。
F5 関数: $v.date の年と月に従ってその月の日付配列 $v.date.arr を構築し、マウントまたは年と月を変更して電話をかけます。
日付の数は月の日数より多く、6 週間、つまり 6 * 7 の 2 次元配列が使用されるため、先頭の日付の一部は前月の日付であり、後ろの日付の一部は前月の日付です。戻ってくるのは翌月からです。今月の週の最初の日を開始点として、前月より小さい方、月 - 1、日付 + 前月の日数、前の月の日数より大きい方を計算します。今月は次の月、月 + 1、日付 - 今月の日数です。
なお、13の月は翌年の1月、0の月は昨年の12月となります。
日付を返す
時刻を設定する必要がある場合は、「OK」ボタンをクリックして年、月、日、時で構成される日付を返し、日付をクリックして $v.date の月と日を更新する必要があります。
時間を設定する必要がない場合は、日付をクリックすると、選択した年、月、日から構成される日付がすぐに返されます。
クリア
時刻を設定する必要がある場合、「クリア」ボタンは時刻設定フォームを閉じるだけです。時刻を
設定する必要がない場合は、すぐに空に戻り、発信者がこの日付をクリアできます。
時間の素早い入力
入力ボックスに時と分を直接入力するだけでなく、入力ボックスの上下の矢印をクリックして加算または減算したり、キーボードの上下の矢印キーを直接押して素早く追加したりすることもできます。または引き算します。効率を上げるため、分は 5 単位で加算および減算されます。
加算および減算中に時と分が範囲外になった場合の特別な処理に注意してください。
年/月の加算と減算
上部には年の加算と減算を行う二重矢印アイコンと、月の加算と減算を行う単一矢印アイコンがあります。確認の際、月が昨年または来年に繰り越される場合があることに注意してください。
スパンの大きな年月を素早く選択できます。
遠い年を選択する必要がある場合は、上の矢印を使用して段階的に加算および減算するのは少し時間がかかります。たとえば、老人の誕生日を選択する場合などです。をクリックし、中央上部の年と月をクリックして月を直接選択し、次に中央上部の年をクリックすると、20 年単位で年をすばやく見つけることができます。

承認

承認フォームの設計、条件によるプロセスの設定、詳細統計と承認者のリアルタイム計算、承認プロセスの表示、承認/却下/転送/承認取消し、コメントと記録の確認、インスタントメッセージによる承認者への通知、送信チャットするために。

フォームデザイン

グループ管理
テンプレート管理
承認フォームのデザイン
フォームデザイナは、ドラッグアンドドロップのビジュアルエディタであり、オプションのコントロール、フォーム本体、フォームとコントロールのプロパティ設定の 3 つの部分で構成されるシンプルなゼロコードアプリケーション開発ツールです。
属性には、属性タイプ、属性名、プロンプトテキスト、必須かどうかなどが含まれます。
ラジオボタン、チェックボックス、ドロップダウンリストにはオプションのリストがあります。
ディテールは、他のコントロールを含めることができる特別なコントロールコンテナです。詳細の数値型コントロールには、「詳細統計に参加するかどうか」と「条件付きプロセス要素項目になるかどうか」という 2 つの属性を持たせることもできます。

主な難易度:

ドラッグアンドドロップではSortable.jsを使用します。
リスト間のドラッグの主要なポイントは同じグループ名 (グループ名) を持ち、オプションのコントロールリストのグループプルオプション (グループプル) はクローンを使用します。つまり、リストから取り出されるときにコピーがクローンされます。代わりにフォーム本体がドラッグされず、グループは新しいコントロールを追加できません (put: false)。グループ: { 名前: "グループ"、プル: "クローン"、プット: false }。
ネストされたリストの推奨構成: { fallbackOnBody: true、swapThreshold: 0.65 }。
onSort 関数は、フォーム本体内のコントロール間での並べ替えと、オプションのコントロールからコントロールを取り込む場合に分ける必要があります。取り込む場合、パラメーターに pullMode があり、それが clone (前のプルオプションのクローンに対応) 。
コントロールをある位置から新しい位置にドラッグする場合は、まず元の位置 (oldIndex) からコントロールを削除し、次に新しい位置 (newIndex) に挿入します。 $fx
property.splice($lenewIndex, 0, $fx property.splice) ($leoldIndex, 1)[0])
クリックしてフォームコントロールを選択するときのコントロールプロパティパスを構成します: $v.Approval form.Property = "Property." + $index;、詳細のコントロールプロパティパスは次のようになります: $v.Approval form.Property = "Property. " + $parent.$index + ".property." + $index、これらは詳細コントロールにネストされています。外側のイベントをトリガーしないように、$event.stopPropagation() を使用してイベントの伝播を防ぎ、onChange を追加します。コントロールのプロパティを編集するとき
、空のイベントであっても、入力またはチェックが選択されると、フォーム本体の対応するコントロールがリアルタイムで更新/(レンダリング)され、編集エクスペリエンスが向上します。
コントロールには多くの種類があり、種類ごとに形状やプロパティが異なるため、種類に応じてどの種類のコントロールを表示するかをレンダリング条件で制御する必要があります。実際のニーズに応じて、制御リストをさらに充実させることができます。
再レンダリング
フォーム本体はマウントされたコンポーネントでラップされており、新しいコントロールが追加されるか、$v.F5属性新しい値で順序付けされると、フォームが再レンダリングされます。
ディテール内の属性のリストにも同じことが当てはまりますが、$v.F5明细ディテールの属性のみを再レンダリングする別の変数が使用されます。

承認プロセスを定義する

承認の種類、承認プロセス、プロセスごとの承認者が異なります

自由プロセス
申請者は、承認のステップ数と各段階の承認者を自由に選択でき、柔軟性が高く、複雑性が低く不確実な承認プロセスに適していますが、承認の標準化にはつながりません。プロセス。
固定プロセス
申請条件に関係なく承認プロセスが固定されており、複雑性は低いが固定プロセスの承認に適しています。
最も一般的に使用される承認プロセスは、条件ごとに条件を設定するプロセスです
。申請条件が異なると、異なる承認プロセスと承認者が必要になります。たとえば、償還金額が5,000未満の場合、必要な承認者は1次上司だけです。償還金額が 5,000 ～ 10,000 の場合はレベル 2 の上司の承認が必要であり、10,000 を超える場合は上司の承認が必要です。
承認通知者
承認では一部のメンバーが承認プロセスに参加する必要はありませんが、TA に承認について通知する必要があります。

主な難易度:

部門列は会社の組織構造であり、1 人以上の承認者を部門ごとに階層的に追加できます。「部門長」は不定の変数であり、承認が開始されると特定の人物に置き換えられます。
条件設定処理では、採用人数や報酬額が多いほど承認に参加する必要があるレベルの高い人が必要となるなど、一定の条件での承認フローを式で定義できます。条件の連続性に注意し、隙間を残さないようにしてください。

承認を開始する

申請フォームに記入してください
詳細な統計のリアルタイム計算
リアルタイムで承認者を計算
部門長を取得
承認
検証フォームの送信が必要です。
承認番号の生成

主な難易度:

詳細統計は合計と集計に分かれており、
合計は集計対象項目の合計、合計は集計対象項目ごとの合計の合計となります。
累積の場合:reduce("$acc + $x", 0)
条件処理では、編集済みの条件式($x.condition)に従って、承認プロセス一覧から条件を満たすプロセスを検索します。重要な点の 1 つは、実行条件式がアプリケーションフォーム ($f. application) の内容を実行環境として渡すことです。もう 1 つの重要な点は、プロセスの承認者リストを検索し、保留中の承認者のクローンを作成する必要があることです。次に承認プロセスを変更すると承認対象者が変更されるため（部門長の交代や承認者への異動など）、元のプロセスの承認者に影響を与えたくないためです。。
$f.Application.Pending Approvers = 承認プロセス.find('exc($x.Conditions, $f.Application)').Approvers.clone()
onReadyページには「部門責任者の検索」関数が定義されており、申請フォームの読み込み時に実行されるほか、条件処理で数値が入力されたときにも実行されます。
難しいのは、「$exp.Department Supervisor」を再帰的に呼び出すことであり、部門は上から下に再帰的に検索され、申請者の部門に到達した時点で stopIf() で停止されます。各再帰では、現在の部門が式実行環境に渡されます。
承認番号は申請日+4桁のシリアル番号です。シリアル番号は毎日 1 から始まる固有の番号で、アプリケーションごとにデータベースから ($inc) 1 ずつ増加させて取得されます。
承認のために送信するときは、保留中の承認者リストから最初の承認者を現在の承認者として削除し、インスタントメッセージを TA に送信します。

承認表示

現在のステータス
申請者
承認内容
各種データの表示
明細と合計、合計
承認プロセス
人々に知らせる
コメント
記録をチェックする

主な難易度:

分類された償還では、より包括的な方法で承認の詳細を表示できます。その外側の層は、4 つのボディで構成されるテーブル要素のデータコンポーネントですが、詳細の表示に使用される 2 番目のデータコンポーネントを制御します。最初のボディは空で、3 番目のボディは空です1 つは属性リストを表示するために使用され、4 つ目は合計を表示するために下部に配置されます。
詳細を表示するために使用される 2 番目のデータコンポーネントが HTML 要素で構成されていないこと、つまり、HTML 要素自体としてレンダリングされず、その最初の子要素のレンダリングを制御することを考慮する価値があります。詳細のリストをループで表示します (p. 合計を表示するために 2 つのサブ要素が使用されます)。各詳細には複数の属性があり、データコンポーネントが再度使用されます。詳細には、データコンポーネント (複数の添付ファイルのアップロードなど)。
これは、複雑なデータを極限まで表示するためにデータコンポーネントをネストする例です。
承認プロセスのデータコンポーネントは、承認フロー、現在の承認者、承認対象者をマージして得られる 2 番目の li を制御します。1 番目の li は申請者に固定されており、データコンポーネントによって制御されません。
ここでいう「承認フロー」とは承認行為に参加した人のことであり、取消者（申請者本人）や譲受人も含まれます。各アクションは、関連情報を承認フローにプッシュします。 $push: { "x.承認フロー": { who: $c.me._id, time: date(), action, Opinion} }
コメントの入力は入力には使用されませんが、クリックすると（onFocus の場合は $v.modal.comment = true にします）テキストエリア付きのコメントフォームがポップアップし、他の場所をクリックするとコメントフォームを撤回できます。より高いレベルの場所 (modal -detail-main) $v.modal.comments は空のままにしておきます。
承認モーダルウィンドウにはマウントコンポーネントがあり、申請者以外が承認モーダルウィンドウを開くたびに、[承認レビュー]にレビュー記録が追加されます。
承認情報の量を減らすために、承認コメントと承認参照の両方が、approval._id をキーとして、関連付けられた xtk テーブルに保存されます。さまざまな承認リストのシナリオでコメントと承認レビューが読み取られない承認モーダルウィンドウが開かれると、上記のマウントコンポーネントでデフォルトでコメントが読み取られますが、承認レビューはまだ読み込まれません。

承認プロセス

承認に同意する
承認を拒否する
承認のために転送
承認の取り消し
コメントの承認
承認の表示

承認通知

申請しました
承認しました
知らせてください
インスタントメッセージ通知
チャットに送信する

主な難易度:

最新のデータの取得/再レンダリング
さまざまな人々の間で保留中の移動が発生し、情報が急速に変化します。「私」の承認待ちの申請をインスタントメッセージで「私」に通知したいだけでなく、承認ページにいるときに「私」に関連する[承認待ち]の申請を受信したいと考えています。
保留中の承認の数: ルートノードにマウントコンポーネントがあり、キー式として使用されます$v.F5。$v.F5 が変更されるたびに (送信、取り消し、同意、拒否、承認のための転送)、保留中の承認は " 「I」は再度プルされます。数量
承認リスト: 承認リストのテーブルは、キー式$v.tab + $v.F6の。左側のナビゲーションバー (申請済み、承認済み、通知済み) または右上隅のタブバー (承認待ち、承認済み) を切り替えると、最新の承認リストが再度取得されます。