oa折叠卡片

src/views/flow/todoListMobile.vue

@@ -9,7 +9,8 @@
             icon="mynaui:arrow-up-down"
             class="icon pr-1 h-8 w-8"
             color="#014099"
-          />OA待办任务列表
+          />
+          OA待办任务列表
         </p>
 
         <el-button
@@ -18,13 +19,15 @@
           size="small"
           color="#02409b"
           @click="router.back()"
-          ><Icon
+        >
+          <Icon
             icon="mynaui:corner-up-left"
             class="icon pr-1"
             width="20"
             height="20"
-          />&#36820;&#22238;</el-button
-        >
+          />
+          返回
+        </el-button>
       </div>
 
       <div v-loading="loading && oaTasks.length === 0" class="table-wrapper">
@@ -49,72 +52,94 @@
               {{ item.requestName || "--" }}
             </div>
 
-            <div class="task-card__grid">
-              <div class="task-card__field">
-                <span class="task-card__label">流程类型</span>
-                <span class="task-card__value">{{
-                  item.workflowBaseInfo?.workflowTypeName || "--"
-                }}</span>
-              </div>
-              <div class="task-card__field">
-                <span class="task-card__label">紧急程度</span>
-                <span class="task-card__value">{{
-                  item.requestLevel || "--"
-                }}</span>
-              </div>
-              <div class="task-card__field">
-                <span class="task-card__label">系统名称</span>
-                <span class="task-card__value">{{ item.sysName || "--" }}</span>
-              </div>
-              <div class="task-card__field">
-                <span class="task-card__label">当前节点</span>
-                <span class="task-card__value">{{
-                  item.currentNodeName || "--"
-                }}</span>
-              </div>
-              <div class="task-card__field">
-                <span class="task-card__label">创建人</span>
-                <span class="task-card__value">{{
-                  item.creatorName || "--"
-                }}</span>
-              </div>
-              <div class="task-card__field">
-                <span class="task-card__label">最后处理人</span>
-                <span class="task-card__value">{{
-                  item.lastOperatorName || "--"
-                }}</span>
-              </div>
-              <div class="task-card__field task-card__field--full">
-                <span class="task-card__label">流程名称</span>
-                <span class="task-card__value">{{
-                  item.workflowBaseInfo?.workflowName || "--"
-                }}</span>
-              </div>
-              <div class="task-card__field task-card__field--full">
-                <span class="task-card__label">创建时间</span>
-                <span class="task-card__value">{{
-                  item.createTime || "--"
-                }}</span>
-              </div>
-              <div class="task-card__field task-card__field--full">
-                <span class="task-card__label">最后操作时间</span>
-                <span class="task-card__value">{{
-                  item.lastOperateTime || "--"
-                }}</span>
-              </div>
-              <div class="task-card__field task-card__field--full">
-                <span class="task-card__label">接收时间</span>
-                <span class="task-card__value">{{
-                  item.receiveTime || "--"
-                }}</span>
-              </div>
+            <div class="task-card__summary">
+              {{ item.workflowBaseInfo?.workflowTypeName || "--" }} /
+              {{ item.currentNodeName || "--" }}
             </div>
 
-            <div class="task-card__footer">
-              <span class="task-card__action" @click="goBackPage(item)"
-                >处理</span
-              >
+            <div class="task-card__toggle" @click="toggleCard(item.requestId)">
+              <span>{{
+                isExpanded(item.requestId) ? "收起详情" : "展开详情"
+              }}</span>
+              <Icon
+                icon="mynaui:chevron-down"
+                class="task-card__toggle-icon"
+                :class="{ 'is-open': isExpanded(item.requestId) }"
+              />
             </div>
+
+            <transition name="collapse">
+              <div v-show="isExpanded(item.requestId)">
+                <div class="task-card__grid">
+                  <div class="task-card__field">
+                    <span class="task-card__label">流程类型</span>
+                    <span class="task-card__value">{{
+                      item.workflowBaseInfo?.workflowTypeName || "--"
+                    }}</span>
+                  </div>
+                  <div class="task-card__field">
+                    <span class="task-card__label">紧急程度</span>
+                    <span class="task-card__value">{{
+                      item.requestLevel || "--"
+                    }}</span>
+                  </div>
+                  <div class="task-card__field">
+                    <span class="task-card__label">系统名称</span>
+                    <span class="task-card__value">{{
+                      item.sysName || "--"
+                    }}</span>
+                  </div>
+                  <div class="task-card__field">
+                    <span class="task-card__label">当前节点</span>
+                    <span class="task-card__value">{{
+                      item.currentNodeName || "--"
+                    }}</span>
+                  </div>
+                  <div class="task-card__field">
+                    <span class="task-card__label">创建人</span>
+                    <span class="task-card__value">{{
+                      item.creatorName || "--"
+                    }}</span>
+                  </div>
+                  <div class="task-card__field">
+                    <span class="task-card__label">最后处理人</span>
+                    <span class="task-card__value">{{
+                      item.lastOperatorName || "--"
+                    }}</span>
+                  </div>
+                  <div class="task-card__field task-card__field--full">
+                    <span class="task-card__label">流程名称</span>
+                    <span class="task-card__value">{{
+                      item.workflowBaseInfo?.workflowName || "--"
+                    }}</span>
+                  </div>
+                  <div class="task-card__field task-card__field--full">
+                    <span class="task-card__label">创建时间</span>
+                    <span class="task-card__value">{{
+                      item.createTime || "--"
+                    }}</span>
+                  </div>
+                  <div class="task-card__field task-card__field--full">
+                    <span class="task-card__label">最后操作时间</span>
+                    <span class="task-card__value">{{
+                      item.lastOperateTime || "--"
+                    }}</span>
+                  </div>
+                  <div class="task-card__field task-card__field--full">
+                    <span class="task-card__label">接收时间</span>
+                    <span class="task-card__value">{{
+                      item.receiveTime || "--"
+                    }}</span>
+                  </div>
+                </div>
+
+                <div class="task-card__footer">
+                  <span class="task-card__action" @click="goBackPage(item)">
+                    处理
+                  </span>
+                </div>
+              </div>
+            </transition>
           </div>
 
           <InfiniteLoading
@@ -126,7 +151,7 @@
               <div class="infinite-status">没有更多数据了</div>
             </template>
             <template #no-results>
-              <div class="infinite-status">没有更多数据了</div>
+              <div class="infinite-status">暂无数据</div>
             </template>
             <template #error>
               <div class="infinite-status">加载失败，请稍后重试</div>
@@ -156,6 +181,7 @@ const userStore = useUserStore();
 const oaTasks = ref([]);
 const loading = ref(false);
 const infiniteId = ref(Date.now());
+const expandedIds = ref([]);
 
 const pagination = ref({
   pageNum: 1,
@@ -163,6 +189,17 @@ const pagination = ref({
   total: 0,
 });
 
+const isExpanded = (requestId) => expandedIds.value.includes(requestId);
+
+const toggleCard = (requestId) => {
+  if (!requestId) return;
+  if (isExpanded(requestId)) {
+    expandedIds.value = expandedIds.value.filter((id) => id !== requestId);
+  } else {
+    expandedIds.value = [...expandedIds.value, requestId];
+  }
+};
+
 const goBackPage = async (row) => {
   const res = await ssoLogin({
     username: userStore.getUser.username,
@@ -188,7 +225,7 @@ const goBackPage = async (row) => {
     } else {
       const loadingInstance = ElLoading.service({
         lock: true,
-        text: "姝ｅ湪璺宠浆锛岃绋嶅€?..",
+        text: "正在跳转，请稍候...",
         background: "rgba(0, 0, 0, 0.7)",
       });
       const newTab = window.open("", "_blank");
@@ -223,6 +260,7 @@ const resetList = () => {
   oaTasks.value = [];
   pagination.value.pageNum = 1;
   pagination.value.total = 0;
+  expandedIds.value = [];
   infiniteId.value = Date.now();
 };
 
@@ -274,26 +312,16 @@ onMounted(() => {
   --portal-text-muted: #5f6f83;
   --portal-text-soft: #7f8fa6;
   --portal-title: #163867;
-  --portal-subtitle: rgba(61, 92, 135, 0.86);
   --portal-line: rgba(126, 156, 201, 0.24);
-  --portal-card: rgba(255, 255, 255, 0.82);
   --portal-card-2: rgba(248, 251, 255, 0.94);
-  --portal-card-3: rgba(240, 246, 255, 0.88);
-  --portal-card-4: rgba(231, 239, 251, 0.92);
-  --portal-nav-bg: rgba(255, 255, 255, 0.72);
-  --portal-nav-hover: rgba(219, 232, 252, 0.8);
-  --portal-input-bg: rgba(255, 255, 255, 0.7);
-  --portal-input-hover: rgba(255, 255, 255, 0.92);
   --portal-shadow: 0 18px 40px rgba(23, 52, 95, 0.12);
-  --portal-shadow-strong: 0 24px 60px rgba(23, 52, 95, 0.16);
   --portal-accent: #245edb;
-  --portal-accent-2: #4e8cff;
   --portal-accent-soft: rgba(36, 94, 219, 0.14);
-  --portal-todo-bg: rgba(242, 247, 255, 0.94);
-  --portal-todo-hover: rgba(228, 238, 252, 0.95);
-  --portal-number-todo: #e15a5a;
-  --portal-number-done: #2da04d;
+  --bg-table: #091126;
   color: var(--portal-text);
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
   background:
     radial-gradient(
       circle at 18% 12%,
@@ -318,27 +346,12 @@ onMounted(() => {
   --portal-text-muted: rgba(234, 241, 255, 0.95);
   --portal-text-soft: #8a9ab0;
   --portal-title: #f4f7ff;
-  --portal-subtitle: rgba(188, 205, 255, 0.82);
   --portal-line: rgba(97, 129, 206, 0.28);
-  --portal-card: rgba(10, 19, 43, 0.8);
   --portal-card-2: rgba(12, 24, 52, 0.92);
-  --portal-card-3: rgba(17, 25, 48, 0.8);
-  --portal-card-4: rgba(15, 24, 45, 0.82);
-  --portal-nav-bg: rgba(10, 19, 43, 0.8);
-  --portal-nav-hover: rgba(28, 40, 72, 0.8);
-  --portal-input-bg: rgba(255, 255, 255, 0.08);
-  --portal-input-hover: rgba(255, 255, 255, 0.12);
   --portal-shadow: 0 16px 34px rgba(0, 0, 0, 0.22);
-  --portal-shadow-strong: 0 24px 60px rgba(0, 0, 0, 0.38);
   --portal-accent: #6e7dff;
-  --portal-accent-2: #8d4dff;
   --portal-accent-soft: rgba(110, 125, 255, 0.16);
-  --portal-todo-bg: #070e20;
-  --portal-todo-hover: rgba(28, 40, 72, 0.8);
-  --portal-number-todo: #f56c6c;
-  --portal-number-done: #ffffff;
   --bg-table: #091126;
-  color: var(--portal-text);
   background:
     radial-gradient(
       circle at 18% 12%,
@@ -358,30 +371,6 @@ onMounted(() => {
   background-color: var(--bg-table);
 }
 
-.todo-list {
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-}
-
-.content {
-  padding: 16px 20px;
-  margin-top: 100px;
-}
-
-.pagination-wrap {
-  display: flex;
-  justify-content: flex-end;
-  margin-top: 16px;
-}
-
-.news-container {
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  background-color: #f5f7fa;
-}
-
 .content-wrapper {
   flex: 1;
   max-width: 1200px;
@@ -390,13 +379,6 @@ onMounted(() => {
   box-sizing: border-box;
 }
 
-.page-title {
-  margin-bottom: 20px;
-  color: #303133;
-  border-left: 5px solid #409eff;
-  padding-left: 10px;
-}
-
 .table-wrapper {
   min-height: 300px;
   background: #fff;
@@ -404,11 +386,6 @@ onMounted(() => {
   border-radius: 4px;
 }
 
-.table-title {
-  font-weight: 500;
-  color: #303133;
-}
-
 .table-summary {
   font-size: 13px;
 }
@@ -462,10 +439,37 @@ onMounted(() => {
   font-weight: 600;
   line-height: 1.5;
   color: var(--portal-title);
-  margin-bottom: 14px;
+  margin-bottom: 8px;
   word-break: break-word;
 }
 
+.task-card__summary {
+  font-size: 13px;
+  color: var(--portal-text-muted);
+  line-height: 1.5;
+  margin-bottom: 8px;
+}
+
+.task-card__toggle {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 6px;
+  font-size: 13px;
+  color: var(--portal-accent);
+  cursor: pointer;
+  user-select: none;
+  margin-bottom: 10px;
+}
+
+.task-card__toggle-icon {
+  transition: transform 0.2s ease;
+}
+
+.task-card__toggle-icon.is-open {
+  transform: rotate(180deg);
+}
+
 .task-card__grid {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
@@ -517,6 +521,18 @@ onMounted(() => {
   font-size: 13px;
 }
 
+.collapse-enter-active,
+.collapse-leave-active {
+  transition: all 0.2s ease;
+  overflow: hidden;
+}
+
+.collapse-enter-from,
+.collapse-leave-to {
+  opacity: 0;
+  transform: translateY(-4px);
+}
+
 :deep(.table-wrapper) {
   background: var(--bg-table) !important;
 }