rt-sim-training-client/src/views/map/mapdraft/mapmanage/edit.vue

<template>
  <el-dialog :title="$t('map.mapEditor')" :visible.sync="dialogShow" width="30%" :before-close="handleClose">
    <div>
      <template v-if="basicInfo">
        <el-form
          ref="edit"
          label-position="right"
          :model="editModel"
          :rules="editRules"
          label-width="120px"
          size="mini"
          @submit.native.prevent
        >
          <el-form-item :label="$t('map.mapName')" prop="name">
            <el-input v-model="editModel.name" />
          </el-form-item>
          <el-form-item :label="$t('map.skinName')" prop="skinCode">
            <el-select v-model="editModel.skinCode" :placeholder="$t('map.pleaseSelect')" size="mini">
              <el-option
                v-for="item in skinCodeList"
                :key="item.code"
                :label="item.name"
                :value="item.code"
              />
            </el-select>
          </el-form-item>
          <el-form-item :label="$t('map.selectCity')" prop="cityCode">
            <el-select v-model="editModel.cityCode" :placeholder="$t('map.pleaseSelect')" size="mini">
              <el-option v-for="item in cityList" :key="item.code" :label="item.name" :value="item.code" />
            </el-select>
          </el-form-item>
        </el-form>
      </template>
      <template v-else>
        <el-form
          ref="updt"
          label-position="right"
          :model="updtModel"
          :rules="updtRules"
          label-width="120px"
          size="mini"
          @submit.native.prevent
        >
          <el-form-item :label="$t('map.offsetXColon')" :prop="'origin.x'">
            <el-input v-model="updtModel.origin.x" :label="$t('map.offsetX')" disabled />
          </el-form-item>
          <el-form-item :label="$t('map.offsetYColon')" :prop="'origin.y'">
            <el-input v-model="updtModel.origin.y" :label="$t('map.offsetY')" disabled />
          </el-form-item>
          <el-form-item :label="$t('map.scalingColon')" prop="scaling">
            <el-input v-model="updtModel.scaling" :label="$t('map.scaling')" disabled />
          </el-form-item>
        </el-form>
      </template>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogShow = false">{{ $t('map.cancel') }}</el-button>
      <el-button type="primary" :loading="loading" @click="save">{{ $t('map.confirm') }}</el-button>
    </span>
  </el-dialog>

</template>

<script>
import { updateMap, getMapDetail } from '@/api/jmap/mapdraft';
import { getSkinCodeList } from '@/api/management/mapskin';
import { updateSkinCodeByCode } from '@/api/management/mapskin';

export default {
	name: 'MapEdit',
	props: {
		map: {
			type: Object,
			required: true
		},
		basicInfo: {
			type: Boolean,
			required: true,
			default: function () {
				return true;
			}
		},
		skinCode: {
			type: String,
			required: true
		}
	},
	data() {
		return {
			dialogShow: false,
			loading: false,
			skinCodeList: [],
			cityList: [],
			editModel: {
				id: '',
				name: '',
				skinCode: '',
				cityCode: ''
			},
			updtModel: {
				code: '',
				scaling: '',
				origin: {
					x: '',
					y: ''
				}
			},
			isUpdate: false
		};
	},
	computed: {
		editRules() {
			return {
				name: [
					{ required: true, message: this.$t('map.pleaseEnterMapName'), trigger: 'blur' }
				],
				skinCode: [
					{ required: true, message: this.$t('map.pleaseSelectAssociatedSkin'), trigger: 'change' }
				],
				cityCode: [
					{ required: true, message: this.$t('map.pleaseSelectAssociatedCity'), trigger: 'change' }
				]
			};
		},
		updtRules() {
			return {
				linkWidth: [
					{ required: true, message: this.$t('map.pleaseEnteMapLinkWidth'), trigger: 'blur' }
				],
				zoneWidth: [
					{ required: true, message: this.$t('map.pleaseEnterMapSectionWidth'), trigger: 'blur' }
				]
			};
		}
	},
	watch: {
		map: function (val, old) {
			if (val) {
				Object.assign(this.editModel, this.map);
			}
		},
		'$store.state.map.mapDataLoadedCount': function () {
			if (this.$jlmap.skinCode) {
				this.isUpdate = true;
			}
		}
	},
	mounted() {
		this.initLoadData();
	},
	methods: {
		show() {
			const dataZoom = this.$store.state.map.dataZoom;
			if (dataZoom) {
				this.updtModel.origin.x = Number.parseInt(dataZoom.offsetX);
				this.updtModel.origin.y = Number.parseInt(dataZoom.offsetY);
				this.updtModel.scaling = dataZoom.scaleRate;
			}
			this.dialogShow = true;
		},
		close() {
			if (this.basicInfo) {
				this.$refs.edit.resetFields();
			} else {
				this.$refs.updt.resetFields();
			}

			this.dialogShow = false;
		},
		handleClose() {
			this.close();
		},
		save() {
			this.loading = true;
			if (this.basicInfo) {
				this.editModel.id = this.$route.params.mapId;
				// this.editModel.skinCode = skinCode;
				this.$refs['edit'].validate((valid) => {
					if (valid) {
						updateMap(this.editModel).then(response => {
							this.loading = false;
							if (this.isUpdate && this.$route.params.mapId) {
								getMapDetail(this.$route.params.mapId).then(response => {
									this.$store.dispatch('map/setMapData', response.data);
								});
							}
							this.$message.success(this.$t('map.mapUpdateSuccessful'));
							this.$emit('refresh');
							this.close();
						}).catch(error => {
							this.loading = false;
							this.$message.error(this.$t('map.operationUnusual') + error.message);
						});
					} else {
						this.loading = false;
					}
				});
			} else {
				this.updtModel.code = this.skinCode;
				this.$refs['updt'].validate((valid) => {
					if (valid) {
						updateSkinCodeByCode(this.updtModel).then(response => {
							this.loading = false;
							this.close();
							this.$message.success(this.$t('map.updateSuccessfully'));
						}).catch(() => {
							this.loading = false;
							this.$messageBox(this.$t('map.updateFailed'));
						});
					} else {
						this.loading = false;
					}
				});
			}
		},
		initLoadData() {
			this.cityList = [];
			this.$Dictionary.cityType().then(list => {
				this.cityList = list;
			}).catch(() => {
				this.$messageBox(this.$t('map.failedLoadCityList'));
			});

			this.skinCodeList = [];
			getSkinCodeList().then(response => {
				this.skinCodeList = response.data;
			});
		}
	}
};
</script>