feat(partner): 优化合作伙伴表单的授权级别逻辑

- 在添加和编辑页面中,根据授权级别动态显示必填字段
- 当授权级别为"04"时,隐藏联系邮箱和系统用户相关字段的必填标志
- 使用 jQuery 优化了代码结构,提高了页面加载和交互性能
dev_1.0.0
chenhao 2025-09-15 14:52:31 +08:00
parent 436fed388f
commit e716fbf0b6
2 changed files with 375 additions and 337 deletions

View File

@ -1,178 +1,195 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" > <html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head> <head>
<th:block th:include="include :: header('新增代理商管理')" /> <th:block th:include="include :: header('新增代理商管理')" />
</head> </head>
<body class="white-bg"> <body class="white-bg">
<div class="wrapper wrapper-content animated fadeInRight ibox-content"> <div class="wrapper wrapper-content animated fadeInRight ibox-content">
<div id="showTitle" class="col-xs-12"><label class="col-sm-12 control-label" style=" text-align: center; <div id="showTitle" class="col-xs-12"><label class="col-sm-12 control-label" style=" text-align: center;
font-size: 20px; font-size: 20px;
color: #f8ac59;">创建代理商之前请先创建代理商用户</label></div> color: #f8ac59;">创建代理商之前请先创建代理商用户</label></div>
<form class="form-horizontal m" id="form-partner-add"> <form class="form-horizontal m" id="form-partner-add">
<div class="col-xs-6"> <div class="col-xs-6">
<div class="form-group"> <div class="form-group">
<label class="col-sm-4 control-label">代理商编码:</label> <label class="col-sm-4 control-label">代理商编码:</label>
<div class="col-sm-8"> <div class="col-sm-8">
<input name="partnerCode" readonly placeholder="编码自动生成" class="form-control" type="text" > <input name="partnerCode" readonly placeholder="编码自动生成" class="form-control" type="text" >
</div> </div>
</div> </div>
</div> </div>
<div class="col-xs-6"> <div class="col-xs-6">
<div class="form-group"> <div class="form-group">
<label class="col-sm-4 control-label is-required">代理商名称:</label> <label class="col-sm-4 control-label is-required">代理商名称:</label>
<div class="col-sm-8"> <div class="col-sm-8">
<input name="partnerName" class="form-control" type="text" required> <input name="partnerName" class="form-control" type="text" required>
</div> </div>
</div> </div>
</div> </div>
<div id="element1" class="col-xs-12" style="padding: 0"> <div id="element1" class="col-xs-12" style="padding: 0">
<div class="col-xs-6"> <div class="col-xs-6">
<div class="form-group"> <div class="form-group">
<label class="col-sm-4 control-label is-required" >省:</label> <label class="col-sm-4 control-label is-required" >省:</label>
<div class="col-sm-8"> <div class="col-sm-8">
<select name="province" class="province form-control m-b" data-first-title="选择省" required> <select name="province" class="province form-control m-b" data-first-title="选择省" required>
<option value="">请选择</option> <option value="">请选择</option>
</select> </select>
</div> </div>
</div> </div>
</div> </div>
<div class="col-xs-6"> <div class="col-xs-6">
<div class="form-group"> <div class="form-group">
<label class="col-sm-4 control-label is-required">市:</label> <label class="col-sm-4 control-label is-required">市:</label>
<div class="col-sm-8"> <div class="col-sm-8">
<select name="city" class="city form-control m-b" data-first-title="选择市" required> <select name="city" class="city form-control m-b" data-first-title="选择市" required>
<option value="">请选择</option> <option value="">请选择</option>
</select> </select>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="col-xs-6"> <div class="col-xs-6">
<div class="form-group"> <div class="form-group">
<label class="col-sm-4 control-label is-required">认证级别:</label> <label class="col-sm-4 control-label is-required">认证级别:</label>
<div class="col-sm-8"> <div class="col-sm-8">
<select name="level" class="form-control" required th:with="type=${@dict.getType('identify_level')}"> <select name="level" class="form-control" required th:with="type=${@dict.getType('identify_level')}">
<option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option> <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option>
</select> </select>
</div> </div>
</div> </div>
</div> </div>
<div class="col-xs-6"> <div class="col-xs-6">
<div class="form-group"> <div class="form-group">
<label id="contactEmailLabel" class="col-sm-4 control-label is-required contact-email">邮件:</label> <label id="contactEmailLabel" class="col-sm-4 control-label is-required contact-email">邮件:</label>
<div class="col-sm-8"> <div class="col-sm-8">
<input id="contactEmail" name="contactEmail" class="form-control contact-email" required type="text"> <input id="contactEmail" name="contactEmail" class="form-control contact-email" required type="text">
</div> </div>
</div> </div>
</div> </div>
<div class="col-xs-6"> <div class="col-xs-6">
<div class="form-group"> <div class="form-group">
<label class="col-sm-4 control-label is-required system-user">系统用户:</label> <label class="col-sm-4 control-label is-required system-user">系统用户:</label>
<div class="col-sm-8"> <div class="col-sm-8">
<input name="systemUserName" onclick="selectPeople()" class="form-control system-user" required type="text"> <input name="systemUserName" onclick="selectPeople()" class="form-control system-user" required type="text">
<input name="systemUserId" class="form-control system-user" required type="hidden"> <input name="systemUserId" class="form-control system-user" required type="hidden">
</div> </div>
</div> </div>
</div> </div>
<div class="col-xs-6"> <div class="col-xs-6">
<div class="form-group"> <div class="form-group">
<label class="col-sm-4 control-label">联系人:</label> <label class="col-sm-4 control-label">联系人:</label>
<div class="col-sm-8"> <div class="col-sm-8">
<input name="contactPerson" class="form-control" type="text"> <input name="contactPerson" class="form-control" type="text">
</div> </div>
</div> </div>
</div> </div>
<div class="col-xs-6"> <div class="col-xs-6">
<div class="form-group"> <div class="form-group">
<label class="col-sm-4 control-label">联系电话:</label> <label class="col-sm-4 control-label">联系电话:</label>
<div class="col-sm-8"> <div class="col-sm-8">
<input name="contactPhone" class="form-control" type="text"> <input name="contactPhone" class="form-control" type="text">
</div> </div>
</div> </div>
</div> </div>
<div class="col-xs-12"> <div class="col-xs-12">
<div class="form-group"> <div class="form-group">
<label class="col-sm-2 control-label">详细地址:</label> <label class="col-sm-2 control-label">详细地址:</label>
<div class="col-sm-10"> <div class="col-sm-10">
<input name="address" class="form-control" type="text"> <input name="address" class="form-control" type="text">
</div> </div>
</div> </div>
</div> </div>
</form> </form>
</div> </div>
<th:block th:include="include :: footer" /> <th:block th:include="include :: footer" />
<th:block th:include="include :: jquery-cxselect-js" /> <th:block th:include="include :: jquery-cxselect-js" />
<script th:inline="javascript"> <script th:inline="javascript">
var prefix = ctx + "system/partner" var prefix = ctx + "system/partner"
const initLevel=[[${level}]] const initLevel=[[${level}]]
$("#form-partner-add").validate({ $("#form-partner-add").validate({
focusCleanup: true focusCleanup: true
}); });
var urlChina = '/cnarea/select'; var urlChina = '/cnarea/select';
$.cxSelect.defaults.url = urlChina; $.cxSelect.defaults.url = urlChina;
// $.cxSelect.defaults.jsonSpace = 'data'; // $.cxSelect.defaults.jsonSpace = 'data';
$('#element1').cxSelect({ $('#element1').cxSelect({
selects: ['province', 'city'], selects: ['province', 'city'],
nodata: 'none' nodata: 'none'
}); });
$(function (){ $(function() {
if(initLevel){ function toggleRequiredFields() {
$("#showTitle").css("display","none"); var authLevel = $('select[name="level"]').val();
$("select[name='level']").val(initLevel); if (authLevel === '04') {
$("select[name='level']").attr("disabled",true); $('#contactEmailLabel').removeClass('is-required');
$(".contact-email").removeClass("is-required") $('#contactEmail').removeAttr('required');
$(".contact-email").attr("required",false) $('.system-user').removeClass('is-required');
$(".system-user").attr("required",false) $('input[name="systemUserName"]').removeAttr('required');
$(".system-user").removeClass("is-required") $('input[name="systemUserId"]').removeAttr('required');
} } else {
}) $('#contactEmailLabel').addClass('is-required');
$('#contactEmail').attr('required', 'required');
$('.system-user').addClass('is-required');
function submitHandler() { $('input[name="systemUserName"]').attr('required', 'required');
if ($.validate.form()) { $('input[name="systemUserId"]').attr('required', 'required');
$("select[name='level']").attr("disabled",false); }
$.operate.save(prefix + "/add", $('#form-partner-add').serialize()); }
}
} $('select[name="level"]').on('change', toggleRequiredFields);
function selectPeople() {
var url = ctx + "sip/project/selectPeople"; if(initLevel){
var options = { $("#showTitle").css("display","none");
title: '选择责任人', $("select[name='level']").val(initLevel);
width: "800", $("select[name='level']").attr("disabled",true);
height: '600', }
url: url,
callBack: doSubmitPeople toggleRequiredFields(); // Initial check
}; });
$.modal.openOptions(options);
}
function doSubmitPeople(index, layero) { function submitHandler() {
var rows = layero.find("iframe")[0].contentWindow.getSelections(); if ($.validate.form()) {
if (rows.length == 0) { $("select[name='level']").attr("disabled",false);
$.modal.alertWarning("请选择一个用户"); $.operate.save(prefix + "/add", $('#form-partner-add').serialize());
return; }
} }
let $name = $('[name="contactEmail"]'); function selectPeople() {
if (!$name.val()) { var url = ctx + "sip/project/selectPeople";
$name.val(rows[0].email); var options = {
} title: '选择责任人',
$('[name="systemUserId"]').val(rows[0].userId); width: "800",
$('[name="systemUserName"]').val(rows[0].userName); height: '600',
url: url,
let $contactPerson = $('[name="contactPerson"]'); callBack: doSubmitPeople
if (!$contactPerson.val()) { };
$contactPerson.val(rows[0].userName); $.modal.openOptions(options);
} }
let $contactPhone = $('[name="contactPhone"]'); function doSubmitPeople(index, layero) {
if (!$contactPhone.val()) { var rows = layero.find("iframe")[0].contentWindow.getSelections();
if (rows.length == 0) {
$contactPhone.val(rows[0].phonenumber); $.modal.alertWarning("请选择一个用户");
} return;
}
$.modal.close(index); let $name = $('[name="contactEmail"]');
} if (!$name.val()) {
</script> $name.val(rows[0].email);
</body> }
$('[name="systemUserId"]').val(rows[0].userId);
$('[name="systemUserName"]').val(rows[0].userName);
let $contactPerson = $('[name="contactPerson"]');
if (!$contactPerson.val()) {
$contactPerson.val(rows[0].userName);
}
let $contactPhone = $('[name="contactPhone"]');
if (!$contactPhone.val()) {
$contactPhone.val(rows[0].phonenumber);
}
$.modal.close(index);
}
</script>
</body>
</html> </html>

View File

@ -1,161 +1,182 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" > <html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head> <head>
<th:block th:include="include :: header('修改代理商管理')" /> <th:block th:include="include :: header('修改代理商管理')" />
</head> </head>
<body class="white-bg"> <body class="white-bg">
<div class="wrapper wrapper-content animated fadeInRight ibox-content"> <div class="wrapper wrapper-content animated fadeInRight ibox-content">
<form class="form-horizontal m" id="form-partner-edit" th:object="${partnerInfo}"> <form class="form-horizontal m" id="form-partner-edit" th:object="${partnerInfo}">
<input name="id" th:field="*{id}" type="hidden"> <input name="id" th:field="*{id}" type="hidden">
<div class="col-xs-6"> <div class="col-xs-6">
<div class="form-group"> <div class="form-group">
<label class="col-sm-4 control-label is-required">代理商编码:</label> <label class="col-sm-4 control-label is-required">代理商编码:</label>
<div class="col-sm-8"> <div class="col-sm-8">
<input name="partnerCode" th:field="*{partnerCode}" readonly class="form-control" type="text" required> <input name="partnerCode" th:field="*{partnerCode}" readonly class="form-control" type="text" required>
</div> </div>
</div> </div>
</div> </div>
<div class="col-xs-6"> <div class="col-xs-6">
<div class="form-group"> <div class="form-group">
<label class="col-sm-4 control-label is-required">代理商名称:</label> <label class="col-sm-4 control-label is-required">代理商名称:</label>
<div class="col-sm-8"> <div class="col-sm-8">
<input name="partnerName" th:field="*{partnerName}" class="form-control" type="text" required> <input name="partnerName" th:field="*{partnerName}" class="form-control" type="text" required>
</div> </div>
</div> </div>
</div> </div>
<div id="element1" class="col-xs-12" style="padding: 0"> <div id="element1" class="col-xs-12" style="padding: 0">
<div class="col-xs-6"> <div class="col-xs-6">
<div class="form-group"> <div class="form-group">
<label class="col-sm-4 control-label is-required">省:</label> <label class="col-sm-4 control-label is-required">省:</label>
<div class="col-sm-8"> <div class="col-sm-8">
<select name="province" required th:data-value="*{province}" class="province form-control m-b" data-first-title="选择省"> <select name="province" required th:data-value="*{province}" class="province form-control m-b" data-first-title="选择省">
<option value="">请选择</option> <option value="">请选择</option>
</select> </select>
</div> </div>
</div> </div>
</div> </div>
<div class="col-xs-6"> <div class="col-xs-6">
<div class="form-group"> <div class="form-group">
<label class="col-sm-4 control-label is-required">市:</label> <label class="col-sm-4 control-label is-required">市:</label>
<div class="col-sm-8"> <div class="col-sm-8">
<select name="city" required th:data-value="*{city}" class="city form-control m-b" data-first-title="选择省"> <select name="city" required th:data-value="*{city}" class="city form-control m-b" data-first-title="选择省">
<option value="">请选择</option> <option value="">请选择</option>
</select> </select>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="col-xs-6"> <div class="col-xs-6">
<div class="form-group"> <div class="form-group">
<label class="col-sm-4 control-label is-required">认证级别:</label> <label class="col-sm-4 control-label is-required">认证级别:</label>
<div class="col-sm-8"> <div class="col-sm-8">
<select name="level" required class="form-control" th:with="type=${@dict.getType('identify_level')}"> <select name="level" required class="form-control" th:with="type=${@dict.getType('identify_level')}">
<option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}" th:field="*{level}"></option> <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}" th:field="*{level}"></option>
</select> </select>
</div> </div>
</div> </div>
</div> </div>
<div class="col-xs-6"> <div class="col-xs-6">
<div class="form-group"> <div class="form-group">
<label class="col-sm-4 control-label is-required">邮件:</label> <label class="col-sm-4 control-label is-required">邮件:</label>
<div class="col-sm-8"> <div class="col-sm-8">
<input name="contactEmail" th:field="*{contactEmail}" class="form-control" type="text"> <input name="contactEmail" th:field="*{contactEmail}" class="form-control" type="text">
</div> </div>
</div> </div>
</div> </div>
<div class="col-xs-6"> <div class="col-xs-6">
<div class="form-group"> <div class="form-group">
<label class="col-sm-4 control-label is-required">系统用户:</label> <label class="col-sm-4 control-label is-required">系统用户:</label>
<div class="col-sm-8"> <div class="col-sm-8">
<input name="systemUserName" onclick="selectPeople()" th:field="*{systemUserName}" class="form-control" required type="text"> <input name="systemUserName" onclick="selectPeople()" th:field="*{systemUserName}" class="form-control" required type="text">
<input name="systemUserId" th:field="*{systemUserId}" class="form-control" type="hidden" required> <input name="systemUserId" th:field="*{systemUserId}" class="form-control" type="hidden" required>
</div> </div>
</div> </div>
</div> </div>
<div class="col-xs-6"> <div class="col-xs-6">
<div class="form-group"> <div class="form-group">
<label class="col-sm-4 control-label">联系人:</label> <label class="col-sm-4 control-label">联系人:</label>
<div class="col-sm-8"> <div class="col-sm-8">
<input name="contactPerson" th:field="*{contactPerson}" class="form-control" type="text"> <input name="contactPerson" th:field="*{contactPerson}" class="form-control" type="text">
</div> </div>
</div> </div>
</div> </div>
<div class="col-xs-6"> <div class="col-xs-6">
<div class="form-group"> <div class="form-group">
<label class="col-sm-4 control-label">联系电话:</label> <label class="col-sm-4 control-label">联系电话:</label>
<div class="col-sm-8"> <div class="col-sm-8">
<input name="contactPhone" th:field="*{contactPhone}" class="form-control" type="text"> <input name="contactPhone" th:field="*{contactPhone}" class="form-control" type="text">
</div> </div>
</div> </div>
</div> </div>
<div class="col-xs-12"> <div class="col-xs-12">
<div class="form-group"> <div class="form-group">
<label class="col-sm-2 control-label">详细地址:</label> <label class="col-sm-2 control-label">详细地址:</label>
<div class="col-sm-10"> <div class="col-sm-10">
<input name="address" th:field="*{address}" class="form-control" type="text"> <input name="address" th:field="*{address}" class="form-control" type="text">
</div> </div>
</div> </div>
</div> </div>
</form> </form>
</div> </div>
<th:block th:include="include :: footer" /> <th:block th:include="include :: footer" />
<th:block th:include="include :: jquery-cxselect-js" /> <th:block th:include="include :: jquery-cxselect-js" />
<script th:inline="javascript"> <script th:inline="javascript">
var prefix = ctx + "system/partner"; var prefix = ctx + "system/partner";
$("#form-partner-edit").validate({ $("#form-partner-edit").validate({
focusCleanup: true focusCleanup: true
}); });
function submitHandler() { function submitHandler() {
if ($.validate.form()) { if ($.validate.form()) {
$.operate.save(prefix + "/edit", $('#form-partner-edit').serialize()); $.operate.save(prefix + "/edit", $('#form-partner-edit').serialize());
} }
} }
var urlChina = '/cnarea/select'; var urlChina = '/cnarea/select';
$.cxSelect.defaults.url = urlChina; $.cxSelect.defaults.url = urlChina;
$('#element1').cxSelect({ $('#element1').cxSelect({
selects: ['province', 'city'], selects: ['province', 'city'],
nodata: 'none' nodata: 'none'
}); });
function selectPeople() { function selectPeople() {
var url = ctx + "sip/project/selectPeople"; var url = ctx + "sip/project/selectPeople";
var options = { var options = {
title: '选择责任人', title: '选择责任人',
width: "800", width: "800",
height: '600', height: '600',
url: url, url: url,
callBack: doSubmitPeople callBack: doSubmitPeople
}; };
$.modal.openOptions(options); $.modal.openOptions(options);
} }
function doSubmitPeople(index, layero) { function doSubmitPeople(index, layero) {
var rows = layero.find("iframe")[0].contentWindow.getSelections(); var rows = layero.find("iframe")[0].contentWindow.getSelections();
if (rows.length == 0) { if (rows.length == 0) {
$.modal.alertWarning("请选择一个用户"); $.modal.alertWarning("请选择一个用户");
return; return;
} }
let $name = $('[name="contactEmail"]'); let $name = $('[name="contactEmail"]');
if (!$name.val()) { if (!$name.val()) {
$name.val(rows[0].email); $name.val(rows[0].email);
} }
$('[name="systemUserId"]').val(rows[0].userId); $('[name="systemUserId"]').val(rows[0].userId);
$('[name="systemUserName"]').val(rows[0].userName); $('[name="systemUserName"]').val(rows[0].userName);
let $contactPerson = $('[name="contactPerson"]'); let $contactPerson = $('[name="contactPerson"]');
if (!$contactPerson.val()) { if (!$contactPerson.val()) {
$contactPerson.val(rows[0].userName); $contactPerson.val(rows[0].userName);
} }
let $contactPhone = $('[name="contactPhone"]'); let $contactPhone = $('[name="contactPhone"]');
if (!$contactPhone.val()) { if (!$contactPhone.val()) {
$contactPhone.val(rows[0].phonenumber); $contactPhone.val(rows[0].phonenumber);
} }
$.modal.close(index); $.modal.close(index);
} }
</script> $(function() {
</body> function toggleRequiredFields() {
var authLevel = $('select[name="level"]').val();
if (authLevel === '04') {
$('input[name="contactEmail"]').closest('.form-group').find('label').removeClass('is-required');
$('input[name="contactEmail"]').removeAttr('required');
$('input[name="systemUserName"]').closest('.form-group').find('label').removeClass('is-required');
$('input[name="systemUserName"]').removeAttr('required');
$('input[name="systemUserId"]').removeAttr('required');
} else {
$('input[name="contactEmail"]').closest('.form-group').find('label').addClass('is-required');
$('input[name="contactEmail"]').attr('required', 'required');
$('input[name="systemUserName"]').closest('.form-group').find('label').addClass('is-required');
$('input[name="systemUserName"]').attr('required', 'required');
$('input[name="systemUserId"]').attr('required', 'required');
}
}
$('select[name="level"]').on('change', toggleRequiredFields);
toggleRequiredFields(); // Initial check
});
</script>
</body>
</html> </html>