<script lang="js" setup name="AuthManage">
|
import { reactive, ref, onMounted } from 'vue';
|
import addEdit from './addEdit.vue';
|
import {
|
Search,
|
Plus
|
} from '@element-plus/icons-vue';
|
import useElement from "@/hooks/useElement.js";
|
|
import {
|
getAllAuthInf,
|
delAuth,
|
|
} from '@/api/auth.js';
|
const { $loading, $message, $confirm } = useElement();
|
|
const currentAreaId = ref();
|
|
const tableData = reactive([]);
|
|
const filter = reactive({
|
name: '',
|
state: 0,
|
type: 0
|
});
|
|
const page = reactive({
|
currentPage: 1,
|
pageSize: 20,
|
total: 0
|
});
|
|
const info = ref({});
|
|
const disabled = ref(false);
|
const background = ref(false);
|
|
const addEditVisible = ref(false);
|
const addEditTitle = ref('');
|
|
function itemClickHandler(item) {
|
console.log(item, '====item', item.data);
|
// areaId lockName lockState lockType pageNum pageSize
|
currentAreaId.value = item.data.id;
|
getList();
|
}
|
|
function okHandle() {
|
addEditVisible.value = false;
|
getList();
|
}
|
|
function handleSizeChange(val) {
|
page.pageSize = val;
|
getList();
|
}
|
|
function handleCurrentChange(val) {
|
page.currentPage = val;
|
getList();
|
}
|
|
function edit(scope) {
|
addEditTitle.value = '编辑授权';
|
info.value = scope.row;
|
console.log('edit', scope.row, '=============');
|
|
addEditVisible.value = true;
|
}
|
|
function add() {
|
addEditTitle.value = '添加授权';
|
info.value = undefined;
|
addEditVisible.value = true;
|
}
|
|
function del(scope) {
|
$confirm('删除该授权', () => {
|
let loading = $loading();
|
delAuth([scope.row.id]).then((res) => {
|
let { code, data } = res;
|
if (code && data) {
|
$message({
|
type: 'success',
|
message: '删除成功!'
|
});
|
getList();
|
} else {
|
$message({
|
type: 'error',
|
message: '删除失败!'
|
});
|
}
|
loading.close();
|
});
|
});
|
}
|
|
function getList() {
|
// areaId, pageNum, pageSize, state, uname
|
let params = {
|
pageNum: page.currentPage,
|
pageSize: page.pageSize,
|
state: filter.state,
|
uname: filter.name,
|
areaId: currentAreaId.value,
|
}
|
|
getAllAuthInf(params).then((res) => {
|
let { code, data, data2 } = res;
|
let _total = 0;
|
let _list = [];
|
if (code && data) {
|
let { list, total } = data2;
|
_list = list;
|
_total = total;
|
}
|
tableData.length = 0;
|
tableData.push(..._list);
|
page.total = _total;
|
})
|
}
|
|
onMounted(() => {
|
})
|
</script>
|
|
<template>
|
<div class="page-wrapper">
|
<div class="page-header">
|
<div class="hdw-card-container">
|
<hdw-card title="区域列表" is-full>
|
<hdw-tree @item-click="itemClickHandler"></hdw-tree>
|
</hdw-card>
|
</div>
|
</div>
|
<div class="page-content">
|
<hdw-card is-full>
|
<div class="page-content-wrapper">
|
<div class="page-content-tools">
|
<el-button type="primary" size="small" :icon="Plus" @click="add"
|
>添加授权</el-button
|
>
|
|
|
<div class="tools-filter">
|
<div class="tools-filter-item">
|
<div class="filter-label">授权人员：</div>
|
<div class="filter-content">
|
<el-input v-model="filter.name" @input="getList" size="small"></el-input>
|
</div>
|
</div>
|
<!-- <div class="tools-filter-item">
|
<div class="filter-label">授权状态：</div>
|
<div class="filter-content">
|
<el-select
|
v-model="filter.state"
|
placeholder="请选择"
|
size="small"
|
style="width: 180px"
|
>
|
<el-option label="--请选择--" :value="0" />
|
<el-option label="未安装" :value="1" />
|
<el-option label="已安装" :value="2" />
|
</el-select>
|
</div>
|
</div> -->
|
</div>
|
<el-button type="primary" size="small" :icon="Search" @click="getList"
|
>查询</el-button
|
>
|
</div>
|
<div class="page-content-table">
|
<div class="pos-rel">
|
<div class="pos-abs">
|
<el-table
|
:data="tableData"
|
border
|
style="width: 100%; height: 100%"
|
>
|
<el-table-column type="index" width="50" />
|
<el-table-column
|
prop="uname"
|
align="center"
|
label="授权人员"
|
width="120"
|
/>
|
<el-table-column
|
prop="keyName"
|
align="center"
|
label="授权钥匙"
|
width="120"
|
/>
|
<el-table-column
|
prop="lockName"
|
align="center"
|
label="授权锁具"
|
width="120"
|
/>
|
<el-table-column
|
prop="descript"
|
align="center"
|
min-width="180"
|
label="任务说明"
|
/>
|
<el-table-column
|
prop="state"
|
align="center"
|
label="状态"
|
width="80"
|
/>
|
<el-table-column
|
align="center"
|
fixed="right"
|
label="操作"
|
width="180"
|
>
|
<template #default="scope">
|
<el-button type="primary" size="small" @click="edit(scope)">编辑</el-button>
|
<el-button type="danger" size="small" @click="del(scope)">删除</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
</div>
|
</div>
|
</div>
|
<div class="page-content-page">
|
<div class="page-tool"></div>
|
<div class="el-page-container">
|
<el-pagination
|
v-model:current-page="page.currentPage"
|
v-model:page-size="page.pageSize"
|
:page-sizes="[20, 40, 60, 80, 100, 200, 300, 400]"
|
size="small"
|
:disabled="disabled"
|
:background="background"
|
layout="total, sizes, prev, pager, next, jumper"
|
:total="page.total"
|
@size-change="handleSizeChange"
|
@current-change="handleCurrentChange"
|
/>
|
</div>
|
<div class="page-tool"></div>
|
</div>
|
</div>
|
</hdw-card>
|
</div>
|
<div class="page-footer"></div>
|
<!-- 编辑 新建 -->
|
<el-dialog
|
v-model="addEditVisible"
|
:title="addEditTitle"
|
width="500"
|
align-center
|
:close-on-click-modal="false"
|
>
|
<add-edit
|
v-if="addEditVisible"
|
:info="info"
|
@close="addEditVisible = false"
|
@ok="okHandle"
|
></add-edit>
|
</el-dialog>
|
</div>
|
</template>
|
|
<style scoped lang="scss">
|
.page-wrapper {
|
display: flex;
|
flex-direction: row;
|
padding: 8px;
|
height: 100%;
|
.page-content {
|
flex: 1;
|
}
|
}
|
|
.page-content-wrapper {
|
display: flex;
|
flex-direction: column;
|
height: 100%;
|
.page-content-tools {
|
padding-bottom: 8px;
|
}
|
.page-content-table {
|
flex: 1;
|
margin-left: -8px;
|
margin-right: -8px;
|
}
|
.page-content-page {
|
padding: 8px 8px 0 8px;
|
text-align: center;
|
.el-page-container {
|
display: inline-block;
|
padding: 0 16px;
|
}
|
.page-tool {
|
display: inline-block;
|
}
|
}
|
}
|
|
.hdw-card-container {
|
width: 240px;
|
padding-right: 8px;
|
height: 100%;
|
}
|
.pos-rel {
|
position: relative;
|
width: 100%;
|
height: 100%;
|
.pos-abs {
|
position: absolute;
|
top: 0;
|
bottom: 0;
|
left: 0;
|
right: 0;
|
width: 100%;
|
height: 100%;
|
}
|
}
|
.tools-filter {
|
display: inline-block;
|
font-size: 14px;
|
.tools-filter-item {
|
display: inline-block;
|
margin-right: 8px;
|
.filter-label {
|
display: inline-block;
|
}
|
.filter-content {
|
display: inline-block;
|
}
|
}
|
}
|
</style>
|
