java_project
/
hy-vue
4
0
Fork 0
Code Issues Pull Requests Activity
Browse Source

申请列表页添加分页查询

dev
long 2 years ago
parent
46dd4fcb9c
commit
17502d1ac4
1 changed files with 157 additions and 210 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 367
      src/views/activiti/applyList.vue

367
src/views/activiti/applyList.vue
Unescape View File

@ -4,6 +4,7 @@
<div class="table-page-search-wrapper">
<a-form layout="inline" @keyup.enter.native="searchQuery">
<a-row :gutter="24">
<a-col :md="6" :sm="8">
<a-form-item label="标题">
<a-input placeholder="请输入搜索关键词" v-model="queryParam.title"></a-input>
@ -41,83 +42,42 @@
/>
</a-form-item>
</a-col>
<span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
<a-col :md="6" :sm="12" >
<a-col :md="6" :sm="24" >
<a-button type="primary" style="left: 10px" @click="searchQuery" icon="search">查询</a-button>
<a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px;left: 10px">重置</a-button>
</a-col>
</span>
<!-- <span style="float: right;overflow: hidden;" class="table-page-search-submitButtons">
<a-col :md="12" :sm="12" >
<a-button type="primary" @click="addApply" :loading="addApplyLoading" style="left: 10px" icon="plus-circle">发起申请</a-button>
</a-col>
</span>-->
</a-row>
</a-form>
</div>
<!-- table区域-begin -->
<a-table :scroll="scroll" bordered
<a-table
bordered
ref="table"
size="middle"
rowKey="id"
:columns="columns"
:dataSource="dataSource"
:pagination="ipagination"
:loading="loading"
:scroll="{x: false, y: 470 }"
@change="handleTableChange">
<a-table-column title="#" :width="50">
<template slot-scope="t,r,i" >
<span> {{i+1}} </span>
</template>
</a-table-column>
<a-table-column title="标题" dataIndex="title" :width="150" align="center">
<template slot-scope="t,r,i">
<span> {{t}} </span>
</template>
</a-table-column>
<a-table-column title="所属流程" dataIndex="processName" :width="150" align="center">
<template slot-scope="t,r,i">
<span> {{t}} </span>
</template>
</a-table-column>
<a-table-column title="当前审批环节" dataIndex="currTaskName" :width="150" align="center">
<template slot-scope="t,r,i">
<span> {{t}} </span>
</template>
</a-table-column>
<a-table-column title="状态" dataIndex="status" :width="150" align="center"
key="s" :sorter="(a,b)=>a.status - b.status"
>
<template slot-scope="t,r,i">
<span :style="{color:getStatus(t).color}"> {{getStatus(t).text}} </span>
</template>
</a-table-column>
<a-table-column title="结果" dataIndex="result" :width="150" align="center"
key="result" :sorter="(a,b)=>a.result - b.result"
>
<template slot-scope="t,r,i">
<span :style="{color:getResult(t).color}"> {{getResult(t).text}} </span>
</template>
</a-table-column>
<a-table-column title="创建时间" dataIndex="createTime" :width="150" align="center">
<template slot-scope="t,r,i">
<span> {{t}} </span>
</template>
</a-table-column>
<a-table-column title="提交申请时间" dataIndex="applyTime" :width="150" align="center">
<template slot-scope="t,r,i">
<span> {{t}} </span>
</template>
</a-table-column><!--
<a-table-column title="流程实例状态" dataIndex="procInstStatus" :width="150" align="center">
<template slot-scope="t,r,i">
<span> {{t}} </span>
</template>
</a-table-column>-->
<a-table-column title="操作" dataIndex="" align="center">
<template slot-scope="t,r,i">
<span slot="result" slot-scope="text, r">
<span v-if="r.result == 0" style="color: whitesmoke">未提交</span>
<span v-else-if="r.result==1" style="color: orange">处理中</span>
<span v-else-if="r.result==2" style="color: green">已通过</span>
<span v-else-if="r.result==3" style="color: red">已驳回</span>
</span>
<span slot="status" slot-scope="text, r">
<span v-if="r.status == 0" style="color: whitesmoke">草稿</span>
<span v-else-if="r.result==1" style="color: orange">处理中</span>
<span v-else-if="r.status==2" style="color: blue">已结束</span>
<span v-else-if="r.status==3" style="color: magenta">已撤回</span>
</span>
<span slot="action" slot-scope="text, r">
<template v-if="r.status == 0">
<a href="javascript:void(0);" style="color: #00A0E9" @click="apply(r)" >提交申请</a>
<a-divider type="vertical" />
@ -150,9 +110,11 @@
<a-divider type="vertical" />
<a href="javascript:void(0);" @click="history(r)" style="color:blue;">审批历史</a>
</template>
</template>
</a-table-column>
</span>
<!-- 字符串超长截取省略号显示-->
<span slot="logContent" slot-scope="text, record">
<j-ellipsis :value="text" :length="40"/>
</span>
</a-table>
<!-- table区域-end -->
<!--流程申请选择-->
@ -199,19 +161,19 @@
<!--提交申请表单-->
<a-modal title="提交申请" v-model="modalVisible" :mask-closable="false" :width="500" :footer="null">
<div v-if="modalVisible">
<!-- <a-form-item label="选择审批人" v-show="showAssign">
<a-select style="width: 100%"
v-model="form.assignees"
placeholder="请选择"
mode="multiple"
:allowClear="true"
>
<a-select-option v-for="(item, i) in assigneeList" :key="i" :value="item.username">{{item.realname}}</a-select-option>
</a-select>
</a-form-item>
<a-form-item label="下一审批人" v-show="isGateway">
<a-alert type="info" showIcon message="分支网关处不支持自定义选择下一审批人，将自动下发给所有可审批人。">，将发送给下一节点所有人</a-alert>
</a-form-item>-->
<!-- <a-form-item label="选择审批人" v-show="showAssign">
<a-select style="width: 100%"
v-model="form.assignees"
placeholder="请选择"
mode="multiple"
:allowClear="true"
>
<a-select-option v-for="(item, i) in assigneeList" :key="i" :value="item.username">{{item.realname}}</a-select-option>
</a-select>
</a-form-item>
<a-form-item label="下一审批人" v-show="isGateway">
<a-alert type="info" showIcon message="分支网关处不支持自定义选择下一审批人，将自动下发给所有可审批人。">，将发送给下一节点所有人</a-alert>
</a-form-item>-->
<a-form-item label="优先级" prop="priority">
<a-select v-model="form.priority" placeholder="请选择" :allowClear="true" style="width: 100%">
<a-select-option :value="0">普通</a-select-option>
@ -221,8 +183,8 @@
</a-form-item>
<a-form-item label="消息通知" v-show="false">
<a-checkbox v-model="form.sendMessage">站内消息通知</a-checkbox>
<!-- <a-checkbox v-model="form.sendSms" disabled>短信通知</a-checkbox>
<a-checkbox v-model="form.sendEmail" disabled>邮件通知</a-checkbox>-->
<!-- <a-checkbox v-model="form.sendSms" disabled>短信通知</a-checkbox>
<a-checkbox v-model="form.sendEmail" disabled>邮件通知</a-checkbox>-->
</a-form-item>
<div slot="footer">
<a-button type="text" @click="modalVisible=false">取消</a-button>
@ -248,7 +210,6 @@
</div>
</a-modal>
</a-card>
</template>
<script>
@ -272,28 +233,108 @@
data () {
return {
description: '我的申请',
dictOptions:[],
url: {
list: "/actBusiness/listData",
getProcessDataList: "/activiti_process/listData",
delByIds:'/actBusiness/delByIds',
getFirstNode:'/actProcessIns/getFirstNode',
applyBusiness:'/actBusiness/apply',
cancelApply:'/actBusiness/cancel',
},
// 查询条件
queryParam: {
ipInfo:'',
createTimeRange:[],
logType:'1',
keyWord:'',
},
tabKey: "1",
// 表头
columns: [
{
title: '#',
dataIndex: '',
key:'rowIndex',
align:"center",
customRender:function (t,r,index) {
return parseInt(index)+1;
}
},
{
title: '标题',
align:"left",
dataIndex: 'title',
scopedSlots: { customRender: 'logContent' },
sorter: true
},
{
title: '所属流程',
dataIndex: 'processName',
align:"center",
sorter: true
},
{
title: '当前环节',
dataIndex: 'currTaskName',
align:"center",
sorter: true
},
{
title: '状态',
dataIndex: 'status_dictText',
align:"center",
scopedSlots: {customRender: 'status'},
sorter: true
},
{
title: '结果',
dataIndex: 'result_dictText',
scopedSlots: {customRender: 'result'},
align:"center",
sorter: true
},
{
title: '创建时间',
dataIndex: 'createTime',
align:"center",
sorter: true
},
{
title: '提交申请时间',
dataIndex: 'applyTime',
/*customRender:function (text) {
if(text==1){
return "登录日志";
}else if(text==2){
return "操作日志";
}else{
return text;
}
},*/
align:"center",
},
{
title: '操作',
dataIndex: 'action',
align: "center",
scopedSlots: {customRender: 'action'},
}
],
operateColumn:
{
title: '操作类型',
dataIndex: 'operateType_dictText',
align:"center",
},
labelCol: {
xs: { span: 4 },
sm: { span: 4 },
xs: { span: 1 },
sm: { span: 2 },
},
wrapperCol: {
xs: { span: 20 },
sm: { span: 20 },
xs: { span: 10 },
sm: { span: 16 },
},
url: {
list: "/actBusiness/listData",
getProcessDataList: "/activiti_process/listData",
delByIds:'/actBusiness/delByIds',
getFirstNode:'/actProcessIns/getFirstNode',
applyBusiness:'/actBusiness/apply',
cancelApply:'/actBusiness/cancel',
},
processModalVisible: null,
activeKeyAll: [],
@ -329,10 +370,7 @@
cancelForm: {}
}
},
computed:{
},
methods: {
initDictConfig() {
//初始化字典 - 流程分类
initDictOptions('bpm_process_type').then((res) => {
@ -341,66 +379,16 @@
}
});
},
filterDictText(dictOptions, text) {
if (dictOptions instanceof Array) {
for (let dictItem of dictOptions) {
if (text === dictItem.value) {
return dictItem.text
}
}
}
return text||text=='null'?'':text
},
getProcessList() {
this.addApplyLoading = true;
this.getAction(this.url.getProcessDataList,{status:1,roles:true}).then(res => {
this.activeKeyAll = [];
if (res.success) {
var result = res.result||[];
if (result.length>0){
let searchProcessKey = this.searchProcessKey;
if (searchProcessKey){ //过滤条件
result = _.filter(result, function(o) { return o.name.indexOf(searchProcessKey)>-1; });
}
this.processDataMap = _.groupBy(result,'categoryId');
for (const categoryId in this.processDataMap) {
this.activeKeyAll.push(categoryId)
}
this.activeKey = this.activeKeyAll;
}
this.processModalVisible = true;
}else {
this.$message.warning(res.message)
}
}).finally(()=>this.addApplyLoading = false);
},
loadData(arg) {
console.log("loadData")
if(!this.url.list){
this.$message.error("请设置url.list属性!")
return
}
//加载数据 若传入参数1则加载第一页的内容
if (arg === 1) {
this.ipagination.current = 1;
}
var params = this.getQueryParams();//查询条件
this.loading = true;
getAction(this.url.list, params).then((res) => {
if (res.success) {
let records = res.result||[];
this.dataSource = records;
this.ipagination.total = records.length;
}
if(res.code===510){
this.$message.warning(res.message)
}
this.loading = false;
})
},
getQueryParams(){
var param = Object.assign({}, this.queryParam,this.isorter);
param.field = this.getQueryField();
param.pageNo = this.ipagination.current;
param.pageSize = this.ipagination.pageSize;
delete param.createTimeRange; // 时间参数不传递后台
if (this.superQueryParams) {
param['superQueryParams'] = encodeURI(this.superQueryParams)
param['superQueryMatchType'] = this.superQueryMatchType
}
return filterObj(param);
},
@ -412,6 +400,23 @@
that.queryParam.logType = logType;
that.loadData(this.ipagination.current);
},
// 日志类型
callback(key){
// 动态添加操作类型列
if (key == 2) {
this.tabKey = '2';
this.columns.splice(7, 0, this.operateColumn);
}else if(this.columns.length == 9)
{
this.tabKey = '1';
this.columns.splice(7,1);
}
let that=this;
that.queryParam.logType=key;
that.loadData();
},
onDateChange: function (value, dateString) {
console.log(dateString[0],dateString[1]);
this.queryParam.createTime_begin=dateString[0];
@ -420,42 +425,6 @@
onDateOk(value) {
console.log(value);
},
getStatus(status) {
let text = "未知", color = "";
if (status == 0) {
text = "草稿";
color = "default";
} else if (status == 1) {
text = "处理中";
color = "orange";
} else if (status == 2) {
text = "已结束";
color = "blue";
} else if (status == 3) {
text = "已撤回";
color = "magenta";
}
return {text:text,color:color}
},
getResult(result) {
let text = "未知",
color = "";
if (result == 0) {
text = "未提交";
color = "default";
} else if (result == 1) {
text = "处理中";
color = "orange";
} else if (result == 2) {
text = "已通过";
color = "green";
} else if (result == 3) {
text = "已驳回";
color = "red";
}
return {text:text,color:color}
},
apply(v) {
if (!v.procDefId || v.procDefId == "null") {
this.$message.error("流程定义为空");
@ -594,23 +563,6 @@
detail(v) {
this.edit(v,true);
},
handleTableChange(pagination, filters, sorter) {
//分页、排序、筛选变化时触发
//TODO 筛选
if (Object.keys(sorter).length > 0) {
this.isorter.column = sorter.field;
this.isorter.order = "ascend" == sorter.order ? "asc" : "desc"
}
this.ipagination = pagination;
// this.loadData();
},
addApply() {
this.getProcessList()
},
onSearchProcess(value) {
this.searchProcessKey = value;
this.getProcessList()
},
chooseProcess(v) {
if (!v.routeName) {
this.$message.warning(
@ -625,14 +577,9 @@
this.lcModa.visible = true;
console.log("发起",v)
},
afterSub(formData){
this.lcModa.visible = false;
this.loadData();
},
}
}
</script>
<style scoped>
@import '~@assets/less/common.less';
@import '~@assets/less/common.less'
</style>
Write Preview
Loading…
Cancel
Save