rt-sim-training-client/src/views/scriptManage/publish.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: 'ScriptOperate',
    props: {
        title: {
            type: String,
            default() {
                return '';
            }
        }
    },
    data() {
        return {
            dialogVisible: false,
            formModel:{
                scriptName:'',
                id:''
            },
            isShow: false
        };
    },
    computed: {
        form() {
            const form = {
                labelWidth: '150px',
                items: [
                    { prop: 'scriptName', label: this.$t('approval.scriptName'), type: 'text', required: true}
                ]
            };
            return form;
        },
        rules() {
            const crules = {
                scriptName: [
                    { required: true, message: this.$t('approval.inputScriptName'), trigger: 'blur' }
                ]
            };
            return crules;
        }
    },
    methods: {
        doShow(row) {
            this.formModel.scriptName = row.name;
            this.formModel.id = row.id;
            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>