139 lines
3.3 KiB
Vue
139 lines
3.3 KiB
Vue
<template>
|
||
<el-dialog v-model="isVisible" width="480" align-center class="dark-dialog">
|
||
<template #title>
|
||
<span>{{ title }}</span>
|
||
</template>
|
||
<el-form :model="form" :rules="rules" ref="formRef" label-position="top" class="pl-4 pr-4 pt-4 dark-form">
|
||
<el-form-item prop="roomType">
|
||
<template #label>
|
||
<span>选择房型</span>
|
||
</template>
|
||
<el-select v-model="form.roomType" placeholder="请选择房型">
|
||
<el-option v-for="item in roomList" :label="item.pmsName" :value="item.id" :key="item.id" />
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item prop="range">
|
||
<template #label>
|
||
<span>选择日期范围</span>
|
||
</template>
|
||
<el-date-picker v-model="form.range" type="daterange" value-format="YYYY-MM-DD" placeholder="请选择日期"
|
||
style="width: 100%">
|
||
</el-date-picker>
|
||
</el-form-item>
|
||
<el-form-item prop="operation">
|
||
<template #label>
|
||
<span>选择操作</span>
|
||
</template>
|
||
<el-select v-model="form.operation" placeholder="请选择操作">
|
||
<el-option label="开启" value="open" />
|
||
<el-option label="关闭" value="close" />
|
||
</el-select>
|
||
</el-form-item>
|
||
</el-form>
|
||
<template #footer>
|
||
<div class="dialog-footer">
|
||
<el-button @click="cancel">取消</el-button>
|
||
<el-button type="primary" @click="confirm">确认</el-button>
|
||
</div>
|
||
</template>
|
||
</el-dialog>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { hotelStaffTypeMappingListUsingPost } from '@api/index'
|
||
import { ref } from 'vue'
|
||
|
||
const isVisible = ref(false)
|
||
const roomList: any = ref([])
|
||
const title = ref('渠道房型操作')
|
||
const formRef = ref()
|
||
const form = ref({
|
||
roomType: '',
|
||
operation: '',
|
||
range: []
|
||
})
|
||
const rules = ref({
|
||
roomType: [
|
||
{ required: true, message: '请选择房型', trigger: 'blur' },
|
||
],
|
||
range: [
|
||
{
|
||
required: true,
|
||
message: '请选择日期范围',
|
||
trigger: 'change',
|
||
type: 'array'
|
||
},
|
||
],
|
||
operation: [
|
||
{ required: true, message: '请选择操作', trigger: 'blur' },
|
||
]
|
||
})
|
||
|
||
|
||
// 打开弹窗
|
||
const open = async () => {
|
||
await getRoomTypeList()
|
||
isVisible.value = true
|
||
}
|
||
|
||
// 关闭弹窗
|
||
const close = () => {
|
||
isVisible.value = false
|
||
}
|
||
|
||
// 重置form
|
||
const reset = () => {
|
||
form.value.roomType = ''
|
||
form.value.range = []
|
||
|
||
formRef.value.resetFields()
|
||
}
|
||
|
||
// 取消操作
|
||
const cancel = () => {
|
||
close()
|
||
reset()
|
||
}
|
||
|
||
// 确认操作
|
||
const confirm = () => {
|
||
formRef.value.validate((valid: boolean) => {
|
||
if (!valid) {
|
||
return
|
||
}
|
||
|
||
close()
|
||
|
||
// 将roomList.value数组处理成标准数组
|
||
const newList = roomList.value.map((item: any) => ({ ...item }))
|
||
|
||
const options = {
|
||
roomType: form.value.roomType,
|
||
startTime: form.value.range[0],
|
||
endTime: form.value.range[1],
|
||
operation: form.value.operation,
|
||
roomList: newList
|
||
}
|
||
|
||
console.log(options)
|
||
/**
|
||
* 坑：传给进程的参数不能是ref包裹的reactive对象
|
||
*/
|
||
window.api.executeScript(options)
|
||
|
||
reset()
|
||
})
|
||
}
|
||
|
||
// 获取房型列表
|
||
const getRoomTypeList = async () => {
|
||
const res = await hotelStaffTypeMappingListUsingPost({ body: {} })
|
||
roomList.value = res.data
|
||
}
|
||
|
||
defineExpose({
|
||
open,
|
||
close,
|
||
})
|
||
</script>
|