xj-admin/src/views/archive/healthCabin/healthRoom/components/selfLayoutModal.vue

<template>
    <BasicModal v-bind="$attrs" @register="registerModal" :title="title" width="40%" @ok="handleSubmit">
        <BasicForm @register="register" class="self">
            <template #add="{ field }">
                <Button v-if="Number(field) === 0 && !isUpdate" @click="add">+</Button>
                <Button v-if="field > 0" @click="del(field)">-</Button>
            </template>
        </BasicForm>
    </BasicModal>
</template>

<script lang="ts" setup>
    import { ref } from 'vue';
    import { BasicModal, useModalInner } from '/@/components/Modal';
    import { BasicForm, useForm } from '/@/components/Form/index';
    import { Button } from '/@/components/Button';
    import { selfLayoutSchemas } from '/@/views/archive/healthCabin/healthRoom/index.data';
    import { selfLayoutAdd, selfLayoutEdit } from '/@/views/archive/healthCabin/healthRoom/index.api';
    const title = ref('新增');
    const emit = defineEmits(['register', 'success']);
    const isUpdate = ref(false);
    const state = ref();
    const houseCode = ref();
    const selfLayoutId = ref();
    const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
        console.log(data);
        houseCode.value = data.houseCode;
        await resetFields();
        // addSchema(0);
        // await removeSchemaByFiled()
        title.value = data.title;
        isUpdate.value = data.isUpdate;
        await removeSchemaByFiled(['wokrStatus']);
        if (data.isUpdate) {
            await appendSchemaByField(
                {
                    field: `wokrStatus`,
                    component: 'JDictSelectTag',
                    label: '是否启用',
                    colProps: {
                        span: 8,
                    },
                    componentProps: {
                        dictCode: 'yes_no',
                    },
                },
                ''
            );
            selfLayoutId.value = data.record.id;
            const DateTime = data.record.defineDate + ' 00:00:00';
            await setFieldsValue({ defineDate: DateTime });
            await setFieldsValue({ 'houseOpenTime[0].openTime': data.record.openTime });
            await setFieldsValue({ 'houseOpenTime[0].closeTime': data.record.closeTime });
        }
    });
    const [register, { resetFields, setFieldsValue, appendSchemaByField, removeSchemaByFiled, validate }] = useForm({
        labelWidth: 100,
        actionColOptions: { span: 24 },
        schemas: selfLayoutSchemas,
        showSubmitButton: false,
        showResetButton: false,
    });
    async function handleSubmit() {
        try {
            const data = await validate();
            const result = Object.keys(data).reduce(
                (acc, key) => {
                    const parts = key.match(/houseOpenTime\[(\d+)\]\.(\w+)/);
                    if (parts) {
                        const index = parseInt(parts[1], 10);
                        const prop = parts[2];
                        if (!acc.houseOpenTime[index]) {
                            acc.houseOpenTime[index] = {};
                        }
                        acc.houseOpenTime[index][prop] = data[key];
                    }
                    return acc;
                },
                { houseOpenTime: [] }
            );
            console.log(result);
            console.log(data);
            const params = {
                houseCode: houseCode.value,
                defineDate: data.defineDate,
                houseOpenTime: result.houseOpenTime,
            };
            if (isUpdate.value) {
                params.wokrStatus = data.wokrStatus;
                params.id = selfLayoutId.value;
                await selfLayoutEdit(params);
            } else {
                await selfLayoutAdd(params);
            }
            result.houseOpenTime.forEach((item, index) => {
                if (index == 0) return;
                if (index != 0) del(index);
            });
            closeModal();
            emit('success');
        } catch (e) {
            console.log(e);
        }
    }
    const n = ref(1);
    function add() {
        addSchema(n.value);
        n.value++;
    }

    function addSchema(num) {
        appendSchemaByField(
            {
                field: `houseOpenTime[${num}].openTime`,
                component: 'TimePicker',
                label: '开始时间',
                colProps: {
                    span: 8,
                },
                componentProps: {
                    //日期格式化
                    format: 'HH:mm',
                    valueFormat: 'HH:mm',
                },
            },
            ''
        );
        appendSchemaByField(
            {
                field: `houseOpenTime[${num}].closeTime`,
                component: 'TimePicker',
                label: '结束时间',
                colProps: {
                    span: 8,
                },
                componentProps: {
                    //日期格式化
                    format: 'HH:mm',
                    valueFormat: 'HH:mm',
                },
            },
            ''
        );

        appendSchemaByField(
            {
                field: `${num}`,
                component: 'Input',
                label: '',
                colProps: {
                    span: 8,
                },
                slot: 'add',
            },
            ''
        );
    }
    function del(field) {
        removeSchemaByFiled([`houseOpenTime[${field}].closeTime`, `houseOpenTime[${field}].openTime`, `${field}`]);
        n.value--;
    }
</script>

<style lang="less" scoped>
    .self {
        /deep/ .ant-picker-panel-container {
            position: fixed !important;
        }
    }
</style>