销售合同流程表单页面
Harry Yang
parent
c594169b9e
commit
72248b160e
|
|
@ -0,0 +1,76 @@
|
||||||
|
package cn.palmte.work.controller.backend;
|
||||||
|
|
||||||
|
import org.springframework.stereotype.Controller;
|
||||||
|
import org.springframework.web.bind.annotation.GetMapping;
|
||||||
|
import org.springframework.web.bind.annotation.PathVariable;
|
||||||
|
import org.springframework.web.bind.annotation.RequestMapping;
|
||||||
|
import org.springframework.web.bind.annotation.RequestParam;
|
||||||
|
import org.springframework.web.bind.annotation.ResponseBody;
|
||||||
|
|
||||||
|
import java.util.HashMap;
|
||||||
|
import java.util.List;
|
||||||
|
import java.util.Map;
|
||||||
|
import java.util.stream.Collectors;
|
||||||
|
|
||||||
|
import cn.palmte.work.model.Project;
|
||||||
|
import cn.palmte.work.model.ProjectRepository;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @author <a href="https://github.com/TAKETODAY">Harry Yang</a>
|
||||||
|
* @since 1.0 2022/12/8 11:03
|
||||||
|
*/
|
||||||
|
@Controller
|
||||||
|
@RequestMapping("/process")
|
||||||
|
public class ProcessController {
|
||||||
|
|
||||||
|
private final ProjectRepository projectRepository;
|
||||||
|
|
||||||
|
public ProcessController(ProjectRepository projectRepository) {
|
||||||
|
this.projectRepository = projectRepository;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 新建流程
|
||||||
|
*/
|
||||||
|
@GetMapping("/new")
|
||||||
|
public String newProcess() {
|
||||||
|
return "/admin/business/process-new";
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 已办流程
|
||||||
|
*/
|
||||||
|
@GetMapping("/completed")
|
||||||
|
public String completed() {
|
||||||
|
return "/admin/business/process-completed";
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 待我审核
|
||||||
|
*/
|
||||||
|
@GetMapping("/review")
|
||||||
|
public String review() {
|
||||||
|
return "/admin/business/process-review";
|
||||||
|
}
|
||||||
|
|
||||||
|
@ResponseBody
|
||||||
|
@GetMapping("/projects")
|
||||||
|
public List<Map<String, Object>> query(@RequestParam String q) {
|
||||||
|
return projectRepository.findByProjectNoOrName(q)
|
||||||
|
.stream()
|
||||||
|
.map(project -> {
|
||||||
|
HashMap<String, Object> map = new HashMap<>();
|
||||||
|
map.put("id", project.getId());
|
||||||
|
map.put("name", project.getName());
|
||||||
|
return map;
|
||||||
|
})
|
||||||
|
.collect(Collectors.toList());
|
||||||
|
}
|
||||||
|
|
||||||
|
@ResponseBody
|
||||||
|
@GetMapping("/projects/{id}")
|
||||||
|
public Project query(@PathVariable int id) {
|
||||||
|
return projectRepository.findById(id);
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
@ -3,6 +3,7 @@ package cn.palmte.work.model;
|
||||||
import org.springframework.data.jpa.repository.JpaRepository;
|
import org.springframework.data.jpa.repository.JpaRepository;
|
||||||
import org.springframework.data.jpa.repository.Modifying;
|
import org.springframework.data.jpa.repository.Modifying;
|
||||||
import org.springframework.data.jpa.repository.Query;
|
import org.springframework.data.jpa.repository.Query;
|
||||||
|
import org.springframework.data.repository.query.Param;
|
||||||
|
|
||||||
import javax.transaction.Transactional;
|
import javax.transaction.Transactional;
|
||||||
import java.util.Date;
|
import java.util.Date;
|
||||||
|
|
@ -38,4 +39,9 @@ public interface ProjectRepository extends JpaRepository<Project,Integer> {
|
||||||
@Transactional(rollbackOn = Exception.class)
|
@Transactional(rollbackOn = Exception.class)
|
||||||
@Query(value = "update project set approve_id=?, approve_name=? where approve_id = ?", nativeQuery = true)
|
@Query(value = "update project set approve_id=?, approve_name=? where approve_id = ?", nativeQuery = true)
|
||||||
int batchUpdateApprove(int targetAdminId, String targetAdminName, int adminId);
|
int batchUpdateApprove(int targetAdminId, String targetAdminName, int adminId);
|
||||||
|
|
||||||
|
@Query(value = "select * from project where `project_no` like concat('%', :q, '%') or `name` like concat('%', :q, '%')",
|
||||||
|
nativeQuery = true)
|
||||||
|
List<Project> findByProjectNoOrName(@Param("q") String query);
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 991 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 993 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
|
|
@ -0,0 +1,44 @@
|
||||||
|
<#assign base=request.contextPath />
|
||||||
|
<#import "../../common/defaultLayout.ftl" as defaultLayout>
|
||||||
|
<@defaultLayout.layout>
|
||||||
|
<style>
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<div id="app">{{ message }}</div>
|
||||||
|
|
||||||
|
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
const {createApp} = Vue
|
||||||
|
|
||||||
|
createApp({
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
message: 'Hello Vue!'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}).mount('#app')
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<script type="text/javascript">
|
||||||
|
$(function () {
|
||||||
|
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
</@defaultLayout.layout>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -0,0 +1,669 @@
|
||||||
|
<#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;
|
||||||
|
}
|
||||||
|
|
||||||
|
</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">
|
||||||
|
<button type="button" class="am-btn" @click="salesContractProcessClick">
|
||||||
|
<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="isBusinessProcurementContractProcessMode">
|
||||||
|
<el-table style="width: 100%">
|
||||||
|
|
||||||
|
<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>
|
||||||
|
|
||||||
|
<#-- 新增销售合同流程 -->
|
||||||
|
|
||||||
|
<div class="am-u-sm-12 am-u-md-12" v-if="isSalesContractProcessMode">
|
||||||
|
<el-form :inline="true" :model="project" label-position="right" label-width="100px">
|
||||||
|
|
||||||
|
<div class="am-form-inline">
|
||||||
|
<el-tooltip :disabled="projectSelected" effect="light" content="项目编号或名称，支持模糊查询" placement="top-end">
|
||||||
|
<el-form-item label="项目编号">
|
||||||
|
<el-autocomplete v-model="project.projectNo" :fetch-suggestions="queryProject"
|
||||||
|
placeholder="请输入项目编号或名称" @select="handleSelectProject">
|
||||||
|
</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="申请时间">
|
||||||
|
<el-input placeholder="请输入内容" :disabled="projectSelected" v-model="project.title"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
|
||||||
|
<el-form-item label="项目类型">
|
||||||
|
<el-input placeholder="请输入内容" :disabled="projectSelected" v-model="project.typeDesc"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
|
||||||
|
<el-form-item label="合作类型">
|
||||||
|
<el-input placeholder="请输入内容" :disabled="projectSelected" v-model="project.cooperateTypeStr"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
|
||||||
|
<el-form-item label="申请部门">
|
||||||
|
<el-cascader :options="applySectorOptions" clearable></el-cascader>
|
||||||
|
</el-form-item>
|
||||||
|
|
||||||
|
<el-form-item label="申请人">
|
||||||
|
<el-input placeholder="请输入内容" :disabled="projectSelected" v-model="project.cooperateTypeStr"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
|
||||||
|
<el-form-item label="申请部门领导">
|
||||||
|
<el-input placeholder="请输入内容" :disabled="projectSelected" v-model="project.cooperateTypeStr"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
|
||||||
|
<el-form-item label="申请人电话">
|
||||||
|
<el-input placeholder="请输入内容" v-model="project.cooperateTypeStr"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
|
||||||
|
<el-form-item label="合同编号">
|
||||||
|
<el-input placeholder="请输入合同编号" v-model="project.contractNumber"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
|
||||||
|
<el-form-item label="合同名称">
|
||||||
|
<el-input placeholder="请输入合同名称" v-model="project.contractName"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
|
||||||
|
<el-form-item label="合同金额">
|
||||||
|
<el-input placeholder="请输入内容" :disabled="projectSelected" v-model="project.contractAmount"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<el-form-item label="客户名称">
|
||||||
|
<el-input placeholder="请输入客户名称" v-model="project.contractNumber"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
|
||||||
|
<el-form-item label="最终用户名称">
|
||||||
|
<el-input placeholder="请输入最终用户名称" v-model="project.contractName"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<el-form-item label="用印类型">
|
||||||
|
<el-checkbox-group v-model="project.sealType">
|
||||||
|
<el-checkbox label="公章"></el-checkbox>
|
||||||
|
<el-checkbox label="法人章"></el-checkbox>
|
||||||
|
<el-checkbox label="合同专用章"></el-checkbox>
|
||||||
|
<el-checkbox label="项目章"></el-checkbox>
|
||||||
|
<el-checkbox label="法人签名章"></el-checkbox>
|
||||||
|
<el-checkbox label="总经理签名章"></el-checkbox>
|
||||||
|
<el-checkbox label="财务专用章"></el-checkbox>
|
||||||
|
<el-checkbox label="电子合同章"></el-checkbox>
|
||||||
|
<el-checkbox label="其他"></el-checkbox>
|
||||||
|
</el-checkbox-group>
|
||||||
|
</el-form-item>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
|
||||||
|
<el-form-item label="税率">
|
||||||
|
<el-select v-model="project.rate" placeholder="请选择税率">
|
||||||
|
<el-option label="0%" value="1"></el-option>
|
||||||
|
<el-option label="1%" value="1"></el-option>
|
||||||
|
<el-option label="3%" value="1"></el-option>
|
||||||
|
<el-option label="4%" value="1"></el-option>
|
||||||
|
<el-option label="5%" value="1"></el-option>
|
||||||
|
<el-option label="6%" value="1"></el-option>
|
||||||
|
<el-option label="9%" value="1"></el-option>
|
||||||
|
<el-option label="10%" value="1"></el-option>
|
||||||
|
<el-option label="13%" value="1"></el-option>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
|
||||||
|
<el-form-item label="是否垫资">
|
||||||
|
<el-input placeholder="请输入最终用户名称" v-model="project.contractName"></el-input>
|
||||||
|
</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>
|
||||||
|
<el-form-item label="收款条件">
|
||||||
|
<el-input type="textarea" :autosize="{ minRows: 3, maxRows: 10}" cols="90"
|
||||||
|
v-model="project.desc" placeholder="请输入收款条件（限制5000字）"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<el-form-item label="备注">
|
||||||
|
<el-input type="textarea" :autosize="{ minRows: 3, maxRows: 10}"
|
||||||
|
v-model="project.desc" placeholder="请输入备注（限制5000字）" cols="90"></el-input>
|
||||||
|
</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="合同清单明细">
|
||||||
|
<el-button type="text">详细清单</el-button>
|
||||||
|
</el-form-item>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</el-form>
|
||||||
|
|
||||||
|
</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>
|
||||||
|
|
||||||
|
<el-autocomplete v-model="project.serialNumber" :fetch-suggestions="queryProject"
|
||||||
|
placeholder="请输入内容" @select="handleSelectProject"></el-autocomplete>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="am-form-group">
|
||||||
|
<label class="am-u-md-3 am-form-label">项目标题</label>
|
||||||
|
<el-input placeholder="请输入内容" v-model="project.title" clearable></el-input>
|
||||||
|
</div>
|
||||||
|
<div class="am-form-group">
|
||||||
|
<label class="am-u-md-3 am-form-label">申请时间</label>
|
||||||
|
<input type="text" class="am-form-field am-u-sm-2" :value="project.time"/>
|
||||||
|
</div>
|
||||||
|
<div class="am-form-group">
|
||||||
|
<label class="am-u-sm-3 am-form-label">采购模式</label>
|
||||||
|
<input type="text" class="am-form-field" :value="project.time"/>
|
||||||
|
</div>
|
||||||
|
<div class="am-form-group">
|
||||||
|
<label class="am-u-md-3 am-form-label">合作类型</label>
|
||||||
|
<input type="text" class="am-form-field" :value="project.time"/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="am-form-inline">
|
||||||
|
|
||||||
|
<div class="am-form-group am-u-md-4">
|
||||||
|
<label class="am-form-label">申请部门</label>
|
||||||
|
<input type="text" class="am-form-field" :value="project.title"/>
|
||||||
|
<input type="text" class="am-form-field" :value="project.time"/>
|
||||||
|
<input type="text" class="am-form-field" :value="project.time"/>
|
||||||
|
</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>
|
||||||
|
|
||||||
|
</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"
|
||||||
|
const salesContractProcess = "salesContractProcess"
|
||||||
|
const BUTTON = "btn"
|
||||||
|
|
||||||
|
const data = () => {
|
||||||
|
return {
|
||||||
|
mode: "btn", // btn , newBusinessProcurementContractProcess
|
||||||
|
project: {},
|
||||||
|
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: [],
|
||||||
|
businessPurchaseDetails: [
|
||||||
|
{
|
||||||
|
fee: 100
|
||||||
|
}
|
||||||
|
],
|
||||||
|
showBusinessPurchaseDetails: false,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const methods = {
|
||||||
|
changeMode(mode) {
|
||||||
|
this.mode = mode
|
||||||
|
},
|
||||||
|
|
||||||
|
salesContractProcessClick() {
|
||||||
|
this.changeMode(salesContractProcess)
|
||||||
|
},
|
||||||
|
|
||||||
|
businessProcurementProcessClick() {
|
||||||
|
const that = this
|
||||||
|
},
|
||||||
|
|
||||||
|
queryProject(q, callback) {
|
||||||
|
fetch("${base}/process/projects?q=" + q)
|
||||||
|
.then(res => res.json())
|
||||||
|
.then(data => {
|
||||||
|
if (data.length === 0) {
|
||||||
|
|
||||||
|
}
|
||||||
|
callback(data.map(project => ({
|
||||||
|
value: project.name,
|
||||||
|
id: project.id,
|
||||||
|
})))
|
||||||
|
})
|
||||||
|
.catch(err => {
|
||||||
|
this.$message.error('项目搜索失败');
|
||||||
|
})
|
||||||
|
},
|
||||||
|
handleSelectProject(selected) {
|
||||||
|
const loading = this.$loading({
|
||||||
|
lock: true,
|
||||||
|
text: '正在加载项目',
|
||||||
|
spinner: 'el-icon-loading',
|
||||||
|
background: 'rgba(0, 0, 0, 0.7)'
|
||||||
|
});
|
||||||
|
|
||||||
|
fetch("${base}/process/projects/" + selected.id)
|
||||||
|
.then(res => res.json())
|
||||||
|
.then(data => {
|
||||||
|
this.project = data
|
||||||
|
this.projectSelected = true
|
||||||
|
})
|
||||||
|
.catch(err => {
|
||||||
|
this.$message.error('项目\'' + selected.value + '\'加载失败');
|
||||||
|
})
|
||||||
|
.finally(() => loading.close())
|
||||||
|
},
|
||||||
|
|
||||||
|
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 + "？");
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
new Vue({
|
||||||
|
el: '#app',
|
||||||
|
data,
|
||||||
|
computed: {
|
||||||
|
projectTitle() {
|
||||||
|
const {projectNo, name, applyPerson, applyTime} = this.project
|
||||||
|
if (projectNo && name) {
|
||||||
|
return projectNo + "-" + name + "-" + applyPerson + "-" + applyTime
|
||||||
|
}
|
||||||
|
return ""
|
||||||
|
},
|
||||||
|
isButtonMode() {
|
||||||
|
return this.mode === BUTTON
|
||||||
|
},
|
||||||
|
isBusinessProcurementContractProcessMode() {
|
||||||
|
return this.mode === newBusinessProcurementContractProcess
|
||||||
|
},
|
||||||
|
isSalesContractProcessMode() {
|
||||||
|
return this.mode === salesContractProcess
|
||||||
|
},
|
||||||
|
subTitle() {
|
||||||
|
switch (this.mode) {
|
||||||
|
case BUTTON:
|
||||||
|
return "新增流程"
|
||||||
|
case salesContractProcess:
|
||||||
|
return "新增销售合同流程"
|
||||||
|
case newBusinessProcurementContractProcess:
|
||||||
|
return "新增业务采购合同流程"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
methods,
|
||||||
|
})
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
</@defaultLayout.layout>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -0,0 +1,44 @@
|
||||||
|
<#assign base=request.contextPath />
|
||||||
|
<#import "../../common/defaultLayout.ftl" as defaultLayout>
|
||||||
|
<@defaultLayout.layout>
|
||||||
|
<style>
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<div id="app">{{ message }}</div>
|
||||||
|
|
||||||
|
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
const {createApp} = Vue
|
||||||
|
|
||||||
|
createApp({
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
message: 'Hello Vue!'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}).mount('#app')
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<script type="text/javascript">
|
||||||
|
$(function () {
|
||||||
|
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
</@defaultLayout.layout>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
Loading…
Reference in New Issue