<template>
|
<div class="h100 flex-column">
|
<el-card shadow="hover" :body-style="{ paddingBottom: '0' }">
|
<el-form :inline="true" :model="queryParams">
|
<el-form-item label="用户名称" prop="Name">
|
<el-input v-model="queryParams.Name" style="width: 226.4px" placeholder="名称" clearable></el-input>
|
</el-form-item>
|
<el-form-item label="管理类型" prop="AdminType">
|
<el-select v-model="queryParams.AdminType" style="width: 226.4px" placeholder="类型" clearable>
|
<el-option
|
v-for="item in Object.keys(ADMIN_TYPE_MAP)"
|
:key="item"
|
:value="parseInt(item)"
|
:label="ADMIN_TYPE_MAP[item]"
|
></el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item>
|
<el-button type="primary" icon="ele-Search" @click="handleQueryTable"> 查询 </el-button>
|
<el-button icon="ele-Refresh" @click="resetQuery">重置 </el-button>
|
<el-button icon="ele-Plus" @click="openOperateDialog()"> 增加 </el-button>
|
</el-form-item>
|
<el-form-item label="排序">
|
<el-switch v-model="isDragStatus" @change="handleDragStatus" inline-prompt :active-icon="Check" :inactive-icon="Close">
|
</el-switch>
|
</el-form-item>
|
</el-form>
|
</el-card>
|
|
<el-card class="flex-auto scroll-table-card" shadow="hover" style="margin-top: 8px">
|
<el-table
|
v-loading="tableLoading"
|
ref="draggableTableRef"
|
border
|
row-key="ID"
|
:row-class-name="isDragStatus ? 'move-row' : 'normal-row'"
|
:cell-style="{ textAlign: 'center' }"
|
:header-cell-style="{ textAlign: 'center' }"
|
:data="displayTableData"
|
style="width: 100%"
|
>
|
<el-table-column prop="Name" label="名称" fixed="left" show-overflow-tooltip />
|
<el-table-column prop="AdminType" label="管理类型" show-overflow-tooltip>
|
<template #default="scope">
|
{{ ADMIN_TYPE_MAP[scope.row.AdminType] }}
|
</template>
|
</el-table-column>
|
<el-table-column prop="Tag" label="标签" show-overflow-tooltip>
|
<template #default="scope">
|
<el-tag v-if="scope.row.Tag">{{ scope.row.Tag }}</el-tag>
|
</template>
|
</el-table-column>
|
<el-table-column label="状态" width="70" align="center">
|
<template #default="scope">
|
<el-switch
|
v-model="scope.row.UseStatus"
|
:active-value="UseStatusEnum.Enable"
|
:inactive-value="UseStatusEnum.Disable"
|
size="small"
|
@change="changeStatus(scope.row)"
|
/>
|
</template>
|
</el-table-column>
|
<el-table-column prop="Description" label="说明" show-overflow-tooltip />
|
|
<el-table-column label="操作" fixed="right" show-overflow-tooltip width="200">
|
<template #default="scope">
|
<el-button icon="ele-Edit" size="small" text type="primary" @click="openOperateDialog(scope.row)"> 编辑 </el-button>
|
<el-button icon="ele-Delete" size="small" text type="danger" @click="deleteCurrentRow(scope.row)"> 删除 </el-button>
|
<el-dropdown>
|
<el-button icon="ele-MoreFilled" size="small" text type="primary" style="padding-left: 12px" />
|
<template #dropdown>
|
<el-dropdown-item icon="ele-Suitcase" @click="openSelectAdminType(scope.row)"> 管理类型 </el-dropdown-item>
|
<el-dropdown-item icon="ele-UserFilled" @click="openDrawer(scope.row)" divided> 角色 </el-dropdown-item>
|
<el-dropdown-item icon="ele-User" @click="openAccountDrawer(scope.row)" divided> 账户 </el-dropdown-item>
|
</template>
|
</el-dropdown>
|
</template>
|
</el-table-column>
|
</el-table>
|
</el-card>
|
<el-dialog :destroy-on-close="true" v-model="dialogIsShow" width="400px" :close-on-click-modal="false" @closed="closeDialog">
|
<template #header>
|
<div style="color: #fff">
|
<SvgIcon :name="dialogHeaderIcon" :size="16" style="margin-right: 3px; display: inline; vertical-align: middle" />
|
<span> {{ dialogTitle }} </span>
|
</div>
|
</template>
|
|
<el-form :model="dialogFormValue" ref="dialogFormRef" :rules="dialogFormRules" label-width="70px">
|
<el-form-item label="名称" prop="Name">
|
<el-input placeholder="请输入名称" v-model="dialogFormValue.Name"></el-input>
|
</el-form-item>
|
<el-form-item label="标签" prop="Tag">
|
<el-input placeholder="请输入标签" v-model="dialogFormValue.Tag"></el-input>
|
</el-form-item>
|
<template v-if="dialogHeaderIcon === 'ele-Plus'">
|
<el-form-item label="用户名" prop="LoginName">
|
<el-input placeholder="请输入用户名" v-model="dialogFormValue.LoginName"></el-input>
|
</el-form-item>
|
<el-form-item label="密码" prop="LoginPwd">
|
<el-input placeholder="请输入密码" v-model="dialogFormValue.LoginPwd"></el-input>
|
</el-form-item>
|
</template>
|
<el-form-item label="说明" prop="Description">
|
<el-input placeholder="请输入说明" v-model="dialogFormValue.Description" type="textarea" :rows="3"></el-input>
|
</el-form-item>
|
</el-form>
|
|
<template v-slot:footer>
|
<div>
|
<el-button @click="closeDialog">取 消</el-button>
|
<el-button type="primary" @click="submitFormValue">确 定</el-button>
|
</div>
|
</template>
|
</el-dialog>
|
|
<div class="custom-drawer">
|
<el-drawer v-model="drawerIsShow" direction="rtl" size="30%">
|
<template #header>
|
<div>
|
<SvgIcon name="ele-UserFilled" :size="16" style="margin-right: 3px; display: inline; vertical-align: middle" />
|
<span> 用户角色 </span>
|
</div>
|
</template>
|
<el-button type="primary" icon="ele-Collection" @click="submitSelectRole" size="small" class="mb12" style="float: right">
|
保存设置
|
</el-button>
|
|
<el-table
|
class="h100"
|
size="small"
|
v-loading="drawerTableLoading"
|
ref="roleTableRef"
|
border
|
row-key="ID"
|
:cell-style="{ textAlign: 'center' }"
|
:header-cell-style="{ textAlign: 'center' }"
|
:data="drawerTableData"
|
style="width: 100%"
|
>
|
<el-table-column type="selection" width="55px"> </el-table-column>
|
<el-table-column prop="Name" label="名称" fixed="left" show-overflow-tooltip />
|
|
<el-table-column prop="Code" label="编码" show-overflow-tooltip />
|
<el-table-column label="状态" width="120" align="center">
|
<template #default="scope">
|
{{ scope.row.UseStatus === UseStatusEnum.Enable ? '已启用' : '已弃用' }}
|
</template>
|
</el-table-column>
|
</el-table>
|
</el-drawer>
|
|
<el-drawer v-model="accountDrawerIsShow" direction="rtl" size="30%">
|
<template #header>
|
<div>
|
<SvgIcon name="ele-User" :size="16" style="margin-right: 3px; display: inline; vertical-align: middle" />
|
<span> 用户账户 </span>
|
</div>
|
</template>
|
<el-table
|
class="h100"
|
size="small"
|
v-loading="accountTableLoading"
|
border
|
row-key="ID"
|
:cell-style="{ textAlign: 'center' }"
|
:header-cell-style="{ textAlign: 'center' }"
|
:data="accountTableData"
|
style="width: 100%"
|
>
|
<el-table-column prop="Identifier" label="账户" show-overflow-tooltip />
|
<el-table-column prop="LoginType" label="账户类型" fixed="left" show-overflow-tooltip />
|
<el-table-column prop="IfVerified" label="是否已验证" show-overflow-tooltip>
|
<template #default="scope">
|
{{ scope.row.IfVerified ? '是' : '否' }}
|
</template>
|
</el-table-column>
|
|
<el-table-column label="操作" width="240" fixed="right" show-overflow-tooltip>
|
<template #default="scope">
|
<el-button icon="ele-Edit" size="small" text type="primary" @click="openPwdDialog(scope.row)"> 修改密码 </el-button>
|
<el-button icon="ele-Edit" size="small" text type="primary" @click="resetPwd(scope.row)"> 重置密码 </el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
</el-drawer>
|
</div>
|
|
<el-dialog
|
:destroy-on-close="true"
|
v-model="adminTypeDialogIsShow"
|
width="430px"
|
:close-on-click-modal="false"
|
@closed="closeAdminTypeDialog"
|
>
|
<template #header>
|
<div style="color: #fff">
|
<SvgIcon name="ele-Edit" :size="16" style="margin-right: 3px; display: inline; vertical-align: middle" />
|
<span>修改管理类型</span>
|
</div>
|
</template>
|
|
<el-form :model="adminTypeFormValue" ref="adminTypeDialogFormRef" label-width="80px" label-position="top">
|
<el-form-item label="管理类型：" prop="AdminType">
|
<el-select v-model="adminTypeFormValue.AdminType" class="w100" placeholder="类型">
|
<el-option
|
v-for="item in Object.keys(ADMIN_TYPE_MAP)"
|
:key="item"
|
:value="parseInt(item)"
|
:label="ADMIN_TYPE_MAP[item]"
|
></el-option>
|
</el-select>
|
</el-form-item>
|
</el-form>
|
<template v-slot:footer>
|
<div>
|
<el-button @click="closeAdminTypeDialog">取 消</el-button>
|
<el-button type="primary" @click="submitAdminTypeForm">确 定</el-button>
|
</div>
|
</template>
|
</el-dialog>
|
|
<el-dialog :destroy-on-close="true" v-model="pwdDialogIsShow" width="430px" :close-on-click-modal="false" @closed="closePwdDialog">
|
<template #header>
|
<div style="color: #fff">
|
<SvgIcon name="ele-Edit" :size="16" style="margin-right: 3px; display: inline; vertical-align: middle" />
|
<span>修改密码</span>
|
</div>
|
</template>
|
|
<el-form :model="pwdFormValue" ref="pwdDialogFormRef" label-width="80px" label-position="top" :rules="pwdFormRules">
|
<el-form-item label="新密码：" prop="Pwd">
|
<el-input v-model="pwdFormValue.LoginPwd" placeholder="新密码"></el-input>
|
</el-form-item>
|
</el-form>
|
<template v-slot:footer>
|
<div>
|
<el-button @click="closePwdDialog">取 消</el-button>
|
<el-button type="primary" @click="submitPwdForm">确 定</el-button>
|
</div>
|
</template>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script setup lang="ts">
|
import { Check, Close } from '@element-plus/icons-vue';
|
import type { FormInstance, FormRules, TableInstance } from 'element-plus';
|
import { ElMessage, ElMessageBox } from 'element-plus';
|
import { ref, onMounted, nextTick } from 'vue';
|
import { deepClone } from '/@/utils/other';
|
import { maxInArray } from '/@/utils/istation/common';
|
import { useQueryTable } from '/@/hooks/useQueryTable';
|
import { useTableSort } from '/@/hooks/useTableSort';
|
import {
|
DeleteAUser,
|
GetRoleByUserID,
|
GetSystemAccountByUserID,
|
GetUserByCorpID,
|
InsertAUser,
|
ResetSystemLoginPwd,
|
SetUserRole,
|
UpdateAUser,
|
UpdateSystemLoginPwd,
|
UpdateUserAdminType,
|
UpdateUserSorter,
|
UpdateUserUseStatus,
|
} from '/@/api/auth/userManage';
|
import { useUserInfo } from '/@/stores/userInfo';
|
import { UseStatusEnum, ADMIN_TYPE_MAP } from '/@/views/types';
|
|
//#region ====================== 表格数据 ======================
|
const tableLoading = ref(false);
|
const tableData = ref([]);
|
const isDragStatus = ref(false);
|
const CorpID = ref('');
|
const getTableData = async () => {
|
tableLoading.value = true;
|
const res = await GetUserByCorpID({ CorpID: CorpID.value }).finally(() => {
|
tableLoading.value = false;
|
});
|
if (res?.Code === 0) {
|
if (res.Data) {
|
tableData.value = res.Data;
|
}
|
} else {
|
ElMessage.error('获取用户失败' + (res?.Message ? `，${JSON.stringify(res.Message)}` : ''));
|
}
|
};
|
const deleteCurrentRow = (row: any) => {
|
ElMessageBox.confirm(`确定删除用户：【${row.Name}】?`, '提示', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning',
|
})
|
.then(async () => {
|
const res = await DeleteAUser({
|
ID: row.ID,
|
});
|
if (res?.Code === 0) {
|
if (res.Data) {
|
ElMessage.success('删除用户成功');
|
getTableData();
|
} else {
|
ElMessage.error('删除用户失败');
|
}
|
} else {
|
ElMessage.error('删除用户失败' + (res?.Message ? `，${JSON.stringify(res.Message)}` : ''));
|
}
|
})
|
.catch(() => {});
|
};
|
|
//#endregion
|
|
//#region ====================== 表格查询、排序 ======================
|
const queryParams = ref({
|
Name: '',
|
AdminType: null,
|
});
|
const { handleDragStatus, draggableTableRef } = useTableSort(tableData, UpdateUserSorter, getTableData);
|
|
const { resetQuery, handleQueryTable, displayTableData } = useQueryTable(tableData, queryParams, getTableData);
|
|
//#endregion
|
|
//#region ====================== 增加、删除操作 ======================
|
const dialogTitle = ref('');
|
const dialogHeaderIcon = ref('');
|
const dialogFormValue = ref({
|
CorpID: '0',
|
Name: '',
|
Tag: '',
|
SortCode: 0,
|
Description: '',
|
LoginName: '',
|
LoginPwd: '',
|
}) as any;
|
const dialogIsShow = ref(false);
|
const dialogFormRef = ref<FormInstance>(null);
|
|
const dialogFormRules = ref<FormRules>({
|
Name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
|
LoginName: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
|
LoginPwd: [{ required: true, message: '请输入密码', trigger: 'blur' }],
|
});
|
const openOperateDialog = (row?) => {
|
if (row) {
|
dialogTitle.value = '修改用户';
|
dialogHeaderIcon.value = 'ele-Edit';
|
const { ID, Name, Tag, Description } = row;
|
dialogFormValue.value = deepClone({ ID, Name, Tag, Description });
|
} else {
|
dialogTitle.value = '添加用户';
|
dialogHeaderIcon.value = 'ele-Plus';
|
let sort = 1;
|
if (tableData.value && tableData.value.length > 0) {
|
let sorts = tableData.value.map((x) => {
|
return x.SortCode;
|
});
|
let maxSort = maxInArray(sorts);
|
sort = maxSort + 1;
|
}
|
dialogFormValue.value = { CorpID, Name: '', Tag: '', SortCode: sort, Description: '', LoginName: '', LoginPwd: '' };
|
}
|
dialogIsShow.value = true;
|
};
|
|
const closeDialog = () => {
|
dialogIsShow.value = false;
|
dialogFormRef.value.clearValidate();
|
};
|
|
const submitFormValue = async () => {
|
const valid = await dialogFormRef.value.validate().catch(() => {});
|
if (!valid) return;
|
|
if (dialogHeaderIcon.value === 'ele-Edit') {
|
const res = await UpdateAUser(dialogFormValue.value);
|
if (res?.Code === 0) {
|
if (res.Data) {
|
getTableData();
|
dialogIsShow.value = false;
|
ElMessage.success('修改成功');
|
} else {
|
ElMessage.error('修改失败');
|
}
|
} else {
|
ElMessage.error('修改失败' + (res?.Message ? `，${JSON.stringify(res.Message)}` : ''));
|
}
|
} else {
|
const res = await InsertAUser(dialogFormValue.value);
|
if (res?.Code === 0) {
|
if (res.Data) {
|
getTableData();
|
dialogIsShow.value = false;
|
ElMessage.success('添加成功');
|
} else {
|
ElMessage.error('添加失败');
|
}
|
} else {
|
ElMessage.error('添加失败' + (res?.Message ? `，${JSON.stringify(res.Message)}` : ''));
|
}
|
}
|
};
|
|
//#endregion
|
const changeStatus = (row: any) => {
|
const targetStatus = row.UseStatus;
|
// 并不需要立马改变, row.UseStatus 为原始值
|
row.UseStatus = row.UseStatus === UseStatusEnum.Disable ? UseStatusEnum.Enable : UseStatusEnum.Disable;
|
|
const confirmKeyword = targetStatus === UseStatusEnum.Enable ? '启用' : '禁用';
|
ElMessageBox.confirm(`确定${confirmKeyword}：【${row.Name}】?`, '提示', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning',
|
})
|
.then(async () => {
|
const res = await UpdateUserUseStatus({ ID: row.ID, UseStatus: targetStatus });
|
|
if (res?.Code === 0) {
|
if (!res.Data) {
|
ElMessage.error('状态设置失败');
|
} else {
|
row.UseStatus = row.UseStatus === UseStatusEnum.Disable ? UseStatusEnum.Enable : UseStatusEnum.Disable;
|
targetStatus === UseStatusEnum.Disable ? ElMessage.warning('已禁用') : ElMessage.success('已启用');
|
}
|
} else {
|
ElMessage.error('状态设置失败' + (res?.Message ? `，${JSON.stringify(res.Message)}` : ''));
|
}
|
})
|
.catch(() => {});
|
};
|
onMounted(async () => {
|
const stores = useUserInfo();
|
let userInfo = (await stores.getUserInfo()) as any;
|
CorpID.value = userInfo.SoftWare?.Project?.Corpration?.ID;
|
getTableData();
|
});
|
|
//#region ====================== 修改管理类型 ======================
|
const adminTypeDialogFormRef = ref<FormInstance>(null);
|
|
const adminTypeFormValue = ref({
|
AdminType: null,
|
}) as any;
|
const adminTypeDialogIsShow = ref(false);
|
|
const openSelectAdminType = (row?) => {
|
const { ID, AdminType } = row;
|
adminTypeFormValue.value = { ID, AdminType };
|
adminTypeDialogIsShow.value = true;
|
};
|
|
const closeAdminTypeDialog = () => {
|
adminTypeDialogIsShow.value = false;
|
adminTypeDialogFormRef.value.clearValidate();
|
};
|
|
const submitAdminTypeForm = async () => {
|
const valid = await adminTypeDialogFormRef.value.validate().catch(() => {});
|
if (!valid) return;
|
|
const res = await UpdateUserAdminType(adminTypeFormValue.value);
|
if (res?.Code === 0) {
|
if (res.Data) {
|
getTableData();
|
adminTypeDialogIsShow.value = false;
|
ElMessage.success('修改成功');
|
} else {
|
ElMessage.error('修改失败');
|
}
|
} else {
|
ElMessage.error('修改失败' + (res?.Message ? `，${JSON.stringify(res.Message)}` : ''));
|
}
|
};
|
//#endregion
|
|
//#region ====================== 用户账户 ======================
|
|
const accountDrawerIsShow = ref(false);
|
const pwdDialogIsShow = ref(false);
|
const accountTableData = ref([]);
|
const accountTableLoading = ref(false);
|
let currentUserID = '';
|
const pwdFormRules = ref<FormRules>({
|
LoginPwd: [{ required: true, message: '请输入新密码', trigger: 'blur' }],
|
});
|
|
const getSystemAccountByUserID = async () => {
|
accountTableLoading.value = true;
|
const res = await GetSystemAccountByUserID({ UserID: currentUserID }).finally(() => {
|
accountTableLoading.value = false;
|
});
|
if (res?.Code === 0) {
|
if (res.Data) {
|
accountTableData.value = res.Data;
|
}
|
} else {
|
ElMessage.error('获取用户账户失败' + (res?.Message ? `，${JSON.stringify(res.Message)}` : ''));
|
}
|
};
|
|
const openAccountDrawer = async (row?) => {
|
const { ID } = row;
|
currentUserID = ID;
|
getSystemAccountByUserID();
|
|
accountDrawerIsShow.value = true;
|
};
|
|
const resetPwd = (row: any) => {
|
ElMessageBox.confirm(`确定重置此账户密码：【${row.Identifier}】?`, '提示', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning',
|
})
|
.then(async () => {
|
const res = await ResetSystemLoginPwd({
|
ID: row.ID,
|
});
|
if (res?.Code === 0) {
|
if (res.Data) {
|
ElMessage.success('重置密码成功');
|
getSystemAccountByUserID();
|
} else {
|
ElMessage.error('重置密码失败');
|
}
|
} else {
|
ElMessage.error('重置密码失败' + (res?.Message ? `，${JSON.stringify(res.Message)}` : ''));
|
}
|
})
|
.catch(() => {});
|
};
|
|
const pwdFormValue = ref({
|
ID: '',
|
LoginPwd: '',
|
});
|
|
const pwdDialogFormRef = ref(null);
|
const openPwdDialog = async (row?) => {
|
const { ID } = row;
|
pwdFormValue.value = { ID, LoginPwd: '' };
|
pwdDialogIsShow.value = true;
|
};
|
|
const closePwdDialog = () => {
|
pwdDialogIsShow.value = false;
|
pwdDialogFormRef.value.clearValidate();
|
};
|
|
const submitPwdForm = async () => {
|
const valid = await pwdDialogFormRef.value.validate().catch(() => {});
|
if (!valid) return;
|
|
const res = await UpdateSystemLoginPwd(pwdFormValue.value);
|
if (res?.Code === 0) {
|
if (res.Data) {
|
getSystemAccountByUserID();
|
pwdDialogIsShow.value = false;
|
ElMessage.success('修改成功');
|
} else {
|
ElMessage.error('修改失败');
|
}
|
} else {
|
ElMessage.error('修改失败' + (res?.Message ? `，${JSON.stringify(res.Message)}` : ''));
|
}
|
};
|
|
//#endregion
|
|
//#region ====================== 用户角色 ======================
|
const drawerIsShow = ref(false);
|
const drawerTableData = ref([]);
|
const drawerTableLoading = ref(false);
|
let currentOrgID = '';
|
const roleTableRef = ref<TableInstance>(null);
|
const selectRow = (row?) => {
|
nextTick(() => {
|
const selectedRows = roleTableRef.value?.getSelectionRows();
|
if (row && selectedRows && !selectedRows.includes(row)) {
|
roleTableRef.value!.toggleRowSelection(row, undefined);
|
} else if (!row) {
|
roleTableRef.value!.clearSelection();
|
}
|
});
|
};
|
const getDrawerTableDataByID = async () => {
|
drawerTableLoading.value = true;
|
const res = await GetRoleByUserID({ UserID: currentOrgID }).finally(() => {
|
drawerTableLoading.value = false;
|
});
|
if (res?.Code === 0) {
|
drawerTableData.value = res.Data ?? [];
|
drawerTableData.value = res.Data;
|
for (const item of res.Data) {
|
if (item.Have) {
|
selectRow(item);
|
}
|
}
|
} else {
|
drawerTableData.value = [];
|
ElMessage.error('获取用户角色失败' + (res?.Message ? `，${JSON.stringify(res.Message)}` : ''));
|
}
|
};
|
|
const setProjectRole = async (RoleIds) => {
|
const res = await SetUserRole({ UserID: currentOrgID, RoleIds });
|
if (res?.Code === 0) {
|
if (res.Data) {
|
getDrawerTableDataByID();
|
ElMessage.success('设置成功');
|
} else {
|
ElMessage.info('未修改');
|
}
|
} else {
|
ElMessage.error('设置失败' + (res?.Message ? `，${JSON.stringify(res.Message)}` : ''));
|
}
|
};
|
const submitSelectRole = () => {
|
const selectedRows = roleTableRef.value?.getSelectionRows();
|
const RoleIds = selectedRows.map((item) => item.ID);
|
|
setProjectRole(RoleIds);
|
};
|
|
const openDrawer = (row?) => {
|
const { ID } = row;
|
currentOrgID = ID;
|
getDrawerTableDataByID();
|
drawerIsShow.value = true;
|
};
|
//#endregion
|
</script>
|
<style scoped lang="scss">
|
:deep(.normal-row) {
|
cursor: default;
|
}
|
:deep(.move-row) {
|
cursor: move;
|
}
|
|
:deep(.el-drawer__body) {
|
padding: 20px;
|
}
|
.custom-drawer {
|
:deep(.el-overlay) {
|
position: absolute;
|
background-color: inherit;
|
}
|
}
|
</style>
|
