mula
/
fourcal
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

流程详情展示

master
Harry Yang 2022-12-23 15:23:27 +08:00
parent 4795b8ec5c
commit ca642eb56e
1 changed files with 150 additions and 527 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

677
src/main/resources/templates/admin/business/process-detail.ftl
View File

@ -1,22 +1,9 @@
<#assign base=request.contextPath />
<#import "../../common/defaultLayout.ftl" as defaultLayout>
<@defaultLayout.layout>
<#-- <link rel="stylesheet" href="../assets/css/amazeui.switch.css"/>-->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<style>
#businessPurchaseDetailsModal {
overflow: auto;
}
#businessPurchaseDetailsModal > table {
}
#newBusinessProcurementContractProcess {
overflow: auto;
}
.el-upload__input {
display: none !important;
}
@ -36,145 +23,196 @@
.el-upload-list__item-name [class^="el-icon"] {
height: unset;
}
.el-tag--small {
margin-right: 5px;
}
</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>
<small>${process.processType.description}详情</small>
</div>
</div>
<#-- 新增销售合同流程 -->
<div class="am-u-sm-12 am-u-md-12">
<el-form :inline="true" ref="saleContractProcessForm" :model="processForm" label-position="right" label-width="100px">
<div class="am-form-inline">
<el-descriptions title="${process.processType.description}详情">
<el-descriptions-item label="项目编号">${process.projectNo}</el-descriptions-item>
<el-descriptions-item label="项目标题">${process.projectTitle}</el-descriptions-item>
<el-descriptions-item label="申请时间">${process.applyDate}</el-descriptions-item>
<el-descriptions-item label="项目类型">${projectType}</el-descriptions-item>
<el-descriptions-item label="合作类型">${cooperationType}</el-descriptions-item>
<el-form-item label="项目标题">
<span>${process.projectNo}</span>
</el-form-item>
<el-descriptions-item label="申请部门">${process.applyDept}</el-descriptions-item>
<el-descriptions-item label="申请人">${process.applyPersonName}</el-descriptions-item>
<el-descriptions-item label="申请部门领导">${process.applyDeptLeaderName}</el-descriptions-item>
<el-descriptions-item label="申请人电话">${contract.applyPersonPhone}</el-descriptions-item>
<el-tooltip effect="light" :content="projectTitle" placement="top-start">
<el-form-item label="项目标题">
<span>${process.projectTitle}</span>
<el-descriptions-item label="合同编号">${process.contractNo}</el-descriptions-item>
<el-descriptions-item label="合同名称">${process.contractName}</el-descriptions-item>
<el-descriptions-item label="合同金额">${project.contractAmount}</el-descriptions-item>
<el-descriptions-item label="客户名称">${contract.clientName}</el-descriptions-item>
<el-descriptions-item label="最终用户名称">${project.terminalCustomer}</el-descriptions-item>
<el-descriptions-item label="用印类型">
<#list process.sealTypes.sealTypes as item>
<el-tag size="small">${item.description}</el-tag>
</#list>
</el-descriptions-item>
<el-descriptions-item label="税率">${process.taxRate}%</el-descriptions-item>
<el-descriptions-item label="是否垫资">${isPrepaid}</el-descriptions-item>
<el-descriptions-item label="垫资金额">${repaidAmount}元</el-descriptions-item>
<el-descriptions-item label="预算毛利率">${project.grossProfitMargin}</el-descriptions-item>
<el-descriptions-item label="收款条件">${contract.paymentTerms}</el-descriptions-item>
<el-descriptions-item label="备注">${process.remark}</el-descriptions-item>
<el-descriptions-item label="附件">
<#list attachments as attachment>
<el-tag size="small">
<a href="${attachment.uri}">
<i class="el-icon-document"></i> ${attachment.name}
</a>
</el-tag>
</#list>
</el-descriptions-item>
</el-descriptions>
<#--
<el-form :inline="true" ref="saleContractProcessForm" :model="processForm" label-position="right" label-width="100px">
<div class="am-form-inline">
<el-form-item label="项目编号">
<span>${process.projectNo}</span>
</el-form-item>
</el-tooltip>
<el-form-item label="申请时间">
<span>${process.applyDate}</span>
</el-form-item>
<el-tooltip effect="light" :content="projectTitle" placement="top-start">
<el-form-item label="项目标题">
<span>${process.projectTitle}</span>
</el-form-item>
</el-tooltip>
<el-form-item label="项目类型">
<span>${projectType}</span>
</el-form-item>
<el-form-item label="申请时间">
<span>${process.applyDate}</span>
</el-form-item>
<el-form-item label="合作类型">
<span>${cooperationType}</span>
</el-form-item>
<el-form-item label="项目类型">
<span>${projectType}</span>
</el-form-item>
</div>
<el-form-item label="合作类型">
<span>${cooperationType}</span>
</el-form-item>
<div>
</div>
<el-form-item label="申请部门">
<span>${process.applyDept}</span>
</el-form-item>
<div>
<el-form-item label="申请人">
<span>${process.applyPersonName}</span>
</el-form-item>
<el-form-item label="申请部门">
<span>${process.applyDept}</span>
</el-form-item>
<el-form-item label="申请部门领导">
<span>${process.applyDeptLeaderName}</span>
</el-form-item>
<el-form-item label="申请人">
<span>${process.applyPersonName}</span>
</el-form-item>
<el-form-item label="申请人电话" prop="applyPersonPhone">
<span>${contract.applyPersonPhone}</span>
</el-form-item>
<el-form-item label="申请部门领导">
<span>${process.applyDeptLeaderName}</span>
</el-form-item>
</div>
<el-form-item label="申请人电话" prop="applyPersonPhone">
<span>${contract.applyPersonPhone}</span>
</el-form-item>
<div>
</div>
<el-form-item label="合同编号">
<span>${process.contractNo}</span>
</el-form-item>
<div>
<el-form-item label="合同名称">
<span>${process.contractName}</span>
</el-form-item>
<el-form-item label="合同编号">
<span>${process.contractNo}</span>
</el-form-item>
<el-form-item label="合同金额">
<span>${project.contractAmount}</span>
</el-form-item>
<el-form-item label="合同名称">
<span>${process.contractName}</span>
</el-form-item>
</div>
<el-form-item label="合同金额">
<span>${project.contractAmount}</span>
</el-form-item>
<div>
<el-form-item label="客户名称" :rules="[{ required: true, message: '客户名称不能为空'}]">
<span>${contract.clientName}</span>
</el-form-item>
</div>
<el-form-item label="最终用户名称">
<span>${project.terminalCustomer}</span>
</el-form-item>
</div>
<div>
<el-form-item label="客户名称">
<span>${contract.clientName}</span>
</el-form-item>
<div>
<el-form-item label="用印类型" :rules="[{ required: true, message: '用印类型不能为空'}]">
<span>${process.sealTypes}</span>
</el-form-item>
</div>
<el-form-item label="最终用户名称">
<span>${project.terminalCustomer}</span>
</el-form-item>
</div>
<div>
<div>
<el-form-item label="用印类型">
<#list process.sealTypes.sealTypes as item>
<el-tag size="small">${item.description}</el-tag>
</#list>
</el-form-item>
</div>
<el-form-item label="税率">
<span>${process.taxRate}%</span>
</el-form-item>
<div>
<el-form-item label="是否垫资">
<span>${isPrepaid}</span>
</el-form-item>
<el-form-item label="税率">
<span>${process.taxRate}%</span>
</el-form-item>
<el-form-item label="垫资金额">
<span>${repaidAmount}元</span>
</el-form-item>
<el-form-item label="是否垫资">
<span>${isPrepaid}</span>
</el-form-item>
<el-form-item label="预算毛利率">
<span>${project.grossProfitMargin}</span>
</el-form-item>
<el-form-item label="垫资金额">
<span>${repaidAmount}元</span>
</el-form-item>
</div>
<el-form-item label="预算毛利率">
<span>${project.grossProfitMargin}</span>
</el-form-item>
<div>
<el-form-item label="收款条件">
<div>${contract.paymentTerms}</div>
</el-form-item>
</div>
</div>
<div>
<el-form-item label="备注">
<div>${process.remark}</div>
</el-form-item>
</div>
<div>
<el-form-item label="收款条件">
<div>${contract.paymentTerms}</div>
</el-form-item>
</div>
<div>
<el-form-item label="附件">
<#list attachments as attachment>
<a href="${attachment.uri}">${attachment.name}</a>
</#list>
</el-form-item>
</div>
<div>
<el-form-item label="备注">
<div>${process.remark}</div>
</el-form-item>
</div>
</el-form>
<div>
<el-form-item label="附件">
<#list attachments as attachment>
<a href="${attachment.uri}">
<i class="el-icon-document"></i> ${attachment.name}
</a>
</#list>
</el-form-item>
</div>
</el-form>
-->
<#-- <el-row justify="space-around" type="flex" class="row-bg">-->
<el-row>
<el-button type="info" @click="goToHome">返回上一级</el-button>
<el-button type="primary" @click="saveDraft">保存草稿</el-button>
<el-button type="success" @click="submit">提交</el-button>
<el-button type="info" @click="backLastPage">返回上一级</el-button>
</el-row>
</div>
@ -190,11 +228,6 @@
<script>
const newBusinessProcurementContractProcess = "newBusinessProcurementContractProcess"
const saleContractProcess = "saleContractProcess"
const saleContractDetail = "saleContractDetail"
const BUTTON = "btn"
const isEmpty = (obj) => {
return !obj || (obj.length && obj.length === 0)
}
@ -212,429 +245,19 @@
}
const data = () => {
return {
mode: "btn", // btn , newBusinessProcurementContractProcess
processForm: {
sealTypes: [],
},
projectSelected: false,
applySectorOptions: [
{
value: 'zhinan',
label: '指南',
children: [{
value: 'shejiyuanze',
label: '设计原则',
children: [{
value: 'yizhi',
label: '一致'
}, {
value: 'fankui',
label: '反馈'
}, {
value: 'xiaolv',
label: '效率'
}, {
value: 'kekong',
label: '可控'
}]
}, {
value: 'daohang',
label: '导航',
children: [{
value: 'cexiangdaohang',
label: '侧向导航'
}, {
value: 'dingbudaohang',
label: '顶部导航'
}]
}]
},
{
value: 'zujian',
label: '组件',
children: [{
value: 'basic',
label: 'Basic',
children: [{
value: 'layout',
label: 'Layout 布局'
}, {
value: 'color',
label: 'Color 色彩'
}, {
value: 'typography',
label: 'Typography 字体'
}, {
value: 'icon',
label: 'Icon 图标'
}, {
value: 'button',
label: 'Button 按钮'
}]
}, {
value: 'form',
label: 'Form',
children: [{
value: 'radio',
label: 'Radio 单选框'
}, {
value: 'checkbox',
label: 'Checkbox 多选框'
}, {
value: 'input',
label: 'Input 输入框'
}, {
value: 'input-number',
label: 'InputNumber 计数器'
}, {
value: 'select',
label: 'Select 选择器'
}, {
value: 'cascader',
label: 'Cascader 级联选择器'
}, {
value: 'switch',
label: 'Switch 开关'
}, {
value: 'slider',
label: 'Slider 滑块'
}, {
value: 'time-picker',
label: 'TimePicker 时间选择器'
}, {
value: 'date-picker',
label: 'DatePicker 日期选择器'
}, {
value: 'datetime-picker',
label: 'DateTimePicker 日期时间选择器'
}, {
value: 'upload',
label: 'Upload 上传'
}, {
value: 'rate',
label: 'Rate 评分'
}, {
value: 'form',
label: 'Form 表单'
}]
}, {
value: 'data',
label: 'Data',
children: [{
value: 'table',
label: 'Table 表格'
}, {
value: 'tag',
label: 'Tag 标签'
}, {
value: 'progress',
label: 'Progress 进度条'
}, {
value: 'tree',
label: 'Tree 树形控件'
}, {
value: 'pagination',
label: 'Pagination 分页'
}, {
value: 'badge',
label: 'Badge 标记'
}]
}, {
value: 'notice',
label: 'Notice',
children: [{
value: 'alert',
label: 'Alert 警告'
}, {
value: 'loading',
label: 'Loading 加载'
}, {
value: 'message',
label: 'Message 消息提示'
}, {
value: 'message-box',
label: 'MessageBox 弹框'
}, {
value: 'notification',
label: 'Notification 通知'
}]
}, {
value: 'navigation',
label: 'Navigation',
children: [{
value: 'menu',
label: 'NavMenu 导航菜单'
}, {
value: 'tabs',
label: 'Tabs 标签页'
}, {
value: 'breadcrumb',
label: 'Breadcrumb 面包屑'
}, {
value: 'dropdown',
label: 'Dropdown 下拉菜单'
}, {
value: 'steps',
label: 'Steps 步骤条'
}]
}, {
value: 'others',
label: 'Others',
children: [{
value: 'dialog',
label: 'Dialog 对话框'
}, {
value: 'tooltip',
label: 'Tooltip 文字提示'
}, {
value: 'popover',
label: 'Popover 弹出框'
}, {
value: 'card',
label: 'Card 卡片'
}, {
value: 'carousel',
label: 'Carousel 走马灯'
}, {
value: 'collapse',
label: 'Collapse 折叠面板'
}]
}]
},
{
value: 'ziyuan',
label: '资源',
children: [{
value: 'axure',
label: 'Axure Components'
}, {
value: 'sketch',
label: 'Sketch Templates'
}, {
value: 'jiaohu',
label: '组件交互文档'
}]
}
],
fileList: [],
// 销售合同收入明细
incomeDetails: [],
attachmentUri: [],
attachmentMap: {}
}
return {}
}
const methods = {
changeMode(mode) {
this.mode = mode
},
render(obj) {
console.log(obj)
},
initForm(form) {
this.processForm = { ...form, sealTypes: [] }
},
queryProject(q, callback) {
if (isBlank(q)) {
return
}
fetch("${base}/process/projects?q=" + q)
.then(res => res.json())
.then(data => {
if (data.length === 0) {
callback([{
name: '未搜索到结果'
}])
}
else {
callback(data)
}
})
.catch(err => {
this.$message.error('项目搜索失败');
})
},
handleSelectProject(selected) {
const { id, name } = selected
if (!id) {
this.initForm({})
return
}
const loading = this.$loading({
lock: true,
text: '正在加载项目',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)'
})
fetch("${base}/process/projects/" + id)
.then(res => res.json())
.then(data => {
const { incomeDetails, ...form } = data
// 转换数据
// @formatter:off
const computeType = (type) => {
switch (type) {
case 1: return '设备'
case 2: return '工程'
case 3: return '服务'
default: return '未知'
}
}
// @formatter:on
this.initForm(form)
this.projectSelected = true
this.incomeDetails = incomeDetails.map(detail => ({
...detail, type: computeType(detail.type)
}))
})
.catch(err => {
this.$message.error("项目'" + name + "'加载失败");
})
.finally(() => loading.close())
},
clearProjectProcess() {
this.projectSelected = false
this.initForm({})
this.incomeDetails = []
},
saveDraft() {
this.processForm.status = 'draft'
this.submit()
},
submit() {
this.$refs["saleContractProcessForm"].validate((valid) => {
if (valid) {
const fileList = this.fileList
console.log(fileList)
if (fileList.length === 0) {
this.$message.error("未上传附件");
return false
}
const loading = this.$loading({
lock: true,
text: '正在提交',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)'
})
const form = {
...this.processForm,
processType: 'sale_contract',
projectTitle: this.projectTitle,
attachmentUri: fileList.map(file => (file.response.data.url)),
incomeDetails: this.incomeDetails.map(detail => ({
id: detail.id, expirationDate: detail.expirationDate
}))
}
fetch("${base}/process", {
method: 'POST', // or 'PUT'
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(form),
}).then(response => {
if (response.ok) {
this.$message({
showClose: true,
message: '提交成功',
type: 'success'
})
}
else {
return Promise.reject("失败")
}
}).catch(err => {
this.$message.error("项目提交失败");
}).finally(() => loading.close())
}
else {
return false;
}
})
},
submitToSaleContractProcess() {
this.goToSaleContractProcess()
},
handleRemove(file, fileList) {
this.fileList = fileList
},
handleExceed(files, fileList) {
this.$message.warning("当前限制选择只能选择10个文件");
this.fileList = fileList
},
beforeRemove(file, fileList) {
return this.$confirm("确定移除 " + file.name + "？");
},
handleFileUploaded(response, file, fileList) {
if (response.success) {
this.fileList = fileList
}
else {
this.$message.warning("上传失败");
}
},
indexMethod(index) {
return index * 1;
backLastPage() {
window.history.back();
}
}
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.handleSelectProject({ id: 135, name: '' })
},
})
</script>