销售合同流程表单页面
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.Modifying;
|
||||
import org.springframework.data.jpa.repository.Query;
|
||||
import org.springframework.data.repository.query.Param;
|
||||
|
||||
import javax.transaction.Transactional;
|
||||
import java.util.Date;
|
||||
|
|
@ -38,4 +39,9 @@ public interface ProjectRepository extends JpaRepository<Project,Integer> {
|
|||
@Transactional(rollbackOn = Exception.class)
|
||||
@Query(value = "update project set approve_id=?, approve_name=? where approve_id = ?", nativeQuery = true)
|
||||
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