smartai2dian0/src/modules/intelligent/ModelUpdateItem.vue

<template>
  <a-modal v-model:visible="show_modal" :align-center="false" top="15vh" @ok="handleOk" @cancel="handleCancel">
    <template #title> {{ $t('management.update_intelligent_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(icon_name)" 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>
  <ModelSelectIcon
    v-model:show_select_icon="show_select_icon"
    :target_icon="target_icon"
    @sendIcon="sendIcon"
  ></ModelSelectIcon>
</template>

<script setup>
import { ref, computed } from 'vue';
import { useRouter } from 'vue-router';
import { createDify, updateDify } from '../../apis/rgflow-dify';
import { createDialog, updateOwnIntelligentIcon } from '../../apis/intelligent';
import { dialogType } from '../../views/manage/common';
import { getIconIntelligent } from '../common/icon-map.js';
import { Message } from '../../3rd-libs/arco-vue-libs';
import { useI18n } from 'vue-i18n';
import ModelSelectIcon from './ModalSelectIcon.vue';

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'
  },
  name: {
    type: String,
    default: ''
  },
  description: {
    type: String,
    default: ''
  },
  id: {
    type: String,
    default: ''
  }
});
const router = useRouter();

const emit = defineEmits(['closeModel', 'select_icon', 'updateIntelligentList', 'clearSelectIcon']);

const formInit = {
  name: '',
  description: ''
};
const form = ref(Object.assign({}, formInit));
form.value = Object.assign({}, formInit, {
  name: props.name,
  description: props.description
});
const show_select_icon = ref(false);
const icon_name = ref(props.target_icon);

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

const sendIcon = (icon) => {
  icon_name.value = icon;
};
const handleOk = async () => {
  const edit_id = props.id;
  const data = {
    name: form.value.name,
    description: form.value.description,
    use_icon_as_answer_icon: false
  };

  // if (icon_name.value !== props.target_icon) {
  //   await updateOwnIntelligentIcon(edit_id, icon_name.value);
  // }
  const res = await updateDify(edit_id, data);
  if (res) {
    const response = await updateOwnIntelligentIcon(edit_id, icon_name.value, data.name, data.description);
    if (response.code == 200) {
      Message.success(t('management.edit_success'));
      emit('updateIntelligentList');
      handleCancel();
    } else {
      Message.error(t('management.edit_fail'));
    }
  } else {
    Message.error(t('management.edit_fail'));
  }
};
// const createOwnDialog = async (data) => {
//   try {
//     const res = await createDialog(data);
//     if (res.code == 200) {
//       handleCancel();
//       emit('updateIntelligentList');
//       // 新建成功
//       Message.success(t('management.create_success'));
//       // 新建成功进入dify详情页F
//       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('closeModel', false);
};
const handleSelectIcon = () => {
  // emit('select_icon');
  show_select_icon.value = true;
};
</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>