rt-sim-training-client/src/views/publish/publishLesson/draft.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>