<!-- 人员新增或编辑 -->
|
<template>
|
<div>
|
<el-drawer size="50%" :with-header="false" :visible.sync="visible" :before-close="handleAddClose">
|
<div class="config-tabs">
|
<el-menu :default-active="activeTab" mode="horizontal" class="quanxian-menu">
|
<el-menu-item index="info" @click="activeTab = 'info'">{{ $t('person.user') }}</el-menu-item>
|
<el-menu-item index="vourcher" @click="activeTab = 'vourcher'">{{ $t('person.voucher') }}</el-menu-item>
|
<el-menu-item index="permission" @click="activeTab = 'permission'">{{ $t('person.permission') }}</el-menu-item>
|
</el-menu>
|
<!-- 功能页面 -->
|
<el-scrollbar>
|
<div style="padding: 20px;">
|
<component
|
:is="currentComponent"
|
:key="componentKey"
|
:form-data="form"
|
:add-or-edit-type="addOrEditType"
|
@close-drawer="handleAddClose"
|
@operation-success="operationSuccess"
|
/>
|
</div>
|
</el-scrollbar>
|
</div>
|
</el-drawer>
|
</div>
|
</template>
|
|
<script>
|
import Info from '@/views/person/info'
|
import Vourcher from '@/views/person/vourcher'
|
import Permission from '@/views/person/permission'
|
export default {
|
components: { Info, Vourcher, Permission },
|
data () {
|
return {
|
form: {
|
userId: "",
|
name: "",
|
permissionIds: "",
|
extra: ""
|
},
|
addOrEditType: 'add',
|
visible: false,
|
activeTab: 'info',
|
componentKey: 0, // 组件重新渲染的key
|
deviceModel: '',
|
}
|
},
|
computed: {
|
currentComponent () {
|
return this.activeTab;
|
}
|
},
|
created () {
|
this.initialForm = JSON.parse(JSON.stringify(this.form));
|
},
|
mounted () {
|
|
},
|
methods: {
|
open (type, row) {
|
console.log(type, row)
|
this.visible = true
|
this.addOrEditType = type
|
this.activeTab = 'info';
|
if (row) {
|
let extra = row.extra ? JSON.parse(row.extra) : ""
|
this.form = { ...row, extra }
|
}
|
// 强制重新渲染子组件
|
this.componentKey += 1;
|
},
|
|
handleAddClose (showConfirm = true) {
|
const closeAction = () => {
|
this.visible = false;
|
this.form = { ...this.initialForm };
|
// 强制重新渲染子组件，确保下次打开是干净的
|
this.componentKey += 1;
|
};
|
if (showConfirm) {
|
this.$confirm(this.$t('common.closeTips'))
|
.then(closeAction)
|
.catch(() => { });
|
} else {
|
closeAction();
|
}
|
},
|
|
operationSuccess (param) {
|
this.form = {...param}
|
this.$emit('addOrEditSuccess')
|
},
|
}
|
}
|
</script>
|
<style lang='less' scoped>
|
.config-tabs {
|
background: transparent;
|
}
|
|
.config-tabs ::v-deep .el-tabs__header {
|
background: #fff;
|
border-radius: 8px;
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
|
margin-bottom: 20px;
|
border: none;
|
}
|
|
.config-tabs ::v-deep .el-tabs__item {
|
font-weight: 500;
|
height: 50px;
|
line-height: 50px;
|
}
|
|
.drawerHeader {
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
margin: 50px 10px 30px 10px;
|
font-size: 20px;
|
}
|
|
.drawerImg {
|
height: 20px;
|
margin-right: 20px;
|
}
|
|
// .el-drawer__wrapper {
|
// z-index: 3000 !important;
|
// }</style>
|
