yvan-rcs-web/src/editor/BulkCopy.vue

<script setup lang="ts">
import { reactive } from "vue";
import DataForm from "@/components/data-form/DataForm.vue";
import type { FormField } from "@/components/data-form/DataFormTypes.ts";

defineOptions({
    name: 'BulkCopy',
});

interface BulkCopyConfig {
    /** 行数 */
    numberOfRows?: number;
    /** 列数 */
    numberOfColumns?: number;
    /** 行间距 */
    rowSpace?: number;
    /** 列间距 */
    columnSpacing?: number;
    /** 双排 */
    doubleRow?: boolean;
}

// 定义 Props 类型
interface BulkCopyProps {
    config: BulkCopyConfig;
}

// 读取组件 props 属性
const props = withDefaults(defineProps<BulkCopyProps>(), {});

// 定义 State 类型
interface BulkCopyState {
}

// state 属性
const state = reactive<BulkCopyState>({});

// 定义 Data 类型
interface BulkCopyData {
    formFields?: Array<FormField>;
}

// 内部数据
const data: BulkCopyData = {
    formFields: [
        {
            dataPath: 'numberOfRows', label: '行数', input: 'InputNumber',
            inputProps: {
                placeholder: '请输入',
                controlsPosition: 'right',
                min: 1,
                precision: 0,
            },
        },
        {
            dataPath: 'numberOfColumns', label: '列数', input: 'InputNumber',
            inputProps: {
                placeholder: '请输入',
                controlsPosition: 'right',
                min: 1,
                precision: 0,
            },
        },
        {
            dataPath: 'rowSpace', label: '行间距', input: 'InputNumber',
            inputProps: {
                placeholder: '请输入',
                controlsPosition: 'right',
                min: 0,
                // precision:
            },
        },
        {
            dataPath: 'columnSpacing', label: '列间距', input: 'InputNumber',
            inputProps: {
                placeholder: '请输入',
                controlsPosition: 'right',
                min: 0,
                // precision:
            },
        },
        {
            dataPath: 'doubleRow', label: '单双排', input: 'Switch',
            inputProps: {
                // trueValue: true,
                // falseValue: false,
                inlinePrompt: true,
                inactiveText: "单排",
                activeText: "双排",
            },
        },
    ],
};

interface BulkCopyExpose {
    state: BulkCopyState;
    data: BulkCopyData;
}

const expose: BulkCopyExpose = {
    state,
    data,
};
// 定义组件公开内容
defineExpose(expose);

export type {
    BulkCopyConfig,
    BulkCopyProps,
    BulkCopyState,
}
</script>

<template>
    <DataForm
        :data="props.config"
        :formFields="data.formFields"
        :columnCount="2"
        layout="onlyLabelFixed"
        labelWidth="80px"
        inputWidth=""
    />
</template>

<style scoped>

</style>