feat(web-admin): 储存证 ACL 字段勾选支持全选/取消全选
质检/生产权限弹窗「勾选可编辑字段」Tab 增加一键全选与取消全选。关联 #96。
This commit is contained in:
1 parent
843f44929c
commit
6cd5ced688
1 file changed
+39
-1
@@ -13,6 +13,16 @@
|
||||
<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" class="field-check-grid">
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
Reference in new issue
Block a user