<script lang="ts" setup>
|
import { computed, onMounted, ref, unref } from 'vue';
|
|
import { useMessage } from '@jnpf/hooks';
|
import { useModal } from '@jnpf/ui/modal';
|
|
import { omit } from 'lodash-es';
|
import draggable from 'vuedraggable';
|
|
import { getConfigData, getShareSelector } from '#/api/onlineDev/visualDev';
|
import SortRuleModal from '#/components/ColumnDesign/src/components/DefaultSortConfigModal.vue';
|
|
import { noAllowConditionList, noGroupList, systemComponentsList } from '../../helper/config';
|
import ConditionModal from './ConditionModal.vue';
|
|
defineOptions({ inheritAttrs: false });
|
const props = defineProps(['activeData', 'drawingList']);
|
const emit = defineEmits(['relationChange']);
|
const { createMessage } = useMessage();
|
const [registerConditionModal, { openModal: openConditionModal }] = useModal();
|
const [registerSortRuleModal, { openModal: openSortRuleModal }] = useModal();
|
|
const pageSizeOptions = [
|
{ id: 20, fullName: '20条' },
|
{ id: 50, fullName: '50条' },
|
{ id: 80, fullName: '80条' },
|
{ id: 100, fullName: '100条' },
|
];
|
const treeData = ref([]);
|
const fieldOptions = ref<any[]>([]);
|
const treeFieldData = ref<any[]>([]);
|
|
const formFieldsOptions = computed(() => {
|
const list: any[] = [];
|
const loop = (data, parent?) => {
|
if (!data) return;
|
if (data.__config__ && data.__config__.children && Array.isArray(data.__config__.children)) {
|
loop(data.__config__.children, data);
|
}
|
if (Array.isArray(data)) data.forEach((d) => loop(d, parent));
|
const isTableChild = parent && parent.__config__ && parent.__config__.jnpfKey === 'table';
|
if (data.__vModel__ && data.__config__ && !isTableChild && ![noAllowConditionList, ...systemComponentsList].includes(data?.__config__?.jnpfKey)) {
|
const item = {
|
id: data.__vModel__,
|
fullName: data.__config__.label,
|
};
|
list.push(item);
|
}
|
};
|
loop(props.drawingList);
|
return list;
|
});
|
|
function onModeIdChange(val) {
|
props.activeData.sortRule = [];
|
props.activeData.queryRule = { conditionList: [], matchLogic: 'and' };
|
props.activeData.columnOptions = [];
|
emit('relationChange', props.activeData.__vModel__);
|
if (!val) {
|
fieldOptions.value = [];
|
treeFieldData.value = [];
|
return;
|
}
|
getFieldOptions();
|
}
|
function getFieldOptions() {
|
if (!props.activeData.modelId) return;
|
getConfigData(props.activeData.modelId).then((res) => {
|
const { formData } = res.data;
|
let fieldList: any = [];
|
let formJson: any = {};
|
if (formData) formJson = JSON.parse(formData);
|
fieldList = formJson.fields || [];
|
fieldOptions.value = transformFieldList(fieldList);
|
treeFieldData.value = transformField(fieldList);
|
});
|
}
|
function transformField(formFieldList, parent?) {
|
return formFieldList.map((data) => {
|
const isTableChild = parent && parent.__config__ && parent.__config__.jnpfKey === 'table';
|
const item: any = {
|
id: isTableChild ? `${parent.__vModel__}-${data.__vModel__}` : data.__vModel__,
|
fullName: data.__config__.label,
|
};
|
if (data.__config__.children?.length) item.children = transformField(data.__config__.children || [], data);
|
return item;
|
});
|
}
|
function transformFieldList(formFieldList) {
|
const list: any[] = [];
|
const loop = (data, parent?) => {
|
if (!data) return;
|
if (data.__vModel__ && data.__config__.jnpfKey !== 'table') {
|
const isTableChild = parent && parent.__config__ && parent.__config__.jnpfKey === 'table';
|
const item = {
|
...omit(data, ['disabled']),
|
id: isTableChild ? `${parent.__vModel__}-${data.__vModel__}` : data.__vModel__,
|
fullName: isTableChild ? `${parent.__config__.label}-${data.__config__.label}` : data.__config__.label,
|
};
|
list.push(item);
|
}
|
if (Array.isArray(data)) data.forEach((d) => loop(d, parent));
|
if (data.__config__ && data.__config__.children && Array.isArray(data.__config__.children)) {
|
loop(data.__config__.children, data);
|
}
|
};
|
loop(formFieldList);
|
return list;
|
}
|
function visibleChange(val) {
|
if (!val) return;
|
if (!props.activeData.modelId) createMessage.warning('请先选择关联功能');
|
}
|
function getFeatureList() {
|
getShareSelector().then((res) => {
|
treeData.value = res.data.list;
|
});
|
}
|
function handleOpenSortRuleModal() {
|
if (!props.activeData.modelId) return createMessage.warning('请先选择关联功能');
|
openSortRuleModal(true, {
|
list: props.activeData.sortRule || [],
|
columnOptions: fieldOptions.value.filter((o) => !o.id.includes('-') && !o.id.includes('_jnpf_') && !noGroupList.includes(o.__config__.jnpfKey)),
|
});
|
}
|
function handleOpenConditionModal() {
|
if (!props.activeData.modelId) return createMessage.warning('请先选择关联功能');
|
openConditionModal(true, {
|
...props.activeData.queryRule,
|
fieldOptions: fieldOptions.value,
|
valueFieldOptions: unref(formFieldsOptions),
|
});
|
}
|
function onConditionConfirm(data) {
|
props.activeData.queryRule = data;
|
}
|
function onSortRuleConfirm(data) {
|
props.activeData.sortRule = data;
|
}
|
function addExtraItem() {
|
if (!props.activeData.columnOptions) props.activeData.columnOptions = [];
|
props.activeData.columnOptions.push({
|
value: '',
|
label: '',
|
});
|
}
|
function onChange(val, item) {
|
const list = fieldOptions.value.filter((o) => o.id === val) || [];
|
if (!list.length) return;
|
const active = list[0];
|
item.label = active.fullName;
|
}
|
|
onMounted(() => {
|
getFeatureList();
|
getFieldOptions();
|
});
|
</script>
|
<template>
|
<a-form-item label="卡片标题">
|
<jnpf-i18n-input v-model:value="activeData.title" v-model:i18n="activeData.headerI18nCode" placeholder="请输入" />
|
</a-form-item>
|
<a-form-item label="显示标题">
|
<a-switch v-model:checked="activeData.showTitle" />
|
</a-form-item>
|
<a-form-item label="关联功能">
|
<JnpfTreeSelect v-model:value="activeData.modelId" :options="treeData" placeholder="请选择" last-level allow-clear @change="onModeIdChange" />
|
</a-form-item>
|
<a-divider>显示字段</a-divider>
|
<div class="options-list">
|
<draggable v-model="activeData.columnOptions" :animation="300" group="extraItem" handle=".option-drag" item-key="uuid">
|
<template #item="{ element, index }">
|
<div class="select-item">
|
<div class="select-line-icon option-drag">
|
<i class="icon-ym icon-ym-darg"></i>
|
</div>
|
<jnpf-select
|
v-model:value="element.value"
|
placeholder="请选择"
|
:options="fieldOptions"
|
:field-names="{ options: 'options1' }"
|
show-search
|
@dropdown-visible-change="visibleChange"
|
@change="onChange($event, element)" />
|
<div class="close-btn select-line-icon" @click="activeData.columnOptions.splice(index, 1)">
|
<i class="icon-ym icon-ym-btn-clearn"></i>
|
</div>
|
</div>
|
</template>
|
</draggable>
|
<div class="add-btn pb-[30px]">
|
<a-button type="link" pre-icon="icon-ym icon-ym-btn-add" @click="addExtraItem">添加字段</a-button>
|
</div>
|
</div>
|
<a-form-item label="数据排序规则">
|
<a-button block @click="handleOpenSortRuleModal()">排序规则设置</a-button>
|
</a-form-item>
|
<a-form-item label="数据查询设置">
|
<a-button block @click="handleOpenConditionModal()">添加过滤条件</a-button>
|
<a-checkbox v-model:checked="activeData.defaultEmpty" class="!mt-[8px]">查询数据列表默认为空 </a-checkbox>
|
</a-form-item>
|
<a-form-item label="分页设置">
|
<a-switch v-model:checked="activeData.hasPage" />
|
</a-form-item>
|
<a-form-item label="分页条数" v-if="activeData.hasPage">
|
<jnpf-radio v-model:value="activeData.pageSize" :options="pageSizeOptions" option-type="button" button-style="solid" class="right-radio" />
|
</a-form-item>
|
<ConditionModal @register="registerConditionModal" @confirm="onConditionConfirm" />
|
<SortRuleModal title="数据排序设置" @register="registerSortRuleModal" @confirm="onSortRuleConfirm" />
|
</template>
|
