rt-sim-training-client/src/views/lesson/trainingRule/saveAs.vue

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

<script>
import { postOperateSaveAs } from '@/api/management/operation';
import { getPublishMapListOnline } from '@/api/jmap/map';

export default {
    name: 'AddBatch',
    data() {
        return {
            loading: false,
            dialogVisible: false,
            formModel: {
                mapIdFrom: '',
                mapIdTo: ''
            },
            mapIdList: []
        };
    },
    computed: {
        form() {
            this.type === 'ADD';
            const form = {
                labelWidth: '120px',
                items: [
                    {
                        prop: 'mapIdFrom',
                        label: this.$t('lesson.skinTypeFrom'),
                        type: 'select',
                        required: true,
                        options: this.mapIdList
                    },
                    {
                        prop: 'mapIdTo',
                        label: this.$t('lesson.skinTypeTo'),
                        type: 'select',
                        disabled: true,
                        required: true,
                        options: this.mapIdList
                    }
                ]
            };
            return form;
        },
        rules() {
            const crules = {
                mapIdFrom: [
                    {
                        required: true,
                        message: this.$t('rules.inputSkinType'),
                        trigger: 'change'
                    }
                ],
                mapIdTo: [
                    {
                        required: true,
                        message: this.$t('rules.inputSkinType'),
                        trigger: 'change'
                    }
                ]
            };
            return crules;
        },
        title() {
            return this.$t('lesson.copyLesson');
        }
    },
    mounted() {
    },
    methods: {
        show(mapId) {
            this.dialogVisible = true;
            this.formModel.mapIdTo = mapId;
            // 获取已发布地图列表
            this.mapIdList = [];
            getPublishMapListOnline().then(response => {
                this.mapIdList = response.data.map(item => {
                    const params = {};
                    if ( item.id === mapId) {
                        params.disabled = true;
                    }
                    params.label = item.name;
                    params.value = item.id;
                    return params;
                });
                console.log(this.mapIdList);
            });
        },
        doSave() {
            const self = this;
            this.$refs.dataform.validateForm(() => {
                if (this.formModel.mapIdFrom != this.formModel.mapIdTo) {
                    self.create();
                } else {
                    this.$alert(this.$t('lesson.countSkinCode'), this.$t('global.tips'), {
                        confirmButtonText: this.$t('global.confirm'),
                        callback: () => {}
                    });
                }
            });
        },
        create() {
            const self = this;
            this.loading = true;
            postOperateSaveAs(this.formModel.mapIdFrom, this.formModel.mapIdTo)
                .then(response => {
                    self.loading = false;
                    self.$message.success(this.$t('lesson.batchCreateSuccess'));
                    self.handleClose();
                    self.$emit('reloadTable'); // 刷新列表
                })
                .catch(error => {
                    self.loading = false;
                    self.$message.error(
                        `${this.$('error.batchCreateFailed')}:${error.message}`
                    );
                });
        },
        handleClose() {
            this.$refs.dataform.resetForm();
            this.dialogVisible = false;
        }
    }
};
</script>