chem_mes/mes-ui/mes-ui-admin-vue3/src/views/biz/shiftresult/index.vue

<template>
  <ContentWrap>
    <!-- 搜索工作栏 -->
    <el-form   class="-mb-15px"
               :model="queryParams"
               ref="queryFormRef"
               :inline="true"
               label-width="80px">
      <el-row :gutter="16">
        <el-col :span="6">
          <el-form-item label="排班年月">
            <el-date-picker
              v-model="queryParams.years"
              value-format="YYYY-MM"
              type="month"
              placeholder="请选择排班年月"
              clearable
              class="!w-240px"
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item>
            <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
            <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="16">
        <el-col :span="6">
          <el-form-item label="倒班类型">
            <el-select
              v-model="queryParams.chgClassType"
              placeholder="请选择倒班类型"
              clearable
              class="!w-240px"
            >
              <el-option
                v-for="dict in getStrDictOptions(DICT_TYPE.SHIFT_WORK_TYPE)"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="开始日期">
            <el-date-picker
              v-model="queryParams.bgnDtime"
              value-format="YYYY-MM-DD"
              type="date"
              placeholder="请选择开始日期"
              clearable
              class="!w-240px"
              :disabled-date="disabledDate"
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item>
            <el-button
              type="success"
              @click="handleGenerate"
              :loading="generatedLoading"
              :disabled="generatedLoading"
            >
              生成排班结果
            </el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </ContentWrap>

  <!-- 列表 -->
  <ContentWrap>
    <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true" border>
      <el-table-column type="index" label="序号" align="center" min-width="60"  />

      <el-table-column label="班次" align="center" prop="classRate">
        <template #default="scope">
          <dict-tag :type="DICT_TYPE.SHIFT_SCHEDULE" :value="scope.row.classRate" />
        </template>
      </el-table-column>
      <el-table-column label="班组" align="center" prop="classGroup">
        <template #default="scope">
          <dict-tag :type="DICT_TYPE.TEAM_OR_GROUP" :value="scope.row.classGroup" />
        </template>
      </el-table-column>

      <el-table-column
        label="开始时间"
        align="center"
        prop="bgnDtime"
        :formatter="dateFormatter4"
        width="180px"
      />
      <el-table-column
        label="结束时间"
        align="center"
        prop="endDtime"
        :formatter="dateFormatter4"
        width="180px"
      />
      <el-table-column label="小时数" align="center" prop="shiftHour" />
      <el-table-column label="排班月份" align="center" prop="month"    :formatter="dateFormatter3" />
    </el-table>
    <!-- 分页 -->
    <Pagination
      :total="total"
      v-model:page="queryParams.pageNo"
      v-model:limit="queryParams.pageSize"
      @pagination="getList"
    />
  </ContentWrap>

  <!-- 表单弹窗：添加/修改 -->
  <ShiftResultForm ref="formRef" @success="getList" />
</template>

<script setup lang="ts">
import { getStrDictOptions, DICT_TYPE } from '@/utils/dict'
import { dateFormatter3, dateFormatter4} from '@/utils/formatTime'
import * as ShiftResultApi from '@/api/biz/shiftresult'
import ShiftResultForm from './ShiftResultForm.vue'

defineOptions({ name: 'ShiftResult' })

const message = useMessage() // 消息弹窗


const loading = ref(false) // 列表的加载中
const list = ref([]) // 列表的数据
const total = ref(0) // 列表的总页数
const generatedLoading = ref(false) // 生成排班结果的加载中

/** 获取当天日期 YYYY-MM-DD */
const getTodayDate = () => {
  const now = new Date()
  return `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}-${String(now.getDate()).padStart(2, '0')}`
}

/** 获取当月 YYYY-MM */
const getCurrentMonth = () => {
  const now = new Date()
  return `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}`
}

const queryParams = reactive({
  pageNo: 1,
  pageSize: 10,
  years: getCurrentMonth(),
  chgClassType: undefined,
  bgnDtime: getTodayDate(),
})
const queryFormRef = ref() // 搜索的表单

/** 禁用今天之前的日期 */
const disabledDate = (time: Date) => {
  return time.getTime() < Date.now() - 8.64e7
}

/** 查询列表 */
const getList = async () => {
  loading.value = true
  try {
    const data = await ShiftResultApi.getShiftResultPage(queryParams)
    list.value = data.list
    total.value = data.total
  } finally {
    loading.value = false
  }
}

/** 搜索按钮操作 */
const handleQuery = () => {
  queryParams.pageNo = 1
  getList()
}

/** 重置按钮操作 */
const resetQuery = () => {
  queryFormRef.value.resetFields()
  handleQuery()
}


/** 生成排班结果按钮操作 */
const handleGenerate = async () => {
  if (!queryParams.chgClassType) {
    message.warning('请先选择倒班类型')
    return
  }
  if (!queryParams.bgnDtime) {
    message.warning('请先选择开始日期')
    return
  }
  try {
    generatedLoading.value = true
    await ShiftResultApi.generateShiftSchedule({
      chgClassType: queryParams.chgClassType,
      bgnDtime: queryParams.bgnDtime
    })
    message.success('排班结果生成成功')
    getList()
  } catch {
  } finally {
    generatedLoading.value = false
  }
}

/** 初始化 **/
onMounted(() => {
  // getList()
})
</script>