第一次提交

src/views/dashboard/workplace/components/task-card.vue

@@ -0,0 +1,157 @@
+<!-- 我的任务 -->
+<template>
+  <a-card
+    :title="title"
+    :bordered="false"
+    :body-style="{ padding: '10px', height: '358px' }"
+    class="workplace-table-card"
+  >
+    <template #extra>
+      <more-icon @remove="onRemove" @edit="onEdit" />
+    </template>
+    <div style="overflow: auto; position: relative">
+      <table class="ele-table" style="table-layout: fixed; min-width: 300px">
+        <colgroup>
+          <col width="38" />
+          <col width="65" />
+          <col />
+          <col width="70" />
+        </colgroup>
+        <thead>
+          <tr>
+            <th style="position: sticky; left: 0"></th>
+            <th style="text-align: center">优先级</th>
+            <th>任务名称</th>
+            <th style="text-align: center">状态</th>
+          </tr>
+        </thead>
+        <vue-draggable
+          tag="tbody"
+          item-key="id"
+          v-model="taskList"
+          handle=".sort-handle"
+          :animation="300"
+          :set-data="() => void 0"
+        >
+          <template #item="{ element }">
+            <tr>
+              <td style="text-align: center; position: sticky; left: 0">
+                <menu-outlined class="sort-handle ele-text-secondary" />
+              </td>
+              <td style="text-align: center">
+                <ele-tag
+                  :color="['red', 'orange', 'blue'][element.priority - 1]"
+                  shape="circle"
+                >
+                  {{ element.priority }}
+                </ele-tag>
+              </td>
+              <td class="ele-elip" :title="element.taskName">
+                <a>{{ element.taskName }}</a>
+              </td>
+              <td style="text-align: center">
+                <span v-if="element.status === 0" class="ele-text-warning">
+                  未开始
+                </span>
+                <span v-else-if="element.status === 1" class="ele-text-success">
+                  进行中
+                </span>
+                <span v-else-if="element.status === 2" class="ele-text-info">
+                  已完成
+                </span>
+              </td>
+            </tr>
+          </template>
+        </vue-draggable>
+      </table>
+    </div>
+  </a-card>
+</template>
+
+<script lang="ts" setup>
+  import { ref } from 'vue';
+  import VueDraggable from 'vuedraggable';
+  import { MenuOutlined } from '@ant-design/icons-vue';
+  import MoreIcon from './more-icon.vue';
+
+  defineProps<{
+    title?: string;
+  }>();
+
+  const emit = defineEmits<{
+    (e: 'remove'): void;
+    (e: 'edit'): void;
+  }>();
+
+  interface Task {
+    id: number;
+    priority: number;
+    taskName: string;
+    status: number;
+  }
+
+  // 我的任务数据
+  const taskList = ref<Task[]>([]);
+
+  /* 查询我的任务 */
+  const queryTaskList = () => {
+    taskList.value = [
+      {
+        id: 1,
+        priority: 1,
+        taskName: '解决项目一的bug',
+        status: 0
+      },
+      {
+        id: 2,
+        priority: 2,
+        taskName: '解决项目二的bug',
+        status: 0
+      },
+      {
+        id: 3,
+        priority: 2,
+        taskName: '解决项目三的bug',
+        status: 1
+      },
+      {
+        id: 4,
+        priority: 3,
+        taskName: '解决项目四的bug',
+        status: 1
+      },
+      {
+        id: 5,
+        priority: 3,
+        taskName: '解决项目五的bug',
+        status: 2
+      },
+      {
+        id: 6,
+        priority: 3,
+        taskName: '解决项目六的bug',
+        status: 2
+      }
+    ];
+  };
+
+  const onRemove = () => {
+    emit('remove');
+  };
+
+  const onEdit = () => {
+    emit('edit');
+  };
+
+  queryTaskList();
+</script>
+
+<style lang="less" scoped>
+  .ele-table tr.sortable-chosen {
+    background: hsla(0, 0%, 60%, 0.1);
+  }
+
+  .workplace-table-card .sort-handle {
+    cursor: move;
+  }
+</style>