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

修改mqtt根据端口地址，走ws或者wss协议

Browse Source
This commit is contained in:
fengerli
2025-09-19 09:33:56 +08:00
parent 2c6bf02773
commit f853349d1e
4 changed files with 131 additions and 198 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
.env.development
View File

@ -5,8 +5,8 @@ VITE_APP_TITLE = 云平台管理系统
VITE_APP_ENV = 'development' VITE_APP_ENV = 'development'
# 开发环境 # 开发环境
VITE_APP_BASE_API = 'http://47.120.79.150/backend' #VITE_APP_BASE_API = 'https://fuyuanshen.com/backend'
#VITE_APP_BASE_API = 'http://192.168.2.23:8000' VITE_APP_BASE_API = 'http://192.168.2.34:8000'
#代永飞接口 #代永飞接口
#VITE_APP_BASE_API = 'http://457102h2d6.qicp.vip:24689' #VITE_APP_BASE_API = 'http://457102h2d6.qicp.vip:24689'

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

@ -20,7 +20,7 @@
<div class="avatar-wrapper"> <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" /> <img src="@/assets/images/avatar.png" class="user-avatar" />
<div style="margin-left: 10px;">{{ useUserStore().nickname }}</div> <div style="margin-left: 10px; white-space: nowrap; font-size: 14px;">{{ useUserStore().nickname }}</div>
<el-icon><caret-bottom /></el-icon> <el-icon><caret-bottom /></el-icon>
</div> </div>
<template #dropdown> <template #dropdown>

100
src/utils/mqtt.ts
View File

@ -1,4 +1,4 @@
import { ref, onUnmounted } from 'vue'; // 修复：导入必要的Vue API
import * as Paho from 'paho-mqtt'; import * as Paho from 'paho-mqtt';
// MQTT消息类型定义 // MQTT消息类型定义
@ -9,61 +9,60 @@ export interface MqttMessage {
retained: boolean; retained: boolean;
time: Date; time: Date;
} }
// 订阅选项 // 订阅选项
export interface SubscribeOptions { export interface SubscribeOptions {
qos: 0 | 1 | 2; qos: 0 | 1 | 2;
} }
// MQTT配置信息 // 根据当前页面协议自动选择MQTT配置
const MQTT_CONFIG = { const getMqttConfig = () => {
// 连接地址（添加协议类型） // 检测当前页面协议（http: 或 https:）
protocol: 'ws', // 关键：明确协议（ws或wss） const isHttps = window.location.protocol === 'https:';
host: '47.120.79.150', return {
port: 9083, // 自动切换协议：https页面用wss，http页面用ws
// 认证信息 protocol: isHttps ? 'wss' : 'ws',
username: 'admin', host: 'www.cnxhyc.com',
password: '#YtvpSfCNG', // 自动切换端口：https对应9084，http对应9083
// 客户端ID（添加时间戳确保唯一性） port: isHttps ? 9084 : 9083,
clientId: `vue3-mqtt-client-${Date.now()}-${Math.random().toString(36).substring(2, 10)}`, // 认证信息
// 连接选项 username: 'admin',
cleanSession: true, password: '#YtvpSfCNG',
keepAliveInterval: 60, clientId: `vue3-mqtt-client-${Date.now()}-${Math.random().toString(36).substring(2, 10)}`,
reconnect: true, cleanSession: true,
keepAliveInterval: 60,
reconnect: true,
};
}; };
const MQTT_CONFIG = getMqttConfig();
// MQTT客户端组合式API // MQTT客户端组合式API
export function useMqtt() { export function useMqtt() {
// 客户端实例 // 客户端实例
let client: Paho.Client | null = null; let client: Paho.Client | null = null;
// 状态管理（修复：已导入ref） // 状态管理（修复：已导入ref）
const connected = ref(false); const connected = ref(false);
const connecting = ref(false); const connecting = ref(false);
const error = ref<Error | null>(null); const error = ref<Error | null>(null);
const messages = ref<MqttMessage[]>([]); const messages = ref<MqttMessage[]>([]);
const subscribedTopics = ref<string[]>([]); const subscribedTopics = ref<string[]>([]);
// 事件回调 // 事件回调
const connectCallbacks: (() => void)[] = []; const connectCallbacks: (() => void)[] = [];
const messageCallbacks: ((message: MqttMessage) => void)[] = []; const messageCallbacks: ((message: MqttMessage) => void)[] = [];
const errorCallbacks: ((err: Error) => void)[] = []; const errorCallbacks: ((err: Error) => void)[] = [];
const disconnectCallbacks: (() => void)[] = []; const disconnectCallbacks: (() => void)[] = [];
// 修复：移除无用的p0参数，connect方法不接受回调（通过onConnect注册） // 修复：移除无用的p0参数，connect方法不接受回调（通过onConnect注册）
const connect = () => { const connect = () => {
if (connected.value || connecting.value) return; if (connected.value || connecting.value) return;
connecting.value = true; connecting.value = true;
error.value = null; error.value = null;
try { try {
// 创建客户端实例（添加协议参数）
client = new Paho.Client( client = new Paho.Client(
MQTT_CONFIG.host, MQTT_CONFIG.host,
MQTT_CONFIG.port, MQTT_CONFIG.port,
MQTT_CONFIG.clientId MQTT_CONFIG.clientId
); );
// 设置连接选项 // 设置连接选项
const connectOptions: Paho.ConnectOptions = { const connectOptions: Paho.ConnectOptions = {
userName: MQTT_CONFIG.username, userName: MQTT_CONFIG.username,
@ -71,7 +70,8 @@ export function useMqtt() {
cleanSession: MQTT_CONFIG.cleanSession, cleanSession: MQTT_CONFIG.cleanSession,
keepAliveInterval: MQTT_CONFIG.keepAliveInterval, keepAliveInterval: MQTT_CONFIG.keepAliveInterval,
reconnect: MQTT_CONFIG.reconnect, reconnect: MQTT_CONFIG.reconnect,
useSSL: MQTT_CONFIG.protocol === 'wss', // 关键：根据协议自动启用 SSL
// 连接成功回调 // 连接成功回调
onSuccess: () => { onSuccess: () => {
console.log('MQTT连接成功'); console.log('MQTT连接成功');
@ -79,7 +79,7 @@ export function useMqtt() {
connecting.value = false; connecting.value = false;
connectCallbacks.forEach(cb => cb()); // 触发所有连接成功回调 connectCallbacks.forEach(cb => cb()); // 触发所有连接成功回调
}, },
// 连接失败回调 // 连接失败回调
onFailure: (err) => { onFailure: (err) => {
console.error('MQTT连接失败:', err); console.error('MQTT连接失败:', err);
@ -89,7 +89,7 @@ export function useMqtt() {
errorCallbacks.forEach(cb => cb(error.value!)); errorCallbacks.forEach(cb => cb(error.value!));
} }
}; };
// 设置客户端回调 // 设置客户端回调
client.onConnectionLost = (responseObject) => { client.onConnectionLost = (responseObject) => {
if (responseObject.errorCode !== 0) { if (responseObject.errorCode !== 0) {
@ -97,12 +97,12 @@ export function useMqtt() {
error.value = new Error(responseObject.errorMessage || '连接丢失'); error.value = new Error(responseObject.errorMessage || '连接丢失');
errorCallbacks.forEach(cb => cb(error.value!)); errorCallbacks.forEach(cb => cb(error.value!));
} }
connected.value = false; connected.value = false;
connecting.value = false; connecting.value = false;
disconnectCallbacks.forEach(cb => cb()); disconnectCallbacks.forEach(cb => cb());
}; };
// 消息接收回调 // 消息接收回调
client.onMessageArrived = (message) => { client.onMessageArrived = (message) => {
const newMessage: MqttMessage = { const newMessage: MqttMessage = {
@ -112,11 +112,11 @@ export function useMqtt() {
retained: message.retained, retained: message.retained,
time: new Date() time: new Date()
}; };
messages.value.push(newMessage); messages.value.push(newMessage);
messageCallbacks.forEach(cb => cb(newMessage)); messageCallbacks.forEach(cb => cb(newMessage));
}; };
// 连接服务器 // 连接服务器
client.connect(connectOptions); client.connect(connectOptions);
} catch (err) { } catch (err) {
@ -127,18 +127,18 @@ export function useMqtt() {
errorCallbacks.forEach(cb => cb(error.value!)); errorCallbacks.forEach(cb => cb(error.value!));
} }
}; };
// 断开连接 // 断开连接
const disconnect = () => { const disconnect = () => {
if (!client || !connected.value) return; if (!client || !connected.value) return;
client.disconnect(); client.disconnect();
client = null; client = null;
connected.value = false; connected.value = false;
subscribedTopics.value = []; subscribedTopics.value = [];
disconnectCallbacks.forEach(cb => cb()); disconnectCallbacks.forEach(cb => cb());
}; };
// 订阅主题 // 订阅主题
const subscribe = (topic: string, options: SubscribeOptions): Promise<void> => { const subscribe = (topic: string, options: SubscribeOptions): Promise<void> => {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
@ -146,12 +146,12 @@ export function useMqtt() {
reject(new Error('未连接到MQTT服务器')); reject(new Error('未连接到MQTT服务器'));
return; return;
} }
if (subscribedTopics.value.includes(topic)) { if (subscribedTopics.value.includes(topic)) {
resolve(); resolve();
return; return;
} }
client.subscribe(topic, { client.subscribe(topic, {
qos: options.qos, qos: options.qos,
onSuccess: () => { onSuccess: () => {
@ -166,7 +166,7 @@ export function useMqtt() {
}); });
}); });
}; };
// 取消订阅 // 取消订阅
const unsubscribe = (topic: string): Promise<void> => { const unsubscribe = (topic: string): Promise<void> => {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
@ -174,12 +174,12 @@ export function useMqtt() {
reject(new Error('未连接到MQTT服务器')); reject(new Error('未连接到MQTT服务器'));
return; return;
} }
if (!subscribedTopics.value.includes(topic)) { if (!subscribedTopics.value.includes(topic)) {
resolve(); resolve();
return; return;
} }
client.unsubscribe(topic, { client.unsubscribe(topic, {
onSuccess: () => { onSuccess: () => {
console.log(`取消订阅主题成功: ${topic}`); console.log(`取消订阅主题成功: ${topic}`);
@ -193,7 +193,7 @@ export function useMqtt() {
}); });
}); });
}; };
// 发布消息 // 发布消息
const publish = ( const publish = (
topic: string, topic: string,
@ -205,47 +205,47 @@ export function useMqtt() {
reject(new Error('未连接到MQTT服务器')); reject(new Error('未连接到MQTT服务器'));
return; return;
} }
if (!topic) { if (!topic) {
reject(new Error('主题不能为空')); reject(new Error('主题不能为空'));
return; return;
} }
const message = new Paho.Message( const message = new Paho.Message(
typeof payload === 'string' ? payload : payload.toString() typeof payload === 'string' ? payload : payload.toString()
); );
message.destinationName = topic; message.destinationName = topic;
message.qos = options.qos; message.qos = options.qos;
message.retained = options.retained ?? false; message.retained = options.retained ?? false;
client.send(message); client.send(message);
resolve(); resolve();
}); });
}; };
// 事件注册 // 事件注册
const onConnect = (callback: () => void) => { const onConnect = (callback: () => void) => {
connectCallbacks.push(callback); connectCallbacks.push(callback);
}; };
const onMessage = (callback: (message: MqttMessage) => void) => { const onMessage = (callback: (message: MqttMessage) => void) => {
messageCallbacks.push(callback); messageCallbacks.push(callback);
}; };
const onError = (callback: (err: Error) => void) => { const onError = (callback: (err: Error) => void) => {
errorCallbacks.push(callback); errorCallbacks.push(callback);
}; };
const onDisconnect = (callback: () => void) => { const onDisconnect = (callback: () => void) => {
disconnectCallbacks.push(callback); disconnectCallbacks.push(callback);
}; };
// 组件卸载时断开连接 // 组件卸载时断开连接
onUnmounted(() => { onUnmounted(() => {
disconnect(); disconnect();
}); });
return { return {
connected, connected,
connecting, connecting,

223
src/views/system/user/index.vue
View File

@ -5,22 +5,14 @@
<el-col :lg="4" :xs="24" style=""> <el-col :lg="4" :xs="24" style="">
<el-card shadow="hover"> <el-card shadow="hover">
<el-input v-model="deptName" placeholder="请输入部门名称" prefix-icon="Search" clearable /> <el-input v-model="deptName" placeholder="请输入部门名称" prefix-icon="Search" clearable />
<el-tree <el-tree ref="deptTreeRef" class="mt-2" node-key="id" :data="deptOptions"
ref="deptTreeRef" :props="{ label: 'label', children: 'children' } as any" :expand-on-click-node="false"
class="mt-2" :filter-node-method="filterNode" highlight-current default-expand-all @node-click="handleNodeClick" />
node-key="id"
:data="deptOptions"
:props="{ label: 'label', children: 'children' } as any"
:expand-on-click-node="false"
:filter-node-method="filterNode"
highlight-current
default-expand-all
@node-click="handleNodeClick"
/>
</el-card> </el-card>
</el-col> </el-col>
<el-col :lg="20" :xs="24"> <el-col :lg="20" :xs="24">
<transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave"> <transition :enter-active-class="proxy?.animate.searchAnimate.enter"
:leave-active-class="proxy?.animate.searchAnimate.leave">
<div v-show="showSearch" class="mb-[10px]"> <div v-show="showSearch" class="mb-[10px]">
<el-card shadow="hover"> <el-card shadow="hover">
<el-form ref="queryFormRef" :model="queryParams" :inline="true"> <el-form ref="queryFormRef" :model="queryParams" :inline="true">
@ -31,24 +23,19 @@
<el-input v-model="queryParams.nickName" placeholder="请输入用户昵称" clearable @keyup.enter="handleQuery" /> <el-input v-model="queryParams.nickName" placeholder="请输入用户昵称" clearable @keyup.enter="handleQuery" />
</el-form-item> </el-form-item>
<el-form-item label="手机号码" prop="phonenumber"> <el-form-item label="手机号码" prop="phonenumber">
<el-input v-model="queryParams.phonenumber" placeholder="请输入手机号码" clearable @keyup.enter="handleQuery" /> <el-input v-model="queryParams.phonenumber" placeholder="请输入手机号码" clearable
@keyup.enter="handleQuery" />
</el-form-item> </el-form-item>
<el-form-item label="状态" prop="status"> <el-form-item label="状态" prop="status">
<el-select v-model="queryParams.status" placeholder="用户状态" clearable> <el-select v-model="queryParams.status" placeholder="用户状态" clearable>
<el-option v-for="dict in sys_normal_disable" :key="dict.value" :label="dict.label" :value="dict.value" /> <el-option v-for="dict in sys_normal_disable" :key="dict.value" :label="dict.label"
:value="dict.value" />
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item label="创建时间" style="width: 308px"> <el-form-item label="创建时间" style="width: 308px">
<el-date-picker <el-date-picker v-model="dateRange" value-format="YYYY-MM-DD HH:mm:ss" type="daterange"
v-model="dateRange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"
value-format="YYYY-MM-DD HH:mm:ss" :default-time="[new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 1, 1, 23, 59, 59)]"></el-date-picker>
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>
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
<el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button> <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
@ -63,15 +50,18 @@
<template #header> <template #header>
<el-row :gutter="10"> <el-row :gutter="10">
<el-col :span="1.5"> <el-col :span="1.5">
<el-button v-has-permi="['system:user:add']" type="primary" plain icon="Plus" @click="handleAdd()">新增</el-button> <el-button v-has-permi="['system:user:add']" type="primary" plain icon="Plus"
@click="handleAdd()">新增</el-button>
</el-col> </el-col>
<el-col :span="1.5"> <el-col :span="1.5">
<el-button v-has-permi="['system:user:edit']" type="success" plain :disabled="single" icon="Edit" @click="handleUpdate()"> <el-button v-has-permi="['system:user:edit']" type="success" plain :disabled="single" icon="Edit"
@click="handleUpdate()">
修改 修改
</el-button> </el-button>
</el-col> </el-col>
<el-col :span="1.5"> <el-col :span="1.5">
<el-button v-has-permi="['system:user:remove']" type="danger" plain :disabled="multiple" icon="Delete" @click="handleDelete()"> <el-button v-has-permi="['system:user:remove']" type="danger" plain :disabled="multiple" icon="Delete"
@click="handleDelete()">
删除 删除
</el-button> </el-button>
</el-col> </el-col>
@ -79,32 +69,39 @@
<el-dropdown class="mt-[1px]"> <el-dropdown class="mt-[1px]">
<el-button plain type="info"> <el-button plain type="info">
更多 更多
<el-icon class="el-icon--right"><arrow-down /></el-icon <el-icon class="el-icon--right"><arrow-down /></el-icon></el-button>
></el-button>
<template #dropdown> <template #dropdown>
<el-dropdown-menu> <el-dropdown-menu>
<el-dropdown-item icon="Download" @click="importTemplate">下载模板</el-dropdown-item> <el-dropdown-item icon="Download" @click="importTemplate">下载模板</el-dropdown-item>
<!-- 注意 由于el-dropdown-item标签是延迟加载的 所以v-has-permi自定义标签不生效 需要使用v-if调用方法执行 --> <!-- 注意 由于el-dropdown-item标签是延迟加载的 所以v-has-permi自定义标签不生效 需要使用v-if调用方法执行 -->
<el-dropdown-item v-if="checkPermi(['system:user:import'])" icon="Top" @click="handleImport">导入数据</el-dropdown-item> <el-dropdown-item v-if="checkPermi(['system:user:import'])" icon="Top"
<el-dropdown-item v-if="checkPermi(['system:user:export'])" icon="Download" @click="handleExport">导出数据</el-dropdown-item> @click="handleImport">导入数据</el-dropdown-item>
<el-dropdown-item v-if="checkPermi(['system:user:export'])" icon="Download"
@click="handleExport">导出数据</el-dropdown-item>
</el-dropdown-menu> </el-dropdown-menu>
</template> </template>
</el-dropdown> </el-dropdown>
</el-col> </el-col>
<right-toolbar v-model:show-search="showSearch" :columns="columns" :search="true" @query-table="getList"></right-toolbar> <right-toolbar v-model:show-search="showSearch" :columns="columns" :search="true"
@query-table="getList"></right-toolbar>
</el-row> </el-row>
</template> </template>
<el-table v-loading="loading" border :data="userList" @selection-change="handleSelectionChange"> <el-table v-loading="loading" border :data="userList" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="50" align="center" /> <el-table-column type="selection" width="50" align="center" />
<el-table-column v-if="columns[0].visible" key="userId" label="用户编号" align="center" prop="userId" /> <el-table-column v-if="columns[0].visible" key="userId" label="用户编号" align="center" prop="userId" />
<el-table-column v-if="columns[1].visible" key="userName" label="用户名称" align="center" prop="userName" :show-overflow-tooltip="true" /> <el-table-column v-if="columns[1].visible" key="userName" label="用户名称" align="center" prop="userName"
<el-table-column v-if="columns[2].visible" key="nickName" label="用户昵称" align="center" prop="nickName" :show-overflow-tooltip="true" /> :show-overflow-tooltip="true" />
<el-table-column v-if="columns[3].visible" key="deptName" label="部门" align="center" prop="deptName" :show-overflow-tooltip="true" /> <el-table-column v-if="columns[2].visible" key="nickName" label="用户昵称" align="center" prop="nickName"
<el-table-column v-if="columns[4].visible" key="phonenumber" label="手机号码" align="center" prop="phonenumber" width="120" /> :show-overflow-tooltip="true" />
<el-table-column v-if="columns[3].visible" key="deptName" label="部门" align="center" prop="deptName"
:show-overflow-tooltip="true" />
<el-table-column v-if="columns[4].visible" key="phonenumber" label="手机号码" align="center" prop="phonenumber"
width="120" />
<el-table-column v-if="columns[5].visible" key="status" label="状态" align="center"> <el-table-column v-if="columns[5].visible" key="status" label="状态" align="center">
<template #default="scope"> <template #default="scope">
<el-switch v-model="scope.row.status" active-value="0" inactive-value="1" @change="handleStatusChange(scope.row)"></el-switch> <el-switch v-model="scope.row.status" active-value="0" inactive-value="1"
@change="handleStatusChange(scope.row)"></el-switch>
</template> </template>
</el-table-column> </el-table-column>
@ -117,129 +114,85 @@
<el-table-column label="操作" fixed="right" width="180" class-name="small-padding fixed-width"> <el-table-column label="操作" fixed="right" width="180" class-name="small-padding fixed-width">
<template #default="scope"> <template #default="scope">
<el-tooltip v-if="scope.row.userId !== 1" content="修改" placement="top"> <el-tooltip v-if="scope.row.userId !== 1" content="修改" placement="top">
<el-button v-hasPermi="['system:user:edit']" link type="primary" icon="Edit" @click="handleUpdate(scope.row)"></el-button> <el-button v-hasPermi="['system:user:edit']" link type="primary" icon="Edit"
@click="handleUpdate(scope.row)"></el-button>
</el-tooltip> </el-tooltip>
<el-tooltip v-if="scope.row.userId !== 1" content="删除" placement="top"> <el-tooltip v-if="scope.row.userId !== 1" content="删除" placement="top">
<el-button v-hasPermi="['system:user:remove']" link type="primary" icon="Delete" @click="handleDelete(scope.row)"></el-button> <el-button v-hasPermi="['system:user:remove']" link type="primary" icon="Delete"
@click="handleDelete(scope.row)"></el-button>
</el-tooltip> </el-tooltip>
<el-tooltip v-if="scope.row.userId !== 1" content="重置密码" placement="top"> <el-tooltip v-if="scope.row.userId !== 1" content="重置密码" placement="top">
<el-button v-hasPermi="['system:user:resetPwd']" link type="primary" icon="Key" @click="handleResetPwd(scope.row)"></el-button> <el-button v-hasPermi="['system:user:resetPwd']" link type="primary" icon="Key"
@click="handleResetPwd(scope.row)"></el-button>
</el-tooltip> </el-tooltip>
<el-tooltip v-if="scope.row.userId !== 1" content="分配角色" placement="top"> <el-tooltip v-if="scope.row.userId !== 1" content="分配角色" placement="top">
<el-button v-hasPermi="['system:user:edit']" link type="primary" icon="CircleCheck" @click="handleAuthRole(scope.row)"></el-button> <el-button v-hasPermi="['system:user:edit']" link type="primary" icon="CircleCheck"
@click="handleAuthRole(scope.row)"></el-button>
</el-tooltip> </el-tooltip>
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
<pagination <pagination v-show="total > 0" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize"
v-show="total > 0" :total="total" @pagination="getList" />
v-model:page="queryParams.pageNum"
v-model:limit="queryParams.pageSize"
:total="total"
@pagination="getList"
/>
</el-card> </el-card>
</el-col> </el-col>
</el-row> </el-row>
<!-- 添加或修改用户配置对话框 --> <!-- 添加或修改用户配置对话框 -->
<el-dialog ref="formDialogRef" v-model="dialog.visible" :title="dialog.title" width="600px" append-to-body @close="closeDialog"> <el-dialog ref="formDialogRef" v-model="dialog.visible" :title="dialog.title" width="600px" append-to-body
@close="closeDialog">
<el-form ref="userFormRef" :model="form" :rules="rules" label-width="80px"> <el-form ref="userFormRef" :model="form" :rules="rules" label-width="80px">
<el-row> <el-row>
<el-col :span="12"> <el-col :span="24">
<el-form-item label="用户昵称" prop="nickName"> <el-form-item label="用户昵称" prop="nickName">
<el-input v-model="form.nickName" placeholder="请输入用户昵称" maxlength="30" /> <el-input v-model="form.nickName" placeholder="请输入用户昵称" maxlength="30" />
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="12"> <el-col :span="24">
<el-form-item label="归属部门" prop="deptId"> <el-form-item label="归属部门" prop="deptId">
<el-tree-select <el-tree-select v-model="form.deptId" :data="enabledDeptOptions"
v-model="form.deptId" :props="{ value: 'id', label: 'label', children: 'children' } as any" value-key="id"
:data="enabledDeptOptions" placeholder="请选择归属部门" check-strictly @change="handleDeptChange" />
:props="{ value: 'id', label: 'label', children: 'children' } as any"
value-key="id"
placeholder="请选择归属部门"
check-strictly
@change="handleDeptChange"
/>
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> </el-row>
<el-row> <el-row>
<el-col :span="12"> <el-col :span="24">
<el-form-item label="手机号码" prop="phonenumber"> <el-form-item label="手机号码" prop="phonenumber">
<el-input v-model="form.phonenumber" placeholder="请输入手机号码" maxlength="11" /> <el-input v-model="form.phonenumber" placeholder="请输入手机号码" maxlength="11" />
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="12"> <el-col :span="24">
<el-form-item label="邮箱" prop="email">
<el-input v-model="form.email" placeholder="请输入邮箱" maxlength="50" />
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item v-if="form.userId == undefined" label="用户名称" prop="userName">
<el-input v-model="form.userName" placeholder="请输入用户名称" maxlength="30" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item v-if="form.userId == undefined" label="用户密码" prop="password">
<el-input v-model="form.password" placeholder="请输入用户密码" type="password" maxlength="20" show-password />
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="用户性别">
<el-select v-model="form.sex" placeholder="请选择">
<el-option v-for="dict in sys_user_sex" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="状态">
<el-radio-group v-model="form.status">
<el-radio v-for="dict in sys_normal_disable" :key="dict.value" :value="dict.value">{{ dict.label }}</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="岗位">
<el-select v-model="form.postIds" multiple placeholder="请选择">
<el-option
v-for="item in postOptions"
:key="item.postId"
:label="item.postName"
:value="item.postId"
:disabled="item.status == '1'"
></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="角色" prop="roleIds"> <el-form-item label="角色" prop="roleIds">
<el-select v-model="form.roleIds" filterable multiple placeholder="请选择"> <el-select v-model="form.roleIds" filterable multiple placeholder="请选择">
<el-option <el-option v-for="item in roleOptions" :key="item.roleId" :label="item.roleName" :value="item.roleId"
v-for="item in roleOptions" :disabled="item.status == '1'"></el-option>
:key="item.roleId"
:label="item.roleName"
:value="item.roleId"
:disabled="item.status == '1'"
></el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> </el-row>
<el-row> <el-row>
<el-col :span="24"> <el-col :span="24">
<el-form-item label="备注"> <el-form-item v-if="form.userId == undefined" label="用户名称" prop="userName">
<el-input v-model="form.remark" type="textarea" placeholder="请输入内容"></el-input> <el-input v-model="form.userName" placeholder="请输入用户名称" maxlength="30" />
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item v-if="form.userId == undefined" label="用户密码" prop="password">
<el-input v-model="form.password" placeholder="请输入用户密码" type="password" maxlength="20" show-password />
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="状态">
<el-radio-group v-model="form.status">
<el-radio v-for="dict in sys_normal_disable" :key="dict.value" :value="dict.value">{{ dict.label
}}</el-radio>
</el-radio-group>
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> </el-row>
@ -254,18 +207,9 @@
<!-- 用户导入对话框 --> <!-- 用户导入对话框 -->
<el-dialog v-model="upload.open" :title="upload.title" width="400px" append-to-body> <el-dialog v-model="upload.open" :title="upload.title" width="400px" append-to-body>
<el-upload <el-upload ref="uploadRef" :limit="1" accept=".xlsx, .xls" :headers="upload.headers"
ref="uploadRef" :action="upload.url + '?updateSupport=' + upload.updateSupport" :disabled="upload.isUploading"
:limit="1" :on-progress="handleFileUploadProgress" :on-success="handleFileSuccess" :auto-upload="false" drag>
accept=".xlsx, .xls"
:headers="upload.headers"
:action="upload.url + '?updateSupport=' + upload.updateSupport"
:disabled="upload.isUploading"
:on-progress="handleFileUploadProgress"
:on-success="handleFileSuccess"
:auto-upload="false"
drag
>
<el-icon class="el-icon--upload"> <el-icon class="el-icon--upload">
<i-ep-upload-filled /> <i-ep-upload-filled />
</el-icon> </el-icon>
@ -274,7 +218,8 @@
<div class="text-center el-upload__tip"> <div class="text-center el-upload__tip">
<div class="el-upload__tip"><el-checkbox v-model="upload.updateSupport" />是否更新已经存在的用户数据</div> <div class="el-upload__tip"><el-checkbox v-model="upload.updateSupport" />是否更新已经存在的用户数据</div>
<span>仅允许导入xls、xlsx格式文件。</span> <span>仅允许导入xls、xlsx格式文件。</span>
<el-link type="primary" :underline="false" style="font-size: 12px; vertical-align: baseline" @click="importTemplate">下载模板</el-link> <el-link type="primary" :underline="false" style="font-size: 12px; vertical-align: baseline"
@click="importTemplate">下载模板</el-link>
</div> </div>
</template> </template>
</el-upload> </el-upload>
@ -294,11 +239,9 @@ import { UserForm, UserQuery, UserVO } from '@/api/system/user/types';
import { DeptTreeVO, DeptVO } from '@/api/system/dept/types'; import { DeptTreeVO, DeptVO } from '@/api/system/dept/types';
import { RoleVO } from '@/api/system/role/types'; import { RoleVO } from '@/api/system/role/types';
import { PostQuery, PostVO } from '@/api/system/post/types'; import { PostQuery, PostVO } from '@/api/system/post/types';
import { treeselect } from '@/api/system/dept';
import { globalHeaders } from '@/utils/request'; import { globalHeaders } from '@/utils/request';
import { to } from 'await-to-js'; import { to } from 'await-to-js';
import { optionselect } from '@/api/system/post'; import { optionselect } from '@/api/system/post';
import { hasPermi } from '@/directive/permission';
import { checkPermi } from '@/utils/permission'; import { checkPermi } from '@/utils/permission';
const router = useRouter(); const router = useRouter();
@ -362,10 +305,7 @@ const initFormData: UserForm = {
nickName: undefined, nickName: undefined,
password: '', password: '',
phonenumber: undefined, phonenumber: undefined,
email: undefined,
sex: undefined,
status: '0', status: '0',
remark: '',
postIds: [], postIds: [],
roleIds: [] roleIds: []
}; };
@ -402,13 +342,6 @@ const initData: PageData<UserForm, UserQuery> = {
}, },
{ pattern: /^[^<>"'|\\]+$/, message: '不能包含非法字符：< > " \' \\ |', trigger: 'blur' } { pattern: /^[^<>"'|\\]+$/, message: '不能包含非法字符：< > " \' \\ |', trigger: 'blur' }
], ],
email: [
{
type: 'email',
message: '请输入正确的邮箱地址',
trigger: ['blur', 'change']
}
],
phonenumber: [ phonenumber: [
{ {
pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/, pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,