<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 class="team-qrcode" style="margin-top: 20px">
|
<div class="headline">
|
<div class="basics">团队二维码</div>
|
</div>
|
<el-divider></el-divider>
|
<div class="qrcode-container">
|
<vue-qr
|
:text="teamQRContent"
|
:size="200"
|
:margin="10"
|
colorDark="#409EFF"
|
:logoScale="0.2"
|
:logoSrc="logoUrl"
|
></vue-qr>
|
<div class="qrcode-actions">
|
<el-button size="mini" @click="downloadQRCode"
|
>下载二维码</el-button
|
>
|
<el-button size="mini" type="primary" @click="refreshQRCode"
|
>刷新</el-button
|
>
|
</div>
|
<p class="qrcode-tip">扫描二维码查看团队信息（有效期24小时）</p>
|
</div>
|
</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";
|
import VueQr from "vue-qr";
|
|
export default {
|
name: "TeamManagement",
|
dicts: ["sys_normal_disable", "sys_user_sex"],
|
components: { VueQr },
|
data() {
|
return {
|
// 当前激活的标签页
|
activeTab: "team",
|
// 显示搜索条件
|
showSearch: true,
|
|
// 团队管理相关数据
|
teamLoading: false,
|
multiple: false, // 这里添加
|
// 替换原有的teamList数据
|
teamList: [
|
{
|
id: 1,
|
name: "心血管内科团队",
|
leader: "李成白",
|
members: [
|
{
|
id: 1,
|
name: "李成白",
|
position: "主任医师",
|
phone: "13800138001",
|
email: "lichengbai@hospital.com",
|
currentWorkOrder: "MED20230001",
|
status: "1",
|
},
|
{
|
id: 2,
|
name: "刘翊惠",
|
position: "副主任医师",
|
phone: "13800138002",
|
email: "liuyihui@hospital.com",
|
currentWorkOrder: "",
|
status: "1",
|
},
|
{
|
id: 3,
|
name: "张孟涵",
|
position: "主治医师",
|
phone: "13800138003",
|
email: "zhangmenghan@hospital.com",
|
currentWorkOrder: "MED20230002",
|
status: "1",
|
},
|
{
|
id: 9,
|
name: "吴思翰",
|
position: "住院医师",
|
phone: "13800138009",
|
email: "wusihan@hospital.com",
|
currentWorkOrder: "",
|
status: "1",
|
},
|
],
|
createTime: "2024-01-15 09:30:00",
|
status: "1",
|
description: "负责心血管疾病的诊断、治疗和手术，擅长冠心病介入治疗",
|
},
|
{
|
id: 2,
|
name: "肿瘤科治疗团队",
|
leader: "陈政倩",
|
members: [
|
{
|
id: 4,
|
name: "陈政倩",
|
position: "肿瘤科主任",
|
phone: "13800138004",
|
email: "chenzhengqian@hospital.com",
|
currentWorkOrder: "MED20230003",
|
status: "1",
|
},
|
{
|
id: 5,
|
name: "邓诗涵",
|
position: "放疗医师",
|
phone: "13800138005",
|
email: "dengshihan@hospital.com",
|
currentWorkOrder: "",
|
status: "1",
|
},
|
{
|
id: 6,
|
name: "黄盛玫",
|
position: "化疗医师",
|
phone: "13800138006",
|
email: "huangshengmei@hospital.com",
|
currentWorkOrder: "",
|
status: "1",
|
},
|
],
|
createTime: "2024-02-10 14:20:00",
|
status: "1",
|
description: "专注于肿瘤的综合治疗，包括化疗、放疗和靶向治疗",
|
},
|
{
|
id: 3,
|
name: "儿科诊疗团队",
|
leader: "王恩龙",
|
members: [
|
{
|
id: 7,
|
name: "王恩龙",
|
position: "儿科主任",
|
phone: "13800138007",
|
email: "wagenlong@hospital.com",
|
currentWorkOrder: "MED20230004",
|
status: "1",
|
},
|
{
|
id: 8,
|
name: "朱政廷",
|
position: "儿科医师",
|
phone: "13800138008",
|
email: "zhuzhengting@hospital.com",
|
currentWorkOrder: "",
|
status: "1",
|
},
|
{
|
id: 10,
|
name: "林佩玲",
|
position: "儿科护士长",
|
phone: "13800138010",
|
email: "linpeiling@hospital.com",
|
currentWorkOrder: "",
|
status: "1",
|
},
|
],
|
createTime: "2024-03-05 10:15:00",
|
status: "1",
|
description: "负责儿童常见病、多发病的诊疗和预防保健工作",
|
},
|
{
|
id: 4,
|
name: "急诊抢救团队",
|
leader: "吴俊伯",
|
members: [
|
{
|
id: 11,
|
name: "吴俊伯",
|
position: "急诊科主任",
|
phone: "13800138011",
|
email: "wujunbo@hospital.com",
|
currentWorkOrder: "MED20230005",
|
status: "1",
|
},
|
{
|
id: 12,
|
name: "阮馨学",
|
position: "急诊医师",
|
phone: "13800138012",
|
email: "ruanxinxue@hospital.com",
|
currentWorkOrder: "MED20230006",
|
status: "1",
|
},
|
{
|
id: 13,
|
name: "翁惠珠",
|
position: "急诊护士",
|
phone: "13800138013",
|
email: "wenghuizhu@hospital.com",
|
currentWorkOrder: "",
|
status: "1",
|
},
|
],
|
createTime: "2024-03-20 16:45:00",
|
status: "1",
|
description: "24小时待命，负责急危重症患者的抢救和治疗",
|
},
|
],
|
teamTotal: 4,
|
teamQueryParams: {
|
pageNum: 1,
|
pageSize: 10,
|
name: undefined,
|
status: undefined,
|
},
|
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" },
|
],
|
},
|
// 二维码相关数据
|
teamQRContent: "127.0.0.1:8093/wt?p=0BE9L3C2u",
|
logoUrl: require("@/assets/logo/logoxh.png"), // 医院logo
|
currentQRCodeUrl: "",
|
// 人员分组相关数据
|
memberLoading: false,
|
// 替换原有的memberList数据
|
memberList: [
|
// 心血管内科团队成员
|
{
|
id: 1,
|
name: "李成白",
|
teamId: 1,
|
teamName: "心血管内科团队",
|
position: "主任医师",
|
phone: "13800138001",
|
email: "lichengbai@hospital.com",
|
currentWorkOrder: "MED20230001",
|
status: "1",
|
},
|
{
|
id: 2,
|
name: "刘翊惠",
|
teamId: 1,
|
teamName: "心血管内科团队",
|
position: "副主任医师",
|
phone: "13800138002",
|
email: "liuyihui@hospital.com",
|
currentWorkOrder: "",
|
status: "1",
|
},
|
{
|
id: 3,
|
name: "张孟涵",
|
teamId: 1,
|
teamName: "心血管内科团队",
|
position: "主治医师",
|
phone: "13800138003",
|
email: "zhangmenghan@hospital.com",
|
currentWorkOrder: "MED20230002",
|
status: "1",
|
},
|
{
|
id: 9,
|
name: "吴思翰",
|
teamId: 1,
|
teamName: "心血管内科团队",
|
position: "住院医师",
|
phone: "13800138009",
|
email: "wusihan@hospital.com",
|
currentWorkOrder: "",
|
status: "1",
|
},
|
|
// 肿瘤科治疗团队成员
|
{
|
id: 4,
|
name: "陈政倩",
|
teamId: 2,
|
teamName: "肿瘤科治疗团队",
|
position: "肿瘤科主任",
|
phone: "13800138004",
|
email: "chenzhengqian@hospital.com",
|
currentWorkOrder: "MED20230003",
|
status: "1",
|
},
|
{
|
id: 5,
|
name: "邓诗涵",
|
teamId: 2,
|
teamName: "肿瘤科治疗团队",
|
position: "放疗医师",
|
phone: "13800138005",
|
email: "dengshihan@hospital.com",
|
currentWorkOrder: "",
|
status: "1",
|
},
|
{
|
id: 6,
|
name: "黄盛玫",
|
teamId: 2,
|
teamName: "肿瘤科治疗团队",
|
position: "化疗医师",
|
phone: "13800138006",
|
email: "huangshengmei@hospital.com",
|
currentWorkOrder: "",
|
status: "1",
|
},
|
|
// 儿科诊疗团队成员
|
{
|
id: 7,
|
name: "王恩龙",
|
teamId: 3,
|
teamName: "儿科诊疗团队",
|
position: "儿科主任",
|
phone: "13800138007",
|
email: "wagenlong@hospital.com",
|
currentWorkOrder: "MED20230004",
|
status: "1",
|
},
|
{
|
id: 8,
|
name: "朱政廷",
|
teamId: 3,
|
teamName: "儿科诊疗团队",
|
position: "儿科医师",
|
phone: "13800138008",
|
email: "zhuzhengting@hospital.com",
|
currentWorkOrder: "",
|
status: "1",
|
},
|
{
|
id: 10,
|
name: "林佩玲",
|
teamId: 3,
|
teamName: "儿科诊疗团队",
|
position: "儿科护士长",
|
phone: "13800138010",
|
email: "linpeiling@hospital.com",
|
currentWorkOrder: "",
|
status: "1",
|
},
|
|
// 急诊抢救团队成员
|
{
|
id: 11,
|
name: "吴俊伯",
|
teamId: 4,
|
teamName: "急诊抢救团队",
|
position: "急诊科主任",
|
phone: "13800138011",
|
email: "wujunbo@hospital.com",
|
currentWorkOrder: "MED20230005",
|
status: "1",
|
},
|
{
|
id: 12,
|
name: "阮馨学",
|
teamId: 4,
|
teamName: "急诊抢救团队",
|
position: "急诊医师",
|
phone: "13800138012",
|
email: "ruanxinxue@hospital.com",
|
currentWorkOrder: "MED20230006",
|
status: "1",
|
},
|
{
|
id: 13,
|
name: "翁惠珠",
|
teamId: 4,
|
teamName: "急诊抢救团队",
|
position: "急诊护士",
|
phone: "13800138013",
|
email: "wenghuizhu@hospital.com",
|
currentWorkOrder: "",
|
status: "1",
|
},
|
|
// 其他医疗人员
|
{
|
id: 14,
|
name: "方兆玉",
|
teamId: 1,
|
teamName: "心血管内科团队",
|
position: "心电技师",
|
phone: "13800138014",
|
email: "fangzhaoyu@hospital.com",
|
currentWorkOrder: "",
|
status: "1",
|
},
|
{
|
id: 15,
|
name: "丁汉臻",
|
teamId: 2,
|
teamName: "肿瘤科治疗团队",
|
position: "病理医师",
|
phone: "13800138015",
|
email: "dinghanzhen@hospital.com",
|
currentWorkOrder: "",
|
status: "1",
|
},
|
],
|
memberTotal: 15,
|
memberQueryParams: {
|
pageNum: 1,
|
pageSize: 10,
|
name: undefined,
|
teamId: undefined,
|
status: undefined,
|
},
|
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数据
|
workOrderList: [
|
{
|
id: "MED20230001",
|
title: "冠心病患者PCI手术安排",
|
priority: "1",
|
createTime: "2024-11-01 09:30:00",
|
deadline: "2024-11-05 18:00:00",
|
assignee: 1,
|
assigneeName: "李成白",
|
status: "1",
|
content:
|
"为冠心病患者安排经皮冠状动脉介入治疗手术，需要术前评估和准备",
|
},
|
{
|
id: "MED20230002",
|
title: "高血压患者药物治疗方案调整",
|
priority: "2",
|
createTime: "2024-11-03 14:20:00",
|
deadline: "2024-11-08 18:00:00",
|
assignee: 3,
|
assigneeName: "张孟涵",
|
status: "1",
|
content: "根据患者血压监测结果，调整降压药物组合和剂量",
|
},
|
{
|
id: "MED20230003",
|
title: "肺癌患者化疗周期安排",
|
priority: "1",
|
createTime: "2024-11-05 10:15:00",
|
deadline: "2024-11-10 18:00:00",
|
assignee: 4,
|
assigneeName: "陈政倩",
|
status: "1",
|
content: "制定肺癌患者新一期化疗方案，包括药物选择和剂量计算",
|
},
|
{
|
id: "MED20230004",
|
title: "儿童肺炎患者诊疗方案",
|
priority: "2",
|
createTime: "2024-11-08 16:45:00",
|
deadline: "2024-11-12 18:00:00",
|
assignee: 7,
|
assigneeName: "王恩龙",
|
status: "1",
|
content: "为儿童肺炎患者制定个性化治疗方案，包括抗生素选择和雾化治疗",
|
},
|
{
|
id: "MED20230005",
|
title: "急诊胸痛患者快速评估",
|
priority: "1",
|
createTime: "2024-11-10 11:10:00",
|
deadline: "2024-11-10 23:00:00",
|
assignee: 11,
|
assigneeName: "吴俊伯",
|
status: "1",
|
content: "对急诊胸痛患者进行快速评估，排除急性心肌梗死可能",
|
},
|
{
|
id: "MED20230006",
|
title: "外伤患者清创缝合处理",
|
priority: "2",
|
createTime: "2024-11-12 13:25:00",
|
deadline: "2024-11-12 20:00:00",
|
assignee: 12,
|
assigneeName: "阮馨学",
|
status: "1",
|
content: "处理急诊外伤患者的伤口清创和缝合工作",
|
},
|
{
|
id: "MED20230007",
|
title: "糖尿病患者胰岛素调整",
|
priority: "2",
|
createTime: "2024-11-15 08:45:00",
|
deadline: "2024-11-20 18:00:00",
|
assignee: undefined,
|
assigneeName: undefined,
|
status: "0",
|
content: "根据患者血糖监测数据，调整胰岛素用量和注射方案",
|
},
|
],
|
workOrderTotal: 7,
|
workOrderQueryParams: {
|
pageNum: 1,
|
pageSize: 10,
|
id: undefined,
|
status: undefined,
|
assignee: undefined,
|
},
|
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,
|
},
|
};
|
},
|
// 在watch中添加监控
|
watch: {
|
teamDialogVisible(newVal) {
|
if (newVal) {
|
// 对话框显示时重新生成二维码
|
this.$nextTick(() => {
|
setTimeout(() => {
|
this.generateTeamQRContent(this.currentTeam);
|
}, 100);
|
});
|
}
|
},
|
|
},
|
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;
|
},
|
// 查看团队详情时生成二维码
|
handleTeamDetail(row) {
|
this.currentTeam = row;
|
this.teamDialogTitle = "团队详情 - " + row.name;
|
this.teamDialogVisible = true;
|
|
// 使用nextTick确保DOM渲染完成
|
this.$nextTick(() => {
|
// 生成临时二维码内容
|
this.generateTeamQRContent(row);
|
});
|
},
|
|
// 生成团队二维码内容
|
generateTeamQRContent(team) {
|
const timestamp = new Date().getTime();
|
const expireTime = timestamp + 24 * 60 * 60 * 1000; // 24小时有效期
|
|
const qrData = {
|
teamId: team.id,
|
teamName: team.name,
|
leader: team.leader,
|
memberCount: team.members.length,
|
timestamp: timestamp,
|
expireTime: expireTime,
|
type: "team_info",
|
};
|
|
// 确保内容是字符串格式
|
this.teamQRContent = "127.0.0.1:8093/wt?p=0BE9L3C2u";
|
console.log("生成的二维码内容:", this.teamQRContent);
|
},
|
|
// 二维码生成回调
|
onQRCodeGenerated(dataURL, id) {
|
if (dataURL) {
|
this.currentQRCodeUrl = dataURL;
|
console.log("二维码生成成功");
|
} else {
|
console.error("二维码生成失败");
|
// 备用方案：使用qrcode.js生成
|
this.generateQRCodeWithQRCodeJS();
|
}
|
},
|
// 备用生成方案
|
generateQRCodeWithQRCodeJS() {
|
const QRCode = require("qrcode");
|
if (this.teamQRContent) {
|
QRCode.toDataURL(
|
this.teamQRContent,
|
{
|
width: 200,
|
height: 200,
|
margin: 2,
|
color: {
|
dark: "#409EFF",
|
light: "#FFFFFF",
|
},
|
},
|
(err, url) => {
|
if (err) {
|
console.error("备用二维码生成失败:", err);
|
return;
|
}
|
this.currentQRCodeUrl = url;
|
console.log("备用二维码生成成功");
|
}
|
);
|
}
|
},
|
// 下载二维码
|
downloadQRCode() {
|
if (!this.currentQRCodeUrl) {
|
this.$message.warning("请先生成二维码");
|
return;
|
}
|
|
const a = document.createElement("a");
|
const event = new MouseEvent("click");
|
|
a.download = `团队二维码_${
|
this.currentTeam.name
|
}_${new Date().getTime()}.png`;
|
a.href = this.currentQRCodeUrl;
|
a.dispatchEvent(event);
|
},
|
|
// 刷新二维码
|
refreshQRCode() {
|
this.generateTeamQRContent(this.currentTeam);
|
this.$message.success("二维码已刷新");
|
},
|
|
// 在工单详情中也可以添加二维码功能
|
handleWorkOrderDetail(row) {
|
// 生成工单二维码
|
const qrData = {
|
workOrderId: row.id,
|
title: row.title,
|
priority: row.priority,
|
status: row.status,
|
timestamp: new Date().getTime(),
|
type: "work_order",
|
};
|
|
this.workOrderQRContent = JSON.stringify(qrData);
|
},
|
// 重置团队搜索
|
resetTeamQuery() {
|
this.resetForm("teamQueryForm");
|
this.handleTeamQuery();
|
},
|
// 团队多选
|
handleTeamSelectionChange(selection) {
|
this.ids = selection.map((item) => item.id);
|
this.single = selection.length !== 1;
|
this.multiple = !selection.length;
|
},
|
// 新增团队
|
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>
|
