feat: 新增需求

This commit is contained in:
caijun
2026-01-20 18:07:35 +08:00
parent 9f5b2a92c4
commit 4243e1213f
26 changed files with 2837 additions and 936 deletions

View File

@@ -1,6 +1,6 @@
<template>
<u-form :model="formData" ref="dataForm" :errorType="['toast']" label-position="left" label-width="150">
<u-form-item :label="item.label" :prop="item.id" v-for="(item, i) in formConfCopy" :key="i">
<u-form-item :label="item.label" :prop="item.id" v-for="(item, i) in formConfCopy" :key="`${item.id}-${i}`">
<JnpfInput v-if="useInputList.includes(item.__config__.jnpfKey)" input-align='right'
v-model="formData[item.id]" :placeholder="textPrefix+item.label" clearable />
<template v-if="['inputNumber','calculate'].includes(item.__config__.jnpfKey)">
@@ -12,11 +12,19 @@
<template v-if="['rate', 'slider'].includes(item.__config__.jnpfKey)">
<JnpfNumberRange v-model="formData[item.id]" :precision="item.allowHalf ? 1 : 0" />
</template>
<JnpfSelect v-if="useSelectList.includes(item.__config__.jnpfKey)" v-model="formData[item.id]"
:placeholder="selectPrefix+item.label" :options="item.options" :props="item.props"
:multiple="item.searchMultiple" :key="key" filterable />
<JnpfSelect
v-if="useSelectList.includes(item.__config__.jnpfKey)"
v-model="formData[item.id]"
:placeholder="selectPrefix+item.label"
:options="item.options || []"
:props="item.props || { label: 'label', value: 'value' }"
:multiple="!!item.searchMultiple"
:key="`select-${item.id}-${key}`"
filterable
/>
<JnpfCascader v-if="item.__config__.jnpfKey==='cascader'" v-model="formData[item.id]"
:placeholder="selectPrefix+item.label" :options="item.options" :props="item.props" filterable
:placeholder="selectPrefix+item.label" :options="item.options || []" :props="item.props" filterable
:showAllLevels="item.showAllLevels" :multiple="item.searchMultiple" />
<JnpfAutoComplete v-if="item.__config__.jnpfKey==='autoComplete'" v-model="formData[item.id]"
:interfaceName="item.interfaceName" :placeholder="selectPrefix+item.label"
@@ -44,10 +52,12 @@
<JnpfUsersSelect v-if="item.__config__.jnpfKey==='usersSelect'" v-model="formData[item.id]"
:placeholder="selectPrefix+item.label" :clearable="item.clearable" />
<JnpfTreeSelect v-if="item.__config__.jnpfKey==='treeSelect'" v-model="formData[item.id]"
:options="item.options" :props="item.props" :placeholder="selectPrefix+item.label" filterable
:options="item.options || []" :props="item.props" :placeholder="selectPrefix+item.label" filterable
:multiple="item.searchMultiple" />
<JnpfAreaSelect v-if="item.__config__.jnpfKey==='areaSelect'" v-model="formData[item.id]"
:placeholder="selectPrefix+item.label" :level="item.level" :multiple="item.searchMultiple" />
<!-- 日期/时间选择 -->
<template v-if="useDateList.includes(item.__config__.jnpfKey)">
<JnpfDatePicker v-model="formData[item.id]" :format='item.format' v-if="item.__config__.isFromParam" />
<JnpfDateRange v-model="formData[item.id]" :format='item.format' v-else />
@@ -58,41 +68,71 @@
</u-form>
</template>
<script>
import {
getDictionaryDataSelector,
getDataInterfaceRes
} from '@/api/common'
const dyOptionsList = ['radio', 'checkbox', 'select', 'cascader', 'treeSelect'];
const useSelectList = ['radio', 'checkbox', 'select'];
const useInputList = ['input', 'textarea', 'text', 'link', 'billRule', 'location'];
const useDateList = ['createTime', 'modifyTime', 'datePicker', 'dateCalculate'];
const useArrList = ['cascader', 'address', 'numInput', 'calculate', ...useDateList]
export default {
props: ['formConf', 'webType', 'searchFormData'],
data() {
const data = {
return {
useInputList,
useDateList,
useSelectList,
formConfCopy: this.$u.deepClone(this.formConf),
formData: this.$u.deepClone(this.searchFormData),
formConfCopy: [], // 初始化为空,避免提前克隆
formData: {},
key: +new Date(),
textPrefix: this.$t('common.inputTextPrefix') + ' ',
selectPrefix: this.$t('common.chooseTextPrefix') + ' ',
}
this.initRelationForm(data.formConfCopy)
this.initFormData(data.formConfCopy, data.formData)
return data
},
// 核心深度监听formConf变化确保数据同步
watch: {
searchFormData(val) {
this.formData = val
// 监听父组件传递的formConf深度+立即执行)
formConf: {
deep: true,
immediate: true,
handler(newVal) {
if (!newVal) return;
// 重新克隆最新的配置
this.formConfCopy = this.$u.deepClone(newVal);
// 延迟初始化确保DOM更新
this.$nextTick(() => {
this.initRelationForm(this.formConfCopy);
// 初始化时彻底跳过接口请求
this.initFormData(this.formConfCopy, this.formData);
});
}
},
// 监听搜索数据变化
searchFormData: {
deep: true,
immediate: true,
handler(newVal) {
this.formData = this.$u.deepClone(newVal);
}
}
},
methods: {
/**
* 初始化表单数据(彻底跳过接口请求)
*/
initFormData(componentList, formData) {
console.log('Parser接收的配置:', componentList);
if (!componentList || !Array.isArray(componentList)) return;
componentList.forEach(cur => {
const config = cur.__config__
const config = cur.__config__ || {};
if (cur.id && formData[cur.id] === undefined) {
// 初始化表单默认值
formData[cur.id] = cur.value || (cur.searchMultiple ? [] : '');
}
// 原接口逻辑全部注释,彻底跳过
/*
if (dyOptionsList.indexOf(config.jnpfKey) > -1) {
if (config.dataType === 'dictionary' && config.dictionaryType) {
getDictionaryDataSelector(config.dictionaryType).then(res => {
@@ -113,51 +153,71 @@
})
}
}
})
*/
});
// 更新key强制刷新组件
this.key = +new Date();
},
/**
* 初始化关联表单配置
*/
initRelationForm(componentList) {
if (!componentList) return;
componentList.forEach(cur => {
const config = cur.__config__
const config = cur.__config__ || {};
if (config.jnpfKey == 'relationFormAttr' || config.jnpfKey == 'popupAttr') {
const relationKey = cur.relationField.split("_jnpfTable_")[0]
const relationKey = cur.relationField?.split("_jnpfTable_")[0];
if (!relationKey) return;
componentList.forEach(item => {
const noVisibility = Array.isArray(item.__config__.visibility) && !item
.__config__.visibility.includes('app')
if ((relationKey == item.id) && (noVisibility || !!item.__config__
.noShow)) {
cur.__config__.noShow = true
const noVisibility = Array.isArray(item.__config__?.visibility) && !item.__config__.visibility.includes('app');
if ((relationKey == item.id) && (noVisibility || !!item.__config__?.noShow)) {
cur.__config__.noShow = true;
}
})
});
}
if (cur.__config__.children && cur.__config__.children.length) this.initRelationForm(cur
.__config__.children)
})
if (cur.__config__?.children && cur.__config__.children.length) {
this.initRelationForm(cur.__config__.children);
}
});
},
/**
* 获取表单数据(空值处理)
*/
allCondition() {
for (let key in this.formData) {
if (this.formData[key] !== 0 && !this.formData[key]) this.formData[key] = undefined;
if (this.formData[key] && Array.isArray(this.formData[key]) && !this.formData[key]
.length) {
this.formData[key] = undefined
const result = {...this.formData};
for (let key in result) {
if (result[key] === 0) continue;
if (!result[key] || (Array.isArray(result[key]) && result[key].length === 0)) {
delete result[key];
}
}
return this.formData
return result;
},
/**
* 提交表单
*/
submitForm() {
if (!this.$refs.dataForm) {
this.$emit('submit', this.allCondition());
return;
}
this.$refs.dataForm.validate(valid => {
if (!valid) return
for (let key in this.formData) {
if (this.formData[key] !== 0 && !this.formData[key]) this.formData[key] = undefined;
if (this.formData[key] && Array.isArray(this.formData[key]) && !this.formData[key]
.length) {
this.formData[key] = undefined
}
}
this.$emit('submit', this.formData)
})
if (!valid) return;
this.$emit('submit', this.allCondition());
});
},
/**
* 重置表单
*/
resetForm() {
this.$refs.dataForm.resetFields()
if (this.$refs.dataForm) {
this.$refs.dataForm.resetFields();
}
}
}
}