优化菜单结构

src/views/system/myTask/components/count-pending.vue

@@ -0,0 +1,176 @@
+<template>
+  <a-card :bordered="false">
+    <ele-pro-table
+      ref="tableRef"
+      row-key="taskId"
+      :columns="columns"
+      :customRow="customRow"
+      :datasource="datasource"
+      tool-class="ele-toolbar-form"
+      class="sys-org-table"
+    >
+      <template #toolbar>
+        <search @search="reload" />
+      </template>
+      <template #bodyCell="{ column, record }">
+        <template v-if="column.key === 'content'">
+          <a @click="openUrl('/oa/task/detail/' + record.taskId)">{{
+            record.content
+          }}</a>
+        </template>
+        <template v-else-if="column.key === 'status'">
+          <a-tag v-if="record.progress === TOBEARRANGED" color="red"
+            >待安排</a-tag
+          >
+          <a-tag v-if="record.progress === PENDING" color="orange"
+            >待处理</a-tag
+          >
+          <a-tag v-if="record.progress === PROCESSING" color="purple"
+            >处理中</a-tag
+          >
+          <a-tag v-if="record.progress === TOBECONFIRMED" color="cyan"
+            >待评价</a-tag
+          >
+          <a-tag v-if="record.progress === COMPLETED" color="green"
+            >已完成</a-tag
+          >
+          <a-tag v-if="record.progress === CLOSED">已关闭</a-tag>
+        </template>
+        <template v-else-if="column.key === 'progress'">
+          <a-progress :percent="record.progress * 2" :steps="5" />
+        </template>
+      </template>
+    </ele-pro-table>
+  </a-card>
+</template>
+
+<script lang="ts" setup>
+  import { ref } from 'vue';
+  import type { ColumnsType } from 'ant-design-vue/es/table';
+  import { pageTask } from '@/api/oa/task';
+  import { openUrl } from '@/utils/common';
+  import type { Task, TaskParam } from '@/api/oa/task/model';
+  import Search from './search.vue';
+  import {
+    CLOSED,
+    COMPLETED,
+    PENDING,
+    PROCESSING,
+    TOBEARRANGED,
+    TOBECONFIRMED
+  } from '@/api/oa/task/model/progress';
+  // import { ContainerOutlined, UserAddOutlined } from '@ant-design/icons-vue';
+  import { toDateString } from 'ele-admin-pro';
+  import { useUserStore } from '@/store/modules/user';
+  import { DatasourceFunction } from 'ele-admin-pro/es/ele-pro-table/types';
+  import { EleProTable } from 'ele-admin-pro/es';
+  import { hasRole } from '@/utils/permission';
+
+  defineProps<{
+    title?: string;
+  }>();
+
+  const emit = defineEmits<{
+    (e: 'remove'): void;
+    (e: 'edit'): void;
+  }>();
+
+  // 数据绑定
+  const user = useUserStore();
+  // 表格选中数据
+  const selection = ref<Task[]>([]);
+  // 表格实例
+  const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
+  const columns = ref<ColumnsType>([
+    {
+      title: '工单号',
+      dataIndex: 'taskId',
+      align: 'center',
+      width: 120
+    },
+    {
+      title: '工单类型',
+      dataIndex: 'taskType',
+      width: 120
+    },
+    {
+      title: '问题描述',
+      dataIndex: 'content',
+      key: 'content',
+      ellipsis: true
+    },
+    {
+      title: '状态',
+      dataIndex: 'status',
+      key: 'status',
+      align: 'center',
+      width: 120
+    },
+    {
+      title: '创建时间',
+      dataIndex: 'createTime',
+      key: 'createTime',
+      align: 'center',
+      width: 120,
+      customRender: ({ text }) => toDateString(text, 'yyyy-MM-dd')
+    }
+  ]);
+
+  // 表格数据源
+  const datasource: DatasourceFunction = ({ page, limit, where, orders }) => {
+    // 搜索条件
+    where = {};
+    where.commander = user.info?.userId;
+    if (where.status != 1) {
+      where.status = 0;
+    }
+    // 工单发起人
+    if (hasRole('promoter') || hasRole('user')) {
+      where.commander = undefined;
+      where.userId = user.info?.userId;
+    }
+    // 管理人员
+    if (hasRole('superAdmin') || hasRole('admin')) {
+      where.commander = undefined;
+    }
+    // 受理人员
+    if (hasRole('commander')) {
+      where.commander = user.info?.userId;
+    }
+    console.log(where);
+    return pageTask({ ...where, ...orders, page, limit });
+  };
+
+  const reload = (where?: TaskParam) => {
+    selection.value = [];
+    tableRef?.value?.reload({ where: where });
+  };
+
+  const onRemove = () => {
+    emit('remove');
+  };
+
+  const onEdit = () => {
+    emit('edit');
+  };
+
+  /* 自定义行属性 */
+  const customRow = (record: Task) => {
+    return {
+      // 行点击事件
+      onClick: () => {
+        // console.log(record);
+      },
+      // 行双击事件
+      onDblclick: () => {
+        window.open('/oa/task/detail/' + record.taskId);
+        // openInfo(record);
+      }
+    };
+  };
+</script>
+<style>
+  /deep/.ant-table-pagination-right {
+    justify-content: flex-end;
+  }
+</style>