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

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
@@ -1,5 +1,5 @@
export const crudOptions = `
({expose,dict}) => {
({crudExpose,dict}) => {
return {
columns: {
id: {
@@ -1,27 +0,0 @@
import * as api from "./api";
export default function ({ expose }) {
const pageRequest = async (query) => {
return await api.GetList(query);
};
const editRequest = async ({ form, row }) => {
form.id = row.id;
return await api.UpdateObj(form);
};
const delRequest = async ({ row }) => {
return await api.DelObj(row.id);
};
const addRequest = async ({ form }) => {
return await api.AddObj(form);
};
return {
crudOptions: {
request: {
pageRequest,
addRequest,
editRequest,
delRequest
}
}
};
}
@@ -0,0 +1,49 @@
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) => {
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
};
}
@@ -2,38 +2,27 @@
<fs-crud v-if="crudBinding" ref="crudRef" v-bind="crudBinding" />
</template>
<script>
import { defineComponent, ref, onMounted } from "vue";
import { useCrud, dict, useExpose } from "@fast-crud/fast-crud";
<script lang="ts">
import { defineComponent, ref, onMounted, Ref } from "vue";
import { useCrud, dict, useExpose, useFs, UseFsProps, CrudBinding, CreateCrudOptionsRet, useFsAsync } from "@fast-crud/fast-crud";
import createCrudOptions from "./crud";
import { GetCrud } from "./api";
import _ from "lodash-es";
export default defineComponent({
name: "AdvancedFromBackend",
setup() {
// crud组件的ref
const crudRef = ref();
const crudRef: Ref = ref();
// crud 配置的ref
const crudBinding = ref();
// 暴露的方法
const { expose } = useExpose({ crudRef, crudBinding });
// 你的crud配置
const { crudOptions } = createCrudOptions({ expose });
const crudBinding: Ref<CrudBinding> = ref();
const customValue: any = {}; //自定义变量,传给createCrudOptions的额外参数
// 初始化crud配置
// 页面打开后获取列表数据
onMounted(async () => {
// 从后台获取crud配置
const ret = await GetCrud();
// 编译
const crudBackend = eval(ret);
// 本示例返回的是一个方法字符串,所以要先执行这个方法,获取options
const crudOptionsFromBackend = crudBackend({ expose, dict });
// 与本地options合并
_.merge(crudOptions, crudOptionsFromBackend);
// useCrud
useCrud({ expose, crudOptions });
const customValue = {};
const { crudExpose, extraExport } = await useFsAsync({ crudRef, crudBinding, createCrudOptions, customValue });
// 刷新数据
expose.doRefresh();
await crudExpose.doRefresh();
});
return {
@@ -1,6 +1,7 @@
// @ts-ignore
import mockUtil from "/src/mock/base";
import { crudOptions } from "./crud-backend";
const options = {
const options: any = {
name: "AdvancedFromBackend",
idGenerator: 0
};
@@ -23,7 +24,7 @@ const mock = mockUtil.buildMock(options);
mock.push({
path: "/AdvancedFromBackend/crud",
method: "get",
handle(req) {
handle(req: any) {
return {
code: 0,
msg: "success",
@@ -1,7 +1,7 @@
import { requestForMock } from "/src/api/service";
const request = requestForMock;
const apiPrefix = "/mock/FormLinkage";
export function GetList(query) {
export function GetList(query: any) {
return request({
url: apiPrefix + "/page",
method: "get",
@@ -9,7 +9,7 @@ export function GetList(query) {
});
}
export function AddObj(obj) {
export function AddObj(obj: any) {
return request({
url: apiPrefix + "/add",
method: "post",
@@ -17,7 +17,7 @@ export function AddObj(obj) {
});
}
export function UpdateObj(obj) {
export function UpdateObj(obj: any) {
return request({
url: apiPrefix + "/update",
method: "post",
@@ -25,7 +25,7 @@ export function UpdateObj(obj) {
});
}
export function DelObj(id) {
export function DelObj(id: any) {
return request({
url: apiPrefix + "/delete",
method: "post",
@@ -33,7 +33,7 @@ export function DelObj(id) {
});
}
export function GetObj(id) {
export function GetObj(id: any) {
return request({
url: apiPrefix + "/info",
method: "get",
@@ -1,18 +1,18 @@
import * as api from "./api";
import { dict } from "@fast-crud/fast-crud";
export default function ({ expose }) {
const pageRequest = async (query) => {
import { AddReq, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, dict, EditReq, ScopeContext, UserPageQuery, UserPageRes } from "@fast-crud/fast-crud";
export default function ({ expose }: CreateCrudOptionsProps): CreateCrudOptionsRet {
const pageRequest = async (query: UserPageQuery): Promise<UserPageRes> => {
return await api.GetList(query);
};
const editRequest = async ({ form, row }) => {
const editRequest = async ({ form, row }: EditReq) => {
form.id = row.id;
return await api.UpdateObj(form);
};
const delRequest = async ({ row }) => {
const delRequest = async ({ row }: DelReq) => {
return await api.DelObj(row.id);
};
const addRequest = async ({ form }) => {
const addRequest = async ({ form }: AddReq) => {
return await api.AddObj(form);
};
@@ -51,7 +51,7 @@ export default function ({ expose }) {
cache: true
}),
form: {
valueChange({ form, value, getComponentRef }) {
valueChange({ form, value, getComponentRef }: ScopeContext) {
form.city = undefined; // 将“city”的值置空
form.county = undefined; // 将“county”的值置空
if (value) {
@@ -70,7 +70,7 @@ export default function ({ expose }) {
cache: true,
prototype: true,
// url() 改成构建url,返回一个url
url({ form }) {
url({ form }: any) {
if (form && form.province != null) {
// 本数据字典的url是通过前一个select的选项决定的
return `/mock/linkage/city?province=${form.province}`;
@@ -81,7 +81,7 @@ export default function ({ expose }) {
}),
form: {
// 注释同上
valueChange({ value, form, getComponentRef }) {
valueChange({ value, form, getComponentRef }: ScopeContext) {
if (value) {
form.county = undefined; // 将county的value置空
const countySelect = getComponentRef("county");
@@ -104,7 +104,7 @@ export default function ({ expose }) {
value: "id",
cache: true,
prototype: true,
url({ form }) {
url({ form }: any) {
if (form && form.province != null && form.city != null) {
return `/mock/linkage/county?province=${form.province} &city=${form.city}`;
}
@@ -2,31 +2,20 @@
<fs-crud ref="crudRef" v-bind="crudBinding" />
</template>
<script>
import { defineComponent, ref, onMounted } from "vue";
import { useCrud } from "@fast-crud/fast-crud";
import createCrudOptions from "./crud";
import { useExpose } from "@fast-crud/fast-crud";
<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() {
// 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)
const customValue: any = {}; //自定义变量,传给createCrudOptions的额外参数(可以任意命名,任意多个)
const { crudBinding, crudRef, crudExpose, customExport } = useFs({ createCrudOptions, customValue });
// 页面打开后获取列表数据
onMounted(() => {
expose.doRefresh();
crudExpose.doRefresh();
});
return {
@@ -1,6 +1,7 @@
// @ts-ignore
import mockUtil from "/src/mock/base";
import _ from "lodash-es";
const options = {
const options: any = {
name: "FormLinkage",
idGenerator: 0
};
@@ -64,12 +65,12 @@ const tree = [
];
options.list = list;
options.copyTimes = 1000;
options.copyTimes = 100;
const mock = mockUtil.buildMock(options);
function omitChildren(orignalListt) {
const list = [];
orignalListt.forEach((item) => {
function omitChildren(originalList: any) {
const list: any = [];
originalList.forEach((item: any) => {
list.push(_.omit(item, "children"));
});
return list;
@@ -90,7 +91,7 @@ mock.push({
mock.push({
path: "/mock/linkage/city",
method: "get",
handle(req) {
handle(req: any) {
const province = parseInt(req.params.province);
const a = tree.filter((item) => {
return item.id === province;
@@ -107,7 +108,7 @@ mock.push({
mock.push({
path: "/mock/linkage/county",
method: "get",
handle(req) {
handle(req: any) {
const province = parseInt(req.params.province);
const a = tree.filter((item) => {
return item.id === province;