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

import { Button, Cell, Dialog, Grid, GridItem, Icon, showConfirmDialog, Sticky } from 'vant'
import { defineComponent, onMounted, reactive, ref } from 'vue'
import styles from '../index.module.less'
import iconA from '../images/icon-photo.png'
import request from '@/helpers/request'
import { state } from '@/state'
import { useRoute, useRouter } from 'vue-router'
import OFullRefresh from '@/components/o-full-refresh'
import OHeader from '@/components/o-header'
import OSticky from '@/components/o-sticky'
import iconTeacher from '@/common/images/icon_teacher.png'
import ODialog from '@/components/o-dialog'
import { moneyFormat } from '@/helpers/utils'
import questIcon from '@/school/images/quest-icon.png'

export default defineComponent({
  name: 'approval-manage-subsidy',
  setup() {
    const route = useRoute()
    const router = useRouter()
    const dialog = ref(false)
    const refreshing = ref(false)
    const recordId = ref('')
    const data = reactive({
      startDate: '',
      endDate: '',
      manageSalary: '' as any,
      courseSalary: '' as any,
      trainingSalary: '',
      /**管理补助 */
      manageSalaryInfo: {} as any,
      /**训练补助 */
      courseSalaryInfo: {} as any,
      /**练习奖励 */
      practiceSalaryInfo: {} as any
    })
    const getData = async () => {
      try {
        const res: any = await request.post(
          `${state.platformApi}/schoolWeekSalaryRecord/manageConfirm/${route.query.salaryId}`,
          {
            // hideLoading: refreshing.value
          }
        )
        if (res?.data) {
          const {
            courseSalaryInfo,
            manageSalaryInfo,
            practiceSalaryInfo,
            startDate = '',
            endDate = '',
            manageSalary,
            courseSalary,
            trainingSalary,
            id
          } = res.data
          data.courseSalaryInfo = courseSalaryInfo
          data.manageSalaryInfo = manageSalaryInfo
          data.practiceSalaryInfo = practiceSalaryInfo
          data.startDate = startDate?.split(' ')[0] || ''
          data.endDate = endDate?.split(' ')[0] || ''
          data.manageSalary = manageSalary
          data.courseSalary = courseSalary
          data.trainingSalary = trainingSalary
          recordId.value = id
        }
      } catch (error) {}
      refreshing.value = false
    }
    onMounted(() => {
      getData()
    })
    /**确认补助 */
    const sendConfirm = () => {
      showConfirmDialog({
        message: '是否确认该周补助金额?'
      }).then(() => {
        request
          .post(
            `${state.platformApi}/schoolWeekSalaryRecord/manageConfirmed/${route.query.salaryId}`,
            {
              hideLoading: false
            }
          )
          .then((res: any) => {
            if (res?.code == 200) {
              router.back()
            }
          })
      })
    }
    return () => (
      <div>
        <OSticky
          onGetHeight={(height: number) => {
            document.documentElement.style.setProperty('--header-height', height + 'px')
          }}
        >
          <OHeader
            class={styles.rightTip}
            // rightText="?"
            v-slots={{
              right: () => <Icon name={questIcon} size={22} color="#333" />
            }}
            onClickRight={() => (dialog.value = true)}
            title={route.query.display ? '补助详情' : '补助确认'}
          ></OHeader>
        </OSticky>
        <OFullRefresh
          v-model:modelValue={refreshing.value}
          onRefresh={getData}
          style="min-height: calc(100vh - var(--header-height))"
        >
          <div class={styles.wrap}>
            {!!data.courseSalaryInfo && (
              <div class={styles.item}>
                <Cell center>
                  {{
                    title: () => (
                      <div class={styles.itemTitle}>
                        <span>
                          {data.startDate} 至 {data.endDate}
                        </span>
                        <span class={styles.itemTag}>补助周期</span>
                      </div>
                    )
                  }}
                </Cell>
                <Grid class={styles.grid} columnNum={2} border={false}>
                  <GridItem>
                    <div class={styles.gridItem}>
                      <div class={styles.gridItemTop}>
                        <span class={styles.topNum}>{moneyFormat(data.manageSalary || 0)}</span>元
                      </div>
                      <div>管理补助</div>
                    </div>
                  </GridItem>
                  <GridItem>
                    <div class={styles.gridItem}>
                      <div class={styles.gridItemTop}>
                        <span class={styles.topNum}>{moneyFormat(data.courseSalary || 0)}</span>元
                      </div>
                      <div>训练补助</div>
                    </div>
                  </GridItem>
                  {/* <GridItem>
                    <div class={styles.gridItem}>
                      <div class={styles.gridItemTop}>
                        <span class={styles.topNum}>{data.trainingSalary || 0}</span>元
                      </div>
                      <div>练习奖励</div>
                    </div>
                  </GridItem> */}
                </Grid>
              </div>
            )}

            {!!data.manageSalaryInfo && (
              <div class={styles.item}>
                <Cell
                  style={{
                    '--van-cell-value-color':
                      (data.manageSalaryInfo.photoNum || 0) >=
                      (data.manageSalaryInfo.expectPhotoNum || 0)
                        ? '#333'
                        : '#F44541'
                  }}
                  center
                  value={`训练照片${data.manageSalaryInfo.photoNum || 0}/${
                    data.manageSalaryInfo.expectPhotoNum || 0
                  }`}
                  isLink
                  to={`/subsidy-grant-detail?id=${recordId.value}`}
                >
                  {{
                    title: () => (
                      <div class={styles.itemTitle}>
                        <div class={styles.titleLine}></div>
                        <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, styles.small]} style={{ color: '#333' }}>
                          {moneyFormat(data.manageSalaryInfo.standardSalary || 0)}
                        </span>
                        元/周
                      </div>
                      <div>补助标准</div>
                    </div>
                  </GridItem>
                  <GridItem>
                    <div class={styles.gridItem}>
                      <div class={styles.gridItemTop}>
                        <span class={[styles.topNum, styles.small]} style={{ color: '#333' }}>
                          {data.manageSalaryInfo.coursewareNum || 0}
                        </span>
                        课时
                      </div>
                      <div>本周课时数</div>
                    </div>
                  </GridItem>
                  <GridItem>
                    <div class={styles.gridItem}>
                      <div class={styles.gridItemTop}>
                        <span class={[styles.topNum, styles.small]}>
                          {moneyFormat(data.manageSalaryInfo.actualSalary || 0)}
                        </span>
                        元
                      </div>
                      <div>实际补助</div>
                    </div>
                  </GridItem>
                </Grid>
              </div>
            )}

            {/* {!!data.practiceSalaryInfo && (
              <div class={styles.item}>
                <Cell center isLink to={`/subsidy-reward-detail?id=${recordId.value}`}>
                  {{
                    title: () => (
                      <div class={styles.itemTitle}>
                        <div class={styles.titleLine}></div>
                        <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, styles.small]}>
                          {data.practiceSalaryInfo.standardSalary || 0}
                        </span>
                        元/人
                      </div>
                      <div>补助标准</div>
                    </div>
                  </GridItem>
                  <GridItem>
                    <div class={styles.gridItem}>
                      <div class={styles.gridItemTop}>
                        <span class={[styles.topNum, styles.small]}>{data.practiceSalaryInfo.targetNum || 0}</span>
                        人
                      </div>
                      <div>练习达标人数</div>
                    </div>
                  </GridItem>
                  <GridItem>
                    <div class={styles.gridItem}>
                      <div class={styles.gridItemTop}>
                        <span class={[styles.topNum, styles.small]}>
                          {data.practiceSalaryInfo.actualSalary || 0}
                        </span>
                        元
                      </div>
                      <div>实际奖励</div>
                    </div>
                  </GridItem>
                </Grid>
              </div>
            )} */}

            <div class={styles.item}>
              <Cell center>
                {{
                  title: () => (
                    <div class={styles.itemTitle}>
                      <div class={styles.titleLine}></div>
                      <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, styles.small]} style={{ color: '#333' }}>
                        {moneyFormat(data.courseSalaryInfo.singleSubsidyStandard || 0)}
                      </span>
                      元/人
                    </div>
                    <div>单技补助标准</div>
                  </div>
                </GridItem>
                <GridItem>
                  <div class={styles.gridItem}>
                    <div class={styles.gridItemTop}>
                      <span class={[styles.topNum, styles.small]} style={{ color: '#333' }}>
                        {moneyFormat(data.courseSalaryInfo.musicSubsidyStandard || 0)}
                      </span>
                      元/天
                    </div>
                    <div>乐理补助标准</div>
                  </div>
                </GridItem>
                <GridItem>
                  <div class={styles.gridItem}>
                    <div class={styles.gridItemTop}>
                      <span class={[styles.topNum, styles.small]} style={{ color: '#333' }}>
                        {moneyFormat(data.courseSalaryInfo.ensembleSubsidyStandard || 0)}
                      </span>
                      元
                    </div>
                    <div>合奏补助标准</div>
                  </div>
                </GridItem>
              </Grid>
              {Array.isArray(data.courseSalaryInfo.salaryRecordDetailItemList) &&
                data.courseSalaryInfo.salaryRecordDetailItemList.map((teacher: any) => {
                  return (
                    <Cell
                      center
                      title={teacher.userName}
                      class={styles.teacherListCell}
                      isLink
                      to={`/subsidy-exercise-detail?id=${recordId.value}&userId=${teacher.userId}`}
                    >
                      {{
                        icon: () => (
                          <img class={styles.itemPicture} src={teacher.avatar || iconTeacher} />
                        ),
                        value: () => (
                          <div class={styles.gridItem}>
                            <div class={styles.gridItemTop}>
                              <span class={[styles.topNum, styles.small]}>
                                {moneyFormat(teacher.salary || 0)}
                              </span>
                              元
                            </div>
                            <div class={styles.valeLabel}>实际补助</div>
                          </div>
                        )
                      }}
                    </Cell>
                  )
                })}
            </div>

            <div class="van-safe-area-bottom">
              <div style={{ height: 'calc(var(--van-button-default-height) + 0.8rem)' }}></div>
            </div>
          </div>
        </OFullRefresh>
        {route.query.display && (
          <div class={styles.confirmBtn}>
            <div class="van-safe-area-bottom">
              <Button block type="primary" round onClick={sendConfirm}>
                确认无误
              </Button>
            </div>
          </div>
        )}

        <ODialog
          title="补助发放规则"
          message="1、每周一凌晨生成上一周实际补助数据\n2、每周一24点前完成补助确认，则该补助将会在当周周五发放\n3、超过周一24点确认，则延后到下周周五发放\n4、如遇法定节假日，则统一延后到下一周五发放\n5、未绑定银行卡导致无法发放时，将在绑定银行卡后的下一周五，一次性将已确认且未发放的补助金额发放"
          v-model:show={dialog.value}
          dialogMarginTop="env(safe-area-inset-top)"
          messageAlign="left"
          confirmButtonText="我知道了"
        />
      </div>
    )
  }
})