mirror of
https://github.com/certd/certd.git
synced 2026-05-18 22:57:31 +08:00
🔱: [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:
+1
-1
@@ -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 {
|
||||
|
||||
+3
-2
@@ -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",
|
||||
+5
-5
@@ -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",
|
||||
+10
-10
@@ -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 {
|
||||
|
||||
+8
-7
@@ -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;
|
||||
Reference in New Issue
Block a user