rt-sim-training-client/src/views/system/userSimulation/edit.vue

<template>
  <el-dialog v-dialogDrag :title="title" :visible.sync="dialogVisible" width="30%" :before-close="handleClose" center :close-on-click-modal="false">
    <data-form ref="dataform" :form="form" :form-model="formModel" :rules="rules" />
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="doSave">{{ $t('global.confirm') }}</el-button>
      <el-button @click="handleClose">{{ $t('global.cancel') }}</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { putSimulationStats } from '@/api/simulation';

export default {
    name: 'UsersTrainingEdit',
    props: {
        type: {
            type: String,
            required: true
        }
    },
    data() {
        return {
            dialogVisible: false,
            formModel: {
                id: '',
                duration: '',
                mapName: '',
                mapPrdName: '',
                userMobile: '',
                userName: ''
            }
        };
    },
    computed: {
        form() {
            const form = {
                labelWidth: '100px',
                items: [
                    { prop: 'mapName', label: this.$t('system.mapName'), type: 'text', required: false, disabled: true },
                    { prop: 'mapPrdName', label: this.$t('system.productName'), type: 'text', required: false, disabled: true },
                    { prop: 'userName', label: this.$t('system.userName'), type: 'text', required: false, disabled: true },
                    { prop: 'duration', label: this.$t('system.trainingTime'), type: 'text', rightWidth: true, required: true, message: 's' }
                ]
            };
            return form;
        },
        rules() {
            const crules = {
                period: [
                    { required: true, message: this.$t('rules.timeInput'), trigger: 'blur' }
                ]
            };
            return crules;
        },
        title() {
            return this.$t('system.editSimulationDetails');
        }
    },
    methods: {
        show(data) {
            this.dialogVisible = true;
            if (data && data.id) {
                this.formModel = {
                    id: data.id,
                    duration: data.duration,
                    mapName: data.mapName,
                    mapPrdName: data.mapPrdName,
                    userMobile: data.userMobile,
                    userName: data.userName
                };
            }
        },
        doSave() {
            const self = this;
            this.$refs.dataform.validateForm(() => {
                self.update();
            });
        },
        update() {
            const self = this;
            const parma = {
                id: this.formModel.id,
                duration: this.formModel.duration
            };
            putSimulationStats(parma).then(response => {
                self.$message.success(this.$t('rules.successfullyModified'));
                self.handleClose();
                self.$emit('reloadTable');
            }).catch(error => {
                self.$message.error(this.$t('tip.modifyTheFailure') + error.message);
            });
        },
        handleClose(done) {
            this.formModel = {
                id: '',
                duration: '',
                mapName: '',
                mapPrdName: '',
                userMobile: '',
                userName: ''
            };
            this.dialogVisible = false;
        }
    }
};
</script>