mirror of https://github.com/certd/certd
chore:
xiaojunnuo
parent
56867fa777
commit
afa2b0307a
|
|
@ -1,784 +0,0 @@
|
||||||
export const crudResources = [
|
|
||||||
{
|
|
||||||
title: "CRUD示例",
|
|
||||||
name: "crud",
|
|
||||||
path: "/crud",
|
|
||||||
redirect: "/crud/basis",
|
|
||||||
meta: {
|
|
||||||
icon: "ion:apps-sharp"
|
|
||||||
},
|
|
||||||
children: [
|
|
||||||
{
|
|
||||||
title: "debug",
|
|
||||||
name: "debug",
|
|
||||||
path: "/crud/debug",
|
|
||||||
component: "/crud/debug/index.vue",
|
|
||||||
meta: {
|
|
||||||
isMenu: false
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "基本特性",
|
|
||||||
name: "basis",
|
|
||||||
path: "/crud/basis",
|
|
||||||
redirect: "/crud/basis/i18n",
|
|
||||||
meta: {
|
|
||||||
icon: "ion:disc-outline"
|
|
||||||
},
|
|
||||||
children: [
|
|
||||||
{
|
|
||||||
title: "FirstDemo",
|
|
||||||
name: "FsCrudFirst",
|
|
||||||
path: "/crud/basis/first",
|
|
||||||
component: "/crud/basis/first/index.vue"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "HelloWorld",
|
|
||||||
name: "FsCrudHelloWorld",
|
|
||||||
path: "/crud/basis/helloworld",
|
|
||||||
component: "/crud/basis/helloworld/index.vue"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "动态计算",
|
|
||||||
name: "BasisCompute",
|
|
||||||
path: "/crud/basis/compute",
|
|
||||||
component: "/crud/basis/compute/index.vue"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "动态计算-更多示例",
|
|
||||||
name: "BasisComputeMore",
|
|
||||||
path: "/crud/basis/compute-more",
|
|
||||||
component: "/crud/basis/compute-more/index.vue"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "国际化",
|
|
||||||
name: "BasisI18n",
|
|
||||||
path: "/crud/basis/i18n",
|
|
||||||
component: "/crud/basis/i18n/index.vue"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "ValueChange",
|
|
||||||
name: "BasisValueChange",
|
|
||||||
path: "/crud/basis/value-change",
|
|
||||||
component: "/crud/basis/value-change/index.vue"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "Card布局",
|
|
||||||
name: "BasisLayoutCard",
|
|
||||||
path: "/crud/basis/layout-card",
|
|
||||||
component: "/crud/basis/layout-card/index.vue"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "自定义布局",
|
|
||||||
name: "BasisLayoutCustom",
|
|
||||||
path: "/crud/basis/layout-custom",
|
|
||||||
component: "/crud/basis/layout-custom/index.vue"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "自定义组件",
|
|
||||||
name: "BasisCustom",
|
|
||||||
path: "/crud/basis/custom",
|
|
||||||
component: "/crud/basis/custom/index.vue"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "列设置",
|
|
||||||
name: "BasisColumnsSet",
|
|
||||||
path: "/crud/basis/columns-set",
|
|
||||||
component: "/crud/basis/columns-set/index.vue"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "字段合并插件",
|
|
||||||
name: "BasisColumnMergePlugin",
|
|
||||||
path: "/crud/basis/column-merge-plugin",
|
|
||||||
component: "/crud/basis/column-merge-plugin/index.vue"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "ResetCrudOptions",
|
|
||||||
name: "BasisReset",
|
|
||||||
path: "/crud/basis/reset",
|
|
||||||
component: "/crud/basis/reset/index.vue",
|
|
||||||
meta: {
|
|
||||||
cache: true
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "CrudOptions插件",
|
|
||||||
name: "BasisPlugin",
|
|
||||||
path: "/crud/basis/plugin",
|
|
||||||
component: "/crud/basis/plugin/index.vue"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "Ts定义测试",
|
|
||||||
name: "BasisTsTest",
|
|
||||||
path: "/crud/basis/ts",
|
|
||||||
component: "/crud/basis/ts/index.vue"
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "数据字典",
|
|
||||||
name: "dict",
|
|
||||||
path: "/crud/dict",
|
|
||||||
redirect: "/crud/dict/single",
|
|
||||||
meta: {
|
|
||||||
icon: "ion:book-outline"
|
|
||||||
},
|
|
||||||
children: [
|
|
||||||
{
|
|
||||||
title: "单例",
|
|
||||||
name: "DictSingle",
|
|
||||||
path: "/crud/dict/single",
|
|
||||||
component: "/crud/dict/single/index.vue"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "分发复制",
|
|
||||||
name: "DictCloneable",
|
|
||||||
path: "/crud/dict/cloneable",
|
|
||||||
component: "/crud/dict/cloneable/index.vue"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "原型复制",
|
|
||||||
name: "DictPrototype",
|
|
||||||
path: "/crud/dict/prototype",
|
|
||||||
component: "/crud/dict/prototype/index.vue"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "页面间共享",
|
|
||||||
name: "DictShared",
|
|
||||||
path: "/crud/dict/shared",
|
|
||||||
children: [
|
|
||||||
{
|
|
||||||
title: "共享字典数据管理",
|
|
||||||
name: "DictSharedManager",
|
|
||||||
path: "/crud/dict/shared/manager",
|
|
||||||
component: "/crud/dict/shared/manager/index.vue"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "共享字典使用",
|
|
||||||
name: "DictSharedUse",
|
|
||||||
path: "/crud/dict/shared/use",
|
|
||||||
component: "/crud/dict/shared/use/index.vue"
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "操作列",
|
|
||||||
name: "row-handle",
|
|
||||||
path: "/crud/row-handle",
|
|
||||||
redirect: "/crud/row-handle/tooltip",
|
|
||||||
meta: {
|
|
||||||
icon: "ion:build-outline"
|
|
||||||
},
|
|
||||||
children: [
|
|
||||||
{
|
|
||||||
title: "Tooltip",
|
|
||||||
name: "RowHandleTooltip",
|
|
||||||
path: "/crud/row-handle/tooltip",
|
|
||||||
component: "/crud/row-handle/tooltip/index.vue"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "按钮折叠",
|
|
||||||
name: "RowHandleDropdown",
|
|
||||||
path: "/crud/row-handle/dropdown",
|
|
||||||
component: "/crud/row-handle/dropdown/index.vue"
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "组件示例",
|
|
||||||
name: "component",
|
|
||||||
path: "/crud/component",
|
|
||||||
redirect: "/crud/component/text",
|
|
||||||
meta: {
|
|
||||||
icon: "ion:cube-outline"
|
|
||||||
},
|
|
||||||
children: [
|
|
||||||
{
|
|
||||||
title: "文本输入(input)",
|
|
||||||
name: "ComponentText",
|
|
||||||
path: "/crud/component/text",
|
|
||||||
component: "/crud/component/text/index.vue"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "选择(select)",
|
|
||||||
name: "ComponentSelect",
|
|
||||||
path: "/crud/component/select",
|
|
||||||
component: "/crud/component/select/index.vue"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: " 表格选择(table-select)",
|
|
||||||
name: "ComponentTableSelect",
|
|
||||||
path: "/crud/component/table-select",
|
|
||||||
component: "/crud/component/table-select/index.vue"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "级联(cascader)",
|
|
||||||
name: "ComponentCascader",
|
|
||||||
path: "/crud/component/cascader",
|
|
||||||
component: "/crud/component/cascader/index.vue"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "多选(checkbox)",
|
|
||||||
name: "ComponentCheckbox",
|
|
||||||
path: "/crud/component/checkbox",
|
|
||||||
component: "/crud/component/checkbox/index.vue"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "单选(radio)",
|
|
||||||
name: "ComponentRadio",
|
|
||||||
path: "/crud/component/radio",
|
|
||||||
component: "/crud/component/radio/index.vue"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "开关(switch)",
|
|
||||||
name: "ComponentSwitch",
|
|
||||||
path: "/crud/component/switch",
|
|
||||||
component: "/crud/component/switch/index.vue"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "日期时间(date)",
|
|
||||||
name: "ComponentDate",
|
|
||||||
path: "/crud/component/date",
|
|
||||||
component: "/crud/component/date/index.vue"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "按钮链接",
|
|
||||||
name: "ComponentButton",
|
|
||||||
path: "/crud/component/button",
|
|
||||||
component: "/crud/component/button/index.vue"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "数字",
|
|
||||||
name: "ComponentNumber",
|
|
||||||
path: "/crud/component/number",
|
|
||||||
component: "/crud/component/number/index.vue"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "树形选择",
|
|
||||||
name: "ComponentTree",
|
|
||||||
path: "/crud/component/tree",
|
|
||||||
component: "/crud/component/tree/index.vue"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "图片裁剪上传",
|
|
||||||
name: "ComponentUploaderCropper",
|
|
||||||
path: "/crud/component/uploader/cropper",
|
|
||||||
component: "/crud/component/uploader/cropper/index.vue"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "表单本地上传",
|
|
||||||
name: "ComponentUploaderForm",
|
|
||||||
path: "/crud/component/uploader/form",
|
|
||||||
component: "/crud/component/uploader/form/index.vue"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "阿里云oss上传",
|
|
||||||
name: "ComponentUploaderAlioss",
|
|
||||||
path: "/crud/component/uploader/alioss",
|
|
||||||
component: "/crud/component/uploader/alioss/index.vue"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "腾讯云cos上传",
|
|
||||||
name: "ComponentUploaderCos",
|
|
||||||
path: "/crud/component/uploader/cos",
|
|
||||||
component: "/crud/component/uploader/cos/index.vue"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "七牛云上传",
|
|
||||||
name: "ComponentUploaderQiniu",
|
|
||||||
path: "/crud/component/uploader/qiniu",
|
|
||||||
component: "/crud/component/uploader/qiniu/index.vue"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "s3上传",
|
|
||||||
name: "ComponentUploaderS3",
|
|
||||||
path: "/crud/component/uploader/s3",
|
|
||||||
component: "/crud/component/uploader/s3/index.vue"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "富文本编辑器",
|
|
||||||
name: "ComponentEditor",
|
|
||||||
path: "/crud/component/editor",
|
|
||||||
component: "/crud/component/editor/index.vue"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "图标",
|
|
||||||
name: "ComponentIcon",
|
|
||||||
path: "/crud/component/icon",
|
|
||||||
component: "/crud/component/icon/index.vue"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "JsonEditor",
|
|
||||||
name: "ComponentJson",
|
|
||||||
path: "/crud/component/json",
|
|
||||||
component: "/crud/component/json/index.vue"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "手机号输入框",
|
|
||||||
name: "ComponentPhone",
|
|
||||||
path: "/crud/component/phone",
|
|
||||||
component: "/crud/component/phone/index.vue"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "组件独立使用",
|
|
||||||
name: "ComponentIndependent",
|
|
||||||
path: "/crud/component/independent",
|
|
||||||
component: "/crud/component/independent/index.vue"
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "Form表单",
|
|
||||||
name: "form",
|
|
||||||
path: "/crud/form",
|
|
||||||
redirect: "/crud/form/layout",
|
|
||||||
meta: {
|
|
||||||
icon: "ion:document-text-outline"
|
|
||||||
},
|
|
||||||
children: [
|
|
||||||
{
|
|
||||||
title: "基本表单",
|
|
||||||
name: "FormBase",
|
|
||||||
path: "/crud/form/base",
|
|
||||||
component: "/crud/form/base/index.vue"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "表单Grid布局",
|
|
||||||
name: "FormLayoutGrid",
|
|
||||||
path: "/crud/form/layout-grid",
|
|
||||||
component: "/crud/form/layout-grid/index.vue"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "表单Flex布局",
|
|
||||||
name: "FormLayoutFlex",
|
|
||||||
path: "/crud/form/layout-flex",
|
|
||||||
component: "/crud/form/layout-flex/index.vue"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "表单动态布局",
|
|
||||||
name: "FormLayout",
|
|
||||||
path: "/crud/form/layout",
|
|
||||||
component: "/crud/form/layout/index.vue"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "表单单列模式",
|
|
||||||
name: "FormSingleColumn",
|
|
||||||
path: "/crud/form/single-column",
|
|
||||||
component: "/crud/form/single-column/index.vue"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "表单校验",
|
|
||||||
name: "FormValidation",
|
|
||||||
path: "/crud/form/validation",
|
|
||||||
component: "/crud/form/validation/index.vue"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "抽屉表单",
|
|
||||||
name: "FormDrawer",
|
|
||||||
path: "/crud/form/drawer",
|
|
||||||
component: "/crud/form/drawer/index.vue"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "表单分组",
|
|
||||||
name: "FormGroup",
|
|
||||||
path: "/crud/form/group",
|
|
||||||
component: "/crud/form/group/index.vue"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "表单分组(tabs)",
|
|
||||||
name: "FormGroupTabs",
|
|
||||||
path: "/crud/form/group-tabs",
|
|
||||||
component: "/crud/form/group-tabs/index.vue"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "自定义表单",
|
|
||||||
name: "FormCustomForm",
|
|
||||||
path: "/crud/form/custom-form",
|
|
||||||
component: "/crud/form/custom-form/index.vue"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "字段帮助说明",
|
|
||||||
name: "FormHelper",
|
|
||||||
path: "/crud/form/helper",
|
|
||||||
component: "/crud/form/helper/index.vue"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "页面内部弹出表单",
|
|
||||||
name: "FormInner",
|
|
||||||
path: "/crud/form/inner",
|
|
||||||
component: "/crud/form/inner/index.vue",
|
|
||||||
meta: {
|
|
||||||
cache: true
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "地区字典管理",
|
|
||||||
name: "FormInnerArea",
|
|
||||||
path: "/crud/form/inner/area",
|
|
||||||
component: "/crud/form/inner/area/index.vue",
|
|
||||||
meta: {
|
|
||||||
isMenu: false
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "新页面编辑",
|
|
||||||
name: "FormNewPage",
|
|
||||||
path: "/crud/form/new-page",
|
|
||||||
component: "/crud/form/new-page/index.vue",
|
|
||||||
meta: {
|
|
||||||
cache: false
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "新页面编辑表单",
|
|
||||||
name: "FormNewPageEdit",
|
|
||||||
path: "/crud/form/new-page/edit",
|
|
||||||
component: "/crud/form/new-page/edit.vue",
|
|
||||||
meta: {
|
|
||||||
isMenu: false
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "独立使用表单",
|
|
||||||
name: "FormIndependent",
|
|
||||||
path: "/crud/form/independent",
|
|
||||||
component: "/crud/form/independent/index.vue"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "重置表单",
|
|
||||||
name: "FormReset",
|
|
||||||
path: "/crud/form/reset",
|
|
||||||
component: "/crud/form/reset/index.vue"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "嵌套数据结构",
|
|
||||||
name: "FormNest",
|
|
||||||
path: "/crud/form/nest",
|
|
||||||
component: "/crud/form/nest/index.vue"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "字段组件render",
|
|
||||||
name: "FormRender",
|
|
||||||
path: "/crud/form/render",
|
|
||||||
component: "/crud/form/render/index.vue"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "查看表单使用单元格组件",
|
|
||||||
name: "FormView",
|
|
||||||
path: "/crud/form/view",
|
|
||||||
component: "/crud/form/view/index.vue"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "initialForm",
|
|
||||||
name: "FormInitial",
|
|
||||||
path: "/crud/form/initial",
|
|
||||||
component: "/crud/form/initial/index.vue"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "表单Watch",
|
|
||||||
name: "FormWatch",
|
|
||||||
path: "/crud/form/watch",
|
|
||||||
component: "/crud/form/watch/index.vue"
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "表格特性",
|
|
||||||
path: "/crud/feature",
|
|
||||||
meta: {
|
|
||||||
icon: "ion:beer-outline"
|
|
||||||
},
|
|
||||||
redirect: "/crud/feature/dropdown",
|
|
||||||
children: [
|
|
||||||
{
|
|
||||||
title: "部件显隐",
|
|
||||||
name: "FeatureHide",
|
|
||||||
path: "/crud/feature/hide",
|
|
||||||
component: "/crud/feature/hide/index.vue"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "多选&批量删除",
|
|
||||||
name: "FeatureSelection",
|
|
||||||
path: "/crud/feature/selection",
|
|
||||||
component: "/crud/feature/selection/index.vue"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "单选",
|
|
||||||
name: "FeatureSelectionRadio",
|
|
||||||
path: "/crud/feature/selection-radio",
|
|
||||||
component: "/crud/feature/selection-radio/index.vue"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "表头过滤",
|
|
||||||
name: "FeatureFilter",
|
|
||||||
path: "/crud/feature/filter",
|
|
||||||
component: "/crud/feature/filter/index.vue"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "行展开",
|
|
||||||
name: "FeatureExpand",
|
|
||||||
path: "/crud/feature/expand",
|
|
||||||
component: "/crud/feature/expand/index.vue"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "树形表格",
|
|
||||||
name: "FeatureTree",
|
|
||||||
path: "/crud/feature/tree",
|
|
||||||
component: "/crud/feature/tree/index.vue"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "多级表头",
|
|
||||||
name: "FeatureHeaderGroup",
|
|
||||||
path: "/crud/feature/header-group",
|
|
||||||
component: "/crud/feature/header-group/index.vue"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "自定义表头",
|
|
||||||
name: "FeatureHeader",
|
|
||||||
path: "/crud/feature/header",
|
|
||||||
component: "/crud/feature/header/index.vue"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "合并单元格",
|
|
||||||
name: "FeatureMerge",
|
|
||||||
path: "/crud/feature/merge",
|
|
||||||
component: "/crud/feature/merge/index.vue"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "序号",
|
|
||||||
name: "FeatureIndex",
|
|
||||||
path: "/crud/feature/index",
|
|
||||||
component: "/crud/feature/index/index.vue"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "排序",
|
|
||||||
name: "FeatureSortable",
|
|
||||||
path: "/crud/feature/sortable",
|
|
||||||
component: "/crud/feature/sortable/index.vue"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "固定列",
|
|
||||||
name: "FeatureFixed",
|
|
||||||
path: "/crud/feature/fixed",
|
|
||||||
component: "/crud/feature/fixed/index.vue"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "不固定高度",
|
|
||||||
name: "FeatureHeight",
|
|
||||||
path: "/crud/feature/height",
|
|
||||||
component: "/crud/feature/height/index.vue"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "查询框",
|
|
||||||
name: "FeatureSearch",
|
|
||||||
path: "/crud/feature/search",
|
|
||||||
component: "/crud/feature/search/index.vue"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "查询框多行模式",
|
|
||||||
name: "FeatureSearchMulti",
|
|
||||||
path: "/crud/feature/search-multi",
|
|
||||||
component: "/crud/feature/search-multi/index.vue"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "Tabs快捷查询",
|
|
||||||
name: "FeatureTabs",
|
|
||||||
path: "/crud/feature/tabs",
|
|
||||||
component: "/crud/feature/tabs/index.vue"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "字段排序",
|
|
||||||
name: "FeatureColumnSort",
|
|
||||||
path: "/crud/feature/column-sort",
|
|
||||||
component: "/crud/feature/column-sort/index.vue"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "ValueBuilder",
|
|
||||||
name: "FeatureValueBuilder",
|
|
||||||
path: "/crud/feature/value-builder",
|
|
||||||
component: "/crud/feature/value-builder/index.vue"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "列设置",
|
|
||||||
name: "FeatureColumnsSet",
|
|
||||||
path: "/crud/feature/columns-set",
|
|
||||||
component: "/crud/feature/columns-set/index.vue"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "本地化编辑",
|
|
||||||
name: "FeatureLocal",
|
|
||||||
path: "/crud/feature/local",
|
|
||||||
component: "/crud/feature/local/index.vue"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "v-model",
|
|
||||||
name: "FeatureVModel",
|
|
||||||
path: "/crud/feature/local-v-model",
|
|
||||||
component: "/crud/feature/local-v-model/index.vue"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "导入",
|
|
||||||
name: "FeatureImport",
|
|
||||||
path: "/crud/feature/local-import",
|
|
||||||
component: "/crud/feature/local-import/index.vue"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "导出",
|
|
||||||
name: "FeatureExport",
|
|
||||||
path: "/crud/feature/export",
|
|
||||||
component: "/crud/feature/export/index.vue"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "自定义删除",
|
|
||||||
name: "FeatureRemove",
|
|
||||||
path: "/crud/feature/remove",
|
|
||||||
component: "/crud/feature/remove/index.vue"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "调整列宽",
|
|
||||||
name: "FeatureColumnResize",
|
|
||||||
path: "/crud/feature/column-resize",
|
|
||||||
component: "/crud/feature/column-resize/index.vue"
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "可编辑",
|
|
||||||
name: "Editable",
|
|
||||||
path: "/crud/editable",
|
|
||||||
redirect: "/crud/editable/free",
|
|
||||||
meta: {
|
|
||||||
icon: "ion:create-outline"
|
|
||||||
},
|
|
||||||
children: [
|
|
||||||
{
|
|
||||||
title: "自由编辑",
|
|
||||||
name: "EditableFree",
|
|
||||||
path: "/crud/editable/free",
|
|
||||||
component: "/crud/editable/free/index.vue"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "行编辑",
|
|
||||||
name: "EditableRow",
|
|
||||||
path: "/crud/editable/row",
|
|
||||||
component: "/crud/editable/row/index.vue"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "单元格编辑",
|
|
||||||
name: "EditableCell",
|
|
||||||
path: "/crud/editable/cell",
|
|
||||||
component: "/crud/editable/cell/index.vue"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "子表格编辑",
|
|
||||||
name: "EditableVModel",
|
|
||||||
path: "/crud/editable/vmodel",
|
|
||||||
component: "/crud/editable/vmodel/index.vue"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "子CRUD",
|
|
||||||
name: "EditableSubCrud",
|
|
||||||
path: "/crud/editable/sub-crud",
|
|
||||||
component: "/crud/editable/sub-crud/index.vue"
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "插槽",
|
|
||||||
name: "Slots",
|
|
||||||
path: "/crud/slots",
|
|
||||||
redirect: "/crud/slots/layout",
|
|
||||||
meta: {
|
|
||||||
icon: "ion:extension-puzzle-outline"
|
|
||||||
},
|
|
||||||
children: [
|
|
||||||
{
|
|
||||||
title: "页面占位插槽",
|
|
||||||
name: "SlotsLayout",
|
|
||||||
path: "/crud/slots/layout",
|
|
||||||
component: "/crud/slots/layout/index.vue"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "表单占位插槽",
|
|
||||||
name: "SlotsForm",
|
|
||||||
path: "/crud/slots/form",
|
|
||||||
component: "/crud/slots/form/index.vue"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "查询字段插槽",
|
|
||||||
name: "SlotsSearch",
|
|
||||||
path: "/crud/slots/search",
|
|
||||||
component: "/crud/slots/search/index.vue"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "单元格插槽",
|
|
||||||
name: "SlotsCell",
|
|
||||||
path: "/crud/slots/cell",
|
|
||||||
component: "/crud/slots/cell/index.vue"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "表单字段插槽",
|
|
||||||
name: "SlotsFormItem",
|
|
||||||
path: "/crud/slots/form-item",
|
|
||||||
component: "/crud/slots/form-item/index.vue"
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "复杂需求",
|
|
||||||
name: "Advanced",
|
|
||||||
path: "/crud/advanced",
|
|
||||||
redirect: "/crud/advanced/linkage",
|
|
||||||
meta: {
|
|
||||||
icon: "ion:flame-outline"
|
|
||||||
},
|
|
||||||
children: [
|
|
||||||
{
|
|
||||||
title: "选择联动",
|
|
||||||
name: "AdvancedLinkage",
|
|
||||||
path: "/crud/advanced/linkage",
|
|
||||||
component: "/crud/advanced/linkage/index.vue"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "后台加载crud",
|
|
||||||
name: "AdvancedFormBackend",
|
|
||||||
path: "/crud/advanced/from-backend",
|
|
||||||
component: "/crud/advanced/from-backend/index.vue"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "本地分页",
|
|
||||||
name: "AdvancedLocalPagination",
|
|
||||||
path: "/crud/advanced/local-pagination",
|
|
||||||
component: "/crud/advanced/local-pagination/index.vue"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "嵌套子表格",
|
|
||||||
name: "AdvancedNest",
|
|
||||||
path: "/crud/advanced/nest",
|
|
||||||
component: "/crud/advanced/nest/index.vue"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "对话框中显示crud",
|
|
||||||
name: "AdvancedInDialog",
|
|
||||||
path: "/crud/advanced/in-dialog",
|
|
||||||
component: "/crud/advanced/in-dialog/index.vue"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "抽屉中显示crud",
|
|
||||||
name: "AdvancedInDrawer",
|
|
||||||
path: "/crud/advanced/in-drawer",
|
|
||||||
component: "/crud/advanced/in-drawer/index.vue"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "大量数据",
|
|
||||||
name: "AdvancedBigData",
|
|
||||||
path: "/crud/advanced/big-data",
|
|
||||||
component: "/crud/advanced/big-data/index.vue"
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
];
|
|
||||||
|
|
@ -1,22 +0,0 @@
|
||||||
export const integrationResources = [
|
|
||||||
{
|
|
||||||
title: "集成",
|
|
||||||
name: "integration",
|
|
||||||
path: "/integration",
|
|
||||||
redirect: "/integration/bpmn",
|
|
||||||
meta: {
|
|
||||||
icon: "ion:apps-sharp"
|
|
||||||
},
|
|
||||||
children: [
|
|
||||||
{
|
|
||||||
title: "FsBpmn",
|
|
||||||
name: "FsBpmn",
|
|
||||||
path: "/integration/bpmn",
|
|
||||||
component: "/integration/bpmn/index.vue",
|
|
||||||
meta: {
|
|
||||||
icon: "ion:disc-outline"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
];
|
|
||||||
|
|
@ -1,30 +0,0 @@
|
||||||
export const uiResources = [
|
|
||||||
{
|
|
||||||
title: "UI示例",
|
|
||||||
name: "ui",
|
|
||||||
path: "/ui",
|
|
||||||
redirect: "/ui/form",
|
|
||||||
meta: {
|
|
||||||
icon: "ion:apps-sharp"
|
|
||||||
},
|
|
||||||
children: [
|
|
||||||
{
|
|
||||||
title: "表单组件",
|
|
||||||
name: "UIForm",
|
|
||||||
path: "/ui/form",
|
|
||||||
redirect: "/ui/form/input",
|
|
||||||
meta: {
|
|
||||||
icon: "ion:disc-outline"
|
|
||||||
},
|
|
||||||
children: [
|
|
||||||
{
|
|
||||||
title: "input",
|
|
||||||
name: "UIFormInput",
|
|
||||||
path: "/ui/form/input",
|
|
||||||
component: "/ui/form/input/index.vue"
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
];
|
|
||||||
|
|
@ -1,43 +0,0 @@
|
||||||
import { requestForMock } from "/src/api/service";
|
|
||||||
|
|
||||||
const request = requestForMock;
|
|
||||||
const apiPrefix = "/mock/AdvancedBigData";
|
|
||||||
export function GetList(query: any) {
|
|
||||||
return request({
|
|
||||||
url: apiPrefix + "/page",
|
|
||||||
method: "get",
|
|
||||||
data: query
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
export function AddObj(obj: any) {
|
|
||||||
return request({
|
|
||||||
url: apiPrefix + "/add",
|
|
||||||
method: "post",
|
|
||||||
data: obj
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
export function UpdateObj(obj: any) {
|
|
||||||
return request({
|
|
||||||
url: apiPrefix + "/update",
|
|
||||||
method: "post",
|
|
||||||
data: obj
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
export function DelObj(id: any) {
|
|
||||||
return request({
|
|
||||||
url: apiPrefix + "/delete",
|
|
||||||
method: "post",
|
|
||||||
params: { id }
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
export function GetObj(id: any) {
|
|
||||||
return request({
|
|
||||||
url: apiPrefix + "/get",
|
|
||||||
method: "get",
|
|
||||||
params: { id }
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
@ -1,172 +0,0 @@
|
||||||
import * as api from "./api";
|
|
||||||
import { AddReq, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, dict, EditReq, UserPageQuery, UserPageRes } from "@fast-crud/fast-crud";
|
|
||||||
|
|
||||||
export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOptionsRet {
|
|
||||||
const pageRequest = async (query: UserPageQuery): Promise<UserPageRes> => {
|
|
||||||
return await api.GetList(query);
|
|
||||||
};
|
|
||||||
const editRequest = async ({ form, row }: EditReq) => {
|
|
||||||
if (form.id == null) {
|
|
||||||
form.id = row.id;
|
|
||||||
}
|
|
||||||
return await api.UpdateObj(form);
|
|
||||||
};
|
|
||||||
const delRequest = async ({ row }: DelReq) => {
|
|
||||||
return await api.DelObj(row.id);
|
|
||||||
};
|
|
||||||
|
|
||||||
const addRequest = async ({ form }: AddReq) => {
|
|
||||||
return await api.AddObj(form);
|
|
||||||
};
|
|
||||||
|
|
||||||
return {
|
|
||||||
output: {},
|
|
||||||
crudOptions: {
|
|
||||||
//大量数据的crud配置
|
|
||||||
request: {
|
|
||||||
pageRequest,
|
|
||||||
addRequest,
|
|
||||||
editRequest,
|
|
||||||
delRequest
|
|
||||||
},
|
|
||||||
table: {
|
|
||||||
scroll: {
|
|
||||||
//启用横向滚动条，设置一个大于所有列宽之和的值，一般大于表格宽度
|
|
||||||
x: 2400
|
|
||||||
}
|
|
||||||
},
|
|
||||||
pagination: {
|
|
||||||
pageSize: 100
|
|
||||||
},
|
|
||||||
rowHandle: {
|
|
||||||
fixed: "right"
|
|
||||||
},
|
|
||||||
columns: {
|
|
||||||
id: {
|
|
||||||
title: "ID",
|
|
||||||
type: "number",
|
|
||||||
column: {
|
|
||||||
width: 50
|
|
||||||
},
|
|
||||||
form: {
|
|
||||||
show: false
|
|
||||||
}
|
|
||||||
},
|
|
||||||
text: {
|
|
||||||
title: "文本",
|
|
||||||
type: "text"
|
|
||||||
},
|
|
||||||
dict1: {
|
|
||||||
title: "字典1",
|
|
||||||
type: "dict-select",
|
|
||||||
dict: dict({
|
|
||||||
url: "/mock/dicts/ManyOpenStatusEnum?from=dict1"
|
|
||||||
})
|
|
||||||
},
|
|
||||||
dict2: {
|
|
||||||
title: "字典2",
|
|
||||||
type: "dict-select",
|
|
||||||
dict: dict({
|
|
||||||
url: "/mock/dicts/ManyOpenStatusEnum?from=dict2"
|
|
||||||
})
|
|
||||||
},
|
|
||||||
dict3: {
|
|
||||||
title: "字典3",
|
|
||||||
type: "dict-select",
|
|
||||||
dict: dict({
|
|
||||||
url: "/mock/dicts/ManyOpenStatusEnum?from=dict3"
|
|
||||||
})
|
|
||||||
},
|
|
||||||
dict4: {
|
|
||||||
title: "字典4",
|
|
||||||
type: "dict-select",
|
|
||||||
dict: dict({
|
|
||||||
url: "/mock/dicts/ManyOpenStatusEnum?from=dict4"
|
|
||||||
})
|
|
||||||
},
|
|
||||||
dict5: {
|
|
||||||
title: "字典5",
|
|
||||||
type: "dict-select",
|
|
||||||
dict: dict({
|
|
||||||
url: "/mock/dicts/ManyOpenStatusEnum?from=dict5"
|
|
||||||
})
|
|
||||||
},
|
|
||||||
dict6: {
|
|
||||||
title: "字典6",
|
|
||||||
type: "dict-select",
|
|
||||||
dict: dict({
|
|
||||||
url: "/mock/dicts/ManyOpenStatusEnum?from=dict6"
|
|
||||||
})
|
|
||||||
},
|
|
||||||
dict7: {
|
|
||||||
title: "字典7",
|
|
||||||
type: "dict-select",
|
|
||||||
dict: dict({
|
|
||||||
url: "/mock/dicts/ManyOpenStatusEnum?from=dict7"
|
|
||||||
})
|
|
||||||
},
|
|
||||||
dict8: {
|
|
||||||
title: "字典8",
|
|
||||||
type: "dict-select",
|
|
||||||
dict: dict({
|
|
||||||
url: "/mock/dicts/ManyOpenStatusEnum?from=dict8"
|
|
||||||
})
|
|
||||||
},
|
|
||||||
dict9: {
|
|
||||||
title: "字典9",
|
|
||||||
type: "dict-select",
|
|
||||||
dict: dict({
|
|
||||||
url: "/mock/dicts/ManyOpenStatusEnum?from=dict9"
|
|
||||||
})
|
|
||||||
},
|
|
||||||
dict10: {
|
|
||||||
title: "字典10",
|
|
||||||
type: "dict-select",
|
|
||||||
dict: dict({
|
|
||||||
url: "/mock/dicts/ManyOpenStatusEnum?from=dict10"
|
|
||||||
})
|
|
||||||
},
|
|
||||||
text1: {
|
|
||||||
title: "文本",
|
|
||||||
type: "text"
|
|
||||||
},
|
|
||||||
text2: {
|
|
||||||
title: "文本",
|
|
||||||
type: "text"
|
|
||||||
},
|
|
||||||
text3: {
|
|
||||||
title: "文本",
|
|
||||||
type: "text"
|
|
||||||
},
|
|
||||||
text4: {
|
|
||||||
title: "文本",
|
|
||||||
type: "text"
|
|
||||||
},
|
|
||||||
text5: {
|
|
||||||
title: "文本",
|
|
||||||
type: "text"
|
|
||||||
},
|
|
||||||
text6: {
|
|
||||||
title: "文本",
|
|
||||||
type: "text"
|
|
||||||
},
|
|
||||||
text7: {
|
|
||||||
title: "文本",
|
|
||||||
type: "text"
|
|
||||||
},
|
|
||||||
text8: {
|
|
||||||
title: "文本",
|
|
||||||
type: "text"
|
|
||||||
},
|
|
||||||
text9: {
|
|
||||||
title: "文本",
|
|
||||||
type: "text"
|
|
||||||
},
|
|
||||||
text10: {
|
|
||||||
title: "文本",
|
|
||||||
type: "text"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
@ -1,31 +0,0 @@
|
||||||
<template>
|
|
||||||
<fs-page>
|
|
||||||
<template #header>
|
|
||||||
<div class="title">大量数据</div>
|
|
||||||
</template>
|
|
||||||
<fs-crud ref="crudRef" v-bind="crudBinding"> </fs-crud>
|
|
||||||
</fs-page>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script lang="ts">
|
|
||||||
import { defineComponent, onMounted } from "vue";
|
|
||||||
import { useFs } from "@fast-crud/fast-crud";
|
|
||||||
import createCrudOptions from "./crud.js";
|
|
||||||
|
|
||||||
export default defineComponent({
|
|
||||||
name: "AdvancedBigData",
|
|
||||||
setup() {
|
|
||||||
const { crudBinding, crudRef, crudExpose, output } = useFs({ createCrudOptions });
|
|
||||||
// 页面打开后获取列表数据
|
|
||||||
onMounted(() => {
|
|
||||||
crudExpose.doRefresh();
|
|
||||||
});
|
|
||||||
|
|
||||||
return {
|
|
||||||
crudBinding,
|
|
||||||
crudRef,
|
|
||||||
...output
|
|
||||||
};
|
|
||||||
}
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
@ -1,128 +0,0 @@
|
||||||
// @ts-ignore
|
|
||||||
import mockUtil from "/src/mock/base";
|
|
||||||
const options: any = {
|
|
||||||
name: "AdvancedBigData",
|
|
||||||
idGenerator: 0,
|
|
||||||
//此处copy多次，模拟大量数据
|
|
||||||
copyTimes: 1000
|
|
||||||
};
|
|
||||||
const list = [
|
|
||||||
{
|
|
||||||
text: "测试文本",
|
|
||||||
dict1: "1",
|
|
||||||
dict2: "1",
|
|
||||||
dict3: "2",
|
|
||||||
dict4: "1",
|
|
||||||
dict5: "2",
|
|
||||||
dict6: "1",
|
|
||||||
dict7: "1",
|
|
||||||
dict8: "1",
|
|
||||||
text1: "测试文本1",
|
|
||||||
text2: "测试文本2",
|
|
||||||
text3: "测试文本3",
|
|
||||||
text4: "测试文本4",
|
|
||||||
text5: "测试文本5",
|
|
||||||
text6: "测试文本6",
|
|
||||||
text7: "测试文本7",
|
|
||||||
text8: "测试文本8",
|
|
||||||
dict9: "2",
|
|
||||||
dict10: "1",
|
|
||||||
dict11: "2",
|
|
||||||
dict12: "1"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
text: "测试文本",
|
|
||||||
dict1: "1",
|
|
||||||
dict2: "1",
|
|
||||||
dict3: "2",
|
|
||||||
dict4: "1",
|
|
||||||
dict5: "2",
|
|
||||||
dict6: "1",
|
|
||||||
dict7: "1",
|
|
||||||
dict8: "1",
|
|
||||||
text1: "测试文本1",
|
|
||||||
text2: "测试文本2",
|
|
||||||
text3: "测试文本3",
|
|
||||||
text4: "测试文本4",
|
|
||||||
text5: "测试文本5",
|
|
||||||
text6: "测试文本6",
|
|
||||||
text7: "测试文本7",
|
|
||||||
text8: "测试文本8",
|
|
||||||
dict9: "2",
|
|
||||||
dict10: "1",
|
|
||||||
dict11: "2",
|
|
||||||
dict12: "1"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
text: "测试文本",
|
|
||||||
dict1: "1",
|
|
||||||
dict2: "1",
|
|
||||||
dict3: "2",
|
|
||||||
dict4: "1",
|
|
||||||
dict5: "2",
|
|
||||||
dict6: "1",
|
|
||||||
dict7: "1",
|
|
||||||
dict8: "1",
|
|
||||||
text1: "测试文本1",
|
|
||||||
text2: "测试文本2",
|
|
||||||
text3: "测试文本3",
|
|
||||||
text4: "测试文本4",
|
|
||||||
text5: "测试文本5",
|
|
||||||
text6: "测试文本6",
|
|
||||||
text7: "测试文本7",
|
|
||||||
text8: "测试文本8",
|
|
||||||
dict9: "2",
|
|
||||||
dict10: "1",
|
|
||||||
dict11: "2",
|
|
||||||
dict12: "1"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
text: "测试文本",
|
|
||||||
dict1: "1",
|
|
||||||
dict2: "1",
|
|
||||||
dict3: "2",
|
|
||||||
dict4: "1",
|
|
||||||
dict5: "2",
|
|
||||||
dict6: "1",
|
|
||||||
dict7: "1",
|
|
||||||
dict8: "1",
|
|
||||||
text1: "测试文本1",
|
|
||||||
text2: "测试文本2",
|
|
||||||
text3: "测试文本3",
|
|
||||||
text4: "测试文本4",
|
|
||||||
text5: "测试文本5",
|
|
||||||
text6: "测试文本6",
|
|
||||||
text7: "测试文本7",
|
|
||||||
text8: "测试文本8",
|
|
||||||
dict9: "2",
|
|
||||||
dict10: "1",
|
|
||||||
dict11: "2",
|
|
||||||
dict12: "1"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
text: "测试文本",
|
|
||||||
dict1: "1",
|
|
||||||
dict2: "1",
|
|
||||||
dict3: "2",
|
|
||||||
dict4: "1",
|
|
||||||
dict5: "2",
|
|
||||||
dict6: "1",
|
|
||||||
dict7: "1",
|
|
||||||
dict8: "1",
|
|
||||||
text1: "测试文本1",
|
|
||||||
text2: "测试文本2",
|
|
||||||
text3: "测试文本3",
|
|
||||||
text4: "测试文本4",
|
|
||||||
text5: "测试文本5",
|
|
||||||
text6: "测试文本6",
|
|
||||||
text7: "测试文本7",
|
|
||||||
text8: "测试文本8",
|
|
||||||
dict9: "2",
|
|
||||||
dict10: "1",
|
|
||||||
dict11: "2",
|
|
||||||
dict12: "1"
|
|
||||||
}
|
|
||||||
];
|
|
||||||
options.list = list;
|
|
||||||
const mock = mockUtil.buildMock(options);
|
|
||||||
export default mock;
|
|
||||||
|
|
@ -1,48 +0,0 @@
|
||||||
import { requestForMock } from "/src/api/service";
|
|
||||||
const request = requestForMock;
|
|
||||||
const apiPrefix = "/mock/AdvancedFromBackend";
|
|
||||||
export function GetList(query: any) {
|
|
||||||
return request({
|
|
||||||
url: apiPrefix + "/page",
|
|
||||||
method: "get",
|
|
||||||
data: query
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
export function AddObj(obj: any) {
|
|
||||||
return request({
|
|
||||||
url: apiPrefix + "/add",
|
|
||||||
method: "post",
|
|
||||||
data: obj
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
export function UpdateObj(obj: any) {
|
|
||||||
return request({
|
|
||||||
url: apiPrefix + "/update",
|
|
||||||
method: "post",
|
|
||||||
data: obj
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
export function DelObj(id: any) {
|
|
||||||
return request({
|
|
||||||
url: apiPrefix + "/delete",
|
|
||||||
method: "post",
|
|
||||||
params: { id }
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
export function GetObj(id: any) {
|
|
||||||
return request({
|
|
||||||
url: apiPrefix + "/get",
|
|
||||||
method: "get",
|
|
||||||
params: { id }
|
|
||||||
});
|
|
||||||
}
|
|
||||||
export function GetCrud() {
|
|
||||||
return request({
|
|
||||||
url: apiPrefix + "/crud",
|
|
||||||
method: "get"
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
@ -1,30 +0,0 @@
|
||||||
//此处演示从后台获取crudOptions配置字符串
|
|
||||||
export const crudOptions = `
|
|
||||||
({crudExpose,dict}) => {
|
|
||||||
return {
|
|
||||||
columns: {
|
|
||||||
id: {
|
|
||||||
title: "ID",
|
|
||||||
key: "id",
|
|
||||||
type: "number",
|
|
||||||
column: {
|
|
||||||
width: 50
|
|
||||||
},
|
|
||||||
form: {
|
|
||||||
show: false
|
|
||||||
}
|
|
||||||
},
|
|
||||||
radio: {
|
|
||||||
title: "状态",
|
|
||||||
search: { show: true },
|
|
||||||
type: "dict-radio",
|
|
||||||
dict: dict({
|
|
||||||
url: "/mock/dicts/OpenStatusEnum?single"
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
`;
|
|
||||||
|
|
@ -1,51 +0,0 @@
|
||||||
import * as api from "./api";
|
|
||||||
import { AddReq, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, EditReq, UserPageQuery, UserPageRes, dict } from "@fast-crud/fast-crud";
|
|
||||||
import { GetCrud } from "./api";
|
|
||||||
import _ from "lodash-es";
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 异步创建options
|
|
||||||
* @param props
|
|
||||||
*/
|
|
||||||
export default async function (props: CreateCrudOptionsProps): Promise<CreateCrudOptionsRet> {
|
|
||||||
const { crudExpose } = props;
|
|
||||||
const pageRequest = async (query: UserPageQuery): Promise<UserPageRes> => {
|
|
||||||
return await api.GetList(query);
|
|
||||||
};
|
|
||||||
const editRequest = async ({ form, row }: EditReq) => {
|
|
||||||
if (form.id == null) {
|
|
||||||
form.id = row.id;
|
|
||||||
}
|
|
||||||
return await api.UpdateObj(form);
|
|
||||||
};
|
|
||||||
const delRequest = async ({ row }: DelReq) => {
|
|
||||||
return await api.DelObj(row.id);
|
|
||||||
};
|
|
||||||
|
|
||||||
const addRequest = async ({ form }: AddReq) => {
|
|
||||||
return await api.AddObj(form);
|
|
||||||
};
|
|
||||||
|
|
||||||
const localCrudOptions = {
|
|
||||||
request: {
|
|
||||||
pageRequest,
|
|
||||||
addRequest,
|
|
||||||
editRequest,
|
|
||||||
delRequest
|
|
||||||
}
|
|
||||||
};
|
|
||||||
// 上面是本地crudOptions
|
|
||||||
|
|
||||||
// 下面从后台获取crudOptions
|
|
||||||
const ret = await GetCrud();
|
|
||||||
// 编译
|
|
||||||
const crudBackend = eval(ret);
|
|
||||||
// 本示例返回的是一个方法字符串，所以要先执行这个方法，获取options
|
|
||||||
const remoteCrudOptions = crudBackend({ crudExpose, dict });
|
|
||||||
// 与本地options合并
|
|
||||||
const crudOptions = _.merge(localCrudOptions, remoteCrudOptions);
|
|
||||||
|
|
||||||
return {
|
|
||||||
crudOptions
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
@ -1,44 +0,0 @@
|
||||||
<template>
|
|
||||||
<fs-page>
|
|
||||||
<template #header>
|
|
||||||
<div class="title">CrudOptions从后台加载</div>
|
|
||||||
<div class="more">
|
|
||||||
<a target="_blank" href="http://fast-crud.docmirror.cn/api/use.html#usefsasync">文档</a>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<fs-crud v-if="crudBinding" ref="crudRef" v-bind="crudBinding" />
|
|
||||||
</fs-page>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script lang="ts">
|
|
||||||
import { defineComponent, onMounted, ref, Ref } from "vue";
|
|
||||||
import { CrudBinding, useFsAsync } from "@fast-crud/fast-crud";
|
|
||||||
import createCrudOptions from "./crud";
|
|
||||||
|
|
||||||
export default defineComponent({
|
|
||||||
name: "AdvancedFromBackend",
|
|
||||||
setup() {
|
|
||||||
// crud组件的ref
|
|
||||||
const crudRef: Ref = ref();
|
|
||||||
// crud 配置的ref
|
|
||||||
const crudBinding: Ref<CrudBinding> = ref();
|
|
||||||
|
|
||||||
const customValue: any = {}; //自定义变量，传给createCrudOptions的额外参数
|
|
||||||
|
|
||||||
// 初始化crud配置
|
|
||||||
// 页面打开后获取列表数据
|
|
||||||
onMounted(async () => {
|
|
||||||
const customValue = {};
|
|
||||||
//异步初始化fs，createCrudOptions为异步方法
|
|
||||||
const { crudExpose, context } = await useFsAsync({ crudRef, crudBinding, createCrudOptions, context: customValue });
|
|
||||||
// 刷新数据
|
|
||||||
await crudExpose.doRefresh();
|
|
||||||
});
|
|
||||||
|
|
||||||
return {
|
|
||||||
crudBinding,
|
|
||||||
crudRef
|
|
||||||
};
|
|
||||||
}
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
@ -1,36 +0,0 @@
|
||||||
// @ts-ignore
|
|
||||||
import mockUtil from "/src/mock/base";
|
|
||||||
import { crudOptions } from "./crud-backend";
|
|
||||||
const options: any = {
|
|
||||||
name: "AdvancedFromBackend",
|
|
||||||
idGenerator: 0
|
|
||||||
};
|
|
||||||
const list = [
|
|
||||||
{
|
|
||||||
radio: "1"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
radio: "2"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
radio: "0"
|
|
||||||
}
|
|
||||||
];
|
|
||||||
|
|
||||||
options.list = list;
|
|
||||||
options.copyTimes = 1000;
|
|
||||||
const mock = mockUtil.buildMock(options);
|
|
||||||
|
|
||||||
mock.push({
|
|
||||||
path: "/AdvancedFromBackend/crud",
|
|
||||||
method: "get",
|
|
||||||
handle(req: any) {
|
|
||||||
return {
|
|
||||||
code: 0,
|
|
||||||
msg: "success",
|
|
||||||
data: crudOptions
|
|
||||||
};
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
export default mock;
|
|
||||||
|
|
@ -1,42 +0,0 @@
|
||||||
import { requestForMock } from "/src/api/service";
|
|
||||||
const request = requestForMock;
|
|
||||||
const apiPrefix = "/mock/AdvancedInDialog";
|
|
||||||
export function GetList(query: any) {
|
|
||||||
return request({
|
|
||||||
url: apiPrefix + "/page",
|
|
||||||
method: "get",
|
|
||||||
data: query
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
export function AddObj(obj: any) {
|
|
||||||
return request({
|
|
||||||
url: apiPrefix + "/add",
|
|
||||||
method: "post",
|
|
||||||
data: obj
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
export function UpdateObj(obj: any) {
|
|
||||||
return request({
|
|
||||||
url: apiPrefix + "/update",
|
|
||||||
method: "post",
|
|
||||||
data: obj
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
export function DelObj(id: any) {
|
|
||||||
return request({
|
|
||||||
url: apiPrefix + "/delete",
|
|
||||||
method: "post",
|
|
||||||
params: { id }
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
export function GetObj(id: any) {
|
|
||||||
return request({
|
|
||||||
url: apiPrefix + "/get",
|
|
||||||
method: "get",
|
|
||||||
params: { id }
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
@ -1,115 +0,0 @@
|
||||||
import * as api from "./api";
|
|
||||||
import {
|
|
||||||
AddReq,
|
|
||||||
CreateCrudOptionsProps,
|
|
||||||
CreateCrudOptionsRet,
|
|
||||||
DelReq,
|
|
||||||
EditReq,
|
|
||||||
UserPageQuery,
|
|
||||||
UserPageRes,
|
|
||||||
dict,
|
|
||||||
utils
|
|
||||||
} from "@fast-crud/fast-crud";
|
|
||||||
import { SearchOutlined } from "@ant-design/icons-vue";
|
|
||||||
export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOptionsRet {
|
|
||||||
const pageRequest = async (query: UserPageQuery): Promise<UserPageRes> => {
|
|
||||||
return await api.GetList(query);
|
|
||||||
};
|
|
||||||
const editRequest = async ({ form, row }: EditReq) => {
|
|
||||||
if (form.id == null) {
|
|
||||||
form.id = row.id;
|
|
||||||
}
|
|
||||||
return await api.UpdateObj(form);
|
|
||||||
};
|
|
||||||
const delRequest = async ({ row }: DelReq) => {
|
|
||||||
return await api.DelObj(row.id);
|
|
||||||
};
|
|
||||||
|
|
||||||
const addRequest = async ({ form }: AddReq) => {
|
|
||||||
return await api.AddObj(form);
|
|
||||||
};
|
|
||||||
|
|
||||||
return {
|
|
||||||
crudOptions: {
|
|
||||||
request: {
|
|
||||||
pageRequest,
|
|
||||||
addRequest,
|
|
||||||
editRequest,
|
|
||||||
delRequest
|
|
||||||
},
|
|
||||||
columns: {
|
|
||||||
name: {
|
|
||||||
title: "姓名",
|
|
||||||
type: "text", //虽然不写也能正确显示组件，但不建议省略它
|
|
||||||
search: { show: true },
|
|
||||||
form: {
|
|
||||||
component: {
|
|
||||||
maxlength: 20
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
search: {
|
|
||||||
title: "搜索",
|
|
||||||
type: "text",
|
|
||||||
form: {
|
|
||||||
component: {
|
|
||||||
addonAfter: "后置",
|
|
||||||
suffix: "suffix",
|
|
||||||
children: {
|
|
||||||
addonBefore() {
|
|
||||||
return <SearchOutlined />;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
password: {
|
|
||||||
title: "密码",
|
|
||||||
type: "password",
|
|
||||||
column: {
|
|
||||||
//一般密码不显示在列里面
|
|
||||||
show: false
|
|
||||||
}
|
|
||||||
},
|
|
||||||
intro: {
|
|
||||||
title: "简介",
|
|
||||||
type: "textarea",
|
|
||||||
form: {
|
|
||||||
component: { showWordLimit: true, maxlength: 200 }
|
|
||||||
},
|
|
||||||
column: {
|
|
||||||
ellipsis: true
|
|
||||||
}
|
|
||||||
},
|
|
||||||
render: {
|
|
||||||
title: "复杂输入(render)",
|
|
||||||
type: "text",
|
|
||||||
form: {
|
|
||||||
title: "复杂输入",
|
|
||||||
component: {
|
|
||||||
render(context: any) {
|
|
||||||
utils.logger.info("context scope", context);
|
|
||||||
return (
|
|
||||||
<a-input-group compact>
|
|
||||||
<a-input placeholder={"render1 input"} style="width: 50%" v-model={[context.form.render, "value"]} />
|
|
||||||
<a-input placeholder={"render2 input"} style="width: 50%" v-model={[context.form.render2, "value"]} />
|
|
||||||
</a-input-group>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
render2: {
|
|
||||||
title: "我的值是由复杂输入列输入的",
|
|
||||||
type: "text",
|
|
||||||
column: {
|
|
||||||
width: "300px"
|
|
||||||
},
|
|
||||||
form: {
|
|
||||||
show: false
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
@ -1,28 +0,0 @@
|
||||||
<template>
|
|
||||||
<fs-page>
|
|
||||||
<fs-crud ref="crudRef" v-bind="crudBinding" />
|
|
||||||
</fs-page>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script lang="ts">
|
|
||||||
import { defineComponent, onMounted } from "vue";
|
|
||||||
import { useFs } from "@fast-crud/fast-crud";
|
|
||||||
import createCrudOptions from "./crud";
|
|
||||||
|
|
||||||
export default defineComponent({
|
|
||||||
name: "FsInDialog",
|
|
||||||
setup() {
|
|
||||||
const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions });
|
|
||||||
|
|
||||||
// 页面打开后获取列表数据
|
|
||||||
onMounted(() => {
|
|
||||||
crudExpose.doRefresh();
|
|
||||||
});
|
|
||||||
|
|
||||||
return {
|
|
||||||
crudBinding,
|
|
||||||
crudRef
|
|
||||||
};
|
|
||||||
}
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
@ -1,41 +0,0 @@
|
||||||
// @ts-ignore
|
|
||||||
import mockUtil from "/src/mock/base";
|
|
||||||
const options: any = {
|
|
||||||
name: "AdvancedInDialog",
|
|
||||||
idGenerator: 0
|
|
||||||
};
|
|
||||||
const list = [
|
|
||||||
{
|
|
||||||
name: "王小虎",
|
|
||||||
date: "2016-05-02",
|
|
||||||
status: "0",
|
|
||||||
province: "1",
|
|
||||||
avatar: "https://alicdn.antdv.com/vue.png",
|
|
||||||
show: true,
|
|
||||||
city: "sz",
|
|
||||||
address: "123123",
|
|
||||||
zip: "518000",
|
|
||||||
intro: "王小虎是element-plus的table示例出现的名字"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "张三",
|
|
||||||
date: "2016-05-04",
|
|
||||||
status: "1",
|
|
||||||
province: "2"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "李四",
|
|
||||||
date: 2232433534511,
|
|
||||||
status: "1",
|
|
||||||
province: "0"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "王五",
|
|
||||||
date: "2016-05-03",
|
|
||||||
status: "2",
|
|
||||||
province: "wh,gz"
|
|
||||||
}
|
|
||||||
];
|
|
||||||
options.list = list;
|
|
||||||
const mock = mockUtil.buildMock(options);
|
|
||||||
export default mock;
|
|
||||||
|
|
@ -1,37 +0,0 @@
|
||||||
<template>
|
|
||||||
<fs-page>
|
|
||||||
<template #header>
|
|
||||||
<div class="title">对话框中显示crud</div>
|
|
||||||
</template>
|
|
||||||
<div style="padding: 50px">
|
|
||||||
<a-button type="primary" @click="openDialog">打开对话框</a-button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<a-modal v-model:open="dialogShow" width="80%" title="fs-crud in dialog">
|
|
||||||
<div style="height: 400px; position: relative">
|
|
||||||
<!-- 在此处显示fs-crud页面 -->
|
|
||||||
<fs-in-dialog></fs-in-dialog>
|
|
||||||
</div>
|
|
||||||
</a-modal>
|
|
||||||
</fs-page>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script lang="ts">
|
|
||||||
import { defineComponent, ref } from "vue";
|
|
||||||
//将fs-crud做成的页面在此处引入
|
|
||||||
import FsInDialog from "./crud/index.vue";
|
|
||||||
export default defineComponent({
|
|
||||||
name: "InDialog",
|
|
||||||
components: { FsInDialog },
|
|
||||||
setup() {
|
|
||||||
const dialogShow = ref(false);
|
|
||||||
function openDialog() {
|
|
||||||
dialogShow.value = true;
|
|
||||||
}
|
|
||||||
return {
|
|
||||||
dialogShow,
|
|
||||||
openDialog
|
|
||||||
};
|
|
||||||
}
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
@ -1,43 +0,0 @@
|
||||||
//@ts-ignore
|
|
||||||
import { requestForMock } from "/src/api/service";
|
|
||||||
const request = requestForMock;
|
|
||||||
const apiPrefix = "/mock/AdvancedInDrawer";
|
|
||||||
export function GetList(query: any) {
|
|
||||||
return request({
|
|
||||||
url: apiPrefix + "/page",
|
|
||||||
method: "get",
|
|
||||||
data: query
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
export function AddObj(obj: any) {
|
|
||||||
return request({
|
|
||||||
url: apiPrefix + "/add",
|
|
||||||
method: "post",
|
|
||||||
data: obj
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
export function UpdateObj(obj: any) {
|
|
||||||
return request({
|
|
||||||
url: apiPrefix + "/update",
|
|
||||||
method: "post",
|
|
||||||
data: obj
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
export function DelObj(id: any) {
|
|
||||||
return request({
|
|
||||||
url: apiPrefix + "/delete",
|
|
||||||
method: "post",
|
|
||||||
params: { id }
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
export function GetObj(id: any) {
|
|
||||||
return request({
|
|
||||||
url: apiPrefix + "/get",
|
|
||||||
method: "get",
|
|
||||||
params: { id }
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
@ -1,76 +0,0 @@
|
||||||
import * as api from "./api";
|
|
||||||
import { AddReq, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, EditReq, UserPageQuery, UserPageRes } from "@fast-crud/fast-crud";
|
|
||||||
|
|
||||||
export default function ({ crudExpose, context }: CreateCrudOptionsProps): CreateCrudOptionsRet {
|
|
||||||
//从context中获取子组件的ref
|
|
||||||
const drawerClassTimeRef = context.drawerClassTimeRef;
|
|
||||||
const pageRequest = async (query: UserPageQuery): Promise<UserPageRes> => {
|
|
||||||
return await api.GetList(query);
|
|
||||||
};
|
|
||||||
const editRequest = async ({ form, row }: EditReq) => {
|
|
||||||
if (form.id == null) {
|
|
||||||
form.id = row.id;
|
|
||||||
}
|
|
||||||
return await api.UpdateObj(form);
|
|
||||||
};
|
|
||||||
const delRequest = async ({ row }: DelReq) => {
|
|
||||||
return await api.DelObj(row.id);
|
|
||||||
};
|
|
||||||
|
|
||||||
const addRequest = async ({ form }: AddReq) => {
|
|
||||||
return await api.AddObj(form);
|
|
||||||
};
|
|
||||||
|
|
||||||
return {
|
|
||||||
crudOptions: {
|
|
||||||
request: {
|
|
||||||
pageRequest,
|
|
||||||
addRequest,
|
|
||||||
editRequest,
|
|
||||||
delRequest
|
|
||||||
},
|
|
||||||
rowHandle: {
|
|
||||||
width: 300,
|
|
||||||
buttons: {
|
|
||||||
editClassTime: {
|
|
||||||
text: "录入课时",
|
|
||||||
click: ({ row }) => {
|
|
||||||
//调用子组件暴露的open方法，打开抽屉对话框
|
|
||||||
drawerClassTimeRef.value.open({
|
|
||||||
textbook: row
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
columns: {
|
|
||||||
textbookCategory: {
|
|
||||||
title: "教材分类",
|
|
||||||
type: "text", //虽然不写也能正确显示组件，但不建议省略它
|
|
||||||
search: { show: true }
|
|
||||||
},
|
|
||||||
textbookVersion: {
|
|
||||||
title: "教材版本",
|
|
||||||
type: "text"
|
|
||||||
},
|
|
||||||
textbookName: {
|
|
||||||
title: "教材名称",
|
|
||||||
type: "text"
|
|
||||||
},
|
|
||||||
totalWords: {
|
|
||||||
title: "总词汇数",
|
|
||||||
type: "number"
|
|
||||||
},
|
|
||||||
classTimeNumber: {
|
|
||||||
title: "课时数量",
|
|
||||||
type: "number",
|
|
||||||
column: {
|
|
||||||
cellRender({ value }) {
|
|
||||||
return `${value}课时`;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
@ -1,43 +0,0 @@
|
||||||
//@ts-ignore
|
|
||||||
import { requestForMock } from "/src/api/service";
|
|
||||||
const request = requestForMock;
|
|
||||||
const apiPrefix = "/mock/AdvancedInDrawerClassTime";
|
|
||||||
export function GetList(query: any) {
|
|
||||||
return request({
|
|
||||||
url: apiPrefix + "/page",
|
|
||||||
method: "get",
|
|
||||||
data: query
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
export function AddObj(obj: any) {
|
|
||||||
return request({
|
|
||||||
url: apiPrefix + "/add",
|
|
||||||
method: "post",
|
|
||||||
data: obj
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
export function UpdateObj(obj: any) {
|
|
||||||
return request({
|
|
||||||
url: apiPrefix + "/update",
|
|
||||||
method: "post",
|
|
||||||
data: obj
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
export function DelObj(id: any) {
|
|
||||||
return request({
|
|
||||||
url: apiPrefix + "/delete",
|
|
||||||
method: "post",
|
|
||||||
params: { id }
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
export function GetObj(id: any) {
|
|
||||||
return request({
|
|
||||||
url: apiPrefix + "/get",
|
|
||||||
method: "get",
|
|
||||||
params: { id }
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
@ -1,89 +0,0 @@
|
||||||
import * as api from "./api";
|
|
||||||
import { computed } from "vue";
|
|
||||||
import { AddReq, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, EditReq, UserPageQuery, UserPageRes } from "@fast-crud/fast-crud";
|
|
||||||
|
|
||||||
export default function ({ crudExpose, context }: CreateCrudOptionsProps): CreateCrudOptionsRet {
|
|
||||||
const textbookRef = context.textbookRef;
|
|
||||||
const pageRequest = async (query: UserPageQuery): Promise<UserPageRes> => {
|
|
||||||
return await api.GetList(query);
|
|
||||||
};
|
|
||||||
const editRequest = async ({ form, row }: EditReq) => {
|
|
||||||
if (form.id == null) {
|
|
||||||
form.id = row.id;
|
|
||||||
}
|
|
||||||
return await api.UpdateObj(form);
|
|
||||||
};
|
|
||||||
const delRequest = async ({ row }: DelReq) => {
|
|
||||||
return await api.DelObj(row.id);
|
|
||||||
};
|
|
||||||
|
|
||||||
const addRequest = async ({ form }: AddReq) => {
|
|
||||||
return await api.AddObj(form);
|
|
||||||
};
|
|
||||||
|
|
||||||
return {
|
|
||||||
crudOptions: {
|
|
||||||
request: {
|
|
||||||
pageRequest,
|
|
||||||
addRequest,
|
|
||||||
editRequest,
|
|
||||||
delRequest
|
|
||||||
},
|
|
||||||
columns: {
|
|
||||||
textbookId: {
|
|
||||||
title: "教材ID",
|
|
||||||
type: "text",
|
|
||||||
search: {
|
|
||||||
show: true
|
|
||||||
},
|
|
||||||
form: {
|
|
||||||
value: computed(() => {
|
|
||||||
//动态设置初始值
|
|
||||||
return textbookRef.value.id;
|
|
||||||
})
|
|
||||||
}
|
|
||||||
},
|
|
||||||
textbookCategory: {
|
|
||||||
title: "教材分类",
|
|
||||||
type: "text",
|
|
||||||
form: { show: false },
|
|
||||||
column: {
|
|
||||||
//本字段禁止条件render，因为此字段没有值，是从父组件传过来显示的
|
|
||||||
conditionalRender: false,
|
|
||||||
cellRender() {
|
|
||||||
return textbookRef.value.textbookCategory;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
textbookVersion: {
|
|
||||||
title: "教材版本",
|
|
||||||
type: "text",
|
|
||||||
form: { show: false },
|
|
||||||
column: {
|
|
||||||
//本字段禁止条件render，因为此字段没有值，是从父组件传过来显示的
|
|
||||||
conditionalRender: false,
|
|
||||||
cellRender() {
|
|
||||||
return textbookRef.value.textbookVersion;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
textbookName: {
|
|
||||||
title: "教材名称",
|
|
||||||
type: "text",
|
|
||||||
form: { show: false },
|
|
||||||
column: {
|
|
||||||
//本字段禁止条件render，因为此字段没有值，是从父组件传过来显示的
|
|
||||||
conditionalRender: false,
|
|
||||||
cellRender() {
|
|
||||||
return textbookRef.value.textbookName;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
classTimeName: {
|
|
||||||
title: "课时名称",
|
|
||||||
type: "text"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
@ -1,35 +0,0 @@
|
||||||
<template>
|
|
||||||
<a-drawer v-model:open="drawerOpened" width="1000px">
|
|
||||||
<fs-crud ref="crudRef" v-bind="crudBinding"></fs-crud>
|
|
||||||
</a-drawer>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script lang="ts" setup>
|
|
||||||
import { ref, nextTick } from "vue";
|
|
||||||
import { useFs } from "@fast-crud/fast-crud";
|
|
||||||
import createCrudOptions from "./crud";
|
|
||||||
const textbookRef = ref();
|
|
||||||
const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions, context: { textbookRef } });
|
|
||||||
|
|
||||||
//课时子表组件名称定义
|
|
||||||
defineOptions({
|
|
||||||
name: "AdvancedInDrawerClassTime"
|
|
||||||
});
|
|
||||||
const drawerOpened = ref(false);
|
|
||||||
|
|
||||||
//定义抽屉打开方法
|
|
||||||
const open = async ({ textbook }) => {
|
|
||||||
textbookRef.value = textbook;
|
|
||||||
drawerOpened.value = true;
|
|
||||||
await nextTick(); //等待crud初始化完成
|
|
||||||
//设置查询条件，只查询当前选中的教材id
|
|
||||||
crudExpose.setSearchFormData({ form: { textbookId: textbook.id } });
|
|
||||||
//刷新课时表
|
|
||||||
await crudExpose.doRefresh();
|
|
||||||
};
|
|
||||||
|
|
||||||
//暴露出去，父组件通过ref可以调用open方法
|
|
||||||
defineExpose({
|
|
||||||
open
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
@ -1,61 +0,0 @@
|
||||||
// @ts-ignore
|
|
||||||
import mockUtil from "/src/mock/base";
|
|
||||||
const options: any = {
|
|
||||||
name: "AdvancedInDrawerClassTime",
|
|
||||||
idGenerator: 0
|
|
||||||
};
|
|
||||||
const list = [
|
|
||||||
{
|
|
||||||
textbookId: 1,
|
|
||||||
classTimeName: "1",
|
|
||||||
order: 1
|
|
||||||
},
|
|
||||||
{
|
|
||||||
textbookId: 1,
|
|
||||||
classTimeName: "2",
|
|
||||||
order: 1
|
|
||||||
},
|
|
||||||
{
|
|
||||||
textbookId: 1,
|
|
||||||
classTimeName: "3",
|
|
||||||
order: 1
|
|
||||||
},
|
|
||||||
{
|
|
||||||
textbookId: 1,
|
|
||||||
classTimeName: "4",
|
|
||||||
order: 1
|
|
||||||
},
|
|
||||||
{
|
|
||||||
textbookId: 1,
|
|
||||||
classTimeName: "5",
|
|
||||||
order: 1
|
|
||||||
},
|
|
||||||
{
|
|
||||||
textbookId: 2,
|
|
||||||
classTimeName: "1",
|
|
||||||
order: 1
|
|
||||||
},
|
|
||||||
{
|
|
||||||
textbookId: 2,
|
|
||||||
classTimeName: "2",
|
|
||||||
order: 1
|
|
||||||
},
|
|
||||||
{
|
|
||||||
textbookId: 2,
|
|
||||||
classTimeName: "3",
|
|
||||||
order: 1
|
|
||||||
},
|
|
||||||
{
|
|
||||||
textbookId: 2,
|
|
||||||
classTimeName: "4",
|
|
||||||
order: 1
|
|
||||||
},
|
|
||||||
{
|
|
||||||
textbookId: 2,
|
|
||||||
classTimeName: "5",
|
|
||||||
order: 1
|
|
||||||
}
|
|
||||||
];
|
|
||||||
options.list = list;
|
|
||||||
const mock = mockUtil.buildMock(options);
|
|
||||||
export default mock;
|
|
||||||
|
|
@ -1,26 +0,0 @@
|
||||||
<template>
|
|
||||||
<fs-page>
|
|
||||||
<fs-crud ref="crudRef" v-bind="crudBinding" />
|
|
||||||
<advanced-in-drawer-class-time ref="drawerClassTimeRef" />
|
|
||||||
</fs-page>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script lang="ts" setup>
|
|
||||||
import { defineComponent, onMounted, ref } from "vue";
|
|
||||||
import { useFs } from "@fast-crud/fast-crud";
|
|
||||||
import createCrudOptions from "./crud";
|
|
||||||
import AdvancedInDrawerClassTime from "./drawer-class-time/index.vue";
|
|
||||||
//保留子组件的ref引用
|
|
||||||
const drawerClassTimeRef = ref();
|
|
||||||
//通过context传递到crud.tsx中
|
|
||||||
const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions, context: { drawerClassTimeRef } });
|
|
||||||
|
|
||||||
defineOptions({
|
|
||||||
name: "AdvancedInDrawer"
|
|
||||||
});
|
|
||||||
|
|
||||||
// 页面打开后获取列表数据
|
|
||||||
onMounted(() => {
|
|
||||||
crudExpose.doRefresh();
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
@ -1,25 +0,0 @@
|
||||||
// @ts-ignore
|
|
||||||
import mockUtil from "/src/mock/base";
|
|
||||||
const options: any = {
|
|
||||||
name: "AdvancedInDrawer",
|
|
||||||
idGenerator: 0
|
|
||||||
};
|
|
||||||
const list = [
|
|
||||||
{
|
|
||||||
textbookCategory: "初中英语",
|
|
||||||
textbookVersion: "初中人教版",
|
|
||||||
textbookName: "初一上学期",
|
|
||||||
totalWords: 200,
|
|
||||||
classTimeNumber: 40
|
|
||||||
},
|
|
||||||
{
|
|
||||||
textbookCategory: "初中英语",
|
|
||||||
textbookVersion: "初中人教版",
|
|
||||||
textbookName: "初一上学期",
|
|
||||||
totalWords: 200,
|
|
||||||
classTimeNumber: 40
|
|
||||||
}
|
|
||||||
];
|
|
||||||
options.list = list;
|
|
||||||
const mock = mockUtil.buildMock(options);
|
|
||||||
export default mock;
|
|
||||||
|
|
@ -1,42 +0,0 @@
|
||||||
import { requestForMock } from "/src/api/service";
|
|
||||||
const request = requestForMock;
|
|
||||||
const apiPrefix = "/mock/FormLinkage";
|
|
||||||
export function GetList(query: any) {
|
|
||||||
return request({
|
|
||||||
url: apiPrefix + "/page",
|
|
||||||
method: "get",
|
|
||||||
data: query
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
export function AddObj(obj: any) {
|
|
||||||
return request({
|
|
||||||
url: apiPrefix + "/add",
|
|
||||||
method: "post",
|
|
||||||
data: obj
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
export function UpdateObj(obj: any) {
|
|
||||||
return request({
|
|
||||||
url: apiPrefix + "/update",
|
|
||||||
method: "post",
|
|
||||||
data: obj
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
export function DelObj(id: any) {
|
|
||||||
return request({
|
|
||||||
url: apiPrefix + "/delete",
|
|
||||||
method: "post",
|
|
||||||
params: { id }
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
export function GetObj(id: any) {
|
|
||||||
return request({
|
|
||||||
url: apiPrefix + "/get",
|
|
||||||
method: "get",
|
|
||||||
params: { id }
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
@ -1,126 +0,0 @@
|
||||||
import * as api from "./api";
|
|
||||||
import { AddReq, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, dict, EditReq, ScopeContext, UserPageQuery, UserPageRes } from "@fast-crud/fast-crud";
|
|
||||||
export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOptionsRet {
|
|
||||||
const pageRequest = async (query: UserPageQuery): Promise<UserPageRes> => {
|
|
||||||
return await api.GetList(query);
|
|
||||||
};
|
|
||||||
const editRequest = async ({ form, row }: EditReq) => {
|
|
||||||
if (form.id == null) {
|
|
||||||
form.id = row.id;
|
|
||||||
}
|
|
||||||
return await api.UpdateObj(form);
|
|
||||||
};
|
|
||||||
const delRequest = async ({ row }: DelReq) => {
|
|
||||||
return await api.DelObj(row.id);
|
|
||||||
};
|
|
||||||
|
|
||||||
const addRequest = async ({ form }: AddReq) => {
|
|
||||||
return await api.AddObj(form);
|
|
||||||
};
|
|
||||||
|
|
||||||
return {
|
|
||||||
crudOptions: {
|
|
||||||
request: {
|
|
||||||
pageRequest,
|
|
||||||
addRequest,
|
|
||||||
editRequest,
|
|
||||||
delRequest
|
|
||||||
},
|
|
||||||
rowHandle: {
|
|
||||||
align: "center"
|
|
||||||
},
|
|
||||||
columns: {
|
|
||||||
id: {
|
|
||||||
title: "ID",
|
|
||||||
type: "number",
|
|
||||||
column: {
|
|
||||||
width: 50
|
|
||||||
},
|
|
||||||
form: {
|
|
||||||
show: false
|
|
||||||
}
|
|
||||||
},
|
|
||||||
province: {
|
|
||||||
title: "省",
|
|
||||||
type: "dict-select",
|
|
||||||
search: {
|
|
||||||
show: true,
|
|
||||||
valueChange({ form, value, getComponentRef }: any) {
|
|
||||||
form.city = undefined; // 将“city”的值置空
|
|
||||||
form.county = undefined; // 将“county”的值置空
|
|
||||||
if (value) {
|
|
||||||
getComponentRef("city").reloadDict(); // 执行city的select组件的reloadDict()方法，触发“city”重新加载字典
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
dict: dict({
|
|
||||||
url: "/mock/linkage/province",
|
|
||||||
value: "id",
|
|
||||||
cache: true
|
|
||||||
}),
|
|
||||||
form: {
|
|
||||||
valueChange({ form, value, getComponentRef }) {
|
|
||||||
form.city = ""; // 将“city”的值置空
|
|
||||||
form.county = ""; // 将“county”的值置空
|
|
||||||
if (value) {
|
|
||||||
getComponentRef("city").reloadDict(); // 执行city的select组件的reloadDict()方法，触发“city”重新加载字典
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
city: {
|
|
||||||
title: "市",
|
|
||||||
type: "dict-select",
|
|
||||||
search: {
|
|
||||||
show: true
|
|
||||||
},
|
|
||||||
dict: dict({
|
|
||||||
cache: true,
|
|
||||||
prototype: true,
|
|
||||||
// url() 改成构建url，返回一个url
|
|
||||||
url({ form }: any) {
|
|
||||||
if (form && form.province != null) {
|
|
||||||
// 本数据字典的url是通过前一个select的选项决定的
|
|
||||||
return `/mock/linkage/city?province=${form.province}`;
|
|
||||||
}
|
|
||||||
return undefined; // 返回undefined 将不加载字典
|
|
||||||
},
|
|
||||||
value: "id"
|
|
||||||
}),
|
|
||||||
form: {
|
|
||||||
// 注释同上
|
|
||||||
valueChange({ value, form, getComponentRef }: ScopeContext) {
|
|
||||||
if (value) {
|
|
||||||
form.county = ""; // 将county的value置空
|
|
||||||
const countySelect = getComponentRef("county");
|
|
||||||
if (form && form.province && form.city) {
|
|
||||||
countySelect.reloadDict(); // 重新加载字典项
|
|
||||||
} else {
|
|
||||||
countySelect.clearDict(); // 清空选项
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
county: {
|
|
||||||
title: "区",
|
|
||||||
type: "dict-select",
|
|
||||||
search: {
|
|
||||||
show: true
|
|
||||||
},
|
|
||||||
dict: dict({
|
|
||||||
value: "id",
|
|
||||||
cache: true,
|
|
||||||
prototype: true,
|
|
||||||
url({ form }: any) {
|
|
||||||
if (form && form.province != null && form.city != null) {
|
|
||||||
return `/mock/linkage/county?province=${form.province} &city=${form.city}`;
|
|
||||||
}
|
|
||||||
return undefined;
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
@ -1,27 +0,0 @@
|
||||||
<template>
|
|
||||||
<fs-crud ref="crudRef" v-bind="crudBinding" />
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script lang="ts">
|
|
||||||
import { defineComponent, onMounted } from "vue";
|
|
||||||
import { useFs } from "@fast-crud/fast-crud";
|
|
||||||
import createCrudOptions from "./crud.js";
|
|
||||||
|
|
||||||
export default defineComponent({
|
|
||||||
name: "FormLinkage",
|
|
||||||
setup() {
|
|
||||||
const customValue: any = {}; //自定义变量，传给createCrudOptions的额外参数（可以任意命名，任意多个）
|
|
||||||
const { crudBinding, crudRef, crudExpose, context } = useFs({ createCrudOptions, context: customValue });
|
|
||||||
|
|
||||||
// 页面打开后获取列表数据
|
|
||||||
onMounted(() => {
|
|
||||||
crudExpose.doRefresh();
|
|
||||||
});
|
|
||||||
|
|
||||||
return {
|
|
||||||
crudBinding,
|
|
||||||
crudRef
|
|
||||||
};
|
|
||||||
}
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
@ -1,151 +0,0 @@
|
||||||
// @ts-ignore
|
|
||||||
import mockUtil from "/src/mock/base";
|
|
||||||
import _ from "lodash-es";
|
|
||||||
const options: any = {
|
|
||||||
name: "FormLinkage",
|
|
||||||
idGenerator: 0
|
|
||||||
};
|
|
||||||
const list = [
|
|
||||||
{
|
|
||||||
province: 10000,
|
|
||||||
city: 100003,
|
|
||||||
county: 100004
|
|
||||||
},
|
|
||||||
{
|
|
||||||
province: 10010,
|
|
||||||
city: 100113,
|
|
||||||
county: 100115
|
|
||||||
}
|
|
||||||
];
|
|
||||||
const tree = [
|
|
||||||
{
|
|
||||||
id: 10000,
|
|
||||||
label: "北京市",
|
|
||||||
children: [
|
|
||||||
{
|
|
||||||
id: 100003,
|
|
||||||
label: "北京市辖区",
|
|
||||||
children: [
|
|
||||||
{ id: 100004, label: "东城区" },
|
|
||||||
{ id: 100005, label: "西城区" }
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 100103,
|
|
||||||
label: "北京郊区",
|
|
||||||
children: [
|
|
||||||
{ id: 100104, label: "东郊" },
|
|
||||||
{ id: 100105, label: "西郊" }
|
|
||||||
]
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 10010,
|
|
||||||
label: "天津市",
|
|
||||||
children: [
|
|
||||||
{
|
|
||||||
id: 100013,
|
|
||||||
label: "天津市辖区",
|
|
||||||
children: [
|
|
||||||
{ id: 100014, label: "天津湾" },
|
|
||||||
{ id: 100015, label: "渤海湾" }
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 100113,
|
|
||||||
label: "天津市郊区",
|
|
||||||
children: [
|
|
||||||
{ id: 100114, label: "天津湾郊区" },
|
|
||||||
{ id: 100115, label: "渤海湾郊区" }
|
|
||||||
]
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
];
|
|
||||||
|
|
||||||
options.list = list;
|
|
||||||
options.copyTimes = 100;
|
|
||||||
const mock = mockUtil.buildMock(options);
|
|
||||||
|
|
||||||
function omitChildren(originalList: any) {
|
|
||||||
const list: any = [];
|
|
||||||
originalList.forEach((item: any) => {
|
|
||||||
list.push(_.omit(item, "children"));
|
|
||||||
});
|
|
||||||
return list;
|
|
||||||
}
|
|
||||||
mock.push({
|
|
||||||
path: "/mock/linkage/province",
|
|
||||||
method: "get",
|
|
||||||
handle() {
|
|
||||||
const list = omitChildren(tree);
|
|
||||||
return {
|
|
||||||
code: 0,
|
|
||||||
msg: "success",
|
|
||||||
data: list
|
|
||||||
};
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
mock.push({
|
|
||||||
path: "/mock/linkage/city",
|
|
||||||
method: "get",
|
|
||||||
handle(req: any) {
|
|
||||||
const province = parseInt(req.params.province);
|
|
||||||
const a = tree.filter((item) => {
|
|
||||||
return item.id === province;
|
|
||||||
});
|
|
||||||
if (a == null || a.length === 0) {
|
|
||||||
return {
|
|
||||||
code: 0,
|
|
||||||
msg: "success",
|
|
||||||
data: []
|
|
||||||
};
|
|
||||||
}
|
|
||||||
const list = omitChildren(a[0].children);
|
|
||||||
return {
|
|
||||||
code: 0,
|
|
||||||
msg: "success",
|
|
||||||
data: list
|
|
||||||
};
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
mock.push({
|
|
||||||
path: "/mock/linkage/county",
|
|
||||||
method: "get",
|
|
||||||
handle(req: any) {
|
|
||||||
const province = parseInt(req.params.province);
|
|
||||||
const a = tree.filter((item) => {
|
|
||||||
return item.id === province;
|
|
||||||
});
|
|
||||||
if (a == null || a.length === 0) {
|
|
||||||
return {
|
|
||||||
code: 0,
|
|
||||||
msg: "success",
|
|
||||||
data: []
|
|
||||||
};
|
|
||||||
}
|
|
||||||
const city = parseInt(req.params.city);
|
|
||||||
const b = a[0].children.filter((item) => {
|
|
||||||
return item.id === city;
|
|
||||||
});
|
|
||||||
if (b == null || b.length === 0) {
|
|
||||||
return {
|
|
||||||
code: 0,
|
|
||||||
msg: "success",
|
|
||||||
data: []
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
const list = omitChildren(b[0].children);
|
|
||||||
return {
|
|
||||||
code: 0,
|
|
||||||
msg: "success",
|
|
||||||
data: list
|
|
||||||
};
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
export default mock;
|
|
||||||
|
|
@ -1,42 +0,0 @@
|
||||||
import { requestForMock } from "/src/api/service";
|
|
||||||
const request = requestForMock;
|
|
||||||
const apiPrefix = "/mock/AdvancedLocalPagination";
|
|
||||||
export function GetList(query: any) {
|
|
||||||
return request({
|
|
||||||
url: apiPrefix + "/page",
|
|
||||||
method: "get",
|
|
||||||
data: query
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
export function AddObj(obj: any) {
|
|
||||||
return request({
|
|
||||||
url: apiPrefix + "/add",
|
|
||||||
method: "post",
|
|
||||||
data: obj
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
export function UpdateObj(obj: any) {
|
|
||||||
return request({
|
|
||||||
url: apiPrefix + "/update",
|
|
||||||
method: "post",
|
|
||||||
data: obj
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
export function DelObj(id: any) {
|
|
||||||
return request({
|
|
||||||
url: apiPrefix + "/delete",
|
|
||||||
method: "post",
|
|
||||||
params: { id }
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
export function GetObj(id: any) {
|
|
||||||
return request({
|
|
||||||
url: apiPrefix + "/get",
|
|
||||||
method: "get",
|
|
||||||
params: { id }
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
@ -1,106 +0,0 @@
|
||||||
import * as api from "./api.js";
|
|
||||||
import _ from "lodash-es";
|
|
||||||
import { AddReq, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, dict, EditReq, UserPageQuery, UserPageRes } from "@fast-crud/fast-crud";
|
|
||||||
|
|
||||||
export default function ({ crudExpose, context }: CreateCrudOptionsProps): CreateCrudOptionsRet {
|
|
||||||
const localDataRef = context.localDataRef;
|
|
||||||
const pageRequest = async (query: UserPageQuery): Promise<UserPageRes> => {
|
|
||||||
const { page } = query;
|
|
||||||
//总数据
|
|
||||||
let data = localDataRef.value;
|
|
||||||
//获取请求参数
|
|
||||||
const limit = page.limit;
|
|
||||||
const offset = page.offset;
|
|
||||||
data = data.filter((item: any) => {
|
|
||||||
// 根据你的业务，编写你的本地查询逻辑
|
|
||||||
// text改成你的查询字段
|
|
||||||
if (query.status && item.status !== query.status) {
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
return true;
|
|
||||||
});
|
|
||||||
|
|
||||||
// 本地分页
|
|
||||||
const start = offset;
|
|
||||||
let end = offset + limit;
|
|
||||||
if (data.length < end) {
|
|
||||||
end = data.length;
|
|
||||||
}
|
|
||||||
const records = data.slice(start, end);
|
|
||||||
|
|
||||||
// 构造返回结果
|
|
||||||
return {
|
|
||||||
offset,
|
|
||||||
limit,
|
|
||||||
total: localDataRef.value.length,
|
|
||||||
records
|
|
||||||
};
|
|
||||||
};
|
|
||||||
const editRequest = async ({ form, row }: EditReq) => {
|
|
||||||
if (form.id == null) {
|
|
||||||
form.id = row.id;
|
|
||||||
}
|
|
||||||
await api.UpdateObj(form);
|
|
||||||
//更新本地数据
|
|
||||||
const tableData = localDataRef.value;
|
|
||||||
for (const item of tableData) {
|
|
||||||
if (item.id === form.id) {
|
|
||||||
_.merge(item, form);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const addRequest = async ({ form }: AddReq) => {
|
|
||||||
const { id } = await api.AddObj(form);
|
|
||||||
//本地添加
|
|
||||||
form.id = id;
|
|
||||||
localDataRef.value.unshift(form);
|
|
||||||
return form;
|
|
||||||
};
|
|
||||||
|
|
||||||
const delRequest = async ({ row }: DelReq) => {
|
|
||||||
await api.DelObj(row.id);
|
|
||||||
//本地删除那一条记录
|
|
||||||
const tableData = localDataRef.value;
|
|
||||||
let index = 0;
|
|
||||||
for (const item of tableData) {
|
|
||||||
if (item.id === row.id) {
|
|
||||||
localDataRef.value.splice(index, 1);
|
|
||||||
}
|
|
||||||
index++;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
return {
|
|
||||||
output: {},
|
|
||||||
crudOptions: {
|
|
||||||
request: {
|
|
||||||
pageRequest,
|
|
||||||
addRequest,
|
|
||||||
editRequest,
|
|
||||||
delRequest
|
|
||||||
},
|
|
||||||
columns: {
|
|
||||||
id: {
|
|
||||||
title: "ID",
|
|
||||||
key: "id",
|
|
||||||
type: "number",
|
|
||||||
column: {
|
|
||||||
width: 50
|
|
||||||
},
|
|
||||||
form: {
|
|
||||||
show: false
|
|
||||||
}
|
|
||||||
},
|
|
||||||
status: {
|
|
||||||
title: "状态",
|
|
||||||
search: { show: true },
|
|
||||||
type: "dict-select",
|
|
||||||
dict: dict({
|
|
||||||
url: "/mock/dicts/OpenStatusEnum?single"
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
@ -1,51 +0,0 @@
|
||||||
<template>
|
|
||||||
<fs-page>
|
|
||||||
<template #header>
|
|
||||||
<div class="title">本地分页</div>
|
|
||||||
</template>
|
|
||||||
<fs-crud v-if="crudBinding" ref="crudRef" v-bind="crudBinding">
|
|
||||||
<template #actionbar-right>
|
|
||||||
<a-alert type="warning" class="ml-1" message="先从后台获取全部数据，然后本地分页展示" />
|
|
||||||
</template>
|
|
||||||
</fs-crud>
|
|
||||||
</fs-page>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script lang="ts">
|
|
||||||
import { defineComponent, ref, onMounted } from "vue";
|
|
||||||
import { useCrud, useExpose, useFs } from "@fast-crud/fast-crud";
|
|
||||||
import createCrudOptions from "./crud";
|
|
||||||
import { GetList } from "./api";
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 本示例演示如何本地分页
|
|
||||||
* 主要就是将pageRequest修改为从本地获取数据就行了
|
|
||||||
*/
|
|
||||||
export default defineComponent({
|
|
||||||
name: "AdvanceLocalPagination",
|
|
||||||
setup() {
|
|
||||||
// crud组件的ref
|
|
||||||
const crudRef = ref();
|
|
||||||
// crud 配置的ref
|
|
||||||
const crudBinding = ref();
|
|
||||||
|
|
||||||
const localDataRef = ref();
|
|
||||||
|
|
||||||
onMounted(async () => {
|
|
||||||
//先加载后台数据
|
|
||||||
const ret = await GetList({ page: { offset: 0, limit: 99999999 }, query: {}, sort: {} });
|
|
||||||
localDataRef.value = ret.records;
|
|
||||||
|
|
||||||
const { crudExpose } = useFs({ crudBinding, crudRef, createCrudOptions, context: { localDataRef } });
|
|
||||||
|
|
||||||
// 页面打开后获取列表数据
|
|
||||||
await crudExpose.doRefresh();
|
|
||||||
});
|
|
||||||
|
|
||||||
return {
|
|
||||||
crudBinding,
|
|
||||||
crudRef
|
|
||||||
};
|
|
||||||
}
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
@ -1,20 +0,0 @@
|
||||||
// @ts-ignore
|
|
||||||
import mockUtil from "/src/mock/base";
|
|
||||||
const options: any = {
|
|
||||||
name: "AdvancedLocalPagination",
|
|
||||||
idGenerator: 0
|
|
||||||
};
|
|
||||||
const list = [
|
|
||||||
{
|
|
||||||
status: "1"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
status: "2"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
status: "0"
|
|
||||||
}
|
|
||||||
];
|
|
||||||
options.list = list;
|
|
||||||
const mock = mockUtil.buildMock(options);
|
|
||||||
export default mock;
|
|
||||||
|
|
@ -1,50 +0,0 @@
|
||||||
import { requestForMock } from "/src/api/service";
|
|
||||||
const request = requestForMock;
|
|
||||||
const apiPrefix = "/mock/AdvancedNest";
|
|
||||||
export function GetList(query: any) {
|
|
||||||
return request({
|
|
||||||
url: apiPrefix + "/page",
|
|
||||||
method: "get",
|
|
||||||
data: query
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
export function AddObj(obj: any) {
|
|
||||||
return request({
|
|
||||||
url: apiPrefix + "/add",
|
|
||||||
method: "post",
|
|
||||||
data: obj
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
export function UpdateObj(obj: any) {
|
|
||||||
return request({
|
|
||||||
url: apiPrefix + "/update",
|
|
||||||
method: "post",
|
|
||||||
data: obj
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
export function DelObj(id: any) {
|
|
||||||
return request({
|
|
||||||
url: apiPrefix + "/delete",
|
|
||||||
method: "post",
|
|
||||||
params: { id }
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
export function GetObj(id: any) {
|
|
||||||
return request({
|
|
||||||
url: apiPrefix + "/get",
|
|
||||||
method: "get",
|
|
||||||
params: { id }
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
export function BatchDelete(ids: any[]) {
|
|
||||||
return request({
|
|
||||||
url: apiPrefix + "/batchDelete",
|
|
||||||
method: "post",
|
|
||||||
data: { ids }
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
@ -1,50 +0,0 @@
|
||||||
import { requestForMock } from "/src/api/service";
|
|
||||||
const request = requestForMock;
|
|
||||||
const apiPrefix = "/mock/AdvancedAside";
|
|
||||||
export function GetList(query: any) {
|
|
||||||
return request({
|
|
||||||
url: apiPrefix + "/page",
|
|
||||||
method: "get",
|
|
||||||
data: query
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
export function AddObj(obj: any) {
|
|
||||||
return request({
|
|
||||||
url: apiPrefix + "/add",
|
|
||||||
method: "post",
|
|
||||||
data: obj
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
export function UpdateObj(obj: any) {
|
|
||||||
return request({
|
|
||||||
url: apiPrefix + "/update",
|
|
||||||
method: "post",
|
|
||||||
data: obj
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
export function DelObj(id: any) {
|
|
||||||
return request({
|
|
||||||
url: apiPrefix + "/delete",
|
|
||||||
method: "post",
|
|
||||||
params: { id }
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
export function GetObj(id: any) {
|
|
||||||
return request({
|
|
||||||
url: apiPrefix + "/get",
|
|
||||||
method: "get",
|
|
||||||
params: { id }
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
export function BatchDelete(ids: any[]) {
|
|
||||||
return request({
|
|
||||||
url: apiPrefix + "/batchDelete",
|
|
||||||
method: "post",
|
|
||||||
data: { ids }
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
@ -1,63 +0,0 @@
|
||||||
import * as api from "./api";
|
|
||||||
import { AddReq, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, dict, EditReq, UserPageQuery, UserPageRes } from "@fast-crud/fast-crud";
|
|
||||||
|
|
||||||
export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOptionsRet {
|
|
||||||
const pageRequest = async (query: UserPageQuery): Promise<UserPageRes> => {
|
|
||||||
return await api.GetList(query);
|
|
||||||
};
|
|
||||||
const editRequest = async ({ form, row }: EditReq) => {
|
|
||||||
if (form.id == null) {
|
|
||||||
form.id = row.id;
|
|
||||||
}
|
|
||||||
return await api.UpdateObj(form);
|
|
||||||
};
|
|
||||||
const delRequest = async ({ row }: DelReq) => {
|
|
||||||
return await api.DelObj(row.id);
|
|
||||||
};
|
|
||||||
|
|
||||||
const addRequest = async ({ form }: AddReq) => {
|
|
||||||
return await api.AddObj(form);
|
|
||||||
};
|
|
||||||
|
|
||||||
return {
|
|
||||||
crudOptions: {
|
|
||||||
pagination: {
|
|
||||||
showSizeChanger: false, // antdv
|
|
||||||
showQuickJumper: false // antdv
|
|
||||||
},
|
|
||||||
request: {
|
|
||||||
pageRequest: api.GetList,
|
|
||||||
addRequest,
|
|
||||||
editRequest,
|
|
||||||
delRequest
|
|
||||||
},
|
|
||||||
toolbar: {
|
|
||||||
compact: false
|
|
||||||
},
|
|
||||||
rowHandle: {
|
|
||||||
width: "230px"
|
|
||||||
},
|
|
||||||
table: {},
|
|
||||||
columns: {
|
|
||||||
gradeId: {
|
|
||||||
title: "年级Id",
|
|
||||||
search: { show: true },
|
|
||||||
type: "number",
|
|
||||||
column: {
|
|
||||||
width: 80,
|
|
||||||
align: "center",
|
|
||||||
sortable: true
|
|
||||||
}
|
|
||||||
},
|
|
||||||
class: {
|
|
||||||
title: "班级",
|
|
||||||
search: { show: false },
|
|
||||||
type: "text",
|
|
||||||
column: {
|
|
||||||
sortable: true
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
@ -1,32 +0,0 @@
|
||||||
<template>
|
|
||||||
<fs-crud ref="crudRef" v-bind="crudBinding">
|
|
||||||
<template #actionbar-right>
|
|
||||||
<a-alert type="warning" class="ml-1" message="左侧表格点击行可以触发这里的查询" />
|
|
||||||
</template>
|
|
||||||
</fs-crud>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script lang="ts">
|
|
||||||
import { defineComponent, onMounted } from "vue";
|
|
||||||
import createCrudOptions from "./crud.js";
|
|
||||||
import { useFs } from "@fast-crud/fast-crud";
|
|
||||||
|
|
||||||
export default defineComponent({
|
|
||||||
name: "AsideTable",
|
|
||||||
setup() {
|
|
||||||
const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions });
|
|
||||||
|
|
||||||
// 页面打开后获取列表数据
|
|
||||||
onMounted(() => {
|
|
||||||
crudExpose.doRefresh();
|
|
||||||
});
|
|
||||||
|
|
||||||
return {
|
|
||||||
crudBinding,
|
|
||||||
crudRef,
|
|
||||||
setSearchFormData: crudExpose.setSearchFormData,
|
|
||||||
doRefresh: crudExpose.doRefresh
|
|
||||||
};
|
|
||||||
}
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
@ -1,27 +0,0 @@
|
||||||
// @ts-ignore
|
|
||||||
import mockUtil from "/src/mock/base";
|
|
||||||
const options: any = {
|
|
||||||
name: "AdvancedAside",
|
|
||||||
idGenerator: 0
|
|
||||||
};
|
|
||||||
const list = [
|
|
||||||
{
|
|
||||||
class: "一班",
|
|
||||||
gradeId: 1
|
|
||||||
},
|
|
||||||
{
|
|
||||||
class: "二班",
|
|
||||||
gradeId: 1
|
|
||||||
},
|
|
||||||
{
|
|
||||||
class: "三班",
|
|
||||||
gradeId: 2
|
|
||||||
},
|
|
||||||
{
|
|
||||||
class: "四班",
|
|
||||||
gradeId: 2
|
|
||||||
}
|
|
||||||
];
|
|
||||||
options.list = list;
|
|
||||||
const mock = mockUtil.buildMock(options);
|
|
||||||
export default mock;
|
|
||||||
|
|
@ -1,110 +0,0 @@
|
||||||
import * as api from "./api";
|
|
||||||
import { ref, shallowRef } from "vue";
|
|
||||||
import SubTable from "./sub-table/index.vue";
|
|
||||||
import { AddReq, compute, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, EditReq, UserPageQuery, UserPageRes } from "@fast-crud/fast-crud";
|
|
||||||
|
|
||||||
export default function ({ crudExpose, context: { asideTableRef } }: CreateCrudOptionsProps): CreateCrudOptionsRet {
|
|
||||||
const pageRequest = async (query: UserPageQuery): Promise<UserPageRes> => {
|
|
||||||
return await api.GetList(query);
|
|
||||||
};
|
|
||||||
const editRequest = async ({ form, row }: EditReq) => {
|
|
||||||
if (form.id == null) {
|
|
||||||
form.id = row.id;
|
|
||||||
}
|
|
||||||
return await api.UpdateObj(form);
|
|
||||||
};
|
|
||||||
const delRequest = async ({ row }: DelReq) => {
|
|
||||||
return await api.DelObj(row.id);
|
|
||||||
};
|
|
||||||
|
|
||||||
const addRequest = async ({ form }: AddReq) => {
|
|
||||||
return await api.AddObj(form);
|
|
||||||
};
|
|
||||||
|
|
||||||
const currentRow = ref();
|
|
||||||
|
|
||||||
const onCurrentRowChange = (id: number) => {
|
|
||||||
currentRow.value = id;
|
|
||||||
asideTableRef.value.crudBinding.search.initialForm = { gradeId: id };
|
|
||||||
asideTableRef.value.setSearchFormData({ form: { gradeId: id } });
|
|
||||||
asideTableRef.value.doRefresh();
|
|
||||||
};
|
|
||||||
return {
|
|
||||||
crudOptions: {
|
|
||||||
table: {
|
|
||||||
customRow(record: any, index: number) {
|
|
||||||
const clazz = record.id === currentRow.value ? "fs-current-row" : "";
|
|
||||||
return {
|
|
||||||
onClick() {
|
|
||||||
onCurrentRowChange(record.id);
|
|
||||||
},
|
|
||||||
class: clazz
|
|
||||||
};
|
|
||||||
}
|
|
||||||
},
|
|
||||||
pagination: {
|
|
||||||
showSizeChanger: false, // antdv
|
|
||||||
showQuickJumper: false // antdv
|
|
||||||
},
|
|
||||||
form: {
|
|
||||||
wrapper: {
|
|
||||||
is: "a-drawer"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
request: {
|
|
||||||
pageRequest: api.GetList,
|
|
||||||
addRequest,
|
|
||||||
editRequest,
|
|
||||||
delRequest
|
|
||||||
},
|
|
||||||
rowHandle: {
|
|
||||||
width: "240px"
|
|
||||||
},
|
|
||||||
toolbar: {
|
|
||||||
compact: false
|
|
||||||
},
|
|
||||||
columns: {
|
|
||||||
id: {
|
|
||||||
title: "ID",
|
|
||||||
key: "id",
|
|
||||||
type: "number",
|
|
||||||
column: {
|
|
||||||
width: 50
|
|
||||||
},
|
|
||||||
form: {
|
|
||||||
show: false
|
|
||||||
}
|
|
||||||
},
|
|
||||||
grade: {
|
|
||||||
title: "年级",
|
|
||||||
search: { show: true },
|
|
||||||
type: "text",
|
|
||||||
column: {
|
|
||||||
sortable: true
|
|
||||||
}
|
|
||||||
},
|
|
||||||
nestId: {
|
|
||||||
title: "嵌套表格",
|
|
||||||
//复合字段类型
|
|
||||||
type: ["number", "colspan"],
|
|
||||||
form: {
|
|
||||||
// 嵌套表格字段
|
|
||||||
rules: [{ required: true, message: "请选择用户" }],
|
|
||||||
component: {
|
|
||||||
//局部引用子表格，要用shallowRef包裹
|
|
||||||
name: shallowRef(SubTable),
|
|
||||||
vModel: "modelValue",
|
|
||||||
gradeId: compute(({ form }) => {
|
|
||||||
return form.id;
|
|
||||||
})
|
|
||||||
}
|
|
||||||
// antdv 的跨列配置，需要配置如下三个, 可以通过colspan简化
|
|
||||||
// col: { span: 24 },
|
|
||||||
// labelCol: { span: 2 },
|
|
||||||
// wrapperCol: { span: 21 }
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
@ -1,49 +0,0 @@
|
||||||
<template>
|
|
||||||
<a-row class="demo-nest" :gutter="0">
|
|
||||||
<a-col :span="12">
|
|
||||||
<fs-crud ref="crudRef" v-bind="crudBinding">
|
|
||||||
<template #actionbar-right>
|
|
||||||
<a-alert type="warning" class="ml-1" message="<--对话框内嵌套子表格" />
|
|
||||||
</template>
|
|
||||||
</fs-crud>
|
|
||||||
</a-col>
|
|
||||||
<a-col :span="12">
|
|
||||||
<aside-table ref="asideTableRef" />
|
|
||||||
</a-col>
|
|
||||||
</a-row>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script lang="ts">
|
|
||||||
import { defineComponent, onMounted, ref } from "vue";
|
|
||||||
import createCrudOptions from "./crud.js";
|
|
||||||
import AsideTable from "./aside-table/index.vue";
|
|
||||||
import { useFs } from "@fast-crud/fast-crud";
|
|
||||||
|
|
||||||
export default defineComponent({
|
|
||||||
name: "FeatureNest",
|
|
||||||
// eslint-disable-next-line vue/no-unused-components
|
|
||||||
components: { AsideTable },
|
|
||||||
setup() {
|
|
||||||
const asideTableRef = ref();
|
|
||||||
|
|
||||||
const { crudBinding, crudRef, crudExpose, context } = useFs({ createCrudOptions, context: { asideTableRef } });
|
|
||||||
|
|
||||||
// 页面打开后获取列表数据
|
|
||||||
onMounted(() => {
|
|
||||||
crudExpose.doRefresh();
|
|
||||||
});
|
|
||||||
|
|
||||||
return {
|
|
||||||
crudBinding,
|
|
||||||
crudRef,
|
|
||||||
asideTableRef
|
|
||||||
};
|
|
||||||
}
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
<style lang="less">
|
|
||||||
.demo-nest {
|
|
||||||
height: 100%;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,23 +0,0 @@
|
||||||
// @ts-ignore
|
|
||||||
import mockUtil from "/src/mock/base";
|
|
||||||
const options: any = {
|
|
||||||
name: "AdvancedNest",
|
|
||||||
idGenerator: 0
|
|
||||||
};
|
|
||||||
const list = [
|
|
||||||
{
|
|
||||||
grade: "一年级",
|
|
||||||
nestId: 1
|
|
||||||
},
|
|
||||||
{
|
|
||||||
grade: "二年级",
|
|
||||||
nestId: 2
|
|
||||||
},
|
|
||||||
{
|
|
||||||
grade: "三年级",
|
|
||||||
nestId: 3
|
|
||||||
}
|
|
||||||
];
|
|
||||||
options.list = list;
|
|
||||||
const mock = mockUtil.buildMock(options);
|
|
||||||
export default mock;
|
|
||||||
|
|
@ -1,50 +0,0 @@
|
||||||
import { requestForMock } from "/src/api/service";
|
|
||||||
const request = requestForMock;
|
|
||||||
const apiPrefix = "/mock/AdvancedSubTable";
|
|
||||||
export function GetList(query: any) {
|
|
||||||
return request({
|
|
||||||
url: apiPrefix + "/page",
|
|
||||||
method: "get",
|
|
||||||
data: query
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
export function AddObj(obj: any) {
|
|
||||||
return request({
|
|
||||||
url: apiPrefix + "/add",
|
|
||||||
method: "post",
|
|
||||||
data: obj
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
export function UpdateObj(obj: any) {
|
|
||||||
return request({
|
|
||||||
url: apiPrefix + "/update",
|
|
||||||
method: "post",
|
|
||||||
data: obj
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
export function DelObj(id: any) {
|
|
||||||
return request({
|
|
||||||
url: apiPrefix + "/delete",
|
|
||||||
method: "post",
|
|
||||||
params: { id }
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
export function GetObj(id: any) {
|
|
||||||
return request({
|
|
||||||
url: apiPrefix + "/get",
|
|
||||||
method: "get",
|
|
||||||
params: { id }
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
export function BatchDelete(ids: any[]) {
|
|
||||||
return request({
|
|
||||||
url: apiPrefix + "/batchDelete",
|
|
||||||
method: "post",
|
|
||||||
data: { ids }
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
@ -1,70 +0,0 @@
|
||||||
import * as api from "./api";
|
|
||||||
import { AddReq, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, EditReq, UserPageQuery, UserPageRes } from "@fast-crud/fast-crud";
|
|
||||||
|
|
||||||
export default function ({ crudExpose, context: { props, ctx } }: CreateCrudOptionsProps): CreateCrudOptionsRet {
|
|
||||||
const pageRequest = async (query: UserPageQuery): Promise<UserPageRes> => {
|
|
||||||
return await api.GetList(query);
|
|
||||||
};
|
|
||||||
const editRequest = async ({ form, row }: EditReq) => {
|
|
||||||
if (form.id == null) {
|
|
||||||
form.id = row.id;
|
|
||||||
}
|
|
||||||
return await api.UpdateObj(form);
|
|
||||||
};
|
|
||||||
const delRequest = async ({ row }: DelReq) => {
|
|
||||||
return await api.DelObj(row.id);
|
|
||||||
};
|
|
||||||
|
|
||||||
const addRequest = async ({ form }: AddReq) => {
|
|
||||||
return await api.AddObj(form);
|
|
||||||
};
|
|
||||||
|
|
||||||
return {
|
|
||||||
crudOptions: {
|
|
||||||
table: {
|
|
||||||
customRow(record: any, index: number) {
|
|
||||||
const clazz = record.id === props.modelValue ? "fs-current-row" : "";
|
|
||||||
return {
|
|
||||||
onClick() {
|
|
||||||
ctx.emit("update:modelValue", record.id);
|
|
||||||
},
|
|
||||||
class: clazz
|
|
||||||
};
|
|
||||||
}
|
|
||||||
},
|
|
||||||
request: {
|
|
||||||
pageRequest: api.GetList,
|
|
||||||
addRequest,
|
|
||||||
editRequest,
|
|
||||||
delRequest
|
|
||||||
},
|
|
||||||
search: { show: false },
|
|
||||||
form: {
|
|
||||||
wrapper: {
|
|
||||||
is: "a-drawer"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
columns: {
|
|
||||||
id: {
|
|
||||||
title: "ID",
|
|
||||||
key: "id",
|
|
||||||
type: "number",
|
|
||||||
column: {
|
|
||||||
width: 50
|
|
||||||
},
|
|
||||||
form: {
|
|
||||||
show: false
|
|
||||||
}
|
|
||||||
},
|
|
||||||
name: {
|
|
||||||
title: "用户姓名",
|
|
||||||
search: { show: true },
|
|
||||||
type: "text",
|
|
||||||
column: {
|
|
||||||
sortable: true
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
@ -1,50 +0,0 @@
|
||||||
<template>
|
|
||||||
<div>
|
|
||||||
<div>年级id：{{ gradeId }},当前选中值：{{ modelValue }}</div>
|
|
||||||
<div style="height: 400px">
|
|
||||||
<fs-crud ref="crudRef" v-bind="crudBinding" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script lang="ts">
|
|
||||||
import { defineComponent, onMounted, watch } from "vue";
|
|
||||||
import createCrudOptions from "./crud";
|
|
||||||
import {useFs, utils} from "@fast-crud/fast-crud";
|
|
||||||
|
|
||||||
export default defineComponent({
|
|
||||||
name: "SubTable",
|
|
||||||
props: {
|
|
||||||
modelValue: {},
|
|
||||||
gradeId: {} //年级id，接收其他参数
|
|
||||||
},
|
|
||||||
emits: ["update:modelValue"],
|
|
||||||
setup(props, ctx) {
|
|
||||||
const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions, context: { props, ctx } });
|
|
||||||
|
|
||||||
// 页面打开后获取列表数据
|
|
||||||
onMounted(() => {
|
|
||||||
crudExpose.doRefresh();
|
|
||||||
});
|
|
||||||
|
|
||||||
//你的业务代码
|
|
||||||
watch(
|
|
||||||
() => {
|
|
||||||
return props.modelValue;
|
|
||||||
},
|
|
||||||
(value) => {
|
|
||||||
utils.logger.info("modelValue changed", value);
|
|
||||||
}
|
|
||||||
);
|
|
||||||
return {
|
|
||||||
crudBinding,
|
|
||||||
crudRef
|
|
||||||
};
|
|
||||||
}
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
<style lang="less" scoped>
|
|
||||||
/deep/.fs-crud-container.compact .el-table--border {
|
|
||||||
border-left: 1px solid #eee;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,20 +0,0 @@
|
||||||
// @ts-ignore
|
|
||||||
import mockUtil from "/src/mock/base";
|
|
||||||
const options: any = {
|
|
||||||
name: "AdvancedSubTable",
|
|
||||||
idGenerator: 0
|
|
||||||
};
|
|
||||||
const list = [
|
|
||||||
{
|
|
||||||
name: "张三"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "李四"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "王五"
|
|
||||||
}
|
|
||||||
];
|
|
||||||
options.list = list;
|
|
||||||
const mock = mockUtil.buildMock(options);
|
|
||||||
export default mock;
|
|
||||||
|
|
@ -1,42 +0,0 @@
|
||||||
import { requestForMock } from "/src/api/service";
|
|
||||||
const request = requestForMock;
|
|
||||||
const apiPrefix = "/mock/BasisColumnMergePlugin";
|
|
||||||
export function GetList(query: any) {
|
|
||||||
return request({
|
|
||||||
url: apiPrefix + "/page",
|
|
||||||
method: "get",
|
|
||||||
data: query
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
export function AddObj(obj: any) {
|
|
||||||
return request({
|
|
||||||
url: apiPrefix + "/add",
|
|
||||||
method: "post",
|
|
||||||
data: obj
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
export function UpdateObj(obj: any) {
|
|
||||||
return request({
|
|
||||||
url: apiPrefix + "/update",
|
|
||||||
method: "post",
|
|
||||||
data: obj
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
export function DelObj(id: any) {
|
|
||||||
return request({
|
|
||||||
url: apiPrefix + "/delete",
|
|
||||||
method: "post",
|
|
||||||
params: { id }
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
export function GetObj(id: any) {
|
|
||||||
return request({
|
|
||||||
url: apiPrefix + "/get",
|
|
||||||
method: "get",
|
|
||||||
params: { id }
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
@ -1,70 +0,0 @@
|
||||||
import * as api from "./api";
|
|
||||||
import { AddReq, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, dict, EditReq, UserPageQuery, UserPageRes } from "@fast-crud/fast-crud";
|
|
||||||
|
|
||||||
export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOptionsRet {
|
|
||||||
const pageRequest = async (query: UserPageQuery): Promise<UserPageRes> => {
|
|
||||||
return await api.GetList(query);
|
|
||||||
};
|
|
||||||
const editRequest = async ({ form, row }: EditReq) => {
|
|
||||||
if (form.id == null) {
|
|
||||||
form.id = row.id;
|
|
||||||
}
|
|
||||||
return await api.UpdateObj(form);
|
|
||||||
};
|
|
||||||
const delRequest = async ({ row }: DelReq) => {
|
|
||||||
return await api.DelObj(row.id);
|
|
||||||
};
|
|
||||||
|
|
||||||
const addRequest = async ({ form }: AddReq) => {
|
|
||||||
return await api.AddObj(form);
|
|
||||||
};
|
|
||||||
|
|
||||||
return {
|
|
||||||
crudOptions: {
|
|
||||||
settings: {
|
|
||||||
viewFormUseCellComponent: true
|
|
||||||
},
|
|
||||||
request: {
|
|
||||||
pageRequest,
|
|
||||||
addRequest,
|
|
||||||
editRequest,
|
|
||||||
delRequest
|
|
||||||
},
|
|
||||||
columns: {
|
|
||||||
id: {
|
|
||||||
title: "ID",
|
|
||||||
key: "id",
|
|
||||||
type: "number",
|
|
||||||
column: {
|
|
||||||
width: 50
|
|
||||||
},
|
|
||||||
form: {
|
|
||||||
show: false
|
|
||||||
}
|
|
||||||
},
|
|
||||||
text: {
|
|
||||||
title: "text",
|
|
||||||
type: "text"
|
|
||||||
},
|
|
||||||
readonly: {
|
|
||||||
title: "只读字段",
|
|
||||||
type: "text",
|
|
||||||
readonly: true
|
|
||||||
},
|
|
||||||
useCell: {
|
|
||||||
title: "查看使用cell组件",
|
|
||||||
type: "dict-select",
|
|
||||||
readonly: true,
|
|
||||||
dict: dict({
|
|
||||||
url: "/mock/dicts/OpenStatusEnum"
|
|
||||||
}),
|
|
||||||
viewForm: {
|
|
||||||
component: {
|
|
||||||
vModel: "modelValue"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
@ -1,35 +0,0 @@
|
||||||
<template>
|
|
||||||
<fs-page>
|
|
||||||
<template #header>
|
|
||||||
<div class="title">可以实现类似dict的公共属性</div>
|
|
||||||
<div class="more"><a target="_blank" href="http://fast-crud.docmirror.cn/guide/advance/column-type.html#修改官方字段类型配置"> 字段合并插件帮助文档</a></div>
|
|
||||||
</template>
|
|
||||||
<fs-crud ref="crudRef" v-bind="crudBinding">
|
|
||||||
<template #actionbar-right>
|
|
||||||
<span class="fs-desc">此示例实现只需配置readonly: true，即可关闭添加和编辑时该字段的显示，更多说明请点击右上角帮助</span>
|
|
||||||
</template>
|
|
||||||
</fs-crud>
|
|
||||||
</fs-page>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script lang="ts">
|
|
||||||
import { defineComponent, ref, onMounted } from "vue";
|
|
||||||
import createCrudOptions from "./crud";
|
|
||||||
import { useFs, UseFsProps } from "@fast-crud/fast-crud";
|
|
||||||
export default defineComponent({
|
|
||||||
name: "BasisColumnMergePlugin",
|
|
||||||
setup() {
|
|
||||||
const context: any = {}; //自定义变量，传给createCrudOptions的额外参数（可以任意命名，任意多个）
|
|
||||||
const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions, context });
|
|
||||||
// 页面打开后获取列表数据
|
|
||||||
onMounted(() => {
|
|
||||||
crudExpose.doRefresh();
|
|
||||||
});
|
|
||||||
|
|
||||||
return {
|
|
||||||
crudBinding,
|
|
||||||
crudRef
|
|
||||||
};
|
|
||||||
}
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
@ -1,26 +0,0 @@
|
||||||
// @ts-ignore
|
|
||||||
import mockUtil from "/src/mock/base";
|
|
||||||
const options: any = {
|
|
||||||
name: "BasisColumnMergePlugin",
|
|
||||||
idGenerator: 0
|
|
||||||
};
|
|
||||||
const list = [
|
|
||||||
{
|
|
||||||
text: "点击右边查看按钮看效果",
|
|
||||||
readonly: "我是只读",
|
|
||||||
useCell: "1"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
text: "点击编辑按钮查看效果",
|
|
||||||
readonly: "我是只读",
|
|
||||||
useCell: "2"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
text: "正常字段",
|
|
||||||
readonly: "我是只读",
|
|
||||||
useCell: "0"
|
|
||||||
}
|
|
||||||
];
|
|
||||||
options.list = list;
|
|
||||||
const mock = mockUtil.buildMock(options);
|
|
||||||
export default mock;
|
|
||||||
|
|
@ -1,50 +0,0 @@
|
||||||
import { requestForMock } from "/src/api/service";
|
|
||||||
const request = requestForMock;
|
|
||||||
const apiPrefix = "/mock/BasisColumnsSet";
|
|
||||||
export function GetList(query: any) {
|
|
||||||
return request({
|
|
||||||
url: apiPrefix + "/page",
|
|
||||||
method: "get",
|
|
||||||
data: query
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
export function AddObj(obj: any) {
|
|
||||||
return request({
|
|
||||||
url: apiPrefix + "/add",
|
|
||||||
method: "post",
|
|
||||||
data: obj
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
export function UpdateObj(obj: any) {
|
|
||||||
return request({
|
|
||||||
url: apiPrefix + "/update",
|
|
||||||
method: "post",
|
|
||||||
data: obj
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
export function DelObj(id: any) {
|
|
||||||
return request({
|
|
||||||
url: apiPrefix + "/delete",
|
|
||||||
method: "post",
|
|
||||||
params: { id }
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
export function GetObj(id: any) {
|
|
||||||
return request({
|
|
||||||
url: apiPrefix + "/get",
|
|
||||||
method: "get",
|
|
||||||
params: { id }
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
export function BatchDelete(ids: any) {
|
|
||||||
return request({
|
|
||||||
url: apiPrefix + "/batchDelete",
|
|
||||||
method: "post",
|
|
||||||
data: { ids }
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
@ -1,109 +0,0 @@
|
||||||
import * as api from "./api.js";
|
|
||||||
import { AddReq, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, dict, EditReq, UserPageQuery, UserPageRes } from "@fast-crud/fast-crud";
|
|
||||||
import { message } from "ant-design-vue";
|
|
||||||
import { computed } from "vue";
|
|
||||||
export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOptionsRet {
|
|
||||||
const { crudBinding } = crudExpose;
|
|
||||||
const pageRequest = async (query: UserPageQuery): Promise<UserPageRes> => {
|
|
||||||
return await api.GetList(query);
|
|
||||||
};
|
|
||||||
const editRequest = async ({ form, row }: EditReq) => {
|
|
||||||
if (form.id == null) {
|
|
||||||
form.id = row.id;
|
|
||||||
}
|
|
||||||
return await api.UpdateObj(form);
|
|
||||||
};
|
|
||||||
const delRequest = async ({ row }: DelReq) => {
|
|
||||||
return await api.DelObj(row.id);
|
|
||||||
};
|
|
||||||
|
|
||||||
const addRequest = async ({ form }: AddReq) => {
|
|
||||||
return await api.AddObj(form);
|
|
||||||
};
|
|
||||||
return {
|
|
||||||
crudOptions: {
|
|
||||||
request: {
|
|
||||||
pageRequest,
|
|
||||||
addRequest,
|
|
||||||
editRequest,
|
|
||||||
delRequest
|
|
||||||
},
|
|
||||||
toolbar: {
|
|
||||||
columnsFilter: {
|
|
||||||
mode: "default",
|
|
||||||
container: {
|
|
||||||
width: "500px"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
actionbar: {
|
|
||||||
buttons: {
|
|
||||||
toggleMode: {
|
|
||||||
text: "切换简单模式",
|
|
||||||
click() {
|
|
||||||
crudBinding.value.toolbar.columnsFilter.mode = crudBinding.value.toolbar.columnsFilter.mode === "simple" ? "default" : "simple";
|
|
||||||
message.info("当前列设置组件的模式为：" + crudBinding.value.toolbar.columnsFilter.mode);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
toggleColumnSetShow: {
|
|
||||||
text: "切换列设置项显隐",
|
|
||||||
click() {
|
|
||||||
crudBinding.value.toolbar.columnsFilter.originalColumns.hidden.columnSetShow = !crudBinding.value.toolbar.columnsFilter.originalColumns.hidden.columnSetShow;
|
|
||||||
message.info("切换第4列的列设置显隐");
|
|
||||||
}
|
|
||||||
},
|
|
||||||
toggleColumnSetDisabled: {
|
|
||||||
text: "切换列设置项禁用",
|
|
||||||
click() {
|
|
||||||
crudBinding.value.toolbar.columnsFilter.originalColumns.disabled.columnSetDisabled = !crudBinding.value.toolbar.columnsFilter.originalColumns.disabled.columnSetDisabled;
|
|
||||||
message.info("切换第3列的列设置禁用启用");
|
|
||||||
}
|
|
||||||
},
|
|
||||||
desc: {
|
|
||||||
text: "点击左侧按钮后，再点最右侧的列设置按钮查看效果"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
columns: {
|
|
||||||
id: {
|
|
||||||
title: "ID",
|
|
||||||
key: "id",
|
|
||||||
type: "number",
|
|
||||||
column: {
|
|
||||||
width: 50
|
|
||||||
},
|
|
||||||
form: {
|
|
||||||
show: false
|
|
||||||
}
|
|
||||||
},
|
|
||||||
radio: {
|
|
||||||
title: "状态",
|
|
||||||
search: { show: true },
|
|
||||||
type: "dict-radio",
|
|
||||||
dict: dict({
|
|
||||||
url: "/mock/dicts/OpenStatusEnum?single"
|
|
||||||
}),
|
|
||||||
column: {
|
|
||||||
show: computed(() => {
|
|
||||||
return true;
|
|
||||||
})
|
|
||||||
}
|
|
||||||
},
|
|
||||||
disabled: {
|
|
||||||
title: "列设置禁用",
|
|
||||||
type: "text",
|
|
||||||
column: {
|
|
||||||
columnSetDisabled: true
|
|
||||||
}
|
|
||||||
},
|
|
||||||
hidden: {
|
|
||||||
title: "列设置隐藏",
|
|
||||||
type: "text",
|
|
||||||
column: {
|
|
||||||
columnSetShow: false
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
@ -1,48 +0,0 @@
|
||||||
<template>
|
|
||||||
<fs-page>
|
|
||||||
<template #header>
|
|
||||||
<div class="title">
|
|
||||||
列设置
|
|
||||||
<span class="sub">列设置可以禁用或者隐藏某字段勾选 ，-------> 点击右侧最后一个按钮查看效果</span>
|
|
||||||
</div>
|
|
||||||
<div class="more">
|
|
||||||
<a target="_blank" href="http://fast-crud.docmirror.cn/api/crud-options/toolbar.html#columnsfilter-mode">文档</a>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<fs-crud ref="crudRef" v-bind="crudBinding"> </fs-crud>
|
|
||||||
</fs-page>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script lang="ts">
|
|
||||||
import { defineComponent, onMounted } from "vue";
|
|
||||||
import createCrudOptions from "./crud";
|
|
||||||
import { useFs } from "@fast-crud/fast-crud";
|
|
||||||
import { message } from "ant-design-vue";
|
|
||||||
|
|
||||||
export default defineComponent({
|
|
||||||
name: "BasisColumnsSet",
|
|
||||||
setup() {
|
|
||||||
const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions });
|
|
||||||
|
|
||||||
// 页面打开后获取列表数据
|
|
||||||
onMounted(() => {
|
|
||||||
crudExpose.doRefresh();
|
|
||||||
});
|
|
||||||
|
|
||||||
function columnsSetToggleMode() {
|
|
||||||
crudBinding.value.toolbar.columnsFilter.mode = crudBinding.value.toolbar.columnsFilter.mode === "simple" ? "default" : "simple";
|
|
||||||
message.info("点击列设置按钮查看效果，当前列设置组件的模式为：" + crudBinding.value.toolbar.columnsFilter.mode);
|
|
||||||
}
|
|
||||||
|
|
||||||
function columnsSetShowToggle() {
|
|
||||||
crudBinding.value.table.columns.disabled.columnSetShow = !crudBinding.value.table.columns.disabled.columnSetShow;
|
|
||||||
}
|
|
||||||
return {
|
|
||||||
crudBinding,
|
|
||||||
crudRef,
|
|
||||||
columnsSetToggleMode,
|
|
||||||
columnsSetShowToggle
|
|
||||||
};
|
|
||||||
}
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
@ -1,20 +0,0 @@
|
||||||
// @ts-ignore
|
|
||||||
import mockUtil from "/src/mock/base";
|
|
||||||
const options: any = {
|
|
||||||
name: "BasisColumnsSet",
|
|
||||||
idGenerator: 0
|
|
||||||
};
|
|
||||||
const list = [
|
|
||||||
{
|
|
||||||
radio: "1"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
radio: "2"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
radio: "0"
|
|
||||||
}
|
|
||||||
];
|
|
||||||
options.list = list;
|
|
||||||
const mock = mockUtil.buildMock(options);
|
|
||||||
export default mock;
|
|
||||||
|
|
@ -1,42 +0,0 @@
|
||||||
import { requestForMock } from "/src/api/service";
|
|
||||||
const request = requestForMock;
|
|
||||||
const apiPrefix = "/mock/FormComputeMore";
|
|
||||||
export function GetList(query: any) {
|
|
||||||
return request({
|
|
||||||
url: apiPrefix + "/page",
|
|
||||||
method: "get",
|
|
||||||
data: query
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
export function AddObj(obj: any) {
|
|
||||||
return request({
|
|
||||||
url: apiPrefix + "/add",
|
|
||||||
method: "post",
|
|
||||||
data: obj
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
export function UpdateObj(obj: any) {
|
|
||||||
return request({
|
|
||||||
url: apiPrefix + "/update",
|
|
||||||
method: "post",
|
|
||||||
data: obj
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
export function DelObj(id: any) {
|
|
||||||
return request({
|
|
||||||
url: apiPrefix + "/delete",
|
|
||||||
method: "post",
|
|
||||||
params: { id }
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
export function GetObj(id: any) {
|
|
||||||
return request({
|
|
||||||
url: apiPrefix + "/get",
|
|
||||||
method: "get",
|
|
||||||
params: { id }
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
@ -1,104 +0,0 @@
|
||||||
import * as api from "./api";
|
|
||||||
import { AddReq, compute, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, dict, EditReq, UserPageQuery, UserPageRes } from "@fast-crud/fast-crud";
|
|
||||||
import { computed, ref, shallowRef } from "vue";
|
|
||||||
import ShallowComponent from "/@/views/crud/basis/compute-more/shallow-component.vue";
|
|
||||||
|
|
||||||
export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOptionsRet {
|
|
||||||
const pageRequest = async (query: UserPageQuery): Promise<UserPageRes> => {
|
|
||||||
return await api.GetList(query);
|
|
||||||
};
|
|
||||||
const editRequest = async ({ form, row }: EditReq) => {
|
|
||||||
if (form.id == null) {
|
|
||||||
form.id = row.id;
|
|
||||||
}
|
|
||||||
return await api.UpdateObj(form);
|
|
||||||
};
|
|
||||||
const delRequest = async ({ row }: DelReq) => {
|
|
||||||
return await api.DelObj(row.id);
|
|
||||||
};
|
|
||||||
|
|
||||||
const addRequest = async ({ form }: AddReq) => {
|
|
||||||
return await api.AddObj(form);
|
|
||||||
};
|
|
||||||
|
|
||||||
//普通的ref引用，可以动态切换配置
|
|
||||||
const defValueRef = ref("我是动态的默认值");
|
|
||||||
return {
|
|
||||||
output: {
|
|
||||||
defValueRef
|
|
||||||
},
|
|
||||||
crudOptions: {
|
|
||||||
request: {
|
|
||||||
pageRequest,
|
|
||||||
addRequest,
|
|
||||||
editRequest,
|
|
||||||
delRequest
|
|
||||||
},
|
|
||||||
table: {
|
|
||||||
scroll: {
|
|
||||||
x: 1500
|
|
||||||
}
|
|
||||||
},
|
|
||||||
form: {
|
|
||||||
labelCol: { span: 8 },
|
|
||||||
wrapperCol: { span: 14 }
|
|
||||||
},
|
|
||||||
rowHandle: {
|
|
||||||
fixed: "right",
|
|
||||||
align: "center"
|
|
||||||
},
|
|
||||||
columns: {
|
|
||||||
id: {
|
|
||||||
title: "ID",
|
|
||||||
key: "id",
|
|
||||||
type: "number",
|
|
||||||
column: {
|
|
||||||
width: 50
|
|
||||||
},
|
|
||||||
form: {
|
|
||||||
show: false
|
|
||||||
}
|
|
||||||
},
|
|
||||||
defValue: {
|
|
||||||
title: "默认值",
|
|
||||||
type: "text",
|
|
||||||
search: { show: true, value: null },
|
|
||||||
form: {
|
|
||||||
// form.value不支持asyncCompute/Compute, 因为上下文动态计算要先有上下文，上下文需要先有form数据
|
|
||||||
value: defValueRef
|
|
||||||
}
|
|
||||||
},
|
|
||||||
switch: {
|
|
||||||
title: "切换动态组件",
|
|
||||||
type: "dict-radio",
|
|
||||||
dict: dict({
|
|
||||||
data: [
|
|
||||||
{ value: "radio", label: "radio" },
|
|
||||||
{ value: "select", label: "select" },
|
|
||||||
{ value: "shallow", label: "shallowComponent" }
|
|
||||||
]
|
|
||||||
})
|
|
||||||
},
|
|
||||||
componentName: {
|
|
||||||
title: "动态组件",
|
|
||||||
type: "dict-select",
|
|
||||||
search: { show: true, value: null },
|
|
||||||
dict: dict({
|
|
||||||
data: [
|
|
||||||
{ value: "1", label: "开启" },
|
|
||||||
{ value: "2", label: "关闭" }
|
|
||||||
]
|
|
||||||
}),
|
|
||||||
form: {
|
|
||||||
component: {
|
|
||||||
value: "2",
|
|
||||||
name: compute(({ form }) => {
|
|
||||||
return form.switch === "select" ? "fs-dict-select" : form.switch === "radio" ? "fs-dict-radio" : ShallowComponent;
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
@ -1,35 +0,0 @@
|
||||||
<template>
|
|
||||||
<fs-page>
|
|
||||||
<template #header>
|
|
||||||
<div class="title">动态计算-更多测试</div>
|
|
||||||
<div class="more">
|
|
||||||
<a target="_blank" href="http://fast-crud.docmirror.cn/guide/advance/compute.html">文档</a>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<fs-crud ref="crudRef" v-bind="crudBinding"> </fs-crud>
|
|
||||||
</fs-page>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script lang="ts">
|
|
||||||
import { defineComponent, onMounted } from "vue";
|
|
||||||
import { useFs } from "@fast-crud/fast-crud";
|
|
||||||
import createCrudOptions from "./crud";
|
|
||||||
|
|
||||||
export default defineComponent({
|
|
||||||
name: "BasisComputeMore",
|
|
||||||
setup() {
|
|
||||||
const { crudBinding, crudRef, crudExpose, output } = useFs({ createCrudOptions });
|
|
||||||
|
|
||||||
// 页面打开后获取列表数据
|
|
||||||
onMounted(() => {
|
|
||||||
crudExpose.doRefresh();
|
|
||||||
});
|
|
||||||
|
|
||||||
return {
|
|
||||||
crudBinding,
|
|
||||||
crudRef,
|
|
||||||
...output
|
|
||||||
};
|
|
||||||
}
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
@ -1,33 +0,0 @@
|
||||||
// @ts-ignore
|
|
||||||
import mockUtil from "/src/mock/base";
|
|
||||||
const options: any = {
|
|
||||||
name: "FormComputeMore",
|
|
||||||
idGenerator: 0
|
|
||||||
};
|
|
||||||
const list = [
|
|
||||||
{
|
|
||||||
ref: "根据showRef显示",
|
|
||||||
compute: true,
|
|
||||||
status: "1",
|
|
||||||
remote: "2",
|
|
||||||
shower: "---> 点右边编辑查看示例效果",
|
|
||||||
remote2: "2",
|
|
||||||
editable: true
|
|
||||||
},
|
|
||||||
{
|
|
||||||
compute: false,
|
|
||||||
status: "2",
|
|
||||||
remote: "0",
|
|
||||||
remote2: "2",
|
|
||||||
editable: false
|
|
||||||
},
|
|
||||||
{
|
|
||||||
compute: true,
|
|
||||||
status: "0",
|
|
||||||
remote2: "2",
|
|
||||||
editable: true
|
|
||||||
}
|
|
||||||
];
|
|
||||||
options.list = list;
|
|
||||||
const mock = mockUtil.buildMock(options);
|
|
||||||
export default mock;
|
|
||||||
|
|
@ -1,14 +0,0 @@
|
||||||
<template>
|
|
||||||
<component :is="ui.tag.name" type="red">value : {{ modelValue || value }}</component>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup lang="ts">
|
|
||||||
import { useUi } from "@fast-crud/ui-interface";
|
|
||||||
|
|
||||||
type ScProps = {
|
|
||||||
modelValue?: string;
|
|
||||||
value?: string;
|
|
||||||
};
|
|
||||||
const props = defineProps<ScProps>();
|
|
||||||
const { ui } = useUi();
|
|
||||||
</script>
|
|
||||||
|
|
@ -1,42 +0,0 @@
|
||||||
import { requestForMock } from "/src/api/service";
|
|
||||||
const request = requestForMock;
|
|
||||||
const apiPrefix = "/mock/FormCompute";
|
|
||||||
export function GetList(query: any) {
|
|
||||||
return request({
|
|
||||||
url: apiPrefix + "/page",
|
|
||||||
method: "get",
|
|
||||||
data: query
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
export function AddObj(obj: any) {
|
|
||||||
return request({
|
|
||||||
url: apiPrefix + "/add",
|
|
||||||
method: "post",
|
|
||||||
data: obj
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
export function UpdateObj(obj: any) {
|
|
||||||
return request({
|
|
||||||
url: apiPrefix + "/update",
|
|
||||||
method: "post",
|
|
||||||
data: obj
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
export function DelObj(id: any) {
|
|
||||||
return request({
|
|
||||||
url: apiPrefix + "/delete",
|
|
||||||
method: "post",
|
|
||||||
params: { id }
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
export function GetObj(id: any) {
|
|
||||||
return request({
|
|
||||||
url: apiPrefix + "/get",
|
|
||||||
method: "get",
|
|
||||||
params: { id }
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
@ -1,204 +0,0 @@
|
||||||
import * as api from "./api";
|
|
||||||
import { requestForMock } from "/src/api/service";
|
|
||||||
import { AddReq, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, EditReq, GetContextFn, ScopeContext, useCompute, UserPageQuery, UserPageRes } from "@fast-crud/fast-crud";
|
|
||||||
import { message } from "ant-design-vue";
|
|
||||||
import { computed } from "vue";
|
|
||||||
|
|
||||||
const { asyncCompute, compute } = useCompute();
|
|
||||||
export default function ({ crudExpose, context }: CreateCrudOptionsProps): CreateCrudOptionsRet {
|
|
||||||
const pageRequest = async (query: UserPageQuery): Promise<UserPageRes> => {
|
|
||||||
return await api.GetList(query);
|
|
||||||
};
|
|
||||||
const editRequest = async ({ form, row }: EditReq) => {
|
|
||||||
if (form.id == null) {
|
|
||||||
form.id = row.id;
|
|
||||||
}
|
|
||||||
return await api.UpdateObj(form);
|
|
||||||
};
|
|
||||||
const delRequest = async ({ row }: DelReq) => {
|
|
||||||
return await api.DelObj(row.id);
|
|
||||||
};
|
|
||||||
|
|
||||||
const addRequest = async ({ form }: AddReq) => {
|
|
||||||
return await api.AddObj(form);
|
|
||||||
};
|
|
||||||
|
|
||||||
const { showRef, showTableComputed, columnComponentShowComputed } = context;
|
|
||||||
|
|
||||||
return {
|
|
||||||
crudOptions: {
|
|
||||||
request: {
|
|
||||||
pageRequest,
|
|
||||||
addRequest,
|
|
||||||
editRequest,
|
|
||||||
delRequest
|
|
||||||
},
|
|
||||||
toolbar: {
|
|
||||||
compact: false
|
|
||||||
},
|
|
||||||
table: {
|
|
||||||
scroll: {
|
|
||||||
x: 1500
|
|
||||||
},
|
|
||||||
//通过switch动态显隐table
|
|
||||||
show: showTableComputed //不仅支持computed，直接传showTableRef也是可以的
|
|
||||||
},
|
|
||||||
form: {
|
|
||||||
labelCol: { span: 8 },
|
|
||||||
wrapperCol: { span: 14 }
|
|
||||||
},
|
|
||||||
rowHandle: {
|
|
||||||
fixed: "right",
|
|
||||||
show: computed(() => {
|
|
||||||
return true;
|
|
||||||
}),
|
|
||||||
buttons: {
|
|
||||||
edit: {
|
|
||||||
show: compute<boolean>(({ row }) => {
|
|
||||||
return row.editable;
|
|
||||||
})
|
|
||||||
},
|
|
||||||
remove: {
|
|
||||||
show: compute(({ row }) => {
|
|
||||||
return row.editable;
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
columns: {
|
|
||||||
id: {
|
|
||||||
title: "ID",
|
|
||||||
key: "id",
|
|
||||||
type: "number",
|
|
||||||
column: {
|
|
||||||
width: 50,
|
|
||||||
resizable: true
|
|
||||||
},
|
|
||||||
form: {
|
|
||||||
show: false
|
|
||||||
}
|
|
||||||
},
|
|
||||||
refSwitch: {
|
|
||||||
title: "ref引用切换",
|
|
||||||
type: "text",
|
|
||||||
form: {
|
|
||||||
helper: "点我切换右边的输入框显示"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
ref: {
|
|
||||||
title: "根据ref引用显示",
|
|
||||||
type: ["text"],
|
|
||||||
form: {
|
|
||||||
component: {
|
|
||||||
show: showRef
|
|
||||||
},
|
|
||||||
helper: "我会根据showRef进行显隐"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
compute: {
|
|
||||||
title: "compute",
|
|
||||||
search: { show: false },
|
|
||||||
type: "text",
|
|
||||||
column: {
|
|
||||||
show: columnComponentShowComputed,
|
|
||||||
columnSetDisabled: true, //这里采用自定义控制显隐，那么列设置里面就要禁用
|
|
||||||
// columnSetShow: false, //直接不在列设置里面显示也行
|
|
||||||
component: {
|
|
||||||
name: "a-switch",
|
|
||||||
vModel: "checked"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
form: {
|
|
||||||
component: {
|
|
||||||
name: "a-switch",
|
|
||||||
vModel: "checked"
|
|
||||||
},
|
|
||||||
helper: "点我触发动态计算"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
shower: {
|
|
||||||
title: "根据compute显示",
|
|
||||||
search: { show: false },
|
|
||||||
type: "button",
|
|
||||||
form: {
|
|
||||||
component: {
|
|
||||||
show: compute(({ form }) => {
|
|
||||||
return form.compute;
|
|
||||||
})
|
|
||||||
}
|
|
||||||
},
|
|
||||||
column: {
|
|
||||||
width: 250,
|
|
||||||
resizable: true,
|
|
||||||
component: {
|
|
||||||
show: compute(({ row }) => {
|
|
||||||
return row.compute;
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
remote: {
|
|
||||||
title: "asyncCompute",
|
|
||||||
search: { show: true },
|
|
||||||
type: "text",
|
|
||||||
form: {
|
|
||||||
component: {
|
|
||||||
name: "a-select",
|
|
||||||
vModel: "value",
|
|
||||||
placeholder: "异步计算远程获取options",
|
|
||||||
options: asyncCompute({
|
|
||||||
async asyncFn(watchValue: any, context: GetContextFn) {
|
|
||||||
const url = "/mock/dicts/OpenStatusEnum?remote";
|
|
||||||
return await requestForMock({ url });
|
|
||||||
}
|
|
||||||
})
|
|
||||||
},
|
|
||||||
helper: "我的options是异步计算远程获取的,只会获取一次"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
remote2: {
|
|
||||||
title: "监听switch触发异步计算",
|
|
||||||
search: { show: false },
|
|
||||||
type: "text",
|
|
||||||
form: {
|
|
||||||
component: {
|
|
||||||
name: "a-select",
|
|
||||||
vModel: "value",
|
|
||||||
placeholder: "异步计算远程获取options",
|
|
||||||
options: asyncCompute({
|
|
||||||
watch({ form }: ScopeContext) {
|
|
||||||
return form.compute;
|
|
||||||
},
|
|
||||||
async asyncFn(watchValue: string) {
|
|
||||||
message.info("监听switch,触发远程获取options");
|
|
||||||
const url = watchValue ? "/mock/dicts/OpenStatusEnum?remote" : "/mock/dicts/moreOpenStatusEnum?remote";
|
|
||||||
return await requestForMock({ url });
|
|
||||||
}
|
|
||||||
})
|
|
||||||
},
|
|
||||||
helper: "监听其他属性修改后，触发重新计算"
|
|
||||||
},
|
|
||||||
column: {
|
|
||||||
width: 200
|
|
||||||
}
|
|
||||||
},
|
|
||||||
editable: {
|
|
||||||
title: "可编辑",
|
|
||||||
search: { show: false },
|
|
||||||
type: "text",
|
|
||||||
column: {
|
|
||||||
order: 1000,
|
|
||||||
fixed: "right",
|
|
||||||
component: {
|
|
||||||
name: "a-switch",
|
|
||||||
vModel: "checked"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
form: {
|
|
||||||
show: false
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
@ -1,73 +0,0 @@
|
||||||
<template>
|
|
||||||
<fs-page>
|
|
||||||
<template #header>
|
|
||||||
<div class="title">
|
|
||||||
动态计算
|
|
||||||
<fs-icon icon="ion:apps-sharp" :spin="true" />
|
|
||||||
</div>
|
|
||||||
<div class="more">
|
|
||||||
<a target="_blank" href="http://fast-crud.docmirror.cn/guide/advance/compute.html">文档</a>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<fs-crud ref="crudRef" v-bind="crudBinding">
|
|
||||||
<template #actionbar-right>
|
|
||||||
<a-tooltip title="我能控制表格显隐">
|
|
||||||
<span class="ml-1">表格显隐:<a-switch v-model:checked="showTableRef"></a-switch></span>
|
|
||||||
</a-tooltip>
|
|
||||||
<span class="ml-1">列显隐:<a-switch v-model:checked="columnComponentShowRef"></a-switch></span>
|
|
||||||
<span class="ml-1">列显隐2:<a-button @click="columnsMapSetShow">列显隐2</a-button></span>
|
|
||||||
<a-alert class="ml-1" type="info" message="点击下方右边的编辑按钮查看示例效果-----------> ↓↓↓↓↓" />
|
|
||||||
</template>
|
|
||||||
<template #form_refSwitch>
|
|
||||||
<a-switch v-model:checked="showRef"></a-switch>
|
|
||||||
</template>
|
|
||||||
</fs-crud>
|
|
||||||
</fs-page>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script lang="ts">
|
|
||||||
import { computed, defineComponent, onMounted, ref } from "vue";
|
|
||||||
import { useFs } from "@fast-crud/fast-crud";
|
|
||||||
import createCrudOptions from "./crud";
|
|
||||||
|
|
||||||
export default defineComponent({
|
|
||||||
name: "BasisCompute",
|
|
||||||
setup() {
|
|
||||||
//普通的ref引用，可以动态切换配置
|
|
||||||
const showRef = ref(false);
|
|
||||||
const showTableRef = ref(true);
|
|
||||||
const showTableComputed = computed(() => {
|
|
||||||
return showTableRef.value;
|
|
||||||
});
|
|
||||||
|
|
||||||
const columnComponentShowRef = ref(true);
|
|
||||||
const columnComponentShowComputed = computed(() => {
|
|
||||||
return columnComponentShowRef.value;
|
|
||||||
});
|
|
||||||
|
|
||||||
const context = {
|
|
||||||
showRef,
|
|
||||||
showTableRef,
|
|
||||||
showTableComputed,
|
|
||||||
columnComponentShowRef,
|
|
||||||
columnComponentShowComputed
|
|
||||||
};
|
|
||||||
|
|
||||||
const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions, context });
|
|
||||||
function columnsMapSetShow() {
|
|
||||||
crudBinding.value.table.columnsMap["id"].show = !crudBinding.value.table.columnsMap["id"].show;
|
|
||||||
}
|
|
||||||
// 页面打开后获取列表数据
|
|
||||||
onMounted(() => {
|
|
||||||
crudExpose.doRefresh();
|
|
||||||
});
|
|
||||||
|
|
||||||
return {
|
|
||||||
crudBinding,
|
|
||||||
crudRef,
|
|
||||||
...context,
|
|
||||||
columnsMapSetShow
|
|
||||||
};
|
|
||||||
}
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
@ -1,35 +0,0 @@
|
||||||
// @ts-ignore
|
|
||||||
import mockUtil from "/src/mock/base";
|
|
||||||
const options: any = {
|
|
||||||
name: "FormCompute",
|
|
||||||
idGenerator: 0
|
|
||||||
};
|
|
||||||
const list = [
|
|
||||||
{
|
|
||||||
ref: "根据showRef显示",
|
|
||||||
compute: true,
|
|
||||||
status: "1",
|
|
||||||
remote: "2",
|
|
||||||
shower: "---> 点右边编辑查看示例效果",
|
|
||||||
remote2: "2",
|
|
||||||
editable: true
|
|
||||||
},
|
|
||||||
{
|
|
||||||
compute: false,
|
|
||||||
shower: "---> 点右边编辑查看示例效果",
|
|
||||||
status: "2",
|
|
||||||
remote: "0",
|
|
||||||
remote2: "2",
|
|
||||||
editable: false
|
|
||||||
},
|
|
||||||
{
|
|
||||||
compute: true,
|
|
||||||
shower: "---> 点右边编辑查看示例效果",
|
|
||||||
status: "0",
|
|
||||||
remote2: "2",
|
|
||||||
editable: true
|
|
||||||
}
|
|
||||||
];
|
|
||||||
options.list = list;
|
|
||||||
const mock = mockUtil.buildMock(options);
|
|
||||||
export default mock;
|
|
||||||
|
|
@ -1,42 +0,0 @@
|
||||||
import { requestForMock } from "/src/api/service";
|
|
||||||
const request = requestForMock;
|
|
||||||
const apiPrefix = "/mock/BasisCustom";
|
|
||||||
export function GetList(query: any) {
|
|
||||||
return request({
|
|
||||||
url: apiPrefix + "/page",
|
|
||||||
method: "get",
|
|
||||||
data: query
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
export function AddObj(obj: any) {
|
|
||||||
return request({
|
|
||||||
url: apiPrefix + "/add",
|
|
||||||
method: "post",
|
|
||||||
data: obj
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
export function UpdateObj(obj: any) {
|
|
||||||
return request({
|
|
||||||
url: apiPrefix + "/update",
|
|
||||||
method: "post",
|
|
||||||
data: obj
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
export function DelObj(id: any) {
|
|
||||||
return request({
|
|
||||||
url: apiPrefix + "/delete",
|
|
||||||
method: "post",
|
|
||||||
params: { id }
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
export function GetObj(id: any) {
|
|
||||||
return request({
|
|
||||||
url: apiPrefix + "/get",
|
|
||||||
method: "get",
|
|
||||||
params: { id }
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
@ -1,148 +0,0 @@
|
||||||
import * as api from "./api";
|
|
||||||
import { AddReq, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, EditReq, UserPageQuery, UserPageRes } from "@fast-crud/fast-crud";
|
|
||||||
import { shallowRef } from "vue";
|
|
||||||
import VmodelCounter from "./vmodel-counter.vue";
|
|
||||||
import { message } from "ant-design-vue";
|
|
||||||
|
|
||||||
export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOptionsRet {
|
|
||||||
const pageRequest = async (query: UserPageQuery): Promise<UserPageRes> => {
|
|
||||||
return await api.GetList(query);
|
|
||||||
};
|
|
||||||
const editRequest = async ({ form, row }: EditReq) => {
|
|
||||||
if (form.id == null) {
|
|
||||||
form.id = row.id;
|
|
||||||
}
|
|
||||||
return await api.UpdateObj(form);
|
|
||||||
};
|
|
||||||
const delRequest = async ({ row }: DelReq) => {
|
|
||||||
return await api.DelObj(row.id);
|
|
||||||
};
|
|
||||||
|
|
||||||
const addRequest = async ({ form }: AddReq) => {
|
|
||||||
return await api.AddObj(form);
|
|
||||||
};
|
|
||||||
|
|
||||||
return {
|
|
||||||
crudOptions: {
|
|
||||||
request: {
|
|
||||||
pageRequest,
|
|
||||||
addRequest,
|
|
||||||
editRequest,
|
|
||||||
delRequest
|
|
||||||
},
|
|
||||||
columns: {
|
|
||||||
id: {
|
|
||||||
title: "ID",
|
|
||||||
key: "id",
|
|
||||||
type: "number",
|
|
||||||
column: {
|
|
||||||
width: 50
|
|
||||||
},
|
|
||||||
form: {
|
|
||||||
show: false
|
|
||||||
}
|
|
||||||
},
|
|
||||||
counter: {
|
|
||||||
title: "自定义组件",
|
|
||||||
type: "text",
|
|
||||||
column: {
|
|
||||||
component: {
|
|
||||||
//引用自定义组件
|
|
||||||
name: VmodelCounter,
|
|
||||||
color: "blue",
|
|
||||||
slots: {
|
|
||||||
//插槽示例
|
|
||||||
default() {
|
|
||||||
return <span>counter on cell:</span>;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
on: {
|
|
||||||
//监听事件
|
|
||||||
onChange({ $event, row }) {
|
|
||||||
message.info("counter changed:" + $event);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
form: {
|
|
||||||
//form表单
|
|
||||||
component: {
|
|
||||||
//引用自定义组件
|
|
||||||
name: VmodelCounter,
|
|
||||||
vModel: "modelValue",
|
|
||||||
color: "red",
|
|
||||||
on: {
|
|
||||||
//监听事件
|
|
||||||
onChange({ $event, form }) {
|
|
||||||
message.info("counter changed:" + $event);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
slots: {
|
|
||||||
//插槽示例
|
|
||||||
default() {
|
|
||||||
return <span>counter on form:</span>;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
search: {
|
|
||||||
show: true,
|
|
||||||
//form表单
|
|
||||||
component: {
|
|
||||||
color: "yellow",
|
|
||||||
slots: {
|
|
||||||
//插槽示例
|
|
||||||
default() {
|
|
||||||
return "counter:";
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
cellRender: {
|
|
||||||
title: "单元格render",
|
|
||||||
type: "text",
|
|
||||||
column: {
|
|
||||||
cellRender({ value }) {
|
|
||||||
return <a-tag>{value}</a-tag>;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
formAroundRender: {
|
|
||||||
title: "表单组件周围的render",
|
|
||||||
type: "text",
|
|
||||||
form: {
|
|
||||||
helper: "演示组件周围自定义render",
|
|
||||||
topRender({ value }) {
|
|
||||||
return <a-tag color="red">topRender</a-tag>;
|
|
||||||
},
|
|
||||||
bottomRender({ value }) {
|
|
||||||
return <a-tag color="red">bottomRender {value ?? ""}</a-tag>;
|
|
||||||
},
|
|
||||||
prefixRender({ value }) {
|
|
||||||
return <a-tag color="red">prefixRender</a-tag>;
|
|
||||||
},
|
|
||||||
suffixRender({ value }) {
|
|
||||||
return <a-tag color="red">suffixRender</a-tag>;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
formRender: {
|
|
||||||
title: "字段组件本身render",
|
|
||||||
type: "text",
|
|
||||||
form: {
|
|
||||||
helper: "组件本身render",
|
|
||||||
render({ form }) {
|
|
||||||
return (
|
|
||||||
<div>
|
|
||||||
<a-input v-model={[form.formRender, "value"]} />
|
|
||||||
render value : {form.formRender}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
@ -1,32 +0,0 @@
|
||||||
<template>
|
|
||||||
<fs-page>
|
|
||||||
<template #header>
|
|
||||||
<div class="title">自定义组件</div>
|
|
||||||
</template>
|
|
||||||
<fs-crud ref="crudRef" v-bind="crudBinding"> </fs-crud>
|
|
||||||
</fs-page>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script lang="ts">
|
|
||||||
import { defineComponent, onMounted } from "vue";
|
|
||||||
import { useFs } from "@fast-crud/fast-crud";
|
|
||||||
import createCrudOptions from "./crud.js";
|
|
||||||
|
|
||||||
export default defineComponent({
|
|
||||||
name: "BasisCustom",
|
|
||||||
setup() {
|
|
||||||
const { crudBinding, crudRef, crudExpose, context } = useFs({ createCrudOptions });
|
|
||||||
|
|
||||||
// 页面打开后获取列表数据
|
|
||||||
onMounted(() => {
|
|
||||||
crudExpose.doRefresh();
|
|
||||||
});
|
|
||||||
|
|
||||||
return {
|
|
||||||
crudBinding,
|
|
||||||
crudRef,
|
|
||||||
...context
|
|
||||||
};
|
|
||||||
}
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
@ -1,22 +0,0 @@
|
||||||
import mockUtil from "/src/mock/base";
|
|
||||||
const options: any = {
|
|
||||||
name: "BasisCustom",
|
|
||||||
idGenerator: 0
|
|
||||||
};
|
|
||||||
const list = [
|
|
||||||
{
|
|
||||||
counter: 1,
|
|
||||||
cellRender: "cellRender1"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
counter: 2,
|
|
||||||
cellRender: "cellRender2"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
counter: 3,
|
|
||||||
cellRender: "cellRender3"
|
|
||||||
}
|
|
||||||
];
|
|
||||||
options.list = list;
|
|
||||||
const mock = mockUtil.buildMock(options);
|
|
||||||
export default mock;
|
|
||||||
|
|
@ -1,45 +0,0 @@
|
||||||
<template>
|
|
||||||
<a-tooltip title="点击我自增">
|
|
||||||
<a-tag :color="color" @click="onClick">
|
|
||||||
<!-- 插槽示例 -->
|
|
||||||
<slot></slot>
|
|
||||||
<span> {{ modelValue }}</span>
|
|
||||||
</a-tag>
|
|
||||||
</a-tooltip>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script lang="ts">
|
|
||||||
import { defineComponent, watch } from "vue";
|
|
||||||
|
|
||||||
export default defineComponent({
|
|
||||||
name: "VmodelCounter",
|
|
||||||
props: {
|
|
||||||
modelValue: {
|
|
||||||
type: Number,
|
|
||||||
default: 0
|
|
||||||
},
|
|
||||||
color: {
|
|
||||||
type: String,
|
|
||||||
default: "success"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
emits: ["update:modelValue", "change"],
|
|
||||||
setup(props, ctx) {
|
|
||||||
function onClick() {
|
|
||||||
//发射modelValue更新事件，父组件引用时只需要v-model={xxx}即可
|
|
||||||
ctx.emit("update:modelValue", props.modelValue + 1);
|
|
||||||
}
|
|
||||||
watch(
|
|
||||||
() => {
|
|
||||||
return props.modelValue;
|
|
||||||
},
|
|
||||||
(value) => {
|
|
||||||
ctx.emit("change", value);
|
|
||||||
}
|
|
||||||
);
|
|
||||||
return {
|
|
||||||
onClick
|
|
||||||
};
|
|
||||||
}
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
@ -1,52 +0,0 @@
|
||||||
import { requestForMock } from "/src/api/service";
|
|
||||||
const request = requestForMock;
|
|
||||||
const apiPrefix = "/mock/FsCrudFirst";
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 定义行数据模型
|
|
||||||
*/
|
|
||||||
export type FirstRow = {
|
|
||||||
id?: number;
|
|
||||||
name?: string;
|
|
||||||
type?: number;
|
|
||||||
};
|
|
||||||
|
|
||||||
export function GetList(query: FirstRow) {
|
|
||||||
return request({
|
|
||||||
url: apiPrefix + "/page",
|
|
||||||
method: "get",
|
|
||||||
data: query
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
export function AddObj(obj: FirstRow) {
|
|
||||||
return request({
|
|
||||||
url: apiPrefix + "/add",
|
|
||||||
method: "post",
|
|
||||||
data: obj
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
export function UpdateObj(obj: FirstRow) {
|
|
||||||
return request({
|
|
||||||
url: apiPrefix + "/update",
|
|
||||||
method: "post",
|
|
||||||
data: obj
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
export function DelObj(id: any) {
|
|
||||||
return request({
|
|
||||||
url: apiPrefix + "/delete",
|
|
||||||
method: "post",
|
|
||||||
params: { id }
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
export function GetObj(id: any) {
|
|
||||||
return request({
|
|
||||||
url: apiPrefix + "/get",
|
|
||||||
method: "get",
|
|
||||||
params: { id }
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
@ -1,57 +0,0 @@
|
||||||
import { AddReq, compute, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, dict, EditReq, UserPageQuery } from "@fast-crud/fast-crud";
|
|
||||||
import * as api from "./api";
|
|
||||||
import { FirstRow } from "./api";
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 定义context参数类型
|
|
||||||
*/
|
|
||||||
export type FirstContext = {
|
|
||||||
test?: number;
|
|
||||||
};
|
|
||||||
export default function ({ crudExpose, context }: CreateCrudOptionsProps<FirstRow, FirstContext>): CreateCrudOptionsRet<FirstRow> {
|
|
||||||
context.test = 111;
|
|
||||||
return {
|
|
||||||
crudOptions: {
|
|
||||||
// 自定义crudOptions配置
|
|
||||||
request: {
|
|
||||||
pageRequest: async (query: UserPageQuery<FirstRow>) => {
|
|
||||||
return await api.GetList(query);
|
|
||||||
},
|
|
||||||
addRequest: async ({ form }: AddReq) => {
|
|
||||||
return await api.AddObj(form);
|
|
||||||
},
|
|
||||||
editRequest: async ({ form, row }: EditReq) => {
|
|
||||||
if (form.id == null) {
|
|
||||||
form.id = row.id;
|
|
||||||
}
|
|
||||||
return await api.UpdateObj(form);
|
|
||||||
},
|
|
||||||
delRequest: async ({ row }: DelReq) => {
|
|
||||||
return await api.DelObj(row.id);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
//两个字段
|
|
||||||
columns: {
|
|
||||||
name: {
|
|
||||||
title: "姓名",
|
|
||||||
type: "text",
|
|
||||||
search: { show: true },
|
|
||||||
column: {
|
|
||||||
resizable: true,
|
|
||||||
width: 200
|
|
||||||
}
|
|
||||||
},
|
|
||||||
type: {
|
|
||||||
title: "类型",
|
|
||||||
type: "dict-select",
|
|
||||||
dict: dict({
|
|
||||||
data: [
|
|
||||||
{ value: 1, label: "开始", color: "green" },
|
|
||||||
{ value: 0, label: "停止", color: "red" }
|
|
||||||
]
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
@ -1,103 +0,0 @@
|
||||||
<template>
|
|
||||||
<fs-page class="page-first">
|
|
||||||
<template #header>
|
|
||||||
<div class="title">第一个crud</div>
|
|
||||||
<div class="more">
|
|
||||||
<a target="_blank" href="http://fast-crud.docmirror.cn/guide/start/first.html">文档</a>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<fs-crud ref="crudRef" v-bind="crudBinding" />
|
|
||||||
|
|
||||||
<a-tour v-model:current="current" :open="open" :steps="steps" @close="handleOpen(false)" />
|
|
||||||
</fs-page>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script lang="ts">
|
|
||||||
import { defineComponent, onMounted, ref } from "vue";
|
|
||||||
import { useFs, utils } from "@fast-crud/fast-crud";
|
|
||||||
import createCrudOptions, { FirstContext } from "./crud";
|
|
||||||
import { TourProps } from "ant-design-vue";
|
|
||||||
import { FirstRow } from "./api";
|
|
||||||
|
|
||||||
//此处为组件定义
|
|
||||||
export default defineComponent({
|
|
||||||
name: "FsCrudFirst",
|
|
||||||
setup() {
|
|
||||||
// // crud组件的ref
|
|
||||||
// const crudRef: Ref = ref();
|
|
||||||
// // crud 配置的ref
|
|
||||||
// const crudBinding: Ref<CrudBinding> = ref();
|
|
||||||
// // 暴露的方法
|
|
||||||
// const { crudExpose } = useExpose({ crudRef, crudBinding });
|
|
||||||
// // 你的crud配置
|
|
||||||
// const { crudOptions, customExport } = createCrudOptions({ crudExpose, customValue });
|
|
||||||
// // 初始化crud配置
|
|
||||||
// const { resetCrudOptions, appendCrudBinding } = useCrud({ crudExpose, crudOptions });
|
|
||||||
|
|
||||||
// =======以上为fs的初始化代码=========
|
|
||||||
// =======你可以简写为下面这一行========
|
|
||||||
const { crudRef, crudBinding, crudExpose, context } = useFs<FirstRow, FirstContext>({ createCrudOptions, context: {} });
|
|
||||||
|
|
||||||
utils.logger.info("test", context.test);
|
|
||||||
|
|
||||||
function useTour() {
|
|
||||||
const open = ref<boolean>(false);
|
|
||||||
const current = ref(0);
|
|
||||||
//帮助向导
|
|
||||||
const steps: TourProps["steps"] = [
|
|
||||||
{
|
|
||||||
title: "查询",
|
|
||||||
description: "查询数据.",
|
|
||||||
target: () => {
|
|
||||||
return document.querySelector(".page-first .fs-search-btn-search") as HTMLElement;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "重置",
|
|
||||||
description: "重置查询条件.",
|
|
||||||
target: () => {
|
|
||||||
return document.querySelector(".page-first .fs-search-btn-reset") as HTMLElement;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "添加",
|
|
||||||
description: "打开添加对话框",
|
|
||||||
target: () => {
|
|
||||||
return document.querySelector(".page-first .fs-actionbar-btn-add") as HTMLElement;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "刷新列表",
|
|
||||||
description: "刷新列表",
|
|
||||||
target: () => {
|
|
||||||
return document.querySelector(".page-first .fs-toolbar-btn-refresh") as HTMLElement;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
];
|
|
||||||
|
|
||||||
const handleOpen = (val: boolean): void => {
|
|
||||||
open.value = val;
|
|
||||||
};
|
|
||||||
|
|
||||||
return {
|
|
||||||
open,
|
|
||||||
current,
|
|
||||||
steps,
|
|
||||||
handleOpen
|
|
||||||
};
|
|
||||||
}
|
|
||||||
const tour = useTour();
|
|
||||||
|
|
||||||
// 页面打开后获取列表数据
|
|
||||||
onMounted(() => {
|
|
||||||
crudExpose.doRefresh();
|
|
||||||
tour.handleOpen(true);
|
|
||||||
});
|
|
||||||
return {
|
|
||||||
crudBinding,
|
|
||||||
crudRef,
|
|
||||||
...tour
|
|
||||||
};
|
|
||||||
}
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
@ -1,22 +0,0 @@
|
||||||
// @ts-ignore
|
|
||||||
import mockUtil from "/src/mock/base";
|
|
||||||
const options: any = {
|
|
||||||
name: "FsCrudFirst",
|
|
||||||
idGenerator: 0
|
|
||||||
};
|
|
||||||
const list = [
|
|
||||||
{
|
|
||||||
name: "张三",
|
|
||||||
type: 1
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "李四",
|
|
||||||
type: 0
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "王五"
|
|
||||||
}
|
|
||||||
];
|
|
||||||
options.list = list;
|
|
||||||
const mock = mockUtil.buildMock(options);
|
|
||||||
export default mock;
|
|
||||||
|
|
@ -1,116 +0,0 @@
|
||||||
<template>
|
|
||||||
<fs-page>
|
|
||||||
<template #header>
|
|
||||||
<div class="title">HelloWorld</div>
|
|
||||||
<div class="more">
|
|
||||||
<a target="_blank" href="http://fast-crud.docmirror.cn/guide/start/integration.html">文档</a>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<fs-crud ref="crudRef" v-bind="crudBinding" />
|
|
||||||
</fs-page>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script lang="ts">
|
|
||||||
import { defineComponent, ref, onMounted, reactive } from "vue";
|
|
||||||
import { AddReq, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, dict, EditReq, useCrud, useFs, UserPageQuery, UserPageRes } from "@fast-crud/fast-crud";
|
|
||||||
import _ from "lodash-es";
|
|
||||||
|
|
||||||
//此处为crudOptions配置
|
|
||||||
const createCrudOptions = function ({}: CreateCrudOptionsProps): CreateCrudOptionsRet {
|
|
||||||
//本地模拟后台crud接口方法 ----开始
|
|
||||||
const records = [{ id: 1, name: "Hello World", type: 1 }];
|
|
||||||
const pageRequest = async (query: UserPageQuery): Promise<UserPageRes> => {
|
|
||||||
return {
|
|
||||||
records: _.cloneDeep(records),
|
|
||||||
offset: 0, //后续transformRes会计算为currentPage
|
|
||||||
limit: 20, //后续transformRes会计算为pageSize
|
|
||||||
total: records.length
|
|
||||||
};
|
|
||||||
};
|
|
||||||
const editRequest = async ({ form, row }: EditReq) => {
|
|
||||||
const target = _.find(records, (item) => {
|
|
||||||
return row.id === item.id;
|
|
||||||
});
|
|
||||||
_.merge(target, form);
|
|
||||||
return target;
|
|
||||||
};
|
|
||||||
const delRequest = async ({ row }: DelReq) => {
|
|
||||||
_.remove(records, (item) => {
|
|
||||||
return item.id === row.id;
|
|
||||||
});
|
|
||||||
};
|
|
||||||
const addRequest = async ({ form }: AddReq) => {
|
|
||||||
const maxRecord = _.maxBy(records, (item) => {
|
|
||||||
return item.id;
|
|
||||||
});
|
|
||||||
form.id = (maxRecord?.id || 0) + 1;
|
|
||||||
records.push(form);
|
|
||||||
return form;
|
|
||||||
};
|
|
||||||
//本地模拟后台crud接口方法 -----结束
|
|
||||||
|
|
||||||
return {
|
|
||||||
//自定义变量返回
|
|
||||||
customExport: {},
|
|
||||||
crudOptions: {
|
|
||||||
request: {
|
|
||||||
pageRequest,
|
|
||||||
addRequest,
|
|
||||||
editRequest,
|
|
||||||
delRequest
|
|
||||||
},
|
|
||||||
columns: {
|
|
||||||
name: {
|
|
||||||
title: "姓名",
|
|
||||||
type: "text",
|
|
||||||
search: { show: true },
|
|
||||||
column: {
|
|
||||||
resizable: true,
|
|
||||||
width: 200
|
|
||||||
}
|
|
||||||
},
|
|
||||||
type: {
|
|
||||||
title: "类型",
|
|
||||||
type: "dict-select",
|
|
||||||
dict: dict({
|
|
||||||
data: [
|
|
||||||
{ value: 1, label: "开始" },
|
|
||||||
{ value: 0, label: "停止" }
|
|
||||||
]
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
};
|
|
||||||
|
|
||||||
//此处为组件定义
|
|
||||||
export default defineComponent({
|
|
||||||
name: "FsCrudHelloWorld",
|
|
||||||
setup() {
|
|
||||||
// // crud组件的ref
|
|
||||||
// const crudRef: Ref = ref();
|
|
||||||
// // crud 配置的ref
|
|
||||||
// const crudBinding: Ref<CrudBinding> = ref();
|
|
||||||
// // 暴露的方法
|
|
||||||
// const { crudExpose } = useExpose({ crudRef, crudBinding });
|
|
||||||
// // 你的crud配置
|
|
||||||
// const { crudOptions, customExport } = createCrudOptions({ crudExpose, context });
|
|
||||||
// // 初始化crud配置
|
|
||||||
// const { resetCrudOptions, appendCrudBinding } = useCrud({ crudExpose, crudOptions });
|
|
||||||
|
|
||||||
// =======以上为fs的初始化代码=========
|
|
||||||
// =======你可以简写为下面这一行========
|
|
||||||
const { crudRef, crudBinding, crudExpose, context } = useFs({ createCrudOptions, context: {} });
|
|
||||||
|
|
||||||
// 页面打开后获取列表数据
|
|
||||||
onMounted(() => {
|
|
||||||
crudExpose.doRefresh();
|
|
||||||
});
|
|
||||||
return {
|
|
||||||
crudBinding,
|
|
||||||
crudRef
|
|
||||||
};
|
|
||||||
}
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
@ -1,42 +0,0 @@
|
||||||
import { requestForMock } from "/src/api/service";
|
|
||||||
const request = requestForMock;
|
|
||||||
const apiPrefix = "/mock/BasisI18n";
|
|
||||||
export function GetList(query: any) {
|
|
||||||
return request({
|
|
||||||
url: apiPrefix + "/page",
|
|
||||||
method: "get",
|
|
||||||
data: query
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
export function AddObj(obj: any) {
|
|
||||||
return request({
|
|
||||||
url: apiPrefix + "/add",
|
|
||||||
method: "post",
|
|
||||||
data: obj
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
export function UpdateObj(obj: any) {
|
|
||||||
return request({
|
|
||||||
url: apiPrefix + "/update",
|
|
||||||
method: "post",
|
|
||||||
data: obj
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
export function DelObj(id: any) {
|
|
||||||
return request({
|
|
||||||
url: apiPrefix + "/delete",
|
|
||||||
method: "post",
|
|
||||||
params: { id }
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
export function GetObj(id: any) {
|
|
||||||
return request({
|
|
||||||
url: apiPrefix + "/get",
|
|
||||||
method: "get",
|
|
||||||
params: { id }
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
@ -1,77 +0,0 @@
|
||||||
import * as api from "./api";
|
|
||||||
import { AddReq, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, dict, EditReq, UserPageQuery, UserPageRes } from "@fast-crud/fast-crud";
|
|
||||||
import { useI18n } from "vue-i18n";
|
|
||||||
|
|
||||||
export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOptionsRet {
|
|
||||||
const pageRequest = async (query: UserPageQuery): Promise<UserPageRes> => {
|
|
||||||
return await api.GetList(query);
|
|
||||||
};
|
|
||||||
const editRequest = async ({ form, row }: EditReq) => {
|
|
||||||
if (form.id == null) {
|
|
||||||
form.id = row.id;
|
|
||||||
}
|
|
||||||
return await api.UpdateObj(form);
|
|
||||||
};
|
|
||||||
const delRequest = async ({ row }: DelReq) => {
|
|
||||||
return await api.DelObj(row.id);
|
|
||||||
};
|
|
||||||
|
|
||||||
const addRequest = async ({ form }: AddReq) => {
|
|
||||||
return await api.AddObj(form);
|
|
||||||
};
|
|
||||||
|
|
||||||
const { t } = useI18n();
|
|
||||||
|
|
||||||
return {
|
|
||||||
crudOptions: {
|
|
||||||
request: {
|
|
||||||
pageRequest,
|
|
||||||
addRequest,
|
|
||||||
editRequest,
|
|
||||||
delRequest
|
|
||||||
},
|
|
||||||
columns: {
|
|
||||||
id: {
|
|
||||||
title: "ID",
|
|
||||||
key: "id",
|
|
||||||
type: "number",
|
|
||||||
column: {
|
|
||||||
width: 50
|
|
||||||
},
|
|
||||||
form: {
|
|
||||||
show: false
|
|
||||||
}
|
|
||||||
},
|
|
||||||
name: {
|
|
||||||
title: t("app.crud.i18n.name"),
|
|
||||||
type: "text",
|
|
||||||
search: { show: true }
|
|
||||||
},
|
|
||||||
city: {
|
|
||||||
title: t("app.crud.i18n.city"),
|
|
||||||
type: "dict-select",
|
|
||||||
search: { show: true },
|
|
||||||
dict: dict({
|
|
||||||
value: "id",
|
|
||||||
label: "text",
|
|
||||||
data: [
|
|
||||||
{ id: "sz", text: "深圳", color: "success" },
|
|
||||||
{ id: "gz", text: "广州", color: "blue" },
|
|
||||||
{ id: "bj", text: "北京" },
|
|
||||||
{ id: "wh", text: "武汉" },
|
|
||||||
{ id: "sh", text: "上海" }
|
|
||||||
]
|
|
||||||
})
|
|
||||||
},
|
|
||||||
radio: {
|
|
||||||
title: t("app.crud.i18n.status"),
|
|
||||||
search: { show: true },
|
|
||||||
type: "dict-radio",
|
|
||||||
dict: dict({
|
|
||||||
url: "/mock/dicts/OpenStatusEnum?single"
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
@ -1,38 +0,0 @@
|
||||||
<template>
|
|
||||||
<fs-page>
|
|
||||||
<template #header>
|
|
||||||
<div class="title">CRUD示例【国际化】</div>
|
|
||||||
<div class="more">
|
|
||||||
<a target="_blank" href="http://fast-crud.docmirror.cn/guide/start/i18n.html">文档</a>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<fs-crud ref="crudRef" v-bind="crudBinding">
|
|
||||||
<template #actionbar-right>
|
|
||||||
<a-alert class="ml-1" type="warning" message="右上角切换语言查看效果" />
|
|
||||||
</template>
|
|
||||||
</fs-crud>
|
|
||||||
</fs-page>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script lang="ts">
|
|
||||||
import { defineComponent, onMounted } from "vue";
|
|
||||||
import createCrudOptions from "./crud.js";
|
|
||||||
import { useFs } from "@fast-crud/fast-crud";
|
|
||||||
|
|
||||||
export default defineComponent({
|
|
||||||
name: "BasisI18n",
|
|
||||||
setup() {
|
|
||||||
const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions });
|
|
||||||
|
|
||||||
// 页面打开后获取列表数据
|
|
||||||
onMounted(() => {
|
|
||||||
crudExpose.doRefresh();
|
|
||||||
});
|
|
||||||
|
|
||||||
return {
|
|
||||||
crudBinding,
|
|
||||||
crudRef
|
|
||||||
};
|
|
||||||
}
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
@ -1,25 +0,0 @@
|
||||||
import mockUtil from "/src/mock/base";
|
|
||||||
const options: any = {
|
|
||||||
name: "BasisI18n",
|
|
||||||
idGenerator: 0
|
|
||||||
};
|
|
||||||
const list = [
|
|
||||||
{
|
|
||||||
radio: "1",
|
|
||||||
name: "张三",
|
|
||||||
city: "sz"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
radio: "2",
|
|
||||||
name: "李四",
|
|
||||||
city: "gz"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
radio: "0",
|
|
||||||
name: "王五",
|
|
||||||
city: "sh"
|
|
||||||
}
|
|
||||||
];
|
|
||||||
options.list = list;
|
|
||||||
const mock = mockUtil.buildMock(options);
|
|
||||||
export default mock;
|
|
||||||
|
|
@ -1,42 +0,0 @@
|
||||||
import { requestForMock } from "/src/api/service";
|
|
||||||
const request = requestForMock;
|
|
||||||
const apiPrefix = "/mock/BasisLayoutCard";
|
|
||||||
export function GetList(query: any) {
|
|
||||||
return request({
|
|
||||||
url: apiPrefix + "/page",
|
|
||||||
method: "get",
|
|
||||||
data: query
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
export function AddObj(obj: any) {
|
|
||||||
return request({
|
|
||||||
url: apiPrefix + "/add",
|
|
||||||
method: "post",
|
|
||||||
data: obj
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
export function UpdateObj(obj: any) {
|
|
||||||
return request({
|
|
||||||
url: apiPrefix + "/update",
|
|
||||||
method: "post",
|
|
||||||
data: obj
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
export function DelObj(id: any) {
|
|
||||||
return request({
|
|
||||||
url: apiPrefix + "/delete",
|
|
||||||
method: "post",
|
|
||||||
params: { id }
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
export function GetObj(id: any) {
|
|
||||||
return request({
|
|
||||||
url: apiPrefix + "/get",
|
|
||||||
method: "get",
|
|
||||||
params: { id }
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
@ -1,127 +0,0 @@
|
||||||
import * as api from "./api";
|
|
||||||
import { AddReq, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, dict, EditReq, UserPageQuery, UserPageRes } from "@fast-crud/fast-crud";
|
|
||||||
import { computed } from "vue";
|
|
||||||
|
|
||||||
export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOptionsRet {
|
|
||||||
const pageRequest = async (query: UserPageQuery): Promise<UserPageRes> => {
|
|
||||||
return await api.GetList(query);
|
|
||||||
};
|
|
||||||
const editRequest = async ({ form, row }: EditReq) => {
|
|
||||||
if (form.id == null) {
|
|
||||||
form.id = row.id;
|
|
||||||
}
|
|
||||||
return await api.UpdateObj(form);
|
|
||||||
};
|
|
||||||
const delRequest = async ({ row }: DelReq) => {
|
|
||||||
return await api.DelObj(row.id);
|
|
||||||
};
|
|
||||||
|
|
||||||
const addRequest = async ({ form }: AddReq) => {
|
|
||||||
return await api.AddObj(form);
|
|
||||||
};
|
|
||||||
|
|
||||||
const cityDictRef = dict({
|
|
||||||
value: "id",
|
|
||||||
label: "text",
|
|
||||||
data: [
|
|
||||||
{ id: "sz", text: "深圳", color: "success" },
|
|
||||||
{ id: "gz", text: "广州", color: "blue" },
|
|
||||||
{ id: "bj", text: "北京" },
|
|
||||||
{ id: "wh", text: "武汉" },
|
|
||||||
{ id: "sh", text: "上海" }
|
|
||||||
]
|
|
||||||
});
|
|
||||||
return {
|
|
||||||
crudOptions: {
|
|
||||||
container: {
|
|
||||||
is: "fs-layout-card"
|
|
||||||
},
|
|
||||||
request: {
|
|
||||||
pageRequest,
|
|
||||||
addRequest,
|
|
||||||
editRequest,
|
|
||||||
delRequest
|
|
||||||
},
|
|
||||||
actionbar: {
|
|
||||||
show: true
|
|
||||||
},
|
|
||||||
toolbar: {
|
|
||||||
show: true
|
|
||||||
},
|
|
||||||
search: {
|
|
||||||
buttons: {
|
|
||||||
actionbarToggle: {
|
|
||||||
text: "actionbar/toolbar显隐",
|
|
||||||
show: true,
|
|
||||||
click() {
|
|
||||||
crudExpose.crudBinding.value.actionbar.show = !crudExpose.crudBinding.value.actionbar.show;
|
|
||||||
crudExpose.crudBinding.value.toolbar.show = !crudExpose.crudBinding.value.toolbar.show;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
tabs: {
|
|
||||||
name: "city",
|
|
||||||
show: true,
|
|
||||||
type: "card",
|
|
||||||
value: "id",
|
|
||||||
label: "text",
|
|
||||||
options: computed(() => {
|
|
||||||
return cityDictRef.data;
|
|
||||||
})
|
|
||||||
},
|
|
||||||
columns: {
|
|
||||||
id: {
|
|
||||||
title: "ID",
|
|
||||||
key: "id",
|
|
||||||
type: "number",
|
|
||||||
column: {
|
|
||||||
width: 50
|
|
||||||
},
|
|
||||||
form: {
|
|
||||||
show: false
|
|
||||||
}
|
|
||||||
},
|
|
||||||
name: {
|
|
||||||
title: "姓名",
|
|
||||||
type: "text",
|
|
||||||
search: { show: true }
|
|
||||||
},
|
|
||||||
city: {
|
|
||||||
title: "城市",
|
|
||||||
type: "dict-select",
|
|
||||||
search: { show: true },
|
|
||||||
dict: cityDictRef
|
|
||||||
},
|
|
||||||
radio: {
|
|
||||||
title: "单选",
|
|
||||||
search: { show: true },
|
|
||||||
type: "dict-radio",
|
|
||||||
dict: dict({
|
|
||||||
url: "/mock/dicts/OpenStatusEnum?single"
|
|
||||||
})
|
|
||||||
},
|
|
||||||
text: {
|
|
||||||
title: "text",
|
|
||||||
type: "text",
|
|
||||||
search: { show: true }
|
|
||||||
},
|
|
||||||
text2: {
|
|
||||||
title: "text2",
|
|
||||||
type: "text",
|
|
||||||
search: { show: true }
|
|
||||||
},
|
|
||||||
text3: {
|
|
||||||
title: "text3",
|
|
||||||
type: "text",
|
|
||||||
search: { show: true }
|
|
||||||
},
|
|
||||||
text4: {
|
|
||||||
title: "text4",
|
|
||||||
type: "text",
|
|
||||||
search: { show: true }
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
@ -1,48 +0,0 @@
|
||||||
<template>
|
|
||||||
<fs-page class="page-layout-card">
|
|
||||||
<template #header>
|
|
||||||
<div class="title">Card布局</div>
|
|
||||||
<div class="more">
|
|
||||||
<a target="_blank" href="http://fast-crud.docmirror.cn/guide/advance/layout.html">文档</a>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<fs-crud ref="crudRef" v-bind="crudBinding">
|
|
||||||
<template #actionbar-right>
|
|
||||||
<a-button type="danger">actionbar-right插槽</a-button>
|
|
||||||
</template>
|
|
||||||
</fs-crud>
|
|
||||||
</fs-page>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script lang="ts">
|
|
||||||
import { defineComponent, onMounted } from "vue";
|
|
||||||
import createCrudOptions from "./crud";
|
|
||||||
import { useFs } from "@fast-crud/fast-crud";
|
|
||||||
|
|
||||||
export default defineComponent({
|
|
||||||
name: "BasisLayoutCard",
|
|
||||||
setup() {
|
|
||||||
const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions });
|
|
||||||
|
|
||||||
// 页面打开后获取列表数据
|
|
||||||
onMounted(() => {
|
|
||||||
crudExpose.doRefresh();
|
|
||||||
});
|
|
||||||
|
|
||||||
return {
|
|
||||||
crudBinding,
|
|
||||||
crudRef
|
|
||||||
};
|
|
||||||
}
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="less">
|
|
||||||
.page-layout-card {
|
|
||||||
background-color: #eee;
|
|
||||||
|
|
||||||
.fs-page-header {
|
|
||||||
background-color: #fff;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,25 +0,0 @@
|
||||||
import mockUtil from "/src/mock/base";
|
|
||||||
const options: any = {
|
|
||||||
name: "BasisLayoutCard",
|
|
||||||
idGenerator: 0
|
|
||||||
};
|
|
||||||
const list = [
|
|
||||||
{
|
|
||||||
radio: "1",
|
|
||||||
name: "张三",
|
|
||||||
city: "sz"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
radio: "2",
|
|
||||||
name: "李四",
|
|
||||||
city: "gz"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
radio: "0",
|
|
||||||
name: "王五",
|
|
||||||
city: "sh"
|
|
||||||
}
|
|
||||||
];
|
|
||||||
options.list = list;
|
|
||||||
const mock = mockUtil.buildMock(options);
|
|
||||||
export default mock;
|
|
||||||
|
|
@ -1,42 +0,0 @@
|
||||||
import { requestForMock } from "/src/api/service";
|
|
||||||
const request = requestForMock;
|
|
||||||
const apiPrefix = "/mock/BasisLayoutCustom";
|
|
||||||
export function GetList(query: any) {
|
|
||||||
return request({
|
|
||||||
url: apiPrefix + "/page",
|
|
||||||
method: "get",
|
|
||||||
data: query
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
export function AddObj(obj: any) {
|
|
||||||
return request({
|
|
||||||
url: apiPrefix + "/add",
|
|
||||||
method: "post",
|
|
||||||
data: obj
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
export function UpdateObj(obj: any) {
|
|
||||||
return request({
|
|
||||||
url: apiPrefix + "/update",
|
|
||||||
method: "post",
|
|
||||||
data: obj
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
export function DelObj(id: any) {
|
|
||||||
return request({
|
|
||||||
url: apiPrefix + "/delete",
|
|
||||||
method: "post",
|
|
||||||
params: { id }
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
export function GetObj(id: any) {
|
|
||||||
return request({
|
|
||||||
url: apiPrefix + "/get",
|
|
||||||
method: "get",
|
|
||||||
params: { id }
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
@ -1,83 +0,0 @@
|
||||||
import * as api from "./api";
|
|
||||||
import { AddReq, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, dict, EditReq, UserPageQuery, UserPageRes } from "@fast-crud/fast-crud";
|
|
||||||
import CustomLayout from "./custom-layout.vue";
|
|
||||||
import { shallowRef } from "vue";
|
|
||||||
export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOptionsRet {
|
|
||||||
const pageRequest = async (query: UserPageQuery): Promise<UserPageRes> => {
|
|
||||||
return await api.GetList(query);
|
|
||||||
};
|
|
||||||
const editRequest = async ({ form, row }: EditReq) => {
|
|
||||||
if (form.id == null) {
|
|
||||||
form.id = row.id;
|
|
||||||
}
|
|
||||||
return await api.UpdateObj(form);
|
|
||||||
};
|
|
||||||
const delRequest = async ({ row }: DelReq) => {
|
|
||||||
return await api.DelObj(row.id);
|
|
||||||
};
|
|
||||||
|
|
||||||
const addRequest = async ({ form }: AddReq) => {
|
|
||||||
return await api.AddObj(form);
|
|
||||||
};
|
|
||||||
|
|
||||||
return {
|
|
||||||
crudOptions: {
|
|
||||||
container: {
|
|
||||||
is: shallowRef(CustomLayout) //可以将自定义布局组件全局注册，这里只需要配置name即可
|
|
||||||
},
|
|
||||||
tabs: {
|
|
||||||
show: true,
|
|
||||||
name: "city",
|
|
||||||
type: "card"
|
|
||||||
} as any,
|
|
||||||
request: {
|
|
||||||
pageRequest,
|
|
||||||
addRequest,
|
|
||||||
editRequest,
|
|
||||||
delRequest
|
|
||||||
},
|
|
||||||
columns: {
|
|
||||||
id: {
|
|
||||||
title: "ID",
|
|
||||||
key: "id",
|
|
||||||
type: "number",
|
|
||||||
column: {
|
|
||||||
width: 50
|
|
||||||
},
|
|
||||||
form: {
|
|
||||||
show: false
|
|
||||||
}
|
|
||||||
},
|
|
||||||
name: {
|
|
||||||
title: "姓名",
|
|
||||||
type: "text",
|
|
||||||
search: { show: true }
|
|
||||||
},
|
|
||||||
city: {
|
|
||||||
title: "城市",
|
|
||||||
type: "dict-select",
|
|
||||||
search: { show: true },
|
|
||||||
dict: dict({
|
|
||||||
value: "id",
|
|
||||||
label: "text",
|
|
||||||
data: [
|
|
||||||
{ id: "sz", text: "深圳", color: "success" },
|
|
||||||
{ id: "gz", text: "广州", color: "blue" },
|
|
||||||
{ id: "bj", text: "北京" },
|
|
||||||
{ id: "wh", text: "武汉" },
|
|
||||||
{ id: "sh", text: "上海" }
|
|
||||||
]
|
|
||||||
})
|
|
||||||
},
|
|
||||||
radio: {
|
|
||||||
title: "单选",
|
|
||||||
search: { show: false },
|
|
||||||
type: "dict-radio",
|
|
||||||
dict: dict({
|
|
||||||
url: "/mock/dicts/OpenStatusEnum?single"
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
@ -1,81 +0,0 @@
|
||||||
<template>
|
|
||||||
<div class="custom-layout">
|
|
||||||
<div class="layout-header">
|
|
||||||
<!-- ↓↓↓↓↓ 关键插槽：查询 ↓↓↓↓ -->
|
|
||||||
<slot name="search"></slot>
|
|
||||||
<!-- ↓↓↓↓↓ 关键插槽：工具条 ↓↓↓↓ -->
|
|
||||||
<slot name="toolbar"></slot>
|
|
||||||
</div>
|
|
||||||
<div class="layout-top">
|
|
||||||
<!-- ↓↓↓↓↓ 关键插槽：动作条 ↓↓↓↓ -->
|
|
||||||
<slot name="actionbar"></slot>
|
|
||||||
|
|
||||||
<slot name="tabs"></slot>
|
|
||||||
<!-- ↓↓↓↓↓ 上翻页条 ↓↓↓↓ -->
|
|
||||||
<slot name="pagination"></slot>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 高度需要自适应撑开，可以通过flex:1 -->
|
|
||||||
<div class="layout-body">
|
|
||||||
<!-- 默认插槽 -->
|
|
||||||
<slot></slot>
|
|
||||||
<!-- ↓↓↓↓↓ 关键插槽：表格 ↓↓↓↓ -->
|
|
||||||
<slot name="table"></slot>
|
|
||||||
|
|
||||||
<!-- ↓↓↓↓↓ 关键插槽：表单 ↓↓↓↓ -->
|
|
||||||
<slot name="form"></slot>
|
|
||||||
</div>
|
|
||||||
<div class="layout-footer">
|
|
||||||
<!-- ↓↓↓↓↓ 关键插槽：分页条 ↓↓↓↓ -->
|
|
||||||
<slot name="pagination"></slot>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script lang="ts">
|
|
||||||
import { defineComponent } from "vue";
|
|
||||||
/**
|
|
||||||
* 自定义布局
|
|
||||||
*/
|
|
||||||
export default defineComponent({
|
|
||||||
name: "CustomLayout"
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="less">
|
|
||||||
.custom-layout {
|
|
||||||
height: 100%;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
|
|
||||||
.layout-header {
|
|
||||||
padding: 10px 10px 5px 10px;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
}
|
|
||||||
.layout-top {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
padding: 5px 10px 5px 10px;
|
|
||||||
}
|
|
||||||
.layout-body {
|
|
||||||
flex: 1; //重要，自适应撑开高度，表格固定表头必须
|
|
||||||
overflow-y: auto;
|
|
||||||
}
|
|
||||||
.fs-crud-actionbar {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
.fs-crud-pagination {
|
|
||||||
text-align: right;
|
|
||||||
padding: 5px 10px 5px 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.fs-tabs-filter {
|
|
||||||
flex: 1;
|
|
||||||
margin-left: 10px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,42 +0,0 @@
|
||||||
<template>
|
|
||||||
<fs-page class="page-layout-custom">
|
|
||||||
<template #header>
|
|
||||||
<div class="title">
|
|
||||||
自定义布局
|
|
||||||
<span class="sub">通过自定义container.is可以自定义布局，甚至可以支持上下两个翻页条</span>
|
|
||||||
</div>
|
|
||||||
<div class="more">
|
|
||||||
<a target="_blank" href="http://fast-crud.docmirror.cn/guide/advance/layout.html">文档</a>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<fs-crud ref="crudRef" v-bind="crudBinding"> </fs-crud>
|
|
||||||
</fs-page>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script lang="ts">
|
|
||||||
import { defineComponent, onMounted } from "vue";
|
|
||||||
import { useFs } from "@fast-crud/fast-crud";
|
|
||||||
import createCrudOptions from "./crud.js";
|
|
||||||
|
|
||||||
export default defineComponent({
|
|
||||||
name: "BasisLayoutCustom",
|
|
||||||
setup() {
|
|
||||||
const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions });
|
|
||||||
|
|
||||||
// 页面打开后获取列表数据
|
|
||||||
onMounted(() => {
|
|
||||||
crudExpose.doRefresh();
|
|
||||||
});
|
|
||||||
|
|
||||||
return {
|
|
||||||
crudBinding,
|
|
||||||
crudRef
|
|
||||||
};
|
|
||||||
}
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="less">
|
|
||||||
.page-layout-custom {
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,25 +0,0 @@
|
||||||
import mockUtil from "/src/mock/base";
|
|
||||||
const options: any = {
|
|
||||||
name: "BasisLayoutCustom",
|
|
||||||
idGenerator: 0
|
|
||||||
};
|
|
||||||
const list = [
|
|
||||||
{
|
|
||||||
radio: "1",
|
|
||||||
name: "张三",
|
|
||||||
city: "sz"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
radio: "2",
|
|
||||||
name: "李四",
|
|
||||||
city: "gz"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
radio: "0",
|
|
||||||
name: "王五",
|
|
||||||
city: "sh"
|
|
||||||
}
|
|
||||||
];
|
|
||||||
options.list = list;
|
|
||||||
const mock = mockUtil.buildMock(options);
|
|
||||||
export default mock;
|
|
||||||
|
|
@ -1,50 +0,0 @@
|
||||||
import { requestForMock } from "/src/api/service";
|
|
||||||
const request = requestForMock;
|
|
||||||
const apiPrefix = "/mock/BasisPlugin";
|
|
||||||
export function GetList(query: any) {
|
|
||||||
return request({
|
|
||||||
url: apiPrefix + "/page",
|
|
||||||
method: "get",
|
|
||||||
data: query
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
export function AddObj(obj: any) {
|
|
||||||
return request({
|
|
||||||
url: apiPrefix + "/add",
|
|
||||||
method: "post",
|
|
||||||
data: obj
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
export function UpdateObj(obj: any) {
|
|
||||||
return request({
|
|
||||||
url: apiPrefix + "/update",
|
|
||||||
method: "post",
|
|
||||||
data: obj
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
export function DelObj(id: any) {
|
|
||||||
return request({
|
|
||||||
url: apiPrefix + "/delete",
|
|
||||||
method: "post",
|
|
||||||
params: { id }
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
export function GetObj(id: any) {
|
|
||||||
return request({
|
|
||||||
url: apiPrefix + "/get",
|
|
||||||
method: "get",
|
|
||||||
params: { id }
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
export function BatchDelete(ids: any) {
|
|
||||||
return request({
|
|
||||||
url: apiPrefix + "/batchDelete",
|
|
||||||
method: "post",
|
|
||||||
data: { ids }
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
@ -1,72 +0,0 @@
|
||||||
import * as api from "./api";
|
|
||||||
import { AddReq, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, EditReq, UserPageQuery, UserPageRes, utils } from "@fast-crud/fast-crud";
|
|
||||||
import { ref } from "vue";
|
|
||||||
|
|
||||||
export default function ({ crudExpose, context }: CreateCrudOptionsProps): CreateCrudOptionsRet {
|
|
||||||
const pageRequest = async (query: UserPageQuery): Promise<UserPageRes> => {
|
|
||||||
return await api.GetList(query);
|
|
||||||
};
|
|
||||||
const editRequest = async ({ form, row }: EditReq) => {
|
|
||||||
if (form.id == null) {
|
|
||||||
form.id = row.id;
|
|
||||||
}
|
|
||||||
return await api.UpdateObj(form);
|
|
||||||
};
|
|
||||||
const delRequest = async ({ row }: DelReq) => {
|
|
||||||
return await api.DelObj(row.id);
|
|
||||||
};
|
|
||||||
|
|
||||||
const addRequest = async ({ form }: AddReq) => {
|
|
||||||
return await api.AddObj(form);
|
|
||||||
};
|
|
||||||
|
|
||||||
const selectedRowKeys: Ref<any[]> = ref([]);
|
|
||||||
context.selectedRowKeys = selectedRowKeys;
|
|
||||||
|
|
||||||
return {
|
|
||||||
crudOptions: {
|
|
||||||
settings: {
|
|
||||||
plugins: {
|
|
||||||
//这里使用行选择插件，生成行选择crudOptions配置，最终会与crudOptions合并
|
|
||||||
rowSelection: {
|
|
||||||
enabled: true,
|
|
||||||
order: -2,
|
|
||||||
before: true,
|
|
||||||
// handle: (pluginProps,useCrudProps)=>CrudOptions,
|
|
||||||
props: {
|
|
||||||
multiple: true,
|
|
||||||
crossPage: true,
|
|
||||||
selectedRowKeys,
|
|
||||||
onSelectedChanged(selected) {
|
|
||||||
utils.logger.info("已选择变化：", selected);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
request: {
|
|
||||||
pageRequest,
|
|
||||||
addRequest,
|
|
||||||
editRequest,
|
|
||||||
delRequest
|
|
||||||
},
|
|
||||||
columns: {
|
|
||||||
id: {
|
|
||||||
title: "ID",
|
|
||||||
type: "number",
|
|
||||||
column: {
|
|
||||||
width: 50
|
|
||||||
},
|
|
||||||
form: {
|
|
||||||
show: false
|
|
||||||
}
|
|
||||||
},
|
|
||||||
text: {
|
|
||||||
title: "Text",
|
|
||||||
type: "text",
|
|
||||||
search: { show: true }
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
@ -1,63 +0,0 @@
|
||||||
<template>
|
|
||||||
<fs-page>
|
|
||||||
<template #header>
|
|
||||||
<div class="title">
|
|
||||||
CrudOptionsPlugin
|
|
||||||
<span class="sub">用于合并CrudOptions，做一些可配置化的公共参数；此处演示使用rowSelectionPlugin生成行选择配置,支持跨页选择</span>
|
|
||||||
</div>
|
|
||||||
<div class="more">
|
|
||||||
<a target="_blank" href="http://fast-crud.docmirror.cn/api/crud-options/settings.html#plugins">文档</a>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<fs-crud ref="crudRef" v-bind="crudBinding">
|
|
||||||
<template #pagination-left>
|
|
||||||
<a-tooltip title="批量删除">
|
|
||||||
<fs-button icon="DeleteOutlined" @click="handleBatchDelete"></fs-button>
|
|
||||||
</a-tooltip>
|
|
||||||
</template>
|
|
||||||
</fs-crud>
|
|
||||||
</fs-page>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script lang="ts">
|
|
||||||
import { defineComponent, onMounted } from "vue";
|
|
||||||
import createCrudOptions from "./crud";
|
|
||||||
import { useFs } from "@fast-crud/fast-crud";
|
|
||||||
import { message, Modal } from "ant-design-vue";
|
|
||||||
import { BatchDelete } from "./api";
|
|
||||||
|
|
||||||
export default defineComponent({
|
|
||||||
name: "BasisPlugin",
|
|
||||||
setup() {
|
|
||||||
const { crudBinding, crudRef, crudExpose, context } = useFs({ createCrudOptions });
|
|
||||||
const selectedRowKeys = context.selectedRowKeys;
|
|
||||||
// 页面打开后获取列表数据
|
|
||||||
onMounted(() => {
|
|
||||||
crudExpose.doRefresh();
|
|
||||||
});
|
|
||||||
|
|
||||||
const handleBatchDelete = () => {
|
|
||||||
if (selectedRowKeys.value?.length > 0) {
|
|
||||||
Modal.confirm({
|
|
||||||
title: "确认",
|
|
||||||
content: `确定要批量删除这${selectedRowKeys.value.length}条记录吗`,
|
|
||||||
async onOk() {
|
|
||||||
await BatchDelete(selectedRowKeys.value);
|
|
||||||
message.info("删除成功");
|
|
||||||
crudExpose.doRefresh();
|
|
||||||
selectedRowKeys.value = [];
|
|
||||||
}
|
|
||||||
});
|
|
||||||
} else {
|
|
||||||
message.error("请先勾选记录");
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
return {
|
|
||||||
crudBinding,
|
|
||||||
crudRef,
|
|
||||||
handleBatchDelete
|
|
||||||
};
|
|
||||||
}
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
@ -1,22 +0,0 @@
|
||||||
import mockUtil from "/src/mock/base";
|
|
||||||
const options: any = {
|
|
||||||
name: "BasisPlugin",
|
|
||||||
idGenerator: 0
|
|
||||||
};
|
|
||||||
const list = [
|
|
||||||
{
|
|
||||||
text: "张三",
|
|
||||||
radio: "1"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
text: "李四",
|
|
||||||
radio: "2"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
text: "王五",
|
|
||||||
radio: "0"
|
|
||||||
}
|
|
||||||
];
|
|
||||||
options.list = list;
|
|
||||||
const mock = mockUtil.buildMock(options);
|
|
||||||
export default mock;
|
|
||||||
|
|
@ -1,42 +0,0 @@
|
||||||
import { requestForMock } from "/src/api/service";
|
|
||||||
const request = requestForMock;
|
|
||||||
const apiPrefix = "/mock/BasisValueChange";
|
|
||||||
export function GetList(query: any) {
|
|
||||||
return request({
|
|
||||||
url: apiPrefix + "/page",
|
|
||||||
method: "get",
|
|
||||||
data: query
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
export function AddObj(obj: any) {
|
|
||||||
return request({
|
|
||||||
url: apiPrefix + "/add",
|
|
||||||
method: "post",
|
|
||||||
data: obj
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
export function UpdateObj(obj: any) {
|
|
||||||
return request({
|
|
||||||
url: apiPrefix + "/update",
|
|
||||||
method: "post",
|
|
||||||
data: obj
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
export function DelObj(id: any) {
|
|
||||||
return request({
|
|
||||||
url: apiPrefix + "/delete",
|
|
||||||
method: "post",
|
|
||||||
params: { id }
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
export function GetObj(id: any) {
|
|
||||||
return request({
|
|
||||||
url: apiPrefix + "/get",
|
|
||||||
method: "get",
|
|
||||||
params: { id }
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
@ -1,56 +0,0 @@
|
||||||
import * as api from "./api";
|
|
||||||
import { AddReq, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, dict, EditReq, UserPageQuery, UserPageRes } from "@fast-crud/fast-crud";
|
|
||||||
|
|
||||||
export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOptionsRet {
|
|
||||||
const pageRequest = async (query: UserPageQuery): Promise<UserPageRes> => {
|
|
||||||
return await api.GetList(query);
|
|
||||||
};
|
|
||||||
const editRequest = async ({ form, row }: EditReq) => {
|
|
||||||
if (form.id == null) {
|
|
||||||
form.id = row.id;
|
|
||||||
}
|
|
||||||
return await api.UpdateObj(form);
|
|
||||||
};
|
|
||||||
const delRequest = async ({ row }: DelReq) => {
|
|
||||||
return await api.DelObj(row.id);
|
|
||||||
};
|
|
||||||
|
|
||||||
const addRequest = async ({ form }: AddReq) => {
|
|
||||||
return await api.AddObj(form);
|
|
||||||
};
|
|
||||||
|
|
||||||
return {
|
|
||||||
output: {},
|
|
||||||
crudOptions: {
|
|
||||||
request: {
|
|
||||||
pageRequest,
|
|
||||||
addRequest,
|
|
||||||
editRequest,
|
|
||||||
delRequest
|
|
||||||
},
|
|
||||||
columns: {
|
|
||||||
id: {
|
|
||||||
title: "ID",
|
|
||||||
key: "id",
|
|
||||||
type: "number",
|
|
||||||
column: {
|
|
||||||
width: 50
|
|
||||||
},
|
|
||||||
form: {
|
|
||||||
show: false
|
|
||||||
}
|
|
||||||
},
|
|
||||||
switch: {
|
|
||||||
title: "开关",
|
|
||||||
type: "dict-switch",
|
|
||||||
dict: dict({
|
|
||||||
data: [
|
|
||||||
{ value: true, label: "开启" },
|
|
||||||
{ value: false, label: "关闭" }
|
|
||||||
]
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
@ -1,52 +0,0 @@
|
||||||
<template>
|
|
||||||
<fs-page>
|
|
||||||
<template #header>
|
|
||||||
<div class="title">
|
|
||||||
重置CrudOptions
|
|
||||||
<span class="sub">重置CrudOptions,演示2秒后追加一个字段</span>
|
|
||||||
</div>
|
|
||||||
<div class="more">
|
|
||||||
<a target="_blank" href="http://fast-crud.docmirror.cn/api/use.html">文档</a>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<fs-crud ref="crudRef" v-bind="crudBinding"> </fs-crud>
|
|
||||||
</fs-page>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script lang="ts">
|
|
||||||
import { defineComponent, onMounted } from "vue";
|
|
||||||
import { CrudOptions, DynamicType, useFs, UseFsProps } from "@fast-crud/fast-crud";
|
|
||||||
import createCrudOptions from "./crud.js";
|
|
||||||
import _ from "lodash-es";
|
|
||||||
export default defineComponent({
|
|
||||||
name: "BasisReset",
|
|
||||||
setup() {
|
|
||||||
const { crudBinding, crudRef, crudExpose, context, crudOptions, resetCrudOptions, appendBindingOptions } = useFs({ createCrudOptions, context: { text: 111 } });
|
|
||||||
|
|
||||||
setTimeout(() => {
|
|
||||||
//合并新的crudOptions
|
|
||||||
const newOptions: DynamicType<CrudOptions> = _.merge(crudOptions, {
|
|
||||||
columns: {
|
|
||||||
text: {
|
|
||||||
title: "追加字段",
|
|
||||||
type: "text"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
//重置crudBinding
|
|
||||||
resetCrudOptions(newOptions);
|
|
||||||
crudExpose.doRefresh();
|
|
||||||
}, 2000);
|
|
||||||
|
|
||||||
// 页面打开后获取列表数据
|
|
||||||
onMounted(() => {
|
|
||||||
crudExpose.doRefresh();
|
|
||||||
});
|
|
||||||
|
|
||||||
return {
|
|
||||||
crudBinding,
|
|
||||||
crudRef
|
|
||||||
};
|
|
||||||
}
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
@ -1,23 +0,0 @@
|
||||||
// @ts-ignore
|
|
||||||
import mockUtil from "/src/mock/base";
|
|
||||||
const options: any = {
|
|
||||||
name: "BasisValueChange",
|
|
||||||
idGenerator: 0
|
|
||||||
};
|
|
||||||
const list = [
|
|
||||||
{
|
|
||||||
switch: true,
|
|
||||||
text: "1111"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
switch: true,
|
|
||||||
text: "2222"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
switch: true,
|
|
||||||
text: "3333"
|
|
||||||
}
|
|
||||||
];
|
|
||||||
options.list = list;
|
|
||||||
const mock = mockUtil.buildMock(options);
|
|
||||||
export default mock;
|
|
||||||
|
|
@ -1,54 +0,0 @@
|
||||||
//@ts-ignore
|
|
||||||
import { requestForMock } from "/src/api/service";
|
|
||||||
const request = requestForMock;
|
|
||||||
const apiPrefix = "/mock/FsCrudFirst";
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 定义行数据模型
|
|
||||||
*/
|
|
||||||
export type TsTestRow = {
|
|
||||||
id?: number;
|
|
||||||
name?: string;
|
|
||||||
type?: number;
|
|
||||||
compute?: string;
|
|
||||||
};
|
|
||||||
|
|
||||||
export function GetList(query: TsTestRow) {
|
|
||||||
return request({
|
|
||||||
url: apiPrefix + "/page",
|
|
||||||
method: "get",
|
|
||||||
data: query
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
export function AddObj(obj: TsTestRow) {
|
|
||||||
return request({
|
|
||||||
url: apiPrefix + "/add",
|
|
||||||
method: "post",
|
|
||||||
data: obj
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
export function UpdateObj(obj: TsTestRow) {
|
|
||||||
return request({
|
|
||||||
url: apiPrefix + "/update",
|
|
||||||
method: "post",
|
|
||||||
data: obj
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
export function DelObj(id: any) {
|
|
||||||
return request({
|
|
||||||
url: apiPrefix + "/delete",
|
|
||||||
method: "post",
|
|
||||||
params: { id }
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
export function GetObj(id: any) {
|
|
||||||
return request({
|
|
||||||
url: apiPrefix + "/get",
|
|
||||||
method: "get",
|
|
||||||
params: { id }
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
@ -1,79 +0,0 @@
|
||||||
import { AddReq, compute, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, dict, EditReq, UserPageQuery } from "@fast-crud/fast-crud";
|
|
||||||
import * as api from "./api";
|
|
||||||
import { TsTestRow } from "./api";
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 定义context参数类型
|
|
||||||
*/
|
|
||||||
export type TsTestContext = {
|
|
||||||
test?: number;
|
|
||||||
};
|
|
||||||
export default function ({ crudExpose, context }: CreateCrudOptionsProps<TsTestRow, TsTestContext>): CreateCrudOptionsRet<TsTestRow> {
|
|
||||||
context.test = 111;
|
|
||||||
return {
|
|
||||||
crudOptions: {
|
|
||||||
// 自定义crudOptions配置
|
|
||||||
columns: {
|
|
||||||
name: {
|
|
||||||
title: "姓名",
|
|
||||||
type: "text",
|
|
||||||
search: { show: true },
|
|
||||||
column: {
|
|
||||||
resizable: true,
|
|
||||||
width: 200
|
|
||||||
}
|
|
||||||
},
|
|
||||||
type: {
|
|
||||||
title: "类型",
|
|
||||||
type: "dict-select",
|
|
||||||
dict: dict({
|
|
||||||
data: [
|
|
||||||
{ value: 1, label: "开始", color: "green" },
|
|
||||||
{ value: 0, label: "停止", color: "red" }
|
|
||||||
]
|
|
||||||
}),
|
|
||||||
valueResolve: ({ form }) => {
|
|
||||||
console.log("valueResolve", form.type);
|
|
||||||
},
|
|
||||||
valueBuilder: ({ row }) => {
|
|
||||||
console.log("valueBuilder", row.type);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
compute: {
|
|
||||||
title: "compute",
|
|
||||||
type: "text",
|
|
||||||
form: {
|
|
||||||
component: {
|
|
||||||
show: compute(({ form }) => {
|
|
||||||
//自动带form ts提示
|
|
||||||
return form.type === 1;
|
|
||||||
}),
|
|
||||||
disabled: compute<boolean, TsTestRow>(({ form }) => {
|
|
||||||
//disabled属性 不在component配置的定义中，所有不带row、form的ts提示, 需要手动指定类型
|
|
||||||
return form.type === 1;
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
//两个字段
|
|
||||||
request: {
|
|
||||||
pageRequest: async (query: UserPageQuery) => {
|
|
||||||
return await api.GetList(query);
|
|
||||||
},
|
|
||||||
addRequest: async ({ form }: AddReq) => {
|
|
||||||
return await api.AddObj(form);
|
|
||||||
},
|
|
||||||
editRequest: async ({ form, row }: EditReq) => {
|
|
||||||
if (form.id == null) {
|
|
||||||
form.id = row.id;
|
|
||||||
}
|
|
||||||
return await api.UpdateObj(form);
|
|
||||||
},
|
|
||||||
delRequest: async ({ row }: DelReq) => {
|
|
||||||
return await api.DelObj(row.id);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
@ -1,47 +0,0 @@
|
||||||
<template>
|
|
||||||
<fs-page class="page-first">
|
|
||||||
<template #header>
|
|
||||||
<div class="title">Ts定义测试</div>
|
|
||||||
<div class="more"></div>
|
|
||||||
</template>
|
|
||||||
<fs-crud ref="crudRef" v-bind="crudBinding" />
|
|
||||||
</fs-page>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script lang="ts">
|
|
||||||
import { defineComponent, onMounted, ref } from "vue";
|
|
||||||
import { useFs, utils } from "@fast-crud/fast-crud";
|
|
||||||
import createCrudOptions, { TsTestContext } from "./crud";
|
|
||||||
import { TsTestRow } from "./api";
|
|
||||||
|
|
||||||
//此处为组件定义
|
|
||||||
export default defineComponent({
|
|
||||||
name: "FsCrudTsTest",
|
|
||||||
setup() {
|
|
||||||
// // crud组件的ref
|
|
||||||
// const crudRef: Ref = ref();
|
|
||||||
// // crud 配置的ref
|
|
||||||
// const crudBinding: Ref<CrudBinding> = ref();
|
|
||||||
// // 暴露的方法
|
|
||||||
// const { crudExpose } = useExpose({ crudRef, crudBinding });
|
|
||||||
// // 你的crud配置
|
|
||||||
// const { crudOptions, customExport } = createCrudOptions({ crudExpose, customValue });
|
|
||||||
// // 初始化crud配置
|
|
||||||
// const { resetCrudOptions, appendCrudBinding } = useCrud({ crudExpose, crudOptions });
|
|
||||||
|
|
||||||
// =======以上为fs的初始化代码=========
|
|
||||||
// =======你可以简写为下面这一行========
|
|
||||||
const { crudRef, crudBinding, crudExpose, context } = useFs<TsTestRow, TsTestContext>({ createCrudOptions, context: {} });
|
|
||||||
|
|
||||||
utils.logger.info("test", context.test);
|
|
||||||
// 页面打开后获取列表数据
|
|
||||||
onMounted(() => {
|
|
||||||
crudExpose.doRefresh();
|
|
||||||
});
|
|
||||||
return {
|
|
||||||
crudBinding,
|
|
||||||
crudRef
|
|
||||||
};
|
|
||||||
}
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
@ -1,22 +0,0 @@
|
||||||
// @ts-ignore
|
|
||||||
import mockUtil from "/src/mock/base";
|
|
||||||
const options: any = {
|
|
||||||
name: "FsCrudFirst",
|
|
||||||
idGenerator: 0
|
|
||||||
};
|
|
||||||
const list = [
|
|
||||||
{
|
|
||||||
name: "张三",
|
|
||||||
type: 1
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "李四",
|
|
||||||
type: 0
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "王五"
|
|
||||||
}
|
|
||||||
];
|
|
||||||
options.list = list;
|
|
||||||
const mock = mockUtil.buildMock(options);
|
|
||||||
export default mock;
|
|
||||||
|
|
@ -1,42 +0,0 @@
|
||||||
import { requestForMock } from "/src/api/service";
|
|
||||||
const request = requestForMock;
|
|
||||||
const apiPrefix = "/mock/BasisValueChange";
|
|
||||||
export function GetList(query: any) {
|
|
||||||
return request({
|
|
||||||
url: apiPrefix + "/page",
|
|
||||||
method: "get",
|
|
||||||
data: query
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
export function AddObj(obj: any) {
|
|
||||||
return request({
|
|
||||||
url: apiPrefix + "/add",
|
|
||||||
method: "post",
|
|
||||||
data: obj
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
export function UpdateObj(obj: any) {
|
|
||||||
return request({
|
|
||||||
url: apiPrefix + "/update",
|
|
||||||
method: "post",
|
|
||||||
data: obj
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
export function DelObj(id: any) {
|
|
||||||
return request({
|
|
||||||
url: apiPrefix + "/delete",
|
|
||||||
method: "post",
|
|
||||||
params: { id }
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
export function GetObj(id: any) {
|
|
||||||
return request({
|
|
||||||
url: apiPrefix + "/get",
|
|
||||||
method: "get",
|
|
||||||
params: { id }
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
@ -1,108 +0,0 @@
|
||||||
import * as api from "./api";
|
|
||||||
import { message } from "ant-design-vue";
|
|
||||||
import {
|
|
||||||
AddReq,
|
|
||||||
CreateCrudOptionsProps,
|
|
||||||
CreateCrudOptionsRet,
|
|
||||||
DelReq,
|
|
||||||
dict,
|
|
||||||
EditReq,
|
|
||||||
UserPageQuery,
|
|
||||||
UserPageRes,
|
|
||||||
utils,
|
|
||||||
ValueChangeContext
|
|
||||||
} from "@fast-crud/fast-crud";
|
|
||||||
|
|
||||||
export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOptionsRet {
|
|
||||||
const pageRequest = async (query: UserPageQuery): Promise<UserPageRes> => {
|
|
||||||
return await api.GetList(query);
|
|
||||||
};
|
|
||||||
const editRequest = async ({ form, row }: EditReq) => {
|
|
||||||
if (form.id == null) {
|
|
||||||
form.id = row.id;
|
|
||||||
}
|
|
||||||
return await api.UpdateObj(form);
|
|
||||||
};
|
|
||||||
const delRequest = async ({ row }: DelReq) => {
|
|
||||||
return await api.DelObj(row.id);
|
|
||||||
};
|
|
||||||
|
|
||||||
const addRequest = async ({ form }: AddReq) => {
|
|
||||||
return await api.AddObj(form);
|
|
||||||
};
|
|
||||||
|
|
||||||
return {
|
|
||||||
crudOptions: {
|
|
||||||
request: {
|
|
||||||
pageRequest,
|
|
||||||
addRequest,
|
|
||||||
editRequest,
|
|
||||||
delRequest
|
|
||||||
},
|
|
||||||
columns: {
|
|
||||||
id: {
|
|
||||||
title: "ID",
|
|
||||||
key: "id",
|
|
||||||
type: "number",
|
|
||||||
column: {
|
|
||||||
width: 50
|
|
||||||
},
|
|
||||||
form: {
|
|
||||||
show: false
|
|
||||||
}
|
|
||||||
},
|
|
||||||
switch: {
|
|
||||||
title: "开关",
|
|
||||||
type: "dict-switch",
|
|
||||||
dict: dict({
|
|
||||||
data: [
|
|
||||||
{ value: true, label: "开启" },
|
|
||||||
{ value: false, label: "关闭" }
|
|
||||||
]
|
|
||||||
}),
|
|
||||||
column: {
|
|
||||||
component: {
|
|
||||||
name: "fs-dict-switch",
|
|
||||||
vModel: "checked"
|
|
||||||
},
|
|
||||||
valueChange(context: ValueChangeContext) {
|
|
||||||
utils.logger.info("column value changed:", context);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
form: {
|
|
||||||
valueChange({ value, key, form }: ValueChangeContext) {
|
|
||||||
utils.logger.info("valueChanged,", key, value, form);
|
|
||||||
message.info(`valueChanged:${key}=${value}`);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
normal: {
|
|
||||||
title: "value-change",
|
|
||||||
type: "text",
|
|
||||||
form: {
|
|
||||||
valueChange({ value, key, form }: ValueChangeContext) {
|
|
||||||
utils.logger.info("valueChanged,", key, value, form);
|
|
||||||
message.info(`valueChanged:${key}=${value}`);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
immediate: {
|
|
||||||
title: "immediate",
|
|
||||||
type: "text",
|
|
||||||
search: {
|
|
||||||
show: true
|
|
||||||
},
|
|
||||||
form: {
|
|
||||||
valueChange: {
|
|
||||||
handle({ value, key, form, immediate }: ValueChangeContext) {
|
|
||||||
utils.logger.info("valueChange,", key, value, "isImmediate=", immediate);
|
|
||||||
message.info(`valueChanged:${key}=${value},isImmediate=${immediate}`);
|
|
||||||
},
|
|
||||||
immediate: true
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
@ -1,35 +0,0 @@
|
||||||
<template>
|
|
||||||
<fs-page>
|
|
||||||
<template #header>
|
|
||||||
<div class="title">ValueChange</div>
|
|
||||||
<div class="more">
|
|
||||||
<a target="_blank" href="http://fast-crud.docmirror.cn/api/crud-options/columns.html#valuebuilder与valueresolve">文档</a>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<fs-crud ref="crudRef" v-bind="crudBinding"> </fs-crud>
|
|
||||||
</fs-page>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script lang="ts">
|
|
||||||
import { defineComponent, onMounted } from "vue";
|
|
||||||
import { useFs } from "@fast-crud/fast-crud";
|
|
||||||
import createCrudOptions from "./crud.js";
|
|
||||||
|
|
||||||
export default defineComponent({
|
|
||||||
name: "BasisValueChange",
|
|
||||||
setup() {
|
|
||||||
const { crudBinding, crudRef, crudExpose, context } = useFs({ createCrudOptions });
|
|
||||||
|
|
||||||
// 页面打开后获取列表数据
|
|
||||||
onMounted(() => {
|
|
||||||
crudExpose.doRefresh();
|
|
||||||
});
|
|
||||||
|
|
||||||
return {
|
|
||||||
crudBinding,
|
|
||||||
crudRef,
|
|
||||||
...context
|
|
||||||
};
|
|
||||||
}
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue