eta_front/src/views/semantics_manage/summery/components/promptDetail.vue

<template>
  <div class="edit-prompt">
    <header>
      <div>
        <span>提示词名称</span>
        <el-input 
          v-model="promptData.title" 
          style="width:220px" 
          placeholder="请输入提示词名称"
          :disabled="item.type==='public'"
        ></el-input>
      </div>
      <div class="btn-handle" v-if="item.type!=='public'">
        <el-button type="primary" @click="handleSavePrompt"><!-- 确定 -->{{$t('Dialog.confirm_btn')}}</el-button>
          <el-button type="primary" plain ><!-- 取消 -->{{$t('Dialog.cancel_btn')}}</el-button>
      </div>
    </header>

    <div class="main">
      <Editor ref="editorRef" :disabled="item.type==='public'"/>
    </div>
  </div>
</template>
<script>
import { aiSummeryInterface } from '../../../../api/modules/semanticsApi'
import Editor from './editor.vue'
export default {
  components: { Editor },
  props: {
    item: {
      type: Object
    }
  },
  watch: {
    item(nval) {
      console.log(nval)
      if(nval.AiPromptId) {
        this.promptData.title = nval.Title;
        this.$refs.editorRef&&this.$refs.editorRef.initData(nval.PromptContent)
      }else {
        this.promptData.title=''
        this.$refs.editorRef&&this.$refs.editorRef.initData('')
      }
    }
  },
  data() {
    return {
      promptData: {
        title: ''
      }
    }
  },
  mounted() {
    if(this.item.AiPromptId) {
      this.promptData.title = this.item.Title;
      this.$nextTick(() => {
        this.$refs.editorRef&&this.$refs.editorRef.initData(this.item.PromptContent)
      })
    }else {
      this.promptData.title=''
      this.$nextTick(() => {
        this.$refs.editorRef&&this.$refs.editorRef.initData('')
      })
    }
  },
  methods:{
    async handleSavePrompt() {
      if(!this.promptData.title) return this.$message.warning('请输入提示词名称')

      let params = {
        Title: this.promptData.title,
        PromptContent: this.$refs.editorRef.content
      }
      
      const res = this.item.AiPromptId
        ? await aiSummeryInterface.promptEdit({AiPromptId: this.item.AiPromptId,...params})
        : await aiSummeryInterface.promptAdd(params)
        
      if(res.Ret !== 200) return
      this.$message.success(res.Msg)

      this.$emit('success')
    }
  },
}
</script>
<style scoped lang='scss'>
.edit-prompt {
  background: #fff;
  padding: 20px;
  height: 100%;
  border: 1px solid #C8CDD9;
  border-radius: 4px;
  header {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .main {
    margin-top: 30px;
  }
  .bot {
    display: flex;
    justify-content: flex-end;
    margin-top: 30px;
  }
}
</style>
<style lang="scss">
.edit-prompt {
  .fr-element {
    height: calc(100vh - 400px);
  }
} 
</style>