dyf/dyf-vue-ui
1
0
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

设备管理，设备列表，客户列表功能完善提交

Browse Source
This commit is contained in:
fengerli
2025-07-05 14:30:12 +08:00
parent 1aa9eb23e0
commit 9715c8755d
22 changed files with 633 additions and 326 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
.env.development
View File

@ -1,5 +1,5 @@
# 页面标题
VITE_APP_TITLE = RuoYi-Vue-Plus多租户管理系统11
VITE_APP_TITLE = 物联网管理系统
# 开发环境配置
VITE_APP_ENV = 'development'

2
.env.production
View File

@ -1,5 +1,5 @@
# 页面标题
VITE_APP_TITLE = RuoYi-Vue-Plus多租户管理系统
VITE_APP_TITLE = 物联网管理系统
# 生产环境配置
VITE_APP_ENV = 'production'

2
index.html
View File

@ -6,7 +6,7 @@
<meta name="renderer" content="webkit" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
<link rel="icon" href="/favicon.ico" />
<title>RuoYi-Vue-Plus多租户管理系统</title>
<title>物联网管理系统</title>
<!--[if lt IE 11
]><script>
window.location.href = '/html/ie.html';

5
package.json
View File

@ -1,8 +1,8 @@
{
"$schema": "https://json.schemastore.org/package",
"name": "ruoyi-vue-plus",
"name": "fys",
"version": "5.4.0-2.4.0",
"description": "RuoYi-Vue-Plus多租户管理系统",
"description": "物联网管理系统",
"author": "LionLi",
"license": "MIT",
"type": "module",
@ -35,6 +35,7 @@
"image-conversion": "2.1.1",
"js-cookie": "3.0.5",
"jsencrypt": "3.3.2",
"mitt": "^3.0.1",
"nprogress": "0.2.0",
"pinia": "3.0.2",
"screenfull": "6.0.2",

BIN
public/favicon.ico
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 7.9 KiB

BIN
public/favicon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 19 KiB

58
src/api/equipmentManagement/device/index.ts
View File

@ -38,12 +38,66 @@ export const deleteDevice = (ids: any): AxiosPromise<deviceVO[]> => {
})
}
// 设备下拉框
export const deviceTypeAll=()=> {
export const deviceTypeAll = () => {
return request({
url: '/api/deviceType/all',
method: 'get',
})
}
export default { deviceList, addDevice, updateDevice, deleteDevice,deviceTypeAll }
// 设备类型
export const getCommunicationMode = (params: any) => {
return request({
url: '/api/deviceType/communicationMode',
method: 'get',
params
})
}
// 分配客户
export const deviceAssignCustomer = (data: any) => {
return request({
url: '/api/device/assignCustomer',
method: 'put',
data
})
}
// 客户下拉框
export const userAllCustomerAll = () => {
return request({
url: '/api/customers/allCustomer',
method: 'get',
})
}
// 解绑
export const deviceUnbind = (data:any) => {
return request({
url: '/api/device/unbind',
method: 'post',
data
})
}
// 撤回
export const withdrawDevice = (data:any) => {
return request({
url: '/api/device/withdraw',
method: 'post',
data
})
}
// 下载模板
export const deviceTemplate=()=> {
return request({
url: '/api/device/template',
method: ' GET',
})
}
// 导入文件excel
export const devicDeimport = () => {
return `${import.meta.env.VITE_APP_BASE_API}/api/device/import`
}
export default { deviceList, addDevice, updateDevice, deleteDevice, deviceTypeAll, getCommunicationMode, userAllCustomerAll, deviceAssignCustomer, deviceUnbind,withdrawDevice,deviceTemplate,devicDeimport }

BIN
src/assets/images/avatar.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.8 KiB

BIN
src/assets/images/下载.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 19 KiB

BIN
src/assets/logo/logo.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 7.9 KiB

After

Width:  |  Height:  |  Size: 19 KiB

45
src/layout/components/Navbar.vue
View File

@ -1,32 +1,26 @@
<template>
<div class="navbar">
<hamburger id="hamburger-container" :is-active="appStore.sidebar.opened" class="hamburger-container" @toggle-click="toggleSideBar" />
<hamburger id="hamburger-container" :is-active="appStore.sidebar.opened" class="hamburger-container"
@toggle-click="toggleSideBar" />
<breadcrumb v-if="!settingsStore.topNav" id="breadcrumb-container" class="breadcrumb-container" />
<top-nav v-if="settingsStore.topNav" id="topmenu-container" class="topmenu-container" />
<div class="right-menu flex align-center">
<template v-if="appStore.device !== 'mobile'">
<el-select
v-if="userId === 1 && tenantEnabled"
v-model="companyName"
class="min-w-244px"
clearable
filterable
reserve-keyword
:placeholder="proxy.$t('navbar.selectTenant')"
@change="dynamicTenantEvent"
@clear="dynamicClearEvent"
>
<el-option v-for="item in tenantList" :key="item.tenantId" :label="item.companyName" :value="item.tenantId"> </el-option>
<el-select v-if="userId === 1 && tenantEnabled" v-model="companyName" class="min-w-244px" clearable filterable
reserve-keyword :placeholder="proxy.$t('navbar.selectTenant')" @change="dynamicTenantEvent"
@clear="dynamicClearEvent">
<el-option v-for="item in tenantList" :key="item.tenantId" :label="item.companyName" :value="item.tenantId">
</el-option>
<template #prefix><svg-icon icon-class="company" class="el-input__icon input-icon" /></template>
</el-select>
<search-menu ref="searchMenuRef" />
<!-- <search-menu ref="searchMenuRef" />
<el-tooltip content="搜索" effect="dark" placement="bottom">
<div class="right-menu-item hover-effect" @click="openSearchMenu">
<svg-icon class-name="search-icon" icon-class="search" />
</div>
</el-tooltip>
</el-tooltip> -->
<!-- 消息 -->
<!-- <el-tooltip :content="proxy.$t('navbar.message')" effect="dark" placement="bottom">
<div>
@ -65,7 +59,9 @@
<div class="avatar-container">
<el-dropdown class="right-menu-item hover-effect" trigger="click" @command="handleCommand">
<div class="avatar-wrapper">
<img :src="userStore.avatar" class="user-avatar" />
<!-- <img :src="userStore.avatar" class="user-avatar" /> -->
<img src="@/assets/images/avatar.png" class="user-avatar" />
<div style="margin-left: 10px;">{{ useUserStore().roles[0] }}</div>
<el-icon><caret-bottom /></el-icon>
</div>
<template #dropdown>
@ -109,6 +105,7 @@ const newNotice = ref(<number>0);
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const userId = ref(userStore.userId);
console.log(useUserStore().roles[0], 'userStoreuserStoreuserStore');
const companyName = ref(undefined);
@ -287,21 +284,25 @@ watch(
.avatar-wrapper {
margin-top: 5px;
position: relative;
display: flex;
align-items: center;
.user-avatar {
cursor: pointer;
width: 40px;
height: 40px;
width: 20px;
height: 20px;
border-radius: 10px;
margin-top: 10px;
display: flex;
// margin-top: 10px;
}
i {
cursor: pointer;
position: absolute;
right: -20px;
top: 25px;
font-size: 12px;
right: -28px;
top: -2px;
font-size: 21px;
}
}
}

2
src/layout/components/Sidebar/Logo.vue
View File

@ -34,7 +34,7 @@ defineProps({
}
});
const title = ref('RuoYi-Vue-Plus');
const title = ref('物联网管理系统');
const settingsStore = useSettingsStore();
const sideTheme = computed(() => settingsStore.sideTheme);
</script>

9
src/main.ts
View File

@ -11,7 +11,9 @@ import router from './router';
// 自定义指令
import directive from './directive';
//引入mitt
import mitt, { Emitter } from "mitt";
const mitter = mitt();
// 注册插件
import plugins from './plugins/index'; // plugins
@ -43,7 +45,10 @@ import { ElDialog } from 'element-plus';
ElDialog.props.closeOnClickModal.default = false;
const app = createApp(App);
//mit事件总线
app.config.globalProperties.$mitt = mitter;
// 不需使用 getCurrentInstance 获取实例
app.provide("$mitt", mitter);
app.use(HighLight);
app.use(ElementIcons);
app.use(router);

2
src/plugins/modal.ts
View File

@ -51,7 +51,7 @@ export default {
ElNotification.warning(content);
},
// 确认窗体
confirm(content: any): Promise<MessageBoxData> {
confirm(content: any, p0: string, p1: { confirmButtonText: string; cancelButtonText: string; type: string; }): Promise<MessageBoxData> {
return ElMessageBox.confirm(content, '系统提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',

5
src/utils/auth.ts
View File

@ -3,6 +3,11 @@ const TokenKey = 'Admin-Token';
const tokenStorage = useStorage<null | string>(TokenKey, null);
export const getToken = () => tokenStorage.value;
//添加token特殊处理，没有应用到全局
export const getBearerToken = () => ({
Authorization: tokenStorage.value ? `Bearer ${tokenStorage.value}` : undefined,
clientid: import.meta.env.VITE_APP_CLIENT_ID,
});
export const setToken = (access_token: string) => (tokenStorage.value = access_token);

38
src/utils/request.ts
View File

@ -146,7 +146,7 @@ service.interceptors.response.use(
isRelogin.show = false;
});
}
return Promise.reject('无效的会话，或者会话已过期，请重新登录。');
return Promise.reject('token已过期，请重新登录。');
} else if (code === HttpStatus.SERVER_ERROR) {
ElMessage({ message: msg, type: 'error' });
return Promise.reject(new Error(msg));
@ -173,19 +173,28 @@ service.interceptors.response.use(
return Promise.reject(error);
}
);
// 通用下载方法
export function download(url: string, params: any, fileName: string) {
downloadLoadingInstance = ElLoading.service({ text: '正在下载数据，请稍候', background: 'rgba(0, 0, 0, 0.7)' });
// prettier-ignore
return service.post(url, params, {
transformRequest: [
(params: any) => {
return tansParams(params);
}
],
headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
responseType: 'blob'
}).then(async (resp: any) => {
// 通用下载方法 get 跟post下载方式
export function download(url: string, params: any, fileName: string, method: 'get' | 'post' = 'post') {
downloadLoadingInstance = ElLoading.service({
text: '正在下载数据，请稍候',
background: 'rgba(0, 0, 0, 0.7)'
});
// 请求配置
const config = {
method,
responseType: 'blob',
[method === 'get' ? 'params' : 'data']: method === 'get' ? params : tansParams(params),
headers: {
'Content-Type': method === 'get'
? 'application/json'
: 'application/x-www-form-urlencoded'
}
};
return service.request({
url,
...config
})
.then(async (resp: any) => {
const isLogin = blobValidate(resp);
if (isLogin) {
const blob = new Blob([resp]);
@ -203,6 +212,7 @@ export function download(url: string, params: any, fileName: string) {
ElMessage.error('下载文件出现错误，请联系管理员！');
downloadLoadingInstance.close();
});
}
// 导出 axios 实例
export default service;

17
src/views/customerManagement/index.vue
View File

@ -91,7 +91,7 @@
<el-row>
<el-col :span="24">
<el-form-item label="客户名称" prop="nickName">
<el-input v-model="form.nickName" placeholder="请输入客户名称" maxlength="30" />
<el-input v-model="form.nickName" placeholder="请输入客户名称" />
</el-form-item>
</el-col>
</el-row>
@ -105,14 +105,14 @@
<el-row>
<el-col :span="24">
<el-form-item v-if="form.customerId === ''" label="账号密码" prop="password">
<el-input v-model="form.password" placeholder="请输入账号密码" type="password" maxlength="20" show-password />
<el-input v-model="form.password" placeholder="请输入账号密码" />
</el-form-item>
</el-col>
</el-row>
</el-form>
<template #footer>
<div class="dialog-footer">
<el-button type="primary" @click="submitForm">确 定</el-button>
<el-button type="primary" @click="submitForm" :loading="loadingIng">确 定</el-button>
<el-button @click="cancel()">取 消</el-button>
</div>
</template>
@ -137,7 +137,7 @@ const initPassword = ref<string>('');
const queryFormRef = ref<ElFormInstance>();
const userFormRef = ref<ElFormInstance>();
const formDialogRef = ref<ElDialogInstance>();
const loadingIng = ref(false)
const dialog = reactive<DialogOption>({
visible: false,
title: ''
@ -165,6 +165,12 @@ const initData: PageData<UserForm, UserQuery> = {
],
userName: [
{ required: true, message: '请输入客户账号', trigger: 'blur' },
{
min: 2,
max: 20,
message: '客户账号长度必须在 2 和 20 之间',
trigger: 'blur'
}
],
password: [
{ required: true, message: '请输入账号密码', trigger: 'blur' },
@ -285,12 +291,15 @@ const handleUpdate = async (row?: UserForm) => {
/** 提交按钮 */
const submitForm = () => {
userFormRef.value?.validate(async (valid: boolean) => {
if (valid) {
loadingIng.value = true
form.value.customerId ? await api.updateCustomer(form.value) : await api.addCustomer(form.value);
proxy?.$modal.msgSuccess('操作成功');
dialog.visible = false;
await getList();
loadingIng.value = false
}
});
};

8
src/views/equipmentManagement/deviceType/index.vue
View File

@ -126,7 +126,7 @@
</el-form>
<template #footer>
<div class="dialog-footer">
<el-button type="primary" @click="submitForm">确 定</el-button>
<el-button type="primary" @click="submitForm" :loading="loadingIng">确 定</el-button>
<el-button @click="cancel()">取 消</el-button>
</div>
</template>
@ -151,7 +151,7 @@ const initPassword = ref<string>('');
const queryFormRef = ref<ElFormInstance>();
const userFormRef = ref<ElFormInstance>();
const formDialogRef = ref<ElDialogInstance>();
const loadingIng = ref(false)
const dialog = reactive<DialogOption>({
visible: false,
title: ''
@ -224,7 +224,7 @@ const handleDelete = async (row?: UserVO) => {
return;
}
// 单行删除逻辑
const [err] = await to(proxy?.$modal.confirm('是否确认删除"' + row.nickName + '"的数据项？') as any);
const [err] = await to(proxy?.$modal.confirm('是否确认删除"' + row.typeName + '"的数据项？') as any);
if (!err) {
await api.deleteDeviceType([row.id]);
await getList();
@ -281,10 +281,12 @@ const handleUpdate = async (row?: UserForm) => {
const submitForm = () => {
userFormRef.value?.validate(async (valid: boolean) => {
if (valid) {
loadingIng.value = true;
form.value.id ? await api.updateDeviceType(form.value) : await api.addDeviceType(form.value);
proxy?.$modal.msgSuccess('操作成功');
dialog.visible = false;
await getList();
loadingIng.value = false;
}
});
};

581
src/views/equipmentManagement/devices/index.vue
View File

@ -14,19 +14,19 @@
<el-form-item label="请输入设备IMEI" prop="deviceImei">
<el-input v-model="queryParams.deviceImei" placeholder="请输入设备IMEI" clearable />
</el-form-item>
<el-form-item label="设备类型" prop="typeName">
<el-form-item label="设备类型" prop="deviceType">
<el-select v-model="queryParams.deviceType" placeholder="设备类型">
<el-option v-for="item in deviceTypeOptions" :key="item.value" :label="item.typeName"
:value="item.id" />
</el-select>
</el-form-item>
<el-form-item label="设备状态" prop="typeName">
<el-form-item label="设备状态" prop="deviceStatus">
<el-select v-model="queryParams.deviceStatus" placeholder="设备状态" style="margin-left: 10px;">
<el-option label="正常" value="1" />
<el-option label="失效" value="0" />
</el-select>
</el-form-item>
<el-form-item label="创建时间" prop="typeName">
<el-form-item label="创建时间">
<el-date-picker v-model="dateRange" value-format="YYYY-MM-DD HH:mm:ss" type="daterange"
range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"
:default-time="[new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 1, 1, 23, 59, 59)]"></el-date-picker>
@ -51,9 +51,23 @@
修改
</el-button>
</el-col>
<el-col :span="1.5">
<el-button type="danger" plain :disabled="multiple" icon="Delete" @click="handleDelete()">
删除
<el-button type="warning" :disabled="multiple" plain icon="Download" @click="handleExport">导出</el-button>
</el-col>
<el-col :span="1.5">
<el-button type="danger" plain :disabled="multiple" @click="handleDelete()">
批量删除
</el-button>
</el-col>
<el-col :span="1.5">
<el-button type="warning" plain @click="handleBatchImport">
批量导入
</el-button>
</el-col>
<el-col :span="1.5">
<el-button type="warning" plain :disabled="multiple" @click="handleBatchAssign">
批量分配客户
</el-button>
</el-col>
<right-toolbar v-model:show-search="showSearch" :search="true" @query-table="getList"></right-toolbar>
@ -64,11 +78,14 @@
<el-table-column type="selection" width="50" align="center" />
<el-table-column label="设备名称" align="center" prop="deviceName" />
<el-table-column prop="customerName" label="所属客户" />
<el-table-column prop="devicePic" label="设备图片" width="80">
<el-table-column prop="devicePic" label="设备图片">
<template #default="scope">
<el-popover trigger="click">
<img :src="scope.row.devicePic" class="img1" />
<img slot="reference" :src="scope.row.devicePic" class="img2" style="width:40px;height:40px;">
<el-popover placement="right" trigger="click">
<template #reference>
<img :src="scope.row.devicePic" style="width: 40px; height: 40px; cursor: pointer;"
class="hover:opacity-80 transition-opacity" />
</template>
<img :src="scope.row.devicePic" style="max-width: 600px; max-height: 600px;" />
</el-popover>
</template>
</el-table-column>
@ -90,10 +107,10 @@
</template>
</el-table-column>
<el-table-column prop="remark" label="备注" />
<el-table-column prop="createTime" label="创建日期" />
<el-table-column prop="createTime" label="创建日期" width="160" />
<el-table-column prop="createByName" label="创建人" />
<el-table-column label="操作" fixed="right" width="180" class-name="small-padding fixed-width">
<el-table-column label="操作" fixed="right" width="280" class-name="small-padding fixed-width">
<template #default="scope">
<el-tooltip v-if="scope.row.id !== 1" content="修改" placement="top">
<el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)"></el-button>
@ -101,6 +118,17 @@
<el-tooltip v-if="scope.row.id !== 1" content="删除" placement="top">
<el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)"></el-button>
</el-tooltip>
<el-tooltip :disabled="scope.row.deviceStatus === 0" content="分配" placement="top">
<el-button link type="primary" icon="User" @click="handleAssign(scope.row)"></el-button>
</el-tooltip>
<el-tooltip v-if="scope.row.customerName" :disabled="scope.row.deviceStatus === 0" content="撤回"
placement="top">
<el-button link type="primary" icon="UploadFilled" @click="handleWithdraw(scope.row)"></el-button>
</el-tooltip>
<el-button v-if="scope.row.bindingStatus == 1" :disabled="scope.row.deviceStatus === 0"
@click="handleUnbind(scope.row)">解绑</el-button>
</template>
</el-table-column>
</el-table>
@ -122,22 +150,23 @@
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="设备类型" prop="typeName">
<el-select v-model="form.deviceType" placeholder="设备类型">
<el-form-item label="设备类型" prop="deviceType">
<el-select v-model="form.deviceType" placeholder="设备类型" @change="id => handleDeviceTypeChange(id)"
:disabled="form.id != ''">
<el-option v-for="item in deviceTypeOptions" :key="item.value" :label="item.typeName"
:value="item.id" />
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-row v-if="showMacField">
<el-col :span="24">
<el-form-item label="设备MAC" prop="deviceMac">
<el-input v-model="form.deviceMac" placeholder="请输入设备MAC" />
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-row v-if="showImeiField">
<el-col :span="24">
<el-form-item label="设备IMEI" prop="deviceImei">
<el-input v-model="form.deviceImei" placeholder="请输入设备IMEI" />
@ -151,9 +180,9 @@
:http-request="httpRequestImg" :file-list="fileList" :limit="1">
<i class="el-icon-plus"></i>
<template v-if="form.image && typeof form.image === 'string'">
<img :src="form.image" class="avatar" />
<img :src="form.image" class="avatar" style="width:100px; height:100px;" />
</template>
<i v-else class="el-icon-plus"></i>
</el-upload>
</el-form-item>
</el-col>
@ -168,11 +197,73 @@
</el-form>
<template #footer>
<div class="dialog-footer">
<el-button type="primary" @click="submitForm">确 定</el-button>
<el-button type="primary" @click="submitForm" :loading="loadingIng">确 定</el-button>
<el-button @click="cancel()">取 消</el-button>
</div>
</template>
</el-dialog>
<!-- 分配客户弹窗 -->
<el-dialog v-model="assignDialogVisible" title="分配客户" width="400px">
<el-form>
<el-form-item label="选择客户">
<el-select v-model="assignCustomerId" placeholder="请选择客户" style="width: 100%">
<el-option v-for="item in customerList" :key="item.customerId" :label="item.nickName"
:value="item.customerId" />
</el-select>
</el-form-item>
</el-form>
<template #footer>
<div class="dialog-footer">
<el-button @click="assignDialogVisible = false">取 消</el-button>
<el-button type="primary" @click="handleAssignConfirm" :loading="loadingIng">确 定</el-button>
</div>
</template>
</el-dialog>
<!-- 导入设备数据弹窗 -->
<el-dialog v-model="importDialogVisible" title="导入设备数据" width="500px">
<div style="margin-bottom: 16px;">
<p>请按照模板文件的格式准备需要导入的数据。</p>
<p>模板文件中的表头请勿修改，数据请从第二行开始填写。</p>
<el-button type="primary" icon="el-icon-download" @click="downloadTemplate">下载模板文件</el-button>
</div>
<el-upload ref="importUpload" :action="api.devicDeimport()" :headers="head_upload()" :show-file-list="false"
:before-upload="beforeImportUpload" :on-success="handleImportSuccess" :on-error="handleImportError" :limit="1"
accept=".xlsx,.xls">
<el-button type="success">选择文件开始导入</el-button>
<div v-if="!importResult.isShow" slot="tip" class="el-upload__tip">
<div style="color:#409EFF">只能上传模板excel文件</div>
</div>
<div v-if="importResult.isShow" slot="tip" class="el-upload__tip">
<span style="color:#409EFF">批量导入完成，共检测到 <span style="color:#E6A23C">{{ importResult.total }}</span>
条数据，导入成功 <span style="color:#67C23A">{{ importResult.succeed }}</span> 条，失败 <span style="color:red">{{
importResult.errorSun }}</span> 条。</span>
<p v-if="importResult.errorSun > 0" style="padding:10px;"><a :href="importResult.link">>>>
上传失败明细下载 <i class="el-icon-download" /></a></p>
</div>
</el-upload>
<template #footer>
<div class="dialog-footer">
<el-button @click="importDialogVisible = false">取 消</el-button>
</div>
</template>
</el-dialog>
<!-- 批量分配客户弹窗 -->
<el-dialog v-model="batchAssignDialogVisible" title="批量分配客户" width="400px">
<el-form>
<el-form-item label="选择客户">
<el-select v-model="batchAssignCustomerId" placeholder="请选择客户" style="width: 100%">
<el-option v-for="item in customerList" :key="item.customerId" :label="item.nickName"
:value="item.customerId" />
</el-select>
</el-form-item>
</el-form>
<template #footer>
<div class="dialog-footer">
<el-button @click="batchAssignDialogVisible = false">取消</el-button>
<el-button type="primary" @click="handleBatchAssignConfirm">确定</el-button>
</div>
</template>
</el-dialog>
</div>
</template>
@ -182,6 +273,8 @@ import { deviceForm, deviceQuery, deviceVO } from '@/api/equipmentManagement/dev
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const deviceDist = ref<deviceVO[]>();
import { to } from 'await-to-js';
import request from "@/utils/request";
import { getBearerToken } from '@/utils/auth'
const loading = ref(true);
const showSearch = ref(true);
const dateRange = ref<[DateModelType, DateModelType]>(['', '']);
@ -194,7 +287,17 @@ const queryFormRef = ref<ElFormInstance>();
const userFormRef = ref<ElFormInstance>();
const formDialogRef = ref<ElDialogInstance>();
const deviceTypeOptions = ref([]); //设备类型
const fileList = ref()
const communicationModeInfo = ref<any>(null);
const showMacField = ref(false); //MAC地址
const showImeiField = ref(false); //mei地址
const assignDialogVisible = ref(false); //分配客户
const importDialogVisible = ref(false);//批量导入
const batchAssignDialogVisible = ref(false) //批量分配客户
const loadingIng = ref(false)
const assignCustomerId = ref(); //分配客户id
const batchAssignCustomerId = ref() //批量分配客户id
const customerList = ref()
const dialog = reactive<DialogOption>({
visible: false,
title: ''
@ -207,7 +310,7 @@ const initFormData: deviceForm = {
remark: '',
id: '',
deviceType: "",
image:''
image: ''
};
const initData: PageData<deviceForm, deviceQuery> = {
@ -229,12 +332,6 @@ const initData: PageData<deviceForm, deviceQuery> = {
deviceType: [
{ required: true, message: '请选择设备类型', trigger: 'blur' },
],
deviceMac: [
{ required: true, message: '请输入设备MAC', trigger: 'blur' },
],
deviceImei: [
{ required: true, message: '请输入设备IMEI', trigger: 'blur' },
],
}
};
const data = reactive<PageData<deviceVO, deviceQuery>>(initData);
@ -256,9 +353,9 @@ const handleQuery = () => {
};
/** 重置按钮操作 */
const resetQuery = () => {
queryParams.value.pageNum = 1;
getList();
queryFormRef.value?.resetFields();
dateRange.value = ['', ''];
handleQuery()
};
/** 删除按钮操作 */
@ -275,13 +372,63 @@ const handleDelete = async (row?: deviceVO) => {
return;
}
// 单行删除逻辑
const [err] = await to(proxy?.$modal.confirm('是否确认删除"' + row.nickName + '"的数据项？') as any);
const [err] = await to(proxy?.$modal.confirm('是否确认删除"' + row.deviceName + '"的数据项？') as any);
if (!err) {
await api.deleteDevice([row.id]);
await getList();
proxy?.$modal.msgSuccess('删除成功');
}
};
/** 导出按钮操作 */
const handleExport = () => {
proxy?.download(
'/api/device/download',
{
...queryParams.value
},
`${new Date().getTime()}.xlsx`,
'get'
);
};
// 解绑
const handleUnbind = (row) => {
proxy?.$modal.confirm(`确定要解绑设备 ${row.deviceName} 吗？`, '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
api.deviceUnbind(row).then(res => {
if (res.code === 0) {
proxy?.$modal.msgSuccess('解绑成功')
getList(); // 初始化列表数据
} else {
proxy?.$modal.msgError(res.msg || '解绑失败')
}
})
}).catch(() => {
})
};
// 撤回
const handleWithdraw = (row: any) => {
proxy?.$modal.confirm(`确定要从客户 ${row.customerName} 撤回设备 ${row.deviceName} 吗？`, '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
api.withdrawDevice([row.id]).then(res => {
if (res.code === 0) {
proxy?.$modal.msgSuccess('撤回成功')
getList(); // 初始化列表数据
} else {
proxy?.$modal.msgError(res.msg || '撤回失败')
}
})
}).catch(() => {
proxy?.$modal.msgError('已取消撤回')
})
}
/** 选择条数 */
const handleSelectionChange = (selection: deviceVO[]) => {
@ -295,6 +442,7 @@ const handleSelectionChange = (selection: deviceVO[]) => {
const reset = () => {
form.value = { ...initFormData };
userFormRef.value?.resetFields();
fileList.value = []
};
/** 取消按钮 */
const cancel = () => {
@ -308,6 +456,9 @@ const handleAdd = async () => {
dialog.visible = true;
dialog.title = '新增设备';
form.value.password = initPassword.value.toString();
// 新增时默认不显示
showMacField.value = false;
showImeiField.value = false;
};
/** 修改按钮操作 */
@ -317,93 +468,163 @@ const handleUpdate = async (row?: deviceForm) => {
dialog.title = '修改设备';
try {
if (row) {
// 从行内按钮调用，直接使用行数据
Object.assign(form.value, row);
form.value.image = row.devicePic
// 编辑时根据已有值显示字段
showMacField.value = !!row.deviceMac;
showImeiField.value = !!row.deviceImei;
} else {
const customerId = ids.value[0];
Object.assign(form.value, customerId);
form.value.image = customerId.devicePic //图片回显
// 编辑时根据已有值显示字段
showMacField.value = !!customerId.deviceMac;
showImeiField.value = !!customerId.deviceImei;
}
// 加载设备类型对应的通讯方式
if (form.value.deviceType) {
await handleDeviceTypeChange(form.value.deviceType);
}
} catch (error) {
dialog.visible = false;
}
};
// 覆盖默认的上传行为，可以自定义上传的实现
const httpRequestImg=(parm)=> { };
const beforeUpload=(file)=> {
const isLt2M = file.size / 1024 / 1024 < 2;
const isJPG = file.type === "image/jpeg" || file.type === "image/png";
if (!isJPG) {
ElMessage.warning("请上传jpg、png格式，大小不超过2M的照片");
return false;
// 设备类型触发事件
const handleDeviceTypeChange = async (deviceTypeId: string | number) => {
// 重置规则和显示状态
rules.value.deviceMac = [];
rules.value.deviceImei = [];
showMacField.value = false;
showImeiField.value = false;
communicationModeInfo.value = null;
// 编辑时如果有值，根据已有值确定显示哪个字段
if (form.value.id) {
if (form.value.deviceMac) {
showMacField.value = true;
rules.value.deviceMac = [{ required: true, message: '请输入设备MAC', trigger: 'blur' }];
} else if (form.value.deviceImei) {
showImeiField.value = true;
rules.value.deviceImei = [{ required: true, message: '请输入设备IMEI', trigger: 'blur' }];
}
return;
}
// 新增或编辑时没有值，根据设备类型获取通讯方式
try {
userFormRef.value?.clearValidate(['deviceMac', 'deviceImei']);
if (!deviceTypeId) {
return;
}
const res = await api.getCommunicationMode({ id: deviceTypeId });
if (res.code === 0 && res.data) {
communicationModeInfo.value = res.data;
// 根据通讯方式确定显示哪个字段
if (res.data.communicationMode === '1') { // 蓝牙设备 - 显示MAC
showMacField.value = true;
showImeiField.value = false;
rules.value.deviceMac = [{ required: true, message: '请输入设备MAC', trigger: 'blur' }];
form.value.deviceImei = ''; // 清空IMEI
} else if (res.data.communicationMode === '0') { // 4G设备 - 显示IMEI
showMacField.value = false;
showImeiField.value = true;
rules.value.deviceImei = [{ required: true, message: '请输入设备IMEI', trigger: 'blur' }];
form.value.deviceMac = ''; // 清空MAC
}
if (!isLt2M) {
ElMessage.warning("大小不超过2M的照片片");
return false;
}
return isJPG && isLt2M;
};
// 文件上传状态改变时触发
const fileUploadChange=(files, fileList)=> {
console.log(fileList, '5555');
if (fileList.length > 0) {
form.value.image = fileList[0].raw; // 正确获取File对象
// 调试：检查是否是真正的 File 对象
console.log('File对象验证:', form.value.image);
} else {
form.value.image = null;
}
};
} else {
proxy?.$modal.msgError(res.msg || '获取通讯方式失败');
}
} catch (error) {
proxy?.$modal.msgError('获取通讯方式失败');
}
};
// 覆盖默认的上传行为，可以自定义上传的实现
const httpRequestImg = (parm) => { };
const beforeUpload = (file) => {
const isLt2M = file.size / 1024 / 1024 < 2;
const isJPG = file.type === "image/jpeg" || file.type === "image/png";
if (!isJPG) {
ElMessage.warning("请上传jpg、png格式，大小不超过2M的照片");
return false;
}
if (!isLt2M) {
ElMessage.warning("大小不超过2M的照片片");
return false;
}
return isJPG && isLt2M;
};
// 文件上传状态改变时触发
const fileUploadChange = (files, fileList) => {
console.log(fileList, '5555');
if (fileList.length > 0) {
form.value.image = fileList[0].raw; // 正确获取File对象
// 调试：检查是否是真正的 File 对象
console.log('File对象验证:', form.value.image);
} else {
form.value.image = null;
}
};
/** 提交按钮 */
const submitForm = () => {
userFormRef.value?.validate(async (valid: boolean) => {
if (valid) {
// try {
// const formData = new FormData();
// // 处理图片字段
// if (this.form.image instanceof File) {
// formData.append('file', this.form.image);
// } else if (this.form.image && typeof this.form.image === 'string') {
// // 编辑时未修改图片，传递原图片URL
// formData.append('imageUrl', this.form.image);
// }
// // 添加其他必要字段
// const fields = ['id', 'deviceName', 'deviceType', 'remark'];
// fields.forEach(key => {
// if (this.form[key] !== undefined && this.form[key] !== null) {
// formData.append(key, this.form[key]);
// }
// });
// // 根据通讯方式，有条件地添加deviceMac或deviceImei
// if (this.form.deviceMac) {
// formData.append('deviceMac', this.form.deviceMac)
// }
// if (this.form.deviceImei) {
// formData.append('deviceImei', this.form.deviceImei)
// }
// // 根据操作类型设置URL和方法
// const isAdd = this.crud.status.add;
// const res = await request({ // 使用 await 等待结果
// url: isAdd ? '/api/device/add' : '/api/device/update',
// method: isAdd ? 'post' : 'put',
// data: formData,
// headers: {
// 'Content-Type': 'multipart/form-data'
// }
// });
// if (res.code == 0) {
// this.$message.success(isAdd ? '添加成功' : '编辑成功');
// this.crud.cancelCU();
// this.crud.toQuery();
// } else {
// this.$message.warning(res.msg);
// }
// } catch (err) {
// this.$message.warning('操作失败');
// console.error(err);
// }
const submitForm = async () => {
try {
const valid = await userFormRef.value?.validate();
if (!valid) return;
loadingIng.value = true;
const formData = new FormData();
// 处理图片字段
if (form.value.image instanceof File) {
formData.append('file', form.value.image);
} else if (form.value.image && typeof form.value.image === 'string') {
// 如果是URL且需要转换为二进制
const blob = await urlToBlob(form.value.image);
formData.append('file', blob, 'image.jpg'); // 添加文件名
}
});
// 添加其他必要字段
const fields = ['id', 'deviceName', 'deviceType', 'remark'];
fields.forEach(key => {
if (form.value[key] !== undefined && form.value[key] !== null) {
formData.append(key, String(form.value[key])); // 确保所有值都转为字符串
}
});
// 根据通讯方式，有条件地添加deviceMac或deviceImei
if (form.value.deviceMac) {
formData.append('deviceMac', form.value.deviceMac);
}
if (form.value.deviceImei) {
formData.append('deviceImei', form.value.deviceImei);
}
// 根据操作类型设置URL和方法
const isAdd = !form.value.id; // 注意这里逻辑反了，应该是没有id时是新增
const res = await request({
url: isAdd ? '/api/device/add' : '/api/device/update',
method: isAdd ? 'post' : 'put',
data: formData,
headers: {
'Content-Type': 'multipart/form-data'
}
});
if (res.code == 0) {
proxy?.$modal.msgSuccess('操作成功');
dialog.visible = false;
loadingIng.value = false;
await getList();
} else {
proxy?.$modal.msgWarning(res.msg)
loadingIng.value = false;
}
} catch (err) {
console.error(err);
loadingIng.value = false;
}
};
// URL转Blob的方法函数
const urlToBlob = async (url: string): Promise<Blob> => {
const response = await fetch(url);
if (!response.ok) throw new Error('图片加载失败');
return await response.blob();
};
/**
@ -432,9 +653,161 @@ const getDeviceType = () => {
})
};
// 客户下拉框
const getAllCustomerAll = () => {
api.userAllCustomerAll().then(res => {
if (res.code == 0) {
customerList.value = res.data
}
})
};
// 分配客户
const assignRow = ref()
const handleAssign = (row: any) => {
getAllCustomerAll()
assignDialogVisible.value = true
assignRow.value = row
assignCustomerId.value = row.customerId
}
const handleAssignConfirm = () => {
if (!assignCustomerId.value) {
return proxy?.$modal.msgError('请选择客户')
}
loadingIng.value = true;
// 这里调用分配API
let data = {
customerId: assignCustomerId.value,
deviceIds: [assignRow.value.id]
}
api.deviceAssignCustomer(data).then((res) => {
if (res.code == 0) {
loadingIng.value = false;
const customer = customerList.value.find(c => c.id === assignCustomerId.value)
const customerName = customer ? customer.nickName : `ID: ${assignCustomerId.value}`
getList();
assignDialogVisible.value = false
return proxy?.$modal.msgSuccess(`设备已分配给客户: ${customerName}`)
} else {
loadingIng.value = false;
}
})
};
const importUpload = ref()
const importResult = ref()
const handleBatchImport = () => {
importDialogVisible.value = true
importResult.value = {
isShow: false,
total: 0,
succeed: 0,
errorSun: 0,
link: ''
}
nextTick(() => {
if (importUpload.value) {
importUpload.value.clearFiles()
}
})
};
const downloadTemplate = () => {
// 这里可用 window.open 或 a 标签下载模板
const link = document.createElement('a');
link.href = 'http://fuyuanshen.com:81/images/excel/equipmenttemplate.xlsx';
link.download = '设备数据导入模板.xlsx'; // 可选：指定下载文件名
link.style.display = 'none'; // 隐藏标签
document.body.appendChild(link);
link.click(); // 触发下载
document.body.removeChild(link); // 移除标签
};
const beforeImportUpload = (file: any) => {
const isLt5M = file.size / 1024 / 1024 < 5
if (!isLt5M) {
proxy?.$modal.msgError('上传文件大小不能超过 5MB!')
}
return isLt5M
};
//添加tokenf方法head_upload 直接返回 getBearerToken()
const head_upload = () => getBearerToken();
const handleImportSuccess = (response: any) => {
if (response.code === 0) {
importResult.value.isShow = true
if (response.data) {
importResult.value.succeed = response.data.successCount || 0
importResult.value.errorSun = response.data.failureCount || 0
importResult.value.total = importResult.value.succeed + importResult.value.errorSun
importResult.value.link = response.data.errorExcelUrl || ''
}
getList(); // 初始化列表数据
} else {
proxy?.$modal.msgError(response.msg || '导入失败')
}
};
const handleImportError = () => {
proxy?.$modal.msgError('导入失败')
};
// 批量分配客户
const handleBatchAssign = () => {
batchAssignDialogVisible.value = true
getAllCustomerAll()
};
// 批量分配客户确定
const handleBatchAssignConfirm = () => {
if (!batchAssignCustomerId.value) {
return proxy?.$modal.msgError('请选择客户')
}
// 这里可以调用批量分配API，传递 crud.selections 和 batchAssignCustomerId
// 提取选中设备的 ID 数组
const selectedIds = ids.value.map((item) => item.id)
// 构造请求数据
const data = {
customerId: batchAssignCustomerId.value, // 目标客户ID
deviceIds: selectedIds // 选中的设备ID数组
}
api.deviceAssignCustomer(data).then((res) => {
if (res.code == 0) {
batchAssignDialogVisible.value = false
getList();
return proxy?.$modal.msgSuccess(`分配成功`)
}
})
};
watch(() => form.value.deviceType, (newVal) => {
if (dialog.title === '新增设备') { // Only for add form
handleDeviceTypeChange(newVal);
}
});
onMounted(() => {
getList(); // 初始化列表数据
getDeviceType()
});
</script>
<style lang="scss" scoped>
:deep .el-upload--picture-card {
width: 100px !important;
height: 100px !important;
border: 1px solid #cccc;
margin-bottom: 10px;
}
:deep .el-upload.el-upload--text {
display: block;
}
:deep .el-upload-list--picture-card .el-upload-list__item {
width: 100px !important;
height: 100px !important;
}
:deep .el-upload-list__item-thumbnail {
width: 100px !important;
height: 100px !important;
object-fit: cover;
}
</style>

142
src/views/index.vue
View File

@ -2,92 +2,8 @@
<div class="app-container home">
<el-row :gutter="20">
<el-col :sm="24" :lg="12" style="padding-left: 20px">
<h2>RuoYi-Vue-Plus多租户管理系统</h2>
<p>
RuoYi-Vue-Plus 是基于 RuoYi-Vue 针对 分布式集群 场景升级(不兼容原框架)
<br />
* 前端开发框架 Vue3、TS、Element Plus<br />
* 后端开发框架 Spring Boot<br />
* 容器框架 Undertow 基于 Netty 的高性能容器<br />
* 权限认证框架 Sa-Token 支持多终端认证系统<br />
* 关系数据库 MySQL 适配 8.X 最低 5.7<br />
* 缓存数据库 Redis 适配 6.X 最低 4.X<br />
* 数据库框架 Mybatis-Plus 快速 CRUD 增加开发效率<br />
* 数据库框架 p6spy 更强劲的 SQL 分析<br />
* 多数据源框架 dynamic-datasource 支持主从与多种类数据库异构<br />
* 序列化框架 Jackson 统一使用 jackson 高效可靠<br />
* Redis客户端 Redisson 性能强劲、API丰富<br />
* 分布式限流 Redisson 全局、请求IP、集群ID 多种限流<br />
* 分布式锁 Lock4j 注解锁、工具锁 多种多样<br />
* 分布式幂等 Lock4j 基于分布式锁实现<br />
* 分布式链路追踪 SkyWalking 支持链路追踪、网格分析、度量聚合、可视化<br />
* 分布式任务调度 SnailJob 高性能 高可靠 易扩展<br />
* 文件存储 Minio 本地存储<br />
* 文件存储 七牛、阿里、腾讯 云存储<br />
* 监控框架 SpringBoot-Admin 全方位服务监控<br />
* 校验框架 Validation 增强接口安全性 严谨性<br />
* Excel框架 FastExcel(原Alibaba EasyExcel) 性能优异 扩展性强<br />
* 文档框架 SpringDoc、javadoc 无注解零入侵基于java注释<br />
* 工具类框架 Hutool、Lombok 减少代码冗余 增加安全性<br />
* 代码生成器 适配MP、SpringDoc规范化代码 一键生成前后端代码<br />
* 部署方式 Docker 容器编排 一键部署业务集群<br />
* 国际化 SpringMessage Spring标准国际化方案<br />
</p>
<p><b>当前版本:</b> <span>v5.4.0</span></p>
<p>
<el-tag type="danger">&yen;免费开源</el-tag>
</p>
<p>
<el-button type="primary" icon="Cloudy" plain @click="goTarget('https://gitee.com/dromara/RuoYi-Vue-Plus')">访问码云</el-button>
<el-button type="primary" icon="Cloudy" plain @click="goTarget('https://github.com/dromara/RuoYi-Vue-Plus')">访问GitHub</el-button>
<el-button type="primary" icon="Cloudy" plain @click="goTarget('https://plus-doc.dromara.org/#/ruoyi-vue-plus/changlog')"
>更新日志</el-button
>
</p>
</el-col>
<el-col :sm="24" :lg="12" style="padding-left: 20px">
<h2>RuoYi-Cloud-Plus多租户微服务管理系统</h2>
<p>
RuoYi-Cloud-Plus 微服务通用权限管理系统 重写 RuoYi-Cloud 全方位升级(不兼容原框架)
<br />
* 前端开发框架 Vue3、TS、Element UI<br />
* 后端开发框架 Spring Boot<br />
* 微服务开发框架 Spring Cloud、Spring Cloud Alibaba<br />
* 容器框架 Undertow 基于 XNIO 的高性能容器<br />
* 权限认证框架 Sa-Token、Jwt 支持多终端认证系统<br />
* 关系数据库 MySQL 适配 8.X 最低 5.7<br />
* 关系数据库 Oracle 适配 11g 12c<br />
* 关系数据库 PostgreSQL 适配 13 14<br />
* 关系数据库 SQLServer 适配 2017 2019<br />
* 缓存数据库 Redis 适配 6.X 最低 5.X<br />
* 分布式注册中心 Alibaba Nacos 采用2.X 基于GRPC通信高性能<br />
* 分布式配置中心 Alibaba Nacos 采用2.X 基于GRPC通信高性能<br />
* 服务网关 Spring Cloud Gateway 响应式高性能网关<br />
* 负载均衡 Spring Cloud Loadbalancer 负载均衡处理<br />
* RPC远程调用 Apache Dubbo 原生态使用体验、高性能<br />
* 分布式限流熔断 Alibaba Sentinel 无侵入、高扩展<br />
* 分布式事务 Alibaba Seata 无侵入、高扩展 支持 四种模式<br />
* 分布式消息队列 Apache Kafka 高性能高速度<br />
* 分布式消息队列 Apache RocketMQ 高可用功能多样<br />
* 分布式消息队列 RabbitMQ 支持各种扩展插件功能多样性<br />
* 分布式搜索引擎 ElasticSearch 业界知名<br />
* 分布式链路追踪 Apache SkyWalking 链路追踪、网格分析、度量聚合、可视化<br />
* 分布式日志中心 ELK 业界成熟解决方案<br />
* 分布式监控 Prometheus、Grafana 全方位性能监控<br />
* 其余与 Vue 版本一致<br />
</p>
<p><b>当前版本:</b> <span>v2.4.0</span></p>
<p>
<el-tag type="danger">&yen;免费开源</el-tag>
</p>
<p>
<el-button type="primary" icon="Cloudy" plain @click="goTarget('https://gitee.com/dromara/RuoYi-Cloud-Plus')">访问码云</el-button>
<el-button type="primary" icon="Cloudy" plain @click="goTarget('https://github.com/dromara/RuoYi-Cloud-Plus')">访问GitHub</el-button>
<el-button type="primary" icon="Cloudy" plain @click="goTarget('https://plus-doc.dromara.org/#/ruoyi-cloud-plus/changlog')"
>更新日志</el-button
>
</p>
</el-col>
</el-row>
<el-divider />
@ -102,64 +18,6 @@ const goTarget = (url: string) => {
<style lang="scss" scoped>
.home {
blockquote {
padding: 10px 20px;
margin: 0 0 20px;
font-size: 17.5px;
border-left: 5px solid #eee;
}
hr {
margin-top: 20px;
margin-bottom: 20px;
border: 0;
border-top: 1px solid #eee;
}
.col-item {
margin-bottom: 20px;
}
ul {
padding: 0;
margin: 0;
}
font-family: 'open sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 13px;
color: #676a6c;
overflow-x: hidden;
ul {
list-style-type: none;
}
h4 {
margin-top: 0px;
}
h2 {
margin-top: 10px;
font-size: 26px;
font-weight: 100;
}
p {
margin-top: 10px;
b {
font-weight: 700;
}
}
.update-log {
ol {
display: block;
list-style-type: decimal;
margin-block-start: 1em;
margin-block-end: 1em;
margin-inline-start: 0;
margin-inline-end: 0;
padding-inline-start: 40px;
}
}
}
</style>

39
src/views/login.vue
View File

@ -6,44 +6,35 @@
<lang-select />
</div>
<el-form-item v-if="tenantEnabled" prop="tenantId">
<el-select v-model="loginForm.tenantId" filterable :placeholder="proxy.$t('login.selectPlaceholder')" style="width: 100%">
<el-option v-for="item in tenantList" :key="item.tenantId" :label="item.companyName" :value="item.tenantId"></el-option>
<el-select v-model="loginForm.tenantId" filterable :placeholder="proxy.$t('login.selectPlaceholder')"
style="width: 100%">
<el-option v-for="item in tenantList" :key="item.tenantId" :label="item.companyName"
:value="item.tenantId"></el-option>
<template #prefix><svg-icon icon-class="company" class="el-input__icon input-icon" /></template>
</el-select>
</el-form-item>
<el-form-item prop="username">
<el-input v-model="loginForm.username" type="text" size="large" auto-complete="off" :placeholder="proxy.$t('login.username')">
<el-input v-model="loginForm.username" type="text" size="large" auto-complete="off"
:placeholder="proxy.$t('login.username')">
<template #prefix><svg-icon icon-class="user" class="el-input__icon input-icon" /></template>
</el-input>
</el-form-item>
<el-form-item prop="password">
<el-input
v-model="loginForm.password"
type="password"
size="large"
auto-complete="off"
:placeholder="proxy.$t('login.password')"
@keyup.enter="handleLogin"
>
<el-input v-model="loginForm.password" type="password" size="large" auto-complete="off"
:placeholder="proxy.$t('login.password')" @keyup.enter="handleLogin">
<template #prefix><svg-icon icon-class="password" class="el-input__icon input-icon" /></template>
</el-input>
</el-form-item>
<el-form-item v-if="captchaEnabled" prop="code">
<el-input
v-model="loginForm.code"
size="large"
auto-complete="off"
:placeholder="proxy.$t('login.code')"
style="width: 63%"
@keyup.enter="handleLogin"
>
<el-input v-model="loginForm.code" size="large" auto-complete="off" :placeholder="proxy.$t('login.code')"
style="width: 63%" @keyup.enter="handleLogin">
<template #prefix><svg-icon icon-class="validCode" class="el-input__icon input-icon" /></template>
</el-input>
<div class="login-code">
<img :src="codeUrl" class="login-code-img" @click="getCode" />
</div>
</el-form-item>
<el-checkbox v-model="loginForm.rememberMe" style="margin: 0 0 25px 0">{{ proxy.$t('login.rememberPassword') }}</el-checkbox>
<!-- <el-checkbox v-model="loginForm.rememberMe" style="margin: 0 0 25px 0">{{ proxy.$t('login.rememberPassword') }}</el-checkbox>
<el-form-item style="float: right">
<el-button circle :title="proxy.$t('login.social.wechat')" @click="doSocialLogin('wechat')">
<svg-icon icon-class="wechat" />
@ -60,7 +51,7 @@
<el-button circle :title="proxy.$t('login.social.github')" @click="doSocialLogin('github')">
<svg-icon icon-class="github" />
</el-button>
</el-form-item>
</el-form-item> -->
<el-form-item style="width: 100%">
<el-button :loading="loading" size="large" type="primary" style="width: 100%" @click.prevent="handleLogin">
<span v-if="!loading">{{ proxy.$t('login.login') }}</span>
@ -71,10 +62,6 @@
</div>
</el-form-item>
</el-form>
<!-- 底部 -->
<div class="el-login-footer">
<span>Copyright © 2018-2025 疯狂的狮子Li All Rights Reserved.</span>
</div>
</div>
</template>
@ -261,8 +248,10 @@ onMounted(() => {
width: 400px;
padding: 25px 25px 5px 25px;
z-index: 1;
.el-input {
height: 40px;
input {
height: 40px;
}

2
src/views/system/role/index.vue
View File

@ -49,7 +49,7 @@
<el-button v-hasPermi="['system:role:delete']" type="danger" plain :disabled="ids.length === 0" @click="handleDelete()">删除</el-button>
</el-col>
<el-col :span="1.5">
<el-button v-hasPermi="['system:role:export']" type="warning" plain icon="Download" @click="handleExport">导出</el-button>
<el-button v-hasPermi="['system:role:export']" type="warning" plain icon="Download" @click="handleExport">导出</el-button>
</el-col>
<right-toolbar v-model:show-search="showSearch" @query-table="getList"></right-toolbar>
</el-row>