<script lang="ts" setup>
|
import type { UserFieldRule } from '#/utils/userFieldConfig';
|
|
import { onMounted, ref } from 'vue';
|
|
import { useMessage } from '@jnpf/hooks';
|
|
import { getUserFieldConfig, updateUserFieldConfig } from '#/api/system/sysConfig';
|
import { normalizeUserFieldConfig, userFormFields, userListFields } from '#/utils/userFieldConfig';
|
|
const { createMessage } = useMessage();
|
const config = ref(normalizeUserFieldConfig());
|
const loading = ref(false);
|
const saving = ref(false);
|
|
async function load() {
|
loading.value = true;
|
try {
|
const res = await getUserFieldConfig();
|
config.value = normalizeUserFieldConfig(res.data);
|
} finally {
|
loading.value = false;
|
}
|
}
|
|
function setVisible(field: string, visible: boolean) {
|
const rule = getRule('form', field);
|
rule.visible = visible;
|
if (!visible) rule.required = false;
|
}
|
|
function getRule(mode: 'form' | 'list', field: string): UserFieldRule {
|
return config.value[mode][field]!;
|
}
|
|
async function save() {
|
if (!Object.values(config.value.list).some((rule) => rule.visible)) {
|
createMessage.warning('列表至少需要显示一个字段');
|
return;
|
}
|
saving.value = true;
|
try {
|
const res = await updateUserFieldConfig(config.value);
|
createMessage.success(res.msg);
|
} finally {
|
saving.value = false;
|
}
|
}
|
|
onMounted(load);
|
</script>
|
|
<template>
|
<a-spin :spinning="loading">
|
<div class="max-w-[900px]">
|
<div class="mb-[28px]">
|
<JnpfGroupTitle content="用户表单" class="mb-[12px]" />
|
<div class="grid grid-cols-[minmax(120px,1fr)_90px_90px] border-b border-gray-200 py-[8px] text-gray-500">
|
<span>字段</span><span>显示</span><span>必填</span>
|
</div>
|
<div
|
v-for="item in userFormFields"
|
:key="item.field"
|
class="grid grid-cols-[minmax(120px,1fr)_90px_90px] items-center border-b border-gray-100 py-[8px]">
|
<span>{{ item.label }}</span>
|
<a-switch
|
:checked="getRule('form', item.field).visible"
|
:disabled="'core' in item && item.core"
|
class="justify-self-start"
|
style="width: 44px; min-width: 44px; margin: 0"
|
@change="setVisible(item.field, $event)" />
|
<a-switch
|
v-model:checked="getRule('form', item.field).required"
|
:disabled="('core' in item && item.core) || !getRule('form', item.field).visible"
|
class="justify-self-start"
|
style="width: 44px; min-width: 44px; margin: 0" />
|
</div>
|
</div>
|
<JnpfGroupTitle content="用户列表" class="mb-[12px]" />
|
<div class="grid grid-cols-[minmax(120px,1fr)_90px] border-b border-gray-200 py-[8px] text-gray-500"><span>字段</span><span>显示</span></div>
|
<div v-for="item in userListFields" :key="item.field" class="grid grid-cols-[minmax(120px,1fr)_90px] items-center border-b border-gray-100 py-[8px]">
|
<span>{{ item.label }}</span
|
><a-switch v-model:checked="getRule('list', item.field).visible" class="justify-self-start" style="width: 44px; min-width: 44px; margin: 0" />
|
</div>
|
<a-button type="primary" class="mt-[24px]" :loading="saving" @click="save">保存</a-button>
|
</div>
|
</a-spin>
|
</template>
|
