資訊專欄INFORMATION COLUMN
摘要：頁面布局頁面整體布局分上中下上下部門導(dǎo)航欄，每個頁面所共有頁面的主體，隨內(nèi)容可滾動欄，頁面可選，有的有，有的無可分離組件日期組件審批流組件列表組件可分離的工具庫申請單類型事假病假年假對應(yīng)數(shù)據(jù)類型應(yīng)該為，需要一個轉(zhuǎn)換為對應(yīng)的方法申請單狀
頁面布局
App頁面整體布局分上中下 || 上下部門；
NavigationBar -> 導(dǎo)航欄，每個頁面所共有；
MainContext -> 頁面的主體，隨內(nèi)容可滾動；
TabBar -> Tab欄，頁面可選，有的有，有的無；
可分離組件日期組件；
審批流組件：
列表組件；
可分離的工具庫
申請單類型： ‘事假’、‘病假’、‘年假’；
對應(yīng)數(shù)據(jù)類型應(yīng)該為Number，需要一個轉(zhuǎn)換為對應(yīng)icon的方法；
申請單狀態(tài)： ‘審批中’、‘已拒絕’、‘執(zhí)行中’、‘已結(jié)束’；
對應(yīng)數(shù)據(jù)類型應(yīng)該為Number，需要一個轉(zhuǎn)換為對應(yīng)icon的方法；
審批狀態(tài)：‘未到達’、‘待處理’、‘已拒絕’、‘已同意’；
對應(yīng)數(shù)據(jù)類型應(yīng)該為Number，需要一個轉(zhuǎn)換為提示文字的方法；
日期時間字段
可能需要時間格式化工具庫；
項目文件結(jié)構(gòu)以下是項目資源src/下的預(yù)期文件結(jié)構(gòu)，可以先不看，后續(xù)一步步填充，甚至可能修改：
Views
Layout
只需加載一次的視圖主結(jié)構(gòu)；
業(yè)務(wù)文件夾
index.vue
others
Components
公用的才提取出來；
styles
全局樣式文件
公用樣式文件
router
路由配置文件
store
狀態(tài)管理文件
assets
圖片、字體等資源文件
utils
公用的工具；
constants
常量配置文件
mixins
通用繼承組件
接下來聊點具體的業(yè)務(wù)：
角色當前項目中，有兩類人：
申請人
申請人對應(yīng)著“我的申請”、“詳情頁”、“新建申請”三個視圖；
“我的申請”分為“審批中”、“已完成”；
“審批中”的列表數(shù)據(jù)；
“已完成”的列表數(shù)據(jù)；
“詳情頁”有兩種情況：
“審批中”的申請單，無操作性；
“執(zhí)行中”的申請單，可以“結(jié)束”申請單；
“新建申請”：
收集申請單必要字段；
有“提交”操作；
審批人
審批人對應(yīng)著“我的審批”、“詳情頁”兩個視圖；
“我的審批”分為“待處理”、“已完成”；
“待處理”的列表數(shù)據(jù)；
“已完成”的列表數(shù)據(jù)；
“詳情頁”有兩種情況：
“待處理”的申請單，可以“同意”、“拒絕”申請單；
“已完成”的申請單，無操作性；
表單數(shù)據(jù) “新建申請”表單數(shù)據(jù)； “詳情頁”（審批）意見； 章節(jié)回顧該如何劃分視圖Views，為什么這樣劃分
該如何提取組件，為什么這樣提取
該如何分離工具，為什么這樣分離
思考接下來如何實現(xiàn)Views呢？
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/96495.html
摘要：目前，我們還沒有創(chuàng)建項目，進入預(yù)期項目目錄的上一級文件目錄下即可。使用腳手架初始化項目最后一個為項目名稱，可以自定義其它名稱。 本章以下命令都是在cmd命令行中進行的。 安裝命令行 npm i -g vue-cli 安裝完成后，輸入vue -V返回版本號，即安裝成功； 初始化項目 切換到項目目錄下 項目目錄，即項目所在目錄。 目前，我們還沒有創(chuàng)建項目，進入 預(yù)期項目目錄 的上一級文件目...
摘要：若需要傳參，傳第二個參數(shù)不接受多個參數(shù)的傳入，最多只接收兩個參數(shù)請求數(shù)據(jù)目前，通過以上步驟，我們獨立的構(gòu)建了模擬數(shù)據(jù)和狀態(tài)管理，但還沒有將它們結(jié)合起來。驗證如果你想驗證寫出來的模擬數(shù)據(jù)是否正確，可以在示例頁打開控制臺，直接運行。 關(guān)于模擬數(shù)據(jù)，這里使用Mock.js這個庫，關(guān)于用法，官網(wǎng)說的也比較詳細，這里我就簡單的帶一下。 列表數(shù)據(jù) 我們先將項目中src/components/Hel...
摘要：上周末看這篇文章時，偶有靈光，所以，分享出來給大家一起看看前端面試四月二十家前端面試題分享請各位讀者添加一下作者的微信公眾號，以后有新的文章，將在微信公眾號直接推送給各位，非常感謝。 前端切圖神器 avocode 有了這個神器，切圖再也腰不酸，腿不疼了。 這一次，徹底弄懂 JavaScript 執(zhí)行機制 本文的目的就是要保證你徹底弄懂javascript的執(zhí)行機制，如果讀完本文還不懂，...
摘要：至于，為什么跟蹤文件因為這個功能是開發(fā)環(huán)境下獨有的，要修改開發(fā)環(huán)境吖，必然找開發(fā)環(huán)境的配置文件進行跟蹤。測試可行性重啟項目后，在瀏覽器中輸入是你本地，可通過查看能夠訪問，就說明局域網(wǎng)內(nèi)的其他端可以訪問。然而，這樣并沒有結(jié)束。 本章內(nèi)容包含上一章思考的解決，還有一些其它的定制... CSS預(yù)處理 關(guān)于對.vue文件模塊處理規(guī)則的配置依次可在build/webpack.base.conf....
摘要：是中的條件指令，根據(jù)返回的布爾值動態(tài)添加或移除元素。傳值方式我是標題需要在中定義函數(shù)傳的值為字符串，不需要前綴傳的值為非字符串數(shù)字布爾值函數(shù)數(shù)組對象，為前綴，值為表達式計算結(jié)果在程序中，如引用的值。為該組件內(nèi)，元素綁定的事件處理函數(shù)。 視圖 包含內(nèi)容#NavigationBar、#TabBar、#MainContext； 為什么#NavigationBar、#TabBar分在Layou...
閱讀 1650·2023-04-26 02:11
閱讀 2992·2023-04-25 16:18
閱讀 3721·2021-09-06 15:00
閱讀 2637·2019-08-30 15:55
閱讀 1942·2019-08-30 13:20
閱讀 2060·2019-08-26 18:36
閱讀 3134·2019-08-26 11:40
閱讀 2553·2019-08-26 10:11
