add.vue 3.13 KB
<template>
  <div>
    <el-dialog
      title="添加国际化字段"
      :visible.sync="isShow"
      class="manage-dialog"
      :before-close="closeDialog"
      :close-on-click-modal="false"
    >
      <el-form :model="addForm" status-icon :rules="rules" ref="addForm">
        <el-form-item label="模块" prop="key1">
          <el-select
            class="manage-sel"
            v-model="addForm.key1"
            filterable
            :placeholder="$t('pholder.select')"
          >
            <el-option v-for="item in moduleList" :key="item" :label="item" :value="item"></el-option>
          </el-select>
          <i class="error-tip">*</i>
        </el-form-item>
        <el-form-item label="Key值" prop="key2">
          <el-input v-model="addForm.key2"></el-input>
          <i class="error-tip">*</i>
        </el-form-item>
        <!-- <el-form-item label="Mall中文" prop="mall">
          <el-input v-model="addForm.mall"></el-input>
          <i class="error-tip">*</i>
        </el-form-item> -->
        <el-form-item label="中文" prop="zh">
          <el-input v-model="addForm.zh"></el-input>
          <i class="error-tip">*</i>
        </el-form-item>
        <el-form-item label="英文" prop="en">
          <el-input v-model="addForm.en"></el-input>
        </el-form-item>
        <el-form-item label="繁体" prop="tw">
          <el-input v-model="addForm.tw"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="closeDialog" class="dialog-btn">{{$t('dialog.cancel')}}</el-button>
        <el-button
          type="primary"
          :loading="loading"
          @click="addSubmit('addForm')"
          class="dialog-btn dialog-confirm-btn"
        >{{ $t('dialog.confirm')}}</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: {
    
    moduleList: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      isShow: false,
      loading:false,
      addForm: {
        key1: "",
        key2: null,
        mall:'',
        zh: '',
        en:'',
        tw:''
      },
      rules: {
        key1: [{ required: true, message: "请选择字段标识", trigger: "change"}],
        key2: [{ required: true, message: "请输入字段Key", trigger: "change"}],
        mall: [{ required: true, message: "请输入字段值", trigger: "change"}],
        zh: [{ required: true, message: "请输入字段值", trigger: "change"}]
      },
    };
  },
  created() {
    // this.getMallList();
  },
  methods: {
    dialogInit() {
      this.isShow = true;
    },
    hideLoading(){
       this.loading = false;
    },
    addSubmit(formName){
      this.$refs[formName].validate(valid => {
        try {
          if (valid) {
             this.loading = true;
             setTimeout(()=>{
                this.$emit('submit',this.addForm)
             },100)
          } else {
            return false;
          }
        } catch (error) {
          
        }
      });
    },
    closeDialog() {
      this.$refs.addForm.resetFields();
      this.hideLoading();
      this.isShow = false;
    }
  }
};
</script>