145 lines
4.0 KiB
Vue
145 lines
4.0 KiB
Vue
<template>
|
|
<div>
|
|
<a-card
|
|
style="width: 100%"
|
|
:tab-list="tabListNoTitle"
|
|
:active-tab-key="noTitleKey"
|
|
@tabChange="(key) => onTabChange(key)"
|
|
>
|
|
<BasicForm ref="cardRef" @register="registerForm" @change="changeForm" />
|
|
<template v-if="Object.keys(childItem).length > 0">
|
|
<CardGourp
|
|
:data="childItem"
|
|
:parentValue="props.parentValue"
|
|
:formData="props.formData"
|
|
v-if="childItem"
|
|
/>
|
|
</template>
|
|
</a-card>
|
|
</div>
|
|
</template>
|
|
<script lang="ts" setup>
|
|
import { BasicForm, useForm } from '@/components/Form';
|
|
import { CardGourp } from './index';
|
|
import { ref, watch } from 'vue';
|
|
import { subTableStore } from '@/store/modules/subTable';
|
|
import dayjs from 'dayjs';
|
|
|
|
const subTableDataStore = subTableStore();
|
|
const props = defineProps({
|
|
data: {
|
|
type: Object,
|
|
default: () => ({}),
|
|
},
|
|
parentValue: {
|
|
type: String,
|
|
default: () => '',
|
|
},
|
|
formData: {
|
|
type: Object,
|
|
default: () => ({}),
|
|
},
|
|
});
|
|
const noTitleKey = ref(0);
|
|
const formColumns = [];
|
|
const tabListNoTitle: any = ref([]);
|
|
const tableData = props.data;
|
|
const childGourp = ref([]);
|
|
const childItem = ref({});
|
|
let cardFormData = props.formData;
|
|
const nowTime = ref(dayjs().format('YYYY-MM-DD HH:mm:ss'));
|
|
const userName = localStorage.getItem('fireUserLoginName');
|
|
const [registerForm, { getFieldsValue, setFieldsValue, updateSchema, resetFields, validate }] =
|
|
useForm({
|
|
labelWidth: 100,
|
|
schemas: formColumns,
|
|
showActionButtonGroup: false,
|
|
baseColProps: { lg: 24, md: 24 },
|
|
});
|
|
console.log(props);
|
|
watch(
|
|
() => props.formData,
|
|
(newVal) => {
|
|
cardFormData = newVal;
|
|
formColumns.forEach((element) => {
|
|
for (const key in cardFormData) {
|
|
if (element.field == key) {
|
|
var obj = {};
|
|
obj[key] = cardFormData[key];
|
|
subTableDataStore.setGroupData(obj);
|
|
}
|
|
}
|
|
});
|
|
setTimeout(() => {
|
|
setFieldsValue(subTableDataStore.getGroupData);
|
|
}, 10);
|
|
},
|
|
{ deep: true },
|
|
);
|
|
if (tableData.componentProps) {
|
|
tableData.componentProps.options.forEach((element, index) => {
|
|
tabListNoTitle.value.push({
|
|
key: index,
|
|
tab: element.label,
|
|
...element,
|
|
index: index,
|
|
});
|
|
element.children.forEach((childElement) => {
|
|
formColumns.push({
|
|
parentValue: element.field,
|
|
...childElement,
|
|
show: index == 0 ? true : false,
|
|
index: index,
|
|
});
|
|
if (childElement.component == 'CardGroup') {
|
|
childGourp.value.push({
|
|
...childElement,
|
|
index: index,
|
|
});
|
|
}
|
|
if (['createuser', 'modifyuser'].includes(childElement.type)) {
|
|
var obj = {};
|
|
obj[childElement.field] = userName;
|
|
console.log(obj);
|
|
subTableDataStore.setGroupData(obj);
|
|
}
|
|
if (['createtime', 'modifytime'].includes(childElement.type)) {
|
|
var obj = {};
|
|
obj[childElement.field] = nowTime.value;
|
|
console.log(obj);
|
|
subTableDataStore.setGroupData(obj);
|
|
}
|
|
});
|
|
});
|
|
}
|
|
setTimeout(() => {
|
|
resetFields();
|
|
}, 10);
|
|
|
|
const onTabChange = (value: string) => {
|
|
noTitleKey.value = value;
|
|
var currentIndex = (childGourp.value || []).findIndex((element) => element.index === value);
|
|
console.log(currentIndex);
|
|
if (currentIndex == -1) {
|
|
childItem.value = {};
|
|
} else {
|
|
childItem.value = childGourp.value[currentIndex];
|
|
}
|
|
formColumns.forEach((element) => {
|
|
element.show = false;
|
|
updateSchema([{ field: element.field, show: false }]);
|
|
if (element.index == value) {
|
|
element.show = true;
|
|
updateSchema([{ field: element.field, show: true }]);
|
|
}
|
|
});
|
|
setTimeout(() => {
|
|
resetFields();
|
|
setFieldsValue(subTableDataStore.getGroupData);
|
|
}, 10);
|
|
};
|
|
function changeForm() {
|
|
subTableDataStore.setGroupData(getFieldsValue());
|
|
}
|
|
</script>
|