304 lines
9.6 KiB
Vue
304 lines
9.6 KiB
Vue
<template>
|
|
<!-- 账号锁定配置抽屉 -->
|
|
<el-drawer title="账号锁定配置" append-to-body v-model="authLockBox" size="60%">
|
|
<avue-crud
|
|
:option="authLockOption"
|
|
:table-loading="authLockLoading"
|
|
:data="authLockData"
|
|
ref="authLockCrud"
|
|
v-model="authLockForm"
|
|
v-model:page="authLockPage"
|
|
v-model:search="authLockSearch"
|
|
:before-open="authLockBeforeOpen"
|
|
@search-change="authLockSearchChange"
|
|
@search-reset="authLockSearchReset"
|
|
@current-change="authLockCurrentChange"
|
|
@size-change="authLockSizeChange"
|
|
@refresh-change="authLockRefreshChange"
|
|
@on-load="authLockOnLoad"
|
|
>
|
|
<template #lockTarget="{ row }">
|
|
<el-tag type="primary" size="small" effect="light">{{ row.lockTarget }}</el-tag>
|
|
</template>
|
|
<template #userName="{ row }">
|
|
{{ row.userName || '-' }}
|
|
</template>
|
|
<template #remoteIp="{ row }">
|
|
<el-tag type="primary" size="small" effect="light">{{ row.remoteIp || '暂无' }}</el-tag>
|
|
</template>
|
|
<template #lockType="{ row }">
|
|
<el-tag :type="row.lockType === 'SYSTEM' ? 'info' : 'danger'" size="small">
|
|
{{ row.lockTypeName }}
|
|
</el-tag>
|
|
</template>
|
|
<template #lockStatus="{ row }">
|
|
<el-tag
|
|
:type="row.expired ? 'info' : row.lockStatus === 'LOCKED' ? 'danger' : row.lockStatus === 'PRE_LOCKED' ? 'warning' : 'success'"
|
|
size="small"
|
|
>
|
|
{{ row.lockStatusName }}
|
|
</el-tag>
|
|
</template>
|
|
<template #lockBeginTime="{ row }">
|
|
{{ row.lockBeginTime || '立即生效' }}
|
|
</template>
|
|
<template #lockEndTime="{ row }">
|
|
{{ row.lockEndTime || '永久' }}
|
|
</template>
|
|
<template #menu="{ row }">
|
|
<el-button
|
|
text
|
|
type="primary"
|
|
icon="el-icon-view"
|
|
@click.stop="$refs.authLockCrud.rowView(row)"
|
|
>查看</el-button
|
|
>
|
|
<el-button
|
|
v-if="(row.lockStatus === 'LOCKED' || row.lockStatus === 'PRE_LOCKED') && !row.expired"
|
|
text
|
|
type="primary"
|
|
icon="el-icon-key"
|
|
@click.stop="handleAuthLockUnlock(row)"
|
|
>解锁</el-button
|
|
>
|
|
</template>
|
|
</avue-crud>
|
|
</el-drawer>
|
|
|
|
<!-- 手动锁定用户 -->
|
|
<el-dialog title="锁定用户" append-to-body v-model="lockUserBox" width="500px">
|
|
<el-form :model="lockUserForm" label-width="auto" :rules="lockUserRules" ref="lockUserFormRef">
|
|
<el-form-item label="用户账号">
|
|
<el-input :model-value="lockUserForm.account" disabled />
|
|
</el-form-item>
|
|
<el-form-item label="锁定原因" prop="lockReason">
|
|
<el-input
|
|
v-model="lockUserForm.lockReason"
|
|
type="textarea"
|
|
:rows="3"
|
|
placeholder="请输入锁定原因"
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item label="锁定开始" prop="lockBeginTime">
|
|
<el-date-picker
|
|
v-model="lockUserForm.lockBeginTime"
|
|
type="datetime"
|
|
placeholder="不填则立即生效"
|
|
value-format="YYYY-MM-DD HH:mm:ss"
|
|
style="width: 100%"
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item label="锁定结束" prop="lockEndTime">
|
|
<el-date-picker
|
|
v-model="lockUserForm.lockEndTime"
|
|
type="datetime"
|
|
placeholder="不填则永久锁定"
|
|
value-format="YYYY-MM-DD HH:mm:ss"
|
|
style="width: 100%"
|
|
/>
|
|
</el-form-item>
|
|
</el-form>
|
|
<template #footer>
|
|
<span class="dialog-footer">
|
|
<el-button @click="lockUserBox = false">取 消</el-button>
|
|
<el-button type="primary" :loading="lockSubmitLoading" @click="submitLockUser">确 定</el-button>
|
|
</span>
|
|
</template>
|
|
</el-dialog>
|
|
|
|
<!-- 解锁原因确认 -->
|
|
<el-dialog title="解锁确认" append-to-body v-model="unlockReasonBox" width="450px">
|
|
<el-form :model="unlockReasonForm" label-width="auto">
|
|
<el-form-item label="解锁原因">
|
|
<el-input
|
|
v-model="unlockReasonForm.unlockReason"
|
|
type="textarea"
|
|
:rows="3"
|
|
placeholder="请输入解锁原因（可选）"
|
|
/>
|
|
</el-form-item>
|
|
</el-form>
|
|
<template #footer>
|
|
<span class="dialog-footer">
|
|
<el-button @click="unlockReasonBox = false">取 消</el-button>
|
|
<el-button type="primary" :loading="unlockSubmitLoading" @click="submitUnlockReason">确 定</el-button>
|
|
</span>
|
|
</template>
|
|
</el-dialog>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
getAuthLockPage,
|
|
getAuthLockDetail,
|
|
authLockUnlock,
|
|
lockUser,
|
|
} from '@/api/system/authlock';
|
|
import { validatenull } from '@/utils/validate';
|
|
import { authLockOption } from '@/option/system/authlock';
|
|
|
|
export default {
|
|
name: 'AuthLock',
|
|
emits: ['lock-success'],
|
|
data() {
|
|
return {
|
|
authLockOption,
|
|
// 锁定日志抽屉
|
|
authLockBox: false,
|
|
authLockLoading: false,
|
|
authLockData: [],
|
|
authLockForm: {},
|
|
authLockSearch: {},
|
|
authLockPage: {
|
|
pageSize: 10,
|
|
currentPage: 1,
|
|
total: 0,
|
|
},
|
|
// 手动锁定用户
|
|
lockUserBox: false,
|
|
lockUserForm: {},
|
|
lockUserRules: {
|
|
lockReason: [{ required: true, message: '请输入锁定原因', trigger: 'blur' }],
|
|
lockEndTime: [
|
|
{
|
|
validator: (rule, value, callback) => {
|
|
if (!value) {
|
|
callback();
|
|
} else if (this.lockUserForm.lockBeginTime && value < this.lockUserForm.lockBeginTime) {
|
|
callback(new Error('结束时间不能早于开始时间'));
|
|
} else if (!this.lockUserForm.lockBeginTime && value < new Date().toISOString().slice(0, 19).replace('T', ' ')) {
|
|
callback(new Error('结束时间不能早于当前时间'));
|
|
} else {
|
|
callback();
|
|
}
|
|
},
|
|
trigger: 'change',
|
|
},
|
|
],
|
|
},
|
|
// 解锁确认
|
|
unlockReasonBox: false,
|
|
unlockReasonForm: {},
|
|
currentUnlockId: null,
|
|
lockSubmitLoading: false,
|
|
unlockSubmitLoading: false,
|
|
};
|
|
},
|
|
methods: {
|
|
// ========== 对外暴露的入口方法 ==========
|
|
|
|
openLockLog() {
|
|
this.authLockSearch = {};
|
|
this.authLockPage.currentPage = 1;
|
|
this.authLockBox = true;
|
|
this.$nextTick(() => {
|
|
this.authLockOnLoad(this.authLockPage);
|
|
});
|
|
},
|
|
openLockUser(userId, account) {
|
|
this.lockUserForm = {
|
|
userId,
|
|
account,
|
|
lockReason: '',
|
|
lockBeginTime: '',
|
|
lockEndTime: '',
|
|
};
|
|
this.lockUserBox = true;
|
|
},
|
|
|
|
// ========== 锁定日志列表 ==========
|
|
|
|
authLockBeforeOpen(done, type) {
|
|
if (type === 'view') {
|
|
getAuthLockDetail(this.authLockForm.id).then(res => {
|
|
this.authLockForm = res.data.data;
|
|
});
|
|
}
|
|
done();
|
|
},
|
|
authLockSearchChange(params, done) {
|
|
this.authLockSearch = params;
|
|
this.authLockPage.currentPage = 1;
|
|
this.authLockOnLoad(this.authLockPage, params);
|
|
done();
|
|
},
|
|
authLockSearchReset() {
|
|
this.authLockSearch = {};
|
|
this.authLockPage.currentPage = 1;
|
|
this.authLockOnLoad(this.authLockPage);
|
|
},
|
|
authLockSizeChange(pageSize) {
|
|
this.authLockPage.pageSize = pageSize;
|
|
},
|
|
authLockCurrentChange(currentPage) {
|
|
this.authLockPage.currentPage = currentPage;
|
|
},
|
|
authLockRefreshChange() {
|
|
this.authLockOnLoad(this.authLockPage, this.authLockSearch);
|
|
},
|
|
authLockOnLoad(page, params = {}) {
|
|
this.authLockLoading = true;
|
|
const merged = Object.assign({}, params, this.authLockSearch);
|
|
const query = Object.fromEntries(Object.entries(merged).filter(([, val]) => !validatenull(val)));
|
|
getAuthLockPage(page.currentPage, page.pageSize, query)
|
|
.then(res => {
|
|
const data = res.data.data;
|
|
this.authLockPage.total = data.total;
|
|
this.authLockData = data.records;
|
|
this.authLockLoading = false;
|
|
})
|
|
.catch(() => {
|
|
this.authLockLoading = false;
|
|
});
|
|
},
|
|
|
|
// ========== 解锁操作 ==========
|
|
|
|
handleAuthLockUnlock(row) {
|
|
this.currentUnlockId = row.id;
|
|
this.unlockReasonForm = { unlockReason: '' };
|
|
this.unlockReasonBox = true;
|
|
},
|
|
submitUnlockReason() {
|
|
this.unlockSubmitLoading = true;
|
|
authLockUnlock(this.currentUnlockId, this.unlockReasonForm.unlockReason)
|
|
.then(() => {
|
|
this.unlockSubmitLoading = false;
|
|
this.unlockReasonBox = false;
|
|
this.$message({ type: 'success', message: '解锁成功!' });
|
|
this.authLockOnLoad(this.authLockPage, this.authLockSearch);
|
|
})
|
|
.catch(() => {
|
|
this.unlockSubmitLoading = false;
|
|
this.$message({ type: 'error', message: '解锁失败，请重试!' });
|
|
});
|
|
},
|
|
|
|
// ========== 手动锁定用户 ==========
|
|
|
|
submitLockUser() {
|
|
this.$refs.lockUserFormRef.validate(valid => {
|
|
if (!valid) return;
|
|
this.lockSubmitLoading = true;
|
|
lockUser(
|
|
this.lockUserForm.userId,
|
|
this.lockUserForm.lockReason,
|
|
this.lockUserForm.lockBeginTime,
|
|
this.lockUserForm.lockEndTime
|
|
)
|
|
.then(() => {
|
|
this.lockSubmitLoading = false;
|
|
this.lockUserBox = false;
|
|
this.$message({ type: 'success', message: '锁定成功!' });
|
|
this.$emit('lock-success');
|
|
})
|
|
.catch(() => {
|
|
this.lockSubmitLoading = false;
|
|
this.$message({ type: 'error', message: '锁定失败，请重试!' });
|
|
});
|
|
});
|
|
},
|
|
},
|
|
};
|
|
</script>
|