<script lang="ts" setup>
|
import { computed, onMounted, ref, unref, watch } from 'vue';
|
|
import { useMessage } from '@jnpf/hooks';
|
import { useModal } from '@jnpf/ui/modal';
|
|
import draggable from 'vuedraggable';
|
|
import ExtraConfigModal from '#/components/ColumnDesign/src/components/ExtraConfigModal.vue';
|
import { InterfaceModal } from '#/components/CommonModal';
|
import { SelectInterfaceBtn } from '#/components/Interface';
|
|
import { useDynamic } from '../hooks/useDynamic';
|
import { useField } from '../hooks/useField';
|
import RuleModal from './RRelationForm/RuleModal.vue';
|
|
defineOptions({ inheritAttrs: false });
|
const props = defineProps(['activeData', 'dicOptions']);
|
const { createMessage } = useMessage();
|
const [registerModal, { openModal }] = useModal();
|
const [registerExtraConfigModal, { openModal: openExtraConfigModal }] = useModal();
|
const jnpfKey = computed(() => unref(props.activeData).__config__?.jnpfKey);
|
const { options, allOptions, debounceOnSearch, onFocus, initFieldData } = useField(props.activeData);
|
const { showType, formFieldsOptions, formFieldsTransferOptions, onRelationFieldChange, onMultipleChange } = useDynamic(props.activeData);
|
const activeColumnIndex = ref(-1);
|
|
const popupTypeOptions = [
|
{ id: 'dialog', fullName: '居中弹窗' },
|
{ id: 'drawer', fullName: '右侧弹窗' },
|
];
|
const popupWidthOptions = ['600px', '800px', '1000px', '40%', '50%', '60%', '70%', '80%'];
|
const pageSizeOptions = [
|
{ id: 20, fullName: '20条' },
|
{ id: 50, fullName: '50条' },
|
{ id: 80, fullName: '80条' },
|
{ id: 100, fullName: '100条' },
|
];
|
const viewJnpfKeyOptions = [
|
{ id: 'input', fullName: '单行输入' },
|
{ id: 'inputNumber', fullName: '数字输入' },
|
{ id: 'select', fullName: '下拉选择' },
|
{ id: 'datePicker', fullName: '日期选择' },
|
{ id: 'timePicker', fullName: '时间选择' },
|
{ id: 'organizeSelect', fullName: '组织选择' },
|
{ id: 'roleSelect', fullName: '角色选择' },
|
{ id: 'posSelect', fullName: '岗位选择' },
|
{ id: 'groupSelect', fullName: '分组选择' },
|
{ id: 'userSelect', fullName: '用户选择' },
|
];
|
const canSetAttrs = ['select', 'datePicker', 'timePicker', 'organizeSelect', 'userSelect', 'posSelect'];
|
|
function onInterfaceIdChange(val, row) {
|
props.activeData.__config__.transferList = [];
|
props.activeData.extraOptions = [];
|
props.activeData.columnOptions = [];
|
if (!val) {
|
props.activeData.interfaceId = '';
|
props.activeData.interfaceName = '';
|
props.activeData.templateJson = [];
|
props.activeData.interfaceHasPage = 0;
|
props.activeData.__config__.defaultValue = '';
|
initFieldData();
|
return;
|
}
|
if (props.activeData.interfaceId === val) return;
|
props.activeData.interfaceId = val;
|
props.activeData.interfaceName = row.fullName;
|
props.activeData.templateJson = row.parameterJson ? JSON.parse(row.parameterJson).map((o) => ({ ...o, relationField: '', sourceType: 1 })) : [];
|
props.activeData.__config__.defaultValue = '';
|
props.activeData.interfaceHasPage = row.hasPage;
|
if (row.hasPage) props.activeData.hasPage = true;
|
initFieldData();
|
}
|
function addExtraItem() {
|
if (!props.activeData.extraOptions) props.activeData.extraOptions = [];
|
props.activeData.extraOptions.push({
|
value: '',
|
label: '',
|
});
|
}
|
function addSelectItem() {
|
props.activeData.columnOptions.push({
|
value: '',
|
label: '',
|
jnpfKey: 'input',
|
__config__: { jnpfKey: 'input' },
|
});
|
}
|
function handleTransferRules() {
|
if (!props.activeData.interfaceId) return createMessage.warning('请先选择数据接口');
|
openModal(true, {
|
transferList: props.activeData.__config__.transferList,
|
fieldOptions: allOptions,
|
formFieldsOptions: unref(formFieldsTransferOptions).filter((o) => isSameSource(o)),
|
type: 'popupSelect',
|
});
|
}
|
function isSameSource(data) {
|
const isSubTable = props.activeData.__config__.isSubTable;
|
if (isSubTable) return data.__config__.isSubTable && props.activeData.__config__.parentVModel === data.__config__.parentVModel;
|
return !data.__config__.isSubTable;
|
}
|
function onRuleChange(data) {
|
props.activeData.__config__.transferList = data;
|
}
|
function buildColumnDefaultItem(item, val = item.jnpfKey || 'input') {
|
const defaultItem: any = {
|
...item,
|
echoExpanded: !!item.echoExpanded,
|
jnpfKey: val,
|
__config__: {
|
...item.__config__,
|
jnpfKey: val,
|
},
|
};
|
if (val === 'inputNumber') {
|
defaultItem.precision = 0;
|
defaultItem.thousands = false;
|
}
|
if (val === 'datePicker') defaultItem.format = 'yyyy-MM-dd';
|
if (val === 'timePicker') defaultItem.format = 'HH:mm:ss';
|
if (val === 'select') {
|
defaultItem.options = item.options || [];
|
defaultItem.props = item.props || { label: 'fullName', value: 'id' };
|
defaultItem.__config__ = {
|
...defaultItem.__config__,
|
dataType: defaultItem.__config__.dataType || 'static',
|
propsUrl: defaultItem.__config__.propsUrl || '',
|
propsName: defaultItem.__config__.propsName || '',
|
templateJson: defaultItem.__config__.templateJson || [],
|
dictionaryType: defaultItem.__config__.dictionaryType || '',
|
};
|
}
|
if (['organizeSelect', 'posSelect', 'userSelect'].includes(val)) defaultItem.selectRange = defaultItem.selectRange || '1';
|
return defaultItem;
|
}
|
function normalizeColumnOptions() {
|
if (!props.activeData.columnOptions) props.activeData.columnOptions = [];
|
const hasUnnormalized = props.activeData.columnOptions.some((item) => !item.jnpfKey || !item.__config__?.jnpfKey);
|
if (hasUnnormalized) {
|
props.activeData.columnOptions = props.activeData.columnOptions.map((item) => buildColumnDefaultItem(item));
|
}
|
}
|
function isEchoExpanded(element) {
|
return !!element.echoExpanded;
|
}
|
function toggleColumnEchoExpand(element) {
|
element.echoExpanded = !element.echoExpanded;
|
}
|
function onColumnJnpfKeyChange(val, element, index) {
|
props.activeData.columnOptions[index] = buildColumnDefaultItem(element, val);
|
}
|
function openColumnExtraConfig(element, index) {
|
activeColumnIndex.value = index;
|
openExtraConfigModal(true, buildColumnDefaultItem(element));
|
}
|
function updateColumnItem(data) {
|
if (activeColumnIndex.value < 0) return;
|
props.activeData.columnOptions[activeColumnIndex.value] = data;
|
}
|
|
onMounted(() => {
|
normalizeColumnOptions();
|
initFieldData();
|
});
|
watch(
|
() => props.activeData?.columnOptions,
|
() => normalizeColumnOptions(),
|
{ deep: true },
|
);
|
</script>
|
<template>
|
<a-form-item label="弹窗标题" v-if="jnpfKey === 'popupSelect'">
|
<a-input v-model:value="activeData.popupTitle" placeholder="请输入" />
|
</a-form-item>
|
<a-form-item label="弹窗类型" v-if="jnpfKey === 'popupSelect' && showType === 'pc'">
|
<jnpf-select v-model:value="activeData.popupType" placeholder="请选择" :options="popupTypeOptions" />
|
</a-form-item>
|
<a-form-item label="弹窗宽度" v-if="jnpfKey === 'popupSelect' && showType === 'pc'">
|
<a-select v-model:value="activeData.popupWidth" placeholder="请选择">
|
<a-select-option v-for="item in popupWidthOptions" :key="item" :value="item">{{ item }}</a-select-option>
|
</a-select>
|
</a-form-item>
|
<a-form-item>
|
<template #label>数据接口<BasicHelp text="支持通过数据接口的参数实现控件之间的联动。" /></template>
|
<InterfaceModal :value="activeData.interfaceId" :title="activeData.interfaceName" :source-type="2" popup-title="数据接口" @change="onInterfaceIdChange" />
|
</a-form-item>
|
<a-form-item label="存储字段">
|
<a-auto-complete
|
v-model:value="activeData.propsValue"
|
placeholder="请输入"
|
:options="options"
|
@focus="onFocus(activeData.propsValue)"
|
@search="debounceOnSearch(activeData.propsValue)" />
|
</a-form-item>
|
<a-form-item label="回显字段">
|
<a-auto-complete
|
v-model:value="activeData.relationField"
|
placeholder="请输入"
|
:options="options"
|
@focus="onFocus(activeData.relationField)"
|
@search="debounceOnSearch(activeData.relationField)" />
|
</a-form-item>
|
<a-form-item label="是否缓存">
|
<a-switch v-model:checked="activeData.__config__.useCache" />
|
</a-form-item>
|
<a-form-item v-if="jnpfKey === 'popupSelect'">
|
<template #label>填充字段<BasicHelp text="选择数据后，将数据接口的字段值填充到当前表单字段，不支持代码生成。" /></template>
|
<a-button block @click="handleTransferRules()">{{ activeData.__config__.transferList?.length ? '编辑填充规则' : '填充规则配置' }}</a-button>
|
</a-form-item>
|
<a-form-item label="参数设置" v-if="activeData.templateJson?.length">
|
<SelectInterfaceBtn :template-json="activeData.templateJson" :field-options="formFieldsOptions" @field-change="onRelationFieldChange" />
|
</a-form-item>
|
<a-divider v-if="jnpfKey === 'popupSelect' && !activeData.__config__.isSubTable">显示字段</a-divider>
|
<div class="options-list" v-if="jnpfKey === 'popupSelect' && !activeData.__config__.isSubTable">
|
<draggable v-model="activeData.extraOptions" :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>
|
<a-input v-model:value="element.label" placeholder="列名" class="column-label-input" />
|
<a-auto-complete
|
v-model:value="element.value"
|
placeholder="字段"
|
class="column-value-input"
|
:options="options"
|
@focus="onFocus(element.value)"
|
@search="debounceOnSearch(element.value)" />
|
<div class="close-btn select-line-icon" @click="activeData.extraOptions.splice(index, 1)">
|
<i class="icon-ym icon-ym-btn-clearn"></i>
|
</div>
|
</div>
|
</template>
|
</draggable>
|
<div class="add-btn">
|
<a-button type="link" pre-icon="icon-ym icon-ym-btn-add" @click="addExtraItem">添加字段</a-button>
|
</div>
|
</div>
|
<a-divider>列表字段</a-divider>
|
<div class="options-list popup-column-options-list">
|
<draggable v-model="activeData.columnOptions" :animation="300" group="selectItem" handle=".option-drag" item-key="uuid">
|
<template #item="{ element, index }">
|
<div class="select-item popup-column-item">
|
<div class="select-line-icon option-drag">
|
<i class="icon-ym icon-ym-darg"></i>
|
</div>
|
<div class="popup-column-main">
|
<div class="popup-column-field-row">
|
<a-input v-model:value="element.label" placeholder="列名" />
|
<a-auto-complete
|
v-model:value="element.value"
|
placeholder="字段"
|
:options="options"
|
@focus="onFocus(element.value)"
|
@search="debounceOnSearch(element.value)" />
|
<div
|
class="select-line-icon popup-column-echo-toggle"
|
:class="{ expanded: isEchoExpanded(element) }"
|
:title="isEchoExpanded(element) ? '收起回显设置' : '展开回显设置'"
|
@click="toggleColumnEchoExpand(element)">
|
<i class="icon-ym icon-ym-arrow-down"></i>
|
</div>
|
</div>
|
<div class="popup-column-echo-row" v-if="isEchoExpanded(element)">
|
<jnpf-select
|
v-model:value="element.jnpfKey"
|
:options="viewJnpfKeyOptions"
|
class="echo-type-select"
|
@change="onColumnJnpfKeyChange($event, element, index)" />
|
<div
|
class="select-line-icon popup-column-setting"
|
:class="{ invisible: !canSetAttrs.includes(element.jnpfKey) }"
|
title="回显属性设置"
|
@click="canSetAttrs.includes(element.jnpfKey) && openColumnExtraConfig(element, index)">
|
<i class="icon-ym icon-ym-shezhi"></i>
|
</div>
|
</div>
|
</div>
|
<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">
|
<a-button type="link" pre-icon="icon-ym icon-ym-btn-add" @click="addSelectItem">添加字段</a-button>
|
</div>
|
</div>
|
<a-divider>列表分页</a-divider>
|
<a-form-item label="分页设置">
|
<a-switch v-model:checked="activeData.hasPage" :disabled="!!activeData.interfaceHasPage && 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>
|
<a-divider />
|
<a-form-item label="能否清空">
|
<a-switch v-model:checked="activeData.clearable" />
|
</a-form-item>
|
<a-form-item label="能否多选" v-if="jnpfKey === 'popupTableSelect'">
|
<a-switch v-model:checked="activeData.multiple" @change="onMultipleChange" />
|
</a-form-item>
|
<RuleModal @register="registerModal" @change="onRuleChange" />
|
<ExtraConfigModal @register="registerExtraConfigModal" @confirm="updateColumnItem" />
|
</template>
|
<style lang="scss" scoped>
|
.popup-column-options-list {
|
.popup-column-item {
|
display: flex !important;
|
gap: 4px;
|
align-items: flex-start;
|
|
:deep(.ant-select),
|
:deep(.ant-input),
|
:deep(.ant-select-selector) {
|
min-width: 0;
|
}
|
|
.option-drag,
|
.close-btn {
|
flex: 0 0 30px;
|
}
|
|
.popup-column-main {
|
display: flex;
|
flex: 1;
|
flex-direction: column;
|
gap: 4px;
|
min-width: 0;
|
}
|
|
.popup-column-field-row {
|
display: grid;
|
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 30px;
|
gap: 4px;
|
}
|
|
.popup-column-echo-toggle {
|
cursor: pointer;
|
transition: transform 0.2s ease;
|
|
&.expanded {
|
color: var(--primary-color);
|
transform: rotate(180deg);
|
}
|
}
|
|
.popup-column-echo-row {
|
display: grid;
|
grid-template-columns: minmax(0, 1fr) 30px;
|
gap: 4px;
|
|
.echo-type-select {
|
width: 100%;
|
}
|
|
.popup-column-setting {
|
cursor: pointer;
|
}
|
}
|
}
|
}
|
</style>
|
