2024-07-24 15:48:21 +08:00

279 lines
8.2 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<ContentWrap>
<!-- 搜索工作栏 -->
<el-form
class="-mb-15px"
:model="queryParams"
ref="queryFormRef"
:inline="true"
label-width="auto"
>
<!--
<el-form-item label="ID" prop="id">
<el-input
v-model="queryParams.id"
placeholder="请输入ID"
clearable
@keyup.enter="handleQuery"
class="!w-240px"
/>
</el-form-item>
-->
<el-form-item label="数据ID" prop="dataId">
<el-input
v-model="queryParams.dataId"
placeholder="请输入数据ID"
clearable
@keyup.enter="handleQuery"
class="!w-240px"
/>
</el-form-item>
<el-form-item label="检票点ID" prop="checkstation">
<el-input
v-model="queryParams.checkstation"
placeholder="请输入检票点ID"
clearable
@keyup.enter="handleQuery"
class="!w-240px"
/>
</el-form-item>
<el-form-item label="检票点名称" prop="checkstationname">
<el-input
v-model="queryParams.checkstationname"
placeholder="请输入检票点名称"
clearable
@keyup.enter="handleQuery"
class="!w-240px"
/>
</el-form-item>
<el-form-item label="检票日期" prop="checkticketdate">
<el-date-picker
v-model="queryParams.checkticketdate"
value-format="YYYYMMDD"
type="daterange"
start-placeholder="开始日期"
end-placeholder="结束日期"
:default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
class="!w-240px"
/>
</el-form-item>
<!-- <el-form-item label="检票时间" prop="checktickettime">
<el-date-picker
v-model="queryParams.checktickettime"
value-format="YYYYMMDD"
type="daterange"
start-placeholder="开始日期"
end-placeholder="结束日期"
:default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
class="!w-240px"
/>
</el-form-item> -->
<!--
<el-form-item label="人数" prop="personcount">
<el-input
v-model="queryParams.personcount"
placeholder="请输入人数"
clearable
@keyup.enter="handleQuery"
class="!w-240px"
/>
</el-form-item>
-->
<el-form-item label="订单明细ID" prop="sdshipping">
<el-input
v-model="queryParams.sdshipping"
placeholder="请输入订单明细ID"
clearable
@keyup.enter="handleQuery"
class="!w-240px"
/>
</el-form-item>
<el-form-item label="票ID" prop="ticket">
<el-input
v-model="queryParams.ticket"
placeholder="请输入票ID"
clearable
@keyup.enter="handleQuery"
class="!w-240px"
/>
</el-form-item>
<!--
<el-form-item label="销售特征名称(票种名称)" prop="salepropetyvaluename">
<el-input
v-model="queryParams.salepropetyvaluename"
placeholder="请输入销售特征名称(票种名称)"
clearable
@keyup.enter="handleQuery"
class="!w-240px"
/>
</el-form-item>
-->
<el-form-item style="float: right;">
<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-button
type="primary"
plain
@click="openForm('create')"
v-hasPermi="['ticket:check-ticket:create']"
>
<Icon icon="ep:plus" class="mr-5px" /> 新增
</el-button>
<el-button
type="success"
plain
@click="handleExport"
:loading="exportLoading"
v-hasPermi="['ticket:check-ticket:export']"
>
<Icon icon="ep:download" class="mr-5px" /> 导出
</el-button>
</el-form-item>
</el-form>
</ContentWrap>
<!-- 列表 -->
<ContentWrap>
<el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
<el-table-column label="序号" align="center" >
<template #default="scope">{{ (queryParams.pageNo - 1) * queryParams.pageSize + scope.$index + 1 }}</template>
</el-table-column>
<el-table-column label="数据ID" align="center" prop="dataId" />
<el-table-column label="检票点ID" align="center" prop="checkstation" />
<el-table-column label="检票点名称" align="center" prop="checkstationname" />
<el-table-column label="检票日期" align="center" prop="checkticketdate" />
<el-table-column label="检票时间" align="center" prop="checktickettime" />
<el-table-column label="人数" align="center" prop="personcount" />
<el-table-column label="订单明细ID" align="center" prop="sdshipping" />
<el-table-column label="票ID" align="center" prop="ticket" />
<!-- <el-table-column label="销售特征名称(票种名称)" align="center" prop="salepropetyvaluename" /> -->
<el-table-column label="操作" align="center">
<template #default="scope">
<el-button
link
type="primary"
@click="openForm('update', scope.row.id)"
v-hasPermi="['ticket:check-ticket:update']"
>
编辑
</el-button>
<el-button
link
type="danger"
@click="handleDelete(scope.row.id)"
v-hasPermi="['ticket:check-ticket:delete']"
>
删除
</el-button>
</template>
</el-table-column>
</el-table>
<!-- 分页 -->
<Pagination
:total="total"
v-model:page="queryParams.pageNo"
v-model:limit="queryParams.pageSize"
@pagination="getList"
/>
</ContentWrap>
<!-- 表单弹窗添加/修改 -->
<CheckTicketForm ref="formRef" @success="getList" />
</template>
<script setup lang="ts">
import download from '@/utils/download'
import { CheckTicketApi, CheckTicketVO } from '@/api/ticket/checkticket'
import CheckTicketForm from './CheckTicketForm.vue'
/** 检票 列表 */
defineOptions({ name: 'CheckTicket' })
const message = useMessage() // 消息弹窗
const { t } = useI18n() // 国际化
const loading = ref(true) // 列表的加载中
const list = ref<CheckTicketVO[]>([]) // 列表的数据
const total = ref(0) // 列表的总页数
const queryParams = reactive({
pageNo: 1,
pageSize: 10,
id: undefined,
dataId: undefined,
checkstation: undefined,
checkstationname: undefined,
checkticketdate: [],
checktickettime: [],
personcount: undefined,
sdshipping: undefined,
ticket: undefined,
salepropetyvaluename: undefined,
})
const queryFormRef = ref() // 搜索的表单
const exportLoading = ref(false) // 导出的加载中
/** 查询列表 */
const getList = async () => {
loading.value = true
try {
const data = await CheckTicketApi.getCheckTicketPage(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 formRef = ref()
const openForm = (type: string, id?: number) => {
formRef.value.open(type, id)
}
/** 删除按钮操作 */
const handleDelete = async (id: number) => {
try {
// 删除的二次确认
await message.delConfirm()
// 发起删除
await CheckTicketApi.deleteCheckTicket(id)
message.success(t('common.delSuccess'))
// 刷新列表
await getList()
} catch {}
}
/** 导出按钮操作 */
const handleExport = async () => {
try {
// 导出的二次确认
await message.exportConfirm()
// 发起导出
exportLoading.value = true
const data = await CheckTicketApi.exportCheckTicket(queryParams)
download.excel(data, '检票.xls')
} catch {
} finally {
exportLoading.value = false
}
}
/** 初始化 **/
onMounted(() => {
getList()
})
</script>