1066 lines
34 KiB
Vue
1066 lines
34 KiB
Vue
|
<template>
|
|||
|
|
<div style="height:100%">
|
|||
|
|
<ai-detail>
|
|||
|
|
<template #title>
|
|||
|
|
<ai-title
|
|||
|
|
:title="basicInfo.parentTaskCode ? '子任务详情' : '任务详情'"
|
|||
|
|
isShowBottomBorder
|
|||
|
|
isShowBack
|
|||
|
|
@onBackClick="onBack()"
|
|||
|
|
>
|
|||
|
|
<template #rightBtn v-if="detailType == 1">
|
|||
|
|
<el-button
|
|||
|
|
type="primary"
|
|||
|
|
icon="iconfont iconReject"
|
|||
|
|
v-if="basicInfo.status == 0"
|
|||
|
|
@click="closeWork()">关闭任务</el-button
|
|||
|
|
>
|
|||
|
|
<el-button
|
|||
|
|
type="primary"
|
|||
|
|
icon="iconfont iconCorrect"
|
|||
|
|
v-if="basicInfo.status == 0"
|
|||
|
|
@click="markCompleted('1')"
|
|||
|
|
>确认完成</el-button
|
|||
|
|
>
|
|||
|
|
<el-button
|
|||
|
|
icon="iconfont iconDelete"
|
|||
|
|
class="del-btn-list"
|
|||
|
|
v-if="basicInfo.status == 1 || basicInfo.status == 2"
|
|||
|
|
@click="deleteTask()"
|
|||
|
|
>删除任务</el-button
|
|||
|
|
>
|
|||
|
|
</template>
|
|||
|
|
</ai-title>
|
|||
|
|
</template>
|
|||
|
|
<template #content>
|
|||
|
|
<ai-card title="任务进度">
|
|||
|
|
<template #right v-if="basicInfo.parentTaskCode && detailType != 2 && detailType != 3">
|
|||
|
|
<el-button type="primary" @click="toParent()">查看父级任务</el-button>
|
|||
|
|
</template>
|
|||
|
|
<template slot="content">
|
|||
|
|
<ai-wrapper class="mar-t16" label-width="80px" :columnsNumber="2">
|
|||
|
|
<ai-info-item
|
|||
|
|
label="任务状态："
|
|||
|
|
:class="{
|
|||
|
|
color1: basicInfo.status == 0,
|
|||
|
|
color2: basicInfo.status == 1,
|
|||
|
|
color3: basicInfo.status == 2,
|
|||
|
|
}"
|
|||
|
|
><span>{{
|
|||
|
|
dict.getLabel("workTaskStatus", basicInfo.status) || "-"
|
|||
|
|
}}</span></ai-info-item
|
|||
|
|
>
|
|||
|
|
<ai-info-item label="当前进度："
|
|||
|
|
><span>{{ basicInfo.percent + "%" }}</span></ai-info-item
|
|||
|
|
>
|
|||
|
|
</ai-wrapper>
|
|||
|
|
<div class="echart" id="echart"></div>
|
|||
|
|
</template>
|
|||
|
|
</ai-card>
|
|||
|
|
<ai-card title="任务执行情况">
|
|||
|
|
<template slot="content">
|
|||
|
|
<el-row
|
|||
|
|
type="flex"
|
|||
|
|
justify="space-between"
|
|||
|
|
align="center"
|
|||
|
|
style="margin-bottom: 8px"
|
|||
|
|
>
|
|||
|
|
<el-col :span="16">
|
|||
|
|
<el-radio-group
|
|||
|
|
v-model="ListType"
|
|||
|
|
size="small"
|
|||
|
|
@change="ListTypeChange"
|
|||
|
|
>
|
|||
|
|
<el-radio-button label="userInfoList">执行人</el-radio-button>
|
|||
|
|
<el-radio-button label="checkUserList">督办人</el-radio-button>
|
|||
|
|
<el-radio-button label="sendUserList">抄送人</el-radio-button>
|
|||
|
|
</el-radio-group>
|
|||
|
|
<el-input
|
|||
|
|
v-model="listName"
|
|||
|
|
placeholder="姓名"
|
|||
|
|
size="small"
|
|||
|
|
style="width: 160px; margin-left: 8px"
|
|||
|
|
@input="filterData"
|
|||
|
|
></el-input>
|
|||
|
|
</el-col>
|
|||
|
|
<el-col
|
|||
|
|
:span="8"
|
|||
|
|
class="icon add-icon"
|
|||
|
|
v-if="basicInfo.status == 0"
|
|||
|
|
>
|
|||
|
|
<ai-wechat-selecter style="display: inline-block;" v-if="ListType == 'userInfoList' && detailType == 1"
|
|||
|
|
:instance="instance"
|
|||
|
|
v-model="addUserList"
|
|||
|
|
:disable="appReportTaskDoInfoList"
|
|||
|
|
:isAdd="false"
|
|||
|
|
@change="confirmAdd(1)"
|
|||
|
|
>
|
|||
|
|
<i
|
|||
|
|
class="iconfont iconAdd"
|
|||
|
|
style="color: #5088ff"
|
|||
|
|
>添加执行人</i
|
|||
|
|
>
|
|||
|
|
</ai-wechat-selecter>
|
|||
|
|
|
|||
|
|
<ai-wechat-selecter style="display: inline-block;" v-if="ListType == 'checkUserList' && detailType == 1"
|
|||
|
|
:instance="instance"
|
|||
|
|
:disable="appReportTaskDoInfoList"
|
|||
|
|
v-model="addUserList"
|
|||
|
|
:isAdd="false"
|
|||
|
|
@change="confirmAdd(2)"
|
|||
|
|
>
|
|||
|
|
<i
|
|||
|
|
class="iconfont iconAdd"
|
|||
|
|
style="color: #5088ff"
|
|||
|
|
>添加督办人</i
|
|||
|
|
>
|
|||
|
|
</ai-wechat-selecter>
|
|||
|
|
|
|||
|
|
<ai-wechat-selecter style="display: inline-block;" v-if="ListType == 'sendUserList' && detailType == 1"
|
|||
|
|
:instance="instance"
|
|||
|
|
v-model="addUserList"
|
|||
|
|
:disable="appReportTaskDoInfoList"
|
|||
|
|
:isAdd="false"
|
|||
|
|
@change="confirmAdd(3)"
|
|||
|
|
>
|
|||
|
|
<i
|
|||
|
|
class="iconfont iconAdd"
|
|||
|
|
style="color: #5088ff"
|
|||
|
|
>添加抄送人</i
|
|||
|
|
>
|
|||
|
|
</ai-wechat-selecter>
|
|||
|
|
|
|||
|
|
<i
|
|||
|
|
class="iconfont iconClock"
|
|||
|
|
style="color: #5088ff; margin-left: 8px"
|
|||
|
|
:style="isAll ? 'opacity:0.5' : ''"
|
|||
|
|
v-if="ListType == 'userInfoList' && detailType != 3"
|
|||
|
|
@click="urgeMessageAll()"
|
|||
|
|
>一键催办</i
|
|||
|
|
>
|
|||
|
|
</el-col>
|
|||
|
|
</el-row>
|
|||
|
|
<ai-table :isShowPagination="false"
|
|||
|
|
class="ai-table"
|
|||
|
|
:tableData="basicInfo[ListType]"
|
|||
|
|
:col-configs="colConfigs"
|
|||
|
|
:dict="dict"
|
|||
|
|
>
|
|||
|
|
<el-table-column slot="status" label="任务状态" align="center" v-if="ListType == 'userInfoList'">
|
|||
|
|
<template slot-scope="{ row }">
|
|||
|
|
<span >{{$dict.getLabel("workTaskStatus", row.doStatus)}}</span>
|
|||
|
|
</template>
|
|||
|
|
</el-table-column>
|
|||
|
|
<el-table-column slot="percent" label="完成时间" align="center" v-if="ListType == 'userInfoList'">
|
|||
|
|
<template slot-scope="{ row }">
|
|||
|
|
<span >{{ row.finishTime|| '-' }}</span>
|
|||
|
|
</template>
|
|||
|
|
</el-table-column>
|
|||
|
|
<el-table-column slot="percent" label="完成进度" align="center" v-if="ListType == 'userInfoList'">
|
|||
|
|
<template slot-scope="{ row }">
|
|||
|
|
<span>{{ row.percent + '%'}}</span>
|
|||
|
|
</template>
|
|||
|
|
</el-table-column>
|
|||
|
|
<el-table-column
|
|||
|
|
slot="options"
|
|||
|
|
label="操作"
|
|||
|
|
align="center"
|
|||
|
|
fixed="right"
|
|||
|
|
width="200"
|
|||
|
|
>
|
|||
|
|
<template slot-scope="{ row }">
|
|||
|
|
<div>
|
|||
|
|
<i
|
|||
|
|
class="iconfont iconClock icon-color89B"
|
|||
|
|
title="催办"
|
|||
|
|
:style="
|
|||
|
|
row.doStatus == 0
|
|||
|
|
? row.isSend
|
|||
|
|
? 'opacity:0.5'
|
|||
|
|
: ''
|
|||
|
|
: 'opacity:0.5'
|
|||
|
|
"
|
|||
|
|
style="cursor: pointer"
|
|||
|
|
v-if="ListType == 'userInfoList' && basicInfo.status == 0 && detailType != 3"
|
|||
|
|
@click="urgeMessage(row)"
|
|||
|
|
></i>
|
|||
|
|
<span
|
|||
|
|
class="iconfont iconShow icon-color89B"
|
|||
|
|
title="详情"
|
|||
|
|
v-if="ListType == 'userInfoList'"
|
|||
|
|
style="cursor: pointer; margin-left: 8px"
|
|||
|
|
@click="getExecute(row)"
|
|||
|
|
></span>
|
|||
|
|
<span
|
|||
|
|
class="iconfont iconRevoke icon-color89B"
|
|||
|
|
title="删除"
|
|||
|
|
style="margin-left: 8px; cursor: pointer"
|
|||
|
|
v-if="basicInfo.status == 0 && detailType == 1"
|
|||
|
|
@click="deleteUnit(row)"
|
|||
|
|
></span>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
</el-table-column>
|
|||
|
|
</ai-table>
|
|||
|
|
</template>
|
|||
|
|
</ai-card>
|
|||
|
|
<ai-card title="任务信息">
|
|||
|
|
<template slot="content">
|
|||
|
|
<ai-wrapper class="mar-t16" label-width="80px" :columnsNumber="2">
|
|||
|
|
<ai-info-item label="发起人："
|
|||
|
|
><span>{{ basicInfo.sponsorUserName }}</span></ai-info-item
|
|||
|
|
>
|
|||
|
|
<ai-info-item label="创建人："
|
|||
|
|
><span>{{ basicInfo.createUserName }}</span></ai-info-item
|
|||
|
|
>
|
|||
|
|
<ai-info-item label="创建时间："
|
|||
|
|
><span>{{ basicInfo.createTime }}</span></ai-info-item
|
|||
|
|
>
|
|||
|
|
</ai-wrapper>
|
|||
|
|
<ai-wrapper class="mar-t16" label-width="80px" :columnsNumber="2">
|
|||
|
|
<ai-info-item label="任务状态：">
|
|||
|
|
<span>{{
|
|||
|
|
dict.getLabel("workTaskStatus", basicInfo.status) || "-"
|
|||
|
|
}}</span>
|
|||
|
|
</ai-info-item>
|
|||
|
|
<ai-info-item label="任务类型："
|
|||
|
|
><span>{{
|
|||
|
|
$dict.getLabel("workTaskType", basicInfo.type) || "-"
|
|||
|
|
}}</span></ai-info-item
|
|||
|
|
>
|
|||
|
|
</ai-wrapper>
|
|||
|
|
<ai-wrapper class="mar-t16" label-width="80px" :columnsNumber="2">
|
|||
|
|
<ai-info-item label="截止时间：">
|
|||
|
|
<span
|
|||
|
|
>{{ basicInfo.lastTime
|
|||
|
|
}}<i
|
|||
|
|
:style="
|
|||
|
|
basicInfo.isOverTime == 0
|
|||
|
|
? 'color:#FF8822;'
|
|||
|
|
: 'color:#FF4466;'
|
|||
|
|
"
|
|||
|
|
style="margin-left: 8px; font-style: inherit"
|
|||
|
|
v-if="basicInfo.overTimeStatus"
|
|||
|
|
>({{ basicInfo.overTimeStatus }})</i
|
|||
|
|
></span
|
|||
|
|
>
|
|||
|
|
</ai-info-item>
|
|||
|
|
</ai-wrapper>
|
|||
|
|
<ai-wrapper label-width="80px" :columnsNumber="1">
|
|||
|
|
<ai-info-item label="任务说明："
|
|||
|
|
><span>{{ basicInfo.taskDescription }}</span></ai-info-item
|
|||
|
|
>
|
|||
|
|
</ai-wrapper>
|
|||
|
|
<ai-bar title="附件">
|
|||
|
|
<template
|
|||
|
|
slot="right"
|
|||
|
|
v-if="basicInfo.fileList && basicInfo.fileList.length"
|
|||
|
|
>
|
|||
|
|
<span class="Edit" @click="downFileAll"
|
|||
|
|
><i class="iconfont iconDownload"></i>下载全部</span
|
|||
|
|
>
|
|||
|
|
</template>
|
|||
|
|
</ai-bar>
|
|||
|
|
<ai-file-list
|
|||
|
|
v-if="basicInfo.fileList && basicInfo.fileList.length"
|
|||
|
|
:fileList="basicInfo.fileList"
|
|||
|
|
:fileOps="{ name: 'name', size: 'fileSizeStr' }"
|
|||
|
|
></ai-file-list>
|
|||
|
|
</template>
|
|||
|
|
</ai-card>
|
|||
|
|
<ai-card title="人员信息">
|
|||
|
|
<template slot="content">
|
|||
|
|
<div class="especial">
|
|||
|
|
<span class="people mar-r40 w80">执行人：</span>
|
|||
|
|
<ai-wechat-selecter
|
|||
|
|
slot="append"
|
|||
|
|
isShowUser
|
|||
|
|
:instance="instance"
|
|||
|
|
v-model="basicInfo.userInfoList"
|
|||
|
|
:isAdd="false"
|
|||
|
|
></ai-wechat-selecter>
|
|||
|
|
</div>
|
|||
|
|
<div class="especial">
|
|||
|
|
<span class="people mar-r40 w80">督办人：</span>
|
|||
|
|
<ai-wechat-selecter
|
|||
|
|
slot="append"
|
|||
|
|
isShowUser
|
|||
|
|
:instance="instance"
|
|||
|
|
v-model="basicInfo.checkUserList"
|
|||
|
|
:isAdd="false"
|
|||
|
|
></ai-wechat-selecter>
|
|||
|
|
</div>
|
|||
|
|
<div class="especial">
|
|||
|
|
<span class="people mar-r40 w80">抄送人：</span>
|
|||
|
|
<ai-wechat-selecter
|
|||
|
|
slot="append"
|
|||
|
|
isShowUser
|
|||
|
|
:instance="instance"
|
|||
|
|
v-model="basicInfo.sendUserList"
|
|||
|
|
:isAdd="false"
|
|||
|
|
></ai-wechat-selecter>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
</ai-card>
|
|||
|
|
<el-dialog
|
|||
|
|
class="deleteStyle mask execute"
|
|||
|
|
:visible.sync="executeDialog"
|
|||
|
|
width="800px"
|
|||
|
|
title="执行情况"
|
|||
|
|
:close-on-click-modal="false"
|
|||
|
|
>
|
|||
|
|
<el-dialog
|
|||
|
|
width="520px"
|
|||
|
|
title="执行说明："
|
|||
|
|
class="deleteStyle mask execute"
|
|||
|
|
:visible.sync="innerVisible"
|
|||
|
|
@close="getExecute(executeInfo)"
|
|||
|
|
:close-on-click-modal="false"
|
|||
|
|
append-to-body
|
|||
|
|
>
|
|||
|
|
<div style="width: 480px; margin: auto; padding: 8px 0">
|
|||
|
|
<el-form
|
|||
|
|
:model="sayInfo"
|
|||
|
|
ref="numberValidateForm"
|
|||
|
|
label-width="100px"
|
|||
|
|
class="demo-ruleForm"
|
|||
|
|
>
|
|||
|
|
<el-form-item label="执行说明：" prop="doDescription">
|
|||
|
|
<el-input
|
|||
|
|
maxlength="1000"
|
|||
|
|
show-word-limit
|
|||
|
|
type="textarea"
|
|||
|
|
:rows="3"
|
|||
|
|
v-model="sayInfo.doDescription"
|
|||
|
|
autocomplete="off"
|
|||
|
|
></el-input>
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-form>
|
|||
|
|
</div>
|
|||
|
|
<div slot="footer" style="text-align: center">
|
|||
|
|
<el-button
|
|||
|
|
style="width: 92px"
|
|||
|
|
size="small"
|
|||
|
|
@click="(innerVisible = false), getExecute(executeInfo)"
|
|||
|
|
>取 消</el-button
|
|||
|
|
>
|
|||
|
|
<el-button
|
|||
|
|
style="width: 92px"
|
|||
|
|
type="primary"
|
|||
|
|
size="small"
|
|||
|
|
@click="updateDescription()"
|
|||
|
|
>确 认</el-button
|
|||
|
|
>
|
|||
|
|
</div>
|
|||
|
|
</el-dialog>
|
|||
|
|
<div
|
|||
|
|
style="
|
|||
|
|
width: 740px;
|
|||
|
|
margin: auto;
|
|||
|
|
padding: 8px 0;
|
|||
|
|
max-height: 600px;
|
|||
|
|
overflow: auto;
|
|||
|
|
"
|
|||
|
|
>
|
|||
|
|
<ai-wrapper class="mar-t16" label-width="80px" :columnsNumber="2">
|
|||
|
|
<ai-info-item label="执行人："><span>{{ executeInfo.userName }}</span></ai-info-item>
|
|||
|
|
<ai-info-item label="手机号："><span>{{ executeInfo.phone }}</span></ai-info-item>
|
|||
|
|
</ai-wrapper>
|
|||
|
|
<ai-wrapper label-width="80px" :columnsNumber="1">
|
|||
|
|
<ai-info-item label="所属部门："><span>{{ executeInfo.unitName }}</span></ai-info-item>
|
|||
|
|
</ai-wrapper>
|
|||
|
|
<ai-wrapper label-width="80px" :columnsNumber="2">
|
|||
|
|
<ai-info-item label="执行状态：">
|
|||
|
|
<p v-if="executeInfo.doStatus == 0" style="color: #ff8822">
|
|||
|
|
未完成
|
|||
|
|
</p>
|
|||
|
|
<p v-if="executeInfo.doStatus == 1" style="color: #2ea222">
|
|||
|
|
已完成
|
|||
|
|
</p>
|
|||
|
|
<p v-if="executeInfo.doStatus == 2">已终止</p>
|
|||
|
|
<p v-if="executeInfo.doStatus == 3">进行中</p>
|
|||
|
|
<p v-if="executeInfo.doStatus == 4">已关闭</p>
|
|||
|
|
<p v-if="executeInfo.doStatus == null">-</p>
|
|||
|
|
</ai-info-item>
|
|||
|
|
<ai-info-item label="完成时间：">
|
|||
|
|
<i style="display: block; font-style: normal">{{
|
|||
|
|
executeInfo.finishTime || "-"
|
|||
|
|
}}</i>
|
|||
|
|
<i
|
|||
|
|
style="color: #ff4466; display: block; font-style: normal"
|
|||
|
|
v-if="executeInfo.overTimeStatus && executeInfo.doStatus == 1"
|
|||
|
|
>({{ executeInfo.overTimeStatus }})</i
|
|||
|
|
>
|
|||
|
|
</ai-info-item>
|
|||
|
|
</ai-wrapper>
|
|||
|
|
<ai-wrapper label-width="80px" :columnsNumber="1">
|
|||
|
|
<ai-info-item label="当前进度："><span>{{ executeInfo.percent + "%" }}</span></ai-info-item>
|
|||
|
|
</ai-wrapper>
|
|||
|
|
<ai-wrapper label-width="80px" :columnsNumber="1">
|
|||
|
|
<ai-info-item label="执行说明："><span>{{ executeInfo.doDescription }}</span></ai-info-item>
|
|||
|
|
</ai-wrapper>
|
|||
|
|
|
|||
|
|
<div class="step">
|
|||
|
|
<!-- <el-steps direction="vertical" :active="null" >
|
|||
|
|
<el-step icon="iconfont iconSteps_Finished" v-for="(e,index) in executeInfo.processList" :key="index">
|
|||
|
|
<template v-slot:title>
|
|||
|
|
<p style="color:#333333;">{{e.remarks}}</p>
|
|||
|
|
</template>
|
|||
|
|
<template v-slot:description>
|
|||
|
|
<p style="color:#999999;">完成到 <span :style="e.percent<100 ? 'color:#5088FF':'color:#2EA222' ">{{e.percent}}%</span> | {{e.createDate}}</p>
|
|||
|
|
</template>
|
|||
|
|
</el-step>
|
|||
|
|
|
|||
|
|
</el-steps> -->
|
|||
|
|
<el-timeline>
|
|||
|
|
<el-timeline-item
|
|||
|
|
v-for="(e, index) in executeInfo.processList"
|
|||
|
|
:key="index"
|
|||
|
|
>
|
|||
|
|
<p style="color: #333333">{{ e.remarks }}</p>
|
|||
|
|
<p style="color: #999999">
|
|||
|
|
完成到
|
|||
|
|
<span
|
|||
|
|
:style="e.percent < 100 ? 'color:#5088FF' : 'color:#2EA222'"
|
|||
|
|
>{{ e.percent }}%</span
|
|||
|
|
>
|
|||
|
|
| {{ e.createDate }}
|
|||
|
|
</p>
|
|||
|
|
</el-timeline-item>
|
|||
|
|
</el-timeline>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div slot="footer" style="text-align: center">
|
|||
|
|
<el-button
|
|||
|
|
style="width: 92px"
|
|||
|
|
size="small"
|
|||
|
|
@click="executeDialog = false"
|
|||
|
|
>关 闭</el-button
|
|||
|
|
>
|
|||
|
|
<el-button
|
|||
|
|
style="width: 148px"
|
|||
|
|
type="primary"
|
|||
|
|
size="small"
|
|||
|
|
@click="
|
|||
|
|
(innerVisible = true),
|
|||
|
|
(sayInfo.doDescription = executeInfo.doDescription)
|
|||
|
|
"
|
|||
|
|
v-if="basicInfo.status == 0"
|
|||
|
|
>编辑执行说明</el-button
|
|||
|
|
>
|
|||
|
|
</div>
|
|||
|
|
</el-dialog>
|
|||
|
|
</template>
|
|||
|
|
</ai-detail>
|
|||
|
|
<!-- <detail v-else :instance="instance" :dict="dict" @back="showDetail=false" :params="parentInfo" fromType="SonDetail" detailType="1"></detail> -->
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
|
|||
|
|
import * as echarts from "echarts";
|
|||
|
|
import { mapState } from "vuex";
|
|||
|
|
export default {
|
|||
|
|
name: "SonDetail",
|
|||
|
|
props: {
|
|||
|
|
instance: Function,
|
|||
|
|
params: Object,
|
|||
|
|
dict: Object,
|
|||
|
|
detailType: String
|
|||
|
|
},
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
basicInfo: {
|
|||
|
|
userInfoList: [],
|
|||
|
|
checkUserList: [],
|
|||
|
|
sendUserList: [],
|
|||
|
|
},
|
|||
|
|
ListType: "userInfoList",
|
|||
|
|
listName: "",
|
|||
|
|
saveList: [],
|
|||
|
|
suspendDialog: false,
|
|||
|
|
REttitle: "",
|
|||
|
|
writeInfo: {
|
|||
|
|
finishDescription: "",
|
|||
|
|
},
|
|||
|
|
appReportTaskDoInfoList: [],
|
|||
|
|
taskRole: "1",
|
|||
|
|
checkName: "",
|
|||
|
|
sendName: "",
|
|||
|
|
userName: "",
|
|||
|
|
executeDialog: false,
|
|||
|
|
executeInfo: {},
|
|||
|
|
sayInfo: {
|
|||
|
|
doDescription: "",
|
|||
|
|
},
|
|||
|
|
isAll: false,
|
|||
|
|
colConfigs: [
|
|||
|
|
{ prop: "userName", label: "姓名" },
|
|||
|
|
{ prop: "phone", label: "手机号码" },
|
|||
|
|
{ prop: "unitName", label: "所属部门" },
|
|||
|
|
{ slot: "status"},
|
|||
|
|
{ slot: "percent", label: "完成进度" },
|
|||
|
|
{ slot: "finishTime"},
|
|||
|
|
{ slot: "options", label: "操作" },
|
|||
|
|
],
|
|||
|
|
addUserList: [],
|
|||
|
|
innerVisible: false,
|
|||
|
|
showDetail: false,
|
|||
|
|
parentInfo: {}
|
|||
|
|
};
|
|||
|
|
},
|
|||
|
|
computed: {
|
|||
|
|
...mapState(["user"]),
|
|||
|
|
},
|
|||
|
|
mounted() {
|
|||
|
|
this.dict
|
|||
|
|
.load("workTaskType", "workTaskStatus", "workTaskFinishStatus")
|
|||
|
|
.then(() => {
|
|||
|
|
this.searchDetail();
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
//查详情
|
|||
|
|
searchDetail() {
|
|||
|
|
this.sendName = "";
|
|||
|
|
this.checkName = "";
|
|||
|
|
this.userName = "";
|
|||
|
|
this.instance
|
|||
|
|
.post("/app/appworktaskinfo/queryDetailById", null, {
|
|||
|
|
params: { id: this.params.id },
|
|||
|
|
})
|
|||
|
|
.then((res) => {
|
|||
|
|
if (res.code == 0) {
|
|||
|
|
this.basicInfo = res.data;
|
|||
|
|
|
|||
|
|
this.basicInfo.userInfoList.map((item) => {
|
|||
|
|
item.detailId = item.id
|
|||
|
|
item.name = item.userName
|
|||
|
|
item.id = item.userId
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
if(this.basicInfo.checkUserList.length) {
|
|||
|
|
this.basicInfo.checkUserList.map((item) => {
|
|||
|
|
item.detailId = item.id
|
|||
|
|
item.name = item.userName
|
|||
|
|
item.id = item.userId
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if(this.basicInfo.sponsorUserList.length) {
|
|||
|
|
this.basicInfo.sponsorUserList.map((item) => {
|
|||
|
|
item.detailId = item.id
|
|||
|
|
item.name = item.userName
|
|||
|
|
item.id = item.userId
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if(this.basicInfo.sendUserList.length) {
|
|||
|
|
this.basicInfo.sendUserList.map((item) => {
|
|||
|
|
item.detailId = item.id
|
|||
|
|
item.name = item.userName
|
|||
|
|
item.id = item.userId
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
this.parentInfo = res.data.parentTask
|
|||
|
|
this.saveList = JSON.stringify(this.basicInfo[this.ListType]);
|
|||
|
|
|
|||
|
|
if (this.basicInfo.checkUserList.length) {
|
|||
|
|
this.basicInfo.checkUserList.forEach((v) => {
|
|||
|
|
this.checkName += v.userName + "、";
|
|||
|
|
});
|
|||
|
|
this.checkName = this.checkName.substring(
|
|||
|
|
0,
|
|||
|
|
this.checkName.length - 1
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (this.basicInfo.userInfoList.length) {
|
|||
|
|
this.basicInfo.userInfoList.forEach((v, index) => {
|
|||
|
|
this.userName += v.userName + "、";
|
|||
|
|
this.basicInfo.userInfoList[index].isSend = false;
|
|||
|
|
});
|
|||
|
|
this.userName = this.userName.substring(
|
|||
|
|
0,
|
|||
|
|
this.userName.length - 1
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (this.basicInfo.sendUserList.length) {
|
|||
|
|
this.basicInfo.sendUserList.forEach((v) => {
|
|||
|
|
this.sendName += v.userName + "、";
|
|||
|
|
});
|
|||
|
|
this.sendName = this.sendName.substring(
|
|||
|
|
0,
|
|||
|
|
this.sendName.length - 1
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
//人员选择器去重
|
|||
|
|
this.appReportTaskDoInfoList = [
|
|||
|
|
...this.basicInfo.userInfoList,
|
|||
|
|
...this.basicInfo.checkUserList,
|
|||
|
|
...this.basicInfo.sendUserList,
|
|||
|
|
...this.basicInfo.sponsorUserList,
|
|||
|
|
];
|
|||
|
|
this.showEchartScale();
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
showEchartScale() {
|
|||
|
|
let myChart = echarts.init(document.getElementById("echart"));
|
|||
|
|
let legendData = ["未完成", "已完成", "逾期完成"];
|
|||
|
|
let seriesData = [
|
|||
|
|
{ value: this.basicInfo.unFinished, name: "未完成" },
|
|||
|
|
{ value: this.basicInfo.finishedOnTime, name: "按时完成" },
|
|||
|
|
{ value: this.basicInfo.finishedOutOfTime, name: "逾期完成" },
|
|||
|
|
];
|
|||
|
|
let option = {
|
|||
|
|
backgroundColor: "#fff",
|
|||
|
|
tooltip: {
|
|||
|
|
trigger: "item",
|
|||
|
|
formatter: "{a} <br/>{b} : {c} ({d}%)",
|
|||
|
|
},
|
|||
|
|
legend: {
|
|||
|
|
orient: "vertical",
|
|||
|
|
right: 340,
|
|||
|
|
top: 70,
|
|||
|
|
bottom: 20,
|
|||
|
|
itemWidth: 8,
|
|||
|
|
itemHeight: 8,
|
|||
|
|
formatter: (name) => {
|
|||
|
|
let item = seriesData.find((e) => e.name == name);
|
|||
|
|
return `{title|${name}}{content|${
|
|||
|
|
item ? item.value.toLocaleString() : 0
|
|||
|
|
}}`;
|
|||
|
|
},
|
|||
|
|
// data: legendData
|
|||
|
|
textStyle: {
|
|||
|
|
fontSize: 14,
|
|||
|
|
rich: {
|
|||
|
|
title: {
|
|||
|
|
width: 100,
|
|||
|
|
color: "#AAA",
|
|||
|
|
paddingLeft: 6,
|
|||
|
|
fontSize: 14,
|
|||
|
|
},
|
|||
|
|
content: {
|
|||
|
|
color: "#333",
|
|||
|
|
width: 50,
|
|||
|
|
align: "right",
|
|||
|
|
fontSize: 14,
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
series: [
|
|||
|
|
{
|
|||
|
|
name: "完成情况比例",
|
|||
|
|
type: "pie",
|
|||
|
|
radius: ["40%", "75%"],
|
|||
|
|
center: ["14%", "45%"],
|
|||
|
|
avoidLabelOverlap: false,
|
|||
|
|
label: {
|
|||
|
|
position: "inside",
|
|||
|
|
formatter: (params) => {
|
|||
|
|
if (params.value == 0) {
|
|||
|
|
return "";
|
|||
|
|
} else {
|
|||
|
|
return `${params.percent}%`;
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
data: seriesData,
|
|||
|
|
itemStyle: {
|
|||
|
|
normal: {
|
|||
|
|
color: function (params) {
|
|||
|
|
//自定义颜色
|
|||
|
|
var colorList = ["#FFAA44", "#2EA222", "#3D94FB"];
|
|||
|
|
return colorList[params.dataIndex];
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
};
|
|||
|
|
myChart.setOption(option);
|
|||
|
|
},
|
|||
|
|
ListTypeChange(val) {
|
|||
|
|
this.saveList = JSON.stringify(this.basicInfo[val]);
|
|||
|
|
this.listName = "";
|
|||
|
|
if (val == "userInfoList") this.taskRole = "1";
|
|||
|
|
if (val == "checkUserList") this.taskRole = "2";
|
|||
|
|
if (val == "sendUserList") this.taskRole = "3";
|
|||
|
|
this.searchDetail(this.params.id);
|
|||
|
|
},
|
|||
|
|
//删除任务
|
|||
|
|
deleteTask() {
|
|||
|
|
this.$confirm("是否确认删除本次任务，删除后无法恢复？", {
|
|||
|
|
type: "error",
|
|||
|
|
}).then(() => {
|
|||
|
|
this.instance
|
|||
|
|
.post("/app/appworktaskinfo/delete", null, {
|
|||
|
|
params: {
|
|||
|
|
id: this.params.id,
|
|||
|
|
},
|
|||
|
|
})
|
|||
|
|
.then((res) => {
|
|||
|
|
if (res.code == 0) {
|
|||
|
|
this.$message.success("删除成功");
|
|||
|
|
this.onBack();
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
filterData(val) {
|
|||
|
|
if (val) {
|
|||
|
|
let list = JSON.parse(this.saveList).filter(
|
|||
|
|
(e) => e.userName.indexOf(val) !== -1
|
|||
|
|
);
|
|||
|
|
this.$set(this.basicInfo, this.ListType, list);
|
|||
|
|
} else {
|
|||
|
|
this.$set(this.basicInfo, this.ListType, JSON.parse(this.saveList));
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
//催办多人
|
|||
|
|
urgeMessageAll() {
|
|||
|
|
if (!this.isAll) {
|
|||
|
|
this.$confirm("是否向全部执行人发送催办提醒？", {
|
|||
|
|
type: "warning",
|
|||
|
|
title: "发送催办提醒",
|
|||
|
|
}).then(() => {
|
|||
|
|
this.instance
|
|||
|
|
.post("/app/appworktaskuserinfo/sendMesage", null, {
|
|||
|
|
params: {
|
|||
|
|
id: this.params.id,
|
|||
|
|
},
|
|||
|
|
})
|
|||
|
|
.then((res) => {
|
|||
|
|
if (res.code == 0) {
|
|||
|
|
this.$message.success("催办消息已发送");
|
|||
|
|
this.isAll = true;
|
|||
|
|
this.basicInfo.userInfoList.forEach((e, index) => {
|
|||
|
|
e.isSend = true;
|
|||
|
|
this.$set(this.basicInfo.userInfoList, index, e);
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
//催办单人
|
|||
|
|
urgeMessage(row) {
|
|||
|
|
if (row.doStatus == 0 && !row.isSend) {
|
|||
|
|
this.$confirm(`是否向【执行人：${row.userName}】发送催办提醒？`, {
|
|||
|
|
type: "warning",
|
|||
|
|
title: "发送催办提醒",
|
|||
|
|
}).then(() => {
|
|||
|
|
this.instance
|
|||
|
|
.post("/app/appworktaskuserinfo/sendMesageOne", null, {
|
|||
|
|
params: {
|
|||
|
|
id: row.detailId,
|
|||
|
|
},
|
|||
|
|
})
|
|||
|
|
.then((res) => {
|
|||
|
|
if (res.code == 0) {
|
|||
|
|
this.$message.success("催办消息已发送");
|
|||
|
|
row.isSend = true;
|
|||
|
|
let index = this.basicInfo.userInfoList.findIndex(
|
|||
|
|
(e) => e.id == row.id
|
|||
|
|
);
|
|||
|
|
if (index > -1)
|
|||
|
|
this.$set(this.basicInfo.userInfoList, index, row);
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
//执行情况
|
|||
|
|
getExecute(row) {
|
|||
|
|
this.instance
|
|||
|
|
.post("/app/appworktaskuserinfo/queryDetailById", null, {
|
|||
|
|
params: {
|
|||
|
|
id: row.detailId,
|
|||
|
|
},
|
|||
|
|
})
|
|||
|
|
.then((res) => {
|
|||
|
|
if (res.code == 0) {
|
|||
|
|
this.executeDialog = true;
|
|||
|
|
this.executeInfo = res.data;
|
|||
|
|
this.executeInfo.detailId = this.executeInfo.id
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
updateDescription() {
|
|||
|
|
this.instance
|
|||
|
|
.post(`/app/appworktaskuserinfo/updateDoDescription`, {
|
|||
|
|
id: this.executeInfo.detailId,
|
|||
|
|
doDescription: this.sayInfo.doDescription,
|
|||
|
|
})
|
|||
|
|
.then((res) => {
|
|||
|
|
if (res.code == 0) {
|
|||
|
|
this.innerVisible = false;
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
//中止任务-取消任务-退回任务
|
|||
|
|
overTask(formName) {
|
|||
|
|
let url = ``;
|
|||
|
|
if (this.REttitle == "任务完成情况") {
|
|||
|
|
url = `/app/appworktaskuserinfo/confirm`;
|
|||
|
|
var obj = {
|
|||
|
|
taskCode: this.params.taskCode,
|
|||
|
|
finishDescription: this.writeInfo.finishDescription,
|
|||
|
|
lastTime: this.basicInfo.lastTime,
|
|||
|
|
};
|
|||
|
|
} else if (this.REttitle == "关闭任务") {
|
|||
|
|
url = `/app/appworktaskinfo/stopOrFinish`;
|
|||
|
|
var obj = {
|
|||
|
|
id: this.params.id,
|
|||
|
|
status: "2",
|
|||
|
|
closeDescription: this.writeInfo.finishDescription,
|
|||
|
|
};
|
|||
|
|
} else if (this.REttitle == "取消任务") {
|
|||
|
|
url = `/app/appreporttaskinfo/cancelTaskById`;
|
|||
|
|
var obj = {
|
|||
|
|
id: this.params.id,
|
|||
|
|
...this.writeInfo,
|
|||
|
|
};
|
|||
|
|
}
|
|||
|
|
this.instance
|
|||
|
|
.post(
|
|||
|
|
url,
|
|||
|
|
{
|
|||
|
|
...obj,
|
|||
|
|
},
|
|||
|
|
null
|
|||
|
|
)
|
|||
|
|
.then((res) => {
|
|||
|
|
if (res.code == 0) {
|
|||
|
|
this.$message.success(this.REttitle + "成功");
|
|||
|
|
if (this.REttitle == "退回任务") {
|
|||
|
|
this.searchDetail(this.params.id);
|
|||
|
|
} else {
|
|||
|
|
this.onBack();
|
|||
|
|
}
|
|||
|
|
this.suspendDialog = false;
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
//确认完成
|
|||
|
|
markCompleted(type) {
|
|||
|
|
this.$confirm(
|
|||
|
|
"标记完成后，本次任务变成已完成，任务结果将锁定无法修改，请确保所有执行人已经完成任务，是否继续？",
|
|||
|
|
{
|
|||
|
|
type: "success",
|
|||
|
|
title: "标记完成",
|
|||
|
|
}
|
|||
|
|
).then(() => {
|
|||
|
|
this.instance
|
|||
|
|
.post(
|
|||
|
|
"/app/appworktaskinfo/stopOrFinish",
|
|||
|
|
{
|
|||
|
|
id: this.params.id,
|
|||
|
|
status: type,
|
|||
|
|
},
|
|||
|
|
null
|
|||
|
|
)
|
|||
|
|
.then((res) => {
|
|||
|
|
if (res.code == 0) {
|
|||
|
|
this.$message.success("已标记完成");
|
|||
|
|
this.onBack();
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
//删掉执行单位
|
|||
|
|
deleteUnit(row) {
|
|||
|
|
this.$confirm("是否确认删除此人？", {
|
|||
|
|
type: "warning",
|
|||
|
|
}).then(() => {
|
|||
|
|
this.instance
|
|||
|
|
.post("/app/appworktaskuserinfo/delete", null, {
|
|||
|
|
params: {
|
|||
|
|
ids: row.detailId,
|
|||
|
|
},
|
|||
|
|
})
|
|||
|
|
.then((res) => {
|
|||
|
|
if (res.code == 0) {
|
|||
|
|
this.$message.success("删除成功");
|
|||
|
|
this.searchDetail(this.params.id);
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
surePersonalFn() {
|
|||
|
|
this.lastPersonalList = this.tags;
|
|||
|
|
this.lastPersonalList.forEach((item, index) => {
|
|||
|
|
this.lastPersonalList[index].taskCode = this.params.taskCode;
|
|||
|
|
this.lastPersonalList[index].taskRole = this.taskRole;
|
|||
|
|
});
|
|||
|
|
if (this.lastPersonalList.length > 0) {
|
|||
|
|
this.instance
|
|||
|
|
.post(
|
|||
|
|
`/app/appworktaskuserinfo/addUserInfos`,
|
|||
|
|
|
|||
|
|
this.lastPersonalList
|
|||
|
|
)
|
|||
|
|
.then((res) => {
|
|||
|
|
if (res.code == 0) {
|
|||
|
|
this.$message.success("保存成功");
|
|||
|
|
this.showSelectPer = false;
|
|||
|
|
this.searchDetail(this.params.id);
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
} else {
|
|||
|
|
this.$message.error("增加人数不能为空");
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
surePersonal() {
|
|||
|
|
debounce(this.surePersonalFn(), 3000);
|
|||
|
|
},
|
|||
|
|
downFileAll () {
|
|||
|
|
if (this.basicInfo.fileList.length > 0) {
|
|||
|
|
this.instance.post('/app/appofficialdocumentinfo/downLoadAllFileForDetail', null, {
|
|||
|
|
responseType: 'blob',
|
|||
|
|
params: {
|
|||
|
|
id: this.basicInfo.id
|
|||
|
|
}
|
|||
|
|
}).then((res) => {
|
|||
|
|
const link = document.createElement('a')
|
|||
|
|
let blob = new Blob([res], { type: 'application/vnd.ms-excel' })
|
|||
|
|
link.style.display = 'none'
|
|||
|
|
link.href = URL.createObjectURL(blob)
|
|||
|
|
var num = ''
|
|||
|
|
for (let i = 0; i < 10; i++) {
|
|||
|
|
num += Math.ceil(Math.random() * 10)
|
|||
|
|
}
|
|||
|
|
link.setAttribute('download', '工作文件' + '.zip')
|
|||
|
|
document.body.appendChild(link)
|
|||
|
|
link.click()
|
|||
|
|
document.body.removeChild(link)
|
|||
|
|
})
|
|||
|
|
} else {
|
|||
|
|
this.$message.error('暂无附件提供下载')
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
downFile(item) {
|
|||
|
|
window.open(item.url);
|
|||
|
|
},
|
|||
|
|
onBack() {
|
|||
|
|
if(this.detailType == 'detail') { //从父任务
|
|||
|
|
this.$emit("back");
|
|||
|
|
}else { //列表
|
|||
|
|
this.$emit('change', {
|
|||
|
|
type: 'list',
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
toParent() {
|
|||
|
|
if(this.detailType == 'detail') { //从父任务
|
|||
|
|
this.$emit("back");
|
|||
|
|
}else { //列表
|
|||
|
|
this.$emit('change', {
|
|||
|
|
type: 'Detail',
|
|||
|
|
params: {
|
|||
|
|
type: 'Detail',
|
|||
|
|
id: this.parentInfo.id,
|
|||
|
|
fromType: 'SonDetail',
|
|||
|
|
sonDetailId: this.params.id
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
confirmAdd(type) {
|
|||
|
|
if(this.addUserList.length>0){
|
|||
|
|
this.addUserList.map((item) => {
|
|||
|
|
item.taskRole = type
|
|||
|
|
item.taskCode = this.basicInfo.taskCode;
|
|||
|
|
})
|
|||
|
|
this.instance.post(`/app/appworktaskuserinfo/addUserInfos`,this.addUserList).then(res => {
|
|||
|
|
if(res.code==0){
|
|||
|
|
this.addUserList = []
|
|||
|
|
this.$message.success('保存成功');
|
|||
|
|
this.searchDetail();
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}else{
|
|||
|
|
this.$message.error("增加人数不能为空")
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
closeWork() {
|
|||
|
|
this.$confirm("任务关闭后无法恢复，确定关闭？", {
|
|||
|
|
type: "error",
|
|||
|
|
}).then(() => {
|
|||
|
|
this.REttitle = "关闭任务"
|
|||
|
|
this.overTask()
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
};
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style scoped lang="scss">
|
|||
|
|
.especial {
|
|||
|
|
margin-bottom: 12px;
|
|||
|
|
.icon {
|
|||
|
|
vertical-align: top;
|
|||
|
|
display: inline-block;
|
|||
|
|
padding-top: 5px;
|
|||
|
|
margin-left: 20px;
|
|||
|
|
color: #f46;
|
|||
|
|
}
|
|||
|
|
.people {
|
|||
|
|
display: inline-block;
|
|||
|
|
font-size: 14px;
|
|||
|
|
color: #666;
|
|||
|
|
margin-right: 16px;
|
|||
|
|
vertical-align: top;
|
|||
|
|
}
|
|||
|
|
.AiWechatSelecter {
|
|||
|
|
display: inline-block;
|
|||
|
|
margin-left: 3px;
|
|||
|
|
}
|
|||
|
|
.hint {
|
|||
|
|
font-size: 14px;
|
|||
|
|
color: #999;
|
|||
|
|
margin-left: 16px;
|
|||
|
|
}
|
|||
|
|
.mar-r40 {
|
|||
|
|
margin-right: 40px;
|
|||
|
|
}
|
|||
|
|
.w80 {
|
|||
|
|
width: 80px;
|
|||
|
|
text-align: right;
|
|||
|
|
color: #888;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.add-icon {
|
|||
|
|
text-align: right;
|
|||
|
|
cursor: pointer;
|
|||
|
|
i {
|
|||
|
|
font-size: 14px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.color1 {
|
|||
|
|
color: #4b87fe;
|
|||
|
|
}
|
|||
|
|
.color2 {
|
|||
|
|
color: #2ea222;
|
|||
|
|
}
|
|||
|
|
.color3 {
|
|||
|
|
color: #999999;
|
|||
|
|
}
|
|||
|
|
.echart {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 240px;
|
|||
|
|
}
|
|||
|
|
.AiWechatSelecter{
|
|||
|
|
width: calc(100% - 150px);
|
|||
|
|
}
|
|||
|
|
</style>
|