<script lang="ts" setup>
|
import { computed, unref } from 'vue';
|
|
defineOptions({ inheritAttrs: false });
|
const props = defineProps(['activeData', 'drawingList']);
|
|
const selectTypeOptions = [
|
{ id: 'all', fullName: '全部' },
|
{ id: 'custom', fullName: '自定义' },
|
];
|
const userSelectTypeOptions = [
|
...selectTypeOptions,
|
{ id: 'org', fullName: '组织组件联动' },
|
{ id: 'pos', fullName: '岗位组件联动' },
|
{ id: 'role', fullName: '角色组件联动' },
|
{ id: 'group', fullName: '分组组件联动' },
|
];
|
|
const jnpfKey = computed(() => unref(props.activeData).__config__?.jnpfKey);
|
const formFieldsOptions = computed(() => {
|
if (props.activeData.selectType === 'all' || props.activeData.selectType === 'custom') return [];
|
const list: any[] = [];
|
const selectType = props.activeData.selectType == 'org' ? 'organize' : props.activeData.selectType;
|
const loop = (data, parent?) => {
|
if (!data) return;
|
if (data.__config__ && isIncludesTable(data) && data.__config__.children && Array.isArray(data.__config__.children)) {
|
loop(data.__config__.children, data);
|
}
|
if (Array.isArray(data)) data.forEach((d) => loop(d, parent));
|
if (data.__vModel__ && data.__config__.jnpfKey === `${selectType}Select` && data.__vModel__ !== props.activeData.__vModel__) {
|
const isTableChild = parent && parent.__config__ && parent.__config__.jnpfKey === 'table';
|
list.push({
|
id: isTableChild ? `${parent.__vModel__}-${data.__vModel__}` : data.__vModel__,
|
fullName: isTableChild ? `${parent.__config__.label}-${data.__config__.label}` : data.__config__.label,
|
...data,
|
});
|
}
|
};
|
loop(props.drawingList);
|
return list;
|
});
|
|
function isIncludesTable(data) {
|
if ((!data.__config__.layout || data.__config__.layout === 'rowFormItem') && data.__config__.jnpfKey !== 'table') return true;
|
if (props.activeData.__config__.isSubTable) return props.activeData.__config__.parentVModel === data.__vModel__;
|
return data.__config__.jnpfKey !== 'table';
|
}
|
function onTypeChange() {
|
onChange();
|
props.activeData.ableIds = [];
|
props.activeData.__config__.defaultCurrent = false;
|
if (props.activeData.__config__.jnpfKey === 'userSelect') props.activeData.relationField = '';
|
}
|
function onChange() {
|
props.activeData.__config__.defaultValue = props.activeData.multiple ? [] : '';
|
}
|
function getLabel(key) {
|
if (key === 'organizeSelect') return '组织';
|
if (key === 'posSelect') return '岗位';
|
return '登录用户';
|
}
|
</script>
|
<template>
|
<a-form-item label="可选范围" v-if="jnpfKey !== 'usersSelect'">
|
<jnpf-select v-model:value="activeData.selectType" :options="jnpfKey === 'userSelect' ? userSelectTypeOptions : selectTypeOptions" @change="onTypeChange" />
|
<template v-if="activeData.selectType === 'custom'">
|
<template v-if="jnpfKey === 'organizeSelect'">
|
<JnpfOrganizeSelect
|
v-model:value="activeData.ableIds"
|
modal-title="添加组织"
|
button-type="button"
|
multiple
|
has-sys
|
class="!mt-[10px]"
|
@change="onChange" />
|
</template>
|
<template v-if="jnpfKey === 'posSelect'">
|
<JnpfPosSelect v-model:value="activeData.ableIds" modal-title="添加岗位" button-type="button" multiple has-sys class="!mt-[10px]" @change="onChange" />
|
</template>
|
<template v-if="jnpfKey === 'roleSelect'">
|
<JnpfRoleSelect v-model:value="activeData.ableIds" button-type="button" multiple class="!mt-[10px]" @change="onChange" />
|
</template>
|
<template v-if="jnpfKey === 'groupSelect'">
|
<JnpfGroupSelect v-model:value="activeData.ableIds" button-type="button" multiple has-sys class="!mt-[10px]" @change="onChange" />
|
</template>
|
<template v-if="jnpfKey === 'userSelect'">
|
<JnpfUsersSelect
|
v-model:value="activeData.ableIds"
|
modal-title="添加用户"
|
button-type="button"
|
multiple
|
has-sys
|
class="!mt-[10px]"
|
@change="onChange" />
|
</template>
|
</template>
|
<template v-if="jnpfKey === 'userSelect' && ['org', 'pos', 'role', 'group'].includes(activeData.selectType)">
|
<jnpf-radio v-model:value="activeData.relationField" :options="formFieldsOptions" direction="vertical" class="mt-[10px]" />
|
</template>
|
</a-form-item>
|
<a-form-item label="默认值">
|
<component
|
:is="activeData.__config__.tag"
|
v-model:value="activeData.__config__.defaultValue"
|
:multiple="activeData.multiple"
|
:select-type="activeData.selectType"
|
:able-ids="activeData.ableIds"
|
:disabled="activeData.__config__.defaultCurrent" />
|
<a-checkbox
|
v-model:checked="activeData.__config__.defaultCurrent"
|
class="!mt-[8px]"
|
:disabled="activeData.selectType && activeData.selectType !== 'all'"
|
@change="onChange"
|
v-if="!['roleSelect', 'groupSelect'].includes(jnpfKey)">
|
当前{{ getLabel(activeData.__config__.jnpfKey) }}
|
<BasicHelp class="!ml-0" text="单选时取默认组织，多选时取当前所有组织" v-if="activeData.__config__.jnpfKey === 'organizeSelect'" />
|
<BasicHelp class="!ml-0" text="单选时取默认岗位，多选时取当前所有岗位" v-if="activeData.__config__.jnpfKey === 'posSelect'" />
|
</a-checkbox>
|
</a-form-item>
|
<a-form-item label="能否清空">
|
<a-switch v-model:checked="activeData.clearable" />
|
</a-form-item>
|
<a-form-item label="能否多选" v-if="jnpfKey !== 'usersSelect'">
|
<a-switch v-model:checked="activeData.multiple" @change="onChange" />
|
</a-form-item>
|
</template>
|
