14 changed files with 961 additions and 753 deletions
@ -1,25 +1,27 @@ |
|||
{ |
|||
"id": "场地编号", |
|||
"idPlaceholder": "请输入场地编号", |
|||
"campusId": "校区ID", |
|||
"campusIdPlaceholder": "请输入校区ID", |
|||
"venueName": "场地名称", |
|||
"venueNamePlaceholder": "请输入场地名称", |
|||
"capacity": "场地可容纳人数上限", |
|||
"capacityPlaceholder": "请输入场地可容纳人数上限", |
|||
"availabilityStatus": "场地可用状态", |
|||
"availabilityStatusPlaceholder": "请输入场地可用状态", |
|||
"timeRangeType": "场地可用时间范围类型", |
|||
"timeRangeTypePlaceholder": "请输入场地可用时间范围类型", |
|||
"timeRangeStart": "范围类型的开始时间", |
|||
"timeRangeStartPlaceholder": "请输入范围类型的开始时间", |
|||
"timeRangeEnd": "范围类型的结束时间", |
|||
"timeRangeEndPlaceholder": "请输入范围类型的结束时间", |
|||
"fixedTimeRanges": "固定时间范围类型的可用时间, 存储为JSON数组", |
|||
"fixedTimeRangesPlaceholder": "请输入固定时间范围类型的可用时间, 存储为JSON数组", |
|||
"addVenue": "添加场地", |
|||
"updateVenue": "编辑场地", |
|||
"venueDeleteTips": "确定要删除该数据吗？", |
|||
"startDate": "请选择开始时间", |
|||
"endDate": "请选择结束时间" |
|||
} |
|||
"campusId":"校区", |
|||
"campusIdPlaceholder":"全部", |
|||
"venueName":"场地名称", |
|||
"venueNamePlaceholder":"请输入场地名称", |
|||
"capacity":"场地可容纳人数上限", |
|||
"capacityPlaceholder":"请输入场地可容纳人数上限", |
|||
"availabilityStatus":"场地可用状态", |
|||
"availabilityStatusPlaceholder":"请输入场地可用状态", |
|||
"timeRangeType":"场地可用时间范围类型", |
|||
"timeRangeTypePlaceholder":"请输入场地可用时间范围类型", |
|||
"timeRangeStart":"范围类型的开始时间", |
|||
"timeRangeStartPlaceholder":"请输入范围类型的开始时间", |
|||
"timeRangeEnd":"范围类型的结束时间", |
|||
"timeRangeEndPlaceholder":"请输入范围类型的结束时间", |
|||
"fixedTimeRanges":"固定时间范围类型的可用时间, 存储为JSON数组", |
|||
"fixedTimeRangesPlaceholder":"请输入固定时间范围类型的可用时间, 存储为JSON数组", |
|||
"createdAt":"创建时间", |
|||
"createdAtPlaceholder":"请输入创建时间", |
|||
"updatedAt":"修改时间", |
|||
"updatedAtPlaceholder":"请输入修改时间", |
|||
"addVenue":"添加场地", |
|||
"updateVenue":"编辑场地", |
|||
"venueDeleteTips":"确定要删除该数据吗？", |
|||
"startDate":"请选择开始时间", |
|||
"endDate":"请选择结束时间" |
|||
} |
|||
@ -1,278 +1,267 @@ |
|||
<template> |
|||
<el-dialog |
|||
v-model="showDialog" |
|||
:title="formData.id ? t('updateVenue') : t('addVenue')" |
|||
width="50%" |
|||
class="diy-dialog-wrap" |
|||
:destroy-on-close="true" |
|||
> |
|||
<el-form |
|||
:model="formData" |
|||
label-width="120px" |
|||
ref="formRef" |
|||
:rules="formRules" |
|||
class="page-form" |
|||
v-loading="loading" |
|||
> |
|||
<el-form-item :label="t('campusId')" prop="campus_id"> |
|||
<el-input |
|||
v-model="formData.campus_id" |
|||
clearable |
|||
:placeholder="t('campusIdPlaceholder')" |
|||
class="input-width" |
|||
/> |
|||
</el-form-item> |
|||
|
|||
<el-form-item :label="t('venueName')" prop="venue_name"> |
|||
<el-input |
|||
v-model="formData.venue_name" |
|||
clearable |
|||
:placeholder="t('venueNamePlaceholder')" |
|||
class="input-width" |
|||
/> |
|||
</el-form-item> |
|||
|
|||
<el-form-item :label="t('capacity')" prop="capacity"> |
|||
<el-input |
|||
v-model="formData.capacity" |
|||
clearable |
|||
:placeholder="t('capacityPlaceholder')" |
|||
class="input-width" |
|||
/> |
|||
</el-form-item> |
|||
|
|||
<el-form-item :label="t('availabilityStatus')" prop="availability_status"> |
|||
<el-input |
|||
v-model="formData.availability_status" |
|||
clearable |
|||
:placeholder="t('availabilityStatusPlaceholder')" |
|||
class="input-width" |
|||
/> |
|||
</el-form-item> |
|||
|
|||
<el-form-item :label="t('timeRangeType')" prop="time_range_type"> |
|||
<el-input |
|||
v-model="formData.time_range_type" |
|||
clearable |
|||
:placeholder="t('timeRangeTypePlaceholder')" |
|||
class="input-width" |
|||
/> |
|||
</el-form-item> |
|||
|
|||
<el-form-item :label="t('timeRangeStart')"> |
|||
<el-input |
|||
v-model="formData.time_range_start" |
|||
clearable |
|||
:placeholder="t('timeRangeStartPlaceholder')" |
|||
class="input-width" |
|||
/> |
|||
</el-form-item> |
|||
|
|||
<el-form-item :label="t('timeRangeEnd')"> |
|||
<el-input |
|||
v-model="formData.time_range_end" |
|||
clearable |
|||
:placeholder="t('timeRangeEndPlaceholder')" |
|||
class="input-width" |
|||
/> |
|||
</el-form-item> |
|||
|
|||
<el-form-item :label="t('fixedTimeRanges')"> |
|||
<el-input |
|||
v-model="formData.fixed_time_ranges" |
|||
clearable |
|||
:placeholder="t('fixedTimeRangesPlaceholder')" |
|||
class="input-width" |
|||
/> |
|||
</el-form-item> |
|||
</el-form> |
|||
|
|||
<template #footer> |
|||
<span class="dialog-footer"> |
|||
<el-button @click="showDialog = false">{{ t('cancel') }}</el-button> |
|||
<el-button |
|||
type="primary" |
|||
:loading="loading" |
|||
@click="confirm(formRef)" |
|||
>{{ t('confirm') }}</el-button |
|||
> |
|||
</span> |
|||
</template> |
|||
</el-dialog> |
|||
</template> |
|||
|
|||
<script lang="ts" setup> |
|||
import { ref, reactive, computed, watch } from 'vue' |
|||
import { useDictionary } from '@/app/api/dict' |
|||
import { t } from '@/lang' |
|||
import type { FormInstance } from 'element-plus' |
|||
import { addVenue, editVenue, getVenueInfo } from '@/app/api/venue' |
|||
|
|||
let showDialog = ref(false) |
|||
const loading = ref(false) |
|||
|
|||
/** |
|||
* 表单数据 |
|||
*/ |
|||
const initialFormData = { |
|||
id: '', |
|||
campus_id: '', |
|||
venue_name: '', |
|||
capacity: '', |
|||
availability_status: '', |
|||
time_range_type: '', |
|||
time_range_start: '', |
|||
time_range_end: '', |
|||
fixed_time_ranges: '', |
|||
} |
|||
const formData: Record<string, any> = reactive({ ...initialFormData }) |
|||
|
|||
const formRef = ref<FormInstance>() |
|||
|
|||
// 表单验证规则 |
|||
const formRules = computed(() => { |
|||
return { |
|||
campus_id: [ |
|||
{ required: true, message: t('campusIdPlaceholder'), trigger: 'blur' }, |
|||
], |
|||
venue_name: [ |
|||
{ required: true, message: t('venueNamePlaceholder'), trigger: 'blur' }, |
|||
], |
|||
capacity: [ |
|||
{ required: true, message: t('capacityPlaceholder'), trigger: 'blur' }, |
|||
], |
|||
availability_status: [ |
|||
{ |
|||
required: true, |
|||
message: t('availabilityStatusPlaceholder'), |
|||
trigger: 'blur', |
|||
}, |
|||
], |
|||
time_range_type: [ |
|||
{ |
|||
required: true, |
|||
message: t('timeRangeTypePlaceholder'), |
|||
trigger: 'blur', |
|||
}, |
|||
], |
|||
time_range_start: [ |
|||
{ |
|||
required: true, |
|||
message: t('timeRangeStartPlaceholder'), |
|||
trigger: 'blur', |
|||
}, |
|||
], |
|||
time_range_end: [ |
|||
{ |
|||
required: true, |
|||
message: t('timeRangeEndPlaceholder'), |
|||
trigger: 'blur', |
|||
}, |
|||
], |
|||
fixed_time_ranges: [ |
|||
{ |
|||
required: true, |
|||
message: t('fixedTimeRangesPlaceholder'), |
|||
trigger: 'blur', |
|||
}, |
|||
], |
|||
} |
|||
}) |
|||
|
|||
const emit = defineEmits(['complete']) |
|||
|
|||
/** |
|||
* 确认 |
|||
* @param formEl |
|||
*/ |
|||
const confirm = async (formEl: FormInstance | undefined) => { |
|||
if (loading.value || !formEl) return |
|||
let save = formData.id ? editVenue : addVenue |
|||
|
|||
await formEl.validate(async (valid) => { |
|||
if (valid) { |
|||
loading.value = true |
|||
|
|||
let data = formData |
|||
|
|||
save(data) |
|||
.then((res) => { |
|||
loading.value = false |
|||
showDialog.value = false |
|||
emit('complete') |
|||
}) |
|||
.catch((err) => { |
|||
loading.value = false |
|||
}) |
|||
} |
|||
}) |
|||
} |
|||
|
|||
// 获取字典数据 |
|||
|
|||
const setFormData = async (row: any = null) => { |
|||
Object.assign(formData, initialFormData) |
|||
loading.value = true |
|||
if (row) { |
|||
const data = await (await getVenueInfo(row.id)).data |
|||
if (data) |
|||
Object.keys(formData).forEach((key: string) => { |
|||
if (data[key] != undefined) formData[key] = data[key] |
|||
}) |
|||
} |
|||
loading.value = false |
|||
} |
|||
|
|||
// 验证手机号格式 |
|||
const mobileVerify = (rule: any, value: any, callback: any) => { |
|||
if (value && !/^1[3-9]\d{9}$/.test(value)) { |
|||
callback(new Error(t('generateMobile'))) |
|||
} else { |
|||
callback() |
|||
} |
|||
} |
|||
|
|||
// 验证身份证号 |
|||
const idCardVerify = (rule: any, value: any, callback: any) => { |
|||
if ( |
|||
value && |
|||
!/^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/.test( |
|||
value |
|||
) |
|||
) { |
|||
callback(new Error(t('generateIdCard'))) |
|||
} else { |
|||
callback() |
|||
} |
|||
} |
|||
|
|||
// 验证邮箱号 |
|||
const emailVerify = (rule: any, value: any, callback: any) => { |
|||
if (value && !/\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/.test(value)) { |
|||
callback(new Error(t('generateEmail'))) |
|||
} else { |
|||
callback() |
|||
} |
|||
} |
|||
|
|||
// 验证请输入整数 |
|||
const numberVerify = (rule: any, value: any, callback: any) => { |
|||
if (!Number.isInteger(value)) { |
|||
callback(new Error(t('generateNumber'))) |
|||
} else { |
|||
callback() |
|||
} |
|||
} |
|||
|
|||
defineExpose({ |
|||
showDialog, |
|||
setFormData, |
|||
}) |
|||
</script> |
|||
|
|||
<style lang="scss" scoped></style> |
|||
<style lang="scss"> |
|||
.diy-dialog-wrap .el-form-item__label { |
|||
height: auto !important; |
|||
} |
|||
</style> |
|||
<template> |
|||
<el-dialog v-model="showDialog" :title="formData.id ? t('updateVenue') : t('addVenue')" width="50%" class="diy-dialog-wrap" :destroy-on-close="true"> |
|||
<el-form :model="formData" label-width="120px" ref="formRef" :rules="formRules" class="page-form" v-loading="loading"> |
|||
<el-form-item :label="t('campusId')" prop="campus_id"> |
|||
<el-select class="input-width" v-model="formData.campus_id" clearable :placeholder="t('campusIdPlaceholder')"> |
|||
<el-option label="请选择" value=""></el-option> |
|||
<el-option |
|||
v-for="(item, index) in campusIdList" |
|||
:key="index" |
|||
:label="item['campus_name']" |
|||
:value="item['id']" |
|||
/> |
|||
</el-select> |
|||
</el-form-item> |
|||
|
|||
<el-form-item :label="t('venueName')" prop="venue_name"> |
|||
<el-input v-model="formData.venue_name" clearable :placeholder="t('venueNamePlaceholder')" class="input-width" /> |
|||
</el-form-item> |
|||
|
|||
<el-form-item :label="t('capacity')" prop="capacity"> |
|||
<el-input-number v-model="formData.capacity" clearable :placeholder="t('capacityPlaceholder')" class="input-width" :min = "1" max = "500" /> |
|||
</el-form-item> |
|||
|
|||
<el-form-item :label="t('availabilityStatus')" prop="availability_status"> |
|||
<el-radio-group v-model="formData.availability_status" :placeholder="t('availabilityStatusPlaceholder')"> |
|||
<el-radio |
|||
v-for="(item, index) in availability_statusList" |
|||
:key="index" :label="item.value"> |
|||
{{ item.name }} |
|||
</el-radio> |
|||
</el-radio-group> |
|||
</el-form-item> |
|||
|
|||
<el-form-item :label="t('timeRangeType')" prop="time_range_type"> |
|||
<el-radio-group v-model="formData.time_range_type" :placeholder="t('timeRangeTypePlaceholder')"> |
|||
<el-radio |
|||
v-for="(item, index) in time_range_typeList" |
|||
:key="index" :label="item.value"> |
|||
{{ item.name }} |
|||
</el-radio> |
|||
</el-radio-group> |
|||
</el-form-item> |
|||
|
|||
<el-form-item :label="t('timeRangeStart')" class="input-width"> |
|||
<el-date-picker |
|||
class="flex-1 !flex" |
|||
v-model="formData.time_range_start" |
|||
clearable |
|||
type="datetime" |
|||
value-format="YYYY-MM-DD HH:mm:ss" |
|||
:placeholder="t('timeRangeStartPlaceholder')"> |
|||
</el-date-picker> |
|||
</el-form-item> |
|||
<el-form-item :label="t('timeRangeEnd')" class="input-width"> |
|||
<el-date-picker |
|||
class="flex-1 !flex" |
|||
v-model="formData.time_range_end" |
|||
clearable |
|||
type="datetime" |
|||
value-format="YYYY-MM-DD HH:mm:ss" |
|||
:placeholder="t('timeRangeEndPlaceholder')"> |
|||
</el-date-picker> |
|||
</el-form-item> |
|||
<el-form-item :label="t('fixedTimeRanges')" class="input-width"> |
|||
<el-date-picker |
|||
class="flex-1 !flex" |
|||
v-model="formData.fixed_time_ranges" |
|||
clearable |
|||
type="datetime" |
|||
value-format="YYYY-MM-DD HH:mm:ss" |
|||
:placeholder="t('fixedTimeRangesPlaceholder')"> |
|||
</el-date-picker> |
|||
</el-form-item> |
|||
</el-form> |
|||
|
|||
<template #footer> |
|||
<span class="dialog-footer"> |
|||
<el-button @click="showDialog = false">{{ t('cancel') }}</el-button> |
|||
<el-button type="primary" :loading="loading" @click="confirm(formRef)">{{ |
|||
t('confirm') |
|||
}}</el-button> |
|||
</span> |
|||
</template> |
|||
</el-dialog> |
|||
</template> |
|||
|
|||
<script lang="ts" setup> |
|||
import { ref, reactive, computed, watch } from 'vue' |
|||
import { useDictionary } from '@/app/api/dict' |
|||
import { t } from '@/lang' |
|||
import type { FormInstance } from 'element-plus' |
|||
import { addVenue, editVenue, getVenueInfo, getWithCampusList } from '@/app/api/venue' |
|||
|
|||
let showDialog = ref(false) |
|||
const loading = ref(false) |
|||
|
|||
/** |
|||
* 表单数据 |
|||
*/ |
|||
const initialFormData = { |
|||
id: '', |
|||
campus_id: '', |
|||
venue_name: '', |
|||
capacity: '', |
|||
availability_status: '', |
|||
time_range_type: '', |
|||
time_range_start: '', |
|||
time_range_end: '', |
|||
fixed_time_ranges: '', |
|||
} |
|||
const formData: Record<string, any> = reactive({ ...initialFormData }) |
|||
|
|||
const formRef = ref<FormInstance>() |
|||
|
|||
// 表单验证规则 |
|||
const formRules = computed(() => { |
|||
return { |
|||
campus_id: [ |
|||
{ required: true, message: t('campusIdPlaceholder'), trigger: 'blur' }, |
|||
|
|||
] |
|||
, |
|||
venue_name: [ |
|||
{ required: true, message: t('venueNamePlaceholder'), trigger: 'blur' }, |
|||
|
|||
] |
|||
, |
|||
capacity: [ |
|||
{ required: true, message: t('capacityPlaceholder'), trigger: 'blur' }, |
|||
{ validator: (rule: any, value: string, callback: any) => { if (value && !/^\d{1,500}$/.test(value)) { callback(new Error(t('generateBetween')))} else { callback() }}}, |
|||
] |
|||
, |
|||
availability_status: [ |
|||
{ required: true, message: t('availabilityStatusPlaceholder'), trigger: 'blur' }, |
|||
|
|||
] |
|||
, |
|||
time_range_type: [ |
|||
{ required: true, message: t('timeRangeTypePlaceholder'), trigger: 'blur' }, |
|||
|
|||
] |
|||
, |
|||
time_range_start: [ |
|||
{ required: true, message: t('timeRangeStartPlaceholder'), trigger: 'blur' }, |
|||
|
|||
] |
|||
, |
|||
time_range_end: [ |
|||
{ required: true, message: t('timeRangeEndPlaceholder'), trigger: 'blur' }, |
|||
|
|||
] |
|||
, |
|||
fixed_time_ranges: [ |
|||
{ required: true, message: t('fixedTimeRangesPlaceholder'), trigger: 'blur' }, |
|||
|
|||
] |
|||
, |
|||
} |
|||
}) |
|||
|
|||
const emit = defineEmits(['complete']) |
|||
|
|||
/** |
|||
* 确认 |
|||
* @param formEl |
|||
*/ |
|||
const confirm = async (formEl: FormInstance | undefined) => { |
|||
if (loading.value || !formEl) return |
|||
let save = formData.id ? editVenue : addVenue |
|||
|
|||
await formEl.validate(async (valid) => { |
|||
if (valid) { |
|||
loading.value = true |
|||
|
|||
let data = formData |
|||
|
|||
save(data).then(res => { |
|||
loading.value = false |
|||
showDialog.value = false |
|||
emit('complete') |
|||
}).catch(err => { |
|||
loading.value = false |
|||
}) |
|||
} |
|||
}) |
|||
} |
|||
|
|||
// 获取字典数据 |
|||
let availability_statusList = ref([]) |
|||
const availability_statusDictList = async () => { |
|||
availability_statusList.value = await (await useDictionary('SiteStatus')).data.dictionary |
|||
} |
|||
availability_statusDictList(); |
|||
watch(() => availability_statusList.value, () => { formData.availability_status = availability_statusList.value[0].value }) |
|||
let time_range_typeList = ref([]) |
|||
const time_range_typeDictList = async () => { |
|||
time_range_typeList.value = await (await useDictionary('ALLOTTED_TIME')).data.dictionary |
|||
} |
|||
time_range_typeDictList(); |
|||
watch(() => time_range_typeList.value, () => { formData.time_range_type = time_range_typeList.value[0].value }) |
|||
|
|||
|
|||
const campusIdList = ref([] as any[]) |
|||
const setCampusIdList = async () => { |
|||
campusIdList.value = await (await getWithCampusList({})).data |
|||
} |
|||
setCampusIdList() |
|||
const setFormData = async (row: any = null) => { |
|||
Object.assign(formData, initialFormData) |
|||
loading.value = true |
|||
if(row){ |
|||
const data = await (await getVenueInfo(row.id)).data |
|||
if (data) Object.keys(formData).forEach((key: string) => { |
|||
if (data[key] != undefined) formData[key] = data[key] |
|||
}) |
|||
} |
|||
loading.value = false |
|||
} |
|||
|
|||
// 验证手机号格式 |
|||
const mobileVerify = (rule: any, value: any, callback: any) => { |
|||
if (value && !/^1[3-9]\d{9}$/.test(value)) { |
|||
callback(new Error(t('generateMobile'))) |
|||
} else { |
|||
callback() |
|||
} |
|||
} |
|||
|
|||
// 验证身份证号 |
|||
const idCardVerify = (rule: any, value: any, callback: any) => { |
|||
if (value && !/^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/.test(value)) { |
|||
callback(new Error(t('generateIdCard'))) |
|||
} else { |
|||
callback() |
|||
} |
|||
} |
|||
|
|||
// 验证邮箱号 |
|||
const emailVerify = (rule: any, value: any, callback: any) => { |
|||
if (value && !/\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/.test(value)) { |
|||
callback(new Error(t('generateEmail'))) |
|||
} else { |
|||
callback() |
|||
} |
|||
} |
|||
|
|||
// 验证请输入整数 |
|||
const numberVerify = (rule: any, value: any, callback: any) => { |
|||
if (!Number.isInteger(value)) { |
|||
callback(new Error(t('generateNumber'))) |
|||
} else { |
|||
callback() |
|||
} |
|||
} |
|||
|
|||
defineExpose({ |
|||
showDialog, |
|||
setFormData |
|||
}) |
|||
</script> |
|||
|
|||
<style lang="scss" scoped></style> |
|||
<style lang="scss"> |
|||
.diy-dialog-wrap .el-form-item__label{ |
|||
height: auto !important; |
|||
} |
|||
</style> |
|||
|
|||
@ -1,293 +1,251 @@ |
|||
<template> |
|||
<div class="main-container"> |
|||
<el-card class="box-card !border-none" shadow="never"> |
|||
<div class="flex justify-between items-center"> |
|||
<span class="text-lg">{{ pageName }}</span> |
|||
<el-button type="primary" @click="addEvent"> |
|||
{{ t('addVenue') }} |
|||
</el-button> |
|||
</div> |
|||
|
|||
<el-card |
|||
class="box-card !border-none my-[10px] table-search-wrap" |
|||
shadow="never" |
|||
> |
|||
<el-form |
|||
:inline="true" |
|||
:model="venueTable.searchParam" |
|||
ref="searchFormRef" |
|||
> |
|||
<el-form-item :label="t('campusId')" prop="campus_id"> |
|||
<el-input |
|||
v-model="venueTable.searchParam.campus_id" |
|||
:placeholder="t('campusIdPlaceholder')" |
|||
/> |
|||
</el-form-item> |
|||
<el-form-item :label="t('venueName')" prop="venue_name"> |
|||
<el-input |
|||
v-model="venueTable.searchParam.venue_name" |
|||
:placeholder="t('venueNamePlaceholder')" |
|||
/> |
|||
</el-form-item> |
|||
<el-form-item :label="t('capacity')" prop="capacity"> |
|||
<el-input |
|||
v-model="venueTable.searchParam.capacity" |
|||
:placeholder="t('capacityPlaceholder')" |
|||
/> |
|||
</el-form-item> |
|||
<el-form-item |
|||
:label="t('availabilityStatus')" |
|||
prop="availability_status" |
|||
> |
|||
<el-input |
|||
v-model="venueTable.searchParam.availability_status" |
|||
:placeholder="t('availabilityStatusPlaceholder')" |
|||
/> |
|||
</el-form-item> |
|||
<el-form-item :label="t('timeRangeType')" prop="time_range_type"> |
|||
<el-input |
|||
v-model="venueTable.searchParam.time_range_type" |
|||
:placeholder="t('timeRangeTypePlaceholder')" |
|||
/> |
|||
</el-form-item> |
|||
<el-form-item :label="t('timeRangeStart')" prop="time_range_start"> |
|||
<el-input |
|||
v-model="venueTable.searchParam.time_range_start" |
|||
:placeholder="t('timeRangeStartPlaceholder')" |
|||
/> |
|||
</el-form-item> |
|||
<el-form-item :label="t('timeRangeEnd')" prop="time_range_end"> |
|||
<el-input |
|||
v-model="venueTable.searchParam.time_range_end" |
|||
:placeholder="t('timeRangeEndPlaceholder')" |
|||
/> |
|||
</el-form-item> |
|||
<el-form-item :label="t('fixedTimeRanges')" prop="fixed_time_ranges"> |
|||
<el-input |
|||
v-model="venueTable.searchParam.fixed_time_ranges" |
|||
:placeholder="t('fixedTimeRangesPlaceholder')" |
|||
/> |
|||
</el-form-item> |
|||
|
|||
<el-form-item> |
|||
<el-button type="primary" @click="loadVenueList()">{{ |
|||
t('search') |
|||
}}</el-button> |
|||
<el-button @click="resetForm(searchFormRef)">{{ |
|||
t('reset') |
|||
}}</el-button> |
|||
</el-form-item> |
|||
</el-form> |
|||
</el-card> |
|||
|
|||
<div class="mt-[10px]"> |
|||
<el-table |
|||
:data="venueTable.data" |
|||
size="large" |
|||
v-loading="venueTable.loading" |
|||
> |
|||
<template #empty> |
|||
<span>{{ !venueTable.loading ? t('emptyData') : '' }}</span> |
|||
</template> |
|||
<el-table-column |
|||
prop="campus_id" |
|||
:label="t('campusId')" |
|||
min-width="120" |
|||
:show-overflow-tooltip="true" |
|||
/> |
|||
|
|||
<el-table-column |
|||
prop="venue_name" |
|||
:label="t('venueName')" |
|||
min-width="120" |
|||
:show-overflow-tooltip="true" |
|||
/> |
|||
|
|||
<el-table-column |
|||
prop="capacity" |
|||
:label="t('capacity')" |
|||
min-width="120" |
|||
:show-overflow-tooltip="true" |
|||
/> |
|||
|
|||
<el-table-column |
|||
prop="availability_status" |
|||
:label="t('availabilityStatus')" |
|||
min-width="120" |
|||
:show-overflow-tooltip="true" |
|||
/> |
|||
|
|||
<el-table-column |
|||
prop="time_range_type" |
|||
:label="t('timeRangeType')" |
|||
min-width="120" |
|||
:show-overflow-tooltip="true" |
|||
/> |
|||
|
|||
<el-table-column |
|||
prop="time_range_start" |
|||
:label="t('timeRangeStart')" |
|||
min-width="120" |
|||
:show-overflow-tooltip="true" |
|||
/> |
|||
|
|||
<el-table-column |
|||
prop="time_range_end" |
|||
:label="t('timeRangeEnd')" |
|||
min-width="120" |
|||
:show-overflow-tooltip="true" |
|||
/> |
|||
|
|||
<el-table-column |
|||
prop="fixed_time_ranges" |
|||
:label="t('fixedTimeRanges')" |
|||
min-width="120" |
|||
:show-overflow-tooltip="true" |
|||
/> |
|||
|
|||
<el-table-column |
|||
:label="t('operation')" |
|||
fixed="right" |
|||
min-width="120" |
|||
> |
|||
<template #default="{ row }"> |
|||
<el-button type="primary" link @click="editEvent(row)">{{ |
|||
t('edit') |
|||
}}</el-button> |
|||
<el-button type="primary" link @click="deleteEvent(row.id)">{{ |
|||
t('delete') |
|||
}}</el-button> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
<div class="mt-[16px] flex justify-end"> |
|||
<el-pagination |
|||
v-model:current-page="venueTable.page" |
|||
v-model:page-size="venueTable.limit" |
|||
layout="total, sizes, prev, pager, next, jumper" |
|||
:total="venueTable.total" |
|||
@size-change="loadVenueList()" |
|||
@current-change="loadVenueList" |
|||
/> |
|||
</div> |
|||
</div> |
|||
|
|||
<edit ref="editVenueDialog" @complete="loadVenueList" /> |
|||
</el-card> |
|||
</div> |
|||
</template> |
|||
|
|||
<script lang="ts" setup> |
|||
import { reactive, ref, watch } from 'vue' |
|||
import { t } from '@/lang' |
|||
import { useDictionary } from '@/app/api/dict' |
|||
import { getVenueList, deleteVenue } from '@/app/api/venue' |
|||
import { img } from '@/utils/common' |
|||
import { ElMessageBox, FormInstance } from 'element-plus' |
|||
import Edit from '@/app/views/venue/components/venue-edit.vue' |
|||
import { useRoute } from 'vue-router' |
|||
const route = useRoute() |
|||
const pageName = route.meta.title |
|||
|
|||
let venueTable = reactive({ |
|||
page: 1, |
|||
limit: 10, |
|||
total: 0, |
|||
loading: true, |
|||
data: [], |
|||
searchParam: { |
|||
campus_id: '', |
|||
venue_name: '', |
|||
capacity: '', |
|||
availability_status: '', |
|||
time_range_type: '', |
|||
time_range_start: '', |
|||
time_range_end: '', |
|||
fixed_time_ranges: '', |
|||
}, |
|||
}) |
|||
|
|||
const searchFormRef = ref<FormInstance>() |
|||
|
|||
// 选中数据 |
|||
const selectData = ref<any[]>([]) |
|||
|
|||
// 字典数据 |
|||
|
|||
/** |
|||
* 获取场地列表 |
|||
*/ |
|||
const loadVenueList = (page: number = 1) => { |
|||
venueTable.loading = true |
|||
venueTable.page = page |
|||
|
|||
getVenueList({ |
|||
page: venueTable.page, |
|||
limit: venueTable.limit, |
|||
...venueTable.searchParam, |
|||
}) |
|||
.then((res) => { |
|||
venueTable.loading = false |
|||
venueTable.data = res.data.data |
|||
venueTable.total = res.data.total |
|||
}) |
|||
.catch(() => { |
|||
venueTable.loading = false |
|||
}) |
|||
} |
|||
loadVenueList() |
|||
|
|||
const editVenueDialog: Record<string, any> | null = ref(null) |
|||
|
|||
/** |
|||
* 添加场地 |
|||
*/ |
|||
const addEvent = () => { |
|||
editVenueDialog.value.setFormData() |
|||
editVenueDialog.value.showDialog = true |
|||
} |
|||
|
|||
/** |
|||
* 编辑场地 |
|||
* @param data |
|||
*/ |
|||
const editEvent = (data: any) => { |
|||
editVenueDialog.value.setFormData(data) |
|||
editVenueDialog.value.showDialog = true |
|||
} |
|||
|
|||
/** |
|||
* 删除场地 |
|||
*/ |
|||
const deleteEvent = (id: number) => { |
|||
ElMessageBox.confirm(t('venueDeleteTips'), t('warning'), { |
|||
confirmButtonText: t('confirm'), |
|||
cancelButtonText: t('cancel'), |
|||
type: 'warning', |
|||
}).then(() => { |
|||
deleteVenue(id) |
|||
.then(() => { |
|||
loadVenueList() |
|||
}) |
|||
.catch(() => {}) |
|||
}) |
|||
} |
|||
|
|||
const resetForm = (formEl: FormInstance | undefined) => { |
|||
if (!formEl) return |
|||
formEl.resetFields() |
|||
loadVenueList() |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
/* 多行超出隐藏 */ |
|||
.multi-hidden { |
|||
word-break: break-all; |
|||
text-overflow: ellipsis; |
|||
overflow: hidden; |
|||
display: -webkit-box; |
|||
-webkit-line-clamp: 2; |
|||
-webkit-box-orient: vertical; |
|||
} |
|||
</style> |
|||
<template> |
|||
<div class="main-container"> |
|||
<el-card class="box-card !border-none" shadow="never"> |
|||
|
|||
<div class="flex justify-between items-center"> |
|||
<span class="text-lg">{{pageName}}</span> |
|||
<el-button type="primary" @click="addEvent"> |
|||
{{ t('addVenue') }} |
|||
</el-button> |
|||
</div> |
|||
|
|||
<el-card class="box-card !border-none my-[10px] table-search-wrap" shadow="never"> |
|||
<el-form :inline="true" :model="venueTable.searchParam" ref="searchFormRef"> |
|||
|
|||
<el-form-item :label="t('campusId')" prop="campus_id"> |
|||
<el-select class="w-[280px]" v-model="venueTable.searchParam.campus_id" clearable :placeholder="t('campusIdPlaceholder')"> |
|||
<el-option |
|||
v-for="(item, index) in campusIdList" |
|||
:key="index" |
|||
:label="item['campus_name']" |
|||
:value="item['id']" |
|||
/> |
|||
</el-select> |
|||
</el-form-item> |
|||
|
|||
<el-form-item :label="t('venueName')" prop="venue_name"> |
|||
<el-input v-model="venueTable.searchParam.venue_name" :placeholder="t('venueNamePlaceholder')" /> |
|||
</el-form-item> |
|||
|
|||
<el-form-item :label="t('availabilityStatus')" prop="availability_status"> |
|||
<el-select class="w-[280px]" v-model="venueTable.searchParam.availability_status" clearable :placeholder="t('availabilityStatusPlaceholder')"> |
|||
<el-option label="全部" value=""></el-option> |
|||
<el-option |
|||
v-for="(item, index) in availability_statusList" |
|||
:key="index" |
|||
:label="item.name" |
|||
:value="item.value" |
|||
/> |
|||
</el-select> |
|||
</el-form-item> |
|||
|
|||
|
|||
<el-form-item :label="t('timeRangeType')" prop="time_range_type"> |
|||
<el-select class="w-[280px]" v-model="venueTable.searchParam.time_range_type" clearable :placeholder="t('timeRangeTypePlaceholder')"> |
|||
<el-option label="全部" value=""></el-option> |
|||
<el-option |
|||
v-for="(item, index) in time_range_typeList" |
|||
:key="index" |
|||
:label="item.name" |
|||
:value="item.value" |
|||
/> |
|||
</el-select> |
|||
</el-form-item> |
|||
|
|||
<el-form-item :label="t('createdAt')" prop="created_at"> |
|||
<el-date-picker v-model="venueTable.searchParam.created_at" type="datetimerange" format="YYYY-MM-DD hh:mm:ss" |
|||
:start-placeholder="t('startDate')" :end-placeholder="t('endDate')" /> |
|||
</el-form-item> |
|||
|
|||
<el-form-item :label="t('updatedAt')" prop="updated_at"> |
|||
<el-date-picker v-model="venueTable.searchParam.updated_at" type="datetimerange" format="YYYY-MM-DD hh:mm:ss" |
|||
:start-placeholder="t('startDate')" :end-placeholder="t('endDate')" /> |
|||
</el-form-item> |
|||
|
|||
<el-form-item> |
|||
<el-button type="primary" @click="loadVenueList()">{{ t('search') }}</el-button> |
|||
<el-button @click="resetForm(searchFormRef)">{{ t('reset') }}</el-button> |
|||
</el-form-item> |
|||
</el-form> |
|||
</el-card> |
|||
|
|||
<div class="mt-[10px]"> |
|||
<el-table :data="venueTable.data" size="large" v-loading="venueTable.loading"> |
|||
<template #empty> |
|||
<span>{{ !venueTable.loading ? t('emptyData') : '' }}</span> |
|||
</template> |
|||
<el-table-column prop="campus_id_name" :label="t('campusId')" min-width="120" :show-overflow-tooltip="true"/> |
|||
|
|||
<el-table-column prop="venue_name" :label="t('venueName')" min-width="120" :show-overflow-tooltip="true"/> |
|||
|
|||
<el-table-column prop="capacity" :label="t('capacity')" min-width="120" :show-overflow-tooltip="true"/> |
|||
|
|||
<el-table-column :label="t('availabilityStatus')" min-width="180" align="center" :show-overflow-tooltip="true"> |
|||
<template #default="{ row }"> |
|||
<div v-for="(item, index) in availability_statusList"> |
|||
<div v-if="item.value == row.availability_status">{{ item.name }}</div> |
|||
</div> |
|||
</template> |
|||
</el-table-column> |
|||
|
|||
<el-table-column :label="t('timeRangeType')" min-width="180" align="center" :show-overflow-tooltip="true"> |
|||
<template #default="{ row }"> |
|||
<div v-for="(item, index) in time_range_typeList"> |
|||
<div v-if="item.value == row.time_range_type">{{ item.name }}</div> |
|||
</div> |
|||
</template> |
|||
</el-table-column> |
|||
|
|||
<el-table-column prop="created_at" :label="t('createdAt')" min-width="120" :show-overflow-tooltip="true"/> |
|||
|
|||
<el-table-column prop="updated_at" :label="t('updatedAt')" min-width="120" :show-overflow-tooltip="true"/> |
|||
|
|||
<el-table-column :label="t('operation')" fixed="right" min-width="120"> |
|||
<template #default="{ row }"> |
|||
<el-button type="primary" link @click="editEvent(row)">{{ t('edit') }}</el-button> |
|||
<el-button type="primary" link @click="deleteEvent(row.id)">{{ t('delete') }}</el-button> |
|||
</template> |
|||
</el-table-column> |
|||
|
|||
</el-table> |
|||
<div class="mt-[16px] flex justify-end"> |
|||
<el-pagination v-model:current-page="venueTable.page" v-model:page-size="venueTable.limit" |
|||
layout="total, sizes, prev, pager, next, jumper" :total="venueTable.total" |
|||
@size-change="loadVenueList()" @current-change="loadVenueList" /> |
|||
</div> |
|||
</div> |
|||
|
|||
<edit ref="editVenueDialog" @complete="loadVenueList" /> |
|||
</el-card> |
|||
</div> |
|||
</template> |
|||
|
|||
<script lang="ts" setup> |
|||
import { reactive, ref, watch } from 'vue' |
|||
import { t } from '@/lang' |
|||
import { useDictionary } from '@/app/api/dict' |
|||
import { getVenueList, deleteVenue, getWithCampusList } from '@/app/api/venue' |
|||
import { img } from '@/utils/common' |
|||
import { ElMessageBox,FormInstance } from 'element-plus' |
|||
import Edit from '@/app/views/venue/components/venue-edit.vue' |
|||
import { useRoute } from 'vue-router' |
|||
const route = useRoute() |
|||
const pageName = route.meta.title; |
|||
|
|||
let venueTable = reactive({ |
|||
page: 1, |
|||
limit: 10, |
|||
total: 0, |
|||
loading: true, |
|||
data: [], |
|||
searchParam:{ |
|||
"campus_id":"", |
|||
"venue_name":"", |
|||
"capacity":"", |
|||
"availability_status":"", |
|||
"time_range_type":"", |
|||
"created_at":"", |
|||
"updated_at":"" |
|||
} |
|||
}) |
|||
|
|||
const searchFormRef = ref<FormInstance>() |
|||
|
|||
// 选中数据 |
|||
const selectData = ref<any[]>([]) |
|||
|
|||
// 字典数据 |
|||
const availability_statusList = ref([] as any[]) |
|||
const availability_statusDictList = async () => { |
|||
availability_statusList.value = await (await useDictionary('SiteStatus')).data.dictionary |
|||
} |
|||
availability_statusDictList(); |
|||
const time_range_typeList = ref([] as any[]) |
|||
const time_range_typeDictList = async () => { |
|||
time_range_typeList.value = await (await useDictionary('ALLOTTED_TIME')).data.dictionary |
|||
} |
|||
time_range_typeDictList(); |
|||
|
|||
/** |
|||
* 获取场地列表 |
|||
*/ |
|||
const loadVenueList = (page: number = 1) => { |
|||
venueTable.loading = true |
|||
venueTable.page = page |
|||
|
|||
getVenueList({ |
|||
page: venueTable.page, |
|||
limit: venueTable.limit, |
|||
...venueTable.searchParam |
|||
}).then(res => { |
|||
venueTable.loading = false |
|||
venueTable.data = res.data.data |
|||
venueTable.total = res.data.total |
|||
}).catch(() => { |
|||
venueTable.loading = false |
|||
}) |
|||
} |
|||
loadVenueList() |
|||
|
|||
const editVenueDialog: Record<string, any> | null = ref(null) |
|||
|
|||
/** |
|||
* 添加场地 |
|||
*/ |
|||
const addEvent = () => { |
|||
editVenueDialog.value.setFormData() |
|||
editVenueDialog.value.showDialog = true |
|||
} |
|||
|
|||
/** |
|||
* 编辑场地 |
|||
* @param data |
|||
*/ |
|||
const editEvent = (data: any) => { |
|||
editVenueDialog.value.setFormData(data) |
|||
editVenueDialog.value.showDialog = true |
|||
} |
|||
|
|||
/** |
|||
* 删除场地 |
|||
*/ |
|||
const deleteEvent = (id: number) => { |
|||
ElMessageBox.confirm(t('venueDeleteTips'), t('warning'), |
|||
{ |
|||
confirmButtonText: t('confirm'), |
|||
cancelButtonText: t('cancel'), |
|||
type: 'warning', |
|||
} |
|||
).then(() => { |
|||
deleteVenue(id).then(() => { |
|||
loadVenueList() |
|||
}).catch(() => { |
|||
}) |
|||
}) |
|||
} |
|||
|
|||
|
|||
const campusIdList = ref([]) |
|||
const setCampusIdList = async () => { |
|||
campusIdList.value = await (await getWithCampusList({})).data |
|||
} |
|||
setCampusIdList() |
|||
|
|||
const resetForm = (formEl: FormInstance | undefined) => { |
|||
if (!formEl) return |
|||
formEl.resetFields() |
|||
loadVenueList() |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
/* 多行超出隐藏 */ |
|||
.multi-hidden { |
|||
word-break: break-all; |
|||
text-overflow: ellipsis; |
|||
overflow: hidden; |
|||
display: -webkit-box; |
|||
-webkit-line-clamp: 2; |
|||
-webkit-box-orient: vertical; |
|||
} |
|||
</style> |
|||
|
|||
Loading…
Reference in new issue