Compare commits
2
Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
6cd5ced688 | ||
|
|
843f44929c |
@@ -13,9 +13,19 @@
|
||||
<div v-loading="loading" class="storage-cert-qc-acl-dialog__body">
|
||||
<el-tabs v-model="activeTab">
|
||||
<el-tab-pane label="勾选可编辑字段" name="fields">
|
||||
<div class="field-toolbar">
|
||||
<el-button @click="selectAllFields">
|
||||
<el-icon><Select /></el-icon>
|
||||
全选
|
||||
</el-button>
|
||||
<el-button @click="clearAllFields">
|
||||
<el-icon><RefreshLeft /></el-icon>
|
||||
取消全选
|
||||
</el-button>
|
||||
</div>
|
||||
<div v-for="(group, gi) in fieldGroups" :key="gi" class="field-block">
|
||||
<div class="field-block__title">{{ group.title }}</div>
|
||||
<el-checkbox-group v-model="selectedKeys">
|
||||
<el-checkbox-group v-model="selectedKeys" class="field-check-grid">
|
||||
<el-checkbox
|
||||
v-for="field in group.fields"
|
||||
:key="field.key"
|
||||
@@ -66,7 +76,7 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { Check, Close } from '@element-plus/icons-vue'
|
||||
import { Check, Close, RefreshLeft, Select } from '@element-plus/icons-vue'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { fetchUserList } from '@/api/admin'
|
||||
import {
|
||||
@@ -113,6 +123,27 @@
|
||||
return Array.from(map.values())
|
||||
})
|
||||
|
||||
const allFieldKeys = computed(() => {
|
||||
const keys: string[] = []
|
||||
const seen = new Set<string>()
|
||||
for (const group of fieldGroups.value) {
|
||||
for (const field of group.fields) {
|
||||
if (seen.has(field.key)) continue
|
||||
seen.add(field.key)
|
||||
keys.push(field.key)
|
||||
}
|
||||
}
|
||||
return keys
|
||||
})
|
||||
|
||||
function selectAllFields() {
|
||||
selectedKeys.value = [...allFieldKeys.value]
|
||||
}
|
||||
|
||||
function clearAllFields() {
|
||||
selectedKeys.value = []
|
||||
}
|
||||
|
||||
function upsertUserOption(id: string, label: string) {
|
||||
if (!id) return
|
||||
if (userOptions.value.some((u) => u.value === id)) return
|
||||
@@ -193,6 +224,13 @@
|
||||
min-height: 280px;
|
||||
}
|
||||
|
||||
.field-toolbar {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.field-block {
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
@@ -204,10 +242,31 @@
|
||||
color: var(--el-color-primary-dark-2, #059669);
|
||||
}
|
||||
|
||||
.field-check-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 6px 16px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.field-check {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
margin-right: 0;
|
||||
margin-bottom: 6px;
|
||||
margin-bottom: 0;
|
||||
height: auto;
|
||||
white-space: normal;
|
||||
|
||||
:deep(.el-checkbox__label) {
|
||||
white-space: normal;
|
||||
line-height: 1.4;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 560px) {
|
||||
.field-check-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
.form-tip {
|
||||
|
||||
Reference in new issue
Block a user