forked from dyf/dyf-vue-ui
APP用户管理页面
This commit is contained in:
23
src/api/userApp/index.ts
Normal file
23
src/api/userApp/index.ts
Normal file
@ -0,0 +1,23 @@
|
||||
import request from '@/utils/request';
|
||||
import { AxiosPromise } from 'axios';
|
||||
/**
|
||||
* 查询设备列表
|
||||
* @param query
|
||||
*/
|
||||
export const userList = (params): AxiosPromise => {
|
||||
return request({
|
||||
url: '/app/user/list',
|
||||
method: 'get',
|
||||
params
|
||||
});
|
||||
};
|
||||
// 绑定设备列表
|
||||
export const deviceList = (params): AxiosPromise => {
|
||||
return request({
|
||||
url: '/api/app/device',
|
||||
method: 'get',
|
||||
params
|
||||
});
|
||||
};
|
||||
|
||||
export default { userList,deviceList }
|
0
src/api/userApp/types.ts
Normal file
0
src/api/userApp/types.ts
Normal file
BIN
src/assets/images/kfz.png
Normal file
BIN
src/assets/images/kfz.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 11 KiB |
147
src/views/appUser/index.vue
Normal file
147
src/views/appUser/index.vue
Normal file
@ -0,0 +1,147 @@
|
||||
<template>
|
||||
<div class="p-2">
|
||||
<transition :enter-active-class="proxy?.animate.searchAnimate.enter"
|
||||
:leave-active-class="proxy?.animate.searchAnimate.leave">
|
||||
<div v-show="showSearch" class="mb-[10px]">
|
||||
<el-card shadow="hover">
|
||||
<el-form ref="queryFormRef" :model="queryParams" :inline="true">
|
||||
<el-form-item label="APP账号" prop="username">
|
||||
<el-input v-model="queryParams.username" placeholder="请输入APP账号" clearable @keyup.enter="handleQuery" />
|
||||
</el-form-item>
|
||||
<el-form-item label="账号状态" prop="enabled">
|
||||
<el-select v-model="queryParams.enabled" clearable placeholder="账号状态" style="width: 120px"
|
||||
class="filter-item">
|
||||
<el-option label="启用" :value="true" />
|
||||
<el-option label="禁用" :value="false" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
|
||||
<el-button icon="Refresh" @click="resetQuery">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-card>
|
||||
</div>
|
||||
</transition>
|
||||
|
||||
<el-card shadow="hover">
|
||||
<el-table ref="operLogTableRef" v-loading="loading" :data="operlogList" border>
|
||||
<el-table-column label="APP账号" align="center" prop="userName" />
|
||||
<el-table-column label="账号状态" align="center" prop="status">
|
||||
<template #default="scope">
|
||||
<el-switch v-model="scope.row.status" active-color="#409EFF" inactive-color="#F56C6C" />
|
||||
</template>
|
||||
<!-- @change="handleStatusChange(scope.row)" -->
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="创建时间" align="center" prop="loginDate" width="180">
|
||||
<template #default="scope">
|
||||
<span>{{ proxy.parseTime(scope.row.loginDate) }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" fixed="right" align="center">
|
||||
<template #default="scope">
|
||||
<el-tooltip content="查看绑定设备" placement="top">
|
||||
<el-button link type="primary" icon="View" @click="handleView(scope.row)"> </el-button>
|
||||
</el-tooltip>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<pagination v-show="total > 0" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize"
|
||||
:total="total" @pagination="getList" />
|
||||
</el-card>
|
||||
<!-- 操作日志详细 -->
|
||||
<userInfoDialog ref="userInfoDialogRef" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup name="userApp" lang="ts">
|
||||
import api from '@/api/userApp';
|
||||
import { OperLogQuery } from '@/api/monitor/operlog/types';
|
||||
import UserInfoDialog from './user-info-dialog.vue';
|
||||
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
|
||||
const operlogList = ref([]);
|
||||
const loading = ref(true);
|
||||
const showSearch = ref(true);
|
||||
const ids = ref<Array<number | string>>([]);
|
||||
const total = ref(0);
|
||||
const userInfoDialogRef = ref<ElTableInstance>();
|
||||
const queryFormRef = ref<ElFormInstance>();
|
||||
|
||||
const data = reactive<PageData<OperLogForm, OperLogQuery>>({
|
||||
form: {
|
||||
operId: undefined,
|
||||
tenantId: undefined,
|
||||
title: '',
|
||||
businessType: 0,
|
||||
businessTypes: undefined,
|
||||
method: '',
|
||||
requestMethod: '',
|
||||
operatorType: 0,
|
||||
operName: '',
|
||||
deptName: '',
|
||||
operUrl: '',
|
||||
operIp: '',
|
||||
operLocation: '',
|
||||
operParam: '',
|
||||
jsonResult: '',
|
||||
status: 0,
|
||||
errorMsg: '',
|
||||
operTime: '',
|
||||
costTime: 0
|
||||
},
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
username: '',
|
||||
enabled: ''
|
||||
},
|
||||
rules: {}
|
||||
});
|
||||
|
||||
const { queryParams, form } = toRefs(data);
|
||||
|
||||
/** 查询登录日志 */
|
||||
const getList = async () => {
|
||||
loading.value = true;
|
||||
const res = await api.userList(queryParams.value);
|
||||
operlogList.value = res.rows;
|
||||
total.value = res.total;
|
||||
loading.value = false;
|
||||
};
|
||||
|
||||
/** 搜索按钮操作 */
|
||||
const handleQuery = () => {
|
||||
queryParams.value.pageNum = 1;
|
||||
getList();
|
||||
};
|
||||
/** 重置按钮操作 */
|
||||
const resetQuery = () => {
|
||||
queryFormRef.value?.resetFields();
|
||||
queryParams.value.pageNum = 1;
|
||||
};
|
||||
/** 详细按钮操作 */
|
||||
const handleView = (row: any) => {
|
||||
userInfoDialogRef.value.openDialog(row);
|
||||
};
|
||||
const handleStatusChange = (row) => {
|
||||
const text = row.enabled ? '启用' : '禁用'
|
||||
proxy?.$modal.confirm('此操作将 "' + text + '" ' + row.username + ', 是否继续?', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
crudAppUser.edit(row).then(res => {
|
||||
proxy?.$modal.msgSuccess(text + '成功')
|
||||
}).catch(() => {
|
||||
row.enabled = !row.enabled
|
||||
})
|
||||
}).catch(() => {
|
||||
row.enabled = !row.enabled
|
||||
})
|
||||
};
|
||||
onMounted(() => {
|
||||
getList();
|
||||
});
|
||||
</script>
|
147
src/views/appUser/user-info-dialog.vue
Normal file
147
src/views/appUser/user-info-dialog.vue
Normal file
@ -0,0 +1,147 @@
|
||||
<template>
|
||||
<el-dialog v-model="open" title="绑定设备列表" width="50%" append-to-body close-on-click-modal @closed="info = null">
|
||||
<!-- 搜索栏 -->
|
||||
<div class="head-container">
|
||||
<el-input v-model="queryParams.deviceName" clearable placeholder="请输入设备名称" style="width: 200px;"
|
||||
class="filter-item" />
|
||||
<el-input v-model="queryParams.deviceMac" clearable placeholder="请输入设备MAC" style="width: 200px;"
|
||||
class="filter-item" />
|
||||
<el-input v-model="queryParams.deviceImei" clearable placeholder="请输入设备IMEI" style="width: 200px;"
|
||||
class="filter-item" />
|
||||
<el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
|
||||
<el-button icon="Refresh" @click="resetQuery">重置</el-button>
|
||||
</div>
|
||||
<!-- 表格 -->
|
||||
<el-table v-loading="bindingLoading" :data="boundDevices" style="width: 100%; margin-top: 20px;" height="400">
|
||||
<el-table-column prop="deviceName" label="设备名称" />
|
||||
<el-table-column prop="devicePic" label="设备图片">
|
||||
<template #default="scope">
|
||||
<el-image style="width: 40px; height: 40px" :src="scope.row.devicePic"
|
||||
:preview-src-list="[scope.row.devicePic]" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="deviceMac" label="设备MAC" />
|
||||
<el-table-column prop="deviceImei" label="设备IMEI" />
|
||||
<el-table-column prop="deviceTypeName" label="设备类型" />
|
||||
<el-table-column prop="deviceStatus" label="状态">
|
||||
<template #default="scope">
|
||||
<span>{{ scope.row.deviceStatus === 1 ? '正常' : '失效' }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="createTime" label="绑定日期" />
|
||||
<el-table-column label="操作" width="100" align="center">
|
||||
<template #default="scope">
|
||||
<el-button type="danger" plain @click="handleUnbind(scope.row)">解绑</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<!-- 分页 -->
|
||||
<pagination v-show="total > 0" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize"
|
||||
:total="total" @pagination="getList" />
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import type { OperLogForm } from '@/api/monitor/operlog/types';
|
||||
import 'vue-json-pretty/lib/styles.css';
|
||||
import api from '@/api/userApp';
|
||||
const open = ref(false);
|
||||
const info = ref<OperLogForm | null>(null);
|
||||
const total = ref(0);
|
||||
const boundDevices = ref()
|
||||
const bindingLoading = ref(true)
|
||||
const queryParams = reactive({
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
deviceName: '',
|
||||
deviceMac: '',
|
||||
deviceImei: ''
|
||||
})
|
||||
function openDialog(row: OperLogForm) {
|
||||
info.value = row;
|
||||
open.value = true;
|
||||
getList();
|
||||
}
|
||||
|
||||
function closeDialog() {
|
||||
open.value = false;
|
||||
};
|
||||
/** 搜索按钮操作 */
|
||||
const handleQuery = () => {
|
||||
queryParams.pageNum = 1;
|
||||
getList();
|
||||
};
|
||||
/** 重置按钮操作 */
|
||||
const resetQuery = () => {
|
||||
queryParams.pageNum = 1;
|
||||
};
|
||||
// 列表
|
||||
const getList = async () => {
|
||||
bindingLoading.value = true;
|
||||
const res = await api.deviceList(queryParams);
|
||||
boundDevices.value = res.rows;
|
||||
total.value = res.total;
|
||||
bindingLoading.value = false;
|
||||
};
|
||||
const handleUnbind = (row) => {
|
||||
proxy?.$modal.confirm.confirm('此操作将解绑设备 "' + row.deviceName + '", 是否继续?', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
const data = {
|
||||
deviceMac: row.deviceMac,
|
||||
customerId: info.value.id
|
||||
}
|
||||
api.deviceList(data).then(() => {
|
||||
proxy?.$modal.msgSuccess({ type: 'success', message: '解绑成功!' })
|
||||
getList()
|
||||
})
|
||||
}).catch(() => { })
|
||||
}
|
||||
defineExpose({
|
||||
openDialog,
|
||||
closeDialog
|
||||
});
|
||||
|
||||
/**
|
||||
* json转为对象
|
||||
* @param data 原始数据
|
||||
*/
|
||||
function formatToJsonObject(data: string) {
|
||||
try {
|
||||
return JSON.parse(data);
|
||||
} catch (error) {
|
||||
return data;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 字典信息
|
||||
*/
|
||||
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
|
||||
const { sys_oper_type } = toRefs<any>(proxy?.useDict('sys_oper_type'));
|
||||
const typeFormat = (row: OperLogForm) => {
|
||||
return proxy?.selectDictLabel(sys_oper_type.value, row.businessType);
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
/**
|
||||
label宽度固定
|
||||
*/
|
||||
:deep(.el-descriptions__label) {
|
||||
min-width: 100px;
|
||||
}
|
||||
|
||||
/**
|
||||
文字超过 换行显示
|
||||
*/
|
||||
:deep(.el-descriptions__content) {
|
||||
max-width: 300px;
|
||||
}
|
||||
|
||||
.filter-item {
|
||||
margin-right: 10px;
|
||||
}
|
||||
</style>
|
@ -1,23 +1,36 @@
|
||||
<template>
|
||||
<div class="app-container home">
|
||||
<el-row :gutter="20">
|
||||
<el-col :sm="24" :lg="12" style="padding-left: 20px">
|
||||
</el-col>
|
||||
<el-col :sm="24" :lg="12" style="padding-left: 20px">
|
||||
<el-col :sm="24" :lg="12">
|
||||
<div class="kfzIMG">
|
||||
<img src="@/assets/images/kfz.png" alt="" class="kfIMG">
|
||||
<p>功能开发中....敬请期待</p>
|
||||
</div>
|
||||
</el-col>
|
||||
|
||||
</el-row>
|
||||
<el-divider />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup name="Index" lang="ts">
|
||||
const goTarget = (url: string) => {
|
||||
window.open(url, '__blank');
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.home {
|
||||
.kfzIMG {
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
position: absolute;
|
||||
transform: translate(-50%, 100%);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.kfIMG {
|
||||
width: 60%;
|
||||
}
|
||||
}
|
||||
.el-divider--horizontal{
|
||||
border: none;
|
||||
}
|
||||
</style>
|
||||
|
Reference in New Issue
Block a user