摘要：項(xiàng)目地址源碼地址預(yù)覽地址沒有做響應(yīng)式，請?jiān)陔娔X上打開使用了我自制的日歷組件初學(xué)時(shí)做的，有些糙任務(wù)描述參考設(shè)計(jì)圖實(shí)現(xiàn)一個(gè)簡易版的問卷管理系統(tǒng)，有如下功能問卷管理列表有一個(gè)頭部可以顯示，不需要實(shí)現(xiàn)登錄等操作問卷管理列表頁面默認(rèn)為首頁有一個(gè)表格

項(xiàng)目地址

源碼地址

預(yù)覽地址（沒有做響應(yīng)式，請?jiān)陔娔X上打開）

使用了我自制的日歷組件（初學(xué)vue時(shí)做的，有些糙）calendar-input

任務(wù)描述

參考設(shè)計(jì)圖

實(shí)現(xiàn)一個(gè)簡易版的問卷管理系統(tǒng)，有如下功能：

問卷管理列表

有一個(gè)頭部可以顯示logo，不需要實(shí)現(xiàn)登錄等操作

問卷管理列表頁面默認(rèn)為首頁

有一個(gè)表格用于展示所有已創(chuàng)建的問卷

列表中包括列有：問卷名稱，問卷狀態(tài)（未發(fā)布，發(fā)布中，已結(jié)束），和操作區(qū)域（編輯、刪除、查看數(shù)據(jù)）

問卷狀態(tài)為未發(fā)布時(shí)，可以做的操作為編輯、刪除、查看問卷

問卷狀態(tài)為發(fā)布中和已結(jié)束時(shí)，可以做的操作為查看數(shù)據(jù)、查看問卷

表格最左側(cè)有批量選擇（多選）的checkbox，多選后，可以進(jìn)行批量刪除功能，checkbox樣式用默認(rèn)即可，不需要按照設(shè)計(jì)圖的樣式

當(dāng)一個(gè)問卷都沒有的時(shí)候，表格不展現(xiàn)，頁面顯示大大的新建問卷按鈕

問卷新建及編輯

點(diǎn)擊問卷管理列表中的新建按鈕后，進(jìn)入到問卷新建頁面

點(diǎn)擊問卷列表中某個(gè)問卷行的編輯按鈕后，進(jìn)入到問卷的編輯頁面

新建頁面和編輯頁面基本相同

問卷有一個(gè)標(biāo)題字段，點(diǎn)擊后可以進(jìn)入編輯狀態(tài)

可以針對問卷中的問題進(jìn)行增刪改操作，每個(gè)問卷最少一個(gè)問題，最多十個(gè)問題

問題類型包括：單選題、多選題、單行文本題

可以對所有問題進(jìn)行位置改變（上移、下移），復(fù)用，刪除的操作

最上面的問題沒有上移操作，最下面的問題沒有下移操作

點(diǎn)擊復(fù)用時(shí)，在被復(fù)用的問題緊接著的下方新增一個(gè)和被復(fù)用完全一樣的問題（包括選項(xiàng)）

對于單選題和多選題，可以對問題的選項(xiàng)進(jìn)行增、刪、改、排序操作

文本題可以設(shè)定是必填還是非必填的問題

有一個(gè)問卷調(diào)查填寫截止時(shí)間，使用一個(gè)日歷組件來進(jìn)行時(shí)間的選擇，日期選擇不能早于當(dāng)前日期

保存問卷可以進(jìn)行問卷的保存

發(fā)布問卷可以使得問卷狀態(tài)變?yōu)榘l(fā)布中的狀態(tài)

當(dāng)點(diǎn)擊發(fā)布時(shí)，如果截止日期早于當(dāng)前日期，則需要提示修改截止日期

刪除問卷

在問卷管理列表中點(diǎn)擊某個(gè)問卷的刪除按鈕后，彈出一個(gè)浮出層，讓用戶二次確認(rèn)是否刪除該問卷，如果用戶點(diǎn)擊是，則刪除掉該問卷

查看問卷

在問卷管理列表中點(diǎn)擊查看問卷的按鈕后，在新窗口中打開該問卷的頁面，該頁面是可供用戶進(jìn)行問卷填寫的頁面，在問卷未發(fā)布狀態(tài)和已結(jié)束狀態(tài)時(shí)，問卷提交是無效的。

該頁面在移動端需要進(jìn)行良好的兼容支持

查看數(shù)據(jù)

在問卷管理列表中點(diǎn)擊查看數(shù)據(jù)按鈕后，進(jìn)入到一個(gè)數(shù)據(jù)報(bào)告頁面，用圖表形式呈現(xiàn)各個(gè)單選題和多選題的選擇情況

如設(shè)計(jì)稿中呈現(xiàn)，每一個(gè)問題在右側(cè)用某種圖表來呈現(xiàn)答題情況，自行選擇合適的圖表，設(shè)計(jì)稿中僅為示意，圖表樣式不需要和設(shè)計(jì)稿一致。推薦單選題使用餅狀圖，多選題使用條形圖

文本題用一個(gè)百分比圖展現(xiàn)有效回答占比即可

返回按鈕點(diǎn)擊后返回列表頁面

在項(xiàng)目中嘗試模塊化的方法及工具

在項(xiàng)目中嘗試CSS預(yù)處理工具

在項(xiàng)目中嘗試項(xiàng)目構(gòu)建、打包工具

問題總結(jié) 全選功能的實(shí)現(xiàn)

首先每個(gè)列表項(xiàng)都使用了v-model進(jìn)行雙向數(shù)據(jù)綁定傳遞是否被選中狀態(tài)