lkddi/certd
1
0
Fork 0
mirror of https://github.com/certd/certd.git synced 2026-05-18 06:17:31 +08:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
perf: 完善文档，完善部分types
perf: 优化d.ts类型
perf: 日期增加week、month、year、quarter类型
feat: resetCrudOptions 示例
feat: tabs快捷查询组件
fix: 行编辑支持多级表头

https://github.com/fast-crud/fast-crud/issues/143
perf: antdv 增加自定义表头示例

https://github.com/fast-crud/fast-crud/issues/141
perf: 表单下方按钮支持context

https://github.com/fast-crud/fast-crud/issues/142
This commit is contained in:
GitHub Actions Bot
2023-03-09 19:24:01 +00:00
parent 76dd23174a
commit 52a167c647
100 changed files with 1465 additions and 585 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/ui/certd-client/src/views/crud/feature/column-resize/index.vue
+10 -3
View File
@@ -1,8 +1,15 @@
<template>
<fs-page>
<fs-crud ref="crudRef" style="position: relative" v-bind="crudBinding">
<template #actionbar-right> 列头可以调整宽度 </template>
</fs-crud>
<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/table.html#对应ui库的table组件的参数">文档</a>
</div>
</template>
<fs-crud ref="crudRef" style="position: relative" v-bind="crudBinding"> </fs-crud>
</fs-page>
</template>
packages/ui/certd-client/src/views/crud/feature/column-sort/index.vue
+11 -5
View File
@@ -1,12 +1,18 @@
<template>
<fs-page>
<template #header>
<div class="title">
字段列排序
<span class="sub">表格列和表单字段可以单独配置顺序，配置order即可控制字段的顺序，数字越小越靠前，默认为1，（配置0或负数排前面，配置2以上排后面）</span>
</div>
<div class="more">
<a target="_blank" href="http://fast-crud.docmirror.cn/api/crud-options/columns.html#key-column-order">列顺序配置</a> /
<a target="_blank" href="http://fast-crud.docmirror.cn/api/crud-options/columns.html#key-form-order">表单字段顺序配置</a>
</div>
</template>
<fs-crud ref="crudRef" v-bind="crudBinding">
<template #actionbar-right>
<a-alert
class="ml-1"
type="info"
message="配置order即可控制字段的顺序，数字越小越靠前，默认为1，（配置0或负数排前面，配置2以上排后面）"
/>
<a-alert class="ml-1" type="info" message="" />
</template>
</fs-crud>
</fs-page>
packages/ui/certd-client/src/views/crud/feature/columns-set/index.vue
+6 -6
View File
@@ -1,12 +1,12 @@
<template>
<fs-page>
<template #header>
<div class="title">列设置（简化模式）</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">
<template #actionbar-right>
<a-alert
class="ml-1"
type="warning"
message="列设置支持简化模式"
/>
<a-alert class="ml-1" type="warning" message="列设置支持简化模式 ------> 点击最右侧按钮查看效果" />
</template>
</fs-crud>
</fs-page>
@@ -42,7 +42,7 @@ export default defineComponent({
return {
crudBinding,
crudRef,
crudRef
};
}
});
packages/ui/certd-client/src/views/crud/feature/editable-row/crud.jsx
+25 -15
View File
@@ -66,21 +66,31 @@ export default function ({ expose }) {
title: "姓名",
type: "text"
},
province: {
title: "省份",
search: { show: true },
type: "dict-select",
dict: dict({
value: "id",
label: "text",
data: [
{ id: "sz", text: "深圳", color: "success" },
{ id: "gz", text: "广州", color: "primary" },
{ id: "bj", text: "北京" },
{ id: "wh", text: "武汉" },
{ id: "sh", text: "上海" }
]
})
address: {
title: "地址",
children: {
province: {
title: "省份",
search: { show: true },
type: "text"
},
city: {
title: "城市",
search: { show: true },
type: "dict-select",
dict: dict({
value: "id",
label: "text",
data: [
{ id: "sz", text: "深圳", color: "success" },
{ id: "gz", text: "广州", color: "primary" },
{ id: "bj", text: "北京" },
{ id: "wh", text: "武汉" },
{ id: "sh", text: "上海" }
]
})
}
}
}
}
}
packages/ui/certd-client/src/views/crud/feature/editable-row/index.vue
+4
View File
@@ -1,5 +1,9 @@
<template>
<fs-page>
<template #header>
<div class="title">行编辑模式</div>
<div class="more"><a target="_blank" href="http://fast-crud.docmirror.cn/api/expose.html">文档</a></div>
</template>
<fs-crud ref="crudRef" v-bind="crudBinding" />
</fs-page>
</template>
packages/ui/certd-client/src/views/crud/feature/editable/crud.jsx
+25 -15
View File
@@ -83,21 +83,31 @@ export default function ({ expose }) {
title: "姓名",
type: "text"
},
province: {
title: "省份",
search: { show: true },
type: "dict-select",
dict: dict({
value: "id",
label: "text",
data: [
{ id: "sz", text: "深圳", color: "success" },
{ id: "gz", text: "广州", color: "primary" },
{ id: "bj", text: "北京" },
{ id: "wh", text: "武汉" },
{ id: "sh", text: "上海" }
]
})
address: {
title: "地址",
children: {
province: {
title: "省份",
search: { show: true },
type: "text"
},
city: {
title: "城市",
search: { show: true },
type: "dict-select",
dict: dict({
value: "id",
label: "text",
data: [
{ id: "sz", text: "深圳", color: "success" },
{ id: "gz", text: "广州", color: "primary" },
{ id: "bj", text: "北京" },
{ id: "wh", text: "武汉" },
{ id: "sh", text: "上海" }
]
})
}
}
}
}
}
packages/ui/certd-client/src/views/crud/feature/editable/index.vue
+4
View File
@@ -1,5 +1,9 @@
<template>
<fs-page>
<template #header>
<div class="title">可编辑</div>
<div class="more"><a target="_blank" href="http://fast-crud.docmirror.cn/api/expose.html">文档</a></div>
</template>
<fs-crud ref="crudRef" v-bind="crudBinding">
<template #actionbar-right>
<!-- <fs-button class="ml-1" @click="addRow">添加行</fs-button>-->
packages/ui/certd-client/src/views/crud/feature/expand/crud.jsx
+1 -1
View File
@@ -26,7 +26,7 @@ export default function ({ expose }) {
},
table: {
//默认展开第一行
defaultExpandedRowKeys:[1],
defaultExpandedRowKeys: [1],
slots: {
expandedRowRender: (scope) => {
return (
packages/ui/certd-client/src/views/crud/feature/expand/index.vue
+6 -26
View File
@@ -1,12 +1,10 @@
<template>
<fs-page>
<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>
<template #header>
<div class="title">行展开</div>
<div class="more"><a target="_blank" href="http://fast-crud.docmirror.cn/api/crud-options/table.html#对应ui库的table组件的参数">文档</a></div>
</template>
<fs-crud ref="crudRef" v-bind="crudBinding"> </fs-crud>
</fs-page>
</template>
@@ -38,27 +36,9 @@ export default defineComponent({
expose.doRefresh();
});
const handleBatchDelete = () => {
if (selectedRowKeys.value?.length > 0) {
Modal.confirm({
title: "确认",
content: `确定要批量删除这${selectedRowKeys.value.length}条记录吗`,
async onOk() {
await BatchDelete(selectedRowKeys.value);
message.info("删除成功");
expose.doRefresh();
selectedRowKeys.value = [];
}
});
} else {
message.error("请先勾选记录");
}
};
return {
crudBinding,
crudRef,
handleBatchDelete
crudRef
};
}
});
packages/ui/certd-client/src/views/crud/feature/header/api.ts
+50
View File
@@ -0,0 +1,50 @@
import { requestForMock } from "/src/api/service";
const request = requestForMock;
const apiPrefix = "/mock/FeatureHeader";
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 }
});
}
export function BatchDelete(ids: any[]) {
return request({
url: apiPrefix + "/batchDelete",
method: "post",
data: { ids }
});
}
packages/ui/certd-client/src/views/crud/feature/header/crud.tsx
+48
View File
@@ -0,0 +1,48 @@
import * as api from "./api.js";
import { CreateCrudOptionsProps, dict, CreateCrudOptionsRet, EditReq, DelReq, AddReq } from "@fast-crud/fast-crud";
export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOptionsRet {
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: {
request: {
pageRequest: api.GetList,
addRequest,
editRequest,
delRequest
},
table: {
slots: {
headerCell({ column }: any) {
if (column.key === "text") {
return (
<span class={"flex "}>
Text
<a-tooltip title={"tooltip 提示"}>
<fs-icon class={"ml-5"} icon={"ion:alert-circle-outline"}></fs-icon>
</a-tooltip>
</span>
);
}
}
}
},
columns: {
text: {
title: "text",
type: "text",
search: { show: true }
}
}
}
};
}
packages/ui/certd-client/src/views/crud/feature/header/index.vue
+27
View File
@@ -0,0 +1,27 @@
<template>
<fs-page>
<template #header>
<div class="title">
<span>自定义header</span>
<span class="sub">通过配置a-table的headerCell插槽实现</span>
</div>
</template>
<fs-crud ref="crudRef" v-bind="crudBinding" />
</fs-page>
</template>
<script lang="ts" setup>
import { onMounted } from "vue";
import createCrudOptions from "./crud.js";
import { useFs, UseFsProps } from "@fast-crud/fast-crud";
defineOptions({
name: "FeatureHeader"
});
const customValue: any = {}; //自定义变量，传给createCrudOptions的额外参数（可以任意命名，任意多个）
const { crudBinding, crudRef, crudExpose, customExport } = useFs({ createCrudOptions, customValue } as UseFsProps);
// 页面打开后获取列表数据
onMounted(() => {
crudExpose.doRefresh();
});
</script>
packages/ui/certd-client/src/views/crud/feature/header/mock.ts
+14
View File
@@ -0,0 +1,14 @@
// @ts-ignore
import mockUtil from "/src/mock/base";
const options: any = {
name: "FeatureHeader",
idGenerator: 0
};
const list = [
{
text: "上面自定义表头"
}
];
options.list = list;
const mock = mockUtil.buildMock(options);
export default mock;
packages/ui/certd-client/src/views/crud/feature/search/crud.jsx
+14 -25
View File
@@ -1,6 +1,6 @@
import * as api from "./api";
import { dict } from "@fast-crud/fast-crud";
import { ref } from "vue";
import { computed, ref } from "vue";
export default function ({ expose }) {
const pageRequest = async (query) => {
return await api.GetList(query);
@@ -16,6 +16,9 @@ export default function ({ expose }) {
const addRequest = async ({ form }) => {
return await api.AddObj(form);
};
let statusRef = dict({
url: "/mock/dicts/OpenStatusEnum?single"
});
return {
crudOptions: {
request: {
@@ -24,15 +27,9 @@ export default function ({ expose }) {
editRequest,
delRequest
},
table: {
// 表头过滤改变事件
onFilterChange(e) {
console.log("onFilterChange", e);
}
},
search: {
initialForm: {
radio: "0"
radio: null
},
buttons: {
custom: {
@@ -51,6 +48,14 @@ export default function ({ expose }) {
}
}
},
tabs: {
name: "radio",
show: true,
type: "card",
options: computed(() => {
return statusRef.data;
})
},
columns: {
id: {
title: "ID",
@@ -67,23 +72,7 @@ export default function ({ expose }) {
title: "状态",
search: { show: true },
type: "dict-radio",
dict: dict({
url: "/mock/dicts/OpenStatusEnum?single"
}),
column: {
filters: [
{ text: "开", value: "1" },
{ text: "关", value: "0" },
{ text: "停", value: "2" }
],
// specify the condition of filtering result
// here is that finding the name started with `value`
onFilter: (value, record) => {
return record.radio === value;
},
sorter: (a, b) => a.radio - b.radio,
sortDirections: ["descend"]
}
dict: statusRef
}
}
}
packages/ui/certd-client/src/views/crud/feature/search/index.vue
+2 -2
View File
@@ -46,10 +46,10 @@ export default defineComponent({
message.info(`searchForm:${JSON.stringify(form)}`);
},
setSearchFormData() {
expose.setSearchFormData({ form: { radio: "1", test: 2 }, mergeForm: true });
expose.setSearchFormData({ form: { radio: "1" }, mergeForm: true });
},
clearSearchForm() {
expose.setSearchFormData({ form: {}, mergeForm: false });
expose.setSearchFormData({ form: { radio: null }, mergeForm: false });
}
};
}
packages/ui/certd-client/src/views/crud/feature/tabs/api.ts
+42
View File
@@ -0,0 +1,42 @@
import { requestForMock } from "/src/api/service";
const request = requestForMock;
const apiPrefix = "/mock/FeatureTabs";
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: number) {
return request({
url: apiPrefix + "/delete",
method: "post",
params: { id }
});
}
export function GetObj(id: number) {
return request({
url: apiPrefix + "/info",
method: "get",
params: { id }
});
}
packages/ui/certd-client/src/views/crud/feature/tabs/crud.tsx
+85
View File
@@ -0,0 +1,85 @@
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) => {
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 statusRef = dict({
url: "/mock/dicts/OpenStatusEnum?single"
});
return {
crudOptions: {
request: {
pageRequest,
addRequest,
editRequest,
delRequest
},
search: {
initialForm: {
radio: null
},
buttons: {
custom: {
text: "自定义",
show: true,
order: 3,
icon: {
icon: "ant-design:search",
style: {
"font-size": "16px"
}
},
click() {
console.log("点击了自定义按钮");
}
}
}
},
tabs: {
name: "radio",
show: true
//type: 'card', //tabs类型
// defaultOptions: { //第一个tab页签显示
// show: true,
// value: null, //点击第一个页签，查询值
// label: '全部', // 第一个页签的名称
// },
// options: computed(() => { //选项，默认从name字段的dict里面获取
// return statusRef.data;
// })
},
columns: {
id: {
title: "ID",
key: "id",
type: "number",
column: {
width: 50
},
form: {
show: false
}
},
radio: {
title: "状态",
search: { show: true },
type: "dict-radio",
dict: statusRef
}
}
}
};
}
packages/ui/certd-client/src/views/crud/feature/tabs/index.vue
+60
View File
@@ -0,0 +1,60 @@
<template>
<fs-page>
<template #header>
<div class="title">
Tabs快捷查询
<span class="sub">表格顶部显示tabs，点击tabs快捷查询</span>
</div>
<div class="more">
<a target="_blank" href="http://fast-crud.docmirror.cn/api/crud-options/tabs.html">文档</a>
</div>
</template>
<fs-crud ref="crudRef" v-bind="crudBinding"> </fs-crud>
</fs-page>
</template>
<script lang="ts">
import { defineComponent, ref, onMounted } from "vue";
import { useCrud } from "@fast-crud/fast-crud";
import createCrudOptions from "./crud";
import { useExpose } from "@fast-crud/fast-crud";
import { message } from "ant-design-vue";
export default defineComponent({
name: "FeatureTabs",
setup() {
// crud组件的ref
const crudRef = ref();
// crud 配置的ref
const crudBinding = ref();
// 暴露的方法
const { expose } = useExpose({ crudRef, crudBinding });
// 你的crud配置
const { crudOptions } = createCrudOptions({ expose });
// 初始化crud配置
// eslint-disable-next-line @typescript-eslint/no-unused-vars,no-unused-vars
const { resetCrudOptions } = useCrud({ expose, crudOptions });
// 你可以调用此方法，重新初始化crud配置
// resetCrudOptions(options)
// 页面打开后获取列表数据
onMounted(() => {
expose.doRefresh();
});
return {
crudBinding,
crudRef,
getSearchFormData() {
const form = expose.getSearchFormData();
message.info(`searchForm:${JSON.stringify(form)}`);
},
setSearchFormData() {
expose.setSearchFormData({ form: { radio: "1" }, mergeForm: true });
},
clearSearchForm() {
expose.setSearchFormData({ form: { radio: null }, mergeForm: false });
}
};
}
});
</script>
packages/ui/certd-client/src/views/crud/feature/tabs/mock.ts
+20
View File
@@ -0,0 +1,20 @@
// @ts-ignore
import mockUtil from "/src/mock/base";
const options: any = {
name: "FeatureTabs",
idGenerator: 0
};
const list = [
{
radio: "1"
},
{
radio: "2"
},
{
radio: "0"
}
];
options.list = list;
const mock = mockUtil.buildMock(options);
export default mock;