<template>
|
<view class="my-have-todo">
|
<!-- 搜索区域 -->
|
<view class="searchContainer">
|
|
|
<view class="searchBox">
|
<view class="search">
|
<u-search :clearabled="true" :showAction="false" placeholder="请输入标题" v-model="haveTodoParams.title" shape="square"></u-search>
|
</view>
|
<!-- 状态选择器 -->
|
<!-- <view class="data-selet" @click="statusSeletShow = true">
|
<view class="content">
|
<text>{{ dataSeletText }}</text>
|
</view>
|
<view class="uni-select__icon"><image src="@/static/icon/select.png" mode="加载失败"></image></view>
|
</view> -->
|
<view class="search">
|
<u-search :clearabled="true" :showAction="false" placeholder="请输入任务名称" v-model="haveTodoParams.name" shape="square"></u-search>
|
</view>
|
</view>
|
|
<!-- 时间搜索区域 -->
|
<view class="timeContiner">
|
<uni-datetime-picker class="time-picker" type="date" :clear-icon="true" v-model="haveTodoParams.startDate" @change="startDateChange" placeholder="开始时间" />
|
<uni-datetime-picker class="time-picker" type="date" :clear-icon="true" v-model="haveTodoParams.endDate" @change="endDateChange" placeholder="结束时间" />
|
</view>
|
|
<view class="searchButton">
|
<u-button type="primary" text="搜索" @click="searchButtonClick"></u-button>
|
<u-button type="primary" :plain="true" text="清空" @click="emptyButtonClick"></u-button>
|
</view>
|
</view>
|
<!-- 我的已办卡片区域 -->
|
<u-checkbox-group v-model="checkBoxValue" placement="column" @change="checkboxChange" style="margin-bottom:50px">
|
<combination-card v-for="(item, index) in yibanData" index="index">
|
<template v-slot:top>
|
<u-checkbox size="35" :key="item.id" :name="item.id"></u-checkbox>
|
<view>
|
<text>{{ item.actBusiness.title }}</text>
|
</view>
|
</template>
|
<template v-slot:center>
|
<view class="center-container">
|
<view class="center-content__one center-margin">
|
<view>
|
<text>任务名称：{{ item.name }}</text>
|
</view>
|
<view>
|
<text>所属流程：{{ item.processName }}</text>
|
</view>
|
</view>
|
<view class="center-content__two center-margin">
|
<view>
|
<text>发起人：{{ item.actBusiness.createByName }}</text>
|
</view>
|
<view>
|
<text>审批操作：{{ item.deleteReason }}</text>
|
</view>
|
</view>
|
<view class="center-content__three center-margin">
|
<view class="">
|
<text>审批意见：{{ item.comment }}</text>
|
</view>
|
<view class="">
|
<text>耗时：{{
|
item.duration >= 86400000
|
? parseInt(item.duration / 86400000 + '天' + parseInt(item.duration % 86400000) / 3600000 + '时' + parseInt(item.duration % 3600000) / 60000 + '分')
|
: item.duration >= 3600000
|
? parseInt(item.duration / 3600000) + '时' + parseInt(item.duration / 3600000 % 3600000) + '分'
|
: parseInt(item.duration / 60000) + '分'
|
}}</text>
|
</view>
|
</view>
|
<view class="center-content__four">
|
<text>创建时间：{{ item.createTime }}</text>
|
</view>
|
</view>
|
</template>
|
<template v-slot:bottom>
|
<view class="bottom-container">
|
<!-- 已办按钮 -->
|
<view class="bottom-content__item">
|
<view @click="theFormDataClick(item.tableId)">
|
<image src="@/static/home/biaodan.png" mode=""></image>
|
<view>表单数据</view>
|
</view>
|
<view @click="approvalHistoryClick(item.procInstId)">
|
<image src="@/static/home/history.png" mode=""></image>
|
<view>审批历史</view>
|
</view>
|
<view @click="deleteApplicationClick(item.id)">
|
<image src="@/static/home/delete.png" mode=""></image>
|
<view>删除</view>
|
</view>
|
</view>
|
</view>
|
</template>
|
</combination-card>
|
</u-checkbox-group>
|
|
<!-- 底部全选 -->
|
<view class="bottomTabbar">
|
<view class="bottomTabbar_checkBox">
|
<u-checkbox-group size="35" v-model="totalSelectValue" placement="column" @change="totalSelectChange"><u-checkbox labelSize="13px" label="全选" name="tatalSelect"></u-checkbox></u-checkbox-group>
|
</view>
|
<view class="bottomTabbar_button">
|
<u-button :plain="true" type="primary" text="批量删除" @click="deleteApplicationClickAll()"></u-button>
|
</view>
|
</view>
|
|
<!-- 删除已办申请模态框 -->
|
<view class="deleteApplicationModal">
|
<u-modal
|
:show="deleteApplicationModalShow"
|
title="提示"
|
content="确定删除选择申请？"
|
:showCancelButton="true"
|
@confirm="deleteApplicationModalConfirm"
|
@cancel="deleteApplicationModalCancel"
|
></u-modal>
|
</view>
|
|
<!-- 选择器 -->
|
<!-- <u-picker @cancel="statusSeletShow = false" @confirm="statusConfirm" :show="statusSeletShow" :columns="statusList"></u-picker> -->
|
|
<!-- 菜单栏 -->
|
<popup-menu @menuShow="menushow" ref="menuRef"></popup-menu>
|
</view>
|
</template>
|
|
<script>
|
import popupMenu from '@/components/common/popup-menu/popup-menu.vue';
|
import combinationCard from '@/components/common/combination-card/combination-card.vue';
|
export default {
|
data() {
|
return {
|
// 条件搜索
|
// searchData: '',
|
// dataSeletText: '请选择状态',
|
// 时间选择
|
// createTime: '',
|
// endTime: '',
|
// 复选框
|
checkBoxValue:[],
|
totalSelectValue:[],
|
// 选择器
|
// statusSeletShow: false,
|
// statusList: [['中国', '美国', '日本']],
|
yibanData: [],
|
// 删除申请
|
deleteIds:'',
|
deleteApplicationModalShow:false,
|
haveTodoParams:{
|
name: '',
|
pageNumber: 1,
|
pageSize: 10,
|
sort: 'createTime',
|
order: 'desc',
|
title: '',
|
startDate: '',
|
endDate: ''
|
}
|
};
|
},
|
onShow(){
|
if(this.menuShow == true){
|
this.$refs.menuRef.menuClick()
|
}
|
this.init();
|
},
|
// 点击导航栏菜单后
|
onNavigationBarButtonTap(e) {
|
// console.log(e);
|
this.$refs.menuRef.menuClick()
|
},
|
components: {
|
combinationCard,
|
popupMenu
|
},
|
methods: {
|
init(){
|
this.doneList();
|
},
|
// 已办
|
doneList() {
|
uni.showLoading({
|
title:'加载中...'
|
})
|
this.$reqGet('doneList', this.haveTodoParams).then(res => {
|
uni.hideLoading();
|
if (res.code === 0) {
|
// console.log('已办', res);
|
this.yibanData = res.data.content;
|
}
|
});
|
},
|
// 搜索
|
searchButtonClick(){
|
this.init();
|
},
|
// 清空
|
emptyButtonClick(){
|
this.haveTodoParams.name = '';
|
this.haveTodoParams.title = '';
|
this.haveTodoParams.startDate = '';
|
this.haveTodoParams.endDate = '';
|
this.init();
|
},
|
menushow(e){
|
this.menuShow = e
|
},
|
deleteApplicationClick(id){
|
this.deleteIds = id;
|
this.deleteApplicationModalShow = true;
|
},
|
deleteApplicationClickAll(){
|
if(this.checkBoxValue.length > 0){
|
this.deleteIds = this.checkBoxValue.toString(',');
|
this.deleteApplicationModalShow = true;
|
} else{
|
this.$u.toast('未选中申请')
|
}
|
},
|
// 删除申请模态框
|
deleteApplicationModalConfirm() {
|
this.deleteApplicationModalShow = false;
|
this.$reqPost('deleteHistoric',{ids:this.deleteIds},'form').then(res=>{
|
if(res.code == 0){
|
this.$nextTick(()=>{
|
this.$u.toast('操作成功！')
|
})
|
this.yibanData = [];
|
this.init();
|
} else {
|
this.$u.toast('操作失败！！！')
|
}
|
})
|
},
|
deleteApplicationModalCancel() {
|
this.deleteApplicationModalShow = false;
|
},
|
// 时间选择器
|
startDateChange() {
|
// this.queryRealTimeShippingData.startDate = '';
|
// this.$nextTick(() => {
|
// console.log(this.queryRealTimeShippingData);
|
// this.realTimeShipping();
|
// });
|
},
|
endDateChange() {
|
// this.queryRealTimeShippingData.endDate = '';
|
// this.$nextTick(() => {
|
// console.log(this.queryRealTimeShippingData);
|
// this.realTimeShipping();
|
// });
|
},
|
// 复选框
|
checkboxChange(n){
|
console.log(n);
|
},
|
totalSelectChange(n){
|
if(n[0] == 'tatalSelect'){
|
this.yibanData.forEach(item=>{
|
this.totalSelectValue.push(item.id)
|
})
|
this.checkBoxValue = this.totalSelectValue
|
}else{
|
this.checkBoxValue = []
|
}
|
},
|
// 状态
|
// statusConfirm(a){
|
// this.statusSeletShow = false
|
// console.log(a)
|
// },
|
// 表单数据
|
theFormDataClick(v) {
|
uni.navigateTo({
|
url: `/pages/the-form-data/the-form-data?index=${v}`
|
});
|
},
|
// 审批历史
|
approvalHistoryClick(v) {
|
uni.navigateTo({
|
url: `/pages/approval-history/approval-history?index=${v}`
|
});
|
}
|
}
|
};
|
</script>
|
|
<style lang="scss" scoped>
|
::v-deep.my-have-todo {
|
// 搜索区域
|
.searchContainer{
|
|
.searchButton{
|
width: 91%;
|
margin: vww(16) auto;
|
display: flex;
|
.u-button{
|
width:30%;
|
}
|
}
|
|
.searchBox {
|
width: 91%;
|
display: flex;
|
justify-content: space-between;
|
margin: vww(16) auto;
|
.search {
|
width: vww(160);
|
border: 1px solid #d1d1d1;
|
border-radius: vww(4);
|
.u-search {
|
.u-search__content {
|
height: 40px;
|
background-color: #ffffff !important;
|
.u-search__content__icon {
|
width: 10px;
|
height: 5.5px;
|
}
|
.u-search__content__input {
|
background-color: #ffffff !important;
|
.uni-input-placeholder{
|
color:#CCCCCC!important;
|
}
|
}
|
}
|
}
|
}
|
// 下拉菜单
|
.data-selet {
|
border: 1px solid #d1d1d1;
|
border-radius: 4px;
|
width: vww(160);
|
// width: 100%;
|
height: 40px;
|
display: flex;
|
align-items: center;
|
font-size: 13px;
|
color: #CCCCCC;
|
.uni-select__icon {
|
display: flex;
|
align-content: center;
|
margin: 0 10px;
|
image {
|
width: 10px;
|
height: 5.5px;
|
}
|
}
|
.content {
|
margin-left: vww(8);
|
width: vww(150);
|
}
|
}
|
}
|
|
// 时间搜索
|
.timeContiner {
|
width: 91%;
|
margin: 0 auto vww(16);
|
display: flex;
|
flex-direction: row;
|
justify-content: space-between;
|
.uni-date {
|
width: vww(160);
|
.uni-date-editor {
|
.uni-date-editor--x {
|
.uni-date-x {
|
.uni-date__x-input {
|
.uni-input-wrapper{
|
.uni-input-placeholder{
|
color:#CCCCCC;
|
font-size: vww(13);
|
}
|
}
|
}
|
}
|
}
|
.uni-date-x--border{
|
border: 1px solid #d1d1d1!important;
|
}
|
}
|
}
|
}
|
|
}
|
|
|
|
|
// 卡片中间
|
.center-container {
|
display: flex;
|
flex-direction: column;
|
.center-content__one {
|
display: flex;
|
view {
|
width: 50%;
|
}
|
}
|
.center-content__two {
|
display: flex;
|
// margin: vww(10) 0;
|
view {
|
width: 50%;
|
}
|
}
|
.center-content__three {
|
display: flex;
|
view {
|
width: 50%;
|
}
|
}
|
.center-content__four {
|
}
|
}
|
// 中间部分样式
|
.center-margin {
|
margin-bottom: vww(16);
|
}
|
|
// 卡片底部
|
.bottom-container {
|
.bottom-content__item {
|
display: flex;
|
justify-content: space-around;
|
view {
|
display: flex;
|
justify-content: center;
|
align-content: center;
|
margin-right: vww(10);
|
&:nth-last-child() {
|
margin-right: 0;
|
}
|
view {
|
display: inline-block;
|
}
|
image {
|
width: vww(16);
|
height: vww(16);
|
margin-right: vww(4);
|
}
|
}
|
}
|
}
|
|
// 底部
|
.bottomTabbar{
|
position:fixed;
|
bottom:0;
|
width:100%;
|
height:vww(48);
|
display:flex;
|
align-items: center;
|
justify-content: space-between;
|
background-color:#F5F5F5;
|
.bottomTabbar_checkBox{
|
margin-left:vww(16);
|
.u-checkbox-group{
|
.u-checkbox{
|
}
|
}
|
}
|
.bottomTabbar_button{
|
display:flex;
|
.u-button{
|
font-size:13px;
|
margin-right:vww(14);
|
width:vww(90);
|
height:vww(32);
|
}
|
}
|
}
|
}
|
</style>
|
