448 lines
14 KiB
Plaintext
448 lines
14 KiB
Plaintext
<#assign base=request.contextPath />
|
|
<#import "../../common/defaultLayout.ftl" as defaultLayout>
|
|
<@defaultLayout.layout>
|
|
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
|
|
<style>
|
|
|
|
.el-upload__input {
|
|
display: none !important;
|
|
}
|
|
|
|
.el-textarea .el-input__count {
|
|
line-height: 15px;
|
|
}
|
|
|
|
.admin-content-body {
|
|
margin-bottom: 100px;
|
|
}
|
|
|
|
.el-table__empty-block {
|
|
height: 60px !important;
|
|
}
|
|
|
|
.el-radio-button__inner, .el-radio-group {
|
|
line-height: unset;
|
|
}
|
|
</style>
|
|
|
|
<div class="admin-content" id="app">
|
|
<div class="admin-content-body">
|
|
<div class="am-cf am-padding">
|
|
<div class="am-fl am-cf"><strong class="am-text-primary am-text-lg">业务应用</strong> /
|
|
<small>已办流程</small></div>
|
|
</div>
|
|
|
|
<div class="am-g">
|
|
<div class="am-u-sm-12 am-u-md-12">
|
|
<el-form :inline="true" ref="queryForm" :model="queryForm" label-position="right">
|
|
|
|
<div>
|
|
<el-form-item label="标题">
|
|
<el-input placeholder="请输入标题" v-model="queryForm.projectTitle" clearable></el-input>
|
|
</el-form-item>
|
|
|
|
<el-form-item label="项目编号">
|
|
<el-input placeholder="请输入项目编号" v-model="queryForm.projectNo" clearable></el-input>
|
|
</el-form-item>
|
|
|
|
<el-form-item label="合同编号">
|
|
<el-input placeholder="请输入合同编号" v-model="queryForm.contractNo" clearable></el-input>
|
|
</el-form-item>
|
|
|
|
<el-form-item label="流程类型">
|
|
<el-select v-model="queryForm.processType" placeholder="请选择" clearable>
|
|
<el-option label="全部" :value="null"></el-option>
|
|
<#list processTypes as processType>
|
|
<el-option label="${processType.description}"
|
|
value="${processType.name()}"></el-option>
|
|
</#list>
|
|
</el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
|
|
<el-form-item label="申请人">
|
|
<el-input placeholder="请输入申请人" v-model="queryForm.applyPersonName" clearable></el-input>
|
|
</el-form-item>
|
|
|
|
<el-form-item label="审核状态">
|
|
<el-select v-model="queryForm.processStatus" placeholder="请选择" clearable>
|
|
<el-option label="全部" :value="null"></el-option>
|
|
<#list processStatus as item>
|
|
<el-option label="${item.description}"
|
|
value="${item.name()}"></el-option>
|
|
</#list>
|
|
</el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
|
|
<el-button type="primary" @click="queryTable">查询</el-button>
|
|
</div>
|
|
|
|
</el-form>
|
|
|
|
<el-table border :data="page.data">
|
|
<el-table-column type="index" :index="1" label="序号" fixed></el-table-column>
|
|
<el-table-column prop="projectNo" label="项目编号" fixed width="80"></el-table-column>
|
|
<el-table-column prop="projectTitle" label="标题" width="350"></el-table-column>
|
|
<el-table-column prop="contractNo" label="合同编号" width="80"></el-table-column>
|
|
<el-table-column prop="processType" label="流程类型" width="100">
|
|
<template slot-scope="scope">
|
|
<span>{{scope.row.processType | processType}}</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="applyPersonName" label="申请人"></el-table-column>
|
|
<el-table-column prop="status" label="审核状态" width="100">
|
|
<template slot-scope="scope">
|
|
<span>{{scope.row.status | processStatus}}</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="amount" label="当前审核人" width="100"></el-table-column>
|
|
<el-table-column prop="lastUpdateAt" label="最后更新时间" width="170"></el-table-column>
|
|
|
|
<el-table-column label="操作" fixed="right" width="230">
|
|
<template slot-scope="scope">
|
|
<el-button
|
|
v-if="scope.row.status==='audit_passed' || scope.row.status==='audit_not_passed' || scope.row.status==='to_be_audit'"
|
|
type="text" @click="showDetail(scope.row, scope)">查看详情
|
|
</el-button>
|
|
<el-button v-if="scope.row.status==='audit_passed' || scope.row.status==='audit_not_passed'"
|
|
type="text" @click="showAuditDetail(scope.row, scope)">查看审核流程
|
|
</el-button>
|
|
<el-button v-if="scope.row.status==='draft' || scope.row.status==='audit_not_passed'"
|
|
type="text" @click="editProcess(scope.row, scope)">编辑
|
|
</el-button>
|
|
<el-button v-if="scope.row.status==='to_be_audit'" type="text" @click="revokeProcess(scope.row, scope)">撤回</el-button>
|
|
<el-button v-if="scope.row.status==='draft'" type="text" @click="deleteProcess(scope.row, scope)">删除</el-button>
|
|
</template>
|
|
</el-table-column>
|
|
|
|
</el-table>
|
|
|
|
<el-pagination style="text-align: center; margin-top: 10px"
|
|
:page-size="page.size"
|
|
:current-page="page.current"
|
|
@current-change="handlePageChange"
|
|
layout="prev, pager, next" :total="page.total"></el-pagination>
|
|
</div>
|
|
</div>
|
|
|
|
<el-dialog title="审核详情" :visible.sync="auditDetailVisible">
|
|
<el-timeline>
|
|
<el-timeline-item
|
|
v-for="(item, index) in auditDetails"
|
|
:key="index"
|
|
:color="item.color||'red'"
|
|
:size="item.size||'normal'"
|
|
:timestamp="item.timestamp">
|
|
{{item.content}}
|
|
</el-timeline-item>
|
|
</el-timeline>
|
|
|
|
</el-dialog>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<script src="https://unpkg.com/vue@2/dist/vue.js"></script>
|
|
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
|
|
|
|
<script>
|
|
|
|
const isEmpty = (obj) => {
|
|
return !obj || (obj.length && obj.length === 0)
|
|
}
|
|
|
|
const isNotEmpty = (obj) => {
|
|
return !isEmpty(obj)
|
|
}
|
|
|
|
const isBlank = (obj) => {
|
|
return isEmpty(obj) || (obj.trim && isEmpty(obj.trim()))
|
|
}
|
|
|
|
const hasText = (obj) => {
|
|
return !isBlank(obj)
|
|
}
|
|
|
|
const data = () => {
|
|
return {
|
|
auditForm: {
|
|
processStatus: null
|
|
},
|
|
auditDetailVisible: false,
|
|
auditDetails: [],
|
|
page: {
|
|
data: [],
|
|
total: 0,
|
|
size: 10,
|
|
current: 1,
|
|
},
|
|
queryForm: {},
|
|
}
|
|
}
|
|
|
|
const methods = {
|
|
showDetail(row, scope) {
|
|
console.log(row)
|
|
console.log(scope)
|
|
|
|
},
|
|
editProcess(row, scope) {
|
|
|
|
},
|
|
deleteProcess(row, scope) {
|
|
this.$confirm('您确认要删除审批流程吗?', '删除', {
|
|
confirmButtonText: '确定',
|
|
cancelButtonText: '取消',
|
|
type: 'warning'
|
|
}).then(() => {
|
|
const loading = this.$loading({
|
|
lock: true,
|
|
text: '正在删除',
|
|
spinner: 'el-icon-loading',
|
|
background: 'rgba(0, 0, 0, 0.7)'
|
|
})
|
|
|
|
fetch("${base}/process/" + row.id, {
|
|
method: 'DELETE', // or 'PUT'
|
|
}).then(response => {
|
|
if (response.ok) {
|
|
this.queryTable()
|
|
this.$message({
|
|
showClose: true,
|
|
message: '删除成功',
|
|
type: 'success'
|
|
})
|
|
}
|
|
else {
|
|
return Promise.reject(response)
|
|
}
|
|
}).catch(res => {
|
|
res.json().then(json => {
|
|
this.$message.error(json.message || "删除失败");
|
|
})
|
|
}).finally(() => loading.close())
|
|
}).catch(() => {
|
|
this.$message({
|
|
type: 'info',
|
|
message: '已取消删除'
|
|
});
|
|
});
|
|
},
|
|
revokeProcess(row, scope) {
|
|
this.$confirm('您确认要撤回审批流程吗?', '撤回', {
|
|
confirmButtonText: '确定',
|
|
cancelButtonText: '取消',
|
|
type: 'warning'
|
|
}).then(() => {
|
|
const loading = this.$loading({
|
|
lock: true,
|
|
text: '正在撤销',
|
|
spinner: 'el-icon-loading',
|
|
background: 'rgba(0, 0, 0, 0.7)'
|
|
})
|
|
|
|
fetch("${base}/process/revoke/" + row.id, {
|
|
method: 'POST', // or 'PUT'
|
|
}).then(response => {
|
|
if (response.ok) {
|
|
this.queryTable()
|
|
this.$message({
|
|
showClose: true,
|
|
message: '撤销成功',
|
|
type: 'success'
|
|
})
|
|
}
|
|
else {
|
|
return Promise.reject(response)
|
|
}
|
|
}).catch(err => {
|
|
this.$message.error("撤销失败");
|
|
}).finally(() => loading.close())
|
|
}).catch(() => {
|
|
this.$message({
|
|
type: 'info',
|
|
message: '已取消'
|
|
});
|
|
});
|
|
},
|
|
showAuditDetail(row, scope) {
|
|
const loading = this.$loading({
|
|
lock: true,
|
|
text: '正在查询数据',
|
|
spinner: 'el-icon-loading',
|
|
background: 'rgba(0, 0, 0, 0.7)'
|
|
})
|
|
|
|
fetch("${base}/process/audits/" + row.id).then(response => {
|
|
if (response.ok) {
|
|
// 展示弹窗
|
|
response.json().then(json => {
|
|
this.auditDetailVisible = true
|
|
this.auditDetails = json
|
|
})
|
|
}
|
|
else {
|
|
return Promise.reject(response)
|
|
}
|
|
}).catch(res => {
|
|
res.json().then(json => {
|
|
this.$message.error(json.message || "数据获取失败");
|
|
})
|
|
}).finally(() => loading.close())
|
|
|
|
},
|
|
|
|
submitAudit() {
|
|
this.$refs["auditForm"].validate((valid) => {
|
|
if (valid) {
|
|
const loading = this.$loading({
|
|
lock: true,
|
|
text: '正在审核',
|
|
spinner: 'el-icon-loading',
|
|
background: 'rgba(0, 0, 0, 0.7)'
|
|
})
|
|
|
|
const form = this.auditForm
|
|
|
|
fetch("${base}/process/audit", {
|
|
method: 'POST', // or 'PUT'
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
},
|
|
body: JSON.stringify(form),
|
|
}).then(response => {
|
|
this.$message({
|
|
showClose: true,
|
|
message: '审核成功',
|
|
type: 'success'
|
|
})
|
|
// 关闭对话框
|
|
this.auditFormVisible = false
|
|
}).catch(err => {
|
|
this.$message.error("审核失败");
|
|
}).finally(() => loading.close())
|
|
}
|
|
else {
|
|
return false;
|
|
}
|
|
})
|
|
|
|
},
|
|
|
|
render(obj) {
|
|
console.log(obj)
|
|
},
|
|
|
|
queryTable() {
|
|
const form = {
|
|
...this.queryForm,
|
|
}
|
|
const loading = this.$loading({
|
|
lock: true,
|
|
text: '正在查询',
|
|
spinner: 'el-icon-loading',
|
|
background: 'rgba(0, 0, 0, 0.7)'
|
|
})
|
|
|
|
const { size, current } = this.page
|
|
fetch("${base}/process/query?size=" + size + "&page=" + current, {
|
|
method: 'POST', // or 'PUT'
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
},
|
|
body: JSON.stringify(form),
|
|
}).then(res => res.json())
|
|
.then(data => {
|
|
this.page = {
|
|
data: data.content,
|
|
size: data.size,
|
|
current: data.number + 1,
|
|
total: data.totalElements
|
|
}
|
|
})
|
|
.catch(err => {
|
|
this.$message.error('查询失败');
|
|
})
|
|
.finally(() => loading.close())
|
|
},
|
|
|
|
handlePageChange(val) {
|
|
this.page.current = val
|
|
this.queryTable()
|
|
},
|
|
|
|
}
|
|
|
|
new Vue({
|
|
el: '#app',
|
|
data,
|
|
computed: {
|
|
projectTitle() {
|
|
const { projectNo, projectName, applyPersonName, applyDate } = this.processForm
|
|
if (projectNo && projectName) {
|
|
return projectNo.trim() + "-" + projectName.trim() + "-" + applyPersonName + "-" + applyDate
|
|
}
|
|
return ""
|
|
},
|
|
isButtonMode() {
|
|
return this.mode === BUTTON
|
|
},
|
|
isBusinessProcurementContractProcessMode() {
|
|
return this.mode === newBusinessProcurementContractProcess
|
|
},
|
|
isSalesContractProcessMode() {
|
|
return this.mode === saleContractProcess
|
|
},
|
|
isSaleContractDetailMode() {
|
|
return this.mode === saleContractDetail
|
|
},
|
|
subTitle() {
|
|
switch (this.mode) {
|
|
case BUTTON:
|
|
return "新增流程"
|
|
case saleContractProcess:
|
|
return "新增销售合同流程"
|
|
case saleContractDetail:
|
|
return "销售合同清单明细"
|
|
case newBusinessProcurementContractProcess:
|
|
return "新增业务采购合同流程"
|
|
}
|
|
}
|
|
},
|
|
|
|
methods,
|
|
|
|
mounted() {
|
|
this.queryTable()
|
|
},
|
|
filters: {
|
|
processStatus: function (val) {
|
|
switch (val) {
|
|
case 'draft':
|
|
return "草稿"
|
|
case 'to_be_audit':
|
|
return "待审核"
|
|
case 'audit_passed':
|
|
return "审核通过"
|
|
case 'audit_not_passed':
|
|
return "审核不通过"
|
|
}
|
|
},
|
|
processType: function (value) {
|
|
switch (value) {
|
|
case 'sale_contract':
|
|
return "销售合同流程"
|
|
case 'business_procurement':
|
|
return "业务采购流程"
|
|
}
|
|
}
|
|
}
|
|
})
|
|
|
|
</script>
|
|
|
|
</@defaultLayout.layout>
|
|
|