93 lines
2.1 KiB
Vue
93 lines
2.1 KiB
Vue
|
<template>
|
|||
|
|
<!-- 小型弹窗，用于完成，删除，保存等操作 -->
|
|||
|
|
<el-dialog class="l-dialog" :class="lDialog" :title="title" :visible.sync="dialogVisible" :showClose="false"
|
|||
|
|
:closeOnClickModal="false">
|
|||
|
|
<div>
|
|||
|
|
<el-form :model="dataForm" ref="ruleForm" label-width="110px">
|
|||
|
|
<el-form-item label="角色名称">
|
|||
|
|
<el-input style="width:100%" v-model="dataForm.roleName" maxlength="20"></el-input>
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-form>
|
|||
|
|
</div>
|
|||
|
|
<span slot="footer" class="dialog-footer">
|
|||
|
|
<el-button class="clear-btn" @click="handleClose" :disabled="disabled">取消</el-button>
|
|||
|
|
<el-button type="primary" class="search-btn" :disabled="disabled" @click="submitForm()">确认</el-button>
|
|||
|
|
</span>
|
|||
|
|
</el-dialog>
|
|||
|
|
</template>
|
|||
|
|
<script>
|
|||
|
|
export default {
|
|||
|
|
props: ["width", "dataForm", "title", "disabled", "usersList"],
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
roles: [],
|
|||
|
|
lDialog: this.width > 500 ? "w700" : "w500",
|
|||
|
|
dialogVisible: true,
|
|||
|
|
isDisabled: true,
|
|||
|
|
options: [],
|
|||
|
|
roleIds: [],
|
|||
|
|
menuIds: [],
|
|||
|
|
menuList: [],
|
|||
|
|
defaultProps: {
|
|||
|
|
children: 'children',
|
|||
|
|
label: 'name'
|
|||
|
|
},
|
|||
|
|
roleTypes: ['WEB角色', 'APP角色'],
|
|||
|
|
};
|
|||
|
|
},
|
|||
|
|
mounted() {
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
/*关闭弹窗 */
|
|||
|
|
handleClose() {
|
|||
|
|
this.dialogVisible = false;
|
|||
|
|
this.$emit("closeDialog");
|
|||
|
|
setTimeout(() => {
|
|||
|
|
this.dialogVisible = true;
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
/**确认弹窗 */
|
|||
|
|
sureBtnClick() {
|
|||
|
|
this.dialogVisible = false;
|
|||
|
|
this.$emit("closeDialog");
|
|||
|
|
setTimeout(() => {
|
|||
|
|
this.dialogVisible = true;
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
/**验证 */
|
|||
|
|
submitForm(formName) {
|
|||
|
|
let data = this.dataForm;
|
|||
|
|
data.roleType = '3';
|
|||
|
|
this.$emit('submit', data);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
</script>
|
|||
|
|
<style lang="scss">
|
|||
|
|
.w700 .el-dialog {
|
|||
|
|
width: 700px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.w500 .el-dialog {
|
|||
|
|
width: 500px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.w500 .el-dialog__header,
|
|||
|
|
.w700 .el-dialog__header {
|
|||
|
|
background: #eeeeee;
|
|||
|
|
text-align: center;
|
|||
|
|
|
|||
|
|
.el-dialog__title {
|
|||
|
|
font-size: 16px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.yxq .el-range-separator {
|
|||
|
|
margin-right: 7px !important;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.el-date-editor--daterange.el-input__inner {
|
|||
|
|
width: 260px;
|
|||
|
|
}
|
|||
|
|
</style>
|