rt-sim-training-client/src/views/trainingManage/create.vue

<template>
  <el-dialog :title="title" :visible.sync="dialogVisible" width="500px" :modal="false" :before-close="doClose" center>
    <data-form ref="dataform" :form="form" :form-model="formModel" :rules="rules" />
    <el-form ref="form" :model="tagForm" label-width="60px">
      <el-form-item label="标签">
        <el-tag
          v-for="tag in tagForm.dynamicTags"
          :key="tag"
          closable
          :disable-transitions="false"
          @close="handleClose(tag)"
        >
          {{ tag }}
        </el-tag>
        <el-input
          v-if="inputVisible"
          ref="saveTagInput"
          v-model="inputValue"
          class="input-new-tag"
          size="small"
          @keyup.enter.native="handleInputConfirm"
          @blur="handleInputConfirm"
        />
        <el-button v-else class="button-new-tag" size="small" @click="showInput">+ New Tag</el-button>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="doCreate">{{ $t('global.confirm') }}</el-button>
      <el-button @click="doClose">{{ $t('global.cancel') }}</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { createTraining, updateTraining } from '@/api/trainingManage';
import ConstConfig from '@/scripts/ConstConfig';

export default {
    name: 'Create',
    props: {},
    data() {
        return {
            dialogVisible: false,
            isCreate: true,
            formModel: {
                name: '',
                mapId: '',
                description:'',
                type: ''
                // labelJson: ''
            },
            inputVisible: false,
            inputValue: '',
            tagForm: {
                dynamicTags: []
            }
        };
    },
    computed: {
        title() {
            let t = '新建实训';
            if (!this.isCreate) {
                t = '编辑实训';
            }
            return t;
        },
        form() {
            const form = {
                labelWidth: '60px',
                items: [
                    { prop: 'name', label: '名称', type: 'text' },
                    { prop: 'description', label: '描述', type: 'textarea' },
                    { prop: 'type', label: '类型', type: 'select', options: ConstConfig.ConstSelect.trainingType }
                    // { prop: 'labelJson', label: '标签', type: 'text', placeholder: '多个请用逗号隔开' }

                ]
            };
            return form;
        },
        rules() {
            const crules = {
                name: [
                    { required: true, validator: this.validateName, trigger: 'blur' }
                ],
                description: [
                    { required: true, validator: this.validateDescription, trigger: 'blur' }
                ],
                type: [
                    { required: true, message: '请选择实训类型', trigger: 'blur' }
                ]
            };
            return crules;
        }
    },
    methods: {
        handleClose(tag) {
            this.tagForm.dynamicTags.splice(this.tagForm.dynamicTags.indexOf(tag), 1);
        },
        showInput() {
            this.inputVisible = true;
            this.$nextTick(_ => {
                this.$refs.saveTagInput.$refs.input.focus();
            });
        },
        handleInputConfirm() {
            const inputValue = this.inputValue;
            if (inputValue) {
                this.tagForm.dynamicTags.push(inputValue);
            }
            this.inputVisible = false;
            this.inputValue = '';
        },
        validateName(rule, value, callback) {
            if (value.trim().length == 0) {
                this.formModel.name = this.formModel.name.replace(/\s/g, '');
                return callback(new Error('请输入实训名称'));
            } else {
                return callback();
            }
        },
        validateDescription(rule, value, callback) {
            if (value.trim().length == 0) {
                this.formModel.description = this.formModel.description.replace(/\s/g, '');
                return callback(new Error('请输入实训描述'));
            } else {
                return callback();
            }
        },
        doShow(data) {
            if (data) {
                this.isCreate = false;
                this.formModel = {...data};
                Object.keys(this.formModel).forEach(key => {
                    this.formModel[key] = data[key];
                });
                this.tagForm.dynamicTags = data.labelJson ? JSON.parse(data.labelJson) : [];
            } else {
                this.isCreate = true;
                this.formModel = {
                    name: '',
                    mapId: this.$route.query.mapId,
                    description:'',
                    type: ''
                    // labelJson: ''
                };
                this.tagForm.dynamicTags = [];
            }
            this.dialogVisible = true;
        },
        doCreate() {
            this.$refs.dataform.validateForm(async() => {
                const cpData = Object.assign({}, this.formModel);
                cpData.labelJson = JSON.stringify(this.tagForm.dynamicTags);
                if (this.isCreate) {
                    await createTraining(cpData);
                } else {
                    await updateTraining(cpData);
                }
                this.$emit('edit');
                this.doClose();
            });
        },
        doClose() {
            this.$refs.dataform.resetForm();
            this.dialogVisible = false;
        }
    }
};
</script>
<style lang="scss" scoped>
/deep/ .el-dialog--center .el-dialog__body{
    padding: 25px 65px 30px 10px;
}
.el-tag + .el-tag {
	margin-left: 10px;
}
.button-new-tag {
	margin-left: 10px;
	height: 32px;
	line-height: 30px;
	padding-top: 0;
	padding-bottom: 0;
}
.input-new-tag {
	width: 90px;
	margin-left: 10px;
	vertical-align: bottom;
}
</style>