优化菜单结构
This commit is contained in:
@@ -0,0 +1,215 @@
|
||||
<template>
|
||||
<div class="search">
|
||||
<search @search="reload" :selection="selection" @remove="removeBatch" />
|
||||
</div>
|
||||
<template v-for="(record, index) in list" :key="index">
|
||||
<a-card :bordered="false" hoverable>
|
||||
<div class="task-list">
|
||||
<div class="item">
|
||||
<div class="user-box">
|
||||
<div class="user-info">
|
||||
<a-badge
|
||||
:dot="!record.isRead && record.userId != userStore.info?.userId"
|
||||
>
|
||||
<a-avatar :src="record.lastAvatar" size="large" />
|
||||
</a-badge>
|
||||
</div>
|
||||
<div class="content" style="display: flex; flex-direction: column">
|
||||
<div class="nickname">
|
||||
<a
|
||||
:href="'/oa/task/detail/' + record.taskId"
|
||||
class="ele-text-heading"
|
||||
>{{ record.lastNickname ? record.lastNickname : '未知' }}</a
|
||||
>
|
||||
</div>
|
||||
<span class="ele-text-heading">{{
|
||||
record.appName ? `工单编号：${record.taskId}` : ''
|
||||
}}</span>
|
||||
<span class="ele-text-heading">{{
|
||||
record.appName ? `项目名称：${record.appName}` : ''
|
||||
}}</span>
|
||||
<span class="ele-text-heading">{{
|
||||
record.content ? `最后回复：${record.content}` : ''
|
||||
}}</span>
|
||||
<span class="ele-text-heading">{{
|
||||
record.content ? `更新时间：${timeAgo(record.updateTime)}` : ''
|
||||
}}</span>
|
||||
</div>
|
||||
<div class="last-time ele-text-info"> </div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a-card>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { createVNode, reactive, ref } from 'vue';
|
||||
import { message, Modal } from 'ant-design-vue';
|
||||
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
|
||||
import type { EleProTable } from 'ele-admin-pro';
|
||||
import type { DatasourceFunction } from 'ele-admin-pro/es/ele-pro-table/types';
|
||||
import { timeAgo, toDateString } from 'ele-admin-pro';
|
||||
import Search from '../search/components/search.vue';
|
||||
import { pageTask, removeTask, removeBatchTask } from '@/api/oa/task';
|
||||
import type { Task, TaskParam } from '@/api/oa/task/model';
|
||||
import { useUserStore } from '@/store/modules/user';
|
||||
import {
|
||||
CLOSED,
|
||||
COMPLETED,
|
||||
PENDING,
|
||||
PROCESSING,
|
||||
TOBEARRANGED,
|
||||
TOBECONFIRMED
|
||||
} from '@/api/oa/task/model/progress';
|
||||
import { hasRole } from '@/utils/permission';
|
||||
import { WhereType } from '@/components/UserChoose/types';
|
||||
|
||||
const userStore = useUserStore();
|
||||
// 表格实例
|
||||
const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
|
||||
const selection = ref<any[]>();
|
||||
const status = ref<number>();
|
||||
const list = ref<Task[]>([]);
|
||||
|
||||
// 搜索表单
|
||||
const where = reactive<TaskParam>({
|
||||
keywords: '',
|
||||
nickname: '',
|
||||
commander: undefined,
|
||||
userId: undefined
|
||||
});
|
||||
|
||||
// 表格数据源
|
||||
const reload = () => {
|
||||
// 搜索条件
|
||||
where.userId = undefined;
|
||||
where.commander = userStore.info?.userId;
|
||||
if (where.status != 1) {
|
||||
where.status = 0;
|
||||
}
|
||||
// 工单发起人
|
||||
if (hasRole('promoter') || hasRole('user')) {
|
||||
where.commander = undefined;
|
||||
where.userId = userStore.info?.userId;
|
||||
}
|
||||
// 管理人员
|
||||
if (hasRole('superAdmin') || hasRole('admin')) {
|
||||
where.commander = undefined;
|
||||
}
|
||||
// 工单受理人员
|
||||
if (hasRole('commander')) {
|
||||
where.commander = userStore.info?.userId;
|
||||
}
|
||||
pageTask(where).then((res) => {
|
||||
list.value = res?.list;
|
||||
});
|
||||
};
|
||||
|
||||
reload();
|
||||
|
||||
/* 搜索 */
|
||||
// const reload = (where?: TaskParam) => {
|
||||
// status.value = where?.status;
|
||||
// selection.value = [];
|
||||
// tableRef?.value?.reload({ where: where });
|
||||
// };
|
||||
|
||||
const onDetail = (record?: Task) => {
|
||||
window.location.href = 'detail?id=' + record?.taskId;
|
||||
};
|
||||
|
||||
/* 删除单个 */
|
||||
const remove = (row: Task) => {
|
||||
const hide = message.loading('请求中..', 0);
|
||||
removeTask(row.taskId)
|
||||
.then((msg) => {
|
||||
hide();
|
||||
message.success(msg);
|
||||
reload();
|
||||
})
|
||||
.catch((e) => {
|
||||
hide();
|
||||
message.error(e.message);
|
||||
});
|
||||
};
|
||||
|
||||
/* 批量删除 */
|
||||
const removeBatch = () => {
|
||||
if (!selection.value?.length) {
|
||||
message.error('请至少选择一条数据');
|
||||
return;
|
||||
}
|
||||
if (selection.value?.length) {
|
||||
Modal.confirm({
|
||||
title: '提示',
|
||||
content: '确定要删除选中的记录吗?',
|
||||
icon: createVNode(ExclamationCircleOutlined),
|
||||
maskClosable: true,
|
||||
onOk: () => {
|
||||
const hide = message.loading('请求中..', 0);
|
||||
removeBatchTask(selection.value.map((d) => d.taskId))
|
||||
.then((msg) => {
|
||||
hide();
|
||||
message.success(msg);
|
||||
reload();
|
||||
})
|
||||
.catch((e) => {
|
||||
hide();
|
||||
message.error(e.message);
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
// 是否展现多选按钮及批量删除按钮
|
||||
if (hasRole('superAdmin') || hasRole('admin')) {
|
||||
selection.value = [];
|
||||
}
|
||||
|
||||
/* 自定义行属性 */
|
||||
const customRow = (record: Task) => {
|
||||
return {
|
||||
// 行双击事件
|
||||
onDblclick: () => {
|
||||
window.open('/oa/task/detail/' + record.taskId);
|
||||
}
|
||||
};
|
||||
};
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: 'TaskList'
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.search {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.user-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.user-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: start;
|
||||
margin-right: 7px;
|
||||
}
|
||||
.last-time {
|
||||
margin-left: 12px;
|
||||
}
|
||||
.content {
|
||||
.text {
|
||||
max-width: 90%;
|
||||
}
|
||||
}
|
||||
}
|
||||
.nickname {
|
||||
.ele-text-heading {
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user