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

<template>
  <el-dialog v-dialogDrag :title="isEdit ? $t('orderAuthor.modifyPermissions') : $t('orderAuthor.createPermission')" :visible.sync="dialogShow" width="420px" :before-close="handleClose">
    <div>
      <el-form ref="form" label-position="right" :model="editModel" label-width="80px" :rules="editRules" size="mini" @submit.native.prevent>
        <el-form-item :label="$t('orderAuthor.permissionName')" prop="name">
          <el-input v-model="editModel.name" />
        </el-form-item>
        <el-form-item :label="$t('orderAuthor.describtion')">
          <el-input v-model="editModel.des" />
        </el-form-item>
        <el-form-item :label="$t('orderAuthor.ability')">
          <el-select v-model="editModel.abilityIds" multiple :placeholder="$t('map.pleaseSelect')">
            <el-option
              v-for="item in abilityList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
      </el-form>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogShow = false">{{ $t('map.cancel') }}</el-button>
      <el-button type="primary" :loading="loading" @click="saveAs">{{ $t('map.confirm') }}</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { createPermission, updatePermission } from '@/api/permissionManage';

export default {
    name: 'MapSaveAs',
    props: {
        abilityList:{
            required:true,
            type:Array
        }
    },
    data() {
        return {
            dialogShow: false,
            loading: false,
            isEdit: false,
            editModel: {
                name: '',
                des: '',
                abilityIds: []
            },
            editRules: {
                name: [
                    { required: true, message: this.$t('rules.enterPermissionName'), trigger: 'blur' }
                ]
            }
        };
    },
    methods: {
        doShow(data) {
            if (data) {
                this.isEdit = true;
                const abilityIds = [];
                data.abilityVOList && data.abilityVOList.forEach(item => {
                    abilityIds.push(item.id);
                });
                this.editModel = {
                    id: data.id,
                    name: data.name,
                    des: data.des || '',
                    abilityIds: abilityIds
                };
            } else {
                this.isEdit = false;
                this.initData();
            }
            this.dialogShow = true;
        },
        initData() {
            this.editModel = {
                name: '',
                des: '',
                abilityIds: []
            };
        },
        close() {
            this.initData();
            this.dialogShow = false;
        },
        handleClose() {
            this.close();
        },
        saveAs() {
            this.$refs['form'].validate((valid) => {
                if (!valid) { return; }
                this.loading = true;
                let apiFn = createPermission;
                if (this.isEdit) {
                    apiFn = updatePermission;
                }
                apiFn(this.editModel).then((res) => {
                    this.loading = false;
                    this.$message.success(`${this.isEdit ? '编辑' : '新建'}成功！`);
                    this.$emit('refresh');
                    this.close();
                }).catch((err) => {
                    console.log('err', err);
                    this.loading = false;
                    this.$message.error(`${this.isEdit ? '编辑' : '新建'}失败！，${err.message}`);
                });
            });
        }
    }
};
</script>