smart-admin/smart-admin-web/javascript-ant-design-vue3/src/views/system/home/components/to-be-done-card.vue

<!--
  * 已办/代办
  * 
  * @Author:    1024创新实验室-主任：卓大 
  * @Date:      2022-09-12 22:34:00 
  * @Wechat:    zhuda1024 
  * @Email:     lab1024@163.com 
  * @Copyright  1024创新实验室 （ https://1024lab.net ），Since 2012 
  *
-->
<template>
  <default-home-card icon="StarTwoTone" title="已办待办">
    <div style="height: 280px;">
      <div class="center column">
        <a-space direction="vertical" style="width: 100%">
          <div v-for="(item, index) in toDoList" :key="index" :class="['to-do', { done: item.doneFlag }]">
            <a-checkbox v-model:checked="item.doneFlag">
              <span class="task">{{ item.title }}</span>
            </a-checkbox>
            <div class="star-icon" @click="itemStar(item)">
              <StarFilled v-if="item.starFlag" style="color: #ff8c00" />
              <StarOutlined v-else style="color: #c0c0c0" />
            </div>
          </div>
          <div v-for="(item, index) in doneList" :key="index" :class="['to-do', { done: item.doneFlag }]">
            <a-checkbox v-model:checked="item.doneFlag">
              <span class="task">{{ item.title }}</span>
            </a-checkbox>
            <div class="star-icon" @click="itemStar(item)">
              <StarFilled v-if="item.starFlag" style="color: #ff8c00" />
              <StarOutlined v-else style="color: #c0c0c0" />
            </div>
          </div>
        </a-space>
      </div>
    </div>
  </default-home-card>
</template>
<script setup>
  import DefaultHomeCard from '/@/views/system/home/components/default-home-card.vue';
  import { computed, ref } from 'vue';
  import dayjs from 'dayjs';
  import { message } from 'ant-design-vue';

  let taskList = ref([
    {
      title: '周五下班前需要提交周报',
      doneFlag: true,
      starFlag: true,
      starTime: 0,
    },
    {
      title: '为SmartAdmin前端小组分配任务',
      doneFlag: false,
      starFlag: false,
      starTime: 0,
    },
    {
      title: '跟进团建内容事宜',
      doneFlag: false,
      starFlag: true,
      starTime: 0,
    },
    {
      title: '跟进客户定制一个软件平台',
      doneFlag: false,
      starFlag: false,
      starTime: 0,
    },
    {
      title: '下个版本的需求确认',
      doneFlag: false,
      starFlag: false,
      starTime: 0,
    },
    {
      title: '线上版本发布',
      doneFlag: true,
      starFlag: true,
      starTime: dayjs().unix(),
    },
    {
      title: '周一财务报销',
      doneFlag: true,
      starFlag: false,
      starTime: 0,
    },
  ]);

  let toDoList = computed(() => {
    return taskList.value.filter((e) => !e.doneFlag).sort((a, b) => b.starTime - a.starTime);
  });

  let doneList = computed(() => {
    return taskList.value.filter((e) => e.doneFlag);
  });

  function itemStar(item) {
    item.starFlag = !item.starFlag;
    if (item.starFlag) {
      item.starTime = dayjs().unix();
    }
  }

  //-------------------------任务新建-----------------------
  let taskTitle = ref('');
  function addTask() {
    if (!taskTitle.value) {
      message.warn('请输入任务标题');
      return;
    }
    let data = {
      title: taskTitle.value,
      doneFlag: false,
      starFlag: false,
      starTime: 0,
    };
    taskList.value.unshift(data);
    taskTitle.value = '';
  }
</script>
<style lang="less" scoped>
  .center {
    display: flex;
    justify-content: center;
    height: 100%;

    &.column {
      flex-direction: column;
      width: 100%;
      padding: 0 10px;
      justify-content: flex-start;
    }
  }

  .to-do {
    width: 100%;
    border: 1px solid #d3d3d3;
    border-radius: 4px;
    padding: 4px;
    display: flex;
    align-items: center;

    .star-icon {
      margin-left: auto;
      cursor: pointer;
    }

    &.done {
      text-decoration: line-through;
      color: #8c8c8c;

      .task {
        color: #8c8c8c;
      }
    }
  }
</style>