eta_front/src/views/semantics_manage/semantics/components/saveSemanticDialog.vue

<template>
  <div class="save-semantic-dialog">
    <el-dialog 
      :title="dlgTitle"
      :visible.sync="isSaveFileShow"
      :close-on-click-modal="false"
      :modal-append-to-body="false"
      @close="closeDialog"
      v-dialogDrag
      width="40%" center
    >
      <div class="dialog-container dialog-loading-target">
        <template v-if="step===1">
          <el-form
            ref="formRef"
            label-position="left"
            hide-required-asterisk
            label-width="168px"
            :model="form"
          >
            <el-form-item :label="`${$t('SemanticsManage.DocumentComparison.semantic_analysis_name')}`" prop="Title">
              <el-input
                v-model="form.Title"
                style="width: 240px"
                :placeholder="$t('SemanticsManage.DocumentComparison.semantic_analysis_name_input')"
              />
            </el-form-item>
            <el-form-item :label="`${$t('SemanticsManage.DocumentComparison.select_category')}`" prop="ClassifyId">
              <el-select :placeholder="$t('SemanticsManage.DocumentComparison.please_select_category')" v-model="form.ClassifyId">
                <el-option 
                  v-for="item in classifyList" :key="item.SaCompareClassifyId"
                  :label="item.ClassifyName"
                  :value="item.SaCompareClassifyId"
                  />
              </el-select>
            </el-form-item>
            <el-form-item :label="$t('SemanticsManage.DocumentComparison.preview_results')">
              <el-radio-group v-model="previewPic">
                <el-radio label="是">{{$t('SemanticsManage.DocumentComparison.radio_yes')}}</el-radio>
                <el-radio label="否">{{$t('SemanticsManage.DocumentComparison.radio_no')}}</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-form>
        </template>
        <template v-else>
          <div class="form-item">
            {{$t('SemanticsManage.DocumentComparison.upload_result_image')}}：
            <el-radio-group v-model="uploadPic">
                <el-radio label="是">{{$t('SemanticsManage.DocumentComparison.radio_yes')}}</el-radio>
                <el-radio label="否">{{$t('SemanticsManage.DocumentComparison.radio_no')}}</el-radio>
            </el-radio-group>
          </div>
          <div class="preview-wrap">
            <canvas-table 
              ref="canvasTable"
              :tableImgData="resultData"
            />
          </div>
        </template>
      </div>
      <div class="foot-container">
          <el-button type="primary" @click="toNextStep">{{$t('Dialog.confirm_btn')}}</el-button>
          <el-button @click.stop="closeDialog">{{$t('Dialog.cancel_btn')}}</el-button>
      </div>     
    </el-dialog>
  </div>
</template>

<script>
import canvasTable from '../../components/canvasTable.vue';
import {semanticInterface} from '@/api/modules/semanticsApi.js';
export default {
  components: { canvasTable },
  props:{
    isSaveFileShow:{
      type:Boolean,
      default:false
    },
    semanticInfo:{//当前语义分析的一些信息
      type:Object,
      default:()=>{
        return {}
      }
    },
    saveType:{//是点的保存还是另存为
      type:Number,
      default:0 //0另存为 1为保存
    },
    resultData:{//保存结果
      type:Object,
      default:()=>{
        return {}
      }
    },
    dialogLoading:{//loading
      type:Boolean,
      default:false
    }
  },
  watch:{
    isSaveFileShow(val){
      if(val){
        this.step = 1
        this.getClassifyList()
        this.form = _.cloneDeep(this.semanticInfo)
        this.form.previewPic = this.previewPic?this.previewPic:'是'
        this.form.uploadPic = this.uploadPic?this.uploadPic:'是'
        if(this.saveType===0){
            this.form.Title = this.form.Title + '（1）'
        }
      }
    },
    dialogLoading(val){
      //console.log('dialogVal',val)
      if(val){
        this.loading = this.$loading({
          lock: true,
          text: this.$t('SemanticsManage.DocumentComparison.generating_result_image'),
          spinner: 'el-icon-loading',
          customClass:'loading',
          target:document.querySelector('.dialog-loading-target'),
          background: 'rgba(255, 255, 255, 0.8)'
        });
      }else{
        this.loading&&this.loading.close()
      }
    },
    previewPic(val){
        this.form.previewPic = val
    },
    uploadPic(val){
        this.form.uploadPic = val
    }
  },
  data() {
    return {
      step:1,//步骤数 1为保存/另存为图片 2为上传结果图
      classifyList:[],//语义分析分类列表
      previewPic:'是',
      uploadPic:'是',
      canvasTableData:[],
      loading:null,
      form:{}
    };
  },
  methods: {
    getClassifyList(){
      semanticInterface.getClassifyList().then(res=>{
        if(res.Ret!==200) return 
        this.classifyList = res.Data||[]
      })
    },
    async toNextStep(){
      if(this.step===1){
        if(!this.checkForm()) return
        await this.saveSemantic()
        return
      }
      if(this.step===2){
        this.uploadPic==='是'&&await this.uploadImg()
        this.uploadPic==='否'&&this.closeDialog('toList')
        return
      }
    },
    goNext(){
        if(this.step===1){
            this.previewPic==='是'
            ?this.step++
            :this.closeDialog('toList')
        }
    },
    checkForm(){
      const {Title,ClassifyId} = this.form
      if(!Title){
        this.$message.warning(this.$t('SemanticsManage.DocumentComparison.semantic_analysis_name_input'))
        return false
      }
      if(!ClassifyId){
        this.$message.warning(this.$t('SemanticsManage.DocumentComparison.please_select_category'))
        return false
      }
      return true
    },
    saveSemantic(){
     this.$emit('saveSemantic',this.form)
    },
    async uploadImg(){
      let imgData = await this.$refs.canvasTable.tableToCanvas()
      this.$emit('uploadImg',imgData)
    },
    closeDialog(type){
      //console.log('dialog	Type',type)
      this.$emit('close',type)
    }
  },
  computed:{
    dlgTitle() {
      return this.saveType===0 ? this.$t('Table.save_as'): this.$t('Dialog.confirm_save_btn')
    }
  }
};
</script>

<style scoped lang="scss">
.save-semantic-dialog{
  .preview-wrap{
    margin-top:20px;
  }
  .foot-container{
    margin-top:15px;
    text-align: center;
    padding-bottom: 40px;
  }
}
</style>