eta_front/src/views/dataEntry_manage/databaseComponents/addCollectClassifyDia.vue

<template>
  <el-dialog
		:visible.sync="show"
		:close-on-click-modal="false"
		:modal-append-to-body='false'
    :title="form.classifyId?'编辑目录':'新增目录'"
		@close="closeDia"
		custom-class="edbCollect-classify-dialog"
		center
		width="650px"
		v-dialogDrag
  >
    <el-form 
        :model="classifyForm" 
        :rules="formRules" 
        ref="formRef" 
        hide-required-asterisk
        label-width="auto"
    >
        <!-- 目录名称 -->
        <el-form-item prop="classifyName" label="目录名称">
            <el-input 
                type="text" 
                v-model="classifyForm.classifyName" 
                placeholder="请输入目录名称"
                style="width:80%"
            />
        </el-form-item>
    </el-form>

    <div class="footer" style="margin-top: 20px;">
        <el-button
          @click="closeDia"
        >{{ $t('Dialog.cancel_btn') }}</el-button>
        <el-button
          @click="saveClassifyHandle"
        type="primary"
        >{{ $t('Dialog.confirm_save_btn') }}</el-button>
    </div>
  </el-dialog>  
</template>

<script>
import { edbCollectInterface } from '@/api/modules/chartApi'
export default {
  props: {
    show: {
      type: Boolean
    },
    form: {
      type:Object
    }
  },
  watch: {
    show(newVal) {
      if(!newVal) return 
      this.classifyForm.classifyName = this.form.name;
    }
  },
  data() {
    return {
      classifyForm: {
        classifyName:""
      },

      formRules: {
        classifyName: [{ required:true,message:'目录名称不能为空',trigger:'blur'}]
      }
    }
  },
  methods: {
    closeDia() {
      this.$refs.formRef.resetFields()
      this.$emit('update:show',false)
    },

    async saveClassifyHandle() {
      await this.$refs.formRef.validate()
      
      const res = this.form.classifyId
        ? await edbCollectInterface.editCollectClassify({
            ClassifyName: this.classifyForm.classifyName,
            ClassifyId: this.form.classifyId
          })
        : await edbCollectInterface.addCollectClassify({
            ClassifyName: this.classifyForm.classifyName,
          })

      if(res.Ret !== 200) return
      this.$message.success(this.form.classifyId?'编辑成功':'新增成功');
      this.closeDia()
      this.$emit('confirm')
    }
  }
}
</script>

<style lang="scss" scoped>
.edbCollect-classify-dialog {
  .el-form {
    padding: 0 40px;
  }
  .footer {
    display: flex;
    justify-content: center;
    margin: 40px 0;
    .el-button {
      width: 130px;
    }
  }
}
</style>