smartai2dian0/src/modules/intelligent/ModelAddItem.vue

<template>
  <a-modal v-model:visible="show_modal" :align-center="false" top="15vh" @ok="handleOk" @cancel="handleCancel">
    <template #title> {{ $t('management.create_intel_title') }}</template>
    <div class="section">
      <div class="form-item">
        <div class="label">{{ $t('management.label_name') }}</div>
        <div class="value">
          <img class="icon" :src="getIconIntelligent(props.target_icon)" alt="" @click="handleSelectIcon" />
          <a-input v-model="form.name" :placeholder="$t('management.input_placeholder')" />
        </div>
      </div>
      <div class="form-item">
        <div class="label">{{ $t('management.label_desc') }}</div>
        <a-textarea
          v-model="form.description"
          :placeholder="$t('management.label_desc')"
          :auto-size="{ minRows: 2, maxRows: 5 }"
        />
      </div>
    </div>
  </a-modal>
</template>

<script setup>
import { ref, computed } from 'vue';
import { useRouter } from 'vue-router';
import { createDify } from '../../apis/rgflow-dify';
import { createDialog } from '../../apis/intelligent';
import { dialogType } from '../../views/manage/common';
import { getIconIntelligent } from '../common/icon-map.js';
import { Message } from '@arco-design/web-vue';
import { useI18n } from 'vue-i18n';

const { t } = useI18n();

const props = defineProps({
  show_model_item: {
    type: Boolean,
    default: false
  },
  target_intell_type: {
    type: String,
    default: 'advanced-chat'
  },
  target_icon: {
    type: String,
    default: 'intellFrame1'
  }
});
const router = useRouter();

const formInit = {
  name: '',
  description: ''
};
const form = ref(Object.assign({}, formInit));

const emit = defineEmits(['update:show_model_item', 'select_icon', 'updateIntelligentList', 'clearSelectIcon']);

let show_modal = computed(() => props.show_model_item);

const handleOk = () => {
  if (form.value.name.trim().length) {
    const data = {
      name: form.value.name,
      description: form.value.description,
      mode: props.target_intell_type
    };
    createDify(data)
      .then((res) => {
        if (res.id && res.id.length) {
          const dialogData = {
            id: res.id,
            name: form.value.name,
            description: form.value.description,
            icon: props.target_icon,
            dialogType: dialogType.DIFY,
            mode: props.target_intell_type
          };
          createOwnDialog(dialogData);
        }
      })
      .catch((err) => {
        // 新建失败
        console.log(t('management.create_fail'), err);
      })
      .finally(() => {});
  }
};
const createOwnDialog = async (data) => {
  try {
    const res = await createDialog(data);
    if (res.code == 200) {
      handleCancel();
      emit('updateIntelligentList');
      // 新建成功
      Message.success(t('management.create_success'));
      // 新建成功进入dify详情页
      router.push({ path: '/intelligent/detail', query: { id: data.id, name: data.name, mode: data.mode } });
    } else {
      Message.error(t('management.create_fail'));
    }
  } catch (err) {
    console.log(t('management.create_fail'), err);
  }
};
const handleCancel = () => {
  form.value = Object.assign({}, formInit);
  emit('update:show_model_item', false);
  emit('clearSelectIcon');
};
const handleSelectIcon = () => {
  emit('select_icon');
};
</script>
<style scoped lang="css">
.section {
  padding: 0 20px;
}
.form-item {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 20px;
}
.value {
  display: flex;
  align-items: center;
  gap: 10px;
}
.value .icon {
  width: 44px;
  cursor: pointer;
}
.arco-input-wrapper {
  height: 32px;
  background-color: var(--color-fill-2);
}
.arco-input-wrapper:hover {
  background-color: var(--color-fill-3);
}
</style>