zn-ai/src/pages/home/components/TaskOperationDialog.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 class="cancel-btn" @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>

<style scoped>
.dark-dialog {
  background-color: #F4F3EB !important;
  border-radius: 20px !important;
  overflow: hidden;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15) !important;
}

.dark .dark-dialog {
  background-color: #1f1f22 !important;
}

.dark-dialog :deep(.el-dialog__header) {
  margin-right: 0;
  padding: 20px 24px 16px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.dark .dark-dialog :deep(.el-dialog__header) {
  border-bottom-color: rgba(255, 255, 255, 0.06);
}

.dark-dialog :deep(.el-dialog__title) {
  font-size: 18px;
  font-weight: 600;
  color: #171717;
}

.dark .dark-dialog :deep(.el-dialog__title) {
  color: #f3f4f6;
}

.dark-dialog :deep(.el-dialog__body) {
  padding: 0 !important;
}

.dark-form :deep(.el-form-item__label) {
  font-weight: 500;
  color: #4B4B4B !important;
}

.dark .dark-form :deep(.el-form-item__label) {
  color: #9ca3af !important;
}

.dark-form :deep(.el-input__wrapper) {
  background-color: #EDECE4 !important;
  border-radius: 12px !important;
  box-shadow: none !important;
  border: 1px solid transparent !important;
}

.dark .dark-form :deep(.el-input__wrapper) {
  background-color: #222225 !important;
}

.dark-form :deep(.el-input__wrapper.is-focus) {
  border-color: #3B6DE8 !important;
}

.dark-form :deep(.el-input__inner) {
  color: #171717 !important;
}

.dark .dark-form :deep(.el-input__inner) {
  color: #f3f4f6 !important;
}

.dark-form :deep(.el-input__inner::placeholder) {
  color: #99A0AE !important;
}

.dark .dark-form :deep(.el-input__inner::placeholder) {
  color: #6b7280 !important;
}

.dialog-footer {
  padding: 16px 24px 20px;
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

.cancel-btn {
  background-color: #EDECE4 !important;
  border-color: transparent !important;
  color: #4B4B4B !important;
}

.cancel-btn:hover {
  background-color: #E5E4DC !important;
  color: #171717 !important;
}

.dark .cancel-btn {
  background-color: #222225 !important;
  color: #9ca3af !important;
}

.dark .cancel-btn:hover {
  background-color: #2a2a2d !important;
  color: #f3f4f6 !important;
}
</style>