<template>
|
<div class="TeamManagement">
|
<!-- 团队管理 -->
|
<el-tabs v-model="activeTab" type="card">
|
<el-tab-pane label="团队管理" name="team">
|
<el-row :gutter="20">
|
<el-col :span="24" :xs="24">
|
<el-form :model="teamQueryParams" ref="teamQueryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
|
<el-form-item label="团队名称" prop="name">
|
<el-input
|
v-model="teamQueryParams.name"
|
placeholder="请输入团队名称"
|
clearable
|
style="width: 200px"
|
@keyup.enter.native="handleTeamQuery"
|
/>
|
</el-form-item>
|
<el-form-item label="团队状态" prop="status">
|
<el-select v-model="teamQueryParams.status" placeholder="请选择状态" clearable style="width: 200px">
|
<el-option
|
v-for="item in teamStatusOptions"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value"
|
/>
|
</el-select>
|
</el-form-item>
|
<el-form-item>
|
<el-button type="primary" icon="el-icon-search" size="medium" @click="handleTeamQuery">搜索</el-button>
|
<el-button icon="el-icon-refresh" size="medium" @click="resetTeamQuery">重置</el-button>
|
</el-form-item>
|
</el-form>
|
|
<el-row :gutter="10" class="mb8">
|
<el-col :span="1.5">
|
<el-button
|
type="primary"
|
plain
|
icon="el-icon-plus"
|
size="medium"
|
@click="handleTeamAdd"
|
>新增团队</el-button>
|
</el-col>
|
</el-row>
|
|
<el-table v-loading="teamLoading" :data="filteredTeamList" @selection-change="handleTeamSelectionChange">
|
<el-table-column type="selection" width="50" align="center" />
|
<el-table-column label="团队ID" align="center" prop="id" width="80" />
|
<el-table-column label="团队名称" align="center" prop="name" :show-overflow-tooltip="true" />
|
<el-table-column label="团队组长" align="center" prop="leader" width="120" />
|
<el-table-column label="团队成员" align="center" prop="memberCount" width="100">
|
<template slot-scope="scope">
|
<el-tag>{{ (scope.row.members || []).length }}人</el-tag>
|
</template>
|
</el-table-column>
|
<el-table-column label="创建时间" align="center" prop="createTime" width="160">
|
<template slot-scope="scope">
|
<span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d}') }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column label="团队状态" align="center" prop="status" width="100">
|
<template slot-scope="scope">
|
<dict-tag :options="teamStatusOptions" :value="scope.row.status"/>
|
</template>
|
</el-table-column>
|
<el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="180">
|
<template slot-scope="scope">
|
<el-button
|
size="mini"
|
type="text"
|
icon="el-icon-view"
|
@click="handleTeamDetail(scope.row)"
|
>详情</el-button>
|
<el-button
|
size="mini"
|
type="text"
|
icon="el-icon-edit"
|
@click="handleTeamUpdate(scope.row)"
|
>编辑</el-button>
|
<el-button
|
size="mini"
|
type="text"
|
icon="el-icon-delete"
|
@click="handleTeamDelete(scope.row)"
|
>删除</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
|
<pagination
|
v-show="teamTotal>0"
|
:total="teamTotal"
|
:page.sync="teamQueryParams.pageNum"
|
:limit.sync="teamQueryParams.pageSize"
|
@pagination="getTeamList"
|
/>
|
</el-col>
|
</el-row>
|
</el-tab-pane>
|
|
<!-- 人员分组 -->
|
<el-tab-pane label="人员分组" name="member">
|
<el-row :gutter="20">
|
<el-col :span="24" :xs="24">
|
<el-form :model="memberQueryParams" ref="memberQueryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
|
<el-form-item label="成员姓名" prop="name">
|
<el-input
|
v-model="memberQueryParams.name"
|
placeholder="请输入成员姓名"
|
clearable
|
style="width: 200px"
|
@keyup.enter.native="handleMemberQuery"
|
/>
|
</el-form-item>
|
<el-form-item label="所属团队" prop="teamId">
|
<el-select v-model="memberQueryParams.teamId" placeholder="请选择团队" clearable style="width: 200px">
|
<el-option
|
v-for="item in teamList"
|
:key="item.id"
|
:label="item.name"
|
:value="item.id"
|
/>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="成员状态" prop="status">
|
<el-select v-model="memberQueryParams.status" placeholder="请选择状态" clearable style="width: 200px">
|
<el-option
|
v-for="item in memberStatusOptions"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value"
|
/>
|
</el-select>
|
</el-form-item>
|
<el-form-item>
|
<el-button type="primary" icon="el-icon-search" size="medium" @click="handleMemberQuery">搜索</el-button>
|
<el-button icon="el-icon-refresh" size="medium" @click="resetMemberQuery">重置</el-button>
|
</el-form-item>
|
</el-form>
|
|
<el-row :gutter="10" class="mb8">
|
<el-col :span="1.5">
|
<el-button
|
type="primary"
|
plain
|
icon="el-icon-plus"
|
size="medium"
|
@click="handleMemberAdd"
|
>新增成员</el-button>
|
</el-col>
|
<el-col :span="1.5">
|
<el-button
|
type="danger"
|
plain
|
icon="el-icon-delete"
|
size="medium"
|
:disabled="multiple"
|
@click="handleMemberDelete"
|
>删除</el-button>
|
</el-col>
|
</el-row>
|
|
<el-table v-loading="memberLoading" :data="filteredMemberList" @selection-change="handleMemberSelectionChange">
|
<el-table-column type="selection" width="50" align="center" />
|
<el-table-column label="成员ID" align="center" prop="id" width="80" />
|
<el-table-column label="成员姓名" align="center" prop="name" :show-overflow-tooltip="true" />
|
<el-table-column label="所属团队" align="center" prop="teamName" width="150" />
|
<el-table-column label="职位" align="center" prop="position" width="120" />
|
<el-table-column label="联系电话" align="center" prop="phone" width="150" />
|
<el-table-column label="邮箱" align="center" prop="email" width="200" />
|
<el-table-column label="当前工单" align="center" prop="currentWorkOrder" width="120">
|
<template slot-scope="scope">
|
<el-tag :type="scope.row.currentWorkOrder ? '' : 'info'">
|
{{ scope.row.currentWorkOrder || '空闲' }}
|
</el-tag>
|
</template>
|
</el-table-column>
|
<el-table-column label="成员状态" align="center" prop="status" width="100">
|
<template slot-scope="scope">
|
<dict-tag :options="memberStatusOptions" :value="scope.row.status"/>
|
</template>
|
</el-table-column>
|
<el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="180">
|
<template slot-scope="scope">
|
<el-button
|
size="mini"
|
type="text"
|
icon="el-icon-edit"
|
@click="handleMemberUpdate(scope.row)"
|
>编辑</el-button>
|
<el-button
|
size="mini"
|
type="text"
|
icon="el-icon-delete"
|
@click="handleMemberDelete(scope.row)"
|
>删除</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
|
<pagination
|
v-show="memberTotal>0"
|
:total="memberTotal"
|
:page.sync="memberQueryParams.pageNum"
|
:limit.sync="memberQueryParams.pageSize"
|
@pagination="getMemberList"
|
/>
|
</el-col>
|
</el-row>
|
</el-tab-pane>
|
|
<!-- 工单指派 -->
|
<el-tab-pane label="工单指派" name="workOrder">
|
<el-row :gutter="20">
|
<el-col :span="24" :xs="24">
|
<el-form :model="workOrderQueryParams" ref="workOrderQueryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
|
<el-form-item label="工单编号" prop="id">
|
<el-input
|
v-model="workOrderQueryParams.id"
|
placeholder="请输入工单编号"
|
clearable
|
style="width: 200px"
|
@keyup.enter.native="handleWorkOrderQuery"
|
/>
|
</el-form-item>
|
<el-form-item label="工单状态" prop="status">
|
<el-select v-model="workOrderQueryParams.status" placeholder="请选择状态" clearable style="width: 200px">
|
<el-option
|
v-for="item in workOrderStatusOptions"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value"
|
/>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="处理人" prop="assignee">
|
<el-select v-model="workOrderQueryParams.assignee" placeholder="请选择处理人" clearable style="width: 200px">
|
<el-option
|
v-for="item in memberList"
|
:key="item.id"
|
:label="item.name"
|
:value="item.id"
|
/>
|
</el-select>
|
</el-form-item>
|
<el-form-item>
|
<el-button type="primary" icon="el-icon-search" size="medium" @click="handleWorkOrderQuery">搜索</el-button>
|
<el-button icon="el-icon-refresh" size="medium" @click="resetWorkOrderQuery">重置</el-button>
|
</el-form-item>
|
</el-form>
|
|
<el-row :gutter="10" class="mb8">
|
<el-col :span="1.5">
|
<el-button
|
type="primary"
|
plain
|
icon="el-icon-plus"
|
size="medium"
|
@click="handleWorkOrderAdd"
|
>新建工单</el-button>
|
</el-col>
|
</el-row>
|
|
<el-table v-loading="workOrderLoading" :data="filteredWorkOrderList" @selection-change="handleWorkOrderSelectionChange">
|
<el-table-column type="selection" width="50" align="center" />
|
<el-table-column label="工单编号" align="center" prop="id" width="120" />
|
<el-table-column label="工单标题" align="center" prop="title" :show-overflow-tooltip="true" />
|
<el-table-column label="优先级" align="center" prop="priority" width="100">
|
<template slot-scope="scope">
|
<el-tag :type="scope.row.priority === '1' ? 'danger' : scope.row.priority === '2' ? 'warning' : ''">
|
{{ scope.row.priority === '1' ? '高' : scope.row.priority === '2' ? '中' : '低' }}
|
</el-tag>
|
</template>
|
</el-table-column>
|
<el-table-column label="创建时间" align="center" prop="createTime" width="160">
|
<template slot-scope="scope">
|
<span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d}') }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column label="截止时间" align="center" prop="deadline" width="160">
|
<template slot-scope="scope">
|
<span>{{ parseTime(scope.row.deadline, '{y}-{m}-{d}') }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column label="处理人" align="center" prop="assigneeName" width="120" />
|
<el-table-column label="工单状态" align="center" prop="status" width="120">
|
<template slot-scope="scope">
|
<dict-tag :options="workOrderStatusOptions" :value="scope.row.status"/>
|
</template>
|
</el-table-column>
|
<el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="180">
|
<template slot-scope="scope">
|
<el-button
|
size="mini"
|
type="text"
|
icon="el-icon-edit"
|
@click="handleWorkOrderUpdate(scope.row)"
|
>编辑</el-button>
|
<el-button
|
size="mini"
|
type="text"
|
icon="el-icon-delete"
|
@click="handleWorkOrderDelete(scope.row)"
|
>删除</el-button>
|
<el-button
|
size="mini"
|
type="text"
|
icon="el-icon-s-promotion"
|
@click="handleAssignWorkOrder(scope.row)"
|
v-if="scope.row.status === '0'"
|
>指派</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
|
<pagination
|
v-show="workOrderTotal>0"
|
:total="workOrderTotal"
|
:page.sync="workOrderQueryParams.pageNum"
|
:limit.sync="workOrderQueryParams.pageSize"
|
@pagination="getWorkOrderList"
|
/>
|
</el-col>
|
</el-row>
|
</el-tab-pane>
|
</el-tabs>
|
|
<!-- 团队详情对话框 -->
|
<el-dialog :title="teamDialogTitle" :visible.sync="teamDialogVisible" width="70%" append-to-body>
|
<el-descriptions :column="2" border>
|
<el-descriptions-item label="团队ID">{{ currentTeam.id }}</el-descriptions-item>
|
<el-descriptions-item label="团队名称">{{ currentTeam.name }}</el-descriptions-item>
|
<el-descriptions-item label="团队组长">{{ currentTeam.leader }}</el-descriptions-item>
|
<el-descriptions-item label="团队成员">{{ (currentTeam.members || []).length }}人</el-descriptions-item> <el-descriptions-item label="创建时间">{{ parseTime(currentTeam.createTime, '{y}-{m}-{d} {h}:{i}') }}</el-descriptions-item>
|
<el-descriptions-item label="团队状态">
|
<dict-tag :options="teamStatusOptions" :value="currentTeam.status"/>
|
</el-descriptions-item>
|
<el-descriptions-item label="团队描述" :span="2">{{ currentTeam.description || '无' }}</el-descriptions-item>
|
</el-descriptions>
|
|
<div class="team-members" style="margin-top: 20px;">
|
<div class="headline">
|
<div class="basics">团队成员</div>
|
</div>
|
<el-divider></el-divider>
|
<el-table :data="currentTeam.members" border style="width: 100%">
|
<el-table-column prop="name" label="成员姓名" width="120" />
|
<el-table-column prop="position" label="职位" width="120" />
|
<el-table-column prop="phone" label="联系电话" width="150" />
|
<el-table-column prop="email" label="邮箱" width="200" />
|
<el-table-column prop="currentWorkOrder" label="当前工单" width="150">
|
<template slot-scope="scope">
|
<el-tag :type="scope.row.currentWorkOrder ? '' : 'info'">
|
{{ scope.row.currentWorkOrder || '空闲' }}
|
</el-tag>
|
</template>
|
</el-table-column>
|
<el-table-column prop="status" label="成员状态" width="100">
|
<template slot-scope="scope">
|
<dict-tag :options="memberStatusOptions" :value="scope.row.status"/>
|
</template>
|
</el-table-column>
|
</el-table>
|
</div>
|
|
<div class="team-work-orders" style="margin-top: 20px;">
|
<div class="headline">
|
<div class="basics">团队工单</div>
|
</div>
|
<el-divider></el-divider>
|
<el-table :data="teamWorkOrders" border style="width: 100%">
|
<el-table-column prop="id" label="工单编号" width="120" />
|
<el-table-column prop="title" label="工单标题" />
|
<el-table-column prop="priority" label="优先级" width="100">
|
<template slot-scope="scope">
|
<el-tag :type="scope.row.priority === '1' ? 'danger' : scope.row.priority === '2' ? 'warning' : ''">
|
{{ scope.row.priority === '1' ? '高' : scope.row.priority === '2' ? '中' : '低' }}
|
</el-tag>
|
</template>
|
</el-table-column>
|
<el-table-column prop="assigneeName" label="处理人" width="120" />
|
<el-table-column prop="status" label="工单状态" width="120">
|
<template slot-scope="scope">
|
<dict-tag :options="workOrderStatusOptions" :value="scope.row.status"/>
|
</template>
|
</el-table-column>
|
<el-table-column prop="createTime" label="创建时间" width="160">
|
<template slot-scope="scope">
|
<span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d}') }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column prop="deadline" label="截止时间" width="160">
|
<template slot-scope="scope">
|
<span>{{ parseTime(scope.row.deadline, '{y}-{m}-{d}') }}</span>
|
</template>
|
</el-table-column>
|
</el-table>
|
</div>
|
|
<div slot="footer" class="dialog-footer">
|
<el-button @click="teamDialogVisible = false">关 闭</el-button>
|
</div>
|
</el-dialog>
|
|
<!-- 新增/编辑团队对话框 -->
|
<el-dialog :title="teamFormTitle" :visible.sync="teamFormVisible" width="50%" append-to-body>
|
<el-form ref="teamForm" :model="teamForm" :rules="teamRules" label-width="80px">
|
<el-row>
|
<el-col :span="24">
|
<el-form-item label="团队名称" prop="name">
|
<el-input v-model="teamForm.name" placeholder="请输入团队名称" />
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="团队组长" prop="leader">
|
<el-select v-model="teamForm.leader" placeholder="请选择团队组长">
|
<el-option
|
v-for="item in memberList"
|
:key="item.id"
|
:label="item.name"
|
:value="item.id"
|
/>
|
</el-select>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="团队状态" prop="status">
|
<el-radio-group v-model="teamForm.status">
|
<el-radio
|
v-for="dict in teamStatusOptions"
|
:key="dict.value"
|
:label="dict.value"
|
>{{dict.label}}</el-radio>
|
</el-radio-group>
|
</el-form-item>
|
</el-col>
|
<el-col :span="24">
|
<el-form-item label="团队成员" prop="members">
|
<el-transfer
|
v-model="teamForm.members"
|
:data="memberOptions"
|
:titles="['可选成员', '团队成员']"
|
:props="{
|
key: 'id',
|
label: 'name'
|
}"
|
/>
|
</el-form-item>
|
</el-col>
|
<el-col :span="24">
|
<el-form-item label="团队描述" prop="description">
|
<el-input type="textarea" :rows="3" v-model="teamForm.description" placeholder="请输入团队描述" />
|
</el-form-item>
|
</el-col>
|
</el-row>
|
</el-form>
|
<div slot="footer" class="dialog-footer">
|
<el-button type="primary" @click="submitTeamForm">确 定</el-button>
|
<el-button @click="cancelTeamForm">取 消</el-button>
|
</div>
|
</el-dialog>
|
|
<!-- 新增/编辑成员对话框 -->
|
<el-dialog :title="memberFormTitle" :visible.sync="memberFormVisible" width="50%" append-to-body>
|
<el-form ref="memberForm" :model="memberForm" :rules="memberRules" label-width="80px">
|
<el-row>
|
<el-col :span="12">
|
<el-form-item label="成员姓名" prop="name">
|
<el-input v-model="memberForm.name" placeholder="请输入成员姓名" />
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="所属团队" prop="teamId">
|
<el-select v-model="memberForm.teamId" placeholder="请选择所属团队">
|
<el-option
|
v-for="item in teamList"
|
:key="item.id"
|
:label="item.name"
|
:value="item.id"
|
/>
|
</el-select>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="职位" prop="position">
|
<el-input v-model="memberForm.position" placeholder="请输入职位" />
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="联系电话" prop="phone">
|
<el-input v-model="memberForm.phone" placeholder="请输入联系电话" />
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="邮箱" prop="email">
|
<el-input v-model="memberForm.email" placeholder="请输入邮箱" />
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="成员状态" prop="status">
|
<el-radio-group v-model="memberForm.status">
|
<el-radio
|
v-for="dict in memberStatusOptions"
|
:key="dict.value"
|
:label="dict.value"
|
>{{dict.label}}</el-radio>
|
</el-radio-group>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
</el-form>
|
<div slot="footer" class="dialog-footer">
|
<el-button type="primary" @click="submitMemberForm">确 定</el-button>
|
<el-button @click="cancelMemberForm">取 消</el-button>
|
</div>
|
</el-dialog>
|
|
<!-- 新增/编辑工单对话框 -->
|
<el-dialog :title="workOrderFormTitle" :visible.sync="workOrderFormVisible" width="60%" append-to-body>
|
<el-form ref="workOrderForm" :model="workOrderForm" :rules="workOrderRules" label-width="80px">
|
<el-row>
|
<el-col :span="24">
|
<el-form-item label="工单标题" prop="title">
|
<el-input v-model="workOrderForm.title" placeholder="请输入工单标题" />
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="优先级" prop="priority">
|
<el-select v-model="workOrderForm.priority" placeholder="请选择优先级">
|
<el-option
|
v-for="item in priorityOptions"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value"
|
/>
|
</el-select>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="截止时间" prop="deadline">
|
<el-date-picker
|
v-model="workOrderForm.deadline"
|
type="datetime"
|
placeholder="请选择截止时间"
|
value-format="yyyy-MM-dd HH:mm:ss"
|
style="width: 100%"
|
/>
|
</el-form-item>
|
</el-col>
|
<el-col :span="24">
|
<el-form-item label="工单内容" prop="content">
|
<el-input type="textarea" :rows="4" v-model="workOrderForm.content" placeholder="请输入工单内容" />
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="工单状态" prop="status">
|
<el-radio-group v-model="workOrderForm.status">
|
<el-radio
|
v-for="dict in workOrderStatusOptions"
|
:key="dict.value"
|
:label="dict.value"
|
>{{dict.label}}</el-radio>
|
</el-radio-group>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12" v-if="workOrderForm.status === '1'">
|
<el-form-item label="处理人" prop="assignee">
|
<el-select v-model="workOrderForm.assignee" placeholder="请选择处理人">
|
<el-option
|
v-for="item in memberList"
|
:key="item.id"
|
:label="item.name"
|
:value="item.id"
|
/>
|
</el-select>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
</el-form>
|
<div slot="footer" class="dialog-footer">
|
<el-button type="primary" @click="submitWorkOrderForm">确 定</el-button>
|
<el-button @click="cancelWorkOrderForm">取 消</el-button>
|
</div>
|
</el-dialog>
|
|
<!-- 指派工单对话框 -->
|
<el-dialog title="指派工单" :visible.sync="assignDialogVisible" width="40%" append-to-body>
|
<el-form :model="assignForm" label-width="80px">
|
<el-form-item label="工单标题">
|
<el-input v-model="assignForm.title" disabled />
|
</el-form-item>
|
<el-form-item label="处理人" prop="assignee">
|
<el-select v-model="assignForm.assignee" placeholder="请选择处理人" style="width: 100%">
|
<el-option
|
v-for="item in availableMembers"
|
:key="item.id"
|
:label="item.name"
|
:value="item.id"
|
/>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="优先级" prop="priority">
|
<el-select v-model="assignForm.priority" placeholder="请选择优先级" style="width: 100%">
|
<el-option
|
v-for="item in priorityOptions"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value"
|
/>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="截止时间" prop="deadline">
|
<el-date-picker
|
v-model="assignForm.deadline"
|
type="datetime"
|
placeholder="请选择截止时间"
|
value-format="yyyy-MM-dd HH:mm:ss"
|
style="width: 100%"
|
/>
|
</el-form-item>
|
</el-form>
|
<div slot="footer" class="dialog-footer">
|
<el-button type="primary" @click="submitAssign">确 定</el-button>
|
<el-button @click="assignDialogVisible = false">取 消</el-button>
|
</div>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script>
|
import { parseTime } from '@/utils/ruoyi'
|
|
export default {
|
name: "TeamManagement",
|
dicts: ['sys_normal_disable', 'sys_user_sex'],
|
data() {
|
return {
|
// 当前激活的标签页
|
activeTab: 'team',
|
// 显示搜索条件
|
showSearch: true,
|
|
// 团队管理相关数据
|
teamLoading: false,
|
multiple: false, // 这里添加
|
teamList: [
|
{
|
id: 1,
|
name: "前端开发团队",
|
leader: "张三",
|
members: [
|
{ id: 1, name: "张三", position: "前端组长", phone: "13800138001", email: "zhangsan@example.com", currentWorkOrder: "WO20230001", status: "1" },
|
{ id: 2, name: "李四", position: "高级前端", phone: "13800138002", email: "lisi@example.com", currentWorkOrder: "", status: "1" },
|
{ id: 3, name: "王五", position: "前端开发", phone: "13800138003", email: "wangwu@example.com", currentWorkOrder: "WO20230002", status: "1" }
|
],
|
createTime: "2023-01-15 09:30:00",
|
status: "1",
|
description: "负责公司所有前端项目的开发和维护"
|
},
|
{
|
id: 2,
|
name: "后端开发团队",
|
leader: "赵六",
|
members: [
|
{ id: 4, name: "赵六", position: "后端组长", phone: "13800138004", email: "zhaoliu@example.com", currentWorkOrder: "WO20230003", status: "1" },
|
{ id: 5, name: "钱七", position: "高级后端", phone: "13800138005", email: "qianqi@example.com", currentWorkOrder: "", status: "1" },
|
{ id: 6, name: "孙八", position: "后端开发", phone: "13800138006", email: "sunba@example.com", currentWorkOrder: "", status: "1" }
|
],
|
createTime: "2023-01-20 14:20:00",
|
status: "1",
|
description: "负责公司所有后端服务的开发和维护"
|
},
|
{
|
id: 3,
|
name: "测试团队",
|
leader: "周九",
|
members: [
|
{ id: 7, name: "周九", position: "测试经理", phone: "13800138007", email: "zhoujiu@example.com", currentWorkOrder: "WO20230004", status: "1" },
|
{ id: 8, name: "吴十", position: "测试工程师", phone: "13800138008", email: "wushi@example.com", currentWorkOrder: "", status: "1" }
|
],
|
createTime: "2023-02-10 10:15:00",
|
status: "1",
|
description: "负责公司所有项目的测试工作"
|
}
|
],
|
teamQueryParams: {
|
pageNum: 1,
|
pageSize: 10,
|
name: undefined,
|
status: undefined
|
},
|
teamTotal: 3,
|
teamStatusOptions: [
|
{ value: "0", label: "禁用" },
|
{ value: "1", label: "启用" }
|
],
|
teamDialogVisible: false,
|
teamDialogTitle: "",
|
currentTeam: {
|
id: undefined,
|
name: undefined,
|
leader: undefined,
|
members: [], // 确保有默认空数组
|
createTime: undefined,
|
status: undefined,
|
description: undefined
|
},
|
teamFormVisible: false,
|
teamFormTitle: "",
|
teamForm: {
|
id: undefined,
|
name: undefined,
|
leader: undefined,
|
members: [],
|
status: "1",
|
description: undefined
|
},
|
teamRules: {
|
name: [
|
{ required: true, message: "团队名称不能为空", trigger: "blur" }
|
],
|
leader: [
|
{ required: true, message: "团队组长不能为空", trigger: "change" }
|
],
|
status: [
|
{ required: true, message: "团队状态不能为空", trigger: "change" }
|
]
|
},
|
|
// 人员分组相关数据
|
memberLoading: false,
|
memberList: [
|
{ id: 1, name: "张三", teamId: 1, teamName: "前端开发团队", position: "前端组长", phone: "13800138001", email: "zhangsan@example.com", currentWorkOrder: "WO20230001", status: "1" },
|
{ id: 2, name: "李四", teamId: 1, teamName: "前端开发团队", position: "高级前端", phone: "13800138002", email: "lisi@example.com", currentWorkOrder: "", status: "1" },
|
{ id: 3, name: "王五", teamId: 1, teamName: "前端开发团队", position: "前端开发", phone: "13800138003", email: "wangwu@example.com", currentWorkOrder: "WO20230002", status: "1" },
|
{ id: 4, name: "赵六", teamId: 2, teamName: "后端开发团队", position: "后端组长", phone: "13800138004", email: "zhaoliu@example.com", currentWorkOrder: "WO20230003", status: "1" },
|
{ id: 5, name: "钱七", teamId: 2, teamName: "后端开发团队", position: "高级后端", phone: "13800138005", email: "qianqi@example.com", currentWorkOrder: "", status: "1" },
|
{ id: 6, name: "孙八", teamId: 2, teamName: "后端开发团队", position: "后端开发", phone: "13800138006", email: "sunba@example.com", currentWorkOrder: "", status: "1" },
|
{ id: 7, name: "周九", teamId: 3, teamName: "测试团队", position: "测试经理", phone: "13800138007", email: "zhoujiu@example.com", currentWorkOrder: "WO20230004", status: "1" },
|
{ id: 8, name: "吴十", teamId: 3, teamName: "测试团队", position: "测试工程师", phone: "13800138008", email: "wushi@example.com", currentWorkOrder: "", status: "1" }
|
],
|
memberQueryParams: {
|
pageNum: 1,
|
pageSize: 10,
|
name: undefined,
|
teamId: undefined,
|
status: undefined
|
},
|
memberTotal: 8,
|
memberStatusOptions: [
|
{ value: "0", label: "禁用" },
|
{ value: "1", label: "启用" }
|
],
|
memberFormVisible: false,
|
memberFormTitle: "",
|
memberForm: {
|
id: undefined,
|
name: undefined,
|
teamId: undefined,
|
position: undefined,
|
phone: undefined,
|
email: undefined,
|
status: "1"
|
},
|
memberRules: {
|
name: [
|
{ required: true, message: "成员姓名不能为空", trigger: "blur" }
|
],
|
teamId: [
|
{ required: true, message: "所属团队不能为空", trigger: "change" }
|
],
|
position: [
|
{ required: true, message: "职位不能为空", trigger: "blur" }
|
],
|
phone: [
|
{ required: true, message: "联系电话不能为空", trigger: "blur" }
|
],
|
email: [
|
{ required: true, message: "邮箱不能为空", trigger: "blur" },
|
{ type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
|
],
|
status: [
|
{ required: true, message: "成员状态不能为空", trigger: "change" }
|
]
|
},
|
|
// 工单指派相关数据
|
workOrderLoading: false,
|
workOrderList: [
|
{ id: "WO20230001", title: "首页改版需求开发", priority: "1", createTime: "2023-03-01 09:30:00", deadline: "2023-03-15 18:00:00", assignee: 1, assigneeName: "张三", status: "1", content: "完成首页改版的所有前端开发工作" },
|
{ id: "WO20230002", title: "用户中心接口开发", priority: "2", createTime: "2023-03-05 14:20:00", deadline: "2023-03-20 18:00:00", assignee: 3, assigneeName: "王五", status: "1", content: "开发用户中心相关接口" },
|
{ id: "WO20230003", title: "订单系统性能优化", priority: "1", createTime: "2023-03-10 10:15:00", deadline: "2023-03-25 18:00:00", assignee: 4, assigneeName: "赵六", status: "1", content: "优化订单系统性能，提高响应速度" },
|
{ id: "WO20230004", title: "支付功能测试", priority: "3", createTime: "2023-03-15 16:45:00", deadline: "2023-03-30 18:00:00", assignee: 7, assigneeName: "周九", status: "1", content: "完成支付功能的全面测试" },
|
{ id: "WO20230005", title: "数据报表开发", priority: "2", createTime: "2023-03-20 11:10:00", deadline: "2023-04-05 18:00:00", assignee: undefined, assigneeName: undefined, status: "0", content: "开发数据统计报表功能" }
|
],
|
workOrderQueryParams: {
|
pageNum: 1,
|
pageSize: 10,
|
id: undefined,
|
status: undefined,
|
assignee: undefined
|
},
|
workOrderTotal: 5,
|
workOrderStatusOptions: [
|
{ value: "0", label: "待指派" },
|
{ value: "1", label: "进行中" },
|
{ value: "2", label: "已完成" },
|
{ value: "3", label: "已取消" }
|
],
|
priorityOptions: [
|
{ value: "1", label: "高" },
|
{ value: "2", label: "中" },
|
{ value: "3", label: "低" }
|
],
|
workOrderFormVisible: false,
|
workOrderFormTitle: "",
|
workOrderForm: {
|
id: undefined,
|
title: undefined,
|
priority: "2",
|
createTime: undefined,
|
deadline: undefined,
|
assignee: undefined,
|
status: "0",
|
content: undefined
|
},
|
workOrderRules: {
|
title: [
|
{ required: true, message: "工单标题不能为空", trigger: "blur" }
|
],
|
priority: [
|
{ required: true, message: "优先级不能为空", trigger: "change" }
|
],
|
deadline: [
|
{ required: true, message: "截止时间不能为空", trigger: "change" }
|
],
|
content: [
|
{ required: true, message: "工单内容不能为空", trigger: "blur" }
|
],
|
status: [
|
{ required: true, message: "工单状态不能为空", trigger: "change" }
|
]
|
},
|
|
// 指派工单相关数据
|
assignDialogVisible: false,
|
assignForm: {
|
id: undefined,
|
title: undefined,
|
assignee: undefined,
|
priority: "2",
|
deadline: undefined
|
}
|
};
|
},
|
computed: {
|
// 团队成员选项（用于穿梭框）
|
memberOptions() {
|
return this.memberList.map(member => ({
|
key: member.id,
|
label: member.name,
|
disabled: member.status === "0"
|
}));
|
},
|
// 过滤后的团队列表
|
filteredTeamList() {
|
let list = [...this.teamList];
|
if (this.teamQueryParams.name) {
|
list = list.filter(item =>
|
item.name.includes(this.teamQueryParams.name)
|
);
|
}
|
if (this.teamQueryParams.status) {
|
list = list.filter(item =>
|
item.status === this.teamQueryParams.status
|
);
|
}
|
return list;
|
},
|
// 过滤后的成员列表
|
filteredMemberList() {
|
let list = [...this.memberList];
|
if (this.memberQueryParams.name) {
|
list = list.filter(item =>
|
item.name.includes(this.memberQueryParams.name)
|
);
|
}
|
if (this.memberQueryParams.teamId) {
|
list = list.filter(item =>
|
item.teamId === this.memberQueryParams.teamId
|
);
|
}
|
if (this.memberQueryParams.status) {
|
list = list.filter(item =>
|
item.status === this.memberQueryParams.status
|
);
|
}
|
return list;
|
},
|
// 过滤后的工单列表
|
filteredWorkOrderList() {
|
let list = [...this.workOrderList];
|
if (this.workOrderQueryParams.id) {
|
list = list.filter(item =>
|
item.id.includes(this.workOrderQueryParams.id)
|
);
|
}
|
if (this.workOrderQueryParams.status) {
|
list = list.filter(item =>
|
item.status === this.workOrderQueryParams.status
|
);
|
}
|
if (this.workOrderQueryParams.assignee) {
|
list = list.filter(item =>
|
item.assignee === this.workOrderQueryParams.assignee
|
);
|
}
|
return list;
|
},
|
// 团队工单（用于团队详情）
|
teamWorkOrders() {
|
if (!this.currentTeam.id) return [];
|
const teamMemberIds = this.currentTeam.members.map(member => member.id);
|
return this.workOrderList.filter(order =>
|
teamMemberIds.includes(order.assignee)
|
);
|
},
|
// 可用成员（用于工单指派）
|
availableMembers() {
|
return this.memberList.filter(member =>
|
member.status === "1" && !member.currentWorkOrder
|
);
|
}
|
},
|
methods: {
|
// 解析时间
|
parseTime,
|
/** 团队管理相关方法 */
|
// 查询团队列表
|
getTeamList() {
|
this.teamLoading = true;
|
setTimeout(() => {
|
this.teamLoading = false;
|
}, 500);
|
},
|
// 团队搜索
|
handleTeamQuery() {
|
this.teamQueryParams.pageNum = 1;
|
},
|
// 重置团队搜索
|
resetTeamQuery() {
|
this.resetForm("teamQueryForm");
|
this.handleTeamQuery();
|
},
|
// 团队多选
|
handleTeamSelectionChange(selection) {
|
this.ids = selection.map(item => item.id);
|
this.single = selection.length !== 1;
|
this.multiple = !selection.length;
|
},
|
// 查看团队详情
|
handleTeamDetail(row) {
|
this.currentTeam = row;
|
this.teamDialogTitle = "团队详情 - " + row.name;
|
this.teamDialogVisible = true;
|
},
|
// 新增团队
|
handleTeamAdd() {
|
this.resetTeamForm();
|
this.teamFormTitle = "新增团队";
|
this.teamFormVisible = true;
|
},
|
// 修改团队
|
handleTeamUpdate(row) {
|
this.resetTeamForm();
|
const team = this.teamList.find(item => item.id === row.id);
|
this.teamForm = Object.assign({}, team);
|
this.teamForm.members = team.members.map(member => member.id);
|
this.teamFormTitle = "修改团队";
|
this.teamFormVisible = true;
|
},
|
// 删除团队
|
handleTeamDelete(row) {
|
const teamIds = row.id || this.ids;
|
this.$modal.confirm('是否确认删除团队名称为"' + row.name + '"的数据项？').then(() => {
|
// 模拟删除团队
|
this.teamList = this.teamList.filter(item => item.id !== teamIds);
|
this.teamTotal = this.teamList.length;
|
this.$modal.msgSuccess("删除成功");
|
}).catch(() => {});
|
},
|
// 提交团队表单
|
submitTeamForm() {
|
this.$refs["teamForm"].validate(valid => {
|
if (valid) {
|
if (this.teamForm.id != null) {
|
// 模拟修改团队
|
const index = this.teamList.findIndex(item => item.id === this.teamForm.id);
|
if (index !== -1) {
|
const leader = this.memberList.find(member => member.id === this.teamForm.leader);
|
const members = this.memberList.filter(member =>
|
this.teamForm.members.includes(member.id)
|
);
|
|
this.teamList.splice(index, 1, {
|
...this.teamForm,
|
leader: leader ? leader.name : '',
|
members: members
|
});
|
}
|
this.$modal.msgSuccess("修改成功");
|
} else {
|
// 模拟新增团队
|
const newId = Math.max(...this.teamList.map(item => item.id)) + 1;
|
const leader = this.memberList.find(member => member.id === this.teamForm.leader);
|
const members = this.memberList.filter(member =>
|
this.teamForm.members.includes(member.id)
|
);
|
|
this.teamList.unshift({
|
...this.teamForm,
|
id: newId,
|
leader: leader ? leader.name : '',
|
members: members,
|
createTime: new Date().toLocaleString()
|
});
|
this.teamTotal = this.teamList.length;
|
this.$modal.msgSuccess("新增成功");
|
}
|
this.teamFormVisible = false;
|
}
|
});
|
},
|
// 重置团队表单
|
resetTeamForm() {
|
this.teamForm = {
|
id: undefined,
|
name: undefined,
|
leader: undefined,
|
members: [],
|
status: "1",
|
description: undefined
|
};
|
this.resetForm("teamForm");
|
},
|
// 取消团队表单
|
cancelTeamForm() {
|
this.teamFormVisible = false;
|
this.resetTeamForm();
|
},
|
|
/** 人员分组相关方法 */
|
// 查询成员列表
|
getMemberList() {
|
this.memberLoading = true;
|
setTimeout(() => {
|
this.memberLoading = false;
|
}, 500);
|
},
|
// 成员搜索
|
handleMemberQuery() {
|
this.memberQueryParams.pageNum = 1;
|
},
|
// 重置成员搜索
|
resetMemberQuery() {
|
this.resetForm("memberQueryForm");
|
this.handleMemberQuery();
|
},
|
// 成员多选
|
handleMemberSelectionChange(selection) {
|
this.ids = selection.map(item => item.id);
|
this.single = selection.length !== 1;
|
this.multiple = !selection.length;
|
},
|
// 新增成员
|
handleMemberAdd() {
|
this.resetMemberForm();
|
this.memberFormTitle = "新增成员";
|
this.memberFormVisible = true;
|
},
|
// 修改成员
|
handleMemberUpdate(row) {
|
this.resetMemberForm();
|
const member = this.memberList.find(item => item.id === row.id);
|
this.memberForm = Object.assign({}, member);
|
this.memberFormTitle = "修改成员";
|
this.memberFormVisible = true;
|
},
|
// 删除成员
|
handleMemberDelete(row) {
|
const memberIds = row.id || this.ids;
|
this.$modal.confirm('是否确认删除成员姓名为"' + row.name + '"的数据项？').then(() => {
|
// 模拟删除成员
|
this.memberList = this.memberList.filter(item => item.id !== memberIds);
|
this.memberTotal = this.memberList.length;
|
this.$modal.msgSuccess("删除成功");
|
}).catch(() => {});
|
},
|
// 提交成员表单
|
submitMemberForm() {
|
this.$refs["memberForm"].validate(valid => {
|
if (valid) {
|
if (this.memberForm.id != null) {
|
// 模拟修改成员
|
const index = this.memberList.findIndex(item => item.id === this.memberForm.id);
|
if (index !== -1) {
|
const team = this.teamList.find(item => item.id === this.memberForm.teamId);
|
this.memberList.splice(index, 1, {
|
...this.memberForm,
|
teamName: team ? team.name : ''
|
});
|
}
|
this.$modal.msgSuccess("修改成功");
|
} else {
|
// 模拟新增成员
|
const newId = Math.max(...this.memberList.map(item => item.id)) + 1;
|
const team = this.teamList.find(item => item.id === this.memberForm.teamId);
|
this.memberList.unshift({
|
...this.memberForm,
|
id: newId,
|
teamName: team ? team.name : '',
|
currentWorkOrder: ''
|
});
|
this.memberTotal = this.memberList.length;
|
this.$modal.msgSuccess("新增成功");
|
}
|
this.memberFormVisible = false;
|
}
|
});
|
},
|
// 重置成员表单
|
resetMemberForm() {
|
this.memberForm = {
|
id: undefined,
|
name: undefined,
|
teamId: undefined,
|
position: undefined,
|
phone: undefined,
|
email: undefined,
|
status: "1"
|
};
|
this.resetForm("memberForm");
|
},
|
// 取消成员表单
|
cancelMemberForm() {
|
this.memberFormVisible = false;
|
this.resetMemberForm();
|
},
|
|
/** 工单指派相关方法 */
|
// 查询工单列表
|
getWorkOrderList() {
|
this.workOrderLoading = true;
|
setTimeout(() => {
|
this.workOrderLoading = false;
|
}, 500);
|
},
|
// 工单搜索
|
handleWorkOrderQuery() {
|
this.workOrderQueryParams.pageNum = 1;
|
},
|
// 重置工单搜索
|
resetWorkOrderQuery() {
|
this.resetForm("workOrderQueryForm");
|
this.handleWorkOrderQuery();
|
},
|
// 工单多选
|
handleWorkOrderSelectionChange(selection) {
|
this.ids = selection.map(item => item.id);
|
this.single = selection.length !== 1;
|
this.multiple = !selection.length;
|
},
|
// 新增工单
|
handleWorkOrderAdd() {
|
this.resetWorkOrderForm();
|
this.workOrderFormTitle = "新建工单";
|
this.workOrderFormVisible = true;
|
},
|
// 修改工单
|
handleWorkOrderUpdate(row) {
|
this.resetWorkOrderForm();
|
const workOrder = this.workOrderList.find(item => item.id === row.id);
|
this.workOrderForm = Object.assign({}, workOrder);
|
this.workOrderFormTitle = "编辑工单";
|
this.workOrderFormVisible = true;
|
},
|
// 删除工单
|
handleWorkOrderDelete(row) {
|
const workOrderIds = row.id || this.ids;
|
this.$modal.confirm('是否确认删除工单标题为"' + row.title + '"的数据项？').then(() => {
|
// 模拟删除工单
|
this.workOrderList = this.workOrderList.filter(item => item.id !== workOrderIds);
|
this.workOrderTotal = this.workOrderList.length;
|
this.$modal.msgSuccess("删除成功");
|
}).catch(() => {});
|
},
|
// 指派工单
|
handleAssignWorkOrder(row) {
|
this.assignForm = {
|
id: row.id,
|
title: row.title,
|
assignee: undefined,
|
priority: row.priority,
|
deadline: row.deadline
|
};
|
this.assignDialogVisible = true;
|
},
|
// 提交工单表单
|
submitWorkOrderForm() {
|
this.$refs["workOrderForm"].validate(valid => {
|
if (valid) {
|
if (this.workOrderForm.id != null) {
|
// 模拟修改工单
|
const index = this.workOrderList.findIndex(item => item.id === this.workOrderForm.id);
|
if (index !== -1) {
|
const assignee = this.memberList.find(member => member.id === this.workOrderForm.assignee);
|
this.workOrderList.splice(index, 1, {
|
...this.workOrderForm,
|
assigneeName: assignee ? assignee.name : undefined
|
});
|
}
|
this.$modal.msgSuccess("修改成功");
|
} else {
|
// 模拟新增工单
|
const newId = "WO" + new Date().getFullYear() + (Math.floor(Math.random() * 90000) + 10000);
|
const assignee = this.memberList.find(member => member.id === this.workOrderForm.assignee);
|
this.workOrderList.unshift({
|
...this.workOrderForm,
|
id: newId,
|
assigneeName: assignee ? assignee.name : undefined,
|
createTime: new Date().toLocaleString()
|
});
|
this.workOrderTotal = this.workOrderList.length;
|
this.$modal.msgSuccess("新增成功");
|
}
|
this.workOrderFormVisible = false;
|
}
|
});
|
},
|
// 重置工单表单
|
resetWorkOrderForm() {
|
this.workOrderForm = {
|
id: undefined,
|
title: undefined,
|
priority: "2",
|
createTime: undefined,
|
deadline: undefined,
|
assignee: undefined,
|
status: "0",
|
content: undefined
|
};
|
this.resetForm("workOrderForm");
|
},
|
// 取消工单表单
|
cancelWorkOrderForm() {
|
this.workOrderFormVisible = false;
|
this.resetWorkOrderForm();
|
},
|
// 提交指派
|
submitAssign() {
|
if (!this.assignForm.assignee) {
|
this.$modal.msgError("请选择处理人");
|
return;
|
}
|
|
// 模拟指派工单
|
const index = this.workOrderList.findIndex(item => item.id === this.assignForm.id);
|
if (index !== -1) {
|
const assignee = this.memberList.find(member => member.id === this.assignForm.assignee);
|
if (assignee) {
|
// 更新工单状态
|
this.workOrderList.splice(index, 1, {
|
...this.workOrderList[index],
|
assignee: this.assignForm.assignee,
|
assigneeName: assignee.name,
|
priority: this.assignForm.priority,
|
deadline: this.assignForm.deadline,
|
status: "1"
|
});
|
|
// 更新成员当前工单
|
const memberIndex = this.memberList.findIndex(member => member.id === this.assignForm.assignee);
|
if (memberIndex !== -1) {
|
this.memberList.splice(memberIndex, 1, {
|
...this.memberList[memberIndex],
|
currentWorkOrder: this.assignForm.id
|
});
|
}
|
|
this.$modal.msgSuccess("指派成功");
|
this.assignDialogVisible = false;
|
}
|
}
|
}
|
}
|
};
|
</script>
|
|
<style lang="scss" scoped>
|
.TeamManagement {
|
padding: 20px;
|
}
|
|
.headline {
|
display: flex;
|
justify-content: space-between;
|
font-size: 20px;
|
border-left: 4px solid #41a1be;
|
padding-left: 5px;
|
margin: 15px 0;
|
}
|
|
.avatar-uploader ::v-deep .el-upload {
|
border: 1px dashed #d9d9d9;
|
border-radius: 6px;
|
cursor: pointer;
|
position: relative;
|
overflow: hidden;
|
}
|
|
.avatar-uploader ::v-deep .el-upload:hover {
|
border-color: #409EFF;
|
}
|
|
.avatar-uploader-icon {
|
font-size: 28px;
|
color: #8c939d;
|
width: 178px;
|
height: 178px;
|
line-height: 178px;
|
text-align: center;
|
}
|
|
.avatar {
|
width: 178px;
|
height: 178px;
|
display: block;
|
}
|
|
.team-members, .team-work-orders {
|
margin-top: 20px;
|
}
|
</style>
|
