rt-sim-training-client/src/views/publish/publishLesson/draft.vue
2019-10-31 10:09:43 +08:00

86 lines
2.7 KiB
Vue

<template>
<div>
<el-dialog :title="title" :visible.sync="dialogVisible" width="500px" :before-close="doClose" center>
<data-form ref="dataform" :form="form" :form-model="formModel" :rules="rules" />
<span slot="footer" class="dialog-footer">
<el-button type="primary" @click="doCreate">{{ $t('global.confirm') }}</el-button>
<el-button @click="doClose">{{ $t('global.cancel') }}</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
export default {
name: 'PublishLessonDraft',
props: {
title: {
type: String,
default() {
return '';
}
}
},
data() {
return {
dialogVisible: false,
cityList:[],
formModel:{
id:'',
remarks:'',
name:''
}
};
},
computed: {
form() {
const form = {
labelWidth: '150px',
items: [
{ prop: 'name', label: this.$t('publish.lessonName'), type: 'text', required: true},
{ prop: 'remarks', label: this.$t('publish.lessonIntroduction'), type: 'textarea', required: true, isAutoSize:{ minRows:1, maxRows:5 }}
]
};
return form;
},
rules() {
const crules = {
name:[
{ required: true, message: this.$t('rules.pleaseInputLessonName'), trigger: 'blur', max:100 },
{ required: true, message: this.$t('rules.pleaseInputLessonName'), trigger: 'change', max:100 }
],
remarks:[
{ required: true, message: this.$t('rules.pleaseLessonIntroduction'), trigger: 'blur', max:300 },
{ required: true, message: this.$t('rules.pleaseLessonIntroduction'), trigger: 'change', max:300 }
]
};
return crules;
}
},
methods: {
doShow(row) {
this.formModel.id = row.id;
this.formModel.remarks = row.remarks;
this.formModel.name = row.name;
this.dialogVisible = true;
},
doCreate() {
const self = this;
this.$refs.dataform.validateForm(() => {
self.$emit('create', Object.assign({}, this.formModel));
self.doClose();
});
},
doClose() {
// this.$refs.dataform.resetForm();
this.isShow = false;
this.dialogVisible = false;
}
}
};
</script>
<style lang="scss" scoped>
/deep/ .el-dialog--center .el-dialog__body{
padding: 15px 65px 10px 10px;
}
</style>