feat: 新增任务操作功能

src/renderer/views/home/ChatBox.vue

@@ -69,8 +69,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, defineProps, defineEmits, watch, nextTick } from 'vue'
-import { onMounted, onUnmounted } from "vue";
+import { onMounted, onUnmounted, ref, watch, nextTick } from "vue";
 import { WebSocketManager } from "@common/WebSocketManager";
 import { MessageRole, ChatMessage } from "./model/ChatModel";
 import { IdUtils } from "@common/index";

src/renderer/views/home/TaskCenter.vue

@@ -2,14 +2,14 @@
     <div class="flex-1 pb-6">
         <div class="flex justify-between items-center py-4">
             <h3 class="text-base font-semibold">任务中心</h3>
-            <a class="text-[#3b82f6] text-[13px] cursor-pointer">
+            <!-- <a class="text-[#3b82f6] text-[13px] cursor-pointer">
                 编辑
-            </a>
+            </a> -->
         </div>
 
         <div class="grid grid-cols-2 gap-4 max-[800px]:grid-cols-1">
             <div v-for="item in taskList" :key="item.id" class="flex gap-3 items-start p-3.5
-                  rounded-[10px] border border-[#dfeaf6] bg-white cursor-pointer">
+                  rounded-[10px] border border-[#dfeaf6] bg-white cursor-pointer" @click="handleTaskItem(item)">
                 <div class="w-11 h-11 bg-[#EFF6FF] rounded-lg
                     border border-dashed border-[#9fc0e8]
                     flex items-center justify-center
@@ -32,7 +32,18 @@
 
 <script setup lang="ts">
 import { computed } from 'vue'
-import { taskCenterList } from '@constant/taskCenterList'
+import { taskCenterList, taskCenterItem } from '@constant/taskCenterList'
+import emitter from '@utils/emitter'
 
 const taskList = computed(() => taskCenterList)
+
+// 点击任务项
+const handleTaskItem = (item: taskCenterItem) => {
+    if (item.type === 'sale') {
+        return
+    }
+
+    // 操作房型
+    emitter.emit('OPERATION_CHANNEL', item)
+}
 </script>

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

@@ -0,0 +1,79 @@
+<template>
+  <el-dialog v-model="isVisible" :title="title" width="480" align-center>
+    <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-select>
+      </el-form-item>
+      <el-form-item label="选择日期" prop="date">
+        <el-date-picker v-model="form.date" type="date" value-format="YYYY-MM-DD" placeholder="请选择日期"
+          style="width: 100%">
+        </el-date-picker>
+      </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 { taskCenterItem } from '@constant/taskCenterList'
+
+const isVisible = ref(false)
+const title = ref('')
+const form = ref({
+  roomType: '',
+  date: '',
+  operation: '',
+})
+const rules = ref({
+  roomType: [
+    { required: true, message: '请选择房型', trigger: 'blur' },
+  ],
+  date: [
+    { required: true, message: '请选择日期', trigger: 'blur' },
+  ],
+})
+
+// 打开弹窗
+const open = ({ type }: taskCenterItem) => {
+  title.value = type === 'open' ? '开启渠道房型' : '关闭渠道房型'
+  isVisible.value = true
+  form.value.operation = type
+}
+
+// 关闭弹窗
+const close = () => {
+  isVisible.value = false
+}
+
+// 重置form
+const reset = () => {
+  form.value.roomType = ''
+  form.value.date = ''
+}
+
+// 取消操作
+const cancel = () => {
+  close()
+  reset()
+}
+
+// 确认操作
+const confirm = () => {
+  close()
+  console.log(form.value)
+  window.api.taskOperation(form.value)
+}
+
+defineExpose({
+  open,
+  close,
+})
+</script>

src/renderer/views/home/index.vue

@@ -2,28 +2,42 @@
   <layout>
     <div class="flex h-full w-full flex-col md:flex-row">
       <ChatHistory class="flex-none w-50" @new-chat="guide = true" @select-chat="handleSelectChat" />
+
       <div class="flex-1 mr-2 overflow-hidden bg-white rounded-xl">
         <ChatBox v-model:guide="guide" :conversationId="selectedConversationId" />
       </div>
+
       <TaskList />
     </div>
+
+    <TaskOperationDialog ref="taskOperationDialogRef" />
   </layout>
 </template>
 
 <script setup lang="ts">
+import { ref } from 'vue'
 import TaskList from '@renderer/components/TaskList/index.vue'
+import TaskOperationDialog from '@renderer/views/home/components/TaskOperationDialog.vue'
 import ChatHistory from './ChatHistory.vue'
 import ChatBox from './ChatBox.vue'
-import { ref } from 'vue'
-/// 是否显示引导页
-const guide = ref(true)
-/// 选择的历史会话ID
-const selectedConversationId = ref('')
+import emitter from '@utils/emitter'
 
-/// 选择历史会话
+// 是否显示引导页
+const guide = ref(true)
+// 选择的历史会话ID
+const selectedConversationId = ref('')
+// 任务操作弹窗引用
+const taskOperationDialogRef = ref()
+
+
+// 选择历史会话
 const handleSelectChat = (conversationId: string) => {
   guide.value = false;
   selectedConversationId.value = conversationId;
 };
 
+// 监听任务操作弹窗关闭事件
+emitter.on('OPERATION_CHANNEL', (item) => {
+  taskOperationDialogRef.value?.open(item);
+});
 </script>