rt-sim-training-client/src/views/organization/createLesson.vue

<template>
  <div class="card-box">
    <div style="width: 100%;font-size: 25px;text-align: center;padding: 30px;">{{ title }}</div>
    <el-button type="text" style="position: absolute;right: 20px;top: 10px;" @click="back">{{ $t('global.back') }}</el-button>
    <div class="joylink-card forms">
      <div style="height: 100%; padding-top: 40px; overflow-y: auto;">
        <el-form ref="form" :model="courseModel" :rules="rules" label-width="135px">
          <el-form-item :label="this.$t('lesson.courseName')+this.$t('global.colon')" prop="name">
            <el-input v-model="courseModel.name" />
          </el-form-item>
          <el-form-item :label="this.$t('lesson.mapName')+this.$t('global.colon')" prop="mapId">
            <el-select v-model="courseModel.mapId" :placeholder="$t('rules.pleaseSelect')">
              <el-option
                v-for="(item,index) in mapIdList"
                :key="index"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item :label="this.$t('lesson.prdType')+this.$t('global.colon')" prop="prdType">
            <el-select v-model="courseModel.prdType" :placeholder="$t('rules.pleaseSelect')" :disabled="isEdit">
              <el-option
                v-for="(item,index) in prdTypeList"
                :key="index"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item :label="$t('lesson.courseDescription')+this.$t('global.colon')" prop="remarks">
            <el-input
              v-model="courseModel.remarks"
              type="textarea"
              :autosize="{ minRows: 6, maxRows: 6}"
              :placeholder="this.$t('rules.pleaseEnterContent')"
            />
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div class="draft">
      <el-button-group>
        <el-button type="primary" @click="create">{{ $t('global.create') }}</el-button>
      </el-button-group>
    </div>
  </div>
</template>

<script>
import { createLesson } from '@/api/jmap/lessondraft';
import { getPublishMapListOnline } from '@/api/jmap/map';
import Cookies from 'js-cookie';

export default {
    name: 'EditLesson',
    components: {
    },
    data() {
        return {
            isEdit: false,
            display: 1,
            mapIdList: [],
            courseModel: {
                id: '',
                prdType: '',
                product: [],
                mapId: '',
                name: '',
                remarks: ''
            }
        };
    },
    computed: {
        title() {
            return this.$t('lesson.createCourse');
        },
        prdTypeList() {
            const productTypeList = [
                { enlabel: 'ATS local workstation', label: 'ATS现地工作站', value: '01'},
                { enlabel: 'ATS Traffic dispatching workstation', label: 'ATS行调工作站', value: '02'}
            ];
            return Cookies.get('user_lang') == 'en'
                ? productTypeList.map(elem => { return { value: elem.value, label: elem.enlabel }; })
                : productTypeList.map(elem => { return { value: elem.value, label: elem.label }; });
        },
        rules() {
            const baseRules = {
                name: [
                    { required: true, message: this.$t('rules.enterCourseName'), trigger: 'change' }
                ],
                mapId: [
                    { required: true, message: this.$t('rules.selectMapName'), trigger: 'change' }
                ],
                prdType: [
                    { required: true, message: this.$t('rules.productTypeInput'), trigger: 'change' }
                ],
                remarks: [
                    { required: true, message: this.$t('rules.enterCourseDescription'), trigger: 'change' }
                ]
            };
            return baseRules;
        }
    },
    mounted() {
        this.mapIdList = [];
        getPublishMapListOnline().then(response => {
            this.mapIdList = response.data;
        });
    },
    methods: {
        clearForm() {
            this.courseModel.id = '';
            this.$refs.form.resetFields();
        },
        create() {
            this.$refs.form.validate((valid) => {
                if (valid) {
                    const model = {
                        prdType: this.courseModel.prdType,
                        name: this.courseModel.name,
                        mapId: this.courseModel.mapId,
                        remarks: this.courseModel.remarks
                    };
                    createLesson(model).then(response => {
                        this.$message.success(this.$t('tip.createSuccess'));
                        this.back();
                    }).catch(() => {
                        this.$messageBox(this.$t('tip.creatingFailed'));
                    });
                }
            });
        },
        back() {
            // this.$router.push({ path: `/info/organization` });
            this.$router.go(-1);
        }
    }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
	@import "src/styles/mixin.scss";

	.card-box {
		height: 100%;
		margin: 0 auto;
		position: relative;
	}

	.steps {
		width: 980px;
		margin: 0 auto;

		/deep/ {
			.el-step__icon.is-icon {
				width: 95px;
			}
		}
	}

	.forms {
		width: 800px;
		margin: 0 auto;
		margin-top: 10px;
		height: calc(100% - 150px);

		/deep/ {
			.el-select {
				float: left;
				width: calc(600px);
			}

			.el-textarea {
				float: left;
				width: calc(600px);
			}

			.el-form-item__content>.el-input {
				float: left;
				width: calc(600px);
			}

			.el-input-number {
				float: left;
				width: calc(250px);
			}
		}
	}

	.draft {
		width: 300px;
		text-align: center;
		margin: 20px auto;
	}
</style>