smartai_desk_pc/src/modules/report-template/TemplateEditor.vue

<template>
  <a-modal v-model:visible="visible" width="100%" modal-class="my_custom_template" :mask="false">
    <div class="container">
      <TemplateHeader @toBack="toBack"></TemplateHeader>
      <TemplateDetail
        :md_data="str_md"
        :template_name="template_name"
        :template_id="template_id"
        :draft_id="draft_id"
        :template_save_time="template_save_time"
        :is_loading_template_detail="is_loading_template_detail"
        :common_config="target_common_config"
        @save-template="handleSaveTemplate"
        @update-draft="handleUpdateDraft"
        @send-report="handleSendReport"
      ></TemplateDetail>
    </div>
  </a-modal>
  <TipsModel v-model:visible="showTips" :loading="is_loading_edit" @ok="toSaveSetting" @cancel="toNotSaveSetting" />
  <SaveErrorModal
    v-model:visible="show_save_error"
    :complete_list="save_error_list"
    @ok="handleSaveErrorOk"
  ></SaveErrorModal>
</template>

<script setup lang="js">
import TemplateHeader from './TemplateHeader.vue'
import TemplateDetail from './TemplateDetail.vue'
import { ref,computed,watch } from 'vue'
import {str_md} from './moke.js'
import {checkTemplateDetail,editTemplateItem} from '../conversation-dialog/api-template.js'
import { useReportEditor } from '../../base/store/use-report-editor';
import {formatDateTime} from '../../utils/utils.js'
import TipsModel  from './editor-model/TipsModel.vue'
import SaveErrorModal from './editor-model/SaveErrorModal.vue'
import { Message } from '@arco-design/web-vue';

const reportEditor = useReportEditor();

const props = defineProps({
  target_template_id: {
    type: String,
    default: ''
  },
  target_outline_md:{
    type: String,
    default:''
  },
  target_common_config:{
    type: Object,
    default:()=>{
      return {
        start_date:'',
        end_date:'',
        theme:'',
        area:''
      }
    }
  },
})

const template_content = ref(props.target_outline_md||'')
const template_config = ref([])
const common_config = ref({})

const template_name = ref('')
const template_id = ref('')  // 模板id,用于保存模板
const draft_id = ref('') // 草稿id，用户编辑草稿时使用
const template_save_time = ref('')
const is_loading_template_detail = ref(false)
const showTips = ref(false)
const is_loading_edit = ref(false)
const save_error_list = ref([])
const show_save_error = ref(false)



const emit = defineEmits(['toBackHome','send-report']);

const visible = computed(()=>{
  return true
})

const getTemplateDetail = async () => {
  if(props.target_template_id) {
    is_loading_template_detail.value = true
    try{
      const res = await checkTemplateDetail({id: props.target_template_id})
      if(res.code/1 === 200) {
        console.log(res,'模板详情')
        const content = res.data.content
        template_content.value = content
        if(res.data.template_config){
          template_config.value = JSON.parse(res.data.template_config)
        }
        if(res.data.common_config){
         common_config.value = JSON.parse(res.data.common_config)
        }
        template_name.value = res.data.name
        template_save_time.value =formatDateTime(res.data.updated_at) || ''
        // common_config.value
        if(res.data.type/1 === 1){
          template_id.value = res.data.id
        }else {
          draft_id.value = res.data.id
        }
        reportEditor.setMetricsList(template_config.value)
        for(const key in common_config.value) {
          reportEditor.setCommonConfig(key,common_config.value[key])
        }
      }
    }catch(e) {
      console.log(e)
    }finally {
      is_loading_template_detail.value = false
    }
  }
}
const handleSaveTemplate = (data) => {
  // console.log(data,'保存模板')
  template_id.value = data.id
  template_name.value = data.name
  template_save_time.value = formatDateTime(data.created_at) || ''
}

const handleUpdateDraft = (data) => {
  // console.log(data,'保存草稿')
  draft_id.value = data.id
  template_name.value = data.name
  template_save_time.value = formatDateTime(data.created_at) || ''
}

const toBack = () => {
  const is_need_save_template = reportEditor.QueryIsNeedSaveTemplate
  if(is_need_save_template && template_id.value) {
    // ElMessage.warning('当前模板有未保存的内容，是否确认放弃？')
    showTips.value = true
  } else {
    emit('toBackHome');
    reportEditor.clearAll()
  }
  // emit('toBackHome');
}
const toSaveSetting = async () => {
   const complete_list = reportEditor.checkMetricConfigComplete();
    if (complete_list.length > 0) {
      // Message.error('指标配置不完善，请完善后再保存');
      save_error_list.value = complete_list;
      show_save_error.value = true;
      return;
    }
  const res = await editTemplateFunc(template_id.value)
  if(res.code/1 === 200) {
    Message.success('保存成功')
    showTips.value = false
    template_save_time.value = formatDateTime(res.data.updated_at) || ''
    reportEditor.setIsNeedSaveTemplate(false)
    emit('toBackHome');
  }
}

const handleSaveErrorOk = () => {
  show_save_error.value = false
  save_error_list.value = []
  showTips.value = true
}

const toNotSaveSetting = () => {
  showTips.value = false
  reportEditor.setIsNeedSaveTemplate(false)
  emit('toBackHome');
}
const editTemplateFunc = async (id) => {
  try {
    is_loading_edit.value = true
    const res = await editTemplateItem({
      id,
      name: template_name.value,
      content: reportEditor.target_report_markdown,
      template_config: JSON.stringify(reportEditor.metrics_list),
      common_config: JSON.stringify(common_config.value)
    });
    if (res.code / 1 === 200) {
      return res;
    } else {
      Message.error('保存失败');
    }
  } catch (error) {
    Message.error('保存失败');
  } finally {
    is_loading_edit.value = false
  }
};

const handleSendReport = (data) => {
  emit('send-report', data);
  reportEditor.clearAll()
};
watch(()=>props.target_template_id, () => {
  if(props.target_template_id) {
    getTemplateDetail();
  }
}, {immediate: true})

watch(()=>props.target_common_config,() => {
  // console.log(props.target_common_config)
  reportEditor.setCommonConfig('common_start_time', props.target_common_config?.start_date);
  reportEditor.setCommonConfig('common_end_time', props.target_common_config?.end_date);
  reportEditor.setCommonConfig('common_area', props.target_common_config?.area);
    // console.log(props.target_common_config,reportEditor)
},{
  immediate:true,
  deep:true
})

</script>
<style scoped lang="css">
.container {
  height: 100%;
  box-sizing: border-box;
  padding: 12px 10px;
  font-family: '思源黑体';
  background: #f5fafa;
}
</style>
<style>
.my_custom_template {
  height: 100vh;
}
.my_custom_template .arco-modal-header {
  display: none;
}
.my_custom_template .arco-modal-footer {
  display: none;
}
.my_custom_template .arco-modal-body {
  height: 100%;
  box-sizing: border-box;
  padding: 0px;
}
</style>