修改开发场景Checkbox显示bug
This commit is contained in:
weike
wangpenglong
parent
abb9dac5d0
commit
bac3e54583
|
|
@ -887,19 +887,35 @@ class deployWindow {
|
|||
checkbox.type = "checkbox";
|
||||
checkbox.value = item.key;
|
||||
checkbox.id = item.key;
|
||||
|
||||
checkbox.className = "checkbox"
|
||||
|
||||
if (jsonSelectKey.indexOf(item.key) > -1) {
|
||||
checkbox.className = "checkboxselect"
|
||||
checkbox.classList.add("checkboxselect");
|
||||
}
|
||||
else { checkbox.className = "checkbox" }
|
||||
|
||||
if (checkbox.id === "JavaScript_key") {
|
||||
checkbox.checked = true;
|
||||
checkbox.disabled = true;
|
||||
}
|
||||
|
||||
if (installedPkg.includes(item.val)) {
|
||||
checkbox.classList.add("installed");
|
||||
if (item.key === "selectAll") {
|
||||
checkbox.classList.add("selectAll");
|
||||
}
|
||||
|
||||
console.log("==> checkbox:" + checkbox.id + ":" + checkbox.className + ":" + checkbox.type + ":" + checkbox.classList.length + ":" + checkbox.value + ":" + checkbox.checked);
|
||||
// "==> checkbox: selectAll checkbox checkbox selectAll 2 selectAll false
|
||||
// "==> checkbox: Remote_key checkbox checkboxselect heckbox 2 Remote_key false
|
||||
// "==> checkbox: C_key checkbox checkbox 1 C_key false
|
||||
// "==> checkbox: JAVA_key checkbox checkboxselect checkbox 2 JAVA_key false
|
||||
// "==> checkbox: Python3_key checkbox checkboxselect checkbox 2 Python3_key false
|
||||
// "==> checkbox: Go_key checkbox checkbox 1 Go_key false
|
||||
// "==> checkbox: JavaScript_key checkbox checkbox 1 JavaScript_key true
|
||||
|
||||
// 全选 checkbox selectAll
|
||||
// 非全选:已安装过的 checkbox checkboxselect
|
||||
// 非全选:未安装过的 checkbox
|
||||
|
||||
// 创建label文本
|
||||
var labelTextNode = document.createElement("label");
|
||||
labelTextNode.setAttribute("for", item.key);
|
||||
|
|
@ -919,6 +935,31 @@ class deployWindow {
|
|||
return 'zh-cn'
|
||||
}
|
||||
|
||||
updateDevSceneCheckState() {
|
||||
let selectAllVal = document.getElementById("selectAll") as HTMLInputElement;
|
||||
var checks = document.querySelectorAll(".scenarioSelection > input[type='checkbox']:not([value='selectAll'])");
|
||||
var allChecked = true;
|
||||
var allUnchecked = true;
|
||||
for (var item of checks) {
|
||||
var checkbox = item as HTMLInputElement;
|
||||
if (checkbox.checked) {
|
||||
allUnchecked = false;
|
||||
} else {
|
||||
allChecked = false;
|
||||
}
|
||||
}
|
||||
if (allChecked) {
|
||||
selectAllVal.checked = true;
|
||||
selectAllVal.indeterminate = false;
|
||||
} else if (allUnchecked) {
|
||||
selectAllVal.checked = false;
|
||||
selectAllVal.indeterminate = false;
|
||||
} else {
|
||||
selectAllVal.checked = false;
|
||||
selectAllVal.indeterminate = true;
|
||||
}
|
||||
}
|
||||
|
||||
showDependences(arg: any) {
|
||||
this.configData = [];
|
||||
// this.configData.push(arg);
|
||||
|
|
@ -927,16 +968,22 @@ class deployWindow {
|
|||
let formattedDoc = '';
|
||||
|
||||
let selectAllVal = document.getElementById("selectAll") as HTMLInputElement;
|
||||
var checks = document.querySelectorAll(".scenarioSelection > input");
|
||||
var checks = document.querySelectorAll(".scenarioSelection > input[type='checkbox']:not([value='selectAll'])");
|
||||
selectAllVal.onclick = function () {
|
||||
// 遍历复选框元素对象
|
||||
for (var i = 0; i < checks.length; i++) {
|
||||
// 将复选框的选中状态设置为和全选框一致
|
||||
if ((checks[i] as HTMLInputElement).value != "JavaScript_key")
|
||||
(checks[i] as HTMLInputElement).checked = selectAllVal.checked;
|
||||
}
|
||||
};
|
||||
|
||||
// this.updateDevSceneCheckState();
|
||||
|
||||
checks.forEach((check) => {
|
||||
check.addEventListener('click', () => {
|
||||
this.updateDevSceneCheckState();
|
||||
});
|
||||
});
|
||||
|
||||
for (var i = 0; i < elements.length; i++) {
|
||||
elements[i].addEventListener("change", (event) => {
|
||||
// 根据选中不同的checkbox，显示不同输出；
|
||||
|
|
|
|||
|
|
@ -1115,9 +1115,8 @@ button#cancel:disabled {
|
|||
font-family: SourceHanSansCN, SourceHanSansCN;
|
||||
font-weight: 400;
|
||||
font-size: 13px;
|
||||
color: rgba(255,255,255,0.7);
|
||||
/* color: red;
|
||||
background-color: orange; */
|
||||
/* color: rgba(255,255,255,0.7); */
|
||||
/* color: red; */
|
||||
line-height: 20px;
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
|
|
@ -1156,7 +1155,7 @@ button#cancel:disabled {
|
|||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.checkbox.installed {
|
||||
.checkbox.checkboxselect {
|
||||
background: rgba(39, 119, 255, 0.5);
|
||||
border: 0px solid rgba(39, 119, 255, 0.5);
|
||||
}
|
||||
|
|
@ -1172,10 +1171,6 @@ button#cancel:disabled {
|
|||
border: 1px solid #686868;
|
||||
}
|
||||
|
||||
.checkbox:checked+label {
|
||||
/* color: red; */
|
||||
}
|
||||
|
||||
.checkbox:checked::after {
|
||||
content: "";
|
||||
height: 4px;
|
||||
|
|
@ -1189,7 +1184,23 @@ button#cancel:disabled {
|
|||
transform: rotate(-60deg);
|
||||
}
|
||||
|
||||
.checkboxselect {
|
||||
.checkbox:disabled:checked::after {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.checkbox+label {
|
||||
color: rgba(255,255,255,0.7);
|
||||
|
||||
}
|
||||
.checkbox:checked+label {
|
||||
color: rgba(255,255,255,0.9);
|
||||
}
|
||||
|
||||
.checkbox:disabled:checked+label {
|
||||
color: rgba(255,255,255,0.7);
|
||||
}
|
||||
|
||||
.selectAll {
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
-webkit-appearance: none;
|
||||
|
|
@ -1197,18 +1208,26 @@ button#cancel:disabled {
|
|||
outline: none;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
background: rgba(39, 119, 255, 0.5);
|
||||
border: 0px solid rgba(39, 119, 255, 0.5);
|
||||
background-color: transparent;
|
||||
border: 1px solid #686868;
|
||||
border-radius: 1px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.checkboxselect:checked {
|
||||
.selectAll:checked {
|
||||
background: #2777FF;
|
||||
border: 1px solid #2777FF;
|
||||
}
|
||||
|
||||
.checkboxselect:checked::after {
|
||||
.selectAll+label {
|
||||
color: rgba(255,255,255,0.7);
|
||||
|
||||
}
|
||||
.selectAll:checked+label {
|
||||
color: rgba(255,255,255,0.7);
|
||||
}
|
||||
|
||||
.selectAll:checked::after {
|
||||
content: "";
|
||||
height: 4px;
|
||||
width: 8px;
|
||||
|
|
@ -1221,11 +1240,11 @@ button#cancel:disabled {
|
|||
transform: rotate(-60deg);
|
||||
}
|
||||
|
||||
.checkboxselect:indeterminate::after {
|
||||
.selectAll:indeterminate::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
margin-top: 5px;
|
||||
margin-left: 5px;
|
||||
margin-top: 4px;
|
||||
margin-left: 4px;
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
background: #2777FF;
|
||||
|
|
|
|||
Loading…
Reference in New Issue