574 lines
18 KiB
Vue
574 lines
18 KiB
Vue
<template>
|
||
<div class="wrap">
|
||
<el-row :gutter="20">
|
||
<el-col :span="16">
|
||
<el-row :gutter="20">
|
||
<el-col :span="6">
|
||
<div class="grid-content bg01">
|
||
<div class="info-left"><i class="el-icon-alarm-clock"></i></div>
|
||
<div class="info-right">
|
||
<h4>今日待办</h4>
|
||
<div class="conter"><span class="pull-right">件</span>{{todayRemind}}</div>
|
||
</div>
|
||
</div>
|
||
</el-col>
|
||
<el-col :span="6">
|
||
<div class="grid-content bg02">
|
||
<div class="info-left"><i class="el-icon-timer"></i></div>
|
||
<div class="info-right">
|
||
<h4>所有待办</h4>
|
||
<div class="conter"><span class="pull-right">件</span>{{allRemind}}</div>
|
||
</div>
|
||
</div>
|
||
</el-col>
|
||
<el-col :span="6">
|
||
<div class="grid-content bg03">
|
||
<div class="info-left"><i class="el-icon-basketball"></i></div>
|
||
<div class="info-right">
|
||
<h4>逾期未办</h4>
|
||
<div class="conter">{{overdueRemind}}</div>
|
||
</div>
|
||
</div>
|
||
</el-col>
|
||
<el-col :span="6">
|
||
<div class="grid-content bg04">
|
||
<div class="info-left"><i class="el-icon-edit-outline"></i></div>
|
||
<div class="info-right">
|
||
<h4>历史已办</h4>
|
||
<div class="conter"><span class="pull-right">件</span>{{historyRemind}}</div>
|
||
</div>
|
||
</div>
|
||
</el-col>
|
||
|
||
<el-col :span="24">
|
||
<div class="table-block">
|
||
<template>
|
||
<el-table :data="listRemind" stripe style="width: 100%">
|
||
<el-table-column prop="taskTitle" label="待办事件"></el-table-column>
|
||
<el-table-column prop="content" label="事件内容"></el-table-column>
|
||
<el-table-column label="待办日期" align="center" prop="createTime" width="120">
|
||
<template slot-scope="scope">
|
||
<span v-if="getTimesTamp(now) > getTimesTamp(scope.row.taskTime)"
|
||
style="color: #1ab394">{{ parseTime(scope.row.taskTime, '{y}-{m}-{d}') }}</span>
|
||
<span v-else style="color: #ff9900">{{ parseTime(scope.row.taskTime, '{y}-{m}-{d}') }}</span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="createBy" label="创建者" width="120"></el-table-column>
|
||
<el-table-column label="创建时间" align="center" prop="createTime" width="120">
|
||
<template slot-scope="scope">
|
||
<span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d}') }}</span>
|
||
</template>
|
||
</el-table-column>
|
||
|
||
<el-table-column prop="name" label="办理操作" align="center" width="120">
|
||
<template slot-scope="scope">
|
||
<el-button
|
||
size="mini"
|
||
type="text"
|
||
icon="el-icon-view"
|
||
@click="handleLook(scope.row)"
|
||
v-hasPermi="['oa:remind:edit']"
|
||
>查看
|
||
</el-button>
|
||
<el-button
|
||
size="mini"
|
||
type="text"
|
||
icon="el-icon-edit"
|
||
@click="handleTask(scope.row)"
|
||
v-hasPermi="['oa:remind:edit']"
|
||
>办理
|
||
</el-button>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
</template>
|
||
</div>
|
||
|
||
</el-col>
|
||
</el-row>
|
||
|
||
|
||
</el-col>
|
||
<el-col :span="8">
|
||
<div class="demo-block">
|
||
<el-calendar>
|
||
<!-- 这里使用的是 2.5 slot 语法-->
|
||
<template
|
||
slot="dateCell"
|
||
slot-scope="{date, data}">
|
||
<!--自定义内容-->
|
||
|
||
<div class="calendar-day" style="text-align: center">
|
||
<div>
|
||
<span class="everyDay">{{ data.day.split('-').slice(2).join('-') }}</span>
|
||
</div>
|
||
<div v-for="item in brightDate">
|
||
<div v-if="(parseTime(item.taskTime, '{y}-{m}-{d}')).indexOf(data.day) != -1" class="task-block">
|
||
待办({{ item.count }})
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</template>
|
||
</el-calendar>
|
||
</div>
|
||
|
||
|
||
</el-col>
|
||
</el-row>
|
||
|
||
<!--查看事件弹出层-->
|
||
<el-dialog :title="title" :visible.sync="openLook" width="30%" append-to-body>
|
||
|
||
<el-descriptions :column="4" border>
|
||
<el-descriptions-item label="待办事件" :labelStyle="lableBg" span="2" width="80px">
|
||
{{ lookRemind.taskTitle }}
|
||
</el-descriptions-item>
|
||
<el-descriptions-item label="待办时间" :labelStyle="lableBg" span="2">
|
||
{{ parseTime(lookRemind.taskTime, '{y}-{m}-{d}') }}
|
||
</el-descriptions-item>
|
||
<el-descriptions-item label="事件内容" :labelStyle="lableBg" span="4">
|
||
{{ lookRemind.content }}
|
||
</el-descriptions-item>
|
||
<el-descriptions-item label="创建者" :labelStyle="lableBg" span="2" width="80px">
|
||
{{ lookRemind.createBy }}
|
||
</el-descriptions-item>
|
||
<el-descriptions-item label="创建时间" :labelStyle="lableBg" span="2">
|
||
{{ parseTime(lookRemind.createTime, '{y}-{m}-{d}') }}
|
||
</el-descriptions-item>
|
||
<el-descriptions-item label="备注" :labelStyle="lableBg" span="4">
|
||
{{ lookRemind.remark }}
|
||
</el-descriptions-item>
|
||
<el-descriptions-item :labelStyle="lableBg" span="4">
|
||
<template slot="label">
|
||
<i class="el-icon-paperclip"></i>
|
||
附件
|
||
</template>
|
||
<!--附件-->
|
||
<template v-if="lookRemind.accessory">
|
||
<el-tooltip class="item" effect="dark" content="点击下载" placement="bottom">
|
||
<el-link type="primary" @click="downloadFile(form.accessory)">{{form.accessory.match('[^/]+(?!.*/)')[0]}}</el-link>
|
||
</el-tooltip>
|
||
</template>
|
||
<template v-else>
|
||
<span style="color: #999999">暂无附件</span>
|
||
</template>
|
||
<!--附件-->
|
||
</el-descriptions-item>
|
||
|
||
</el-descriptions>
|
||
|
||
</el-dialog>
|
||
|
||
<!--办理事件弹出层-->
|
||
<el-dialog :title="title" :visible.sync="openTask" width="30%" append-to-body>
|
||
<el-descriptions :column="4" border>
|
||
<el-descriptions-item label="待办事件" :labelStyle="lableBg" span="2" width="80px">
|
||
{{ form.taskTitle }}
|
||
</el-descriptions-item>
|
||
<el-descriptions-item label="待办时间" :labelStyle="lableBg" span="2">
|
||
{{ parseTime(form.taskTime, '{y}-{m}-{d}') }}
|
||
</el-descriptions-item>
|
||
<el-descriptions-item label="事件内容" :labelStyle="lableBg" span="4">
|
||
{{ form.content }}
|
||
</el-descriptions-item>
|
||
<el-descriptions-item label="创建者" :labelStyle="lableBg" span="2" width="80px">
|
||
{{ form.createBy }}
|
||
</el-descriptions-item>
|
||
<el-descriptions-item label="创建时间" :labelStyle="lableBg" span="2">
|
||
{{ parseTime(form.createTime, '{y}-{m}-{d}') }}
|
||
</el-descriptions-item>
|
||
<el-descriptions-item label="备注" :labelStyle="lableBg" span="4">
|
||
{{ form.remark }}
|
||
</el-descriptions-item>
|
||
<el-descriptions-item :labelStyle="lableBg" span="4">
|
||
<template slot="label">
|
||
<i class="el-icon-paperclip"></i>
|
||
附件
|
||
</template>
|
||
<!--附件-->
|
||
<template v-if="form.accessory">
|
||
<el-tooltip class="item" effect="dark" content="点击下载" placement="bottom">
|
||
<el-link type="primary" @click="downloadFile(form.accessory)">{{form.accessory.match('[^/]+(?!.*/)')[0]}}</el-link>
|
||
</el-tooltip>
|
||
</template>
|
||
<template v-else>
|
||
<span style="color: #999999">暂无附件</span>
|
||
</template>
|
||
<!--附件-->
|
||
</el-descriptions-item>
|
||
|
||
</el-descriptions>
|
||
|
||
<div class="form-back">
|
||
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
|
||
<el-form-item label="办理情况" prop="manage">
|
||
<el-input v-model="form.manage" type="textarea" placeholder="请输入办理情况"/>
|
||
</el-form-item>
|
||
|
||
</el-form>
|
||
<span slot="footer" class="dialog-footer">
|
||
<el-button type="primary" @click="submitForm">确 定</el-button>
|
||
<el-button @click="cancelTask">取 消</el-button>
|
||
</span>
|
||
</div>
|
||
|
||
</el-dialog>
|
||
|
||
<!--添加事件弹出层-->
|
||
<el-dialog :title="title" :visible.sync="open" width="30%" append-to-body>
|
||
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
|
||
<el-form-item label="待办事件" prop="taskTitle">
|
||
<el-input v-model="form.taskTitle" placeholder="请输入待办事件"/>
|
||
</el-form-item>
|
||
<el-form-item label="事件内容" prop="content">
|
||
<el-input v-model="form.content" type="textarea" placeholder="请输入内容"/>
|
||
</el-form-item>
|
||
<el-form-item label="办理时间" prop="taskTime">
|
||
<el-date-picker clearable
|
||
v-model="form.taskTime"
|
||
type="date"
|
||
value-format="yyyy-MM-dd HH:mm:ss"
|
||
placeholder="请选择办理时间">
|
||
</el-date-picker>
|
||
</el-form-item>
|
||
<el-form-item label="附件" prop="accessory">
|
||
<file-upload v-model="form.accessory"/>
|
||
</el-form-item>
|
||
<el-form-item label="备注" prop="remark">
|
||
<el-input v-model="form.remark" placeholder="请输入备注"/>
|
||
</el-form-item>
|
||
</el-form>
|
||
<span slot="footer" class="dialog-footer">
|
||
<el-button type="primary" @click="submitForm">确 定</el-button>
|
||
<el-button @click="cancel">取 消</el-button>
|
||
</span>
|
||
</el-dialog>
|
||
|
||
<div class="footer-bottom">
|
||
<el-button type="primary" @click="addForm">添加事件</el-button>
|
||
</div>
|
||
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import {addRemind, getRemind, getRemindList, getRemindCount, updateRemind} from "@/api/oa/remind";
|
||
|
||
export default {
|
||
name: "index",
|
||
data() {
|
||
return {
|
||
now: new Date(),
|
||
brightDate: [],
|
||
open: false,
|
||
openLook: false,
|
||
openTask: false,
|
||
title: '',
|
||
//详情lable背景
|
||
lableBg: "background: #f0f9eb; width:120px; text-align: center;",
|
||
// 表单参数
|
||
form: {},
|
||
lookRemind: {},
|
||
//今日待办
|
||
todayRemind: 0,
|
||
//所有待办
|
||
allRemind: 0,
|
||
//逾期未办
|
||
overdueRemind: 0,
|
||
//历史已经办
|
||
historyRemind: 0,
|
||
// 表单校验
|
||
rules: {
|
||
taskTitle: [
|
||
{required: true, message: "提醒名称不能为空", trigger: "blur"}
|
||
],
|
||
content: [
|
||
{required: true, message: "事件内容不能为空", trigger: "blur"}
|
||
],
|
||
taskTime: [
|
||
{required: true, message: "办理时间不能为空", trigger: "blur"}
|
||
],
|
||
},
|
||
listRemind: [],
|
||
// 查询参数
|
||
queryParams: {},
|
||
// 表单重置
|
||
reset() {
|
||
this.form = {
|
||
remindId: undefined,
|
||
taskTitle: undefined,
|
||
content: undefined,
|
||
taskTime: undefined,
|
||
taskStatus: undefined,
|
||
accessory: undefined,
|
||
remark: undefined,
|
||
createBy: undefined,
|
||
createTime: undefined,
|
||
updateBy: undefined,
|
||
updateTime: undefined
|
||
};
|
||
this.resetForm("form");
|
||
},
|
||
}
|
||
},
|
||
created() {
|
||
this.getList();
|
||
this.getNowRamind();
|
||
this.getAllRamind();
|
||
this.getOverdueRamind()
|
||
this.getHistoryRamind();
|
||
},
|
||
methods: {
|
||
/** 查询事件提醒列表 */
|
||
getList() {
|
||
this.loading = true;
|
||
let data = {
|
||
taskStatus: '0',
|
||
}
|
||
//获取待办事件列表
|
||
getRemindList(data).then(response => {
|
||
this.listRemind = response.data;
|
||
//日历待办：遍历去重、增加属性字段count（遇到重复+1）
|
||
let arr = response.data;
|
||
// 使用reduce方法遍历数组，累计相同id的次数，并构建新数组
|
||
let newArr = arr.reduce((acc, current) => {
|
||
let duplicateCount = acc.filter(item => this.parseTime(item.taskTime, '{y}-{m}-{d}') === this.parseTime(current.taskTime, '{y}-{m}-{d}')).length;
|
||
if (duplicateCount === 0) {
|
||
acc.push({...current, count: 1});
|
||
} else {
|
||
// 找到重复对象并加1
|
||
let index = acc.findIndex(item => this.parseTime(item.taskTime, '{y}-{m}-{d}') === this.parseTime(current.taskTime, '{y}-{m}-{d}'));
|
||
acc[index].count = acc[index].count + 1;
|
||
}
|
||
return acc;
|
||
}, []);
|
||
this.brightDate = newArr;
|
||
|
||
this.loading = false;
|
||
});
|
||
},
|
||
/**今日待办事件统计**/
|
||
getNowRamind(){
|
||
this.queryParams.params = {};
|
||
this.queryParams.taskStatus = '0'
|
||
this.queryParams.params["beginTime"] = this.parseTime(this.now, '{y}-{m}-{d}') + ' 00:00:00';
|
||
this.queryParams.params["endTime"] = this.parseTime(this.now, '{y}-{m}-{d}') + ' 23:59:59';
|
||
getRemindCount(this.queryParams).then(response => {
|
||
this.todayRemind = response.data
|
||
})
|
||
},
|
||
|
||
/**逾期未办事件统计**/
|
||
getOverdueRamind(){
|
||
this.queryParams.params = {};
|
||
this.queryParams.taskStatus = '0'
|
||
this.queryParams.params["beginTime"] = this.parseTime(new Date('2020-01-01'), '{y}-{m}-{d}') + ' 00:00:00';
|
||
this.queryParams.params["endTime"] = this.parseTime(this.now, '{y}-{m}-{d}') + ' 23:59:59';
|
||
getRemindCount(this.queryParams).then(response => {
|
||
this.overdueRemind = response.data
|
||
})
|
||
},
|
||
|
||
/**所有待办事件统计**/
|
||
getAllRamind(){
|
||
this.queryParams.params = {};
|
||
this.queryParams.taskStatus = '0'
|
||
getRemindCount(this.queryParams).then(response => {
|
||
this.allRemind = response.data
|
||
})
|
||
},
|
||
|
||
/**已办事件统计**/
|
||
getHistoryRamind(){
|
||
this.queryParams.params = {};
|
||
this.queryParams.taskStatus = '1'
|
||
getRemindCount(this.queryParams).then(response => {
|
||
this.historyRemind = response.data
|
||
})
|
||
},
|
||
|
||
/**添加事件按钮操作**/
|
||
addForm() {
|
||
this.reset();
|
||
this.open = true;
|
||
},
|
||
/** 查看按钮操作 */
|
||
handleLook(row) {
|
||
this.loading = true;
|
||
this.reset();
|
||
const remindId = row.remindId || this.ids
|
||
getRemind(remindId).then(response => {
|
||
this.loading = false;
|
||
this.lookRemind = response.data;
|
||
this.openLook = true;
|
||
this.title = "查看待办详情";
|
||
});
|
||
},
|
||
|
||
/** 办理按钮操作 */
|
||
handleTask(row) {
|
||
this.loading = true;
|
||
this.reset();
|
||
const remindId = row.remindId || this.ids
|
||
getRemind(remindId).then(response => {
|
||
this.loading = false;
|
||
this.form = response.data;
|
||
this.openTask = true;
|
||
this.title = "事件办理";
|
||
|
||
});
|
||
},
|
||
|
||
/** 提交按钮 */
|
||
submitForm() {
|
||
this.$refs["form"].validate(valid => {
|
||
if (valid) {
|
||
this.buttonLoading = true;
|
||
if (this.form.remindId != null) {
|
||
if (this.getTimesTamp(this.now) > this.getTimesTamp(this.form.taskTime) && this.form.manage != null) {
|
||
console.log("执行任务办理")
|
||
this.form.taskStatus = '1';
|
||
updateRemind(this.form).then(response => {
|
||
this.$modal.msgSuccess("修改成功");
|
||
this.openTask = false;
|
||
this.getList();
|
||
}).finally(() => {
|
||
this.buttonLoading = false;
|
||
});
|
||
} else {
|
||
this.$modal.msgWarning("办理情况不可为空！或任务时间未到！")
|
||
}
|
||
|
||
|
||
} else {
|
||
addRemind(this.form).then(response => {
|
||
this.$modal.msgSuccess("新增成功");
|
||
this.open = false;
|
||
this.getList();
|
||
}).finally(() => {
|
||
this.buttonLoading = false;
|
||
});
|
||
}
|
||
|
||
//执行办理统计
|
||
this.getNowRamind();
|
||
this.getAllRamind();
|
||
this.getOverdueRamind()
|
||
this.getHistoryRamind();
|
||
}
|
||
});
|
||
},
|
||
|
||
getTimesTamp(date) {
|
||
return new Date(date).getTime()
|
||
|
||
},
|
||
|
||
// 取消按钮
|
||
cancel() {
|
||
this.open = false;
|
||
this.reset();
|
||
},
|
||
cancelTask() {
|
||
this.openTask = false;
|
||
this.reset();
|
||
},
|
||
/** 下载文件 */
|
||
downloadFile(filePath){
|
||
this.$download.resource(filePath)
|
||
|
||
},
|
||
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.wrap {
|
||
padding: 30px;
|
||
}
|
||
|
||
|
||
.grid-content {
|
||
display: flex;
|
||
border-radius: 8px;
|
||
min-height: 36px;
|
||
color: #f5f5f5;
|
||
padding: 12px;
|
||
}
|
||
|
||
.info-left {
|
||
height: 100px;
|
||
width: 100px;
|
||
font-size: 88px;
|
||
text-align: center
|
||
}
|
||
|
||
.info-right {
|
||
margin-left: 15px;
|
||
}
|
||
|
||
.info-right h4 {
|
||
font-size: 18px;
|
||
color: #f5f5f5;
|
||
margin: 12px 0 10px 0;
|
||
}
|
||
|
||
.info-right .conter {
|
||
font-size: 45px;
|
||
color: #ffffff
|
||
}
|
||
|
||
.info-right .conter span {
|
||
font-size: 16px;
|
||
margin-top: 24px;
|
||
color: #f5f5f5
|
||
}
|
||
|
||
.bg01 {
|
||
background-color: #1ab394
|
||
}
|
||
|
||
.bg02 {
|
||
background-color: #409EFF
|
||
}
|
||
|
||
.bg03 {
|
||
background-color: #F56C6C
|
||
}
|
||
|
||
.bg04 {
|
||
background-color: #E6A23C
|
||
}
|
||
|
||
.form-back {
|
||
margin-top: 20px;
|
||
}
|
||
|
||
.table-block {
|
||
border: 1px solid #ebebeb;
|
||
border-bottom: 0;
|
||
border-radius: 6px;
|
||
transition: .2s;
|
||
margin-top: 20px;
|
||
}
|
||
|
||
.demo-block {
|
||
border: 1px solid #ebebeb;
|
||
border-radius: 6px;
|
||
transition: .2s;
|
||
padding-bottom: 8px;
|
||
}
|
||
|
||
.task-block {
|
||
color: #1ab394;
|
||
font-size: 14px;
|
||
margin-top: 20px
|
||
}
|
||
|
||
.footer-bottom {
|
||
margin: 24px 0;
|
||
}
|
||
</style>
|