提交

1

src/school/approval-manage/components/approval-item.module.less

@@ -50,6 +50,9 @@
         font-size: 16px;
         margin-right: 4px;
       }
+      .msgIcon {
+        font-size: 24px;
+      }
     }
   }
   .itemWrapBottom {
@@ -84,7 +87,7 @@
             font-weight: 500;
             color: #ffffff;
             line-height: 19px;
-            // padding: 1px 8px;
+            padding: 1px 8px;
             border-radius: 4px;
             margin-top: 3px;
             text-align: center;

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

@@ -4,6 +4,7 @@ import clockIcon from '@/school/attendance/images/clock-icon.png'
 import passIcon from '../images/pass-icon.png'
 import unpassIcon from '../images/unpass-icon.png'
 import defaultIcon from '@/school/images/default-icon.jpg'
+import msgIcon from '@/school/images/msg-icon.png'
 import { Icon, ActionSheet } from 'vant'
 import dayjs from 'dayjs'
 import { useRouter } from 'vue-router'
@@ -39,6 +40,11 @@ export default defineComponent({
                 <p class={styles.unpassLabel}>拒绝</p>
               </div>
             ) : null}
+            {props.type == 'doing' && props.item.status == 'DOING' ? (
+              <div class={styles.itemWrapTopRight}>
+                <Icon class={styles.msgIcon} name={msgIcon}></Icon>
+              </div>
+            ) : null}
           </div>
           <div class={styles.itemWrapBottom}>
             <div class={styles.courseInfo}>
@@ -56,8 +62,7 @@ export default defineComponent({
               <div class={styles.courseInfoRight}>
                 {props.item.leaveCategoryId == 1 ? <p class={styles.approvalType}>请假</p> : null}
                 {props.item.leaveCategoryId == 2 ? <p class={styles.approvalType}>退团</p> : null}
-
-                <Icon class={styles.icons} name="arrow"></Icon>
+                {props.type != 'doing' ? <Icon class={styles.icons} name="arrow"></Icon> : null}
               </div>
             </div>
           </div>

src/school/approval-manage/components/student-course-item.tsx

@@ -0,0 +1,43 @@
+import { defineComponent, reactive, ref } from 'vue'
+import styles from './studnet-course-item.module.less'
+import clockIcon from '@/school/attendance/images/clock-icon.png'
+import passIcon from '../images/pass-icon.png'
+import unpassIcon from '../images/unpass-icon.png'
+import defaultIcon from '@/school/images/default-icon.jpg'
+import msgIcon from '@/school/images/msg-icon.png'
+import { Icon, ActionSheet } from 'vant'
+import dayjs from 'dayjs'
+import { useRouter } from 'vue-router'
+export default defineComponent({
+  props: ['item', 'type'],
+  name: 'student-course-item',
+  setup(props) {
+    const router = useRouter()
+    const gotoStudentDetail = () => {
+      // router.push({ path: '/student-att-day', query: { time: props.item.time } })
+    }
+    return () => (
+      <>
+        <div class={styles.itemWrap}>
+          <div class={styles.itemWrapTop}>
+            <div class={styles.itemWrapTopLeft}>
+              <div class={styles.clockWrap}>
+                <img src={clockIcon} alt="" />
+              </div>
+              <p class={styles.leftTimer}>
+                {dayjs(props.item.startTime).format('YYYY-MM-DD hh:mm')} -
+                {dayjs(props.item.endTime).format('hh:mm')}
+              </p>
+            </div>
+          </div>
+          <div class={styles.itemWrapBottom}>
+            <p class={styles.itemWrapBottomMain}>
+              {props.item.className}-{props.item.teacherName}
+            </p>
+            <p class={styles.itemWrapBottomSub}>{props.item.orchestraName}</p>
+          </div>
+        </div>
+      </>
+    )
+  }
+})

src/school/approval-manage/components/student-leave.module.less

@@ -0,0 +1,80 @@
+.leaveWrap {
+  margin-top: 12px;
+  .subTitle {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    .subTitleIcon {
+      font-size: 20px;
+      margin-right: 6px;
+    }
+    span {
+      font-size: 16px;
+      font-weight: 500;
+      color: #333333;
+      line-height: 22px;
+    }
+  }
+  .leaveInfo {
+    margin: 12px 13px 20px;
+    background-color: #fff;
+    border-radius: 10px;
+    padding: 15px 12px 20px;
+    .leaveDate {
+      margin-top: 10px;
+      font-size: 15px;
+      font-family: PingFangSC-Regular, PingFang SC;
+      font-weight: 400;
+      color: #333333;
+      line-height: 21px;
+      margin-bottom: 25px;
+    }
+    .leaveReason {
+      margin-top: 10px;
+      font-size: 15px;
+      font-family: PingFangSC-Regular, PingFang SC;
+      font-weight: 400;
+      color: #333333;
+      line-height: 21px;
+    }
+  }
+  .courseWrap {
+    margin: 20px 13px;
+    // padding: 0px 0px 20px;
+    .courseWrapTitlte {
+      padding: 0 12px;
+    }
+    .courseList {
+      padding-top: 10px;
+    }
+  }
+  .reasonWrap {
+    margin: 0 13px;
+    border-radius: 10px;
+    overflow: hidden;
+    background-color: #fff;
+    .bottomIcon {
+      font-size: 20px;
+      margin-right: 6px;
+    }
+    .van-field {
+      padding: 0 12px;
+      min-height: 200px;
+    }
+    .reasonLabelLeft {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      font-size: 16px;
+      font-weight: 500;
+      color: #333333;
+      line-height: 22px;
+    }
+  }
+  .btnWrap {
+    margin-top: 30px;
+    .unpassBtn {
+      border-radius: 22px;
+    }
+  }
+}

src/school/approval-manage/components/student-leave.tsx

@@ -1,20 +1,110 @@
 import OHeader from '@/components/o-header'
 import OSticky from '@/components/o-sticky'
-import { Tabs, Tab } from 'vant'
-import { defineComponent, reactive, ref } from 'vue'
-import styles from './index.module.less'
-import { useRouter } from 'vue-router'
-
+import { Tabs, Tab, showToast, Icon, Field, Button } from 'vant'
+import { defineComponent, onMounted, reactive, ref } from 'vue'
+import styles from './student-leave.module.less'
+import { useRouter, useRoute } from 'vue-router'
+import request from '@/helpers/request'
+import ApprovalItem from './approval-item'
+import cardICon from '../images/card-icon.png'
+import dateICon from '../images/date-icon.png'
+import eiditICon from '../images/eidit-icon.png'
+import questICon from '../images/quest-icon.png'
+import StudentCourseItem from './student-course-item'
 const activeName = ref('wait')
+const item = ref({} as any)
+const courseScheduleList = ref([] as any)
 export default defineComponent({
   name: 'approval-manage',
   setup() {
     const router = useRouter()
+    const route = useRoute()
     const state = reactive({})
 
+    const getLeaveDetail = async () => {
+      try {
+        const { data } = await request.get(
+          `/api-school/userLeaveRecord/detail/${route.query.id}`,
+          {}
+        )
+        item.value = data
+        courseScheduleList.value = data.courseScheduleList || []
+      } catch (e: any) {
+        // console.log(e, 'e')
+        const message = e.message
+        showToast(message)
+      }
+    }
+    onMounted(() => {
+      getLeaveDetail()
+    })
     return () => (
       <>
-        <div></div>
+        <div class={styles.leaveWrap}>
+          <OSticky>
+            <OHeader isBack={true}></OHeader>
+          </OSticky>
+          <ApprovalItem item={item.value} type="doing"></ApprovalItem>
+          <div class={styles.leaveInfo}>
+            <p class={styles.subTitle}>
+              <Icon class={styles.subTitleIcon} name={dateICon}></Icon>
+              <span>请假日期</span>
+            </p>
+            <p class={styles.leaveDate}>2022-10-25 - 2022-10-28</p>
+            <p class={styles.subTitle}>
+              <Icon class={styles.subTitleIcon} name={questICon}></Icon>
+              <span>请假原因</span>
+            </p>
+            <p class={styles.leaveReason}>请假</p>
+          </div>
+
+          <div class={styles.courseWrap}>
+            <div class={styles.courseWrapTitlte}>
+              {' '}
+              <p class={styles.subTitle}>
+                <Icon class={styles.subTitleIcon} name={cardICon}></Icon>
+                <span>涉及课程</span>
+              </p>
+            </div>
+
+            <div class={styles.courseList}>
+              {courseScheduleList.value.map((item) => (
+                <StudentCourseItem item={item}></StudentCourseItem>
+              ))}
+              {/* {item.value?.courseScheduleList} */}
+            </div>
+          </div>
+
+          <div class={styles.reasonWrap}>
+            <Field
+              label-align="top"
+              maxlength={400}
+              autosize
+              type="textarea"
+              rows={5}
+              placeholder="请输入你的审批意见"
+            >
+              {{
+                label: () => (
+                  <div>
+                    <div class={styles.reasonLabelLeft}>
+                      {' '}
+                      <Icon class={styles.bottomIcon} name={eiditICon}></Icon> <span>意见审批</span>
+                    </div>
+                  </div>
+                )
+              }}
+            </Field>
+          </div>
+          <div class={['btnGroup btnMore', styles.btnWrap]}>
+            <Button color="#ccc" class={styles.unpassBtn}>
+              拒绝
+            </Button>
+            <Button color="#FF8057" class={styles.unpassBtn}>
+              通过
+            </Button>
+          </div>
+        </div>
       </>
     )
   }

src/school/approval-manage/components/studnet-course-item.module.less

@@ -0,0 +1,74 @@
+.itemWrap {
+  padding: 12px 15px 15px;
+  border-radius: 10px;
+  background-color: #fff;
+  // margin: 0 13px 12px;
+  .itemWrapTop {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    padding-bottom: 12px;
+    border-bottom: 1px solid #f2f2f2;
+    .itemWrapTopLeft {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      .clockWrap {
+        width: 18px;
+        height: 18px;
+        margin-right: 6px;
+        img {
+          width: 100%;
+          height: 100%;
+        }
+      }
+      .leftTimer {
+        font-size: 14px;
+        font-weight: 500;
+        color: #333333;
+        line-height: 20px;
+      }
+    }
+    .itemWrapTopRight {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      .passLabel {
+        font-size: 14px;
+        font-weight: 500;
+        color: #4ab78e;
+        line-height: 20px;
+      }
+      .unpassLabel {
+        font-size: 14px;
+        font-weight: 500;
+        color: #f44541;
+        line-height: 20px;
+      }
+      .passIcon {
+        font-size: 16px;
+        margin-right: 4px;
+      }
+      .msgIcon {
+        font-size: 24px;
+      }
+    }
+  }
+  .itemWrapBottom {
+    padding-top: 15px;
+    .itemWrapBottomMain {
+      margin-bottom: 4px;
+      font-size: 16px;
+      font-weight: 600;
+      color: #333333;
+      line-height: 22px;
+    }
+    .itemWrapBottomSub {
+      font-size: 14px;
+      font-weight: 400;
+      color: #777777;
+      line-height: 20px;
+    }
+  }
+}

src/school/exercise-record/index.tsx

@@ -112,6 +112,7 @@ export default defineComponent({
       forms.practiceMonth = val.selectedValues[0] + val.selectedValues[1]
       forms.practiceMonthName = val.selectedValues[0] + '年' + val.selectedValues[1] + '月'
       state.showPopoverTime = false
+      refreshing.value = true
       getList()
     }
     const checkOrchestra = (val: any) => {
@@ -186,7 +187,6 @@ export default defineComponent({
             onSearch={(val: any) => {
               forms.keyword = val
               refreshing.value = true
-
               getList()
             }}
           ></OSearch>

src/school/exercise-record/modals/student-item.module.less

@@ -59,7 +59,7 @@
     }
   }
   .itemBottom {
-    padding: 0 10px 10px;
+    padding: 10px;
     display: flex;
     flex-direction: row;
     align-items: center;