fourcal/src/main/resources/templates/admin/business/process-new.ftl

880 lines
31 KiB
Plaintext
Raw Normal View History

2022-12-12 09:52:25 +00:00
<#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;
}
2022-12-13 09:37:06 +00:00
.el-textarea .el-input__count {
line-height: 15px;
}
.admin-content-body {
margin-bottom: 100px;
}
.el-table__empty-block {
height: 60px !important;
}
2022-12-12 09:52:25 +00:00
</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>{{subTitle}}</small></div>
</div>
<div class="am-g">
<div class="am-u-sm-12 am-u-md-12" v-if="isButtonMode">
2022-12-13 09:37:06 +00:00
<button type="button" class="am-btn" @click="goToSaleContractProcess">
2022-12-12 09:52:25 +00:00
<img src="${base}/assets/process/销售合同流程@3x.png" width="36"/>
销售合同流程
</button>
<button type="button" class="am-btn" @click="businessProcurementProcessClick">
<img src="${base}/assets/process/业务采购流程@3x.png" width="39"/>
业务采购流程
</button>
</div>
<#-- 业务采购流程 -->
<div class="am-modal am-modal-prompt" tabindex="-1" id="businessProcurementProcessModal">
<div class="am-modal-dialog">
<div class="am-modal-hd"><strong>项目编号</strong></div>
<div class="am-modal-bd">
<input type="text" class="am-modal-prompt-input" placeholder="请输入项目编号或名称,支持模糊查询"/>
</div>
<div class="am-modal-footer">
<span class="am-modal-btn" data-am-modal-cancel>取消</span>
<span class="am-modal-btn" data-am-modal-confirm>查询</span>
</div>
</div>
</div>
<#-- 新增销售合同流程 -->
<div class="am-u-sm-12 am-u-md-12" v-if="isSalesContractProcessMode">
2022-12-13 09:37:06 +00:00
<el-form :inline="true" ref="saleContractProcessForm" :model="processForm" label-position="right" label-width="100px">
2022-12-12 09:52:25 +00:00
<div class="am-form-inline">
<el-tooltip :disabled="projectSelected" effect="light" content="项目编号或名称,支持模糊查询" placement="top-end">
<el-form-item label="项目编号">
2022-12-13 09:37:06 +00:00
<el-autocomplete v-model="processForm.projectNo" :fetch-suggestions="queryProject"
value-key="name" placeholder="请输入项目编号或名称" @select="handleSelectProject">
2022-12-12 09:52:25 +00:00
</el-autocomplete>
</el-form-item>
</el-tooltip>
<el-form-item label="项目标题">
<el-input placeholder="请输入内容" :disabled="projectSelected" :value="projectTitle" clearable></el-input>
</el-form-item>
<el-form-item label="申请时间">
2022-12-13 09:37:06 +00:00
<el-input placeholder="请输入内容" :disabled="projectSelected" v-model="processForm.applyDate"></el-input>
2022-12-12 09:52:25 +00:00
</el-form-item>
<el-form-item label="项目类型">
2022-12-13 09:37:06 +00:00
<el-input placeholder="请输入内容" :disabled="projectSelected" v-model="processForm.projectType"></el-input>
2022-12-12 09:52:25 +00:00
</el-form-item>
<el-form-item label="合作类型">
2022-12-13 09:37:06 +00:00
<el-input placeholder="请输入内容" :disabled="projectSelected" v-model="processForm.cooperationType"></el-input>
2022-12-12 09:52:25 +00:00
</el-form-item>
</div>
<div>
2022-12-13 09:37:06 +00:00
<el-form-item label="申请部门" :rules="[{ required: true, message: '申请部门电话不能为空'}]" prop="applyDept">
<el-cascader :options="applySectorOptions" clearable v-model="processForm.applyDept"></el-cascader>
2022-12-12 09:52:25 +00:00
</el-form-item>
<el-form-item label="申请人">
2022-12-13 09:37:06 +00:00
<el-input placeholder="请输入内容" :disabled="projectSelected" v-model="processForm.cooperateTypeStr"></el-input>
2022-12-12 09:52:25 +00:00
</el-form-item>
<el-form-item label="申请部门领导">
2022-12-13 09:37:06 +00:00
<el-input placeholder="请输入内容" :disabled="projectSelected" v-model="processForm.cooperateTypeStr"></el-input>
2022-12-12 09:52:25 +00:00
</el-form-item>
2022-12-13 09:37:06 +00:00
<el-form-item label="申请人电话" :rules="[{ required: true, message: '申请人电话不能为空'}]" prop="applyPersonPhone">
<el-input placeholder="请输入内容" v-model="processForm.applyPersonPhone"></el-input>
2022-12-12 09:52:25 +00:00
</el-form-item>
</div>
<div>
2022-12-13 09:37:06 +00:00
<el-form-item label="合同编号" :rules="[{ required: true, message: '合同编号不能为空'}]" prop="contractNo">
<el-input placeholder="请输入合同编号" v-model="processForm.contractNo"></el-input>
2022-12-12 09:52:25 +00:00
</el-form-item>
2022-12-13 09:37:06 +00:00
<el-form-item label="合同名称" :rules="[{ required: true, message: '合同名称不能为空'}]" prop="contractName">
<el-input placeholder="请输入合同名称" v-model="processForm.contractName"></el-input>
2022-12-12 09:52:25 +00:00
</el-form-item>
<el-form-item label="合同金额">
2022-12-13 09:37:06 +00:00
<el-input placeholder="请输入内容" :disabled="projectSelected" v-model="processForm.contractAmount"></el-input>
2022-12-12 09:52:25 +00:00
</el-form-item>
</div>
<div>
2022-12-13 09:37:06 +00:00
<el-form-item label="客户名称" :rules="[{ required: true, message: '客户名称不能为空'}]">
<el-input placeholder="请输入客户名称" v-model="processForm.contractNumber"></el-input>
2022-12-12 09:52:25 +00:00
</el-form-item>
<el-form-item label="最终用户名称">
2022-12-13 09:37:06 +00:00
<el-input placeholder="请输入最终用户名称" v-model="processForm.contractName"></el-input>
2022-12-12 09:52:25 +00:00
</el-form-item>
</div>
<div>
2022-12-13 09:37:06 +00:00
<el-form-item label="用印类型" :rules="[{ required: true, message: '用印类型不能为空'}]">
<el-checkbox-group v-model="processForm.sealType">
<#list sealTypes as sealType>
<el-checkbox label="${sealType.name()}" key="key-${sealType.name()}">${sealType.description}</el-checkbox>
</#list>
2022-12-12 09:52:25 +00:00
</el-checkbox-group>
</el-form-item>
</div>
<div>
2022-12-13 09:37:06 +00:00
<el-form-item label="税率" :rules="[{ required: true, message: '税率不能为空'}]" prop="taxRate">
<el-select v-model="processForm.taxRate" placeholder="请选择税率">
<#list taxRate as rate>
<el-option label="${rate}%" value="${rate}"></el-option>
</#list>
2022-12-12 09:52:25 +00:00
</el-select>
</el-form-item>
<el-form-item label="是否垫资">
2022-12-13 09:37:06 +00:00
<el-input placeholder="请输入最终用户名称" v-model="processForm.contractName"></el-input>
2022-12-12 09:52:25 +00:00
</el-form-item>
<el-form-item label="垫资金额">
<el-input value="50000元"></el-input>
</el-form-item>
<el-form-item label="预算毛利率">
<el-input value="3.91%"></el-input>
</el-form-item>
</div>
<div>
2022-12-13 09:37:06 +00:00
<el-form-item label="收款条件" :rules="[{ required: true, message: '收款条件不能为空'}]" prop="paymentTerms">
<el-input type="textarea" :autosize="{ minRows: 3, maxRows: 10}" cols="90" maxlength="5000" show-word-limit
v-model="processForm.paymentTerms" placeholder="请输入收款条件限制5000字"></el-input>
2022-12-12 09:52:25 +00:00
</el-form-item>
</div>
<div>
<el-form-item label="备注">
2022-12-13 09:37:06 +00:00
<el-input type="textarea" :autosize="{ minRows: 3, maxRows: 10}" maxlength="5000" show-word-limit
v-model="processForm.remark" placeholder="请输入备注限制5000字" cols="90"></el-input>
2022-12-12 09:52:25 +00:00
</el-form-item>
</div>
<div>
<el-form-item label="上传附件">
<el-upload class="upload-demo"
action="https://jsonplaceholder.typicode.com/posts/"
:on-preview="handlePreview"
:on-remove="handleRemove"
:before-remove="beforeRemove"
:limit="1"
:on-exceed="handleExceed"
:file-list="fileList">
<el-button size="small" type="primary">点击上传</el-button>
<div slot="tip" class="el-upload__tip">只能上传PDF、excel、word、图片、压缩包且不超过50MB</div>
</el-upload>
</el-form-item>
</div>
<div>
<el-form-item label="合同清单明细">
2022-12-13 09:37:06 +00:00
<el-button type="text" @click="goToSaleContractDetail">详细清单</el-button>
2022-12-12 09:52:25 +00:00
</el-form-item>
</div>
</el-form>
2022-12-13 09:37:06 +00:00
<#-- <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-row>
</div>
<#-- 销售合同清单明细 -->
<div class="am-u-sm-12 am-u-md-12" v-if="isSaleContractDetailMode">
<el-table border :data="saleContractDetails" @row-dblclick="dbclick">
<el-table-column type="index" :index="1" label="序号" fixed></el-table-column>
<el-table-column prop="name" label="名称" fixed width="120"></el-table-column>
2022-12-13 10:16:15 +00:00
<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>
2022-12-14 06:51:18 +00:00
<el-table-column prop="price" label="单价" width="120"></el-table-column>
2022-12-13 10:16:15 +00:00
<el-table-column prop="taxRate" label="税率"></el-table-column>
2022-12-14 06:51:18 +00:00
<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="expirationDate" label="质保期" fixed="right" width="150">
<template slot-scope="scope">
<el-input maxlength="5" size="mini" placeholder="请输入质保期"
v-model="scope.row.expirationDate"></el-input>
</template>
</el-table-column>
2022-12-13 09:37:06 +00:00
</el-table>
2022-12-13 10:16:15 +00:00
<el-row style="margin: 20px 0">
<el-button type="info" @click="goToSaleContractProcess">返回上一级</el-button>
<el-button type="primary" @click="submitToSaleContractProcess">保存并返回上一级</el-button>
2022-12-13 09:37:06 +00:00
</el-row>
2022-12-12 09:52:25 +00:00
</div>
<#-- 新增业务采购合同流程 -->
<div class="am-u-sm-12 am-u-md-12" id="newBusinessProcurementContractProcess" v-if="isBusinessProcurementContractProcessMode">
<form role="form" id="newBusinessProcurementContractProcessForm">
<div class="am-form-inline">
<div class="am-form-group">
<label class="am-u-md-3 am-form-label">项目编号</label>
2022-12-13 09:37:06 +00:00
<el-autocomplete v-model="processForm.serialNumber" :fetch-suggestions="queryProject"
2022-12-12 09:52:25 +00:00
placeholder="请输入内容" @select="handleSelectProject"></el-autocomplete>
</div>
<div class="am-form-group">
<label class="am-u-md-3 am-form-label">项目标题</label>
2022-12-13 09:37:06 +00:00
<el-input placeholder="请输入内容" v-model="processForm.title" clearable></el-input>
2022-12-12 09:52:25 +00:00
</div>
<div class="am-form-group">
<label class="am-u-md-3 am-form-label">申请时间</label>
2022-12-13 09:37:06 +00:00
<input type="text" class="am-form-field am-u-sm-2" :value="processForm.time"/>
2022-12-12 09:52:25 +00:00
</div>
<div class="am-form-group">
<label class="am-u-sm-3 am-form-label">采购模式</label>
2022-12-13 09:37:06 +00:00
<input type="text" class="am-form-field" :value="processForm.time"/>
2022-12-12 09:52:25 +00:00
</div>
<div class="am-form-group">
<label class="am-u-md-3 am-form-label">合作类型</label>
2022-12-13 09:37:06 +00:00
<input type="text" class="am-form-field" :value="processForm.time"/>
2022-12-12 09:52:25 +00:00
</div>
</div>
<div class="am-form-inline">
<div class="am-form-group am-u-md-4">
<label class="am-form-label">申请部门</label>
2022-12-13 09:37:06 +00:00
<input type="text" class="am-form-field" :value="processForm.title"/>
<input type="text" class="am-form-field" :value="processForm.time"/>
<input type="text" class="am-form-field" :value="processForm.time"/>
2022-12-12 09:52:25 +00:00
</div>
<div class="am-form-group am-u-md-4">
<label class="am-form-label">申请人</label>
<input type="text" class="am-form-field" value="周瑾"/>
</div>
<div class="am-form-group am-u-md-4">
<label class="am-form-label">申请部门领导</label>
<input type="text" class="am-form-field" value="尹浩"/>
</div>
</div>
<div class="am-form-inline">
</div>
<div class="am-form-inline">
<button type="submit" class="am-btn am-btn-default">登录</button>
</div>
</form>
</div>
2022-12-13 09:37:06 +00:00
<#-- 选择 业务采购清单明细 -->
<div class="am-u-sm-12 am-u-md-12" v-if="isBusinessProcurementContractProcessMode">
<el-table style="width: 100%" border>
<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="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>
</div>
2022-12-12 09:52:25 +00:00
</div>
</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 newBusinessProcurementContractProcess = "newBusinessProcurementContractProcess"
2022-12-13 09:37:06 +00:00
const saleContractProcess = "saleContractProcess"
const saleContractDetail = "saleContractDetail"
2022-12-12 09:52:25 +00:00
const BUTTON = "btn"
2022-12-13 09:37:06 +00:00
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)
}
2022-12-12 09:52:25 +00:00
const data = () => {
return {
mode: "btn", // btn , newBusinessProcurementContractProcess
2022-12-13 09:37:06 +00:00
processForm: {
sealType: [],
},
2022-12-12 09:52:25 +00:00
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: [],
2022-12-13 10:16:15 +00:00
saleContractDetails: [],
2022-12-12 09:52:25 +00:00
}
}
const methods = {
changeMode(mode) {
this.mode = mode
},
businessProcurementProcessClick() {
const that = this
},
2022-12-13 09:37:06 +00:00
goToHome() {
this.changeMode(BUTTON)
},
goToSaleContractProcess() {
this.changeMode(saleContractProcess)
},
goToSaleContractDetail() {
const { id } = this.processForm
if (id) {
this.changeMode(saleContractDetail)
const loading = this.$loading({
lock: true,
2022-12-14 06:51:18 +00:00
text: '销售合同清单明细',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)'
})
fetch("${base}/process/sale-contract-details/" + id)
.then(res => res.json())
.then(data => {
2022-12-14 06:51:18 +00:00
// 转换数据
// @formatter:off
const computeType = (type) => {
switch (type) {
case 1: return '设备'
case 2: return '工程'
case 3: return '服务'
default: return '未知'
}
}
// @formatter:on
this.saleContractDetails = data.map(detail => ({
...detail, type: computeType(detail.type)
}))
})
.catch(err => {
this.$message.error("销售合同清单明细加载失败");
})
.finally(() => loading.close())
}
else {
this.$message.warning("项目还未选择")
}
},
2022-12-13 10:16:15 +00:00
dbclick(row, event, column) {
row.input = !row.input
},
render(obj) {
console.log(obj)
2022-12-13 09:37:06 +00:00
},
2022-12-12 09:52:25 +00:00
queryProject(q, callback) {
2022-12-13 09:37:06 +00:00
if (isBlank(q)) {
return
}
2022-12-12 09:52:25 +00:00
fetch("${base}/process/projects?q=" + q)
.then(res => res.json())
.then(data => {
if (data.length === 0) {
2022-12-13 09:37:06 +00:00
callback([{
name: '未搜索到结果'
}])
}
else {
2022-12-13 10:16:15 +00:00
callback(data)
2022-12-12 09:52:25 +00:00
}
})
.catch(err => {
this.$message.error('项目搜索失败');
})
},
handleSelectProject(selected) {
const { id, name } = selected
2022-12-13 09:37:06 +00:00
if (!id) {
this.processForm = {}
return
}
2022-12-12 09:52:25 +00:00
const loading = this.$loading({
lock: true,
text: '正在加载项目',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)'
2022-12-13 09:37:06 +00:00
})
2022-12-12 09:52:25 +00:00
2022-12-13 09:37:06 +00:00
fetch("${base}/process/projects/" + id)
2022-12-12 09:52:25 +00:00
.then(res => res.json())
.then(data => {
2022-12-13 09:37:06 +00:00
this.processForm = {
sealType: [],
projectId: id,
applyDate: new Date().toLocaleDateString(),
...data
}
2022-12-12 09:52:25 +00:00
this.projectSelected = true
})
.catch(err => {
2022-12-13 09:37:06 +00:00
this.$message.error("项目'" + name + "'加载失败");
2022-12-12 09:52:25 +00:00
})
.finally(() => loading.close())
},
2022-12-13 09:37:06 +00:00
saveDraft() {
this.processForm.status = 'draft'
this.submit()
},
submit() {
this.$refs["saleContractProcessForm"].validate((valid) => {
if (valid) {
const loading = this.$loading({
lock: true,
text: '正在提交',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)'
})
const processForm = this.processForm
console.log(processForm)
fetch("${base}/process", {
method: 'POST', // or 'PUT'
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(processForm),
}).then(response => {
this.$message({
showClose: true,
message: '提交成功',
type: 'success'
})
2022-12-13 09:37:06 +00:00
}).catch(err => {
this.$message.error("项目提交失败");
}).finally(() => loading.close())
}
else {
return false;
}
})
},
2022-12-13 10:16:15 +00:00
submitToSaleContractProcess() {
const loading = this.$loading({
lock: true,
text: '正在提交',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)'
})
const form = this.saleContractDetails.map(detail => ({
id: detail.id, expirationDate: detail.expirationDate
}))
2022-12-13 10:16:15 +00:00
fetch("${base}/process/sale-contract-details", {
method: 'POST', // or 'PUT'
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(form),
2022-12-13 10:16:15 +00:00
}).then(response => {
this.$message({
showClose: true,
message: '提交成功',
type: 'success'
})
2022-12-13 10:16:15 +00:00
this.goToSaleContractProcess()
}).catch(err => {
this.$message.error("项目提交失败");
}).finally(() => loading.close())
},
2022-12-12 09:52:25 +00:00
handleRemove(file, fileList) {
console.log(file, fileList);
},
handlePreview(file) {
console.log(file);
},
handleExceed(files, fileList) {
this.$message.warning("当前限制选择 3 个文件,本次选择了 " + files.length + " 个文件,共选择了 +" + files.length + fileList.length + " 个文件");
},
beforeRemove(file, fileList) {
return this.$confirm("确定移除 " + file.name + "");
2022-12-13 09:37:06 +00:00
},
2022-12-12 09:52:25 +00:00
2022-12-13 09:37:06 +00:00
indexMethod(index) {
return index * 1;
}
2022-12-12 09:52:25 +00:00
}
new Vue({
el: '#app',
data,
computed: {
projectTitle() {
const { projectNo, name, applyPerson, applyDate } = this.processForm
2022-12-12 09:52:25 +00:00
if (projectNo && name) {
2022-12-13 09:37:06 +00:00
return projectNo.trim() + "-" + name.trim() + "-" + applyPerson + "-" + applyDate
2022-12-12 09:52:25 +00:00
}
return ""
},
isButtonMode() {
return this.mode === BUTTON
},
isBusinessProcurementContractProcessMode() {
return this.mode === newBusinessProcurementContractProcess
},
isSalesContractProcessMode() {
2022-12-13 09:37:06 +00:00
return this.mode === saleContractProcess
},
isSaleContractDetailMode() {
return this.mode === saleContractDetail
2022-12-12 09:52:25 +00:00
},
subTitle() {
switch (this.mode) {
case BUTTON:
return "新增流程"
2022-12-13 09:37:06 +00:00
case saleContractProcess:
2022-12-12 09:52:25 +00:00
return "新增销售合同流程"
2022-12-13 09:37:06 +00:00
case saleContractDetail:
return "销售合同清单明细"
2022-12-12 09:52:25 +00:00
case newBusinessProcurementContractProcess:
return "新增业务采购合同流程"
}
}
},
methods,
mounted() {
fetch("${base}/process/projects/135")
.then(res => res.json())
.then(data => {
this.processForm = {
sealType: [],
projectId: 135,
applyDate: new Date().toLocaleDateString(),
...data
}
this.projectSelected = true
})
.catch(err => {
this.$message.error("测试项目'加载失败");
})
},
2022-12-12 09:52:25 +00:00
})
</script>
</@defaultLayout.layout>