feat: 开关房功能开发

src/renderer/views/home/components/TaskOperationDialog.vue

@@ -3,12 +3,11 @@
     <el-form :model="form" :rules="rules" ref="formRef" label-position="top" class="pl-4 pr-4 pt-4">
       <el-form-item label="选择房型" prop="roomType">
         <el-select v-model="form.roomType" placeholder="请选择房型">
-          <el-option label="单人间" value="single"></el-option>
-          <el-option label="双人间" value="double"></el-option>
+          <el-option v-for="item in roomList" :label="item.pmsName" :value="item.id" />
         </el-select>
       </el-form-item>
-      <el-form-item label="选择日期" prop="date">
-        <el-date-picker v-model="ranger" type="daterange" value-format="YYYY-MM-DD" placeholder="请选择日期"
+      <el-form-item label="选择日期" prop="range">
+        <el-date-picker v-model="form.range" type="daterange" value-format="YYYY-MM-DD" placeholder="请选择日期"
           style="width: 100%">
         </el-date-picker>
       </el-form-item>
@@ -24,30 +23,37 @@
 
 <script setup lang="ts">
 import { taskCenterItem } from '@constant/taskCenterList'
+import { hotelStaffTypeMappingListUsingPost } from '@api/index'
 
 const isVisible = ref(false)
 const title = ref('')
+const formRef = ref()
 const form = ref({
   roomType: '',
-  startTime: '',
-  endTime: '',
   operation: '',
+  range: [],
 })
 const rules = ref({
   roomType: [
     { required: true, message: '请选择房型', trigger: 'blur' },
   ],
-  ranger: [
-    { required: true, message: '请选择日期范围', trigger: 'blur' },
+  range: [
+    {
+      required: true,
+      message: '请选择日期范围',
+      trigger: 'change',
+      type: 'array'
+    },
   ],
 })
-const ranger = ref([])
+
 
 // 打开弹窗
 const open = ({ type }: taskCenterItem) => {
   title.value = type === 'open' ? '开启渠道房型' : '关闭渠道房型'
   isVisible.value = true
   form.value.operation = type
+  getRoomTypeList()
 }
 
 // 关闭弹窗
@@ -58,9 +64,9 @@ const close = () => {
 // 重置form
 const reset = () => {
   form.value.roomType = ''
-  form.value.startTime = ''
-  form.value.endTime = ''
-  ranger.value = []
+  form.value.range = []
+
+  formRef.value.resetFields()
 }
 
 // 取消操作
@@ -71,14 +77,33 @@ const cancel = () => {
 
 // 确认操作
 const confirm = () => {
-  close()
-  form.value.startTime = ranger.value[0]
-  form.value.endTime = ranger.value[1]
-  console.log(form.value)
-  /**
-   * 坑：传给进程的参数不能是ref包裹的reactive对象
-  */
-  window.api.executeScript({ ...form.value })
+  formRef.value.validate((valid: boolean) => {
+    if (!valid) {
+      return
+    }
+
+    close()
+    console.log(form.value)
+    const options = {
+      roomType: form.value.roomType,
+      startTime: form.value.range[0],
+      endTime: form.value.range[1],
+      operation: form.value.operation,
+    }
+    /**
+     * 坑：传给进程的参数不能是ref包裹的reactive对象
+    */
+    window.api.executeScript(options)
+
+    reset()
+  })
+}
+
+// 获取房型列表
+const roomList: any = ref([])
+const getRoomTypeList = async () => {
+  const res = await hotelStaffTypeMappingListUsingPost({ body: {} })
+  roomList.value = res.data
 }
 
 defineExpose({