201 lines
6.8 KiB
Vue
201 lines
6.8 KiB
Vue
<script>
|
||
/** 首页工单统计：状态字典与数量映射按状态 ID 关联；只展示响应中实际包含的状态，点击进入相应筛选列表。 */
|
||
import "~/assets/styles/HomeTicketStat.C4kzybrY.css";
|
||
import { toDisplayString } from "vue";
|
||
import { renderList } from "vue";
|
||
import { onMounted } from "vue";
|
||
import { createBlock } from "vue";
|
||
import { ref } from "vue";
|
||
import { withCtx } from "vue";
|
||
import { computed } from "vue";
|
||
import { createElementBlock } from "vue";
|
||
import { Fragment } from "vue";
|
||
import { createElementVNode } from "vue";
|
||
import { createTextVNode } from "vue";
|
||
import { unref } from "vue";
|
||
import { defineComponent } from "vue";
|
||
import { createVNode } from "vue";
|
||
import { openBlock } from "vue";
|
||
import { normalizeStyle } from "vue";
|
||
import { NuxtLink } from "#components";
|
||
import { useApi } from "~/lib/auth.js";
|
||
import { t as _plugin_vue_export_helper_t } from "~/lib/_plugin-vue_export-helper.js";
|
||
import ListEmpty from "~/components/ListEmpty.vue";
|
||
import skeleton from "primevue/skeleton";
|
||
var x = {
|
||
class: `home-card`,
|
||
},
|
||
S = {
|
||
class: `home-card-head`,
|
||
},
|
||
C = {
|
||
key: 0,
|
||
class: `home-card-body`,
|
||
},
|
||
w = {
|
||
key: 3,
|
||
class: `stat-grid`,
|
||
},
|
||
T = {
|
||
class: `stat-num`,
|
||
},
|
||
E = {
|
||
class: `stat-name`,
|
||
},
|
||
D = Object.assign(
|
||
_plugin_vue_export_helper_t(
|
||
defineComponent({
|
||
__name: `HomeTicketStat`,
|
||
setup(f) {
|
||
let v = useApi(),
|
||
D = ref([]),
|
||
O = ref({}),
|
||
k = ref(!0),
|
||
A = ref(``);
|
||
// 名称、颜色和数量需同时加载成功，任一请求失败则展示错误，避免统计字典错配。
|
||
onMounted(async () => {
|
||
try {
|
||
let [e, t] = await Promise.all([
|
||
v.get(`/ticket/status`),
|
||
v.get(`/ticket/statistic`),
|
||
]);
|
||
((D.value = e.list ?? []), (O.value = t ?? {}));
|
||
} catch (e) {
|
||
A.value = e instanceof Error ? e.message : `工单统计加载失败`;
|
||
} finally {
|
||
k.value = !1;
|
||
}
|
||
});
|
||
let j = computed(() =>
|
||
D.value
|
||
.filter((e) => O.value[e.id] !== void 0)
|
||
.map((e) => ({
|
||
...e,
|
||
count: O.value[e.id] ?? 0,
|
||
})),
|
||
);
|
||
// 区分加载、异常、空态和有效统计；响应未包含的状态不补造为零工单。
|
||
return (n, i) => {
|
||
let o = NuxtLink,
|
||
f = skeleton,
|
||
_ = ListEmpty;
|
||
return (
|
||
openBlock(),
|
||
createElementBlock(`div`, x, [
|
||
createElementVNode(`div`, S, [
|
||
(i[1] ||= createElementVNode(
|
||
`div`,
|
||
{
|
||
class: `home-card-title`,
|
||
},
|
||
[
|
||
createElementVNode(`i`, {
|
||
class: `pi pi-chart-bar`,
|
||
}),
|
||
createTextVNode(`工单状态`),
|
||
],
|
||
-1,
|
||
)),
|
||
createVNode(
|
||
o,
|
||
{
|
||
to: `/tickets`,
|
||
class: `home-card-more`,
|
||
},
|
||
{
|
||
default: withCtx(() => [
|
||
...(i[0] ||= [createTextVNode(`全部 ›`, -1)]),
|
||
]),
|
||
_: 1,
|
||
},
|
||
),
|
||
]),
|
||
unref(k)
|
||
? (openBlock(),
|
||
createElementBlock(`div`, C, [
|
||
createVNode(f, {
|
||
height: `56px`,
|
||
}),
|
||
]))
|
||
: unref(A)
|
||
? (openBlock(),
|
||
createBlock(
|
||
_,
|
||
{
|
||
key: 1,
|
||
icon: `pi pi-exclamation-circle`,
|
||
title: `统计加载失败`,
|
||
description: unref(A),
|
||
},
|
||
null,
|
||
8,
|
||
[`description`],
|
||
))
|
||
: unref(j).length
|
||
? (openBlock(),
|
||
createElementBlock(`div`, w, [
|
||
(openBlock(!0),
|
||
createElementBlock(
|
||
Fragment,
|
||
null,
|
||
renderList(
|
||
unref(j),
|
||
(t) => (
|
||
openBlock(),
|
||
createBlock(
|
||
o,
|
||
{
|
||
key: t.id,
|
||
to: `/tickets?status=${t.id}`,
|
||
class: `stat-chip`,
|
||
style: normalizeStyle({
|
||
borderLeftColor: t.color,
|
||
}),
|
||
},
|
||
{
|
||
default: withCtx(() => [
|
||
createElementVNode(
|
||
`span`,
|
||
T,
|
||
toDisplayString(t.count),
|
||
1,
|
||
),
|
||
createElementVNode(
|
||
`span`,
|
||
E,
|
||
toDisplayString(t.name),
|
||
1,
|
||
),
|
||
]),
|
||
_: 2,
|
||
},
|
||
1032,
|
||
[`to`, `style`],
|
||
)
|
||
),
|
||
),
|
||
128,
|
||
)),
|
||
]))
|
||
: (openBlock(),
|
||
createBlock(_, {
|
||
key: 2,
|
||
icon: `pi pi-inbox`,
|
||
title: `暂无工单`,
|
||
description: `提交工单后可在这里跟踪进度`,
|
||
})),
|
||
])
|
||
);
|
||
};
|
||
},
|
||
}),
|
||
[[`__scopeId`, `data-v-6971a1b9`]],
|
||
),
|
||
{
|
||
__name: `HomeTicketStat`,
|
||
},
|
||
);
|
||
export {};
|
||
export default D;
|
||
</script>
|