docs: 二开自动拆分脚本支持明细表
This commit is contained in:
gaoyunqi
156
dev_tools/templates.js
Normal file
156
dev_tools/templates.js
Normal file
@ -0,0 +1,156 @@
|
||||
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';
|
||||
|
||||
export default {
|
||||
extends: SubFormV2Setup,
|
||||
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-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 '/@/views/test/cascadeDemo/components/CascadeDetailTable[count].vue';
|
||||
|
||||
export default {
|
||||
extends: SimpleFormItemSetup,
|
||||
components: {
|
||||
CustomDevSubForm
|
||||
},
|
||||
setup(props, ctx) {
|
||||
const ret = SimpleFormItemSetup.setup(props, ctx);
|
||||
return {
|
||||
...ret
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
`;
|
||||
|
||||
module.exports = {
|
||||
subFormTmpl,
|
||||
subFormItem
|
||||
}
|
||||
Reference in New Issue
Block a user