labsop_h5/src/view/entry/mine.vue

<template>
  <div class="entry-container">
    <div class="list-container">
      <div
        class="search-wrap"
        ref="searchWrapRef"
      >
        <el-form
          :model="state.queryParams"
          ref="queryRef"
          :inline="true"
        >
          <el-form-item prop="serialNo">
            <el-select
              v-model="state.queryParams.platformId"
              style="width: 100%"
              placeholder="申请平台"
              clearable
              @change="search"
            >
              <el-option
                v-for="item in platformList"
                :key="item.id"
                :label="item.platformName"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item prop="dateRange">
            <el-input
              v-model="dateRangeText"
              placeholder="请选择入室时间范围"
              readonly
              style="width: 100%"
              @click="showCalendar = true"
            >
              <template #suffix>
                <el-icon
                  v-if="dateRangeText"
                  style="cursor: pointer; margin-right: 8px"
                  @click.stop="clearDateRange"
                >
                  <Close />
                </el-icon>
                <el-icon
                  style="cursor: pointer"
                  @click.stop="showCalendar = true"
                >
                  <Calendar />
                </el-icon>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item prop="serialNo">
            <el-input
              v-model="state.queryParams.resName"
              style="width: 100%"
              placeholder="资源名称"
              clearable
              @keyup.enter="search"
              @input="handleResNameInput"
            />
          </el-form-item>
        </el-form>
      </div>

      <van-list
        v-model:loading="state.loading"
        :finished="state.finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <van-cell
          v-for="item in state.list"
          :key="item"
        >
          <template #default>
            <div class="list">
              <header class="flex justify-between">
                <strong class="title">{{ item.userName }}的{{ item.platformName }}入室申请</strong>

                <van-tag
                  v-if="item.assignStatus == EntryAssignStatus.TO_BE_ENTERED"
                  type="primary"
                >
                  待入室
                </van-tag>
                <van-tag
                  v-else-if="item.assignStatus == EntryAssignStatus.NEXT_MONTH_ENTERED"
                  type="primary"
                >
                  次月入室
                </van-tag>
                <van-tag
                  v-else-if="item.assignStatus == EntryAssignStatus.ENTERED"
                  type="success"
                >
                  已入室
                </van-tag>
                <van-tag
                  v-else-if="item.assignStatus == EntryAssignStatus.OUT_ROOM"
                  type="primary"
                >
                  已出室
                </van-tag>
                <van-tag
                  v-else-if="item.assignStatus == EntryAssignStatus.NEXT_MONTH_OUT_ROOM"
                  type="primary"
                >
                  次月出室
                </van-tag>
              </header>
              <p class="inst-title">
                <span>申请平台</span>
                <span class="title ml8">
                  {{ item.platformName }}
                </span>
              </p>
              <p class="inst-title">
                <span>入室时间</span>
                <span class="title ml8">
                  {{ item?.startTime ? formatDate(new Date(item?.startTime), 'YYYY-mm-dd') : '' }}
                  ~
                  {{ item?.endTime ? formatDate(new Date(item?.endTime), 'YYYY-mm-dd') : '' }}
                </span>
              </p>
              <p class="inst-title">
                <span>资源名称</span>
                <span class="title ml8">
                  {{ item.resName }}
                </span>
              </p>
              <p class="inst-title">
                <span>位置信息</span>
                <span class="title ml8">
                  {{ item.resLocation }}
                </span>
              </p>
              <footer class="flex justify-between mt16">
                <div
                  v-if="item.assignStatus === '20' && item.userId === userInfos.id"
                  style="text-align: right; width: 100%"
                >
                  <van-button
                    type="primary"
                    style="height: 30px"
                    @click="handleAppointment(item)"
                  >
                    使用预约
                  </van-button>
                </div>
                <div
                  v-if="
                    item.assignStatus === '20' &&
                    item.userId === userInfos.id &&
                    item.outStatus !== 20 &&
                    item.outStatus !== 30 &&
                    isEndTimeInFirstTenDays(item.startTime,item.endTime)
                  "
                  style="text-align: right; width: 100%"
                >
                  <van-button
                    type="primary"
                    style="height: 30px"
                    @click="handleRenewal(item)"
                  >
                    申请续期
                  </van-button>
                </div>
                <div
                  v-if="item.assignStatus === EntryAssignStatus.ENTERED && item.userId === userInfos.id"
                  style="text-align: right; width: 100%"
                >
                  <van-button
                    type="primary"
                    style="height: 30px"
                    @click="handleOutRoom(item)"
                  >
                    申请出室
                  </van-button>
                </div>
              </footer>
            </div>
          </template>
        </van-cell>
      </van-list>
    </div>

    <el-dialog
      v-model="showOutDialog"
      title="申请出室"
      width="85%"
      :before-close="
        () => {
          showOutDialog = false
        }
      "
    >
      <el-form
        ref="outRoomFormRef"
        :model="outRoomForm"
        :rules="rules"
        label-position="top"
      >
        <el-form-item
          style="display: block"
          label="申请出室日期"
          prop="outRoomDate"
        >
          <el-date-picker
            :disabled-date="disabledTime"
            v-model="outRoomForm.outRoomDate"
            type="month"
            style="width: 100%"
            placeholder="请选择出室月份"
            value-format="YYYY-MM-DD"
          />
        </el-form-item>
        <el-form-item>
          <div style="text-align: right; width: 100%">
            <el-button
              @click="
                () => {
                  showOutDialog = false
                }
              "
            >
              取消
            </el-button>
            <el-button
              type="primary"
              @click="handleSubmitOutRoom"
            >
              申请
            </el-button>
          </div>
        </el-form-item>
      </el-form>
    </el-dialog>
    <Appoint ref="appointRef" />
    <RenewalEdit ref="renewalEditRef" />

    <!-- 日期范围选择日历 -->
    <van-popup
      v-model:show="showCalendar"
      position="bottom"
      :style="{ height: '80vh' }"
      round
    >
      <van-calendar
        v-model:show="showCalendar"
        type="range"
        :min-date="new Date(1900, 0, 1)"
        @confirm="onDateRangeConfirm"
      />
    </van-popup>
  </div>
</template>

<script name="entryMine" lang="ts" setup>
  import { reactive, onMounted, ref, computed } from 'vue'
  import { useRouter } from 'vue-router'
  import to from 'await-to-js'
  import { storeToRefs } from 'pinia'
  import { ElMessage } from 'element-plus'
  import { Calendar, Close } from '@element-plus/icons-vue'
  import dayjs from 'dayjs'

  import { usePlatformAppointApi } from '/@/api/platform/appoint'
  import { useCellAssignApi } from '/@/api/platform/home/assign'
  import { usePlatformApi } from '/@/api/platform/home'
  import { formatDate } from '/@/utils/formatTime'
  import { useUserInfo } from '/@/stores/userInfo'
  import { debounce } from '/@/utils/other'
  import Appoint from './components/appoint.vue'
  import RenewalEdit from './components/renewalEdit.vue'

  enum EntryAssignStatus {
    TO_BE_ENTERED = '10', // 待入室
    NEXT_MONTH_ENTERED = '15', // 次月入室
    ENTERED = '20', // 已入室
    OUT_ROOM = '30', // 已出室
    NEXT_MONTH_OUT_ROOM = '40', // 次月出室
  }

  const stores = useUserInfo()
  const { userInfos } = storeToRefs(stores)

  const platformAppointApi = usePlatformAppointApi()
  const platformApi = usePlatformApi()
  const cellAssignApi = useCellAssignApi()
  const router = useRouter()

  const outRoomFormRef = ref()
  const renewalEditRef = ref()
  const appointRef = ref()
  const showOutDialog = ref<boolean>(false)
  const dateRange = ref<string[]>([])
  const showCalendar = ref(false)
  const selectedDateRange = ref<[Date, Date] | null>(null)
  const platformList = ref<any[]>([])

  const dateRangeText = computed(() => {
    if (selectedDateRange.value && selectedDateRange.value.length === 2) {
      const start = dayjs(selectedDateRange.value[0]).format('YYYY-MM-DD')
      const end = dayjs(selectedDateRange.value[1]).format('YYYY-MM-DD')
      return `${start} 至 ${end}`
    }
    return ''
  })

  const state = reactive({
    queryParams: {
      platformId: null,
      dateTime: [],
      resName: '',
      pageNum: 1,
      orderBy: '',
      pageSize: 20,
    },
    finished: false,
    loading: true,
    list: [] as any[],
  })
  const currentSelectEntryItem = ref({
    id: null,
    endTime: '',
    startTime: '',
  })

  const outRoomForm = reactive({
    outRoomDate: '',
  })

  const rules = {
    outRoomDate: { required: true, message: '不能为空', trigger: 'change' },
  }

  const disabledTime = (date: Date) => {
    let startTime = formatDate(
      new Date(dayjs(currentSelectEntryItem.value.startTime).add(1, 'month').format('YYYY-MM-DD')),
      'YYYY-mm-dd',
    )
    let endTime = formatDate(
      new Date(dayjs(currentSelectEntryItem.value.endTime).subtract(1, 'month').format('YYYY-MM-DD')),
      'YYYY-mm-dd',
    )

    let now = formatDate(new Date(), 'YYYY-mm-dd')
    let time = formatDate(new Date(date), 'YYYY-mm-dd')
    return time < now || time > endTime || time < startTime
  }

  const onLoad = async () => {
    state.loading = true

    const payload: any = {
      ...state.queryParams,
    }

    Object.keys(payload).map((item) => {
      if (payload[item] === '' || payload[item] === null) {
        delete payload[item]
      }
    })

    const [err, res]: ToResponse = await to(cellAssignApi.getUserAssignResources(payload))
    if (err) return
    const list = res?.data?.list || []
    for (const item of list) {
      state.list.push(item)
    }
    state.loading = false
    state.queryParams.pageNum++
    if (list.length < state.queryParams.pageSize) {
      state.finished = true
    }
  }

  const getDicts = () => {
    Promise.all([platformApi.getPlatformList()]).then(([plat]) => {
      platformList.value = plat?.data?.list || []
    })
  }

  const resetQuery = () => {
    state.queryParams = {
      ...state.queryParams,
      pageNum: 1,
      pageSize: 20,
    }
    state.list = []
    state.finished = false
    state.loading = true
  }

  const onDateRangeConfirm = (values: Date[]) => {
    if (values && values.length === 2) {
      selectedDateRange.value = [values[0], values[1]]
      dateRange.value = [dayjs(values[0]).format('YYYY-MM-DD'), dayjs(values[1]).format('YYYY-MM-DD')]
      showCalendar.value = false
      search()
    }
  }

  const clearDateRange = () => {
    selectedDateRange.value = null
    dateRange.value = []
    search()
  }

  // 防抖后的搜索函数
  const debouncedSearch = debounce(() => {
    search()
  }, 500)

  // 处理资源名称输入
  const handleResNameInput = () => {
    debouncedSearch()
  }

  const search = () => {
    if (dateRange.value && dateRange.value.length === 2) {
      state.queryParams.dateTime[0] = dateRange.value[0] + ' 00:00:00'
      state.queryParams.dateTime[1] = dateRange.value[1] + ' 23:59:59'
    } else {
      state.queryParams.dateTime[0] = ''
      state.queryParams.dateTime[1] = ''
    }
    resetQuery()
    onLoad()
  }

  const handleOutRoom = (item: any) => {
    showOutDialog.value = true
    currentSelectEntryItem.value = item
  }

  const handleSubmitOutRoom = () => {
    outRoomFormRef.value.validate(async (valid: boolean) => {
      if (!valid) return
      const { projectGroup } = userInfos.value
      const [err, res]: ToResponse = await to(
        platformAppointApi.createCommonAppoint({
          tranId: currentSelectEntryItem.value.id,
          tranType: 1,
          outApplyTime: dayjs(outRoomForm.outRoomDate).endOf('month').format('YYYY-MM-DD HH:mm:ss'),
          memberId: userInfos.value.id,
          memberName: userInfos.value.nickName,
          memberType: userInfos.value.userType,
          memberPhone: userInfos.value.phone,
          deptId: userInfos.value.deptId,
          deptName: userInfos.value.deptName,
          pgId: projectGroup.id,
          pgName: projectGroup.pgName,
          mentorId: projectGroup.pgLeaderId,
          mentorName: projectGroup.pgLeaderName,
          mentorDeptName: projectGroup.pgOrgPaths,
          mentorPhone: projectGroup.pgLeaderContact,
          isTemporary: '20', // 是否暂存，10是，20否
        }),
      )
      if (err) return
      showOutDialog.value = false
      ElMessage.success('操作成功')
      state.list = []
      state.queryParams.pageNum = 1
      onLoad()
    })
  }

  const handleAppointment = (item: any) => {
    appointRef.value.openDialog(item)
  }

  const handleRenewal = (row) => {
    renewalEditRef.value.openDialog('add', row)
  }

  // 判断endtime是否在当前月份的前10天内
  const isEndTimeInFirstTenDays = (startTime: string,endTime: string) => {
    if (!startTime || !endTime) return false;
  const startDate = dayjs(startTime).startOf('day');
  const endDate10 = dayjs(endTime).date(10).endOf('day');
  const today = dayjs();
  const todayStart = today.startOf('day');
  return todayStart.valueOf() >= startDate.valueOf() && todayStart.valueOf() <= endDate10.valueOf();
  }

  onMounted(() => {
    getDicts()
    onLoad()
  })
</script>

<style lang="scss" scoped>
  .entry-container {
    position: relative;
    display: flex;
    flex-direction: column;
    .list-container {
      overflow-y: auto;
      padding: 10px;
      border-radius: 4px;
      flex: 1;
    }
    .van-list {
      .van-cell {
        background-color: #fff;
        + .van-cell {
          margin-top: 10px;
        }
        header,
        footer {
          color: #333;
        }
        .title {
          flex: 1;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          text-align: left;
        }
        .inst-title {
          color: #333;
          text-align: left;
          flex: 1;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          margin-top: 4px;
          span:first-child {
            color: rgb(120, 120, 120);
          }
        }
        .time {
          color: #f69a4d;
        }
      }
    }
    .asterisk-left {
      display: flex;
      margin-right: 0;
    }
    .search-wrap {
      background: #fff;
      margin-bottom: 10px;
      padding: 15px;
    }
  }
</style>