kyj-yanglao-web-new/src/views/elderly/restaurant/elderFood-order/index.vue

<template>
  <!-- 搜索 -->
  <ContentWrap>
    <el-form
      ref="queryFormRef"
      :model="queryParams"
      :inline="true"
      label-width="80px"
      class="-mb-15px"
    >
      <TenantSelect v-model="queryParams.tenantIds" placeholder="请选择院区" prop="tenantIds" />
      <el-form-item label="长者名称" prop="elderName" label-width="70px">
        <el-input v-model="queryParams.elderName" clearable class="!w-160px" />
      </el-form-item>
      <el-form-item label="楼栋名称" prop="buildName" label-width="70px">
        <el-input v-model="queryParams.buildName" clearable class="!w-160px" />
      </el-form-item>
      <el-form-item label="楼层名称" prop="floorName" label-width="70px">
        <el-input v-model="queryParams.floorName" clearable class="!w-160px" />
      </el-form-item>
      <el-form-item label="房间号" prop="roomNo" label-width="65px">
        <el-input v-model="queryParams.roomNo" clearable class="!w-160px" />
      </el-form-item>
      <el-form-item label="A/B套餐" prop="extraDishesOption" label-width="80px">
        <el-select v-model="queryParams.extraDishesOption" clearable class="!w-160px" placeholder="请选择">
          <el-option label="A套餐" value="A" />
          <el-option label="B套餐" value="B" />
        </el-select>
      </el-form-item>
      <el-form-item label="时间段" prop="orderFoodDateRange" label-width="80px">
        <TgDatePicker
          type="daterange"
          v-model="queryParams.orderFoodDateRange"
          class="!w-240px"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        />
      </el-form-item>
      <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-form>
  </ContentWrap>

  <!-- 列表 -->
  <ContentWrap>
    <div class="mb-12px flex items-center" v-hasPermi="['elderly:order-food:export']">
      <el-button class="ml-8px" type="success" plain @click="handleExport">
        <Icon icon="ep:download" class="mr-5px" /> 导出
      </el-button>
    </div>

    <Table2
      v-loading="loading"
      :data="list"
      :columns="elderFoodOrderColumns"
      :queryParams="queryParams"
      :opWidth="120"
      @del="handleDelete"
    />

    <Pagination
      :total="total"
      v-model:page="queryParams.pageNo"
      v-model:limit="queryParams.pageSize"
      @pagination="getList"
    />
  </ContentWrap>
</template>

<script lang="ts" setup>
import { useUserStore } from '@/store/modules/user'
import { getElderFoodOrderPage, exportElderFoodOrderExcel, deleteElderFoodOrder } from '@/api/system/foods'
import download from '@/utils/download'

defineOptions({ name: 'ElderFoodOrder' })

const userStore = useUserStore()
const message = useMessage()
const { t } = useI18n()
const loading = ref(false)
const total = ref(0)
const list = ref<any[]>([])
const queryFormRef = ref()

const queryParams = reactive<any>({
  pageNo: 1,
  pageSize: 10,
  tenantIds: userStore.orgTenantId,
  buildName:'',
  floorName:'',
  roomNo: '',
  elderName: '',
  extraDishesOption: undefined as string | undefined,
  orderFoodDateRange: [] as string[] | undefined,
  orderFoodStartDate: undefined as string | undefined,
  orderFoodEndDate: undefined as string | undefined
})

const elderFoodOrderColumns = reactive([
  { label: '长者姓名', field: 'elderName' },
  {
    label: '点餐日期',
    field: 'orderFoodDate',
  },
  { label: 'A/B套餐', field: 'extraDishesOption' },
  { label: '附加菜名', field: 'extraDishes' },
])

const getParams = (isExport = false) => {
  const params: any = {
    ...queryParams,
    tenantIds: queryParams.tenantIds && queryParams.tenantIds.length ? queryParams.tenantIds : undefined
  }
  const dateRange = queryParams.orderFoodDateRange || []
  params.orderFoodStartDate = dateRange[0]
  params.orderFoodEndDate = dateRange[1]
  delete params.orderFoodDateRange
  if (isExport) {
    params.pageNo = 1
    params.pageSize = 99999
  }
  return params
}

const getList = async () => {
  loading.value = true
  try {
    const res = await getElderFoodOrderPage(getParams())
    const data = res || {}
    console.log("data",data)
    list.value = data?.list || []
    total.value = data?.total || 0
  } finally {
    loading.value = false
  }
}

const handleQuery = () => {
  queryParams.pageNo = 1
  getList()
}

const resetQuery = () => {
  queryFormRef.value?.resetFields()
  queryParams.tenantIds = userStore.orgTenantId
  handleQuery()
}

const handleExport = async () => {
  const data = await exportElderFoodOrderExcel(getParams(true))
  download.excel(data, `长者点餐统计_${Date.now()}.xls`)
}

const handleDelete = async (id: number) => {
  try {
    await message.delConfirm()
    await deleteElderFoodOrder(id)
    message.success(t('common.delSuccess'))
    await getList()
  } catch {}
}

onMounted(() => {
  getList()
})
</script>