geg-gas-web/dev_tools/templates.js

const subFormTmpl = `
<template>
    <div class="form-detail-table">
        <a-table :bordered="showFormBorder" :columns="headColums.length > 0 ? headColums : columns" :data-source="addDataKey(data)" :pagination="showPagination ? { defaultPageSize: 10 } : false" :scroll="{ x: 'max-content' }">
            <template #summary>
                <a-table-summary-row v-if="columns.some((x) => x.componentProps?.subTotal)">
                    <a-table-summary-cell v-for="(column, idx) in columns" :key="idx">
                        <a-typography-text v-if="column.componentProps?.subTotal" keyboard> {{ t('合计：') }} {{ sum(data.map((x) => x[column.dataIndex])) }}</a-typography-text>
                    </a-table-summary-cell>
                </a-table-summary-row>
            </template>
            <template #bodyCell="{ column, record, index }">
                <template v-if="column.key !== 'action'">
                    <template v-if="column.key === 'index'">
                        {{ index + 1 }}
                    </template>
                    <FormItem v-else :name="[mainKey, index, column.dataIndex]" :rules="rules(column, record, index)" :validateTrigger="['blur', 'change']">
                        <!---如果是checked一类的组件-->
                        <template v-if="checkedValueComponents.includes(column.componentType)">
                            <component :is="componentMap.get(column.componentType)" v-model:checked="record[column.dataIndex]" :bordered="showComponentBorder" v-bind="getComponentsProps(column.componentProps, column.dataIndex, record, index)" />
                        </template>
                        <!---如果是RangePicker组件-->
                        <template v-else-if="column.componentType === 'RangePicker' || column.componentType === 'TimeRangePicker'">
                            <component
                                :is="componentMap.get(column.componentType)"
                                v-model:endField="column.dataIndex.split(',')[1]"
                                v-model:startField="column.dataIndex.split(',')[0]"
                                v-model:value="record[column.dataIndex]"
                                :bordered="showComponentBorder"
                                :mainKey="mainKey"
                                :tableIndex="index"
                                v-bind="getComponentsProps(column.componentProps, column.dataIndex, record, index)"
                                @change="handleRangePickerChange(record, column.dataIndex)"
                            />
                        </template>

                        <!---如果是渲染函数组件-->
                        <template v-else-if="column.componentType === 'Render'">
                            <component
                                :is="
                                    column.render({
                                        model: record,
                                        field: column.dataIndex,
                                        rules: column.rules,
                                        componentProps: getComponentsProps(column.componentProps, column.dataIndex, record, index)
                                    })
                                "
                                :bordered="showComponentBorder"
                            />
                        </template>

                        <template v-else-if="column.key !== 'index'">
                            <component
                                :is="componentMap.get(column.componentType)"
                                v-model:value="record[column.dataIndex]"
                                :bordered="showComponentBorder"
                                :index="index"
                                :mainKey="mainKey"
                                :key="column.dataIndex + record['_key_']"
                                :row="record"
                                v-bind="getComponentsProps(column.componentProps, column.dataIndex, record, index)"
                                @blur="onFieldBlur(column, record, index)"
                                @change="onFieldChange(column, record, index)"
                            />
                        </template>
                    </FormItem>
                </template>
                <template v-if="column.key === 'action' && !disabled">
                    <MinusCircleOutlined style="padding-bottom: 20px" @click="remove(index)" />
                </template>
            </template>
        </a-table>

        <div class="tbl-toolbar">
            <a-button v-if="useSelectButton && !disableAddRow" :disabled="disabled" class="select-btn" type="primary" @click="multipleDialog = true">
                {{ buttonName }}
            </a-button>
            <a-button v-if="!disabled && !disableAddRow && useAddButton" type="primary" @click="add">
                <PlusOutlined />
                {{ t('新增') }}
            </a-button>
        </div>

        <FormItemRest>
            <MultipleSelect
                ref="MultipleSelectRef"
                v-model:multipleDialog="multipleDialog"
                :apiConfig="apiConfig"
                :datasourceType="preloadType"
                :dicOptions="dicOptions"
                :isSubFormUse="true"
                :params="{ itemId }"
                popupType="preload"
                @submit="renderSubFormList"
            />
        </FormItemRest>
    </div>
</template>

<script>
    import SubFormV2Setup from '/@/components/Form/src/components/SubFormV2Setup.vue';
    import { Form } from 'ant-design-vue';
    const FormItem = Form.Item;
    const FormItemRest = Form.ItemRest;

    export default {
        extends: SubFormV2Setup,
        components: {
            FormItem,
            Form,
            FormItemRest
        },
        setup(props, ctx) {
            const ret = SubFormV2Setup.setup(props, ctx);
            return {
                ...ret
            };
        }
    };
</script>
`;

const subFormItem = `
<template>
    <!-- formitem的标题一般不用，如果不需要控制明细表的权限显隐，这个formitem可以去掉，或者用div代替 -->
    <FormItem
        v-if="getShow(schema)"
        v-show="getIsShow(schema)"
        :key="schema.key"
        :label="getComponentsProps.showLabel ? schema.label : ''"
        :label-col="labelCol"
        :labelAlign="formProps?.labelAlign"
        :name="schema.field"
        :wrapperCol="itemLabelWidthProp.wrapperCol"
    >
        <!-- 这里原先是component is写法，现在需要换成你自己的明细表 -->
        <!-- 也可以根据v-if渲染不同表格，这样就不需要定义很多次FormItem了 -->
        <custom-dev-sub-form v-model:value="formModel[schema.field]" :disabled="getDisable" :size="formProps?.size" v-bind="schema.componentProps" />
    </FormItem>
</template>

<script>
    import SimpleFormItemSetup from '/@/components/SimpleForm/src/components/SimpleFormItemSetup.vue';
    import CustomDevSubForm from './CustomDevSubForm[count].vue';
    import { Form } from 'ant-design-vue';
    const FormItem = Form.Item;

    export default {
        extends: SimpleFormItemSetup,
        components: {
            CustomDevSubForm,
            FormItem
        },
        setup(props, ctx) {
            const ret = SimpleFormItemSetup.setup(props, ctx);
            return {
                ...ret
            };
        }
    };
</script>
`;

module.exports = {
    subFormTmpl,
    subFormItem
}