feat: enhance TaskOperationDialog with improved form labels and structure

src/pages/home/components/TaskOperationDialog.vue

@@ -1,16 +1,34 @@
 <template>
-  <el-dialog v-model="isVisible" :title="title" width="480" align-center class="dark-dialog">
+  <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 label="选择房型" prop="roomType">
+      <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" />
+          <el-option v-for="item in roomList" :label="item.pmsName" :value="item.id" :key="item.id" />
         </el-select>
       </el-form-item>
-      <el-form-item label="选择日期" prop="range">
+      <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">
@@ -22,17 +40,17 @@
 </template>
 
 <script setup lang="ts">
-import { taskCenterItem } from '@constant/taskCenterList'
 import { hotelStaffTypeMappingListUsingPost } from '@api/index'
+import { ref } from 'vue'
 
 const isVisible = ref(false)
 const roomList: any = ref([])
-const title = ref('')
+const title = ref('渠道房型操作')
 const formRef = ref()
 const form = ref({
   roomType: '',
   operation: '',
-  range: [],
+  range: []
 })
 const rules = ref({
   roomType: [
@@ -46,15 +64,16 @@ const rules = ref({
       type: 'array'
     },
   ],
+  operation: [
+    { required: true, message: '请选择操作', trigger: 'blur' },
+  ]
 })
 
 
 // 打开弹窗
-const open = ({ type }: taskCenterItem) => {
-  title.value = type === 'open' ? '开启渠道房型' : '关闭渠道房型'
+const open = async () => {
+  await getRoomTypeList()
   isVisible.value = true
-  form.value.operation = type
-  getRoomTypeList()
 }
 
 // 关闭弹窗