Industrial-image-management-system---web/src/views/hr/workload/index.vue

<!--任务管理-->
<template>
  <GiPageLayout>
    <a-button type="primary" style="margin-bottom: 16px" @click="openAddModal">发布任务</a-button>
    <GiTable
      row-key="taskId"
      title="任务记录"
      :data="dataList"
      :columns="tableColumns"
      :loading="loading"
      :scroll="{ x: '100%', y: '100%', minWidth: 1200 }"
      :pagination="pagination"
      @page-change="onPageChange"
      @page-size-change="onPageSizeChange"
      @refresh="search"
      @row-click="onRowClick"
    >
      <template #top>
        <GiForm
          v-model="searchForm"
          search
          :columns="queryFormColumns"
          size="medium"
          @search="search"
          @reset="reset"
        />
      </template>
      <template #status="{ record }">
        <a-tag :color="getTaskStatusColor(record.status)">{{ getTaskStatusText(record.status) }}</a-tag>
      </template>
      <template #action="{ record }">
        <a-space>
          <a-link @click.stop="onRowClick(record)">详情</a-link>
          <a-link status="danger" @click.stop="deleteRecord(record)">删除</a-link>
        </a-space>
      </template>
    </GiTable>
    <!-- 发布任务弹窗 -->
    <a-modal v-model:visible="showAddModal" title="发布任务" @ok="handleAddTask" @cancel="showAddModal = false">
      <a-form :model="addForm" label-width="90px">
        <a-form-item label="任务ID">
          <a-input v-model="addForm.taskId" disabled />
        </a-form-item>
        <a-form-item label="任务描述">
          <a-input v-model="addForm.remark" placeholder="请输入任务描述" />
        </a-form-item>
        <a-form-item label="创建时间">
          <a-input v-model="addForm.createTime" disabled />
        </a-form-item>
      </a-form>
    </a-modal>
    <!-- 任务详情弹窗 -->
    <a-modal v-model:visible="showDetailModal" title="任务详情" @ok="handleUpdateTask" @cancel="showDetailModal = false" :footer="false">
      <a-form :model="detailForm" label-width="90px">
        <a-form-item label="任务ID">
          <a-input v-model="detailForm.taskId" disabled />
        </a-form-item>
        <a-form-item label="任务描述">
          <a-input v-model="detailForm.remark" />
        </a-form-item>
        <a-form-item label="分配岗位">
          <a-select v-model="detailForm.deptName" :options="deptOptions" allow-clear placeholder="请选择岗位" />
        </a-form-item>
        <a-form-item label="分配人员">
          <a-select v-model="detailForm.mainUserId" :options="userOptions" allow-clear placeholder="请选择人员" />
        </a-form-item>
        <a-form-item label="任务状态">
          <a-input :value="getTaskStatusText(detailForm.status)" disabled />
        </a-form-item>
        <a-form-item label="创建时间">
          <a-input v-model="detailForm.createTime" disabled />
        </a-form-item>
        <a-form-item label="完成时间">
          <a-input v-model="detailForm.finishTime" disabled />
        </a-form-item>
      </a-form>
      <template #footer>
        <a-space style="float: right">
          <a-button status="danger" @click="handleDeleteTask">删除</a-button>
          <a-button type="primary" @click="handleUpdateTask">确定</a-button>
        </a-space>
      </template>
    </a-modal>
  </GiPageLayout>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { Message } from '@arco-design/web-vue'
import type { TableColumnData } from '@arco-design/web-vue'
// import { listTask } from '@/apis/project/task' // 接口调用处注释

// 任务状态映射
// 0未分配，1已分配，2已完成，3已取消
const statusOptions = [
  { label: '未分配', value: 0 },
  { label: '已分配', value: 1 },
  { label: '已完成', value: 2 },
  { label: '已取消', value: 3 }
]
const getTaskStatusColor = (status: number) => {
  const colorMap: Record<number, string> = {
    0: 'gray',
    1: 'blue',
    2: 'green',
    3: 'red'
  }
  return colorMap[status] || 'gray'
}
const getTaskStatusText = (status: number) => {
  const textMap: Record<number, string> = {
    0: '未分配',
    1: '已分配',
    2: '已完成',
    3: '已取消'
  }
  return textMap[status] || status
}

// 示例岗位和人员
const deptOptions = [
  { label: '开发', value: '开发' },
  { label: '测试', value: '测试' },
  { label: '运维', value: '运维' }
]
const userOptions = [
  { label: '张三', value: '张三' },
  { label: '李四', value: '李四' },
  { label: '王五', value: '王五' }
]

// 搜索表单
let searchForm = reactive({
  taskName: '',
  responsiblePerson: '', // mainUserId
  status: '',
  page: 1,
  size: 10
})

// 查询条件配置
const queryFormColumns = [
  {
    field: 'taskName',
    label: '任务标题',
    type: 'input' as const,
    props: {
      placeholder: '请输入任务标题',
      style: { width: '200px' }
    }
  },
  {
    field: 'responsiblePerson',
    label: '分配用户',
    type: 'input' as const,
    props: {
      placeholder: '请输入分配用户',
      style: { width: '200px' }
    }
  },
  {
    field: 'status',
    label: '任务状态',
    type: 'select' as const,
    props: {
      placeholder: '请选择任务状态',
      options: statusOptions,
      style: { width: '200px' }
    }
  }
]

// 表格列配置
const tableColumns: TableColumnData[] = [
  { title: '任务ID', dataIndex: 'taskId', width: 80 },
  { title: '任务标题', dataIndex: 'taskName', width: 200, ellipsis: true, tooltip: true },
  { title: '分配用户', dataIndex: 'mainUserId', width: 120 },
  { title: '分配部门', dataIndex: 'deptName', width: 120 },
  { title: '任务内容', dataIndex: 'remark', width: 250, ellipsis: true, tooltip: true },
  { title: '任务状态', dataIndex: 'status', slotName: 'status', width: 120 },
  { title: '创建时间', dataIndex: 'createTime', width: 160 },
  { title: '操作', slotName: 'action', width: 120, fixed: 'right' }
]

// 数据状态
const loading = ref(false)
const dataList = ref<any[]>([])
const allData = ref<any[]>([])
const pagination = reactive({
  current: 1,
  pageSize: 10,
  total: 0,
  showTotal: true,
  showPageSize: true
})

// 发布任务弹窗
const showAddModal = ref(false)
const addForm = reactive({
  taskId: '',
  remark: '',
  createTime: ''
})
const openAddModal = () => {
  addForm.taskId = Date.now().toString()
  addForm.remark = ''
  addForm.createTime = new Date().toLocaleString()
  showAddModal.value = true
}
const handleAddTask = () => {
  if (!addForm.remark) {
    Message.warning('请输入任务描述')
    return
  }
  const newTask = {
    taskId: addForm.taskId,
    taskName: addForm.remark,
    mainUserId: '',
    deptName: '',
    remark: addForm.remark,
    status: 0, // 未分配
    createTime: addForm.createTime,
    finishTime: ''
  }
  allData.value.unshift(newTask)
  filterAndPaginate()
  showAddModal.value = false
  Message.success('任务发布成功')
}

// 任务详情弹窗
const showDetailModal = ref(false)
const detailForm = reactive({
  taskId: '',
  taskName: '',
  mainUserId: '',
  deptName: '',
  remark: '',
  status: 0,
  createTime: '',
  finishTime: ''
})
let detailIndex = -1
const onRowClick = (record: any) => {
  Object.assign(detailForm, record)
  detailIndex = allData.value.findIndex(item => item.taskId === record.taskId)
  showDetailModal.value = true
}
const handleUpdateTask = () => {
  if (detailIndex !== -1) {
    allData.value[detailIndex] = { ...detailForm }
    filterAndPaginate()
    showDetailModal.value = false
    Message.success('任务更新成功')
  }
}
const handleDeleteTask = () => {
  if (detailIndex !== -1) {
    allData.value.splice(detailIndex, 1)
    filterAndPaginate()
    showDetailModal.value = false
    Message.success('任务已删除')
  }
}

// 获取任务数据（用示例数据，接口调用处注释）
const fetchTaskList = async () => {
  loading.value = true
  try {
    // const res = await listTask(params)
    // const rows = res?.rows || res?.data?.rows || []
    // allData.value = rows
    // 示例数据：
    allData.value = [
      {
        taskId: '1710000000000',
        taskName: '示例任务A',
        mainUserId: '张三',
        deptName: '开发',
        remark: '开发新功能',
        status: 1,
        createTime: '2024-05-01 10:00:00',
        finishTime: ''
      },
      {
        taskId: '1710000000001',
        taskName: '示例任务B',
        mainUserId: '',
        deptName: '',
        remark: '待分配任务',
        status: 0,
        createTime: '2024-05-02 11:00:00',
        finishTime: ''
      },
      {
        taskId: '1710000000002',
        taskName: '示例任务C',
        mainUserId: '李四',
        deptName: '测试',
        remark: '测试任务',
        status: 2,
        createTime: '2024-05-03 09:00:00',
        finishTime: '2024-05-05 18:00:00'
      }
    ]
    filterAndPaginate()
    pagination.total = allData.value.length
  } catch (e) {
    Message.error('获取任务数据失败')
  } finally {
    loading.value = false
  }
}

// 前端筛选和分页
const filterAndPaginate = () => {
  let filtered = allData.value
  if (searchForm.taskName) {
    filtered = filtered.filter((item: any) =>
      item.taskName?.toLowerCase().includes(searchForm.taskName.toLowerCase())
    )
  }
  if (searchForm.responsiblePerson) {
    filtered = filtered.filter((item: any) =>
      item.mainUserId?.toLowerCase().includes(searchForm.responsiblePerson.toLowerCase())
    )
  }
  if (searchForm.status !== '' && searchForm.status !== undefined) {
    filtered = filtered.filter((item: any) => String(item.status) === String(searchForm.status))
  }
  // 分页
  const start = (pagination.current - 1) * pagination.pageSize
  const end = start + pagination.pageSize
  dataList.value = filtered.slice(start, end)
  pagination.total = filtered.length
}

// 搜索和重置
const search = async () => {
  pagination.current = 1
  filterAndPaginate()
}

const reset = async () => {
  Object.assign(searchForm, {
    taskName: '',
    responsiblePerson: '',
    status: '',
    page: 1,
    size: 10
  })
  pagination.current = 1
  filterAndPaginate()
}

// 分页处理
const onPageChange = (page: number) => {
  pagination.current = page
  filterAndPaginate()
}

const onPageSizeChange = (size: number) => {
  pagination.pageSize = size
  pagination.current = 1
  filterAndPaginate()
}

// 删除操作（表格操作列）
const deleteRecord = (record: any) => {
  const idx = allData.value.findIndex(item => item.taskId === record.taskId)
  if (idx !== -1) {
    allData.value.splice(idx, 1)
    filterAndPaginate()
    Message.success('任务已删除')
  }
}

onMounted(() => {
  fetchTaskList()
})
</script>