eta_front/src/views/semantics_manage/asr/components/fileRename.vue

<template>
	<el-dialog
		:visible.sync="diaShow"
		:close-on-click-modal="false"
		:modal-append-to-body='false'
    :title="diaTitle"
		@close="closeHandle"
		center
		width="480px">
			<div class="dialog-main">
				<el-form
				ref="diaForm"
				label-position="top"
				hide-required-asterisk
				:model="formData">
          <el-form-item label="文件名称" :rules="{required:true,message:'文件名称必填',trigger:'blur'}" prop="name">
            <el-input v-model="formData.name" style="width: 100%" placeholder="请输入文件名称"></el-input>
          </el-form-item>
				</el-form>
        <div class="dia-bot">
          <el-button type="primary" plain style="margin-right:20px;min-width:120px ;" @click="cancelHandle">取消</el-button>
          <el-button type="primary" @click="saveHandle" style="min-width:120px;">保存</el-button>
        </div>
			</div>
		</el-dialog>
</template>

<script>
import { asrInterface } from '../../../../api/modules/semanticsApi'

  export default {
    name:"fileRename",
    props:{
      formData:{
        type:Object,
        default:()=>{
          return {}
        }
      },
      diaShow:{
        type:Boolean,
        default:false
      }
    },
    watch:{
      diaShow(value){
        if(value){
          this.$refs.diaForm && this.$nextTick(()=>{
            this.$refs.diaForm.clearValidate()
          })
        }
      }
    },
    data() {
      return {
        diaTitle:'重命名',
      }
    },
    methods: {
      cancelHandle(){
        this.$emit("update:diaShow",false)
      },
      saveHandle(){
        this.$refs.diaForm.validate(valid=>{
          if(valid){
            asrInterface.speechRename({SpeechRecognitionId:this.formData.id,FileName:this.formData.name}).then(res=>{
              if(res.Ret == 200){
                this.$message.success(this.diaTitle+"成功")
                this.$emit("renameSuccess")
                this.$emit("update:diaShow",false)
              }
            })
          }
        })
      },
      closeHandle(){
        this.$emit("update:diaShow",false)
      }
    },
  }
</script>

<style lang="scss" scoped>
.dialog-main{
  padding: 5px 35px 35px;
  .dia-bot{
    text-align: center;
    margin-top: 60px;
  }
}
</style>