fix: 编辑接口对接

zhangxiao

2024-08-06 e751c02c93e2f2eb59a479788c174672a41d5918

 src/views/dmx/IntelligentAgent/components/editAgent.vue

@@ -1,30 +1,36 @@

<template>
  <a-button  v-if="typeAngint=='edit'" type="text" size="small" @click="editClick">
  <a-button
    v-if="typeAngint == 'edit'"
    type="text"
    size="small"
    @click="editClick"
  >
    <template #icon>
      <icon-tool />
    </template>
  </a-button>
<!--  <a-button v-if="typeAngint=='add'" style="margin-left: 10px" type="primary" @click="handleClick">确定</a-button>-->
  <a-modal v-model:visible="visible" title=""
           @before-open="handleOpened"
           @cancel="handleCancel"
           :footer="false"
           title-align="start"
           fullscreen
  <!--  <a-button v-if="typeAngint=='add'" style="margin-left: 10px" type="primary" @click="handleClick">确定</a-button>-->
  <a-modal
    v-model:visible="visible"
    title=""
    @before-open="handleOpened"
    @cancel="handleCancel"
    :footer="false"
    title-align="start"
    fullscreen
  >
  <div class="main-container">
    <div class="main-container-lf">
      <div style="padding: 10px;font-size: 16px;background:#eeeeee;">智能体配置</div>
      <div style="padding: 10px;font-size: 16px;background: var(--color-neutral-3);">智能体配置</div>
      <div style="display: flex;width: 100%;" :style="{height:height}">
        <div style="width: 50%;height: 100%">
          <div style="padding: 10px;font-size: 12px;color: #2a2a2b;">智能体画像</div>
          <div>
            <a-textarea v-model="system" placeholder="" disabled style="height: 400px;background: #ffffff;color: #666666"  />
            <a-textarea v-model="system" placeholder="" disabled style="height: 400px;"  />
          </div>

        </div>
        <div style="background:#eeeeee;width: 50%;">
        <div style="width: 50%;border: 1px solid var(--color-neutral-3);background:  var(--color-neutral-3)">
          <a-form ref="formRef" :rules="rules" :model="form" @submit="handleSubmit"  layout="vertical" >
            <a-collapse :default-active-key="['1']">
              <a-collapse-item header="基础信息" key="0" v-if="typeAngint == 'edit'">
@@ -33,277 +39,289 @@
              <a-collapse-item header="AI模型配置" key="1">
                <a-space direction="vertical" size="large">
                  <a-select :size="'large'" v-model="form.llm_id" :style="{width:'25rem'}" placeholder="请选择 ...">
                    <a-optgroup  :label="index" v-for="(item,index) in modelList" :key=index>
                    <a-optgroup
                      :label="index"
                      v-for="(item, index) in modelList"
                      :key="index"
                    >
                      <a-option
                        v-for="(obj) in item"
                        :key='obj.fid'
                        v-for="obj in item"
                        :key="obj.fid"
                        :disabled="!obj.available"
                        :value="obj.llm_id"
                      >
                        {{obj.llm_name}}
                        {{ obj.llm_name }}
                      </a-option>
                    </a-optgroup>
                    </a-select>
                  </a-space>
                </a-collapse-item>
                <a-collapse-item header="开场引导" :key="'2'" disabled>
                </a-collapse-item>
                <a-collapse-item header="知识库" key="3">
                  <a-select
                    v-model="form.kb_ids"
                    :style="{ width: '25rem' }"
                    placeholder="请选择 ..."
                    multiple
                  >
                    <a-option
                      v-for="item in tabs"
                      :key="item.id"
                      :value="item.id"
                      >{{ item.name }}</a-option
                    >
                  </a-select>
                </a-space>
              </a-collapse-item>
              <a-collapse-item header="开场引导" :key="'2'" disabled>
                </a-collapse-item>
                <a-collapse-item header="工具" key="4" disabled>
                </a-collapse-item>
                <a-collapse-item header="工作流" key="5" disabled>
                </a-collapse-item>
              </a-collapse>

              </a-collapse-item>
              <a-collapse-item header="知识库" key="3">
                <a-select v-model="form.kb_ids" :style="{width:'25rem'}" placeholder="请选择 ..." multiple >
                  <a-option v-for="(item) in tabs" :key="item.id"  :value="item.id">{{item.name}}</a-option>
                </a-select>
              </a-collapse-item>
              <a-collapse-item header="工具" key="4" disabled>
              </a-collapse-item>
              <a-collapse-item header="工作流" key="5" disabled>
              </a-collapse-item>
            </a-collapse>
              <a-form-item>
                <div
                  style="
                    position: absolute;
                    right: 10px;
                    top: 0px;
                    z-index: 99999;
                  "
                >
                  <!--                <a-button @click="visible = false">取消</a-button>-->
                  <a-button
                    style="margin-left: 10px"
                    type="primary"
                    html-type="submit"
                    >保存</a-button
                  >
                </div>
              </a-form-item>
            </a-form>
          </div>
        </div>
      </div>
      <div class="main-container-rt">
        <div :style="{ height: heightrg }">
          <div style="padding: 10px">
            <a-avatar :style="{ backgroundColor: '#3370ff' }">
              <img
                :style="{ width: '100%' }"
                alt="dessert"
                src="https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/a20012a2d4d5b9db43dfc6a01fe508c0.png~tplv-uwbnlip3yd-webp.webp"
              />
            </a-avatar>
            调试预览
          </div>
          <a-divider style="margin: 0; margin-left: 10px" />

            <a-form-item>
              <div style="position: absolute;right: 10px;top: 0px;z-index: 99999">
<!--                <a-button @click="visible = false">取消</a-button>-->
                <a-button style="margin-left: 10px" type="primary" html-type="submit">保存</a-button>
              </div>
            </a-form-item>
          </a-form>
          <div class="bottom">
            <div class="input">
              <a-input placeholder="输入您想了解的内容，按Enter发送">
                <template #suffix>
                  <icon-send style="cursor: pointer" />
                </template> </a-input
            ></div>
            <div class="text">内容由AI生成，仅供参考</div>
          </div>
        </div>
      </div>
    </div>
    <div class="main-container-rt">
      <div :style="{height:heightrg}">
        <div style="padding: 10px">
          <a-avatar :style="{ backgroundColor: '#3370ff' }">
            <img
              :style="{ width: '100%'}"
              alt="dessert"
              src="https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/a20012a2d4d5b9db43dfc6a01fe508c0.png~tplv-uwbnlip3yd-webp.webp"
            />
          </a-avatar>
          调试预览
        </div>
        <a-divider style="margin: 0;margin-left: 10px"/>

        <div class="bottom">
          <div class="input">
            <a-input  placeholder="输入您想了解的内容，按Enter发送">
              <template #suffix>
                <icon-send  style="cursor: pointer" />
              </template>
            </a-input></div>
          <div class="text">内容由AI生成，仅供参考</div>
        </div>
      </div>
    </div>
  </div>
  </a-modal>
</template>

<script lang="ts" setup>
import { onMounted, onBeforeMount, reactive, ref, nextTick } from "vue";
import { IconSend } from "@arco-design/web-vue/es/icon";
import { queryKbList, queryModelList } from "@/api/kbList";
import useLoading from "@/hooks/loading";
import { dialogSet } from "@/api/Agent";
import { Message } from "@arco-design/web-vue";
const {  setLoading } = useLoading(true);
const props =  defineProps(['typeAngint','formData'])
const visible = ref(false);
const loading = ref(false);
const form = reactive({
  name: "",
  icon: "",
  language: "English",
  prompt_config: {
    empty_response: "",
    prologue: "你好！ 我是你的助理，有什么可以帮到你的吗？",
    quote: true,
    self_rag: true,
    system: "示例：\n" +
      "你是 XX，具有 XX 经验，擅长 XX，…\n" +
      "你的任务是 XX ，需要按照以下步骤执行：\n" +
      "1. XX\n" +
      "2. XX\n" +
      "3. …\n",
    parameters: [
      {
        "key": "knowledge",
        "optional": false
      }
    ]
  },
  kb_ids: [
    "985eda244efc11ef9a7a0242ac120006"
  ],
  llm_id: "qwen-plus",
  llm_setting: {
    temperature: 0.1,
    top_p: 0.3,
    presence_penalty: 0.4,
    frequency_penalty: 0.7,
    max_tokens: 512
  },
  similarity_threshold: 0.2,
  vector_similarity_weight: 0.30000000000000004,
  top_n: 8
});
const system = ref('');
const embdId = ref('');
const modelList = ref({});
const renderData = ref([]);
const formRef = ref(null);
let tabs = ref([])
const height = ref('calc(100vh - 150px)')
const heightrg = ref('calc(100vh - 100px)')
const emit =  defineEmits(['cancelModal'])
const rules = {
  name: [
    {
      required: true,
      message:'名称不允许为空',
  import { onMounted, onBeforeMount, reactive, ref, nextTick } from 'vue';
  import { IconSend } from '@arco-design/web-vue/es/icon';
  import { queryKbList, queryModelList } from '@/api/kbList';
  import useLoading from '@/hooks/loading';
  import { dialogSet } from '@/api/Agent';
  import { Message } from '@arco-design/web-vue';
  import EventBus from "@/utils/EventBus";
  const { setLoading } = useLoading(true);
  const props = defineProps(['typeAngint', 'formData']);
  const visible = ref(false);
  const loading = ref(false);
  const form = reactive({
    name: '',
    icon: '',
    language: 'English',
    prompt_config: {
      empty_response: '',
      prologue: '你好！ 我是你的助理，有什么可以帮到你的吗？',
      quote: true,
      self_rag: true,
      system:
        '示例：\n' +
        '你是 XX，具有 XX 经验，擅长 XX，…\n' +
        '你的任务是 XX ，需要按照以下步骤执行：\n' +
        '1. XX\n' +
        '2. XX\n' +
        '3. …\n',
      parameters: [
        {
          key: 'knowledge',
          optional: false,
        },
      ],
    },
  ],
}
    kb_ids: ['985eda244efc11ef9a7a0242ac120006'],
    llm_id: 'qwen-plus',
    llm_setting: {
      temperature: 0.1,
      top_p: 0.3,
      presence_penalty: 0.4,
      frequency_penalty: 0.7,
      max_tokens: 512,
    },
    similarity_threshold: 0.2,
    vector_similarity_weight: 0.30000000000000004,
    top_n: 8,
  });
  const system = ref('');
  const embdId = ref('');
  const modelList = ref({});
  const renderData = ref([]);
  const formRef = ref(null);
  let tabs = ref([]);
  const height = ref('calc(100vh - 150px)');
  const heightrg = ref('calc(100vh - 100px)');
  const emit = defineEmits(['cancelModal']);
  const rules = {
    name: [
      {
        required: true,
        message: '名称不允许为空',
      },
    ],
  };

  const handleSubmit = async ({ values, errors }) => {
    // console.log('values:', values, '\nerrors:', errors)
    let title = '创建成功';
    let formNew = { ...form };
    if (props.typeAngint == 'edit') {
      formNew.dialog_id = form.id;
      delete formNew.id;
      delete formNew.off;
      title = '修改成功';
    }

const handleSubmit = async({values, errors}) => {
  // console.log('values:', values, '\nerrors:', errors)
  let title = '创建成功';
  let formNew = {...form}
  if(props.typeAngint == 'edit'){
    formNew.dialog_id = form.id;
    delete formNew.id;
    delete formNew.off;
    title = '修改成功';
  }
    const data = await dialogSet(formNew);
    if (data.code == 0) {
      Message.success(title);
      handleCancel();
      EventBus.emit('queryList');
    }
  };

  const data = await dialogSet(formNew);
  if(data.code == 0){
    Message.success(title);
    handleCancel()
  const editClick = (data) => {
    visible.value = true;

  }

}

const editClick = (data) => {
  visible.value = true;

  console.log(props.formData);
  Object.assign(form,props.formData);
  console.log(form);
  system.value = form.prompt_config.system;

};

const handleClick = (data) => {
  visible.value = true;
  nextTick(()=>{
    Object.assign(form,data);
    console.log(props.formData);
    Object.assign(form, props.formData);
    console.log(form);
    system.value = form.prompt_config.system;
  })
};
defineExpose({
  handleClick
})
const handleBeforeOk = (done) => {
    formRef.value.validate().then(res => {
      console.log('form:', form)
      if (!form.name) {
        done(false)
      }else {
        console.log('请求数据');

      }
    })
};
const handleCancel = () => {
  visible.value = false;
  emit('cancelModal')
}

const handleOpened =(el) => {
  // formRef.value.resetFields();


}
const queryModel = async (params) => {
  try {
    const data = await queryModelList(params);
    console.log(data.data, '大模型列表');
    modelList.value = data.data
  } catch (err) {
    // you can report use errorHandler or other
  } finally {

  }
};
const file = ref();

const onChange = (_, currentFile) => {
  file.value = {
    ...currentFile,
    // url: URL.createObjectURL(currentFile.file),
  };
};
const onProgress = (currentFile) => {
  file.value = currentFile;
};

  const handleClick = (data) => {
    visible.value = true;
    nextTick(() => {
      Object.assign(form, data);
      console.log(form);
      system.value = form.prompt_config.system;
    });
  };
  defineExpose({
    handleClick,
  });
  const handleBeforeOk = (done) => {
    formRef.value.validate().then((res) => {
      console.log('form:', form);
      if (!form.name) {
        done(false);
      } else {
        console.log('请求数据');
      }
    });
  };
  const handleCancel = () => {
    visible.value = false;
    emit('cancelModal');
  };

  const handleOpened = (el) => {
    // formRef.value.resetFields();
  };
  const queryModel = async (params) => {
    try {
      const data = await queryModelList(params);
      console.log(data.data, '大模型列表');
      modelList.value = data.data;
    } catch (err) {
      // you can report use errorHandler or other
    } finally {
    }
  };
  const file = ref();

const knowledgeData = async (
  params = { page: 1, page_size: 20 }
) => {
  setLoading(true);
  try {
    const { data } = await queryKbList(params);
    console.log(data, 'data');
    tabs.value = data;
    console.log(tabs.value, 'tabs');
  } catch (err) {
    // you can report use errorHandler or other
  } finally {
    setLoading(false);
  }
};
  const onChange = (_, currentFile) => {
    file.value = {
      ...currentFile,
      // url: URL.createObjectURL(currentFile.file),
    };
  };
  const onProgress = (currentFile) => {
    file.value = currentFile;
  };

onBeforeMount(()=>{
  queryModel({})
  knowledgeData()
})
onMounted(()=>{
  const knowledgeData = async (params = { page: 1, page_size: 20 }) => {
    setLoading(true);
    try {
      const { data } = await queryKbList(params);
      console.log(data, 'data');
      tabs.value = data;
      console.log(tabs.value, 'tabs');
    } catch (err) {
      // you can report use errorHandler or other
    } finally {
      setLoading(false);
    }
  };


})
  onBeforeMount(() => {
    queryModel({});
    knowledgeData();
  });
  onMounted(() => {});
</script>

<style scoped lang="less">
.main-container {
  width: 100%;
  display: flex;
  .main-container-lf {
    width: 60%;
  .main-container {
    width: 100%;
    display: flex;
    .main-container-lf {
      width: 60%;
    }
    .main-container-rt {
      position: relative;
      width: 40%;
    }
  }
  .main-container-rt {
    position: relative;
    width: 40%;
  .bottom {
    width: 100%;
    position: absolute;
    bottom: 40px;
    left: 0;
    .input {
      margin-left: 20%;
      width: 60%;
    }
    .text {
      margin-left: 40%;
      font-size: 12px;
      color: lightgrey;
      line-height: 40px;
    }
  }
}
.bottom{
  width: 100%;
  position: absolute;
  bottom: 40px;
  left:0;
  .input{
    margin-left: 20%;
    width: 60%;
  }
  .text{
    margin-left: 40%;
    font-size: 12px;
    color: lightgrey;
    line-height: 40px;
  }
}
</style>
</style>