fix: 修改bug

zhangxiao

2024-08-30 c02bff2911f720d54388f4abb6456ec1777f8a96

 src/views/dmx/IntelligentAgent/index.vue

@@ -3,161 +3,339 @@
    <Breadcrumb :items="['大模型', '智能体管理']" />
    <a-row :gutter="20" align="stretch">
      <a-col :span="24">
        <a-card class="general-card" :title="$t('智能体管理')">
          <div style="display: flex;justify-content: right;">
        <a-card class="general-card" :title="$t('')" style="padding-top: 50px">
          <div style="display: flex; justify-content: right">
            <a-input-search
              :placeholder="$t('cardList.searchInput.placeholder')"
              style="width: 240px;"
              style="width: 240px"
              @change="queryList"
            />
            <a-button
              type="primary"
              @click="handleClick"
              style="margin-left: 10px"
            >
              <template #icon>
                <icon-plus />
              </template>
              新建智能体
            </a-button>
          </div>
          <a-divider style="margin: 10px 0" />
          <a-row justify="space-between">
            <a-col :span="24">
              <div style="display: flex; flex-wrap: wrap;">
                <div class="card-wrap" style="cursor: pointer;" @click="handleAdd">
                  <a-card :bordered="false" hoverable >
                    <div style="margin-top: 30px;text-align: center">
                      <a-avatar style="background: #3370ff;">
                        <icon-plus />
              <a-spin :loading="loading" style="width: 100%">
                <a-scrollbar
                  style="
                    display: flex;
                    flex-wrap: wrap;
                    align-content: flex-start;
                    overflow: auto;
                    height: calc(100vh - 300px);
                  "
                  :style="{ height: documentHeight + 'px' }"
                >
<!--                  智能体列表-->
                  <div
                    class="card-wrap"
                    v-for="(item, index) of agentList"
                    :key="item.id"
                  >
                    <a-card :bordered="false" hoverable>
                      <a-avatar :style="{ backgroundColor: '#5b99da' }">
                        <img
                          :style="{ width: '100%' }"
                          alt="dessert"
                          :src="item.icon || imgSrc"
                        />
                      </a-avatar>
                    </div>
                    <div class="arco-card-body-content">
                      <div style="text-align: center;margin-top: 10px">
                        新建智能体
                      <a-switch
                        v-model="item.off"
                        style="position: absolute; top: 10px; right: 10px"
                        size="medium"
                        @change="handleChange(item)"
                      >
                        <template #checked> 上线 </template>
                        <template #unchecked> 下线 </template>
                      </a-switch>
                      <div class="arco-card-body-content">
                        <div class="arco-card-body-content-top">
                          <span style="font-size: 18px; font-weight: 900">
                            {{ item.name }}
                          </span>
                        </div>
                        <div class="arco-card-body-content-down">
                          {{ item.prompt_config.prologue }}
                        </div>
                      </div>
                      <div style="text-align:center;margin-top: 10px;font-size: 12px;color: #999999">
                        通过描述角色和任务来创建你的智能体<br>
                        智能体可以调用多个工作流和工具
                      </div>
                    </div>
                    <add-agent ref="addAgents"></add-agent>
<!--                    <div style="position: absolute; bottom: 1rem; right: 1rem;">-->
<!--                      <a-space>-->
<!--                      </a-space>-->
<!--                    </div>-->
                  </a-card>
                </div>
                <div class="card-wrap"    v-for="(item, index) of data" :key="index">
                  <a-card :bordered="false" hoverable >
                    <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>
                    <a-switch style="position: absolute;top: 10px;right: 10px" size="medium">
                      <template #checked>
                        上线
                      </template>
                      <template #unchecked>
                        下线
                      </template>
                    </a-switch>
                    <div class="arco-card-body-content">
                      <div class="arco-card-body-content-top">
                        <span style="font-size: 18px;font-weight: 900">
                          {{ item.title }}
                      <div
                        style="position: absolute; bottom: 1.4rem; left: 1rem"
                      >
                        <icon-user />
                        <span style="font-size: 12px">
                          <!--                      {{ item.name }}-->
                        </span>
                      </div>
                      <div class="arco-card-body-content-down">
                        通过描述角色和任务来创建你的智能体
                        智能体可以调用多个工作流和工具
                      <div
                        style="position: absolute; bottom: 1rem; right: 1rem"
                      >
                        <a-space>
                          <span v-show="!item.off">
                              <a-button
                                type="text"
                                size="small"
                                @click="editClick(item)"
                              >
                              <template #icon>
                                <icon-tool />
                              </template>
                            </a-button>
                          </span>
                          <a-popconfirm
                            :content="'确定删除吗'"
                            type="warning"
                            @ok="deleteItem(item)"
                          >
                            <a-button type="text">
                              <template #icon>
                                <icon-delete />
                              </template>
                            </a-button>
                          </a-popconfirm>
                        </a-space>
                      </div>

                    </div>
                    <div style="position: absolute; bottom: 1.4rem; left: 1rem;">
                      <icon-user /> <span style="font-size: 12px">王浩</span>
                    </div>
                    <div style="position: absolute; bottom: 1rem; right: 1rem;">
                      <a-space>
<!--                        <editAgent typeAngint="edit"></editAgent>-->
                        <a-popconfirm :content="'确定删除吗'" type="warning" @ok="deleteItem(record)">
                          <a-button  type="text" size="small">
                            <template #icon>
                              <icon-delete />
                            </template>
                          </a-button>
                        </a-popconfirm>
                      </a-space>
                    </div>
                  </a-card>
                </div>
              </div>
                    </a-card>
                  </div>
<!--                  agent列表-->
                  <div
                    class="card-wrap"
                    v-for="(item, index) of agentNewList"
                    :key="item.id"
                  >
                    <a-card :bordered="false" hoverable>
                      <a-avatar :style="{ backgroundColor: '#5b99da' }">
                        <img
                          :style="{ width: '100%' }"
                          alt="dessert"
                          :src="item.avatar || imgSrc"
                        />
                      </a-avatar>
<!--                      <a-switch-->
<!--                        v-model="item.off"-->
<!--                        style="position: absolute; top: 10px; right: 10px"-->
<!--                        size="medium"-->
<!--                        @change="handleChange(item)"-->
<!--                      >-->
<!--                        <template #checked> 上线 </template>-->
<!--                        <template #unchecked> 下线 </template>-->
<!--                      </a-switch>-->
                      <div class="arco-card-body-content">
                        <div class="arco-card-body-content-top">
                          <span style="font-size: 18px; font-weight: 900">
                            {{ item.title }}
                          </span>
                        </div>
<!--                        <div class="arco-card-body-content-down">-->
<!--                          {{ item.prompt_config.prologue }}-->
<!--                        </div>-->
                      </div>
                      <div
                        style="position: absolute; bottom: 1.4rem; left: 1rem"
                      >
                        <icon-calendar-clock />
                        <span style="font-size: 12px;margin-left: 10px">
                        {{ moment(item.create_date).format('YYYY-MM-DD HH:mm:ss') }}
                        </span>
                      </div>
<!--                      <div-->
<!--                        style="position: absolute; bottom: 1rem; right: 1rem"-->
<!--                      >-->
<!--                        <a-space>-->
<!--                          <a-popconfirm-->
<!--                            :content="'确定删除吗'"-->
<!--                            type="warning"-->
<!--                            @ok="deleteItem(item)"-->
<!--                          >-->
<!--                            <a-button type="text">-->
<!--                              <template #icon>-->
<!--                                <icon-delete />-->
<!--                              </template>-->
<!--                            </a-button>-->
<!--                          </a-popconfirm>-->
<!--                        </a-space>-->
<!--                      </div>-->
                    </a-card>
                  </div>
                </a-scrollbar>
                <!--                <div-->
                <!--                  class="card-wrap"-->
                <!--                  style="cursor: pointer"-->
                <!--                  @click="handleAdd"-->
                <!--                >-->
                <!--                  <a-card :bordered="false" hoverable>-->
                <!--                    <div style="margin-top: 30px; text-align: center">-->
                <!--                      <a-avatar style="background: #3370ff">-->
                <!--                        <icon-plus />-->
                <!--                      </a-avatar>-->
                <!--                    </div>-->
                <!--                    <div class="arco-card-body-content">-->
                <!--                      <div style="text-align: center; margin-top: 10px">-->
                <!--                        新建智能体-->
                <!--                      </div>-->
                <!--                      <div-->
                <!--                        style="-->
                <!--                          text-align: center;-->
                <!--                          margin-top: 10px;-->
                <!--                          font-size: 12px;-->
                <!--                          color: #999999;-->
                <!--                        "-->
                <!--                      >-->
                <!--                        通过描述角色和任务来创建你的智能体<br />-->
                <!--                        智能体可以调用多个工作流和工具-->
                <!--                      </div>-->
                <!--                    </div>-->
                <!--                    <add-agent ref="addAgents"></add-agent>-->
                <!--                    &lt;!&ndash;                    <div style="position: absolute; bottom: 1rem; right: 1rem;">&ndash;&gt;-->
                <!--                    &lt;!&ndash;                      <a-space>&ndash;&gt;-->
                <!--                    &lt;!&ndash;                      </a-space>&ndash;&gt;-->
                <!--                    &lt;!&ndash;                    </div>&ndash;&gt;-->
                <!--                  </a-card>-->
                <!--                </div>-->
              </a-spin>
            </a-col>
          </a-row>
        </a-card>
      </a-col>
    </a-row>
    <agent-config
      ref="editAgentKuai"
      :typeAngint="addType"
      :formData="itemObj"
      @queryList="queryList"
    ></agent-config>
  </div>
</template>

<script lang="ts" setup>
  import { ref, reactive, nextTick } from 'vue';
  import addAgent from "@/views/dmx/IntelligentAgent/components/addAgent.vue";
  import editAgent from "@/views/dmx/IntelligentAgent/components/editAgent.vue";
  import { kbdocumentrm } from "@/api/kbList";
  import { Message } from "@arco-design/web-vue";

  import {
    ref,
    reactive,
    nextTick,
    onBeforeMount,
    onMounted,
    onBeforeUnmount,
  } from 'vue';
  import { Message } from '@arco-design/web-vue';
  import { deletedialog, queryCanvasList, querydialogdetail, querydialogList } from "@/api/Agent";
  import useLoading from '@/hooks/loading';
  const { loading, setLoading } = useLoading(true);
  import EventBus from '@/utils/EventBus';
  import AgentConfig from '@/views/dmx/IntelligentAgent/components/agentConfig.vue';
  import logo from '../../../assets/images/model.png';
  import { documentHeight, parseTime } from "@/utils";
  import moment from "moment";
  // console.log(documentHeight,'高度');
  let count = 5;
  const activeKey = ref(1);
  const addAgents = ref();
  const data = ref([
    {
      key: 2,
      title: '内容质检',
      content: 'Content of Tab Panel 2',
    },
    {
      key: 3,
      title: '开通服务',
      content: 'Content of Tab Panel 3',
    },
    {
      key: 4,
      title: '规则预置',
      content: 'Content of Tab Panel 4',
    },
  ]);
const changeTabs = (val) => {
  activeKey.value = val;
}
  const editAgentKuai = ref(null);
  const imgSrc = ref(logo);
  const agentList = ref([]);
  const agentNewList = ref([]);
  const changeTabs = (val) => {
    activeKey.value = val;
  };
  const handleAdd = () => {
    addAgents.value.handleClick();
  };
  const handleDelete = (key: any) => {
    data.value = data.value.filter((item) => item.key !== key);
  };

  const visible = ref(false);
  const formRef = ref(null);
  const form = reactive({
    size: 'medium',
    name: '',
  });
  const   deleteItem =  async (row)=>{
    console.log(row);
    let data = await kbdocumentrm({doc_id: row.id})
    if(data.code == 0){
      Message.success('删除成功');
      console.log(kbobj, 'kbobj');
      fetchData({
        kb_id: kbobj.id,
        page: 1,
        page_size: 20
      })
  let addType = ref('add');
  let itemObj = reactive({});
  const form = reactive({});


  const handleClick = () => {
    addType.value = 'add';
    editAgentKuai.value.handleClick();
  };

  const editClick = async(data) => {
    let res = await querydialogdetail({
      dialog_id: data.id
    })
    Object.assign(itemObj, res.data);
    addType.value = 'edit';
    editAgentKuai.value.editClick();
  };


  const queryList = async (params = {}) => {
    setLoading(true);
    try {
      const { data } = await querydialogList(params);
      console.log(data, 'data');
      agentList.value = data.map((item) => {
        return {
          ...item,
          off: true,
        };
      });
    } catch (err) {
      // you can report use errorHandler or other
    } finally {
      setLoading(false);
    }
  }
  };


  const queryCanvas = async (params = {}) => {
    setLoading(true);
    try {
      const { data } = await queryCanvasList(params);
      console.log(data, 'agent');
      agentNewList.value = data.map((item) => {
        return {
          ...item,
          off: true,
        };
      });
    } catch (err) {
      // you can report use errorHandler or other
    } finally {
      setLoading(false);
    }
  };

  const deleteItem = async (row) => {
    console.log(row);
    let data = await deletedialog({ dialog_ids: [row.id] });
    if (data.code == 0) {
      Message.success('删除成功');
      queryList();
    }
  };
  const handleChange = async (item) => {
    if (item) {
      Object.assign(form, item);
    }
  };
  const handleCancel = () => {
    formRef.value.resetFields();
    visible.value = false;
    queryList();
  };
  const handleSubmit = ({ values, errors }) => {
    this.$refs.formRef.validate().then((res, a, b) => {
      debugger;
      console.log('values', values);
  onBeforeMount(() => {
    queryList();
    queryCanvas();
  });
  onMounted(() => {
    EventBus.on('queryList', () => {
      queryList();
    });
  };
  });
  onBeforeUnmount(() => {
    EventBus.off('queryList');
  });
</script>

<script lang="ts">
@@ -210,9 +388,9 @@
    }
  }
  .card-wrap {
    width: 20%;
    width: 23%;
    height: 200px;
    margin: 10px;
    margin: 1%;
    transition: all 0.3s;
    border: 1px solid var(--color-neutral-3);
    border-radius: 4px;
@@ -270,13 +448,13 @@
      }
    }
  }
  .arco-card-body-content{
    .arco-card-body-content-top{
  .arco-card-body-content {
    .arco-card-body-content-top {
      margin-top: 10px;
      text-align: center;
    }
    .arco-card-body-content-down{
      text-align:center;
    .arco-card-body-content-down {
      // text-align: center;
      margin-top: 10px;
      font-size: 12px;
      color: #999999;