rt-sim-training-client/src/views/system/systemGenerate/create.vue

<template>
  <div>
    <el-dialog :title="title" :visible.sync="dialogVisible" width="500px" :before-close="doClose" center>
      <data-form ref="dataform" :form="form" :form-model="formModel" :rules="rules" />
      <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>
  </div>
</template>
<script>
import ConstConfig from '@/scripts/ConstConfig';
import Cookies from 'js-cookie';
// import { listPublishMap } from '@/api/jmap/map';
import { getCommodityMapProduct } from '@/api/management/mapprd';
export default {
    name: 'CreateSubSystem',
    props: {
        title: { type:String, required:true },
        operateType:{ type:String, required:true },
        mapList:{
            required:true,
            type:Array
        }
    },
    data() {
        return {
            dialogVisible: false,
            disabled:null,
            productList:[],
            projectList:[],
            typeList:[],
            formModel:{
                mapId:'',
                name: '',
                prdId: '',
                type: '',
                id:null
            }
        };
    },
    computed: {
        form() {
            let form = {};
            if (this.operateType == 'add') {
                form = {
                    labelWidth: '150px',
                    items: [
                        { prop: 'customized', label: this.$t('systemGenerate.customized'), type: 'select', required: true, options: this.projectList},
                        { prop: 'mapId', label: this.$t('systemGenerate.mapName'), type: 'select', required: true, options: this.mapList, change:true, onChange:this.changeMap},
                        { prop: 'prdId', label: this.$t('systemGenerate.prdName'), type: 'select', required: true, options:this.productList},
                        { prop: 'name', label: this.$t('systemGenerate.name'), type: 'text', required: true},
                        { prop: 'type', label: this.$t('systemGenerate.type'), type: 'select', required: true, options: this.typeList}
                    ]
                };
            } else {
                form = {
                    labelWidth: '150px',
                    items: [
                        { prop: 'name', label: this.$t('systemGenerate.name'), type: 'text', required: true}
                    ]
                };
            }
            return form;
        },
        rules() {
            let crules = {};
            if (this.operateType == 'add') {
                crules = {customized:[
                    { required: true, message: this.$t('systemGenerate.selectProject'), trigger: 'change'}
                ],
                mapId:[
                    { required: true, message: this.$t('systemGenerate.selectMap'), trigger: 'change'}
                ],
                name: [
                    { required: true, message: this.$t('systemGenerate.inputName'), trigger: 'blur' },
                    { required: true, message: this.$t('systemGenerate.inputName'), trigger: 'change' }
                ],
                type:[
                    { required: true, message: this.$t('systemGenerate.selectType'), trigger: 'change'}
                ],
                prdId:[
                    { required: true, message: this.$t('systemGenerate.selectPrdName'), trigger: 'change'}
                ]
                };
            } else {
                crules = {
                    name: [
                        { required: true, message: this.$t('systemGenerate.inputName'), trigger: 'blur' },
                        { required: true, message: this.$t('systemGenerate.inputName'), trigger: 'change' }
                    ]
                };
            }
            return crules;
        }
    },
    mounted() {
        this.loadInitData();
    },
    methods:{
        loadInitData() {
            this.projectList = [{value:'xty', label:'西铁院'}];
            const customeredProductType = ConstConfig.ConstSelect.customeredProductType;
            this.typeList = Cookies.get('user_lang') == 'en'
                ? customeredProductType.map(elem => { return { value: elem.value, label: elem.enlabel }; })
                : customeredProductType.map(elem => { return { value: elem.value, label: elem.label }; });
        },
        changeMap(index) {
            this.productList = [];
            getCommodityMapProduct(index).then((response) => {
                this.productList = response.data.map(elem => { return { value: elem.code, label: elem.name }; });
                this.formModel.prdId = '';
            });
        },
        doShow(data) {
            if (data) {
                this.formModel.name = data.name;
                this.formModel.id = data.id;
            }
            this.dialogVisible = true;
        },
        doCreate() {
            const self = this;
            this.$refs.dataform.validateForm(() => {
                self.$emit('create', Object.assign({}, this.formModel));
                self.doClose();
            });
        },
        doClose() {
            this.$refs.dataform.resetForm();
            this.dialogVisible = false;
        }
    }
};
</script>
<style lang="scss" scoped>
/deep/ .el-dialog--center .el-dialog__body{
    padding: 25px 55px 20px 20px;
}
/deep/ .el-dialog--center .el-dialog__body .el-input{
    width:200px !important;
}
</style>