| | |
| | | <div class="home-container"> |
| | | <div class="left-card"> |
| | | <div class="card"> |
| | | <h2 class="card-title">我的待办</h2> |
| | | <div class="card-header"> |
| | | <h2 class="card-title">我的待办</h2> |
| | | <h2 class="more-btn" @click = "gotoTodoList">更多</h2> |
| | | </div> |
| | | <div class="card-content"> |
| | | <!-- 嵌入FlowTodo组件并设置默认分类 --> |
| | | <!-- 嵌入todoList组件并设置默认分类 --> |
| | | <todo-list |
| | | ref="flowTodo" |
| | | ref="todoList" |
| | | class="embedded-flow-todo" |
| | | :defaultCategories="['drApproval','ggApproval','programConfirmApproval']" |
| | | :defaultCategories="['drApproval','ggApproval','programConfirmApproval','ncFileSettingProcessApproval']" |
| | | ></todo-list> |
| | | </div> |
| | | </div> |
| | |
| | | </template> |
| | | |
| | | <script> |
| | | import signageApi from '@api/signage' |
| | | import moment from 'moment' |
| | | import TodoList from '@views/dashboard/dncIndex/TodoList.vue' |
| | | import TodoList from '@views/dashboard/TodoList.vue' |
| | | |
| | | export default { |
| | | name: 'DncManagerSignage', |
| | |
| | | } |
| | | }, |
| | | mounted() { |
| | | // 确保组件加载后使用默认分类查询数据 |
| | | this.$nextTick(() => { |
| | | if (this.$refs.flowTodo) { |
| | | this.$refs.flowTodo.loadData(1) |
| | | if (this.$refs.todoList) { |
| | | this.$refs.todoList.loadData(1) |
| | | } |
| | | }) |
| | | }, |
| | | methods: { |
| | | |
| | | gotoTodoList() { |
| | | this.$router.push('/flowable/workflow/FlowTodo') |
| | | } |
| | | } |
| | | } |
| | | </script> |
| | |
| | | .home-container { |
| | | display: flex; |
| | | min-height: 100vh; |
| | | padding: 20px; |
| | | padding: 5px; |
| | | box-sizing: border-box; |
| | | gap: 20px; |
| | | background-color: #f5f7fa; |
| | | gap: 16px; |
| | | background-color: #f0f2f7; |
| | | } |
| | | |
| | | .left-card { |
| | |
| | | min-width: 0; |
| | | display: flex; |
| | | flex-direction: column; |
| | | gap: 20px; |
| | | gap: 16px; |
| | | } |
| | | |
| | | .card { |
| | |
| | | display: flex; |
| | | flex-direction: column; |
| | | overflow: hidden; |
| | | justify-content: flex-start; |
| | | } |
| | | |
| | | /* 在原有样式基础上添加 */ |
| | | .card-header { |
| | | display: flex; |
| | | justify-content: space-between; |
| | | /* 垂直居中对齐 */ |
| | | align-items: center; |
| | | /* 可以根据需要设置高度,这里假设设置为 40px,也可根据实际情况调整 */ |
| | | height: 40px; |
| | | } |
| | | |
| | | .more-btn { |
| | | margin: 0; |
| | | color: #00bfff; |
| | | font-size: 14px; |
| | | border: none; |
| | | cursor: pointer; |
| | | } |
| | | .top-card { |
| | | flex: 1; |
| | | } |
| | |
| | | } |
| | | |
| | | .card-title { |
| | | margin: 0 0 15px 0; |
| | | color: #333; |
| | | font-size: 18px; |
| | | margin: 0; |
| | | padding-bottom: 0; |
| | | color: #000000; |
| | | font-size: 16px; |
| | | font-weight: 600; |
| | | padding-bottom: 10px; |
| | | border-bottom: 1px solid #eee; |
| | | } |
| | | |
| | | .card-content { |
| | |
| | | } |
| | | |
| | | .left-card { |
| | | margin-bottom: 20px; |
| | | margin-bottom: 16px; |
| | | } |
| | | } |
| | | </style> |