607 lines
22 KiB
HTML
607 lines
22 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
|
|
<head>
|
|
<th:block th:include="include :: header('新增项目管理')"/>
|
|
<th:block th:include="include :: datetimepicker-css"/>
|
|
</head>
|
|
<style>
|
|
body {
|
|
font-family: "微软雅黑", Arial, sans-serif;
|
|
}
|
|
|
|
table {
|
|
border-collapse: collapse;
|
|
width: 100%;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
th, td {
|
|
border: 1px solid #ccc;
|
|
padding: 8px;
|
|
}
|
|
|
|
.is-required {
|
|
color: red;
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
font-size: 25px;
|
|
}
|
|
|
|
th {
|
|
background: #f5f5f5;
|
|
}
|
|
|
|
.section-title {
|
|
font-weight: bold;
|
|
font-size: 30px;
|
|
padding: 10px 0;
|
|
color: #0075ff;
|
|
}
|
|
.white-bg{
|
|
padding: 0px 50px;
|
|
}
|
|
.checkbox-group label {
|
|
margin-right: 20px;
|
|
}
|
|
.add-btn-div{
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
.add-btn {
|
|
background: #409eff;
|
|
color: #fff;
|
|
border: none;
|
|
padding: 5px 10px;
|
|
cursor: pointer;
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
.checkbox-box {
|
|
display: flex;
|
|
flex-direction: row;
|
|
gap: 10px;
|
|
}
|
|
|
|
.checkbox-box label {
|
|
display: flex;
|
|
flex-direction: row;
|
|
gap: 5px;
|
|
align-items: center;
|
|
}
|
|
|
|
.shortTd {
|
|
width: 130px;
|
|
}
|
|
.inputTd{
|
|
width: 27vw;
|
|
}
|
|
|
|
input, textarea, .productTable td {
|
|
position: relative;
|
|
}
|
|
|
|
.productTable label[id*="iscount"] {
|
|
top: -30px !important;
|
|
}
|
|
|
|
table tr:nth-child(odd) {
|
|
background: #f3f3f3;
|
|
}
|
|
|
|
input[type=checkbox], input[type=radio] {
|
|
margin-top: 0;
|
|
}
|
|
|
|
label {
|
|
margin-bottom: 0 !important;
|
|
}
|
|
/*[name="bgProperty"], #industryTypeBox select {*/
|
|
/* pointer-events: none;*/
|
|
/*}*/
|
|
</style>
|
|
<body class="white-bg">
|
|
<div class="wrapper wrapper-content animated fadeInRight ibox-content">
|
|
<form id="form-product-add">
|
|
<div class="section-title">项目信息</div>
|
|
<table class="table">
|
|
<tr>
|
|
<td class="shortTd">项目编号<span class="is-required">*</span></td>
|
|
<td colspan="2" ><input type="text" name="projectCode" class="form-control" placeholder="保存后自动生成"
|
|
readonly>
|
|
</td>
|
|
<td class="shortTd" style="text-align: right;">项目名称<span class="is-required">*</span></td>
|
|
<td colspan="2"><input type="text" name="projectName" maxlength="40" placeholder="限制40个字符"
|
|
class="form-control"></td>
|
|
|
|
|
|
<tr>
|
|
<td class="shortTd">BG</td>
|
|
<td class="inputTd">
|
|
<select name="bgProperty" class="form-control" th:with="type=${@dict.getType('bg_type')}"
|
|
onchange="changeBg()" >
|
|
<option value="">请选择BG</option>
|
|
<option th:each="dict : ${type}" th:text="${dict.dictLabel}"
|
|
th:value="${dict.dictValue}"></option>
|
|
</select>
|
|
</td>
|
|
<td class="shortTd">行业</td>
|
|
<td id="industryTypeBox" class="inputTd">
|
|
<select name="industryType" class="form-control"
|
|
>
|
|
<option value="">请先选择BG</option>
|
|
</select>
|
|
</td>
|
|
<td class="shortTd"> 代表处 <span class="is-required">*</span></td>
|
|
<td id="element1" class="inputTd">
|
|
<input name="agentName" class="form-control" type="text"
|
|
onclick="selectAgent()">
|
|
<input name="agentCode" class="form-control" type="hidden">
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>项目阶段<span class="is-required">*</span></td>
|
|
<td>
|
|
<select name="projectStage" class="form-control"
|
|
th:with="type=${@dict.getType('project_stage')}"
|
|
required>
|
|
<option value="">请选择合项目阶段</option>
|
|
<option th:each="dict : ${type}" th:text="${dict.dictLabel}"
|
|
th:value="${dict.dictValue}"></option>
|
|
</select>
|
|
</td>
|
|
<td>项目把握度<span class="is-required">*</span></td>
|
|
<td>
|
|
<select name="projectGraspDegree" class="form-control" required>
|
|
<option value="">请选择</option>
|
|
<option value="A">A</option>
|
|
<option value="B">B</option>
|
|
<option value="C">C</option>
|
|
|
|
</select>
|
|
</td>
|
|
<td>汇智责任人</td>
|
|
<td><input name="hzSupportUserName" th:value="${user.userName}" class="form-control" type="text"
|
|
onclick="selectPeople()">
|
|
<input name="hzSupportUser" th:value="${user.userId}" class="form-control" type="hidden"></td>
|
|
</tr>
|
|
<tr>
|
|
<td class="shortTd">最终客户<span class="is-required">*</span></td>
|
|
<td><input name="customerName" class="form-control" type="text" required onclick="selectCustomer()">
|
|
<input name="customerCode" class="form-control" type="hidden"></td>
|
|
<td class="shortTd">客户联系人</td>
|
|
<td><input name="customerUserName" class="form-control" type="text">
|
|
</td>
|
|
<td class="shortTd">最终客户 TEL</td>
|
|
<td><input name="customerPhone" maxlength="11" class="form-control" type="text">
|
|
</td>
|
|
</tr>
|
|
</tr>
|
|
<tr>
|
|
<td>运作方<span class="is-required">*</span></td>
|
|
<td >
|
|
<select name="operateInstitution" class="form-control"
|
|
th:with="type=${@dict.getType('operate_institution')}"
|
|
onchange="changeInstitution()">
|
|
<option value="">请选择合作渠道</option>
|
|
<option th:each="dict : ${type}" th:text="${dict.dictLabel}"
|
|
th:value="${dict.dictValue}"></option>
|
|
</select>
|
|
</td>
|
|
<td>新华三联系人</td>
|
|
<td >
|
|
<input name="h3cPerson" class="form-control" type="text"
|
|
>
|
|
</td>
|
|
<td>新华三TEL</td>
|
|
<td >
|
|
<input name="h3cPhone" class="form-control" type="text"
|
|
>
|
|
</td>
|
|
|
|
</tr>
|
|
<tr>
|
|
<td>代理商</td>
|
|
<td >
|
|
<input name="partnerName" class="form-control" type="text"
|
|
onclick="selectPartner()">
|
|
<input name="partnerCode" class="form-control" type="hidden">
|
|
</td>
|
|
<td>代理商联系人</td>
|
|
<td><input name="partnerUserName" class="form-control" type="text" ></td>
|
|
<td>代理商 TEL</td>
|
|
<td><input name="contactWay" class="form-control" maxlength="11" type="text"></td>
|
|
</tr>
|
|
<tr>
|
|
|
|
<td class="shortTd">预计金额(元)<span class="is-required">*</span></td>
|
|
<td>
|
|
<input type="text" required id="displayEstimatedAmount" class="form-control" placeholder="输入金额"
|
|
oninput="this.value = this.value.replace(/[^0-9.]/g,'').replace(/(\..*)\./g, '$1');"
|
|
onfocus="this.value=document.getElementById('estimatedAmount').value"
|
|
onblur="updateRawValue()">
|
|
<input type="hidden" id="estimatedAmount" name="estimatedAmount" class="form-control" >
|
|
</td>
|
|
<td>预计下单时间</td>
|
|
<td><input name="estimatedOrderTime" class="form-control" autocomplete="off" placeholder="yyyy-MM-dd"
|
|
></td>
|
|
<td>POC测试</td>
|
|
<td>
|
|
<select name="poc" id="poc" class="form-control" value="0" onchange="changePoc()">
|
|
<option value="0">否</option>
|
|
<option value="1">是</option>
|
|
</select>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>竞争对手</td>
|
|
<td colspan="3" class="checkbox-group">
|
|
<div class="checkbox-box">
|
|
<label><input type="checkbox" name="competitorList[0]" value="华为">华为</label>
|
|
<label><input type="checkbox" name="competitorList[1]" value="锐捷">锐捷</label>
|
|
<label><input type="checkbox" name="competitorList[2]" value="深信服">深信服</label>
|
|
<label><input type="checkbox" name="competitorList[3]" value="中兴">中兴</label>
|
|
<label><input type="checkbox" name="competitorList[4]" value="噢易云">噢易云</label>
|
|
<div style="float: right;display: flex;flex-display:row;align-items: center">
|
|
<span>其它：</span><input type="text" name="competitorList[5]" class="form-control"
|
|
style="width: 400px">
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</td>
|
|
<td>是否国产</td>
|
|
<td>
|
|
<select name="countryProduct" class="form-control">
|
|
<option value="">请选择</option>
|
|
<option value="1">是</option>
|
|
<option value="0">否</option>
|
|
</select>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>关键技术问题</td>
|
|
<td colspan="5"><textarea rows="2" type="text" name="keyProblem"
|
|
class="form-control" maxlength="500" placeholder="限制500个字符"></textarea></td>
|
|
</tr>
|
|
<tr>
|
|
<td>项目简述<span class="is-required">*</span></td>
|
|
<td colspan="5"><textarea name="projectDesc" rows="2"
|
|
class="form-control" required maxlength="500"
|
|
placeholder="限制500个字符"></textarea>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>服务器配置</td>
|
|
<td colspan="5"><textarea rows="2" name="serverConfiguration" class="form-control" maxlength="500"
|
|
placeholder="限制500个字符"></textarea></td>
|
|
|
|
</tr>
|
|
</table>
|
|
<div th:replace="layout/product-list::configInfoTable()"></div>
|
|
<div class="layui-tab">
|
|
<ul class="layui-tab-title">
|
|
<li class="layui-this" lay-id="11">工作进度</li>
|
|
<li lay-id="22" style="display: none" id="pocLogTab">POC测试</li>
|
|
</ul>
|
|
<div class="layui-tab-content">
|
|
<div class="layui-tab-item layui-show">
|
|
<div style="display: flex;flex-direction: row-reverse;">
|
|
<button type="button" class="add-btn" onclick="addLog()">添加</button>
|
|
</div>
|
|
|
|
<table id="workLog">
|
|
<thead>
|
|
<tr>
|
|
<th style="width: 50px">序号</th>
|
|
<th>更新内容</th>
|
|
<th style="width: 100px">更新人员</th>
|
|
<th style="width: 120px">更新时间</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody></tbody>
|
|
<!-- 可动态添加行 -->
|
|
</table>
|
|
</div>
|
|
<div class="layui-tab-item">
|
|
<div th:replace="project/info/common/pocLog::pocLog()"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<th:block th:include="include :: footer"/>
|
|
<th:block th:include="include :: datetimepicker-js"/>
|
|
<th:block th:include="include :: layui"/>
|
|
|
|
<script th:inline="javascript">
|
|
var prefix = ctx + "sip/project"
|
|
$("#form-product-add").validate({
|
|
focusCleanup: true
|
|
});
|
|
var softwareProjectProductInfoList = []
|
|
var hardwareProjectProductInfoList = []
|
|
var maintenanceProjectProductInfoList = []
|
|
|
|
function initProductList() {
|
|
let softwareProjectProductInfoListAll = []
|
|
softwareProjectProductInfoListAll.forEach((ele) => {
|
|
addProduct(ele)
|
|
})
|
|
let hardwareProjectProductInfoListAll = []
|
|
hardwareProjectProductInfoListAll.forEach((ele) => {
|
|
addProduct2(ele)
|
|
})
|
|
let maintenanceProjectProductInfoListAll = []
|
|
maintenanceProjectProductInfoListAll.forEach((ele) => {
|
|
addProduct3(ele)
|
|
})
|
|
|
|
}
|
|
function updateRawValue() {
|
|
// 获取显示用的输入框
|
|
const displayInput = document.getElementById('displayEstimatedAmount');
|
|
// 获取隐藏字段
|
|
const rawInput = document.getElementById('estimatedAmount');
|
|
// 去除逗号并过滤非数字字符
|
|
let rawValue =displayInput.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');
|
|
|
|
// 更新隐藏字段的值
|
|
rawInput.value = rawValue;
|
|
|
|
// 格式化显示（可选）
|
|
if (rawValue) {
|
|
displayInput.value = Number(rawValue).toLocaleString('en-US');
|
|
}
|
|
}
|
|
function changePoc() {
|
|
let val = $('#poc').val();
|
|
if (val==='0'){
|
|
$('#pocLogTab').attr('style','display:none')
|
|
}else{
|
|
$('#pocLogTab').attr('style','display:inline')
|
|
}
|
|
}
|
|
|
|
function submitHandler() {
|
|
let activeTabIndex=$('.layui-tab-title .layui-this').index();
|
|
if (activeTabIndex!==1 && $('#poc').val() ==='1' && validatePoc()){
|
|
$.modal.alertWarning("请完善POC记录信息");
|
|
return ;
|
|
}
|
|
if ($.validate.form()) {
|
|
$.operate.save(prefix + "/add", $('#form-product-add').serialize());
|
|
} else {
|
|
$.modal.alertWarning("请完善表单");
|
|
}
|
|
}
|
|
|
|
$(function () {
|
|
initProductList()
|
|
$("input[name='estimatedOrderTime']").datetimepicker({
|
|
format: "yyyy-mm-dd",
|
|
minView: "month",
|
|
autoclose: true
|
|
});
|
|
$("input[name='estimatedDeliverTime']").datetimepicker({
|
|
format: "yyyy-mm-dd",
|
|
minView: "month",
|
|
autoclose: true
|
|
});
|
|
|
|
})
|
|
|
|
function selectCustomer() {
|
|
var url = prefix + "/selectCustomer";
|
|
var options = {
|
|
title: '选择客户',
|
|
width: "800",
|
|
url: url,
|
|
height: '600',
|
|
callBack: doSubmitCustomer
|
|
};
|
|
$.modal.openOptions(options);
|
|
}
|
|
|
|
function selectPartner() {
|
|
var url = prefix + "/selectPartner";
|
|
var options = {
|
|
title: '选择代理商',
|
|
width: "800",
|
|
height: '600',
|
|
url: url,
|
|
callBack: doSubmitPartner
|
|
};
|
|
$.modal.openOptions(options);
|
|
}
|
|
|
|
function selectAgent() {
|
|
var url = prefix + "/selectAgent";
|
|
var options = {
|
|
title: '选择代表处',
|
|
width: "800",
|
|
height: '600',
|
|
url: url,
|
|
callBack: doSubmitAgent
|
|
};
|
|
$.modal.openOptions(options);
|
|
}
|
|
|
|
function selectPeople() {
|
|
var url = prefix + "/selectPeople";
|
|
var options = {
|
|
title: '选择责任人',
|
|
width: "800",
|
|
height: '600',
|
|
url: url,
|
|
callBack: doSubmitPeople
|
|
};
|
|
$.modal.openOptions(options);
|
|
}
|
|
|
|
|
|
function doSubmitCustomer(index, layero) {
|
|
var rows = layero.find("iframe")[0].contentWindow.getSelections();
|
|
if (rows.length == 0) {
|
|
$.modal.alertWarning("请选择一个客户");
|
|
return;
|
|
}
|
|
$('[name="customerCode"]').val(rows[0].customerCode);
|
|
$('[name="customerName"]').val(rows[0].customerName);
|
|
$('[name="customerUserName"]').val(rows[0].contactPerson);
|
|
$('[name="customerPhone"]').val(rows[0].contactPhone);
|
|
// $('[name="bgProperty"]').val(rows[0].bgProperty);
|
|
// changeBg()
|
|
// $('[name="industryType"]').val(rows[0].industryType);
|
|
|
|
$.modal.close(index);
|
|
}
|
|
|
|
function doSubmitPartner(index, layero) {
|
|
var rows = layero.find("iframe")[0].contentWindow.getSelections();
|
|
if (rows.length == 0) {
|
|
$.modal.alertWarning("请选择一个代理商");
|
|
return;
|
|
}
|
|
$('[name="partnerCode"]').val(rows[0].partnerCode);
|
|
$('[name="partnerName"]').val(rows[0].partnerName);
|
|
$('[name="partnerUserName"]').val(rows[0].contactPerson);
|
|
// $('[name="partnerEmail"]').val(rows[0].concactEmail);
|
|
$('[name="contactWay"]').val(rows[0].contactPhone);
|
|
|
|
$.modal.close(index);
|
|
}
|
|
|
|
function doSubmitPeople(index, layero) {
|
|
var rows = layero.find("iframe")[0].contentWindow.getSelections();
|
|
if (rows.length == 0) {
|
|
$.modal.alertWarning("请选择一个责任人");
|
|
return;
|
|
}
|
|
$('[name="hzSupportUser"]').val(rows[0].userId);
|
|
$('[name="hzSupportUserName"]').val(rows[0].userName);
|
|
|
|
$.modal.close(index);
|
|
}
|
|
|
|
function doSubmitAgent(index, layero) {
|
|
var rows = layero.find("iframe")[0].contentWindow.getSelections();
|
|
if (rows.length == 0) {
|
|
$.modal.alertWarning("请选择一个代表处");
|
|
return;
|
|
}
|
|
$('[name="agentCode"]').val(rows[0].agentCode);
|
|
$('[name="agentName"]').val(rows[0].agentName);
|
|
|
|
$.modal.close(index);
|
|
}
|
|
|
|
// 添加软件
|
|
|
|
|
|
function addLog() {
|
|
let length = $('#workLog tbody').find('tr').length
|
|
let tr = $(`
|
|
<tr>
|
|
<td>${length + 1}</td>
|
|
<td><textarea type="text" name="projectWorkProgressList[${length}].workContent" class="form-control" required></textarea></td>
|
|
<td><input type="text" class="form-control" placeholder="保存后自动填入" readonly></td>
|
|
<td><input type="text" class="form-control" placeholder="保存后自动填入" readonly></td>
|
|
</tr>`)
|
|
$('#workLog tbody').append(tr)
|
|
|
|
}
|
|
function addPocLog(data) {
|
|
let length = $('#workLog tbody').find('tr').length
|
|
let tr = $(`
|
|
<tr>
|
|
|
|
<td><input type="hidden" value="${data.id || ''}" name="projectPocInfo.id">
|
|
<input type="text" onclick="showDetailValue(this,true)" name="projectPocInfo.testEnvironment" class="form-control" required value="${data.testEnvironment || ''}"></input></td>
|
|
<td><input type="text" onclick="showDetailValue(this,true)" name="projectPocInfo.testProgress" class="form-control" required value="${data.testProgress || ''}"></input></td>
|
|
<td><input type="text" onclick="showDetailValue(this,true)" name="projectPocInfo.projectUserInfo" class="form-control" required value="${data.projectUserInfo || ''}"></input></td>
|
|
<td><input name="projectPocInfo.startDate" autocomplete="off" class="form-control" placeholder="yyyy-MM-dd"></td>
|
|
<td><input name="projectPocInfo.planFinishTime" autocomplete="off" class="form-control" placeholder="yyyy-MM-dd"></td>
|
|
<td><input name="projectPocInfo.realFinishTime" autocomplete="off" class="form-control" placeholder="yyyy-MM-dd"></td>
|
|
|
|
</tr>`)
|
|
$('#pocLog tbody').append(tr)
|
|
$("input[name='projectPocInfo.startDate']").datetimepicker({
|
|
format: "yyyy-mm-dd",
|
|
minView: "month",
|
|
autoclose: true,
|
|
pickerPosition:"top-right"
|
|
});
|
|
$("input[name='projectPocInfo.planFinishTime']").datetimepicker({
|
|
format: "yyyy-mm-dd",
|
|
minView: "month",
|
|
autoclose: true,
|
|
pickerPosition:"top-right"
|
|
});
|
|
$("input[name='projectPocInfo.realFinishTime']").datetimepicker({
|
|
format: "yyyy-mm-dd",
|
|
minView: "month",
|
|
autoclose: true,
|
|
pickerPosition:"top-right"
|
|
});
|
|
|
|
}
|
|
function initSearchProduct(type) {
|
|
// $('.productTable .delRow').on('click', function () {
|
|
// let ele = $(this)
|
|
// $.modal.confirm('是否确认删除', function () {
|
|
// $(ele).parent().parent().remove()
|
|
// $('#productTable tbody tr').each((index, item) => {
|
|
// $(item).find('.indexBox').text(index + 1)
|
|
// })
|
|
// $('#productTable2 tbody tr').each((index, item) => {
|
|
// $(item).find('.indexBox').text(index + 1)
|
|
// })
|
|
// $('#productTable3 tbody tr').each((index, item) => {
|
|
// $(item).find('.indexBox').text(index + 1)
|
|
// })
|
|
//
|
|
// });
|
|
// })
|
|
}
|
|
|
|
|
|
|
|
function changeInstitution() {
|
|
if ($('[name="operateInstitution"]').val() == 'h3c') {
|
|
$('[name="partnerName"]').val('新华三')
|
|
$('[name="partnerCode"]').val('')
|
|
}
|
|
}
|
|
|
|
function changeBg() {
|
|
if ($('[name="bgProperty"]').val() != 'YYS') {
|
|
let datas = [[${@dict.getType('bg_hysy')}]]
|
|
let str = ``
|
|
datas.forEach((ele) => {
|
|
str += `<option value="${ele.dictValue}">${ele.dictLabel}</option> `
|
|
})
|
|
$('#industryTypeBox').html(`
|
|
<select name="industryType" class="form-control" >
|
|
<option value="">请选择行业</option>
|
|
${str}
|
|
</select>
|
|
`)
|
|
} else {
|
|
let datas = [[${@dict.getType('bg_yys')}]]
|
|
let str = ``
|
|
datas.forEach((ele) => {
|
|
str += `<option value="${ele.dictValue}">${ele.dictLabel}</option> `
|
|
})
|
|
$('#industryTypeBox').html(`
|
|
<select name="industryType" class="form-control" >
|
|
<option value="">请选择行业</option>
|
|
${str}
|
|
</select>
|
|
`)
|
|
}
|
|
|
|
|
|
}
|
|
</script>
|
|
</body>
|
|
</html> |