github
/
certd
mirror of https://github.com/certd/certd
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

🔱: [client] sync upgrade with 4 commits [trident-sync] 

build: publish success
chore:
perf: 增加查看表单使用单元格组件示例

https://github.com/fast-crud/fast-crud/issues/219
pull/14/head
GitHub Actions Bot 2023-08-18 19:24:07 +00:00
parent 919eef55a1
commit 45215debcc
7 changed files with 502 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
packages/ui/certd-client/CHANGELOG.md
View File

@ -3,6 +3,16 @@
All notable changes to this project will be documented in this file.
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
## [1.16.4](https://github.com/fast-crud/fast-crud/compare/v1.16.3...v1.16.4) (2023-08-18)
**Note:** Version bump only for package @fast-crud/fs-admin-antdv
## [1.16.3](https://github.com/fast-crud/fast-crud/compare/v1.16.2...v1.16.3) (2023-08-18)
### Performance Improvements
* fs-button增加buttonProps参数，当fs-button的属性与x-button属性名重复时使用 ([5ca5333](https://github.com/fast-crud/fast-crud/commit/5ca53330f8bcf8d7acf4eb921aa92b83c41de52a))
## [1.16.2](https://github.com/fast-crud/fast-crud/compare/v1.16.1...v1.16.2) (2023-08-10)
**Note:** Version bump only for package @fast-crud/fs-admin-antdv

10
packages/ui/certd-client/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@fast-crud/fs-admin-antdv",
"version": "1.16.2",
"version": "1.16.4",
"private": true,
"scripts": {
"dev": "vite",
@ -26,10 +26,10 @@
"@ant-design/icons-vue": "^6.1.0",
"@aws-sdk/client-s3": "^3.383.0",
"@aws-sdk/s3-request-presigner": "^3.383.0",
"@fast-crud/fast-crud": "^1.16.2",
"@fast-crud/fast-extends": "^1.16.2",
"@fast-crud/ui-antdv": "^1.16.2",
"@fast-crud/ui-interface": "^1.16.2",
"@fast-crud/fast-crud": "^1.16.4",
"@fast-crud/fast-extends": "^1.16.4",
"@fast-crud/ui-antdv": "^1.16.4",
"@fast-crud/ui-interface": "^1.16.4",
"@iconify/iconify": "^3.1.1",
"@iconify/json": "^2.2.98",
"@purge-icons/generated": "^0.9.0",

6
packages/ui/certd-client/src/router/source/modules/crud.ts
View File

@ -430,6 +430,12 @@ export const crudResources = [
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"
}
]
},

42
packages/ui/certd-client/src/views/crud/form/view/api.ts Normal file
View File

@ -0,0 +1,42 @@
import { requestForMock } from "/src/api/service";
const request = requestForMock;
const apiPrefix = "/mock/FormView";
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 + "/info",
method: "get",
params: { id }
});
}

96
packages/ui/certd-client/src/views/crud/form/view/crud.tsx Normal file
View File

@ -0,0 +1,96 @@
import * as api from "./api";
import { AddReq, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, dict, EditReq, UserPageQuery, UserPageRes } from "@fast-crud/fast-crud";
export default function ({}: CreateCrudOptionsProps): CreateCrudOptionsRet {
const pageRequest = async (query: UserPageQuery): Promise<UserPageRes> => {
return await api.GetList(query);
};
const editRequest = async ({ form, row }: EditReq) => {
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
},
form: {
row: {
gutter: 20
},
beforeSubmit(context) {
console.log("beforeSubmit", context);
},
afterSubmit(context) {
console.log("afterSubmit", context);
}
},
columns: {
name: {
title: "姓名",
type: "text",
form: {
helper: "添加和编辑时必填，编辑时额外需要校验长度",
rules: [{ required: true, message: "请输入姓名" }],
component: {
maxlength: 5, // 原生属性要写在这里
props: {
type: "text",
showWordLimit: true
}
}
},
editForm: {
rules: [{ min: 2, max: 5, message: "姓名长度为2-5" }]
}
},
age: {
title: "年龄",
type: "text",
form: {
rules: [{ pattern: /^\d+$/, message: "必须为整数" }],
helper: "正则表达式"
}
},
status: {
title: "必选",
type: "dict-select",
dict: dict({
url: "/mock/dicts/OpenStatusEnum"
}),
form: {
rules: [{ required: true, message: "请选择一个选项" }]
}
},
email: {
title: "邮箱",
type: "text",
form: {
rules: [{ type: "email", message: "请填写正确的邮箱" }]
}
},
url: {
title: "URL",
type: "text",
form: {
rules: [{ type: "url", message: "请填写正确的url" }]
}
}
}
}
};
}

33
packages/ui/certd-client/src/views/crud/form/view/index.vue Normal file
View File

@ -0,0 +1,33 @@
<template>
<fs-page>
<template #header>
<div class="title">
查看表单使用单元格组件显示
<span class="sub">点击查看按钮，打开查看表单显示效果</span>
</div>
</template>
<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: "FormView",
setup() {
const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions });
// 页面打开后获取列表数据
onMounted(() => {
crudExpose.doRefresh();
});
return {
crudBinding,
crudRef
};
}
});
</script>

310
packages/ui/certd-client/src/views/crud/form/view/mock.ts Normal file
View File

@ -0,0 +1,310 @@
import mockUtil from "/src/mock/base";
const options: any = {
name: "FormView",
idGenerator: 0
};
const list = [
{
name: "王小虎",
age: 15,
password: "",
status: "2",
url: "https://baidu.com"
},
{
name: "张三",
age: 18,
password: "",
url: "https://baidu.com"
},
{
status: "2"
}
];
const dictData = [
{
value: "zhinan",
label: "指南",
children: [
{
value: "shejiyuanze",
label: "设计原则",
children: [
{
value: "yizhi",
label: "一致"
},
{
value: "fankui",
label: "反馈"
},
{
value: "xiaolv",
label: "效率"
},
{
value: "kekong",
label: "可控"
}
]
},
{
value: "daohang",
label: "导航",
children: [
{
value: "cexiangdaohang",
label: "侧向导航"
},
{
value: "dingbudaohang",
label: "顶部导航"
}
]
}
]
},
{
value: "zujian",
label: "组件",
children: [
{
value: "basic",
label: "Basic",
children: [
{
value: "layout",
label: "Layout 布局"
},
{
value: "color",
label: "Color 色彩"
},
{
value: "typography",
label: "Typography 字体"
},
{
value: "icon",
label: "Icon 图标"
},
{
value: "button",
label: "Button 按钮"
}
]
},
{
value: "form",
label: "Form",
children: [
{
value: "radio",
label: "Radio 单选框"
},
{
value: "checkbox",
label: "Checkbox 多选框"
},
{
value: "input",
label: "Input 输入框"
},
{
value: "input-number",
label: "InputNumber 计数器"
},
{
value: "select",
label: "Select 选择器"
},
{
value: "cascader",
label: "Cascader 级联选择器"
},
{
value: "switch",
label: "Switch 开关"
},
{
value: "slider",
label: "Slider 滑块"
},
{
value: "time-picker",
label: "TimePicker 时间选择器"
},
{
value: "date-picker",
label: "DatePicker 日期选择器"
},
{
value: "datetime-picker",
label: "DateTimePicker 日期时间选择器"
},
{
value: "upload",
label: "Upload 上传"
},
{
value: "rate",
label: "Rate 评分"
},
{
value: "form",
label: "Form 表单"
}
]
},
{
value: "data",
label: "Data",
children: [
{
value: "table",
label: "Table 表格"
},
{
value: "tag",
label: "Tag 标签"
},
{
value: "progress",
label: "Progress 进度条"
},
{
value: "tree",
label: "Tree 树形控件"
},
{
value: "pagination",
label: "Pagination 分页"
},
{
value: "badge",
label: "Badge 标记"
}
]
},
{
value: "notice",
label: "Notice",
children: [
{
value: "alert",
label: "Alert 警告"
},
{
value: "loading",
label: "Loading 加载"
},
{
value: "message",
label: "Message 消息提示"
},
{
value: "message-box",
label: "MessageBox 弹框"
},
{
value: "notification",
label: "Notification 通知"
}
]
},
{
value: "navigation",
label: "Navigation",
children: [
{
value: "menu",
label: "NavMenu 导航菜单"
},
{
value: "tabs",
label: "Tabs 标签页"
},
{
value: "breadcrumb",
label: "Breadcrumb 面包屑"
},
{
value: "dropdown",
label: "Dropdown 下拉菜单"
},
{
value: "steps",
label: "Steps 步骤条"
}
]
},
{
value: "others",
label: "Others",
children: [
{
value: "dialog",
label: "Dialog 对话框"
},
{
value: "tooltip",
label: "Tooltip 文字提示"
},
{
value: "popover",
label: "Popover 弹出框"
},
{
value: "card",
label: "Card 卡片"
},
{
value: "carousel",
label: "Carousel 走马灯"
},
{
value: "collapse",
label: "Collapse 折叠面板"
}
]
}
]
},
{
value: "ziyuan",
label: "资源",
children: [
{
value: "axure",
label: "Axure Components"
},
{
value: "sketch",
label: "Sketch Templates"
},
{
value: "jiaohu",
label: "组件交互文档"
}
]
}
];
options.list = list;
options.copyTimes = 1000;
const mock = mockUtil.buildMock(options);
mock.push({
path: "/select/cascadeData",
method: "get",
handle(req: any) {
return {
code: 0,
msg: "success",
data: dictData
};
}
});
export default mock;