182 lines
4.4 KiB
Vue
182 lines
4.4 KiB
Vue
<template>
|
|
<div class="manage-container">
|
|
<!-- <el-form ref="queryForm" :model="queryForm" label-width="80px">-->
|
|
<!-- <vab-query-form>-->
|
|
<!-- <el-form-item width="100" prop="name" label="用户姓名">-->
|
|
<!-- <el-input-->
|
|
<!-- v-model="queryForm.name"-->
|
|
<!-- placeholder="请输入用户姓名"-->
|
|
<!-- ></el-input>-->
|
|
<!-- </el-form-item>-->
|
|
<!-- <el-form-item width="100">-->
|
|
<!-- <el-button @click="resetForm()">重置</el-button>-->
|
|
<!-- <el-button type="primary" size="medium" @click="search">-->
|
|
<!-- 查询-->
|
|
<!-- </el-button>-->
|
|
<!-- </el-form-item>-->
|
|
<!-- </vab-query-form>-->
|
|
<!-- </el-form>-->
|
|
<el-table
|
|
v-loading="listLoading"
|
|
:data="userData"
|
|
border
|
|
stripe
|
|
style="width: 100%"
|
|
>
|
|
<el-table-column
|
|
prop="userId"
|
|
label="ID"
|
|
width="120"
|
|
align="center"
|
|
></el-table-column>
|
|
<el-table-column
|
|
prop="nickName"
|
|
label="姓名"
|
|
align="center"
|
|
></el-table-column>
|
|
<el-table-column
|
|
prop="phone"
|
|
label="联系方式"
|
|
width="260"
|
|
align="center"
|
|
></el-table-column>
|
|
<el-table-column
|
|
prop="email"
|
|
label="邮箱"
|
|
width="260"
|
|
align="center"
|
|
></el-table-column>
|
|
<el-table-column fixed="right" label="操作" width="200" align="center">
|
|
<template #default="{ row }">
|
|
<el-button
|
|
v-if="isBtnPerm('/alarmUser/addProjects')"
|
|
type="text"
|
|
@click="bindDevice(row)"
|
|
>
|
|
绑定项目
|
|
</el-button>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
<el-pagination
|
|
:background="background"
|
|
:current-page="queryForm.page"
|
|
:layout="layout"
|
|
:page-size="queryForm.size"
|
|
:total="total"
|
|
style="text-align: right"
|
|
@current-change="handleCurrentChange"
|
|
@size-change="handleSizeChange"
|
|
></el-pagination>
|
|
<bind-device ref="bind"></bind-device>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { doDelete, getList } from '@/api/alarmuser';
|
|
import bindDevice from '@/views/iot/alarmuser/bindDevice';
|
|
export default {
|
|
name: 'Index',
|
|
components: {
|
|
bindDevice,
|
|
},
|
|
data() {
|
|
return {
|
|
userData: [],
|
|
lazy: true,
|
|
layout: 'total, sizes, prev, pager, next, jumper',
|
|
total: 0,
|
|
background: true,
|
|
listLoading: true,
|
|
elementLoadingText: '正在加载...',
|
|
queryForm: {
|
|
page: 1,
|
|
size: 20,
|
|
},
|
|
};
|
|
},
|
|
computed: {
|
|
height() {
|
|
return 500;
|
|
},
|
|
},
|
|
methods: {
|
|
showData() {
|
|
this.fetchData();
|
|
},
|
|
async fetchData() {
|
|
this.listLoading = true;
|
|
const { data } = await getList(this.queryForm);
|
|
this.userData = data.items;
|
|
this.total = data.total;
|
|
setTimeout(() => {
|
|
this.listLoading = false;
|
|
}, 500);
|
|
},
|
|
search() {
|
|
this.fetchData();
|
|
},
|
|
resetForm() {
|
|
this.$refs.queryForm.resetFields();
|
|
},
|
|
handleAdd() {
|
|
this.$refs['edit'].showEdit();
|
|
},
|
|
bindDevice(row) {
|
|
this.$refs['bind'].bindDevice(row);
|
|
},
|
|
handleQuery() {
|
|
this.queryForm.page = 1;
|
|
this.fetchData();
|
|
},
|
|
handleSizeChange(val) {
|
|
this.queryForm.size = val;
|
|
this.fetchData();
|
|
},
|
|
handleCurrentChange(val) {
|
|
this.queryForm.page = val;
|
|
this.fetchData();
|
|
},
|
|
handleDelete(row) {
|
|
const that = this;
|
|
if (row.id) {
|
|
this.$confirm('你确定要删除当前项吗?', '提示', {
|
|
confirmButtonText: '确定',
|
|
cancelButtonText: '取消',
|
|
type: 'warning',
|
|
})
|
|
.then(() => {
|
|
const { msg } = doDelete({ userId: row.id });
|
|
this.$message({
|
|
type: 'success',
|
|
message: msg == undefined ? '删除成功' : msg,
|
|
});
|
|
setTimeout(function () {
|
|
that.fetchData();
|
|
}, 1000);
|
|
})
|
|
.catch(() => {
|
|
this.$message({
|
|
type: 'info',
|
|
message: '已取消删除',
|
|
});
|
|
});
|
|
}
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.manage-container {
|
|
width: 100%;
|
|
.vab-query-form {
|
|
margin-bottom: 30px;
|
|
.el-input {
|
|
width: 180px;
|
|
margin-right: 20px;
|
|
}
|
|
}
|
|
}
|
|
</style>
|