智能体管理的页面开发和功能开发

liudong

2024-08-02 3a022dc2caa78267a681824ea1c303f140cd6797

 src/views/session/sessionManager/components/addSession.vue

@@ -1,34 +1,75 @@
<script setup lang="ts">
    import { defineProps ,ref,defineEmits} from 'vue';
    import { defineProps,ref,defineEmits, onMounted } from 'vue';
    import { Message } from '@arco-design/web-vue';
    import { addSessionApi }from '@/api/session';
    import { addSessionApi ,getDialogListApi }from '@/api/session';
    const props=defineProps({
        modalObj:Object
    });
    const conversation_name=ref('');
    const conversation=ref({ dialog_id:'', conversation_desc:'' });
    const dialogList=ref([]);
    const emit = defineEmits(['addSession']);
    const handleOk=async ()=>{
        if(conversation_name.value){
            const {code}=await addSessionApi({conversation_name:conversation_name.value});
            if(code===200){
                Message.success('添加成功');
                emit('addSession')
            }
        }else{
            Message.warning('会话名称不能为空');
        }
    const queryDialogList=async ()=>{
      const { code, data } = await getDialogListApi();
      if(code===200){
        dialogList.value = data;
      }
    };

   const  rules = {
     dialog_id: [
       {
         required: true,
         message: '智能助手不能为空',
       },
     ],
     conversation_desc: [
       {
         required: true,
         message: '描述不能为空',
       }
     ]
   }
    onMounted(()=>{
      queryDialogList();
    });
    const formRef = ref();
    const handleOk=()=>{
      formRef.value.validate().then(async(res)=>{
        if(!res){
           const { code }=await addSessionApi({ ...conversation.value });
           if(code===200){
             Message.success('添加成功');
             emit('addSession');
             setTimeout(()=>{
               props.modalObj.add=false;
             },500);
           }else{
             Message.warning('添加失败');
           }
         }
      });

      return false;
    }
    const destroyData = ()=>{
      formRef.value.resetFields();
    }
</script>

<template>
    <div>
        <a-modal v-model:visible="modalObj.add" @ok="handleOk" @cancel="modalObj.add=false">
        <a-modal v-model:visible="modalObj.add" @before-ok="handleOk" @cancel="modalObj.add=false"  @before-close="destroyData">
            <template #title>
                新增会话
            </template>
            <a-form>
                <a-form-item label="会话名称:">
                    <a-input placeholder="请输入会话名称" v-model="conversation_name" style="width: 80%"></a-input>
            <a-form ref="formRef" :model="conversation" :rules="rules">
                <a-form-item label="助手关联:" field="dialog_id" @submit="handleSubmit">
                    <a-select style="width: 80%" v-model="conversation.dialog_id" placeholder="请选择关联助手">
                        <a-option v-for="dialog in dialogList" :key="dialog.id" :value="dialog.id">{{dialog.name}}</a-option>
                    </a-select>
                </a-form-item>
                <a-form-item label="描述:" field="conversation_desc">
                    <a-textarea placeholder="请输入描述" :max-length="100" show-word-limit   :auto-size="{minRows:4,maxRows:5}" v-model="conversation.conversation_desc" style="width: 80%"></a-textarea>
                </a-form-item>
            </a-form>
        </a-modal>