vuetify3入门实战：开发一个待办事项系统

---

这是使用vuetify3可以开发的一个待办事项管理实例。
它主要包含事项概览、我的项目、我的团队。其中事项概览中以列表的方式列出所有的事项，在这里可以添加事项、对事项进行排序。

vuetify3 todo demo

vuetify官网的组件部分有大量控件，我想绝大部分应用使用这些控件拼凑就足够酷了。
一个快捷的方式是：到此官网找控件，把代码拷贝出来，修改一下直接使用。

请注意：
事项数据是存储在google的firebase中的，如果访问不便，可以使用代码中也提供的本地数据。

新建项目

可以使用之前的文章：用最快捷的方法创建vuetify3项目 的方法新建项目。

事项概览

事项概览是使用栅格（Grid）实现的，当然也可以用数据表格（Data tables）实现。使用栅格（Grid）对格式的控制可以更灵活一些。
可以在 veutify官网 选择一款栅格（Grid），可以在网页上直接查看实际效果，也可以直接把代码拷贝出来使用。

修改 pages 文件夹中的 index.vue，代码如下：

<template>
  <h1 class="text-grey">事项概览</h1>

  <v-container fluid class="my-5">
    <v-layout row justify-start class="mb-3">
      <v-btn small flat color="grey" @click="sortBy('title')">
        <v-icon left small>mdi-folder</v-icon>
        <span class="text-lowercase">按事项名称</span>
        <v-tooltip activator="parent" location="top"
          ><span>按事项名称重新排序</span></v-tooltip
        >
      </v-btn>
      <v-btn small flat color="grey" @click="sortBy('person')" class="ml-3">
        <v-icon small left>mdi-account</v-icon>
        <span class="text-lowercase">按人员</span>
        <v-tooltip activator="parent" location="top"
          ><span>按事项负责人重新排序</span></v-tooltip
        >
      </v-btn>
    </v-layout>

    <v-card flat v-for="project in projects" :key="project.title">
      <v-layout :class="`pa-3 project ${project.status}`">
        <v-row wrap>
          <v-col cols="6">
            <div class="text-caption text-grey">事项名称</div>
            <div>{
   {
    project.title }}</div>
          </v-col>
          <v-col cols="2">
            <div class="text-caption text-grey">负责人</div>
            <div>{
   {
    project.person }}</div>
          </v-col>
          <v-col cols="2">
            <div class="text-caption text-grey">期限</div>
            <div>{
   {
    project.due }}</div>
          </v-col>
          <v-col cols="2">
            <div class="text-caption text-grey">状态</div>
            <v-chip :class="`${project.status} text-white my-2`">{
   {
   
              project.status
            }}</v-chip>
          </v-col>
        </v-row>
      </v-layout>
      <v-divider />
    </v-card>
  </v-container>
</template>

<script setup>
import {
    ref } from "vue";

// 这是静态数据，请根据实际情况修改
/*
const projects = ref([
  {
    title: "设计网站的新主题",
    person: "火云",
    due: "2024-3-1",
    status: "overdue",
    content:
      "为小微企业客户XXX设计一个新的网站主题，包括首页，产品页，关于页等多个页面。",
  },
  {
    title: "实现首页的产品展示",
    person: "八戒",
    due: "2024-3-10",
    status: "complete",
    content:
      "编码实现首页的产品展示功能。",
  },
  {
    title: "实现二级页面的产品展示",
    person: "悟空",
    due: "2024-3-20",
    status: "ongoing",
    content:
      "编码实现网站的二级页面的产品展示功能。",
  },
  {
    title: "产品测试",
    person: "悟净",
    due: "2024-4-2",
    status: "overdue",
    content:
      "测试产品的新功能，确保产品的稳定性。",
  },
]);
*/

import {
    getAllProjects } from "@/fb";

const projects = ref([]);

const getAll = () => {
   
  getAllProjects().then((querySnapshot) => {
   
    querySnapshot.forEach((doc) => {
   
      // doc.data() is never undefined for query doc snapshots
      console.log(doc.id, " => ", doc.data());
      projects.value.push(doc.data()