console
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>新增指标</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Microsoft Yahei", sans-serif;
font-size: 13px;
}
body {
padding: 16px;
background: #f4f4f4;
}
.modal-wrap {
background: #fff;
border-radius: 6px;
max-height: 92vh;
overflow-y: auto;
border: 1px solid #ddd;
width: 920px;
margin: 0 auto;
}
.modal-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 14px 18px;
border-bottom: 1px solid #eee;
}
.modal-header h2 {
font-size: 16px;
font-weight: 600;
}
.close-x {
cursor: pointer;
font-size: 18px;
color: #666;
}
.modal-body {
padding: 18px;
}
.block-title {
font-weight: 600;
margin-bottom: 12px;
padding-bottom: 6px;
border-bottom: 1px solid #e8e8e8;
display: flex;
justify-content: space-between;
align-items: center;
}
.row-form {
display: flex;
gap: 16px;
margin-bottom: 12px;
align-items: center;
}
.form-item {
display: flex;
align-items: center;
gap: 6px;
}
.form-item label {
white-space: nowrap;
}
.form-item input,
.form-item select {
border: 1px solid #ccc;
border-radius: 3px;
padding: 5px 8px;
min-width: 160px;
}
.toggle-row {
display: flex;
gap: 6px;
align-items: center;
}
.green-tab-row {
display: flex;
margin: 16px 0 10px;
}
.green-tab {
background: #27ae60;
color: #fff;
padding: 7px 14px;
border: 1px solid #27ae60;
}
.factor-row {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 10px;
}
textarea {
width: 100%;
border: 1px solid #ccc;
border-radius: 3px;
padding: 8px;
min-height: 80px;
resize: vertical;
}
.sync-expand-area {
border: 1px dashed #cccccc;
padding: 12px;
margin: 10px 0 0;
border-radius: 4px;
display: none;
}
.tip-text {
font-size: 12px;
color: #666;
margin-top: 6px;
}
.modal-footer {
display: flex;
justify-content: flex-end;
gap: 12px;
padding: 14px 18px;
border-top: 1px solid #eee;
}
.btn {
padding: 5px 12px;
border: none;
border-radius: 3px;
cursor: pointer;
}
.btn-green {
background: #27ae60;
color: #fff;
}
.btn-default {
background: #e8e8e8;
}
/* 开关样式 */
.switch-wrap {
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: 18px;
}
.switch {
position: relative;
display: inline-block;
width: 36px;
height: 20px;
}
.switch input {
opacity: 0;
width: 0;
height: 0;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
transition: .3s;
border-radius: 20px;
}
.slider:before {
position: absolute;
content: "";
height: 16px;
width: 16px;
left: 2px;
bottom: 2px;
background-color: white;
transition: .3s;
border-radius: 50%;
}
input:checked + .slider {
background-color: #27ae60;
}
input:checked + .slider:before {
transform: translateX(16px);
}
/* ========== 多选下拉：对勾放在日期后面 ========== */
.multi-select {
position: relative;
min-width: 220px;
overflow: visible;
}
.multi-select-input {
border: 1px solid #ccc;
border-radius: 3px;
padding: 5px 8px;
cursor: pointer;
background: #fff;
text-align: left;
min-height: 28px;
line-height: 18px;
}
.multi-select-dropdown {
display: none;
position: absolute;
top: calc(100% + 4px);
left: 0;
background: #fff;
border: 1px solid #ccc;
border-radius: 3px;
z-index: 999;
max-height: 240px;
overflow-y: auto;
width: 260px;
box-shadow: 0 2px 6px rgba(0, 0, 0, .08);
}
.multi-select-dropdown.show {
display: block;
}
.multi-select-toolbar {
display: flex;
gap: 6px;
padding: 6px 8px;
border-bottom: 1px solid #eee;
background: #fafafa;
}
.multi-select-toolbar button {
font-size: 12px;
padding: 2px 8px;
cursor: pointer;
border: 1px solid #ccc;
background: #fff;
border-radius: 3px;
}
.multi-select-toolbar button:hover {
background: #f0f0f0;
}
.multi-item {
padding:7px 10px;
cursor: pointer;
white-space: nowrap;
text-align:left;
border-bottom:1px dotted #f0f0f0;
}
.multi-item:hover {
background:#f5f9ff;
}
.multi-item.active::after {
content:" ✓";
color:#27ae60;
}
</style>
</head>
<body>
<div class="modal-wrap">
<div class="modal-header">
<h2>新增指标</h2>
<span class="close-x" id="modalClose">×</span>
</div>
<div class="modal-body">
<div class="block-title">
基本信息区
<span class="toggle-row">
<label>是否同步新增</label>
<input type="checkbox">
</span>
</div>
<div class="row-form">
<div class="form-item">
<label>*指标代码</label>
<input id="inpCode">
</div>
<div class="form-item">
<label>*上级指标</label>
<input id="inpParent">
</div>
<div class="form-item">
<label>*指标名称</label>
<input id="inpName">
</div>
</div>
<div class="row-form">
<div class="form-item">
<label>指标描述</label>
<input style="min-width:240px;">
</div>
<div class="form-item">
<label>*生成方式</label>
<select>
<option selected>系统计算</option>
</select>
</div>
<div class="form-item">
<label>是否百分比类型</label>
<select>
<option selected>否</option>
</select>
</div>
</div>
<div class="block-title">取数逻辑区</div>
<div class="green-tab-row">
<div class="green-tab">运算符号</div>
<div class="green-tab">取数类型</div>
<div class="green-tab" style="flex:1">取数因子</div>
<div>
<button class="btn btn-green">新增↑</button>
<button class="btn btn-green">新增↓</button>
</div>
</div>
<div class="factor-row">
<select>
<option>+</option>
<option>-</option>
</select>
<select>
<option selected>引用指标</option>
</select>
<input style="flex:1" placeholder="选取取数因子">
<button class="btn btn-default">…</button>
</div>
<button class="btn btn-green">生成公式并计算</button>
<div style="margin-top:12px;">
<label>取数规则</label>
<textarea></textarea>
</div>
<div class="row-form" style="margin-top:14px;">
<div class="form-item">
<label>试算日期</label>
<input type="month">
</div>
<button class="btn btn-green">试算</button>
<button class="btn btn-default">当年中期</button>
<button class="btn btn-default">上年年末</button>
</div>
<div style="margin-top:8px;">
<label>试算结果</label>
<textarea></textarea>
</div>
<div class="switch-wrap">
<label class="switch">
<input type="checkbox" id="chkSyncOtherPeriod">
<span class="slider"></span>
</label>
<span>是否同步至其他报告期</span>
<div class="sync-expand-area" id="syncPanel">
<div class="form-item">
<label>目标报告期</label>
<div class="multi-select" id="multiSelectWrap">
<div class="multi-select-input" id="multiInput">请选择报告期</div>
<div class="multi-select-dropdown" id="multiDropdown">
<div class="multi-select-toolbar">
<button type="button" id="btnSelectAll">全选</button>
<button type="button" id="btnClearAll">清空</button>
</div>
<div class="multi-item" data-val="2026-01">2026-01</div>
<div class="multi-item" data-val="2026-02">2026-02</div>
<div class="multi-item" data-val="2026-03">2026-03</div>
<div class="multi-item" data-val="2026-04">2026-04</div>
<div class="multi-item" data-val="2026-05">2026-05</div>
<div class="multi-item" data-val="2026-06">2026-06</div>
<div class="multi-item" data-val="2026-07">2026-07</div>
<div class="multi-item" data-val="2026-08">2026-08</div>
<div class="multi-item" data-val="2026-09">2026-09</div>
<div class="multi-item" data-val="2026-10">2026-10</div>
<div class="multi-item" data-val="2026-11">2026-11</div>
<div class="multi-item" data-val="2026-12">2026-12</div>
</div>
</div>
</div>
<div class="tip-text">
说明：保存确认后，会把当前指标完整信息同步至所有选中的目标报告期；取消弹窗则不会执行同步。
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-green" id="btnSave">确认</button>
<button class="btn btn-default" id="btnCancel">取消</button>
</div>
</div>
<script>
const chkSyncOtherPeriod = document.getElementById('chkSyncOtherPeriod');
const syncPanel = document.getElementById('syncPanel');
const modalClose = document.getElementById('modalClose');
const btnCancel = document.getElementById('btnCancel');
const btnSave = document.getElementById('btnSave');
const multiSelectWrap = document.getElementById('multiSelectWrap');
const multiInput = document.getElementById('multiInput');
const multiDropdown = document.getElementById('multiDropdown');
const itemList = multiDropdown.querySelectorAll('.multi-item');
const btnSelectAll = document.getElementById('btnSelectAll');
const btnClearAll = document.getElementById('btnClearAll');
let selected = [];
chkSyncOtherPeriod.addEventListener('change', function () {
syncPanel.style.display = this.checked ? 'block' : 'none';
});
multiInput.addEventListener('click', function (e) {
e.stopPropagation();
multiDropdown.classList.toggle('show');
});
document.addEventListener('click', function (e) {
if (!multiSelectWrap.contains(e.target)) {
multiDropdown.classList.remove('show');
}
});
// 点击日期行切换选中
itemList.forEach(item=>{
item.addEventListener('click',()=>{
const val = item.dataset.val;
const idx = selected.indexOf(val);
if(idx > -1){
selected.splice(idx,1);
item.classList.remove('active');
}else{
selected.push(val);
item.classList.add('active');
}
updateLabel();
})
})
function updateLabel() {
multiInput.textContent = selected.length
? selected.join('、')
: '请选择报告期';
}
btnSelectAll.onclick = function () {
selected = [];
itemList.forEach(i=>{
selected.push(i.dataset.val);
i.classList.add('active');
})
updateLabel();
};
btnClearAll.onclick = function () {
selected = [];
itemList.forEach(i=>i.classList.remove('active'))
updateLabel();
};
function closePage() {
alert('关闭新增指标弹窗');
}
modalClose.onclick = closePage;
btnCancel.onclick = closePage;
btnSave.addEventListener('click', function () {
if (chkSyncOtherPeriod.checked && selected.length === 0) {
alert('请至少选择一个目标报告期');
return;
}
alert("指标保存成功，同步目标报告期：" + (selected.length ? selected.join('、') : "无"));
});
</script>
</body>
</html>
<!-- （注：内容由AI生成） -->