unis_sip/ruoyi-admin/src/main/resources/templates/project/info/edit.html

679 lines
26 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;
}
.discount-format::after{
content: "%"; /* 或其他后缀 */
position: absolute; /* 或使用 relative 和 left/right */
right: 5px; /* 根据需要调整 */
pointer-events: none; /* 防止点击后缀 */
}
.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;
}
.white-bg{
padding: 0px 50px;
}
</style>
<body class="white-bg">
<div class="wrapper wrapper-content animated fadeInRight ibox-content">
<form id="form-product-add" th:object="${projectInfo}">
<input type="hidden" name="id" th:field="*{id}">
<div style="display: flex;justify-content: space-between;">
<div class="section-title">项目信息</div>
<div>更新时间:<span style="margin-left: 10px" th:text="*{#dates.format(updateTime, 'yyyy-MM-dd')}"></span>
</div>
</div>
<table>
<tr>
<td class="shortTd">项目编号<span class="is-required">*</span></td>
<td colspan="2"><input type="text" th:field="*{projectCode}" 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" th:field="*{projectName}" name="projectName" maxlength="40"
placeholder="限制40个字符"
class="form-control"></td>
</tr>
<tr>
<td class="shortTd">BG<span class="is-required">*</span></td>
<td class="inputTd">
<select name="bgProperty" th:field="*{bgProperty}" class="form-control"
th:with="type=${@dict.getType('bg_type')}"
onchange="changeBg()" required>
<option value="">请选择BG</option>
<option th:each="dict : ${type}" th:text="${dict.dictLabel}"
th:value="${dict.dictValue}"></option>
</select>
</td>
<td class="shortTd">行业<span class="is-required">*</span></td>
<td id="industryTypeBox" class="inputTd">
<select name="industryType" th:field="*{industryType}" class="form-control"
required>
<option value="">请先选择BG</option>
</select>
</td>
<td class="shortTd"> 代表处 <span class="is-required">*</span></td>
<td id="element1" class="inputTd">
<input name="agentName" th:field="*{agentName}" class="form-control" type="text"
onclick="selectAgent()" required>
<input name="agentCode" th:field="*{agentCode}" class="form-control" type="hidden" required>
</td>
</tr>
<tr>
<td>项目阶段<span class="is-required">*</span></td>
<td>
<select name="projectStage" th:field="*{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" th:field="*{projectGraspDegree}" 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" class="form-control" type="text"
onclick="selectPeople()" th:field="*{hzSupportUserName}">
<input name="hzSupportUser" class="form-control" type="hidden" th:field="*{hzSupportUser}"></td>
</tr>
<tr>
<td class="shortTd">最终客户<span class="is-required">*</span></td>
<td><input name="customerName" class="form-control" th:field="*{customerName}" type="text" required
onclick="selectCustomer()">
<input name="customerCode" class="form-control" th:field="*{customerCode}" type="hidden"></td>
<td class="shortTd">客户联系人</td>
<td><input name="customerUserName" class="form-control" type="text" th:field="*{customerUserName}">
</td>
<td class="shortTd">客户 TEL</td>
<td><input name="customerPhone" class="form-control" type="text" th:field="*{customerPhone}">
</td>
</tr>
<tr>
<td>运作方</td>
<td >
<select name="operateInstitution" class="form-control"
th:with="type=${@dict.getType('operate_institution')}"
onchange="changeInstitution()" th:field="*{operateInstitution}">
<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" th:field="*{h3cPerson}"
>
</td>
<td>新华三TEL</td>
<td >
<input name="h3cPhone" class="form-control" type="text" th:field="*{h3cPhone}"
>
</td>
</tr>
<tr>
<td>代理商</td>
<td >
<input name="partnerName" class="form-control" type="text"
onclick="selectPartner()" th:field="*{partnerName}">
<input name="partnerCode" class="form-control" type="hidden" th:field="*{partnerCode}">
</td>
<td>代理商联系人</td>
<td><input name="partnerUserName" th:field="*{partnerUserName}" class="form-control" type="text"
></td>
<td>代理商 TEL</td>
<td><input name="contactWay" th:field="*{contactWay}" class="form-control" 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" th:field="*{estimatedAmount}" id="estimatedAmount" name="estimatedAmount"
class="form-control">
</td>
<td>预计下单时间</td>
<td><input name="estimatedOrderTime" autocomplete="off" class="form-control" placeholder="yyyy-MM-dd"
th:value="${#dates.format(projectInfo.estimatedOrderTime, 'yyyy-MM-dd')}"></td>
<td>POC测试</td>
<td>
<select name="poc" id="poc" class="form-control" th:field="*{poc}" 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" th:field="*{countryProduct}">
<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" th:field="*{keyProblem}"
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个字符" th:field="*{projectDesc}"></textarea>
</td>
</tr>
<tr>
<td>服务器配置</td>
<td colspan="5"><textarea name="serverConfiguration" class="form-control" maxlength="500" rows="2"
placeholder="限制500个字符" th:field="*{serverConfiguration}"></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="33" id="pocLogTab">POC记录</li>
<li lay-id="22">操作日志</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 class="layui-tab-item">
<table id="sysLog">
<thead>
<tr>
<th style="width: 50px;">序号</th>
<th style="width: 100px;">操作人员</th>
<th>操作内容</th>
<th style="width: 150px;">操作时间</th>
</tr>
</thead>
<tbody></tbody>
</table>
</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 = [[${projectInfo.softwareProjectProductInfoList}]] || []
softwareProjectProductInfoListAll.forEach((ele) => {
ele.cataloguePriceFormmat = ele.cataloguePrice ? formatAmountNumber(ele.cataloguePrice) : ""
ele.priceFormmat = ele.price ? formatAmountNumber(ele.price) : ""
ele.catalogueAllPriceFormmat = ele.catalogueAllPrice ? formatAmountNumber(ele.catalogueAllPrice) : ""
ele.allPriceFormmat = ele.allPrice ? formatAmountNumber(ele.allPrice) : ""
ele.discountFormat = ele.discount ? ele.discount*100 : ""
ele.guidanceDiscountFormat = ele.guidanceDiscount ? ele.guidanceDiscount*100 : ""
addProduct(ele)
})
let hardwareProjectProductInfoListAll = [[${projectInfo.hardwareProjectProductInfoList}]] || []
hardwareProjectProductInfoListAll.forEach((ele) => {
ele.cataloguePriceFormmat = ele.cataloguePrice ? formatAmountNumber(ele.cataloguePrice) : ""
ele.priceFormmat = ele.price ? formatAmountNumber(ele.price) : ""
ele.catalogueAllPriceFormmat = ele.catalogueAllPrice ? formatAmountNumber(ele.catalogueAllPrice) : ""
ele.allPriceFormmat = ele.allPrice ? formatAmountNumber(ele.allPrice) : ""
ele.discountFormat = ele.discount ? ele.discount*100 : ""
ele.guidanceDiscountFormat = ele.guidanceDiscount ? ele.guidanceDiscount*100 : ""
addProduct2(ele)
})
let maintenanceProjectProductInfoListAll = [[${projectInfo.maintenanceProjectProductInfoList}]] || []
maintenanceProjectProductInfoListAll.forEach((ele) => {
ele.cataloguePriceFormmat = ele.cataloguePrice ? formatAmountNumber(ele.cataloguePrice) : ""
ele.priceFormmat = ele.price ? formatAmountNumber(ele.price) : ""
ele.catalogueAllPriceFormmat = ele.catalogueAllPrice ? formatAmountNumber(ele.catalogueAllPrice) : ""
ele.allPriceFormmat = ele.allPrice ? formatAmountNumber(ele.allPrice) : ""
ele.discountFormat = ele.discount ? ele.discount*100 : ""
ele.guidanceDiscountFormat = ele.guidanceDiscount ? ele.guidanceDiscount*100 : ""
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');
} else {
displayInput.value = "";
}
}
function changePoc() {
let val = $('#poc').val();
console.log('----------------------------------')
console.log(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 + "/edit", $('#form-product-add').serialize());
} else {
$.modal.alertWarning("请完善表单");
}
}
$(function () {
let amount = [[${projectInfo.estimatedAmount}]] || ''
if (amount) {
document.getElementById('displayEstimatedAmount').value=amount.toLocaleString('en-US');
}
let pocVal = [[${projectInfo.poc}]];
if (pocVal==='0'){
$('#pocLogTab').attr('style','display:none')
}
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
});
initData()
})
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);
$.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 initData() {
let competitorList = [[${projectInfo.competitorList}]] || []
competitorList.forEach((ele, index) => {
if (ele) {
$(`input[type="checkbox"][value="${ele}"]`).attr('checked', true)
}
if ((!$(`input[type="checkbox"][value="${ele}"]`).length) && ele) {
$(`[name="competitorList[5]"]`).val(ele)
}
})
let arr2 = [[${projectInfo.projectWorkProgressList}]]
arr2.forEach((ele) => {
addLog(ele)
})
let arr3 = [[${projectInfo.projectOperateLogList}]]
arr3.forEach((ele, index) => {
let tr = $(`
<tr><td style="text-align: center">${index + 1}</td><td>${ele.operateUserName}</td><td>${ele.operateLog}</td><td>${ele.operateTime}</td></tr>
`)
$('#sysLog tbody').append(tr)
})
changeBg()
$('[name="industryType"]').val([[${projectInfo.industryType}]])
}
function addLog(data) {
let length = $('#workLog tbody').find('tr').length
let tr = $(`
<tr>
<td style="text-align: center;">${length + 1}</td>
<td><input type="hidden" value="${data.id || ''}" name="projectWorkProgressList[${length}].id">
<input type="text" onclick="showDetailValue(this)" name="projectWorkProgressList[${length}].workContent" class="form-control" required value="${data.workContent || ''}"></input></td>
<td><input type="text" class="form-control" placeholder="保存后自动填入" value="${data.userName || ''}" readonly></td>
<td><input type="text" class="form-control" placeholder="保存后自动填入" value="${data.workTime || ''}" readonly></td>
</tr>`)
$('#workLog tbody').append(tr)
}
function showDetailValue(ele, canUpdate) {
let msg = ele.value;
if (msg && !canUpdate) {
top.layer.alert(msg, {title: '更新内容'})
} else {
top.layer.prompt({
title: '请输入更新内容',
value: msg,
formType: 2
}, function (value, index, elem) {
ele.value = value;
// 关闭 prompt
top.layer.close(index);
});
}
}
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" required>
<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" required>
<option value="">请选择行业</option>
${str}
</select>
`)
}
}
</script>
</body>
</html>