待办事项样式修改

src/school/approval-manage/agency/index.tsx

@@ -1,5 +1,5 @@
 import { Cell, Grid, GridItem } from 'vant'
-import { defineComponent, onMounted, reactive, ref } from 'vue'
+import { defineComponent, onMounted, reactive, ref, Transition, TransitionGroup } from 'vue'
 import styles from '../index.module.less'
 import iconSubsidy from '../images/icon-subsidy.png'
 import iconNews from '../images/icon-news.png'
@@ -50,7 +50,7 @@ export default defineComponent({
         startDate: '',
         /**训练照片数 */
         photoNum: 0
-      },
+      } as any,
       /**乐团资讯 */
       schoolWeekNews: {
         //
@@ -62,29 +62,37 @@ export default defineComponent({
         startDate: '',
         /**预计的乐团资讯数 */
         expectNewsNum: 0
-      }
+      } as any
     })
     const refreshing = ref(false)
     const getData = async () => {
       loading.value = true
+      /** 下拉刷新,重置数据 */
+      if (refreshing.value) {
+        data.salaryRecordList = []
+        data.schoolWeekPhoto = {}
+        data.schoolWeekNews = {}
+      }
       try {
-        const res: any = await request.post(`${state.platformApi}/schoolWeekSalaryRecord/manage`)
-        if (Array.isArray(res?.data?.salaryRecordList)){
+        const res: any = await request.post(`${state.platformApi}/schoolWeekSalaryRecord/manage`, {
+          hideLoading: refreshing.value
+        })
+        if (Array.isArray(res?.data?.salaryRecordList)) {
           data.salaryRecordList = res.data.salaryRecordList.map((n: any) => {
             return {
               ...n,
               startDate: n?.startDate?.split(' ')[0] || '',
-              endDate: n?.endDate?.split(' ')[0] || '',
+              endDate: n?.endDate?.split(' ')[0] || ''
             }
           })
         }
         data.schoolWeekPhoto = res?.data?.schoolWeekPhoto || {}
         data.schoolWeekNews = res?.data?.schoolWeekNews || {}
-        if (data.schoolWeekPhoto){
+        if (data.schoolWeekPhoto) {
           data.schoolWeekPhoto.startDate = data.schoolWeekPhoto?.startDate?.split(' ')[0] || ''
           data.schoolWeekPhoto.endDate = data.schoolWeekPhoto?.endDate?.split(' ')[0] || ''
         }
-        if (data.schoolWeekNews){
+        if (data.schoolWeekNews) {
           data.schoolWeekNews.startDate = data.schoolWeekNews?.startDate?.split(' ')[0] || ''
           data.schoolWeekNews.endDate = data.schoolWeekNews?.endDate?.split(' ')[0] || ''
         }
@@ -97,127 +105,133 @@ export default defineComponent({
     })
     return () => (
       <OFullRefresh
-        v-model:modelValue={refreshing.value}
-        onRefresh={getData}
-        style="min-height: calc(100vh - var(--van-nav-bar-height) - var(--header-height))"
+        modelValue={refreshing.value}
+        onRefresh={() => {
+          refreshing.value = true
+          getData()
+        }}
       >
         <div
-          class={[
-            styles.wrap,
-            !loading.value &&
-              !data.salaryRecordList.length &&
-              !data.schoolWeekPhoto.expectPhotoNum &&
-              !data.schoolWeekNews.expectNewsNum &&
-              'emptyRootContainer'
-          ]}
-          style="min-height: inherit"
+          class={styles.wrap}
+          style="min-height: calc(100vh - var(--van-nav-bar-height) - var(--header-height))"
         >
-          {!data.salaryRecordList.length ? null : (
-            <>
-              {data.salaryRecordList.map((item: ISalaryRecord) => {
-                return (
-                  <div class={styles.item} style={{ marginTop: 0 }}>
-                    <Cell
-                      center
-                      label={`${item.startDate} 至 ${item.endDate}`}
-                      isLink
-                      to={'/approval-manage-subsidy?salaryId=' + (item.id || '')}
-                    >
-                      {{
-                        title: () => (
-                          <div class={styles.itemTitle}>
-                            <img class={styles.titleIcon} src={iconSubsidy} />
-                            <span>补助确认</span>
-                          </div>
-                        )
-                      }}
-                    </Cell>
-                    <Grid class={styles.grid} columnNum={3} border={false}>
-                      <GridItem>
-                        <div class={styles.gridItem}>
-                          <div class={styles.gridItemTop}>
-                            <span class={styles.topNum}>{item.manageSalary}</span>元
+          <TransitionGroup name="van-fade">
+            {!!data.salaryRecordList.length && (
+              <div key="salaryRecordList">
+                {data.salaryRecordList.map((item: ISalaryRecord) => {
+                  return (
+                    <div class={styles.item} style={{ marginTop: 0 }}>
+                      <Cell
+                        center
+                        label={`${item.startDate} 至 ${item.endDate}`}
+                        isLink
+                        to={'/approval-manage-subsidy?salaryId=' + (item.id || '')}
+                      >
+                        {{
+                          title: () => (
+                            <div class={styles.itemTitle}>
+                              <img class={styles.titleIcon} src={iconSubsidy} />
+                              <span>补助确认</span>
+                            </div>
+                          )
+                        }}
+                      </Cell>
+                      <Grid class={styles.grid} columnNum={3} border={false}>
+                        <GridItem>
+                          <div class={styles.gridItem}>
+                            <div class={styles.gridItemTop}>
+                              <span class={styles.topNum}>{item.manageSalary}</span>元
+                            </div>
+                            <div>管理补助</div>
                           </div>
-                          <div>管理补助</div>
-                        </div>
-                      </GridItem>
-                      <GridItem>
-                        <div class={styles.gridItem}>
-                          <div class={styles.gridItemTop}>
-                            <span class={styles.topNum}>{item.courseSalary}</span>元
+                        </GridItem>
+                        <GridItem>
+                          <div class={styles.gridItem}>
+                            <div class={styles.gridItemTop}>
+                              <span class={styles.topNum}>{item.courseSalary}</span>元
+                            </div>
+                            <div>训练补助</div>
                           </div>
-                          <div>训练补助</div>
-                        </div>
-                      </GridItem>
-                      <GridItem>
-                        <div class={styles.gridItem}>
-                          <div class={styles.gridItemTop}>
-                            <span class={styles.topNum}>{item.trainingSalary}</span>元
+                        </GridItem>
+                        <GridItem>
+                          <div class={styles.gridItem}>
+                            <div class={styles.gridItemTop}>
+                              <span class={styles.topNum}>{item.trainingSalary}</span>元
+                            </div>
+                            <div>练习奖励</div>
                           </div>
-                          <div>练习奖励</div>
-                        </div>
-                      </GridItem>
-                    </Grid>
-                  </div>
-                )
-              })}
-            </>
-          )}
-
-          {!data.schoolWeekPhoto.expectPhotoNum ? null : (
-            <div class={styles.item} onClick={() => {
-              router.push({
-                path: '/my-orchestra'
-              })
-            }}>
-              <Cell
-                style={{ '--van-cell-value-color': '#333' }}
-                center
-                label={`${data.schoolWeekPhoto.startDate} 至 ${data.schoolWeekPhoto.endDate}`}
-                value={data.schoolWeekPhoto.photoNum + '/' + data.schoolWeekPhoto.expectPhotoNum}
-                isLink
-              >
-                {{
-                  title: () => (
-                    <div class={styles.itemTitle}>
-                      <img class={styles.titleIcon} src={iconNews} />
-                      <span>训练照片</span>
+                        </GridItem>
+                      </Grid>
                     </div>
                   )
+                })}
+              </div>
+            )}
+
+            {!data.schoolWeekPhoto.expectPhotoNum ? null : (
+              <div
+                key="schoolWeekPhoto"
+                class={styles.item}
+                onClick={() => {
+                  router.push({
+                    path: '/my-orchestra'
+                  })
                 }}
-              </Cell>
-            </div>
-          )}
-          {!data.schoolWeekNews.expectNewsNum ? null : (
-            <div class={styles.item} onClick={() => {
-              router.push({
-                path: '/orchestra-information'
-              })
-            }}>
-              <Cell
-                style={{ '--van-cell-value-color': '#333' }}
-                center
-                label={`${data.schoolWeekNews.startDate} 至 ${data.schoolWeekNews.endDate}`}
-                value={data.schoolWeekNews.newsNum + '/' + data.schoolWeekNews.expectNewsNum}
-                isLink
               >
-                {{
-                  title: () => (
-                    <div class={styles.itemTitle}>
-                      <img class={styles.titleIcon} src={iconPhoto} />
-                      <span>乐团资讯</span>
-                    </div>
-                  )
+                <Cell
+                  style={{ '--van-cell-value-color': '#333' }}
+                  center
+                  label={`${data.schoolWeekPhoto.startDate} 至 ${data.schoolWeekPhoto.endDate}`}
+                  value={data.schoolWeekPhoto.photoNum + '/' + data.schoolWeekPhoto.expectPhotoNum}
+                  isLink
+                >
+                  {{
+                    title: () => (
+                      <div class={styles.itemTitle}>
+                        <img class={styles.titleIcon} src={iconNews} />
+                        <span>训练照片</span>
+                      </div>
+                    )
+                  }}
+                </Cell>
+              </div>
+            )}
+            {!data.schoolWeekNews.expectNewsNum ? null : (
+              <div
+                key="schoolWeekNews"
+                class={styles.item}
+                onClick={() => {
+                  router.push({
+                    path: '/orchestra-information'
+                  })
                 }}
-              </Cell>
-            </div>
-          )}
-          {!loading.value &&
-          !data.salaryRecordList.length &&
-          !data.schoolWeekPhoto.expectPhotoNum &&
-          !data.schoolWeekNews.expectNewsNum ? (
-            <OEmpty />
-          ) : null}
+              >
+                <Cell
+                  style={{ '--van-cell-value-color': '#333' }}
+                  center
+                  label={`${data.schoolWeekNews.startDate} 至 ${data.schoolWeekNews.endDate}`}
+                  value={data.schoolWeekNews.newsNum + '/' + data.schoolWeekNews.expectNewsNum}
+                  isLink
+                >
+                  {{
+                    title: () => (
+                      <div class={styles.itemTitle}>
+                        <img class={styles.titleIcon} src={iconPhoto} />
+                        <span>乐团资讯</span>
+                      </div>
+                    )
+                  }}
+                </Cell>
+              </div>
+            )}
+
+            {!loading.value &&
+            !data.salaryRecordList.length &&
+            !data.schoolWeekPhoto.expectPhotoNum &&
+            !data.schoolWeekNews.expectNewsNum ? (
+              <OEmpty key="OEmpty" class="emptyFixedHeightContainer" tips="暂无处理事项" />
+            ) : null}
+          </TransitionGroup>
         </div>
       </OFullRefresh>
     )

src/school/approval-manage/components/end-approval.tsx

@@ -2,7 +2,7 @@ import OEmpty from '@/components/o-empty'
 import OFullRefresh from '@/components/o-full-refresh'
 import dayjs from 'dayjs'
 import { List, PullRefresh, showToast } from 'vant'
-import { defineComponent, reactive, ref, onMounted } from 'vue'
+import { defineComponent, reactive, ref, onMounted, TransitionGroup } from 'vue'
 import { useRouter } from 'vue-router'
 import styles from './wait-approval.module.less'
 import request from '@/helpers/request'
@@ -19,46 +19,35 @@ export default defineComponent({
     const refreshing = ref(false)
     const loading = ref(false)
     const finished = ref(false)
-    const showContact = ref(false)
     const list = ref([])
 
     const getList = async () => {
-      console.log('getList')
-
+      if (loading.value) return
       loading.value = true
       try {
         if (refreshing.value) {
-          forms.page = 1
           list.value = []
-          refreshing.value = false
+          forms.page = 1
+          finished.value = false
         }
 
         const res = await request.post('/api-school/userApproveRecord/page', {
-          data: { ...forms, hasHandle: true }
+          data: { ...forms, hasHandle: true },
+          hideLoading: refreshing.value
         })
 
-        if (list.value.length > 0 && res.data.pages === 1) {
-          return
+        if (Array.isArray(res?.data?.rows)) {
+          list.value = list.value.concat(res.data.rows || [])
+          forms.page = res.data.current + 1
+          finished.value = !res.data.next
+        } else {
+          finished.value = true
         }
-        forms.page = res.data.current + 1
-        list.value = list.value.concat(res.data.rows || [])
-        showContact.value = list.value.length > 0
-        loading.value = false
-        finished.value = res.data.current >= res.data.pages
       } catch (e: any) {
-        // console.log(e, 'e')
-        const message = e.message
-        showToast(message)
-        showContact.value = false
         finished.value = true
       }
-    }
-    const onRefresh = () => {
-      finished.value = false
-      // 重新加载数据
-      // 将 loading 设置为 true，表示处于加载状态
-      loading.value = true
-      getList()
+      loading.value = false
+      refreshing.value = false
     }
     onMounted(() => {
       getList()
@@ -68,36 +57,31 @@ export default defineComponent({
       router.push({ path: '/student-leave', query: { id: row.id, type: 'end' } })
     }
     return () => (
-      <>
-        <div
-          class={[styles.approvalWrap, !showContact.value && 'emptyRootContainer']}
-          style="min-height: calc(100vh - var(--van-tabs-line-height) - var(--header-height) - 1.33333rem);"
+      <OFullRefresh
+        modelValue={refreshing.value}
+        onRefresh={() => {
+          refreshing.value = true
+          getList()
+        }}
+        style="min-height: calc(100vh - var(--van-tabs-line-height) - var(--header-height) - 1.33333rem);"
+      >
+        <List
+          loading={loading.value}
+          loading-text=" "
+          finished={finished.value}
+          finished-text="没有更多了"
+          onLoad={getList}
         >
-          {showContact.value ? (
-            <OFullRefresh
-              v-model:modelValue={refreshing.value}
-              onRefresh={onRefresh}
-              style="min-height: calc(100vh - var(--van-tabs-line-height) - var(--header-height) - 1.33333rem);"
-            >
-              <List
-                loading-text=" "
-                // v-model:loading={loading.value}
-                finished={finished.value}
-                finished-text="没有更多了"
-                onLoad={getList}
-              >
-                {list.value.map((item: any) => (
-                  <div onClick={() => gotoDetail(item)}>
-                    <ApprovalItem item={item} type="end"></ApprovalItem>
-                  </div>
-                ))}
-              </List>
-            </OFullRefresh>
-          ) : (
-            <OEmpty />
-          )}
-        </div>
-      </>
+          <TransitionGroup name="van-fade">
+            {list.value.map((item: any, itemIndex: number) => (
+              <div key={`index-${itemIndex}`} onClick={() => gotoDetail(item)}>
+                <ApprovalItem item={item} type="end"></ApprovalItem>
+              </div>
+            ))}
+          </TransitionGroup>
+        </List>
+        {!loading.value && !list.value.length && <OEmpty tips="暂无审批" />}
+      </OFullRefresh>
     )
   }
 })

src/school/approval-manage/components/wait-approval.tsx

@@ -2,7 +2,7 @@ import OEmpty from '@/components/o-empty'
 import dayjs from 'dayjs'
 import { List, PullRefresh, showToast } from 'vant'
 import OFullRefresh from '@/components/o-full-refresh'
-import { defineComponent, reactive, ref, onMounted } from 'vue'
+import { defineComponent, reactive, ref, onMounted, TransitionGroup } from 'vue'
 import { useRouter } from 'vue-router'
 import styles from './wait-approval.module.less'
 import request from '@/helpers/request'
@@ -19,46 +19,34 @@ export default defineComponent({
     const refreshing = ref(false)
     const loading = ref(false)
     const finished = ref(false)
-    const showContact = ref(false)
     const list = ref([])
 
     const getList = async () => {
-      console.log('getList')
+      if (loading.value) return
       loading.value = true
+      if (refreshing.value) {
+        finished.value = false
+        forms.page = 1
+        list.value = []
+      }
       try {
-        if (refreshing.value) {
-          forms.page = 1
-          list.value = []
-          refreshing.value = false
-        }
-
         const res = await request.post('/api-school/userApproveRecord/page', {
-          data: { ...forms, hasHandle: false }
+          data: { ...forms, hasHandle: false },
+          hideLoading: refreshing.value
         })
 
-        if (list.value.length > 0 && res.data.pages === 1) {
-          return
+        if (Array.isArray(res?.data?.rows)) {
+          forms.page = res.data.current + 1
+          list.value = list.value.concat(res.data.rows || [])
+          finished.value = !res.data.next
+        } else {
+          finished.value = false
         }
-
-        forms.page = res.data.current + 1
-        list.value = list.value.concat(res.data.rows || [])
-        showContact.value = list.value.length > 0
-        loading.value = false
-        finished.value = res.data.current >= res.data.pages
       } catch (e: any) {
-        // console.log(e, 'e')
-        const message = e.message
-        showToast(message)
-        showContact.value = false
         finished.value = true
       }
-    }
-    const onRefresh = () => {
-      finished.value = false
-      // 重新加载数据
-      // 将 loading 设置为 true，表示处于加载状态
-      loading.value = true
-      getList()
+      loading.value = false
+      refreshing.value = false
     }
 
     const gotoDetail = (row: any) => {
@@ -69,43 +57,40 @@ export default defineComponent({
       getList()
     })
     return () => (
-      <>
-        <div class={styles.approvalWrap}>
-          <OFullRefresh
-            v-model:modelValue={refreshing.value}
-            onRefresh={onRefresh}
-            style="min-height: calc(100vh - var(--van-tabs-line-height) - var(--header-height) - 1.33333rem);"
-          >
-            {showContact.value ? (
-              <List
-                // v-model:loading={loading.value}
-                finished={finished.value}
-                finished-text="没有更多了"
-                loading-text=" "
-                onLoad={getList}
-              >
-                {list.value.map((item: any) => (
-                  <div
-                    onClick={() => {
-                      gotoDetail(item)
-                    }}
-                  >
-                    {' '}
-                    <ApprovalItem item={item} type="wait"></ApprovalItem>
-                  </div>
-                ))}
-              </List>
-            ) : (
+      <OFullRefresh
+        modelValue={refreshing.value}
+        onRefresh={() => {
+          refreshing.value = true
+          getList()
+        }}
+        style="min-height: calc(100vh - var(--van-tabs-line-height) - var(--header-height) - 1.33333rem);"
+      >
+        <List
+          loading={loading.value}
+          finished={finished.value}
+          finished-text="没有更多了"
+          loading-text=" "
+          onLoad={getList}
+        >
+          <TransitionGroup name="van-fade">
+            {list.value.map((item: any, itemIndex: number) => (
               <div
-                style="min-height: calc(100vh - var(--van-tabs-line-height) - var(--header-height) - 1.33333rem);"
-                class={[!showContact.value && 'emptyRootContainer']}
+                key={`index-${itemIndex}`}
+                onClick={() => {
+                  gotoDetail(item)
+                }}
               >
-                <OEmpty />
+                <ApprovalItem item={item} type="wait"></ApprovalItem>
               </div>
-            )}
-          </OFullRefresh>
-        </div>
-      </>
+            ))}
+          </TransitionGroup>
+        </List>
+        {!loading.value && !list.value.length && (
+          <div class="emptyFixedHeightContainer">
+            <OEmpty tips="暂无审批" />
+          </div>
+        )}
+      </OFullRefresh>
     )
   }
 })

src/school/approval-manage/index.module.less

@@ -38,6 +38,7 @@
 }
 .wrap{
   padding: 12px 0;
+  box-sizing: border-box;
 }
 .item {
   border-radius: 10px;

src/school/approval-manage/subsidy/index.tsx

@@ -33,7 +33,10 @@ export default defineComponent({
     const getData = async () => {
       try {
         const res: any = await request.post(
-          `${state.platformApi}/schoolWeekSalaryRecord/manageConfirm/${route.query.salaryId}`
+          `${state.platformApi}/schoolWeekSalaryRecord/manageConfirm/${route.query.salaryId}`,
+          {
+            hideLoading: refreshing.value
+          }
         )
         if (res?.data) {
           const {

src/styles/index.less

@@ -263,3 +263,17 @@ body {
 input {
   caret-color: #ff8057;
 }
+.emptyFixedHeightContainer{
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  top: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 0;
+  .van-empty{
+    transform: translateY(-15%);
+  }
+}