vben admin项目中，如何实现一个报表页面，该页面可配置、可编辑以及将编辑后数据保存至指定sql数据库和vb报表？

来源：蜘蛛抓取(WebSpider) 时间：2023-09-05 02:40 标签： vb6表格控件

使用ApiSelect会导致数据不能及时更新，需要刷新整个页面才能获取新的数据。
一、 表单中更新下拉框数据查看官网这里我们使用的在from表单里面更新下拉框
从这里可以看出可以使用updateSchema来给select赋值
代码实现(部分主要)//前端代码
export const formSchema: FormSchema[] = [
{
label: '敏感词分类',
field: 'sensitiveType',
required: true,
component: 'Select',
},
];
//获取接口数据并放在下拉框里（这里是打开了一个弹框）
//初始化表单
const [registerForm, { resetFields, setFieldsValue, validate, updateSchema }] = useForm({
labelWidth: 100,
schemas: formSchema,
showActionButtonGroup: false,
});
//初始化弹框
const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
//从后端接口获取值（后端返回数据必须是{label：'',value:''}形式）
stype.value = await getSensitiveType();
//将数据放到下拉框上
updateSchema({
field: 'sensitiveType',
componentProps: {
options: unref(stype),
},
});
resetFields();
setModalProps({ confirmLoading: false });
isUpdate.value = !!data?.isUpdate;
if (unref(isUpdate)) {
setFieldsValue({
...data.record,
});
}
});
效果图二、 表格中更新下拉框数据查看官网这里我们使用的在table里面更新下拉框（table中的搜索区域更新数据）官网提供的方法如下图代码实现// 初始化表格
const [registerTable, { reload, getSelectRows, clearSelectedRowKeys, getForm }] = useTable({
title: '敏感词列表',
api: getSensitiveListByPage,
columns,
formConfig: {
labelWidth: 120,
schemas: searchFormSchema,
},
useSearchForm: true,
showTableSetting: true,
bordered: true,
showIndexColumn: false,
actionColumn: {
width: 80,
title: '操作',
dataIndex: 'action',
slots: { customRender: 'action' },
fixed: undefined,
},
rowSelection: {
type: 'checkbox',
},
});
//注册一个回调函数，在组件挂载完成后执行。
/*
组件在以下情况下被视为已挂载：
其所有同步子组件都已经被挂载 (不包含异步组件或 <Suspense> 树内的组件)。
其自身的 DOM 树已经创建完成并插入了父容器中。注意仅当根容器在文档中时，才可以保证组件 DOM 树也在文档中。
这个钩子通常用于执行需要访问组件所渲染的 DOM 树相关的副作用，或是在服务端渲染应用中用于确保 DOM 相关代码仅在客户
端执行。*/
onMounted(async () => {
//将数据放入下拉框中
const { updateSchema } = getForm();
const sOption = await getSensitiveType();
await updateSchema({
field: 'sensitiveType',
componentProps: {
options: unref(sOption),
},
});
});
效果图三、 下拉框带搜索（单选）
参照 Ant Design Vue官网-Select 选择器:Select props 中的showSearch属性单选下拉框带搜索功能，这里没有采用插槽。
1.类型为ApiSelect
前端.ts中的部分代码注意：componentProps里的labelField和valueField必须有相同的部分，否则搜索不到数据；搜索是按照value或者valueField来搜索的。若是后台返回的数据不能直接使用可以选择Select下拉框。
{
field: 'productSeries',
component: 'ApiSelect',
label: '产品系列',
required: true,
componentProps: {
showSearch: true,
api: getProductTypeSelectList,
labelField: 'value',
valueField: 'code',
},
},
效果如下：2.类型为Select
前端代码如下
前端.ts代码{
field: 'customerId',
component: 'Select',
label: '客户姓名',
colProps: {
span: 12,
},
},
前端.vue(这里不懂·的看看前面)
onMounted(async () => {
const v = await getCustomerList();
const optionCustomer = v.map((i) => {
return {
label: i.plmCustomerName,
value: i.plmCustomerName + '-' + i.plmCustomerId,
};
});
console.log('数据', optionCustomer);
updateSchema(
{
field: 'customerId',
componentProps: () => {
return {
showSearch: true,
options: unref(optionCustomer),
};
},
});
});
效果如下：四、 下拉框的值动态改变
A:任意组件；B:AipSelect框（或者其他Api框）适用情况：当A组件改变了值，B组件根据A组件动态修改
2.A组件代码如下{
field: 'productName',
component: 'ApiSelect',
label: '产品名称',
required: true,
componentProps: ({ formModel, formActionType }) => {
return {
showSearch: true,
api: getProductNameSelectList,
labelField: 'label',
valueField: 'value',
//获取组件中的每一次修改的值
onChange: (e) => {
const { updateSchema } = formActionType;
//重置变量
formModel.productModel = undefined;
getProductModelSelectList({ productName: e }).then((res) => {
const list = res;
updateSchema({
field: 'productModel',
componentProps: () => {
return {
//根据B组件类型赋值
options: list,
};
},
});
});
},
};
},
},
3.B组件代码如下
{
field: 'productModel',
component: 'Select',
label: '产品型号',
required: true,
},
4.就不贴图啦希望各位大佬多多指正!!!
初学vue3-demo:https://github.com/Miofly/vue3-vite-vuex-demoEditorConfig 包含一个用于定义代码格式的文件和一批编辑器插件，这些插件是让编辑器读取配置文件并以此来格式化代码。# 当用IDE打开一个文件时，EditorConfig插件会在打开文件的目录和其每一级父节点查找.editorconfig文件，直到找到一个配置了root = true的配置文件。
# 表明是最顶层的配置文件，发现设为true时，才会停止查找.editorconfig文件
root = true
# * 匹配全部文件，表示下面的规则应用于所有文件
[*]
# 使用`utf-8`字符集
charset=utf-8
# 结尾换行符，可选 `lf`、`cr`、`crlf`
end_of_line=lf
# 在文件结尾插入新行
insert_final_newline=true
# 缩进的样式为空格（space） 或者 tab
indent_style=space
# 缩进为space时，缩进的字符数 2
indent_size=2
# 行最大长度为 100
max_line_length = 100
# 匹配以`.yml`、`.yaml`、`.json`结尾的文件，对齐进行定制化配置
[*.{yml,yaml,json}]
indent_style = space
indent_size = 2
# 匹配以`.md`结尾的文件
[*.md]
# 是否将行尾空格自动删除
trim_trailing_whitespace = false
[Makefile]
indent_style = tab
其他配置# insert_final_newline 是否使文件以一个空白行结尾
# tab_width 缩进为tab时，缩进的宽度

我要回帖

更多关于 vb6表格控件 的文章

 

随机推荐