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

<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>