rt-sim-training-client/src/views/publish/publishMap/project.vue

<template>
  <el-dialog v-dialogDrag :title="this.$t('publish.setTheProject')" :visible.sync="dialogVisible" width="30%" center>
    <el-form ref="form" :model="formModel" label-width="100px" label-position="left">
      <el-form-item :label="this.$t('publish.mapName')">
        <span>{{ formModel.name }}</span>
      </el-form-item>
      <el-form-item :label="this.$t('publish.whetherItBelongsToTheProject')" prop="project">
        <el-radio-group v-model="formModel.project" @change="changeProject">
          <el-radio :label="booleanValue.t">{{ $t('publish.trialYes') }}</el-radio>
          <el-radio :label="booleanValue.f">{{ $t('publish.trialNo') }}</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item
        v-if="formModel.project"
        :label="this.$t('publish.belongsProject')"
        prop="projectCode"
        :rules="{
          required: true, message: this.$t('publish.theBelongsProjectCannotBeEmpty'), trigger: 'change'
        }"
      >
        <el-select v-model="formModel.projectCode" :placeholder="this.$t('publish.pleaseSelectTheBelongsProject')">
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button v-loading="loading" type="primary" @click="doSave">{{ $t('global.confirm') }}</el-button>
      <el-button @click="dialogVisible = false">{{ $t('global.cancel') }}</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { setMapProject } from '@/api/jmap/map';
import { ProjectList } from '@/scripts/ProjectConfig';
export default {
    name: 'SetMapProject',
    data() {
        return {
            dialogVisible: false,
            formModel: {
                id: '',
                name: '',
                cityCode: '',
                project: false,
                projectCode: ''
            },
            loading: false,
            projectCodeShow: false,
            booleanValue: {
                t: true,
                f: false
            },
            options: []
        };
    },
    methods: {
        doShow(row) {
            this.dialogVisible = true;
            this.formModel.id = row.id;
            this.formModel.name = row.name;
            this.formModel.cityCode = row.cityCode;
            this.options = [];
            ProjectList.forEach(item => {
                this.options.push({label: item.label, value: item.value.toUpperCase()});
            });
            console.log(this.options);
        },
        doSave() {
            this.$refs['form'].validate((valid) => {
                if (valid) {
                    if (this.loading) {
                        return;
                    }
                    this.loading = true;
                    setMapProject(this.formModel).then(resp =>{
                        this.$message.success(this.$t('tip.setProjectSuccess'));
                        this.loading = false;
                        this.dialogVisible = false;
                        this.$emit('refresh');
                    }).catch( ()=>{
                        this.$messageBox(this.$t('tip.setProjectFail'));
                    });
                } else {
                    return false;
                }
            });

        },
        changeProject(val) {
            if (!val) {
                this.formModel.projectCode = '';
            }
        }
    }
};
</script>