crm移动端优化

src/views/flow/crmTodoListMobile.vue

@@ -49,52 +49,74 @@
               {{ item.instTitle || "--" }}
             </div>
 
-            <div class="task-card__grid">
-              <div class="task-card__field">
-                <span class="task-card__label">业务类型</span>
-                <span class="task-card__value">{{ item.entityTypeId || "--" }}</span>
-              </div>
-              <div class="task-card__field">
-                <span class="task-card__label">优先级别</span>
-                <span class="task-card__value">{{
-                  getPriorityText(item.priority)
-                }}</span>
-              </div>
-              <div class="task-card__field">
-                <span class="task-card__label">任务提交人</span>
-                <span class="task-card__value">{{ item.userName || "--" }}</span>
-              </div>
-              <div class="task-card__field">
-                <span class="task-card__label">任务状态</span>
-                <span class="task-card__value">{{
-                  getStatusText(item.status)
-                }}</span>
-              </div>
-              <div class="task-card__field task-card__field--full">
-                <span class="task-card__label">任务提交时间</span>
-                <span class="task-card__value">{{
-                  timestampToDateTime(item.submitAt)
-                }}</span>
-              </div>
-              <div class="task-card__field task-card__field--full">
-                <span class="task-card__label">任务创建时间</span>
-                <span class="task-card__value">{{
-                  timestampToDateTime(item.createdAt)
-                }}</span>
-              </div>
-              <div class="task-card__field task-card__field--full">
-                <span class="task-card__label">任务完成时间</span>
-                <span class="task-card__value">{{
-                  timestampToDateTime(item.endAt)
-                }}</span>
-              </div>
+            <!-- <div class="task-card__summary">
+              {{ item.entityTypeId || "--" }} /
+              {{ getPriorityText(item.priority) }}
+            </div> -->
+
+            <div
+              class="task-card__toggle"
+              @click="toggleCard(item.id || item.instId)"
+            >
+              <div class="pr-4" @click.stop="goBackPage(item)">处理</div>
+              <span>{{
+                isExpanded(item.id || item.instId) ? "收起详情" : "展开详情"
+              }}</span>
+              <Icon
+                icon="mynaui:chevron-down"
+                class="task-card__toggle-icon"
+                :class="{ 'is-open': isExpanded(item.id || item.instId) }"
+              />
             </div>
 
-            <div class="task-card__footer">
-              <span class="task-card__action" @click="goBackPage(item)"
-                >处理</span
-              >
-            </div>
+            <transition name="collapse">
+              <div v-show="isExpanded(item.id || item.instId)">
+                <div class="task-card__grid">
+                  <div class="task-card__field">
+                    <span class="task-card__label">业务类型</span>
+                    <span class="task-card__value">{{
+                      item.entityTypeId || "--"
+                    }}</span>
+                  </div>
+                  <div class="task-card__field">
+                    <span class="task-card__label">优先级别</span>
+                    <span class="task-card__value">{{
+                      getPriorityText(item.priority)
+                    }}</span>
+                  </div>
+                  <div class="task-card__field">
+                    <span class="task-card__label">任务提交人</span>
+                    <span class="task-card__value">{{
+                      item.userName || "--"
+                    }}</span>
+                  </div>
+                  <div class="task-card__field">
+                    <span class="task-card__label">任务状态</span>
+                    <span class="task-card__value">{{
+                      getStatusText(item.status)
+                    }}</span>
+                  </div>
+                  <div class="task-card__field task-card__field--full">
+                    <span class="task-card__label">任务提交时间</span>
+                    <span class="task-card__value">{{
+                      timestampToDateTime(item.submitAt)
+                    }}</span>
+                  </div>
+                  <div class="task-card__field task-card__field--full">
+                    <span class="task-card__label">任务创建时间</span>
+                    <span class="task-card__value">{{
+                      timestampToDateTime(item.createdAt)
+                    }}</span>
+                  </div>
+                  <div class="task-card__field task-card__field--full">
+                    <span class="task-card__label">任务完成时间</span>
+                    <span class="task-card__value">{{
+                      timestampToDateTime(item.endAt)
+                    }}</span>
+                  </div>
+                </div>
+              </div>
+            </transition>
           </div>
 
           <InfiniteLoading
@@ -136,6 +158,7 @@ const userStore = useUserStore();
 const oaTasks = ref([]);
 const loading = ref(false);
 const infiniteId = ref(Date.now());
+const expandedIds = ref([]);
 
 const pagination = ref({
   pageNum: 1,
@@ -143,6 +166,18 @@ const pagination = ref({
   total: 0,
 });
 
+const isExpanded = (taskId) => expandedIds.value.includes(taskId);
+
+const toggleCard = (taskId) => {
+  if (!taskId) return;
+
+  if (isExpanded(taskId)) {
+    expandedIds.value = expandedIds.value.filter((id) => id !== taskId);
+  } else {
+    expandedIds.value = [...expandedIds.value, taskId];
+  }
+};
+
 const getPriorityText = (priority) => {
   if (priority === 90) return "紧急";
   if (priority === 50) return "一般";
@@ -188,6 +223,7 @@ const resetList = () => {
   pagination.value.pageNum = 1;
   pagination.value.total = 0;
   infiniteId.value = Date.now();
+  expandedIds.value = [];
 };
 
 const loadMore = async ($state) => {
@@ -445,8 +481,8 @@ onMounted(() => {
 }
 
 .task-card {
-  background: transparent !important;
-  border: 1px solid var(--portal-line);
+  background: var(--bg-card-2) !important;
+  border: 1px solid var(--item-card-border);
   border-radius: 18px;
   padding: 16px;
   margin-bottom: 14px;
@@ -488,10 +524,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));
@@ -521,21 +584,6 @@ onMounted(() => {
   word-break: break-all;
 }
 
-.task-card__footer {
-  display: flex;
-  justify-content: flex-end;
-  margin-top: 16px;
-  padding-top: 12px;
-  border-top: 1px solid var(--portal-line);
-}
-
-.task-card__action {
-  color: #1e90ff;
-  cursor: pointer;
-  font-size: 14px;
-  font-weight: 500;
-}
-
 .infinite-status {
   color: var(--portal-text-soft);
   text-align: center;
@@ -543,6 +591,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;
 }