@fmdevui/fm-dev
Version:
Page level components developed based on Element Plus.
409 lines (406 loc) • 18 kB
JavaScript
import { defineComponent, ref, reactive, onMounted, resolveComponent, resolveDirective, createElementBlock, openBlock, createVNode, withCtx, withKeys, unref, createTextVNode, toDisplayString, mergeProps, toHandlers, withDirectives, createElementVNode } from 'vue';
import { ElNotification, ElMessageBox } from 'element-plus';
import { useVxeTable } from '../../../hook/useVxeTableOptionsHook.mjs';
import '../../../stores/index.mjs';
import { storeToRefs } from 'pinia';
import '../../../utils/index.mjs';
import { useI18n } from 'vue-i18n';
import { throttle } from 'lodash-es';
import emitter from '../../../utils/emit/index.mjs';
import './sendMessage.vue.mjs';
import '../../../api/index.mjs';
import { useThemeConfig } from '../../../stores/themeConfig.mjs';
import { Local } from '../../../utils/storage/index.mjs';
import { useSysApi } from '../../../api/sys/index.mjs';
import _sfc_main$1 from './sendMessage.vue2.mjs';
const _hoisted_1 = { class: "sys-onlineUser-container" };
const _hoisted_2 = { style: { "color": "#fff" } };
const localPageParamKey = "localPageParam:sysOnlineUser";
var _sfc_main = /* @__PURE__ */ defineComponent({
__name: "onlineuser",
setup(__props, { expose: __expose }) {
const storesThemeConfig = useThemeConfig();
const { themeConfig } = storeToRefs(storesThemeConfig);
const { t } = useI18n();
const xGrid = ref();
const sendMessageRef = ref();
const state = 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 = 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: Local.get(localPageParamKey)?.defaultSort || state.localPageParam.defaultSort },
// 分页配置
pagerConfig: { pageSize: Local.get(localPageParamKey)?.pageSize || state.localPageParam.pageSize },
// 工具栏配置
toolbarConfig: { export: true }
}
);
onMounted(async () => {
state.localPageParam = Local.get(localPageParamKey) || state.localPageParam;
emitter.emit("signalRbeginOnlineUserList", "sysOnlineUser");
emitter.off("signalRReceiveOnlineUserList", () => {
});
emitter.on("signalRReceiveOnlineUserList", async (data) => {
state.onlineUserList = data.userList;
state.lastUserState = {
online: data.online,
realName: data.realName
};
if (themeConfig.value.onlineNotice) notificationThrottle();
});
});
const notificationThrottle = throttle(
function() {
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 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;
Local.set(localPageParamKey, state.localPageParam);
},
// 当排序条件发生变化时会触发该事件
async sortChange({ field, order }) {
state.localPageParam.defaultSort = { field, order, descStr: "desc" };
Local.set(localPageParamKey, state.localPageParam);
}
};
const openSendMessage = (row) => {
sendMessageRef.value?.openDialog(row);
};
const forceOffline = async (row) => {
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 emitter.emit("signalForceOffline", { connectionId: row.connectionId });
}).catch(() => {
});
};
__expose({ openDrawer });
return (_ctx, _cache) => {
const _component_ele_UserFilled = resolveComponent("ele-UserFilled");
const _component_el_icon = resolveComponent("el-icon");
const _component_el_input = resolveComponent("el-input");
const _component_el_form_item = resolveComponent("el-form-item");
const _component_el_col = resolveComponent("el-col");
const _component_el_row = resolveComponent("el-row");
const _component_el_form = resolveComponent("el-form");
const _component_el_divider = resolveComponent("el-divider");
const _component_el_button = resolveComponent("el-button");
const _component_el_button_group = resolveComponent("el-button-group");
const _component_el_card = resolveComponent("el-card");
const _component_el_empty = resolveComponent("el-empty");
const _component_el_tooltip = resolveComponent("el-tooltip");
const _component_vxe_grid = resolveComponent("vxe-grid");
const _component_el_drawer = resolveComponent("el-drawer");
const _directive_auth = resolveDirective("auth");
return openBlock(), createElementBlock("div", _hoisted_1, [
createVNode(_component_el_drawer, {
modelValue: state.isVisible,
"onUpdate:modelValue": _cache[5] || (_cache[5] = ($event) => state.isVisible = $event),
size: "35%"
}, {
header: withCtx(() => [
createElementVNode("div", _hoisted_2, [
createVNode(_component_el_icon, {
size: "16",
style: { "margin-right": "3px", "display": "inline", "vertical-align": "middle" }
}, {
default: withCtx(() => [
createVNode(_component_ele_UserFilled)
]),
_: 1
/* STABLE */
}),
createElementVNode(
"span",
null,
toDisplayString(_ctx.$t("message.list.onlineUserList")),
1
/* TEXT */
)
])
]),
default: withCtx(() => [
createVNode(_component_el_card, {
shadow: "hover",
"body-style": { padding: "5px 5px 0 5px", display: "flex", width: "100%", height: "100%", alignItems: "start" }
}, {
default: withCtx(() => [
createVNode(_component_el_form, {
model: state.queryParams,
ref: "queryForm",
"show-message": false,
inlineMessage: true,
"label-width": "auto",
style: { "flex": "1 1 0%" }
}, {
default: withCtx(() => [
createVNode(_component_el_row, { gutter: 10 }, {
default: withCtx(() => [
createVNode(_component_el_col, {
class: "mb5",
xs: 24,
sm: 12,
md: 12,
lg: 12,
xl: 12
}, {
default: withCtx(() => [
createVNode(_component_el_form_item, {
label: _ctx.$t("message.list.account"),
prop: "userName"
}, {
default: withCtx(() => [
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] = withKeys(($event) => handleQuery(true), ["enter", "native"]))
}, null, 8, ["modelValue", "placeholder"])
]),
_: 1
/* STABLE */
}, 8, ["label"])
]),
_: 1
/* STABLE */
}),
createVNode(_component_el_col, {
class: "mb5",
xs: 24,
sm: 12,
md: 12,
lg: 12,
xl: 12
}, {
default: withCtx(() => [
createVNode(_component_el_form_item, {
label: _ctx.$t("message.list.realName"),
prop: "realName"
}, {
default: withCtx(() => [
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] = withKeys(($event) => handleQuery(true), ["enter", "native"]))
}, null, 8, ["modelValue", "placeholder"])
]),
_: 1
/* STABLE */
}, 8, ["label"])
]),
_: 1
/* STABLE */
})
]),
_: 1
/* STABLE */
})
]),
_: 1
/* STABLE */
}, 8, ["model"]),
createVNode(_component_el_divider, {
style: { "height": "calc(100% - 5px)", "margin": "0 10px" },
direction: "vertical"
}),
createVNode(_component_el_row, null, {
default: withCtx(() => [
createVNode(_component_el_col, null, {
default: withCtx(() => [
createVNode(_component_el_button_group, null, {
default: withCtx(() => [
createVNode(_component_el_button, {
type: "primary",
icon: "ele-Search",
onClick: _cache[4] || (_cache[4] = ($event) => handleQuery(true)),
loading: unref(options).loading
}, {
default: withCtx(() => [
createTextVNode(
toDisplayString(_ctx.$t("message.list.query")),
1
/* TEXT */
)
]),
_: 1
/* STABLE */
}, 8, ["loading"]),
createVNode(_component_el_button, {
icon: "ele-Refresh",
onClick: resetQuery,
loading: unref(options).loading
}, {
default: withCtx(() => [
createTextVNode(
toDisplayString(_ctx.$t("message.list.reset")),
1
/* TEXT */
)
]),
_: 1
/* STABLE */
}, 8, ["loading"])
]),
_: 1
/* STABLE */
})
]),
_: 1
/* STABLE */
})
]),
_: 1
/* STABLE */
})
]),
_: 1
/* STABLE */
}),
createVNode(_component_el_card, {
class: "full-table",
shadow: "hover",
style: { "margin-top": "5px" }
}, {
default: withCtx(() => [
createVNode(
_component_vxe_grid,
mergeProps({
ref_key: "xGrid",
ref: xGrid,
class: "xGrid-style"
}, unref(options), toHandlers(gridEvents)),
{
toolbar_buttons: withCtx(() => _cache[6] || (_cache[6] = [])),
toolbar_tools: withCtx(() => _cache[7] || (_cache[7] = [])),
empty: withCtx(() => [
createVNode(_component_el_empty, { "image-size": 200 })
]),
row_buttons: withCtx(({ row }) => [
createVNode(_component_el_tooltip, {
content: _ctx.$t("message.list.sendMessage"),
placement: "top"
}, {
default: withCtx(() => [
createVNode(_component_el_button, {
icon: "ele-Position",
text: "",
type: "primary",
onClick: ($event) => openSendMessage(row)
}, null, 8, ["onClick"])
]),
_: 2
/* DYNAMIC */
}, 1032, ["content"]),
createVNode(_component_el_tooltip, {
content: _ctx.$t("message.list.forceOffline"),
placement: "top"
}, {
default: withCtx(() => [
withDirectives(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"]),
createVNode(_sfc_main$1, {
ref_key: "sendMessageRef",
ref: sendMessageRef,
title: _ctx.$t("message.list.sendMessage")
}, null, 8, ["title"])
]);
};
}
});
export { _sfc_main as default };