@fmdevui/fm-dev
Version:
Page level components developed based on Element Plus.
413 lines (408 loc) • 18.4 kB
JavaScript
;
Object.defineProperty(exports, '__esModule', { value: true });
var vue = require('vue');
var elementPlus = require('element-plus');
var useVxeTableOptionsHook = require('../../../hook/useVxeTableOptionsHook.js');
require('../../../stores/index.js');
var pinia = require('pinia');
require('../../../utils/index.js');
var vueI18n = require('vue-i18n');
var lodashEs = require('lodash-es');
var index$1 = require('../../../utils/emit/index.js');
require('./sendMessage.vue.js');
require('../../../api/index.js');
var themeConfig = require('../../../stores/themeConfig.js');
var index = require('../../../utils/storage/index.js');
var index$2 = require('../../../api/sys/index.js');
var sendMessage_vue_vue_type_script_setup_true_name_sendMessage_lang = require('./sendMessage.vue2.js');
const _hoisted_1 = { class: "sys-onlineUser-container" };
const _hoisted_2 = { style: { "color": "#fff" } };
const localPageParamKey = "localPageParam:sysOnlineUser";
var _sfc_main = /* @__PURE__ */ vue.defineComponent({
__name: "onlineuser",
setup(__props, { expose: __expose }) {
const storesThemeConfig = themeConfig.useThemeConfig();
const { themeConfig: themeConfig$1 } = pinia.storeToRefs(storesThemeConfig);
const { t } = vueI18n.useI18n();
const xGrid = vue.ref();
const sendMessageRef = vue.ref();
const state = vue.reactive({
isVisible: false,
queryParams: {
userName: void 0,
realName: void 0
},
localPageParam: {
pageSize: 50,
defaultSort: { field: "orderNo", order: "asc", descStr: "desc" }
},
onlineUserList: [],
// 在线用户列表
lastUserState: {
online: false,
realName: ""
}
// 最后接收的用户变更状态信息
});
const options = useVxeTableOptionsHook.useVxeTable(
{
id: "sysOnlineUser",
name: t("message.list.onlineUserList"),
columns: [
// { type: 'checkbox', width: 40, fixed: 'left' },
{ type: "seq", title: t("message.list.seq"), width: 50, fixed: "left" },
{ field: "userName", title: t("message.list.account"), minWidth: 110, showOverflow: "tooltip" },
{ field: "realName", title: t("message.list.realName"), minWidth: 110, showOverflow: "tooltip" },
{ field: "ip", title: t("message.list.ipAddress"), minWidth: 100, showOverflow: "tooltip" },
{ field: "browser", title: t("message.list.browser"), minWidth: 160, showOverflow: "tooltip" },
// { field: 'connectionId', title: '连接Id', minWidth: 160, showOverflow: 'tooltip', sortable: true },
{ field: "time", title: t("message.list.loginTime"), minWidth: 120, showOverflow: "tooltip" },
{ field: "buttons", title: t("message.list.operation"), fixed: "right", width: 100, showOverflow: true, slots: { default: "row_buttons" } }
]
},
// vxeGrid配置参数(此处可覆写任何参数)，参考vxe-table官方文档
{
// 代理配置
proxyConfig: { autoLoad: true, ajax: { query: ({ page, sort }) => handleQueryApi(page, sort) } },
// 排序配置
sortConfig: { defaultSort: index.Local.get(localPageParamKey)?.defaultSort || state.localPageParam.defaultSort },
// 分页配置
pagerConfig: { pageSize: index.Local.get(localPageParamKey)?.pageSize || state.localPageParam.pageSize },
// 工具栏配置
toolbarConfig: { export: true }
}
);
vue.onMounted(async () => {
state.localPageParam = index.Local.get(localPageParamKey) || state.localPageParam;
index$1.default.emit("signalRbeginOnlineUserList", "sysOnlineUser");
index$1.default.off("signalRReceiveOnlineUserList", () => {
});
index$1.default.on("signalRReceiveOnlineUserList", async (data) => {
state.onlineUserList = data.userList;
state.lastUserState = {
online: data.online,
realName: data.realName
};
if (themeConfig$1.value.onlineNotice) notificationThrottle();
});
});
const notificationThrottle = lodashEs.throttle(
function() {
elementPlus.ElNotification({
title: "\u63D0\u793A",
message: `${state.lastUserState.online ? `\u3010${state.lastUserState.realName}\u3011\u4E0A\u7EBF\u4E86` : `\u3010${state.lastUserState.realName}\u3011\u79BB\u5F00\u4E86`}`,
type: `${state.lastUserState.online ? "info" : "error"}`,
position: "bottom-right"
});
},
3e3,
{
leading: true,
trailing: false
}
);
const openDrawer = async () => {
state.isVisible = true;
await handleQuery();
};
const handleQueryApi = async (page, sort) => {
const params = Object.assign(state.queryParams, { page: page.currentPage, pageSize: page.pageSize, field: sort.field, order: sort.order, descStr: "desc" });
return index$2.useSysApi().getOnlineUserList(params);
};
const handleQuery = async (reset = false) => {
options.loading = true;
reset ? await xGrid.value?.commitProxy("reload") : await xGrid.value?.commitProxy("query");
options.loading = false;
};
const resetQuery = async () => {
state.queryParams.userName = void 0;
state.queryParams.realName = void 0;
await handleQuery();
};
const gridEvents = {
// 只对 pager-config 配置时有效，分页发生改变时会触发该事件
async pageChange({ pageSize }) {
state.localPageParam.pageSize = pageSize;
index.Local.set(localPageParamKey, state.localPageParam);
},
// 当排序条件发生变化时会触发该事件
async sortChange({ field, order }) {
state.localPageParam.defaultSort = { field, order, descStr: "desc" };
index.Local.set(localPageParamKey, state.localPageParam);
}
};
const openSendMessage = (row) => {
sendMessageRef.value?.openDialog(row);
};
const forceOffline = async (row) => {
elementPlus.ElMessageBox.confirm(t("message.list.confirmKickAccount", { account: row.realName }), t("message.list.hint"), {
confirmButtonText: t("message.list.confirm"),
cancelButtonText: t("message.list.cancelButtonText"),
type: "warning"
}).then(async () => {
await index$1.default.emit("signalForceOffline", { connectionId: row.connectionId });
}).catch(() => {
});
};
__expose({ openDrawer });
return (_ctx, _cache) => {
const _component_ele_UserFilled = vue.resolveComponent("ele-UserFilled");
const _component_el_icon = vue.resolveComponent("el-icon");
const _component_el_input = vue.resolveComponent("el-input");
const _component_el_form_item = vue.resolveComponent("el-form-item");
const _component_el_col = vue.resolveComponent("el-col");
const _component_el_row = vue.resolveComponent("el-row");
const _component_el_form = vue.resolveComponent("el-form");
const _component_el_divider = vue.resolveComponent("el-divider");
const _component_el_button = vue.resolveComponent("el-button");
const _component_el_button_group = vue.resolveComponent("el-button-group");
const _component_el_card = vue.resolveComponent("el-card");
const _component_el_empty = vue.resolveComponent("el-empty");
const _component_el_tooltip = vue.resolveComponent("el-tooltip");
const _component_vxe_grid = vue.resolveComponent("vxe-grid");
const _component_el_drawer = vue.resolveComponent("el-drawer");
const _directive_auth = vue.resolveDirective("auth");
return vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
vue.createVNode(_component_el_drawer, {
modelValue: state.isVisible,
"onUpdate:modelValue": _cache[5] || (_cache[5] = ($event) => state.isVisible = $event),
size: "35%"
}, {
header: vue.withCtx(() => [
vue.createElementVNode("div", _hoisted_2, [
vue.createVNode(_component_el_icon, {
size: "16",
style: { "margin-right": "3px", "display": "inline", "vertical-align": "middle" }
}, {
default: vue.withCtx(() => [
vue.createVNode(_component_ele_UserFilled)
]),
_: 1
/* STABLE */
}),
vue.createElementVNode(
"span",
null,
vue.toDisplayString(_ctx.$t("message.list.onlineUserList")),
1
/* TEXT */
)
])
]),
default: vue.withCtx(() => [
vue.createVNode(_component_el_card, {
shadow: "hover",
"body-style": { padding: "5px 5px 0 5px", display: "flex", width: "100%", height: "100%", alignItems: "start" }
}, {
default: vue.withCtx(() => [
vue.createVNode(_component_el_form, {
model: state.queryParams,
ref: "queryForm",
"show-message": false,
inlineMessage: true,
"label-width": "auto",
style: { "flex": "1 1 0%" }
}, {
default: vue.withCtx(() => [
vue.createVNode(_component_el_row, { gutter: 10 }, {
default: vue.withCtx(() => [
vue.createVNode(_component_el_col, {
class: "mb5",
xs: 24,
sm: 12,
md: 12,
lg: 12,
xl: 12
}, {
default: vue.withCtx(() => [
vue.createVNode(_component_el_form_item, {
label: _ctx.$t("message.list.account"),
prop: "userName"
}, {
default: vue.withCtx(() => [
vue.createVNode(_component_el_input, {
modelValue: state.queryParams.userName,
"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => state.queryParams.userName = $event),
placeholder: _ctx.$t("message.list.account"),
clearable: "",
onKeyup: _cache[1] || (_cache[1] = vue.withKeys(($event) => handleQuery(true), ["enter", "native"]))
}, null, 8, ["modelValue", "placeholder"])
]),
_: 1
/* STABLE */
}, 8, ["label"])
]),
_: 1
/* STABLE */
}),
vue.createVNode(_component_el_col, {
class: "mb5",
xs: 24,
sm: 12,
md: 12,
lg: 12,
xl: 12
}, {
default: vue.withCtx(() => [
vue.createVNode(_component_el_form_item, {
label: _ctx.$t("message.list.realName"),
prop: "realName"
}, {
default: vue.withCtx(() => [
vue.createVNode(_component_el_input, {
modelValue: state.queryParams.realName,
"onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => state.queryParams.realName = $event),
placeholder: _ctx.$t("message.list.realName"),
clearable: "",
onKeyup: _cache[3] || (_cache[3] = vue.withKeys(($event) => handleQuery(true), ["enter", "native"]))
}, null, 8, ["modelValue", "placeholder"])
]),
_: 1
/* STABLE */
}, 8, ["label"])
]),
_: 1
/* STABLE */
})
]),
_: 1
/* STABLE */
})
]),
_: 1
/* STABLE */
}, 8, ["model"]),
vue.createVNode(_component_el_divider, {
style: { "height": "calc(100% - 5px)", "margin": "0 10px" },
direction: "vertical"
}),
vue.createVNode(_component_el_row, null, {
default: vue.withCtx(() => [
vue.createVNode(_component_el_col, null, {
default: vue.withCtx(() => [
vue.createVNode(_component_el_button_group, null, {
default: vue.withCtx(() => [
vue.createVNode(_component_el_button, {
type: "primary",
icon: "ele-Search",
onClick: _cache[4] || (_cache[4] = ($event) => handleQuery(true)),
loading: vue.unref(options).loading
}, {
default: vue.withCtx(() => [
vue.createTextVNode(
vue.toDisplayString(_ctx.$t("message.list.query")),
1
/* TEXT */
)
]),
_: 1
/* STABLE */
}, 8, ["loading"]),
vue.createVNode(_component_el_button, {
icon: "ele-Refresh",
onClick: resetQuery,
loading: vue.unref(options).loading
}, {
default: vue.withCtx(() => [
vue.createTextVNode(
vue.toDisplayString(_ctx.$t("message.list.reset")),
1
/* TEXT */
)
]),
_: 1
/* STABLE */
}, 8, ["loading"])
]),
_: 1
/* STABLE */
})
]),
_: 1
/* STABLE */
})
]),
_: 1
/* STABLE */
})
]),
_: 1
/* STABLE */
}),
vue.createVNode(_component_el_card, {
class: "full-table",
shadow: "hover",
style: { "margin-top": "5px" }
}, {
default: vue.withCtx(() => [
vue.createVNode(
_component_vxe_grid,
vue.mergeProps({
ref_key: "xGrid",
ref: xGrid,
class: "xGrid-style"
}, vue.unref(options), vue.toHandlers(gridEvents)),
{
toolbar_buttons: vue.withCtx(() => _cache[6] || (_cache[6] = [])),
toolbar_tools: vue.withCtx(() => _cache[7] || (_cache[7] = [])),
empty: vue.withCtx(() => [
vue.createVNode(_component_el_empty, { "image-size": 200 })
]),
row_buttons: vue.withCtx(({ row }) => [
vue.createVNode(_component_el_tooltip, {
content: _ctx.$t("message.list.sendMessage"),
placement: "top"
}, {
default: vue.withCtx(() => [
vue.createVNode(_component_el_button, {
icon: "ele-Position",
text: "",
type: "primary",
onClick: ($event) => openSendMessage(row)
}, null, 8, ["onClick"])
]),
_: 2
/* DYNAMIC */
}, 1032, ["content"]),
vue.createVNode(_component_el_tooltip, {
content: _ctx.$t("message.list.forceOffline"),
placement: "top"
}, {
default: vue.withCtx(() => [
vue.withDirectives(vue.createVNode(_component_el_button, {
icon: "ele-CircleCloseFilled",
text: "",
type: "danger",
onClick: ($event) => forceOffline(row)
}, null, 8, ["onClick"]), [
[_directive_auth, "sysOnlineUser/forceOffline"]
])
]),
_: 2
/* DYNAMIC */
}, 1032, ["content"])
]),
_: 1
/* STABLE */
},
16
/* FULL_PROPS */
)
]),
_: 1
/* STABLE */
})
]),
_: 1
/* STABLE */
}, 8, ["modelValue"]),
vue.createVNode(sendMessage_vue_vue_type_script_setup_true_name_sendMessage_lang.default, {
ref_key: "sendMessageRef",
ref: sendMessageRef,
title: _ctx.$t("message.list.sendMessage")
}, null, 8, ["title"])
]);
};
}
});
exports.default = _sfc_main;