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

编辑流程前端

master
Harry Yang 2022-12-30 10:26:38 +08:00
parent 516e6da6aa
commit 2bfdffd1a4
1 changed files with 212 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

262
src/main/resources/templates/admin/business/process-edit.ftl
View File

@ -48,6 +48,14 @@
display: none;
}
.el-table .warning-row {
background: oldlace;
}
.el-table .child-row {
background: #f0f9eb;
}
</style>
<div class="admin-content" id="app">
@ -87,18 +95,18 @@
</el-form-item>
<el-form-item label="项目类型" v-if="isSalesContractMode">
<span>{{processForm.projectType}}</span>
<span>{{processForm.projectTypeDesc}}</span>
</el-form-item>
<el-form-item label="合作类型">
<span>{{processForm.cooperationType}}</span>
<span>{{processForm.cooperationTypeDesc}}</span>
</el-form-item>
</div>
<div>
<el-form-item label="申请部门" :rules="[{ required: true, message: '申请部门不能为空'}]" prop="applyDept">
<el-form-item label="申请部门" :rules="[{ required: true, message: '申请部门不能为空'}]" prop="applyDeptId">
<el-cascader :options="applyDeptSectorOptions" clearable v-model="processForm.applyDeptId"
:props="{ expandTrigger: 'hover', label:'name', value: 'id'}" @change="applyDeptSelected"></el-cascader>
</el-form-item>
@ -189,14 +197,14 @@
</div>
<div>
<el-form-item v-if="isSalesContractMode" label="收款条件" :rules="[{ required: true, message: '收款条件不能为空'}]"
prop="paymentTerms">
<el-form-item v-if="isSalesContractMode" label="收款条件" prop="paymentTerms"
:rules="[{ required: true, message: '收款条件不能为空'}]">
<el-input type="textarea" :autosize="{ minRows: 3, maxRows: 10}" cols="90" maxlength="5000" show-word-limit
v-model="processForm.paymentTerms" placeholder="请输入收款条件（限制5000字）"></el-input>
</el-form-item>
<el-form-item v-if="isProcurementContractMode" label="付款条件" :rules="[{ required: true, message: '付款条件不能为空'}]"
prop="paymentTerms">
<el-form-item v-if="isProcurementContractMode" label="付款条件" prop="paymentTerms"
:rules="[{ required: true, message: '付款条件不能为空'}]">
<el-input type="textarea" :autosize="{ minRows: 3, maxRows: 10}" cols="90" maxlength="5000" show-word-limit
v-model="processForm.paymentTerms" placeholder="请输入付款条件（限制5000字）"></el-input>
</el-form-item>
@ -245,7 +253,7 @@
<el-input size="mini" placeholder="请输入公司名称" v-model="scope.row.companyName"></el-input>
</template>
</el-table-column>
<el-table-column prop="totalAmount" label="合计金额" width="180" align="center">
<el-table-column prop="totalAmount" label="合计金额" width="160" align="center">
<template slot-scope="scope">
<el-input-number size="mini" :precision="2" :step="0.1" :max="100" :min="0"
v-model="scope.row.totalAmount"></el-input-number>
@ -261,7 +269,7 @@
<el-input size="mini" placeholder="请输入付款条件" v-model="scope.row.paymentTerms"></el-input>
</template>
</el-table-column>
<el-table-column prop="taxRate" label="税率（%）" width="180" align="center">
<el-table-column prop="taxRate" label="税率（%）" width="160" align="center">
<template slot-scope="scope">
<el-input-number size="mini" :precision="2" :step="0.1" :max="100" :min="0"
v-model="scope.row.taxRate"></el-input-number>
@ -322,13 +330,13 @@
<el-table-column prop="type" label="类别"></el-table-column>
<el-table-column prop="spec" label="规格型号"></el-table-column>
<el-table-column prop="param" label="参数"></el-table-column>
<el-table-column prop="unit" label="单位"></el-table-column>
<el-table-column prop="amount" label="数量"></el-table-column>
<el-table-column prop="price" label="单价" width="120"></el-table-column>
<el-table-column prop="taxRate" label="税率"></el-table-column>
<el-table-column prop="totalTaxInclude" label="含税金额" width="120"></el-table-column>
<el-table-column prop="totalTaxExclude" label="不含税金额" width="120"></el-table-column>
<el-table-column prop="totalTax" label="税金"></el-table-column>
<el-table-column prop="unit" label="单位"></el-table-column>
<el-table-column prop="price" label="单价（元）" width="120"></el-table-column>
<el-table-column prop="taxRate" label="税率（%）"></el-table-column>
<el-table-column prop="totalTaxInclude" label="含税金额（元）" width="120"></el-table-column>
<el-table-column prop="totalTaxExclude" label="不含税金额（元）" width="120"></el-table-column>
<el-table-column prop="totalTax" label="税金（元）" width="120"></el-table-column>
<el-table-column prop="expirationDate" label="质保期" fixed="right" width="150">
<template slot-scope="scope">
@ -346,42 +354,98 @@
</div>
<#-- 选择 业务采购清单明细 -->
<#-- 业务采购清单明细 -->
<div class="am-u-sm-12 am-u-md-12" v-if="isProcurementContractDetailMode">
<el-table style="width: 100%" border>
<div v-cloak class="am-u-sm-12 am-u-md-12" v-if="isProcurementContractDetailMode">
<el-table border :data="procurementDetails" row-key="rowKey" default-expand-all :row-class-name="procurementDetailRowClassName">
<el-table-column type="index" :index="1" label="序号" fixed></el-table-column>
<el-table-column prop="feeType" label="费用项目" width="100" fixed></el-table-column>
<el-table-column prop="name" label="产品名称" fixed></el-table-column>
<el-table-column prop="category" label="采购类别" fixed></el-table-column>
<el-table-column prop="fee" label="费用项目" width="180"></el-table-column>
<el-table-column prop="fee" label="采购类别" width="180"></el-table-column>
<el-table-column prop="fee" label="产品名称" width="180"></el-table-column>
<el-table-column prop="fee" label="单位" width="180"></el-table-column>
<el-table-column prop="fee" label="数量" width="180"></el-table-column>
<el-table-column prop="fee" label="预算单价" width="180"></el-table-column>
<el-table-column prop="fee" label="税率（%）" width="180"></el-table-column>
<el-table-column prop="fee" label="含税总金额（元）" width="180"></el-table-column>
<el-table-column prop="fee" label="不含税金额（元）" width="180"></el-table-column>
<el-table-column prop="fee" label="税金（元）" width="180"></el-table-column>
<el-table-column prop="fee" label="是否垫资" width="180"></el-table-column>
<el-table-column prop="fee" label="支出时间" width="180"></el-table-column>
<el-table-column prop="fee" label="支出金额（元）" width="180"></el-table-column>
<el-table-column prop="fee" label="已采购数量" width="180"></el-table-column>
<el-table-column prop="fee" label="本次采购数量" width="180"></el-table-column>
<el-table-column prop="fee" label="未采购数量" width="180"></el-table-column>
<el-table-column prop="amount" label="数量"></el-table-column>
<el-table-column prop="unit" label="单位"></el-table-column>
<el-table-column prop="price" label="预算单价" width="100"></el-table-column>
<el-table-column prop="taxRate" label="税率（%）"></el-table-column>
<el-table-column prop="totalTaxInclude_" label="含税总金额（元）" width="120"></el-table-column>
<el-table-column prop="totalTaxExclude" label="不含税金额（元）" width="120"></el-table-column>
<el-table-column prop="totalTax" label="税金（元）" width="110"></el-table-column>
<el-table-column prop="isUnderwritten" label="是否垫资"></el-table-column>
<el-table-column prop="payTime" label="支出时间" width="160"></el-table-column>
<el-table-column prop="payAmount" label="支出金额（元）" width="120"></el-table-column>
<el-table-column prop="amountAlready" label="已采购数量" width="100"></el-table-column>
<el-table-column prop="amountCurrent" label="本次采购数量" width="180">
<template slot-scope="scope">
<span v-if="scope.row.newRow">{{scope.row.parent.amountCurrent}}</span>
<el-input-number v-else :precision="2" :step="0.1" :min="0" v-model="scope.row.amountCurrent"
:disabled="scope.row.amount - scope.row.amountAlready===0" size="mini"
:max="scope.row.amount - scope.row.amountAlready" controls-position="right">
</el-input-number>
</template>
</el-table-column>
<el-table-column prop="amountLeft" label="未采购数量" width="100">
<template slot-scope="scope">
<span>{{scope.row.amount - scope.row.amountAlready}}</span>
</template>
</el-table-column>
<el-table-column prop="fee" label="供应商名称"></el-table-column>
<el-table-column prop="fee" label="设备厂商名称"></el-table-column>
<el-table-column prop="fee" label="对应采购清单"></el-table-column>
<el-table-column prop="fee" label="规格型号"></el-table-column>
<el-table-column prop="fee" label="对应采购数目"></el-table-column>
<el-table-column prop="fee" label="采购单价"></el-table-column>
<el-table-column prop="fee" label="含税总金额（元）"></el-table-column>
<el-table-column prop="supplierName" label="供应商名称" width="200">
<template slot-scope="scope">
<el-input size="mini" placeholder="请输入供应商名称" v-model="scope.row.supplierName"></el-input>
</template>
</el-table-column>
<el-table-column prop="manufacturerName" label="设备厂商名称" width="200">
<template slot-scope="scope">
<el-input size="mini" placeholder="请输入设备厂商名称" v-model="scope.row.manufacturerName"></el-input>
</template>
</el-table-column>
<el-table-column prop="purchaseList" label="对应采购清单" width="200">
<template slot-scope="scope">
<el-input size="mini" placeholder="请输入对应采购清单" v-model="scope.row.purchaseList"></el-input>
</template>
</el-table-column>
<el-table-column prop="spec" label="规格型号" width="200">
<template slot-scope="scope">
<el-input size="mini" placeholder="请输入规格型号" v-model="scope.row.spec"></el-input>
</template>
</el-table-column>
<el-table-column prop="procurementAmount" label="对应采购数目" width="200">
<template slot-scope="scope">
<el-input-number size="mini" :precision="2" :step="0.1" :min="0"
v-model="scope.row.procurementAmount" controls-position="right"></el-input-number>
</template>
</el-table-column>
<el-table-column prop="procurementPrice" label="采购单价" width="200">
<template slot-scope="scope">
<el-input-number size="mini" :precision="2" :step="1" :min="0"
v-model="scope.row.procurementPrice" controls-position="right"></el-input-number>
</template>
</el-table-column>
<el-table-column prop="totalTaxInclude" label="含税总金额（元）" width="200">
<template slot-scope="scope">
<el-input-number size="mini" :precision="2" :step="0.1" :min="0"
v-model="scope.row.totalTaxInclude" controls-position="right"></el-input-number>
</template>
</el-table-column>
<el-table-column width="49" fixed="right">
<template slot-scope="scope">
<el-popconfirm v-if="scope.row.newRow" title="确定删除吗？填写的表单将丢弃" @confirm="removeProcurementDetailRow(scope)">
<el-button slot="reference" type="danger" icon="el-icon-delete" circle size="mini"></el-button>
</el-popconfirm>
<el-button v-else type="primary" icon="el-icon-plus" circle size="mini"
@click="addProcurementDetailRow(scope)"></el-button>
</template>
</el-table-column>
</el-table>
<el-row style="margin: 20px 0">
<el-button type="info" @click="goToProcurementContract">返回上一级</el-button>
<el-button type="primary" @click="goToProcurementContract">保存并返回上一级</el-button>
<el-button type="primary" @click="saveProcurementContractDetail">保存并返回上一级</el-button>
</el-row>
</div>
@ -433,6 +497,9 @@
// 销售合同收入明细
incomeDetails: [],
supplierMaterialsForm: [],
procurementDetailsRowKey: 0,
procurementDetails: [],
filteredProcurementDetails: [],
}
}
@ -450,8 +517,36 @@
},
goToProcurementContract() {
this.changeMode(saleContractProcess)
this.changeMode(procurementContractProcess)
this.processType = procurementContract
},
/**
* 校验不通过提示
* @returns {boolean} 校验通过否
*/
checkProcurementDetails() {
const emptyRows = this.procurementDetails.filter(detail => {
return isNotEmpty(procurementDetailProperties.filter(property => isBlank(detail[property])))
})
console.log(emptyRows)
if (isNotEmpty(emptyRows)) {
const row = emptyRows[0]
this.$message.error("合同清单明细 费用项目为：'" + row.feeType + "' 采购类别为：'" + row.category + "' 的数据未填写")
return false
}
return true
},
/**
* 保存 业务采购合同清单明细，并验证表单是否填写完整，
* 如果完整就到流程表单界面
*/
saveProcurementContractDetail() {
if (this.checkProcurementDetails()) {
this.goToProcurementContract()
}
},
goToContractDetail() {
const { projectId } = this.processForm
if (projectId) {
@ -487,10 +582,10 @@
fetch("${base}/process/" + id)
.then(res => res.json())
.then(data => {
const { incomeDetails, process, contract, ...form } = data
const { incomeDetails, process, contract, procurementDetails, attachments, ...form } = data
// 转换数据
// @formatter:off
const computeType = (type) => {
const computeType = type => {
switch (type) {
case 1: return '设备'
case 2: return '工程'
@ -498,19 +593,49 @@
default: return '未知'
}
}
const computeFeeType = type => {
switch (type) {
case 1: return '设备'
case 2: return '施工'
case 3: return '服务'
case 4: return '其他'
default: return '未知'
}
}
// @formatter:on
const applyDeptId = process.applyDept.split(',')
const applyDeptId = process.applyDeptId.split(',')
this.initForm({ ...form, ...process, ...contract, applyDeptId })
this.projectSelected = true
this.processType = process.processType
this.incomeDetails = incomeDetails.map(detail => ({
this.incomeDetails = incomeDetails && incomeDetails.map(detail => ({
...detail, type: computeType(detail.type)
}))
this.fileList = JSON.parse(process.attachmentUri).map(item => ({
this.fileList = attachments.map(item => ({
name: item.name, url: item.uri
}))
let rowKey = 0
function mapChildren(detail) {
const { purchaseDetails } = detail
return (purchaseDetails || []).map(purchase => ({
...purchase, ...detail, rowKey: rowKey++, feeType: computeFeeType(detail.type),
totalTaxInclude_: detail.totalTaxInclude, totalTaxInclude: undefined, // 存在相同字段转换一下
isUnderwritten: detail.isUnderwritten === 1 ? "是" : "否",
}))
}
this.procurementDetails = procurementDetails && procurementDetails.map(detail => ({
...detail, feeType: computeFeeType(detail.type),
totalTaxInclude_: detail.totalTaxInclude, totalTaxInclude: undefined, // 存在相同字段转换一下
isUnderwritten: detail.isUnderwritten === 1 ? "是" : "否",
rowKey: rowKey++, children: mapChildren(detail)
}))
this.procurementDetailsRowKey = rowKey
if (process.processType === 'sale_contract') {
this.changeMode(saleContractProcess)
}
@ -520,7 +645,7 @@
})
.catch(err => {
this.$message.error("项目'" + name + "'加载失败");
this.$message.error("项目加载失败");
})
.finally(() => loading.close())
},
@ -687,6 +812,41 @@
this.supplierMaterialsForm.push({})
},
addProcurementDetailRow(scope) {
const { row } = scope
const { children } = row
const newRow = {
...row,
rowKey: this.procurementDetailsRowKey++,
newRow: true,
parent: row // 记录上一级元素，在删除的时候使用
}
delete newRow['children']
if (children) {
row['children'].push(newRow)
}
else {
row['children'] = [newRow]
}
scope.store.table.toggleRowExpansion(row, true)
},
removeProcurementDetailRow(scope) {
const { rowKey, parent } = scope.row
parent.children = parent.children.filter(child => child.rowKey !== rowKey)
},
// 区别子项
procurementDetailRowClassName({ row, rowIndex }) {
if (row.parent) {
// 有父项说明就是子项
return 'child-row';
}
return '';
},
applyDeptSelected(value) {
if (value.length === 0) {
this.processForm['applyDept'] = null
@ -759,7 +919,9 @@
case saleContractProcess:
return "编辑销售合同流程"
case saleContractDetail:
return "销售合同清单明细"
return "编辑销售合同清单明细"
case procurementContractDetail:
return "编辑业务采购合同清单明细"
case newBusinessProcurementContractProcess:
return "编辑业务采购合同流程"
}