基础信息页：新增列展示本地缓存 + 全选功能
This commit is contained in:
@ -171,21 +171,30 @@
|
||||
<el-button circle :icon="Setting" style="margin-left: 8px" title="列设置" />
|
||||
</template>
|
||||
<div class="column-setting-list">
|
||||
<div style="font-weight: bold; margin-bottom: 5px; border-bottom: 1px solid #eee; padding-bottom: 5px">
|
||||
列展示设置
|
||||
<div style="display: flex; justify-content: space-between; align-items: center; font-weight: bold; margin-bottom: 5px; border-bottom: 1px solid #eee; padding-bottom: 5px">
|
||||
<span>列展示设置</span>
|
||||
<el-checkbox
|
||||
:model-value="isAllSelected"
|
||||
:indeterminate="isIndeterminate"
|
||||
@change="handleCheckAllChange"
|
||||
>
|
||||
全选
|
||||
</el-checkbox>
|
||||
</div>
|
||||
<el-checkbox v-model="columns.id.visible" label="ID" />
|
||||
<el-checkbox v-model="columns.companyName.visible" label="所属公司" />
|
||||
<el-checkbox v-model="columns.name.visible" label="名称" />
|
||||
<el-checkbox v-model="columns.commonName.visible" label="俗名" />
|
||||
<el-checkbox v-model="columns.category.visible" label="类别" />
|
||||
<el-checkbox v-model="columns.type.visible" label="类型" />
|
||||
<el-checkbox v-model="columns.spec.visible" label="规格型号" />
|
||||
<el-checkbox v-model="columns.unit.visible" label="单位" />
|
||||
<el-checkbox v-model="columns.inventory.visible" label="库存数" />
|
||||
<el-checkbox v-model="columns.available.visible" label="可用数" />
|
||||
<el-checkbox v-model="columns.files.visible" label="资料" />
|
||||
<el-checkbox v-model="columns.isEnabled.visible" label="状态" />
|
||||
|
||||
<el-checkbox v-if="hasColPermission('id')" v-model="columns.id.visible" label="ID" />
|
||||
<el-checkbox v-if="hasColPermission('companyName')" v-model="columns.companyName.visible" label="所属公司" />
|
||||
<el-checkbox v-if="hasColPermission('name')" v-model="columns.name.visible" label="名称" />
|
||||
<el-checkbox v-if="hasColPermission('commonName')" v-model="columns.commonName.visible" label="俗名" />
|
||||
<el-checkbox v-if="hasColPermission('category')" v-model="columns.category.visible" label="类别" />
|
||||
<el-checkbox v-if="hasColPermission('type')" v-model="columns.type.visible" label="类型" />
|
||||
<el-checkbox v-if="hasColPermission('spec')" v-model="columns.spec.visible" label="规格型号" />
|
||||
<el-checkbox v-if="hasColPermission('unit')" v-model="columns.unit.visible" label="单位" />
|
||||
<el-checkbox v-if="hasColPermission('inventory')" v-model="columns.inventory.visible" label="库存数" />
|
||||
<el-checkbox v-if="hasColPermission('available')" v-model="columns.available.visible" label="可用数" />
|
||||
<el-checkbox v-if="hasColPermission('files')" v-model="columns.files.visible" label="资料" />
|
||||
<el-checkbox v-if="hasColPermission('isEnabled')" v-model="columns.isEnabled.visible" label="状态" />
|
||||
<el-checkbox v-if="hasColPermission('isInspectionRequired')" v-model="columns.isInspectionRequired.visible" label="强制质检" />
|
||||
</div>
|
||||
</el-popover>
|
||||
</div>
|
||||
@ -904,19 +913,74 @@ const permissionMap: Record<string, string> = {
|
||||
isInspectionRequired: 'material_list:operation'
|
||||
};
|
||||
|
||||
// 根据用户权限初始化列显示状态
|
||||
// ================= 全选与本地缓存逻辑 =================
|
||||
|
||||
// 获取唯一缓存 Key (加上用户名，防止同一个浏览器切换账号时设置错乱)
|
||||
const getStorageKey = () => `MOM_BASIC_INFO_COLS_${userStore.username || 'DEFAULT'}`;
|
||||
|
||||
// 辅助方法：判断当前用户是否有某列的权限
|
||||
const hasColPermission = (key: string) => {
|
||||
if (userStore.role === 'SUPER_ADMIN' || userStore.username === 'IRIS') return true;
|
||||
const code = permissionMap[key];
|
||||
return code ? !!userStore.hasPermission(code) : true;
|
||||
};
|
||||
|
||||
// 计算属性：判断是否"全选"了所有【有权限】的列
|
||||
const isAllSelected = computed(() => {
|
||||
const allowedKeys = Object.keys(columns).filter(k => hasColPermission(k));
|
||||
return allowedKeys.length > 0 && allowedKeys.every(k => columns[k as keyof typeof columns].visible);
|
||||
});
|
||||
|
||||
// 计算属性：判断是否"半选" (Element UI 中 checkbox 的 indeterminate 状态)
|
||||
const isIndeterminate = computed(() => {
|
||||
const allowedKeys = Object.keys(columns).filter(k => hasColPermission(k));
|
||||
const checkedCount = allowedKeys.filter(k => columns[k as keyof typeof columns].visible).length;
|
||||
return checkedCount > 0 && checkedCount < allowedKeys.length;
|
||||
});
|
||||
|
||||
// 事件：点击"全选"复选框时触发
|
||||
const handleCheckAllChange = (val: boolean) => {
|
||||
Object.keys(columns).forEach(key => {
|
||||
// 只有用户有权限的列，才会被全选/全不选操作控制
|
||||
if (hasColPermission(key)) {
|
||||
columns[key as keyof typeof columns].visible = val;
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
// 监听：只要列展示状态发生变化，就自动保存到浏览器本地
|
||||
watch(columns, (newVal) => {
|
||||
localStorage.setItem(getStorageKey(), JSON.stringify(newVal));
|
||||
}, { deep: true });
|
||||
|
||||
// ================= 修改：权限初始化与读取缓存 =================
|
||||
|
||||
// 修改你原有的 initColumnPermissions 函数
|
||||
const initColumnPermissions = () => {
|
||||
// 超级管理员跳过权限检查，显示所有列
|
||||
if (userStore.role === 'SUPER_ADMIN' || userStore.username === 'IRIS') {
|
||||
return;
|
||||
// 1. 尝试从本地缓存读取用户上次的设置
|
||||
const cachedData = localStorage.getItem(getStorageKey());
|
||||
let parsedCache: Record<string, any> | null = null;
|
||||
if (cachedData) {
|
||||
try {
|
||||
parsedCache = JSON.parse(cachedData);
|
||||
} catch (e) {
|
||||
console.error('解析列缓存失败', e);
|
||||
}
|
||||
}
|
||||
|
||||
// 普通用户：严格执行列级权限控制，没有权限的列必须隐藏
|
||||
// 2. 遍历列进行权限判断与缓存赋值
|
||||
Object.keys(columns).forEach(key => {
|
||||
const code = permissionMap[key];
|
||||
if (code) {
|
||||
// 如果不具备该权限，必须设为 false
|
||||
columns[key].visible = !!userStore.hasPermission(code);
|
||||
const colKey = key as keyof typeof columns;
|
||||
const hasPerm = hasColPermission(colKey);
|
||||
|
||||
if (!hasPerm) {
|
||||
// 【权限最高】如果没有权限，强制隐藏，无视任何缓存
|
||||
columns[colKey].visible = false;
|
||||
} else {
|
||||
// 如果有权限，且存在本地缓存，则使用本地缓存的值
|
||||
if (parsedCache && parsedCache[colKey] !== undefined) {
|
||||
columns[colKey].visible = parsedCache[colKey].visible;
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user